* {
    box-sizing: border-box;
}

body.panel-body {
    min-height: 100vh;
    margin: 0;
    background: #09090b;
    color: var(--text-100);
    font-family: Inter, Arial, sans-serif;
}

.panel-body a {
    color: inherit;
    text-decoration: none;
}

.panel-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: 260px;
    border-right: 1px solid var(--border-100);
    background: #111113;
    padding: 1rem;
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    margin-bottom: 1.25rem;
}

.panel-brand img,
.panel-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: var(--primary-100);
    color: #06110f;
    font-weight: 800;
}

.panel-brand img {
    object-fit: cover;
    background: var(--bg-200);
}

.panel-brand strong {
    overflow: hidden;
    color: var(--text-100);
    font-size: .95rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-nav {
    display: grid;
    gap: .35rem;
}

.panel-nav a,
.panel-sidebar-footer a,
.panel-sidebar-footer button {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.75rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-200);
    font: inherit;
    padding: 0 .8rem;
    text-align: left;
}

.panel-nav a i,
.panel-sidebar-footer i {
    width: 1.1rem;
    color: inherit;
    text-align: center;
}

.panel-nav a:hover,
.panel-sidebar-footer a:hover,
.panel-sidebar-footer button:hover,
.panel-nav a.is-active {
    border-color: var(--border-100);
    background: var(--bg-200);
    color: var(--text-100);
}

.panel-nav a.is-active i {
    color: var(--primary-100);
}

.panel-sidebar-footer {
    display: grid;
    gap: .35rem;
    margin-top: auto;
}

.panel-sidebar-footer form {
    margin: 0;
}

.panel-sidebar-footer button {
    cursor: pointer;
}

.panel-main {
    min-height: 100vh;
    margin-left: 260px;
    padding: 1.5rem;
}

.panel-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-topbar p,
.panel-section-heading p,
.panel-info-block p,
.panel-confirm p {
    margin: 0 0 .3rem;
    color: var(--primary-100);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.panel-topbar h1 {
    margin: 0;
    color: var(--text-100);
    font-size: 1.8rem;
    line-height: 1.1;
}

.panel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-200);
    color: var(--text-100);
    font: inherit;
    font-weight: 700;
    padding: 0 .9rem;
    cursor: pointer;
}

.panel-button-primary {
    border-color: color-mix(in srgb, var(--primary-100) 45%, var(--border-100));
    background: var(--primary-100);
    color: #06110f;
}

.panel-button-danger {
    border-color: color-mix(in srgb, var(--danger-100) 40%, var(--border-100));
    background: var(--danger-100);
    color: #fff;
}

.panel-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.panel-action-group form {
    margin: 0;
}

.panel-messages {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.panel-message {
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-200);
    color: var(--text-100);
    padding: .8rem 1rem;
}

.panel-message-success {
    border-color: color-mix(in srgb, var(--success-100) 40%, var(--border-100));
}

.panel-message-error {
    border-color: color-mix(in srgb, var(--danger-100) 40%, var(--border-100));
}

.panel-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.panel-stats-subscription {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.panel-stat,
.panel-section,
.panel-form-section,
.panel-confirm,
.panel-info-block {
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-200);
}

.panel-stat {
    min-height: 6rem;
    padding: 1rem;
}

.panel-stat span {
    display: block;
    margin-bottom: .55rem;
    color: var(--text-200);
    font-size: .82rem;
    font-weight: 700;
}

.panel-stat strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-100);
    font-size: 1.65rem;
    line-height: 1.1;
}

.panel-section {
    padding: 1rem;
}

.panel-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(140px, .7fr) auto;
    gap: .75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.panel-filter-form-logs {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, .7fr) auto;
}

.panel-filter-form label {
    display: grid;
    gap: .35rem;
    color: var(--text-200);
    font-size: .8rem;
    font-weight: 800;
}

.panel-filter-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.panel-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-section-heading h2,
.panel-info-block h2,
.panel-form-section h2,
.panel-confirm h2 {
    margin: 0;
    color: var(--text-100);
    font-size: 1.1rem;
    line-height: 1.25;
}

.panel-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.panel-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.panel-table th,
.panel-table td {
    border-bottom: 1px solid var(--border-100);
    padding: .85rem .75rem;
    color: var(--text-100);
    font-size: .9rem;
    text-align: left;
    vertical-align: middle;
}

.panel-table th {
    color: var(--text-200);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-table tr:last-child td {
    border-bottom: 0;
}

.panel-table-vehicles {
    min-width: 920px;
}

.panel-actions-col {
    width: 8.5rem;
}

.panel-vehicle-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 18rem;
}

.panel-vehicle-cell img {
    width: 4.5rem;
    height: 3.2rem;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-300);
}

.panel-vehicle-cell strong,
.panel-vehicle-cell span {
    display: block;
}

.panel-vehicle-cell strong {
    margin-bottom: .2rem;
}

.panel-vehicle-cell span,
.panel-muted {
    color: var(--text-200);
    font-size: .82rem;
}

.panel-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    color: var(--text-200);
    font-size: .8rem;
    font-weight: 800;
    padding: 0 .55rem;
    white-space: nowrap;
}

.panel-pill-ok,
.panel-pill-available {
    color: var(--success-100);
}

.panel-pill-reserved {
    color: var(--warning-100);
}

.panel-pill-sold {
    color: var(--danger-100);
}

.panel-row-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.panel-row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    color: var(--text-100);
}

.panel-danger-link {
    color: var(--danger-100) !important;
}

.panel-empty {
    color: var(--text-200) !important;
    text-align: center !important;
}

.panel-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.panel-pagination a,
.panel-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    color: var(--text-100);
    padding: 0 .75rem;
}

.panel-form {
    display: grid;
    gap: 1rem;
}

.panel-preview-section {
    margin-bottom: 1rem;
}

.panel-image-preview-row {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.panel-image-preview {
    flex: 0 0 8rem;
    margin: 0;
}

.panel-image-preview img {
    display: block;
    width: 8rem;
    height: 5.2rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    object-fit: cover;
}

.panel-image-preview figcaption {
    margin-top: .35rem;
    color: var(--text-200);
    font-size: .78rem;
    font-weight: 700;
}

.panel-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: end;
}

.panel-logo-preview {
    display: inline-grid;
    gap: .35rem;
    margin: 0 0 1rem;
}

.panel-logo-preview img {
    width: 7rem;
    height: 7rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    object-fit: contain;
    padding: .4rem;
}

.panel-logo-preview figcaption {
    color: var(--text-200);
    font-size: .78rem;
    font-weight: 700;
}

.panel-color-grid .panel-input[type="color"] {
    min-height: 3.2rem;
    padding: .25rem;
}

.panel-form-section {
    padding: 1rem;
}

.panel-form-section h2 {
    margin-bottom: 1rem;
}

.panel-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.panel-form-grid label {
    display: grid;
    align-content: start;
    gap: .4rem;
    color: var(--text-200);
    font-size: .82rem;
    font-weight: 700;
}

.panel-input {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    color: var(--text-100);
    font: inherit;
    padding: .65rem .75rem;
}

textarea.panel-input {
    min-height: 8rem;
    resize: vertical;
}

.panel-check-row {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    padding: .65rem .75rem;
}

.panel-check-row span {
    order: 2;
}

.panel-checkbox {
    order: 1;
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-100);
}

.panel-field-error,
.panel-form-errors {
    color: var(--danger-100);
}

.panel-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.panel-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.panel-gallery-item {
    display: grid;
    gap: .75rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    padding: .75rem;
}

.panel-gallery-item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-200);
}

.panel-gallery-main-section {
    margin-bottom: 1rem;
}

.panel-gallery-main-preview {
    display: grid;
    gap: .45rem;
    width: min(100%, 360px);
    margin: 0;
}

.panel-gallery-main-preview img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    object-fit: contain;
}

.panel-gallery-main-preview figcaption {
    color: var(--text-200);
    font-size: .8rem;
    font-weight: 700;
}

.panel-gallery-item label {
    display: grid;
    gap: .35rem;
    color: var(--text-200);
    font-size: .8rem;
    font-weight: 700;
}

.panel-qr-section {
    margin-bottom: 1rem;
}

.panel-qr-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.panel-qr-image {
    width: 180px;
    max-width: 100%;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: #fff;
}

.panel-qr-actions,
.panel-empty-action {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.panel-qr-actions p,
.panel-empty-action p {
    width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.panel-confirm {
    display: grid;
    gap: 1.25rem;
    max-width: 680px;
    padding: 1.25rem;
}

.panel-confirm span {
    color: var(--text-200);
}

.panel-subscription-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1rem;
    border: 0;
    background: transparent;
    padding: 0;
}

.panel-subscription-usage {
    margin-bottom: 1rem;
}

.panel-usage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.panel-usage-grid article {
    display: grid;
    gap: .35rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    padding: .9rem;
}

.panel-usage-grid span {
    color: var(--text-200);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-usage-grid strong {
    color: var(--text-100);
    font-size: 1.3rem;
}

.panel-limit-alerts {
    display: grid;
    gap: .5rem;
    margin-top: .85rem;
}

.panel-limit-alerts p {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--warning-100) 45%, var(--border-100));
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning-100) 10%, var(--bg-200));
    color: var(--text-100);
    padding: .75rem;
}

.panel-limit-alerts i {
    color: var(--warning-100);
}

.panel-info-block {
    padding: 1rem;
}

.panel-service-list {
    display: grid;
    gap: .6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.panel-service-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-200);
}

.panel-service-list i {
    color: var(--success-100);
}

.panel-definition-list {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 0;
}

.panel-definition-list div {
    display: grid;
    gap: .2rem;
}

.panel-definition-list dt {
    color: var(--text-200);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.panel-definition-list dd {
    margin: 0;
    color: var(--text-100);
}

.login-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-panel {
    display: grid;
    gap: 1rem;
    width: min(100%, 420px);
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-200);
    padding: 1.25rem;
}

.login-heading p {
    margin: 0 0 .25rem;
    color: var(--primary-100);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.login-heading h1 {
    margin: 0;
    color: var(--text-100);
    font-size: 1.65rem;
}

.login-panel label {
    display: grid;
    gap: .4rem;
    color: var(--text-200);
    font-size: .85rem;
    font-weight: 700;
}

.login-panel input {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-300);
    color: var(--text-100);
    font: inherit;
    padding: .65rem .75rem;
}

.panel-access-body {
    background: #09090b;
}

.dealer-access-shell {
    width: min(960px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 2rem;
}

.dealer-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dealer-access-header form {
    margin: 0;
}

.dealer-access-brand {
    margin: 0;
}

.dealer-access-intro {
    margin-bottom: 1rem;
}

.dealer-access-intro p {
    margin: 0 0 .3rem;
    color: var(--primary-100);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dealer-access-intro h1 {
    margin: 0;
    color: var(--text-100);
    font-size: 2rem;
}

.dealer-access-intro span,
.dealer-access-empty p {
    color: var(--text-200);
}

.dealer-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .8rem;
}

.dealer-access-card {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--border-100);
    border-radius: 8px;
    background: var(--bg-200);
    padding: 1rem;
}

.dealer-access-card-main {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.dealer-access-card-main img,
.dealer-access-card-main span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    background: var(--primary-100);
    color: #06110f;
    font-weight: 800;
}

.dealer-access-card-main img {
    object-fit: contain;
    background: var(--bg-300);
    padding: .25rem;
}

.dealer-access-card h2 {
    margin: 0;
    color: var(--text-100);
    font-size: 1.05rem;
}

.dealer-access-card p {
    margin: .2rem 0 0;
    color: var(--text-200);
    font-size: .85rem;
}

.dealer-access-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    text-align: center;
}

.dealer-access-empty i {
    color: var(--accent-100);
    font-size: 2rem;
}

.dealer-access-empty h2 {
    margin: 0;
}

@media (max-width: 1080px) {
    .panel-stats,
    .panel-stats-subscription,
    .panel-usage-grid,
    .panel-form-grid,
    .panel-subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .panel-sidebar {
        position: static;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border-100);
    }

    .panel-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-sidebar-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 1rem;
    }

    .panel-main {
        margin-left: 0;
        padding: 1rem;
    }

    .panel-topbar,
    .panel-section-heading,
    .panel-form-actions,
    .panel-filter-actions,
    .panel-inline-form {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .panel-stats,
    .panel-stats-subscription,
    .panel-usage-grid,
    .panel-filter-form,
    .panel-filter-form-logs,
    .panel-form-grid,
    .panel-subscription-grid {
        grid-template-columns: 1fr;
    }

    .panel-qr-layout {
        grid-template-columns: 1fr;
    }
}