:root {
    color-scheme: light;
    --background: #f5f1eb;
    --background-elevated: #faf7f2;
    --card: #fffdfb;
    --card-strong: #ffffff;
    --foreground: #27211c;
    --muted: #f0ebe4;
    --muted-strong: #e9e1d8;
    --muted-foreground: #716960;
    --border: #e4ddd5;
    --border-strong: #d7cbbf;
    --primary: #9a7b5b;
    --primary-hover: #846747;
    --primary-active: #72583c;
    --primary-foreground: #fffaf5;
    --primary-soft: #eee4d8;
    --success: #4f7a61;
    --success-soft: #e8f1eb;
    --warning: #a56f2b;
    --warning-soft: #f8edd9;
    --danger: #a9534c;
    --danger-soft: #f8e8e6;
    --info: #526f8c;
    --info-soft: #e8eff6;
    --chart-2: #c2a47f;
    --chart-3: #6d7b68;
    --chart-4: #a46c63;
    --shadow-xs: 0 1px 2px rgba(57, 43, 30, .05);
    --shadow-sm: 0 5px 18px rgba(57, 43, 30, .065);
    --shadow-md: 0 18px 45px rgba(45, 32, 21, .12);
    --shadow-lg: 0 30px 75px rgba(38, 27, 18, .18);
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --sidebar-width: 276px;
    --sidebar-collapsed: 84px;
    --topbar-height: 68px;
    --content-max: 1560px;
    --focus-ring: 0 0 0 3px rgba(154, 123, 91, .18);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

    :root.dark {
        color-scheme: dark;
        --background: #171410;
        --background-elevated: #1a1713;
        --card: #201c17;
        --card-strong: #25201b;
        --foreground: #f2ece5;
        --muted: #29241e;
        --muted-strong: #332c25;
        --muted-foreground: #aaa097;
        --border: #342e27;
        --border-strong: #463d33;
        --primary: #c0a17f;
        --primary-hover: #cfb18f;
        --primary-active: #dbc09f;
        --primary-foreground: #211912;
        --primary-soft: #3b3025;
        --success: #7fad8c;
        --success-soft: #213329;
        --warning: #d0a15e;
        --warning-soft: #3c3020;
        --danger: #d78076;
        --danger-soft: #3d2725;
        --info: #8caac7;
        --info-soft: #263441;
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
        --shadow-sm: 0 8px 24px rgba(0, 0, 0, .16);
        --shadow-md: 0 20px 48px rgba(0, 0, 0, .3);
        --shadow-lg: 0 34px 80px rgba(0, 0, 0, .42);
        --focus-ring: 0 0 0 3px rgba(192, 161, 127, .22);
    }

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--background);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

    body.scroll-locked {
        overflow: hidden;
    }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button, summary, a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    display: block;
}

h1, h2, h3, h4, p {
    margin-top: 0;
}

h1, h2, h3, h4 {
    letter-spacing: -.025em;
}

p {
    color: var(--muted-foreground);
}

code, kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

code {
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--muted);
    padding: 2px 5px;
    color: var(--foreground);
    font-size: .84em;
}

hr {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    border: 0;
    background: var(--border);
}

::selection {
    background: var(--primary-soft);
    color: var(--foreground);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* App loading and Blazor error */
.app-loader {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
}

.app-loader__mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 22px;
    font-weight: 700;
    box-shadow: var(--shadow-md);
}

.app-loader__bar {
    width: 150px;
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--muted-strong);
}

    .app-loader__bar span {
        display: block;
        width: 45%;
        height: 100%;
        border-radius: inherit;
        background: var(--primary);
        animation: loader-slide 1.1s ease-in-out infinite alternate;
    }

@keyframes loader-slide {
    from {
        transform: translateX(-10%);
    }

    to {
        transform: translateX(130%);
    }
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: none;
    max-width: 620px;
    margin-inline: auto;
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    padding: 14px 52px 14px 16px;
}

    #blazor-error-ui .reload {
        color: var(--primary);
        font-weight: 650;
    }

    #blazor-error-ui .dismiss {
        position: absolute;
        top: 13px;
        right: 8px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
    }

/* Shell */
.app-shell {
    min-height: 100vh;
}

.app-main {
    min-width: 0;
    min-height: 100vh;
}

.page-content {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
}

.mobile-scrim {
    position: fixed;
    z-index: 89;
    inset: 0;
    background: rgba(20, 16, 12, .48);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.sidebar {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    display: flex;
    width: min(88vw, var(--sidebar-width));
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform .24s ease;
}

    .sidebar.is-mobile-open {
        transform: translateX(0);
    }

.sidebar__header {
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    color: var(--foreground);
    font-size: 18px;
    font-weight: 720;
    letter-spacing: -.04em;
    line-height: 1;
    text-decoration: none;
}

.brand--light {
    color: white;
}

.sidebar__header .brand {
    flex: 1;
}

.brand__logo {
    display: block;
    width: auto;
    max-width: 160px;
    height: 32px;
    object-fit: contain;
    object-position: left center;
}

/* Dark-colored logo displayed on light backgrounds. */
.brand__logo--for-light {
    display: block;
}

/* Light-colored logo displayed on dark backgrounds. */
.brand__logo--for-dark {
    display: none;
}

:root.dark .brand__logo--for-light {
    display: none;
}

:root.dark .brand__logo--for-dark {
    display: block;
}

.sidebar__collapse {
    display: none !important;
}

.sidebar__mobile-close {
    display: inline-grid;
}

.sidebar__workspace {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 12px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background-elevated);
    padding: 10px;
}

.sidebar__workspace-copy {
    min-width: 0;
    flex: 1;
}

    .sidebar__workspace-copy strong, .sidebar__workspace-copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar__workspace-copy strong {
        font-size: 13px;
    }

    .sidebar__workspace-copy span {
        color: var(--muted-foreground);
        font-size: 11px;
    }

.sidebar__nav {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 10px 18px;
    scrollbar-width: thin;
}

.nav-section {
    display: grid;
    gap: 3px;
    margin-bottom: 18px;
}

.nav-section__label {
    padding: 0 10px 6px;
    color: var(--muted-foreground);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 11px;
    border-radius: 9px;
    padding: 8px 10px;
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 520;
    transition: background .16s ease, color .16s ease;
}

    .nav-item:hover {
        background: var(--muted);
        color: var(--foreground);
    }

    .nav-item.is-active {
        background: var(--primary-soft);
        color: var(--primary-active);
        font-weight: 650;
    }

.dark .nav-item.is-active {
    color: var(--primary);
}

.nav-item .icon {
    flex: 0 0 auto;
}

.nav-badge {
    margin-left: auto;
    border-radius: 99px;
    background: var(--muted-strong);
    padding: 1px 7px;
    color: var(--foreground);
    font-size: 10px;
    font-weight: 700;
}

.sidebar__footer {
    display: grid;
    gap: 5px;
    border-top: 1px solid var(--border);
    padding: 10px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-md);
    padding: 8px;
}

    .sidebar-user:hover {
        background: var(--muted);
    }

    .sidebar-user > div:nth-child(2) {
        min-width: 0;
        flex: 1;
    }

    .sidebar-user strong, .sidebar-user span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-user strong {
        font-size: 12px;
    }

    .sidebar-user span {
        color: var(--muted-foreground);
        font-size: 10px;
    }

.topbar {
    position: sticky;
    z-index: 70;
    top: 0;
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(228, 221, 213, .8);
    background: color-mix(in srgb, var(--background) 88%, transparent);
    padding: 0 12px;
    backdrop-filter: blur(16px);
}

.dark .topbar {
    border-color: rgba(52, 46, 39, .82);
}

.topbar__left, .topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar__left {
    min-width: 0;
    flex: 1;
}

.topbar__right {
    flex: 0 0 auto;
}

.topbar__menu {
    display: inline-grid;
}

.topbar-search {
    display: none;
    min-width: 0;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    padding: 0 10px;
    box-shadow: var(--shadow-xs);
}

    .topbar-search input {
        width: 100%;
        height: 38px;
        border: 0;
        outline: 0;
        background: transparent;
    }

    .topbar-search kbd {
        border: 1px solid var(--border);
        border-bottom-width: 2px;
        border-radius: 5px;
        background: var(--muted);
        padding: 1px 5px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 5px 6px;
    cursor: pointer;
    list-style: none;
}

    .topbar-user::-webkit-details-marker, summary::-webkit-details-marker {
        display: none;
    }

    .topbar-user:hover {
        background: var(--muted);
    }

.topbar-user__copy {
    display: none;
}

    .topbar-user__copy strong, .topbar-user__copy small {
        display: block;
    }

    .topbar-user__copy strong {
        font-size: 12px;
    }

    .topbar-user__copy small {
        color: var(--muted-foreground);
        font-size: 10px;
    }

.notification-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--danger);
}

.mobile-nav {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    padding: 8px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(40, 30, 22, .08);
    backdrop-filter: blur(18px);
}

    .mobile-nav > a {
        display: flex;
        min-width: 0;
        min-height: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 10px;
        color: var(--muted-foreground);
        font-size: 10px;
        font-weight: 550;
    }

        .mobile-nav > a.is-active {
            color: var(--primary);
        }

.mobile-nav__primary {
    margin-top: -26px;
}

    .mobile-nav__primary > span {
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
        border: 5px solid var(--card);
        border-radius: 18px;
        background: var(--primary);
        color: var(--primary-foreground);
        box-shadow: var(--shadow-md);
    }

    .mobile-nav__primary small {
        font-size: 10px;
    }

/* Common elements */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: 3px;
    box-shadow: var(--shadow-xs);
}

    .theme-toggle button {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 7px;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
    }

        .theme-toggle button:hover {
            background: var(--muted);
            color: var(--foreground);
        }

        .theme-toggle button.is-active {
            background: var(--primary-soft);
            color: var(--primary);
        }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

.icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.button-row, .component-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .08s ease;
}

    .button:active:not(:disabled) {
        transform: translateY(1px);
    }

    .button:disabled {
        cursor: not-allowed;
        opacity: .52;
    }

.button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 1px 2px rgba(69, 47, 29, .12);
}

    .button--primary:hover:not(:disabled) {
        background: var(--primary-hover);
    }

.button--secondary {
    border-color: var(--border);
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

    .button--secondary:hover:not(:disabled) {
        border-color: var(--border-strong);
        background: var(--muted);
    }

.button--ghost {
    background: transparent;
    color: var(--muted-foreground);
}

    .button--ghost:hover:not(:disabled) {
        background: var(--muted);
        color: var(--foreground);
    }

.button--danger {
    background: var(--danger);
    color: white;
}

    .button--danger:hover:not(:disabled) {
        filter: brightness(.92);
    }

.button--block {
    width: 100%;
}

.button--lg {
    min-height: 46px;
    padding-inline: 18px;
}

.button--sm {
    min-height: 34px;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
}

.icon-button {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--muted-foreground);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

    .icon-button:hover:not(:disabled) {
        border-color: var(--border-strong);
        background: var(--muted);
        color: var(--foreground);
    }

    .icon-button:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.icon-button--ghost {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.text-danger {
    color: var(--danger) !important;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-xs);
    padding: 18px;
}

.card--flush {
    padding: 0;
    overflow: hidden;
}

.card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .card__header h3 {
        margin-bottom: 3px;
        font-size: 15px;
    }

    .card__header p {
        margin-bottom: 0;
        font-size: 12px;
    }

.muted-copy {
    color: var(--muted-foreground);
    font-size: 12px;
}

.page-header {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.page-header__copy h1 {
    margin: 2px 0 4px;
    font-size: clamp(23px, 5vw, 31px);
    font-weight: 720;
}

.page-header__copy p {
    max-width: 720px;
    margin: 0;
    font-size: 13px;
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumbs {
    min-width: 0;
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: 11px;
}

    .breadcrumbs ol {
        display: flex;
        min-width: max-content;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        list-style: none;
        scrollbar-width: none;
        white-space: nowrap;
    }

        .breadcrumbs ol::-webkit-scrollbar {
            display: none;
        }

    .breadcrumbs li {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
    }

    .breadcrumbs a:hover {
        color: var(--primary);
    }

    .breadcrumbs .icon {
        opacity: .55;
    }

.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 12px;
}

    .section-heading h2 {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .section-heading p {
        margin: 0;
        font-size: 12px;
    }

.badge {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 680;
    white-space: nowrap;
}

.badge--primary {
    background: var(--primary-soft);
    color: var(--primary-active);
}

.dark .badge--primary {
    color: var(--primary);
}

.badge--success {
    background: var(--success-soft);
    color: var(--success);
}

.badge--warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge--info {
    background: var(--info-soft);
    color: var(--info);
}

.badge--neutral {
    background: var(--muted);
    color: var(--muted-foreground);
}

.badge--glass {
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: white;
    backdrop-filter: blur(8px);
}

.avatar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary-active);
    font-size: 11px;
    font-weight: 750;
}

.dark .avatar {
    color: var(--primary);
}

.avatar--xs {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 9px;
}

.avatar--sm {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 10px;
}

.avatar--xl {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    font-size: 21px;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid;
    border-radius: var(--radius-md);
    padding: 12px;
}

    .alert .icon {
        margin-top: 1px;
    }

    .alert strong {
        display: block;
        margin-bottom: 1px;
        font-size: 12px;
    }

    .alert p {
        margin: 0;
        color: inherit;
        font-size: 11px;
        opacity: .86;
    }

.alert--info {
    border-color: color-mix(in srgb, var(--info) 28%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

.alert--success {
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.alert--warning {
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

.alert--danger {
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.alert--page {
    margin-bottom: 16px;
}

.dropdown {
    position: relative;
}

    .dropdown > summary {
        list-style: none;
        cursor: pointer;
    }

.dropdown-menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    left: 0;
    display: grid;
    width: max-content;
    min-width: 190px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-strong);
    padding: 5px;
    box-shadow: var(--shadow-md);
}

.dropdown-menu--right {
    right: 0;
    left: auto;
}

.dropdown-menu a, .dropdown-menu button {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    border-radius: 7px;
    background: transparent;
    padding: 7px 9px;
    color: var(--foreground);
    text-align: left;
    cursor: pointer;
}

    .dropdown-menu a:hover, .dropdown-menu button:hover {
        background: var(--muted);
    }

    .dropdown-menu button:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.dropdown-menu__identity {
    display: grid;
    padding: 8px 9px;
}

    .dropdown-menu__identity span {
        color: var(--muted-foreground);
        font-size: 11px;
    }

.dropdown-menu--notifications {
    right: -50px;
    left: auto;
    width: min(360px, calc(100vw - 28px));
    padding: 0;
}

    .dropdown-menu--notifications div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        padding: 12px 14px;
    }

        .dropdown-menu--notifications div a {
            width: auto;
            min-height: auto;
            padding: 0;
            color: var(--primary);
            font-size: 11px;
        }

.notification-row {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--border);
    border-radius: 0 !important;
    padding: 11px 13px !important;
}

    .notification-row:last-child {
        border-bottom: 0;
    }

.notification-row__icon, .notification-item__icon, .settings-row__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
}

.notification-row > span:last-child {
    min-width: 0;
    flex: 1;
}

.notification-row strong, .notification-row small, .notification-row time {
    display: block;
}

.notification-row small {
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row time {
    margin-top: 3px;
    color: var(--muted-foreground);
    font-size: 9px;
}

/* Forms */
.form-stack {
    display: grid;
    gap: 16px;
}

.form-grid {
    display: grid;
    gap: 15px;
}

.form-grid--2, .form-grid--3 {
    grid-template-columns: 1fr;
}

.field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

    .field > label {
        color: var(--foreground);
        font-size: 12px;
        font-weight: 620;
    }

        .field > label span {
            color: var(--muted-foreground);
            font-size: 10px;
            font-weight: 450;
        }

.field--centered {
    justify-items: center;
}

.input, .textarea, .select, .input-with-icon, .search-control, .input-prefix {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input, .select {
    min-height: 42px;
    padding: 9px 11px;
}

.textarea {
    min-height: 104px;
    resize: vertical;
    padding: 10px 11px;
}

.textarea--lg {
    min-height: 150px;
}

.input::placeholder, .textarea::placeholder, .search-control input::placeholder, .input-with-icon input::placeholder {
    color: color-mix(in srgb, var(--muted-foreground) 72%, transparent);
}

.input:focus, .textarea:focus, .select:focus, .input-with-icon:focus-within, .search-control:focus-within, .input-prefix:focus-within {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.input-with-icon, .search-control, .input-prefix {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

    .input-with-icon > .icon, .search-control > .icon {
        color: var(--muted-foreground);
    }

    .input-with-icon input, .search-control input, .input-prefix input {
        min-width: 0;
        height: 40px;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .input-prefix > span {
        color: var(--muted-foreground);
    }

.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%), linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px;
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
    padding-right: 32px;
}

.select--compact {
    width: auto;
    min-height: 34px;
    padding-block: 5px;
    font-size: 11px;
    background-position-y: 14px;
}

.field-hint {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 10px;
}

.validation-message {
    color: var(--danger);
    font-size: 10px;
}

.validation-summary {
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    padding: 10px 12px;
    color: var(--danger);
    font-size: 11px;
}

    .validation-summary:empty {
        display: none;
    }

.invalid {
    border-color: var(--danger) !important;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--success);
}

.otp-input {
    width: min(100%, 260px);
    height: 58px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 8px 14px;
    color: var(--foreground);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .35em;
    text-align: center;
}

    .otp-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
    }

.checkbox-row, .check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-foreground);
    font-size: 12px;
    cursor: pointer;
}

    .checkbox-row input, .check-row input, .checkbox-list input, .permission-table input, .check-chip input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

.switch-row {
    position: relative;
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
}

    .switch-row > span {
        min-width: 0;
    }

    .switch-row strong, .switch-row small {
        display: block;
    }

    .switch-row strong {
        font-size: 11px;
    }

    .switch-row small {
        color: var(--muted-foreground);
        font-size: 9px;
        font-weight: 450;
    }

    .switch-row input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .switch-row i {
        position: relative;
        width: 38px;
        height: 22px;
        flex: 0 0 auto;
        border-radius: 99px;
        background: var(--muted-strong);
        transition: background .18s ease;
    }

        .switch-row i::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,.22);
            transition: transform .18s ease;
        }

    .switch-row input:checked + i {
        background: var(--primary);
    }

        .switch-row input:checked + i::after {
            transform: translateX(16px);
        }

.switch-row--inline {
    width: max-content;
    min-height: 38px;
    border: 0;
    padding: 0;
}

.native-toggle {
    width: 36px;
    height: 20px;
    accent-color: var(--primary);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
    padding-top: 16px;
}

.form-layout {
    display: grid;
    gap: 16px;
}

.form-layout__main {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.form-layout__aside {
    display: grid;
    align-content: start;
    gap: 16px;
}

.form-card h3 {
    margin-bottom: 12px;
    font-size: 15px;
}

.form-card > .alert {
    margin-top: 16px;
}

.profile-photo-picker {
    display: flex;
    align-items: center;
    gap: 14px;
}

.code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.multi-select-box {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: 9px;
}

.check-chip {
    cursor: pointer;
}

    .check-chip input {
        position: absolute;
        opacity: 0;
    }

    .check-chip span {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 99px;
        padding: 5px 10px;
        color: var(--muted-foreground);
        font-size: 11px;
    }

    .check-chip input:checked + span {
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        background: var(--primary-soft);
        color: var(--primary-active);
    }

/* Data tables and filtering */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--border);
}

    .summary-strip > div {
        display: grid;
        gap: 2px;
        background: var(--card);
        padding: 11px 12px;
    }

    .summary-strip span {
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .summary-strip strong {
        font-size: 16px;
    }

.toolbar-note {
    color: var(--muted-foreground);
    font-size: 9px;
    white-space: nowrap;
}

.user-cell > div:last-child {
    min-width: 0;
}

.user-cell strong, .user-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell span {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 9px;
}

.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.filter-card, .data-grid-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 10px;
    box-shadow: var(--shadow-xs);
}

.data-grid-toolbar {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 12px;
    box-shadow: none;
}

.toolbar-filters {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

    .toolbar-filters .search-control {
        flex: 1;
    }

.data-grid-shell {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-xs);
}

.data-grid-scroll, .simple-table-wrap, .permission-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-grid-scroll {
    position: relative;
    min-height: 8rem;
}

.data-grid-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 8rem;
    background: color-mix(in srgb, var(--card) 82%, transparent);
    color: var(--muted-foreground);
    font-size: .875rem;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.data-grid, .simple-table, .permission-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

    .data-grid th, .simple-table th, .permission-table th {
        height: 42px;
        border-bottom: 1px solid var(--border);
        background: var(--background-elevated);
        padding: 9px 12px;
        color: var(--muted-foreground);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .025em;
        text-align: left;
        white-space: nowrap;
    }

    .data-grid td, .simple-table td, .permission-table td {
        height: 56px;
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
        color: var(--muted-foreground);
        font-size: 11px;
        vertical-align: middle;
    }

    .data-grid tbody tr:last-child td, .simple-table tbody tr:last-child td, .permission-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .data-grid tbody tr:hover td, .simple-table tbody tr:hover td {
        background: color-mix(in srgb, var(--muted) 48%, transparent);
    }

    .data-grid td strong, .simple-table td strong, .permission-table td strong {
        color: var(--foreground);
        font-weight: 620;
    }

    .data-grid td small, .simple-table td small, .permission-table td small {
        display: block;
        margin-top: 2px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .data-grid .col-title {
        gap: 5px;
    }

    .data-grid .col-sort-button {
        color: inherit;
    }

.data-grid-footer {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
}

.data-grid-footer__summary {
    color: var(--muted-foreground);
    font-size: 10px;
}

    .data-grid-footer__summary strong {
        color: var(--foreground);
    }

.pager {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pager .icon-button {
        width: 34px;
        height: 34px;
    }

.pager__current {
    min-width: 94px;
    color: var(--muted-foreground);
    font-size: 10px;
    text-align: center;
}

.simple-table--roomy td {
    height: 64px;
}

.user-cell, .product-cell, .file-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.file-name-cell {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .product-cell > div:last-child, .file-name-cell > span:last-child {
        min-width: 0;
    }

    .product-cell strong, .product-cell span, .file-name-cell strong, .file-name-cell small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.product-cell span {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 9px;
}

.product-thumb, .file-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary);
}

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

.stock-cell span {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 9px;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.table-actions {
    margin-left: auto;
}

.permission-table th:not(:first-child), .permission-table td:not(:first-child) {
    text-align: center;
}

.permission-table td:first-child {
    min-width: 220px;
}

/* Dashboards and home */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 15px;
    box-shadow: var(--shadow-xs);
}

.stat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
}

.trend {
    border-radius: 99px;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 700;
}

.trend--up {
    background: var(--success-soft);
    color: var(--success);
}

.trend--down {
    background: var(--danger-soft);
    color: var(--danger);
}

.stat-card__value {
    margin-top: 16px;
    font-size: 23px;
    font-weight: 730;
    letter-spacing: -.04em;
}

.stat-card__label {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 620;
}

.stat-card small {
    color: var(--muted-foreground);
    font-size: 9px;
}

.content-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.apex-chart {
    width: 100%;
}

.chart-card {
    overflow: hidden;
}

.chart-legend {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

    .chart-legend span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

    .chart-legend strong {
        margin-left: auto;
        color: var(--foreground);
    }

.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}

.legend-dot--2 {
    background: var(--chart-2);
}

.legend-dot--3 {
    background: var(--chart-3);
}

.timeline {
    display: grid;
}

.timeline__item {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 0 0 16px;
}

    .timeline__item:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 34px;
        bottom: 2px;
        left: 15px;
        width: 1px;
        background: var(--border);
    }

    .timeline__item p {
        margin: 1px 0 2px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

        .timeline__item p strong, .timeline__item p b {
            color: var(--foreground);
        }

    .timeline__item time {
        color: var(--muted-foreground);
        font-size: 9px;
    }

.hero-card {
    position: relative;
    display: grid;
    min-height: 330px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, #34271d, #72563d 63%, #a88765);
    padding: 24px;
    color: white;
    box-shadow: var(--shadow-md);
}

    .hero-card::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        top: -220px;
        right: -120px;
        border-radius: 50%;
        background: rgba(255,255,255,.09);
    }

.hero-card__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 600px;
}

    .hero-card__copy .eyebrow {
        color: #ddc5aa;
    }

.hero-card h2 {
    max-width: 560px;
    margin: 10px 0 10px;
    font-size: clamp(28px, 7vw, 48px);
    line-height: 1.04;
}

.hero-card p {
    max-width: 540px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
}

.hero-card .button--secondary {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.09);
    color: white;
    box-shadow: none;
}

.hero-card__visual {
    position: relative;
    min-height: 190px;
    margin-top: 20px;
}

.floating-card {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 170px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.11);
    padding: 14px;
    box-shadow: 0 14px 35px rgba(0,0,0,.18);
    backdrop-filter: blur(18px);
}

    .floating-card span, .floating-card small {
        color: rgba(255,255,255,.65);
        font-size: 9px;
    }

    .floating-card strong {
        margin: 4px 0;
        font-size: 23px;
    }

.floating-card--one {
    top: 3px;
    right: 5px;
    transform: rotate(3deg);
}

.floating-card--two {
    bottom: 4px;
    left: 0;
    transform: rotate(-3deg);
}

.hero-orbit {
    position: absolute;
    right: -15px;
    bottom: -35px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 12px;
    box-shadow: var(--shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .quick-action:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-sm);
    }

    .quick-action > span {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 11px;
        background: var(--primary-soft);
        color: var(--primary);
    }

    .quick-action > div {
        min-width: 0;
        flex: 1;
    }

    .quick-action strong, .quick-action small {
        display: block;
    }

    .quick-action strong {
        font-size: 12px;
    }

    .quick-action small {
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .quick-action > .icon {
        color: var(--muted-foreground);
    }

.checklist {
    display: grid;
    gap: 5px;
}

.checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 8px;
}

    .checklist__item:hover {
        background: var(--muted);
    }

    .checklist__item > span {
        display: grid;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

    .checklist__item.is-complete > span {
        border-color: transparent;
        background: var(--success-soft);
        color: var(--success);
    }

    .checklist__item > div {
        min-width: 0;
        flex: 1;
    }

    .checklist__item strong, .checklist__item small {
        display: block;
    }

    .checklist__item strong {
        font-size: 11px;
    }

    .checklist__item small {
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .checklist__item > a {
        color: var(--primary);
        font-size: 10px;
        font-weight: 650;
    }

.health-score {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.health-score__ring {
    display: flex;
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: center;
    padding-top: 24px;
    border-radius: 50%;
    background: conic-gradient(var(--success) 92%, var(--muted) 0);
    box-shadow: inset 0 0 0 8px var(--card);
}

    .health-score__ring strong {
        font-size: 20px;
    }

    .health-score__ring span {
        color: var(--muted-foreground);
        font-size: 8px;
    }

.health-score > div:last-child strong {
    font-size: 14px;
}

.health-score p {
    margin: 2px 0 0;
    font-size: 10px;
}

.status-list {
    display: grid;
    gap: 9px;
}

    .status-list > div {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

    .status-list strong {
        margin-left: auto;
        color: var(--foreground);
        font-size: 9px;
    }

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-dot--success {
    background: var(--success);
}

.status-dot--warning {
    background: var(--warning);
}

/* Roles */
.role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.role-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
}

.role-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}

.role-card h3 {
    margin: 16px 0 5px;
    font-size: 16px;
}

.role-card p {
    flex: 1;
    font-size: 11px;
}

.role-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--muted-foreground);
    font-size: 10px;
}

    .role-card__meta > span:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.permission-chips {
    display: flex;
    min-height: 30px;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 13px;
}

    .permission-chips span {
        border-radius: 99px;
        background: var(--muted);
        padding: 4px 7px;
        color: var(--muted-foreground);
        font-size: 8px;
    }

.checkbox-list {
    display: grid;
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px;
}

    .checkbox-list label {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 7px;
        padding: 8px;
        font-size: 11px;
    }

        .checkbox-list label:hover {
            background: var(--muted);
        }

/* Files */
.storage-card {
    display: grid;
    gap: 13px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 14px;
    box-shadow: var(--shadow-xs);
}

.storage-card__copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.storage-card__icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}

.storage-card__copy > .storage-card__icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 0;
}

    .storage-card__copy > .storage-card__icon > .icon {
        display: block;
        margin: 0;
    }

.storage-card__copy > div > strong, .storage-card__copy > div > span {
    display: block;
}

.storage-card__copy > div > span {
    color: var(--muted-foreground);
    font-size: 10px;
}

.storage-card__meter {
    min-width: 0;
}

    .storage-card__meter small {
        display: block;
        margin-top: 5px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

.progress {
    overflow: hidden;
    width: 100%;
    height: 7px;
    border-radius: 99px;
    background: var(--muted-strong);
}

    .progress > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--primary);
        transition: width .25s ease;
    }

.progress-block {
    display: grid;
    gap: 6px;
}

.progress-block__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted-foreground);
    font-size: 9px;
}

    .progress-block__meta strong {
        color: var(--foreground);
    }

.segmented-control {
    display: inline-flex;
    width: max-content;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--background-elevated);
    padding: 3px;
}

    .segmented-control button {
        display: flex;
        min-height: 32px;
        align-items: center;
        gap: 5px;
        border-radius: 6px;
        background: transparent;
        padding: 5px 9px;
        color: var(--muted-foreground);
        font-size: 10px;
        cursor: pointer;
    }

        .segmented-control button.is-active {
            background: var(--card);
            color: var(--foreground);
            box-shadow: var(--shadow-xs);
        }

.file-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.file-card {
    display: grid;
    min-width: 0;
    gap: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 14px;
    box-shadow: var(--shadow-xs);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .file-card:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-sm);
    }

.file-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary);
}

.file-card__icon--image {
    background: var(--success-soft);
    color: var(--success);
}

.file-card__icon--video {
    background: var(--danger-soft);
    color: var(--danger);
}

.file-card__icon--spreadsheet {
    background: var(--info-soft);
    color: var(--info);
}

.file-card__name {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

    .file-card__name strong, .file-card__name span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-card__name strong {
        font-size: 12px;
    }

    .file-card__name span {
        margin-top: 3px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

.file-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted-foreground);
    font-size: 9px;
}

.file-uploader {
    display: grid;
    gap: 12px;
}

.file-uploader__input {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.file-uploader__input--standalone {
    inset: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.file-uploader__dropzone {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 190px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--background-elevated);
    padding: 18px;
    color: var(--muted-foreground);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .file-uploader__dropzone:hover, .file-uploader.is-dragging .file-uploader__dropzone {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

    .file-uploader__dropzone strong {
        color: var(--primary);
    }

    .file-uploader__dropzone small {
        font-size: 9px;
    }

.file-uploader__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
}

.file-uploader__list {
    display: grid;
    gap: 7px;
}

.upload-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
}

.upload-row__copy {
    min-width: 0;
    flex: 1;
}

    .upload-row__copy strong, .upload-row__copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-row__copy strong {
        font-size: 10px;
    }

    .upload-row__copy span {
        color: var(--muted-foreground);
        font-size: 8px;
    }

.image-uploader {
    display: grid;
    gap: 11px;
}

.image-uploader__preview {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    place-items: center;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--background-elevated);
}

    .image-uploader__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-uploader__placeholder {
    display: grid;
    justify-items: center;
    gap: 7px;
    color: var(--muted-foreground);
    font-size: 10px;
}

.image-uploader__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.upload-queue {
    display: grid;
    gap: 8px;
}

.upload-queue__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 9px;
}

    .upload-queue__item > div {
        min-width: 0;
    }

    .upload-queue__item strong, .upload-queue__item span {
        display: block;
    }

    .upload-queue__item strong {
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .upload-queue__item span {
        margin-bottom: 5px;
        color: var(--muted-foreground);
        font-size: 8px;
    }

    .upload-queue__item > span:last-child {
        margin: 0;
        font-size: 9px;
    }

/* Account, settings, notifications, logs */
.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-hero__copy {
    min-width: 0;
    flex: 1;
}

    .profile-hero__copy h2 {
        margin-bottom: 2px;
        font-size: 20px;
    }

    .profile-hero__copy p {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .profile-hero__copy > div {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

.tabs {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    scrollbar-width: none;
}

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs button {
        min-height: 42px;
        flex: 0 0 auto;
        border-bottom: 2px solid transparent;
        background: transparent;
        padding: 8px 11px;
        color: var(--muted-foreground);
        font-size: 11px;
        font-weight: 580;
        cursor: pointer;
    }

        .tabs button.is-active {
            border-bottom-color: var(--primary);
            color: var(--foreground);
        }

.tabs--compact {
    margin: 0;
    border: 0;
}

    .tabs--compact button {
        min-height: 34px;
        border: 0;
        border-radius: 8px;
        padding: 6px 10px;
    }

        .tabs--compact button.is-active {
            background: var(--primary-soft);
            color: var(--primary-active);
        }

.tab-count {
    margin-left: 4px;
    border-radius: 99px;
    background: var(--muted-strong);
    padding: 1px 5px;
    font-size: 8px;
}

.detail-list {
    display: grid;
}

    .detail-list > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
    }

        .detail-list > div:last-child {
            border-bottom: 0;
        }

    .detail-list span {
        color: var(--muted-foreground);
        font-size: 10px;
    }

    .detail-list strong {
        font-size: 10px;
        text-align: right;
    }

.settings-layout {
    display: grid;
    gap: 14px;
}

.settings-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 6px;
}

    .settings-nav button {
        display: flex;
        min-height: 38px;
        flex: 0 0 auto;
        align-items: center;
        gap: 7px;
        border-radius: 8px;
        background: transparent;
        padding: 7px 10px;
        color: var(--muted-foreground);
        font-size: 11px;
        cursor: pointer;
    }

        .settings-nav button.is-active {
            background: var(--primary-soft);
            color: var(--primary-active);
            font-weight: 650;
        }

.settings-content {
    min-width: 0;
}

.settings-list {
    padding: 0;
    overflow: hidden;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--border);
    padding: 13px 14px;
}

    .settings-row:last-child {
        border-bottom: 0;
    }

    .settings-row > div, .settings-row > span:nth-child(2) {
        min-width: 0;
        flex: 1;
    }

    .settings-row strong {
        display: block;
        font-size: 11px;
    }

    .settings-row p {
        margin: 2px 0 0;
        font-size: 9px;
    }

.theme-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.theme-card {
    display: grid;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    padding: 9px;
    text-align: left;
    cursor: pointer;
}

    .theme-card.is-active {
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
    }

    .theme-card strong {
        font-size: 11px;
    }

    .theme-card small {
        color: var(--muted-foreground);
        font-size: 9px;
    }

.theme-preview {
    position: relative;
    display: block;
    height: 95px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f6f2ec;
}

    .theme-preview::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 27%;
        background: #fff;
        border-right: 1px solid #ddd4c9;
    }

    .theme-preview i, .theme-preview b {
        position: absolute;
        left: 34%;
        right: 8%;
        height: 16px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #e4ddd5;
    }

    .theme-preview i {
        top: 17px;
    }

    .theme-preview b {
        top: 42px;
        height: 37px;
    }

.theme-preview--dark {
    background: #171410;
    border-color: #342e27;
}

    .theme-preview--dark::before {
        background: #201c17;
        border-color: #342e27;
    }

    .theme-preview--dark i, .theme-preview--dark b {
        background: #201c17;
        border-color: #342e27;
    }

.theme-preview--system {
    background: linear-gradient(90deg, #f6f2ec 50%, #171410 50%);
}

    .theme-preview--system::before {
        background: linear-gradient(90deg, #fff 50%, #201c17 50%);
    }

.notification-list {
    padding: 0;
    overflow: hidden;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding: 13px;
}

    .notification-item:last-child {
        border-bottom: 0;
    }

    .notification-item.is-unread {
        background: color-mix(in srgb, var(--primary-soft) 42%, var(--card));
    }

.notification-item__copy {
    min-width: 0;
    flex: 1;
}

    .notification-item__copy > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .notification-item__copy strong {
        font-size: 11px;
    }

    .notification-item__copy p {
        margin: 3px 0;
        font-size: 10px;
    }

    .notification-item__copy time {
        color: var(--muted-foreground);
        font-size: 8px;
    }

.activity-feed {
    padding: 0;
    overflow: hidden;
}

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding: 13px;
}

    .activity-row:last-child {
        border-bottom: 0;
    }

.activity-row__copy {
    min-width: 0;
    flex: 1;
}

    .activity-row__copy p {
        margin: 1px 0 3px;
        font-size: 10px;
    }

        .activity-row__copy p strong, .activity-row__copy p b {
            color: var(--foreground);
        }

    .activity-row__copy span {
        color: var(--muted-foreground);
        font-size: 8px;
    }

/* Showcases */
.showcase-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 24px;
    padding: 7px;
}

    .showcase-nav a {
        flex: 0 0 auto;
        border-radius: 8px;
        padding: 7px 10px;
        color: var(--muted-foreground);
        font-size: 10px;
        font-weight: 580;
    }

        .showcase-nav a:hover {
            background: var(--muted);
            color: var(--foreground);
        }

.showcase-section {
    scroll-margin-top: 92px;
    margin-top: 28px;
}

.showcase-section__heading {
    margin-bottom: 12px;
}

    .showcase-section__heading > div {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 9px;
    }

    .showcase-section__heading span {
        grid-row: span 2;
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 9px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 9px;
        font-weight: 750;
    }

    .showcase-section__heading h2 {
        margin: 1px 0 2px;
        font-size: 17px;
    }

    .showcase-section__heading p {
        margin: 0;
        font-size: 10px;
    }

.wizard-card {
    padding: 0;
    overflow: hidden;
}

.stepper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: var(--background-elevated);
    padding: 12px;
    list-style: none;
}

.stepper__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px;
}

    .stepper__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 35px;
        bottom: -5px;
        left: 18px;
        width: 1px;
        background: var(--border);
    }

.stepper__marker {
    z-index: 1;
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 9px;
    font-weight: 700;
}

.stepper__item--current .stepper__marker, .stepper__item--complete .stepper__marker {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.stepper__copy strong, .stepper__copy small {
    display: block;
}

.stepper__copy strong {
    font-size: 10px;
}

.stepper__copy small {
    color: var(--muted-foreground);
    font-size: 8px;
}

.wizard-content {
    min-height: 245px;
    padding: 18px;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 12px 18px;
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.choice-card {
    position: relative;
    display: grid;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
}

    .choice-card.is-selected {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

    .choice-card input {
        position: absolute;
        top: 12px;
        right: 12px;
        accent-color: var(--primary);
    }

    .choice-card .icon {
        color: var(--primary);
    }

    .choice-card strong {
        font-size: 11px;
    }

    .choice-card span {
        color: var(--muted-foreground);
        font-size: 9px;
    }

.review-panel {
    display: grid;
    justify-items: center;
    text-align: center;
}

.review-panel__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    background: var(--success-soft);
    color: var(--success);
}

.review-panel h3 {
    margin: 10px 0 3px;
}

.review-panel p {
    margin-bottom: 14px;
    font-size: 10px;
}

.review-panel dl {
    width: 100%;
    max-width: 480px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 12px;
    text-align: left;
}

    .review-panel dl div {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        padding: 8px 0;
    }

        .review-panel dl div:last-child {
            border: 0;
        }

.review-panel dt {
    color: var(--muted-foreground);
    font-size: 9px;
}

.review-panel dd {
    margin: 0;
    font-size: 9px;
    font-weight: 650;
}

.tab-panel {
    padding: 4px 0;
}

.token-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

    .token-grid article {
        display: grid;
        gap: 5px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--card);
        padding: 9px;
    }

    .token-grid strong {
        font-size: 10px;
    }

    .token-grid code {
        width: max-content;
        font-size: 8px;
    }

.token-swatch {
    display: block;
    height: 62px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.token-swatch--primary {
    background: var(--primary);
}

.token-swatch--background {
    background: var(--background);
}

.token-swatch--card {
    background: var(--card);
}

.token-swatch--muted {
    background: var(--muted);
}

.token-swatch--success {
    background: var(--success);
}

.token-swatch--danger {
    background: var(--danger);
}

.component-demo {
    display: grid;
    gap: 18px;
}

    .component-demo .alert + .alert {
        margin-top: -8px;
    }

.demo-label {
    display: block;
    color: var(--muted-foreground);
    font-size: 9px;
    font-weight: 650;
}

.skeleton-group {
    display: grid;
    gap: 8px;
}

.skeleton-line {
    display: block;
    height: 12px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--muted) 25%, var(--muted-strong) 45%, var(--muted) 65%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
}

    .skeleton-line:last-child:not(:first-child) {
        width: 65%;
    }

@keyframes shimmer {
    to {
        background-position: -220% 0;
    }
}

.empty-state, .error-state {
    display: grid;
    min-height: 260px;
    place-content: center;
    justify-items: center;
    padding: 24px;
    text-align: center;
}

.empty-state__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary);
}

.empty-state h3, .error-state h2 {
    margin: 12px 0 5px;
    font-size: 17px;
}

.empty-state p, .error-state p {
    max-width: 440px;
    margin: 0;
    font-size: 10px;
}

.empty-state__action, .error-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.error-state__code {
    color: var(--primary);
    font-size: clamp(52px, 14vw, 110px);
    font-weight: 780;
    letter-spacing: -.08em;
    line-height: .9;
}

.empty-page-card {
    min-height: 520px;
}

/* Modals and toasts */
.modal-layer {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    align-items: end;
    background: rgba(20, 16, 12, .52);
    padding: 0;
    backdrop-filter: blur(3px);
}

.modal-card {
    width: 100%;
    max-height: min(88vh, 780px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    background: var(--card-strong);
    box-shadow: var(--shadow-lg);
    animation: modal-in-mobile .2s ease-out;
}

@keyframes modal-in-mobile {
    from {
        transform: translateY(24px);
        opacity: .4;
    }
}

.modal-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    padding: 16px;
}

    .modal-card__header h2 {
        margin-bottom: 3px;
        font-size: 17px;
    }

    .modal-card__header p {
        margin: 0;
        font-size: 10px;
    }

.modal-card__body {
    padding: 16px;
}

.modal-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

.toast-region {
    position: fixed;
    z-index: 300;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    max-width: 390px;
    margin-left: auto;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-strong);
    padding: 11px;
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toast-in .2s ease-out;
}

@keyframes toast-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
}

.toast__icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--info-soft);
    color: var(--info);
}

.toast--success .toast__icon {
    background: var(--success-soft);
    color: var(--success);
}

.toast--warning .toast__icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.toast--error .toast__icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.toast__content {
    min-width: 0;
    flex: 1;
}

    .toast__content strong {
        display: block;
        font-size: 11px;
    }

    .toast__content p {
        margin: 2px 0 0;
        font-size: 9px;
    }

.toast .icon-button {
    width: 28px;
    height: 28px;
}

/* Auth and system pages */
.auth-shell {
    min-height: 100vh;
    background: var(--background);
}

.auth-brand-panel {
    display: none;
}

.auth-main {
    min-height: 100vh;
}

.auth-main__toolbar {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
}

.auth-main__content {
    display: grid;
    min-height: calc(100vh - 64px);
    place-items: start center;
    padding: 26px 16px 48px;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.auth-card--wide {
    max-width: 560px;
}

.auth-card__header {
    margin-bottom: 22px;
    text-align: center;
}

.auth-card__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 15px;
    background: var(--primary-soft);
    color: var(--primary);
}

.auth-card__header h2 {
    margin-bottom: 5px;
    font-size: 22px;
}

.auth-card__header p {
    margin: 0;
    font-size: 11px;
}

.auth-card__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
    color: var(--muted-foreground);
    font-size: 9px;
}

    .auth-card__divider::before, .auth-card__divider::after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--border);
    }

.demo-credential {
    display: grid;
    gap: 7px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: var(--background-elevated);
    padding: 10px;
}

    .demo-credential > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .demo-credential span {
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .demo-credential strong {
        font-family: ui-monospace, monospace;
        font-size: 10px;
    }

.auth-card__terms {
    margin: 16px 0 0;
    font-size: 8px;
    text-align: center;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: -4px 0 16px;
    background: transparent;
    padding: 4px;
    color: var(--muted-foreground);
    font-size: 10px;
    cursor: pointer;
}

.resend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 16px;
    color: var(--muted-foreground);
    font-size: 10px;
}

.system-auth-card {
    display: grid;
    justify-items: center;
    text-align: center;
}

    .system-auth-card h1 {
        margin: 15px 0 7px;
        font-size: clamp(25px, 7vw, 38px);
    }

    .system-auth-card > p {
        max-width: 430px;
        font-size: 11px;
    }

.maintenance-time {
    display: grid;
    width: 100%;
    gap: 12px;
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background-elevated);
    padding: 14px;
    text-align: left;
}

    .maintenance-time span, .maintenance-time strong {
        display: block;
    }

    .maintenance-time span {
        color: var(--muted-foreground);
        font-size: 9px;
    }

    .maintenance-time strong {
        font-size: 12px;
    }

.inline-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.countdown {
    display: flex;
    gap: 8px;
    margin: 10px 0 18px;
}

    .countdown > div {
        display: grid;
        min-width: 62px;
        gap: 1px;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: var(--background-elevated);
        padding: 9px;
    }

    .countdown strong {
        font-size: 19px;
    }

    .countdown span {
        color: var(--muted-foreground);
        font-size: 8px;
    }

.system-page {
    display: grid;
    min-height: calc(100vh - var(--topbar-height) - 140px);
    place-content: center;
}

.error-reference {
    margin-top: -38px;
    color: var(--muted-foreground);
    font-family: ui-monospace, monospace;
    font-size: 8px;
    text-align: center;
}

/* Responsive */
@media (min-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .file-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .role-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .token-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .theme-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-hero {
        flex-direction: row;
        align-items: center;
    }

    .inline-form {
        flex-direction: row;
    }

        .inline-form .input {
            flex: 1;
        }
}

@media (min-width: 640px) {
    .summary-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page-content {
        padding: 26px 24px 104px;
    }

    .page-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .page-header__actions {
        justify-content: flex-end;
    }

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

    .form-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .field--span-2 {
        grid-column: span 2;
    }

    .field--span-3 {
        grid-column: span 3;
    }

    .filter-card, .data-grid-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .toolbar-filters {
        flex-direction: row;
    }

        .toolbar-filters .search-control {
            min-width: 240px;
        }

        .toolbar-filters .select {
            width: auto;
            min-width: 150px;
        }

    .data-grid-footer {
        flex-direction: row;
    }

    .storage-card {
        grid-template-columns: auto minmax(180px, 1fr) auto;
        align-items: center;
    }

    .choice-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stepper {
        grid-template-columns: repeat(3, 1fr);
    }

    .stepper__item {
        justify-content: center;
    }

        .stepper__item:not(:last-child)::after {
            top: 19px;
            right: -10%;
            bottom: auto;
            left: 70%;
            width: 40%;
            height: 1px;
        }

    .modal-layer {
        place-items: center;
        padding: 24px;
    }

    .modal-card {
        border-radius: var(--radius-lg);
        animation: modal-in .18s ease-out;
    }

    .modal-card--sm {
        max-width: 430px;
    }

    .modal-card--md {
        max-width: 580px;
    }

    .modal-card--lg {
        max-width: 820px;
    }

    @keyframes modal-in {
        from {
            transform: scale(.98) translateY(8px);
            opacity: .4;
        }
    }

    .toast-region {
        bottom: 24px;
    }

    .auth-card {
        padding: 30px;
    }
}

@media (min-width: 768px) {
    .topbar {
        padding-inline: 20px;
    }

    .topbar-search {
        display: flex;
        width: min(430px, 50vw);
    }

    .topbar-user__copy {
        display: block;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .content-grid--2-1 {
        grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    }

    .content-grid--3-1 {
        grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    }

    .hero-card {
        grid-template-columns: 1.3fr .7fr;
        min-height: 390px;
        padding: 38px;
    }

    .hero-card__visual {
        min-height: 100%;
        margin: 0;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .file-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-hero {
        padding: 22px;
    }

    .theme-preview {
        height: 125px;
    }
}

@media (min-width: 1180px) {
    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        transition: grid-template-columns .2s ease;
    }

        .app-shell.sidebar-collapsed {
            grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
        }

    .sidebar {
        position: sticky;
        z-index: 75;
        top: 0;
        width: 100%;
        height: 100vh;
        box-shadow: none;
        transform: none;
        transition: width .2s ease;
    }

    .sidebar__collapse {
        display: inline-grid !important;
    }

    .sidebar__mobile-close {
        display: none;
    }

    .sidebar-collapsed .sidebar__collapse .icon {
        transform: rotate(180deg);
    }

    .sidebar-collapsed .sidebar__workspace-copy, .sidebar-collapsed .sidebar__workspace > .icon, .sidebar-collapsed .nav-section__label, .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar-user > div:nth-child(2), .sidebar-collapsed .sidebar-user > .icon {
        display: none;
    }

    .sidebar-collapsed .sidebar__header {
        justify-content: center;
        padding-inline: 8px;
    }

        .sidebar-collapsed .sidebar__header .brand {
            width: 0;
            overflow: hidden;
            flex: 0;
            opacity: 0;
        }

    .sidebar-collapsed .sidebar__workspace, .sidebar-collapsed .nav-item, .sidebar-collapsed .sidebar-user {
        justify-content: center;
        padding-inline: 6px;
    }

    .sidebar-collapsed .sidebar__workspace {
        margin-inline: 10px;
    }

    .sidebar-collapsed .nav-item {
        min-height: 44px;
    }

    .sidebar-collapsed .nav-badge {
        display: none;
    }

    .topbar__menu, .mobile-nav {
        display: none;
    }

    .page-content {
        padding: 30px 32px 48px;
    }

    .form-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .form-card--sticky {
        position: sticky;
        top: calc(var(--topbar-height) + 24px);
    }

    .settings-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        align-items: start;
    }

    .settings-nav {
        position: sticky;
        top: calc(var(--topbar-height) + 24px);
        flex-direction: column;
        overflow: visible;
    }

        .settings-nav button {
            width: 100%;
        }

    .role-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .file-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .token-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .auth-shell {
        display: grid;
        grid-template-columns: minmax(380px, 42%) minmax(0, 1fr);
    }

    .auth-brand-panel {
        position: relative;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        overflow: hidden;
        background: radial-gradient(circle at 20% 20%, rgba(208,174,136,.26), transparent 30%), linear-gradient(145deg, #2b2119 0%, #59422f 55%, #8b6b4f 100%);
        padding: 32px 38px;
        color: white;
    }

        .auth-brand-panel::after {
            content: "";
            position: absolute;
            right: -140px;
            bottom: -190px;
            width: 470px;
            height: 470px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 50%;
            box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018);
        }

    .auth-brand-panel__top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .auth-brand-panel__copy {
        position: relative;
        z-index: 1;
        max-width: 520px;
        margin-block: auto;
    }

        .auth-brand-panel__copy .eyebrow {
            color: #dfc8ad;
        }

        .auth-brand-panel__copy h1 {
            margin: 15px 0 14px;
            font-size: clamp(38px, 4.2vw, 62px);
            line-height: 1.02;
        }

        .auth-brand-panel__copy > p {
            max-width: 480px;
            color: rgba(255,255,255,.68);
            font-size: 14px;
        }

    .auth-feature-list {
        display: grid;
        gap: 10px;
        margin-top: 28px;
    }

        .auth-feature-list div {
            display: flex;
            align-items: center;
            gap: 9px;
            color: rgba(255,255,255,.82);
            font-size: 12px;
        }

        .auth-feature-list .icon {
            color: #d9bea1;
        }

    .auth-brand-panel__foot {
        position: relative;
        z-index: 1;
        color: rgba(255,255,255,.45);
        font-size: 10px;
    }

    .auth-main__content {
        place-items: center;
        padding: 32px;
    }
}

@media (min-width: 1280px) {
    .page-content {
        padding-inline: 40px;
    }

    .file-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .form-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Advanced filters */
.filter-drawer-layer {
    position: fixed;
    z-index: 210;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(20, 16, 12, .52);
    backdrop-filter: blur(3px);
}

.filter-drawer {
    display: grid;
    width: min(100%, 520px);
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-left: 1px solid var(--border);
    background: var(--card-strong);
    box-shadow: var(--shadow-lg);
    animation: filter-drawer-in .2s ease-out;
}

@keyframes filter-drawer-in {
    from {
        transform: translateX(32px);
        opacity: .7;
    }
}

.filter-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding: 18px;
}

    .filter-drawer__header h2 {
        margin: 0 0 4px;
        font-size: 18px;
    }

    .filter-drawer__header p {
        margin: 0;
        font-size: 10px;
    }

.filter-drawer__body {
    display: grid;
    align-content: start;
    gap: 22px;
    overflow-y: auto;
    padding: 18px;
}

.filter-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
}

    .filter-drawer__footer > div {
        display: flex;
        gap: 8px;
    }

.filter-section {
    display: grid;
    gap: 12px;
}

    .filter-section + .filter-section {
        border-top: 1px solid var(--border);
        padding-top: 20px;
    }

.filter-section__heading h3 {
    margin: 0 0 3px;
    font-size: 13px;
}

.filter-section__heading p {
    margin: 0;
    font-size: 9px;
}

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: -4px 0 14px;
    color: var(--muted-foreground);
    font-size: 10px;
}

    .active-filters > span:first-child {
        font-weight: 650;
    }

.filter-chip {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--card);
    padding: 4px 9px;
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

.button-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 99px;
    background: var(--primary-soft);
    color: var(--primary-active);
    font-size: 9px;
    font-weight: 750;
}

.table-empty {
    display: grid;
    min-height: 150px;
    place-content: center;
    justify-items: center;
    gap: 5px;
    color: var(--muted-foreground);
    text-align: center;
}

    .table-empty strong {
        color: var(--foreground);
    }

    .table-empty span {
        font-size: 10px;
    }

/* Product wizard and gallery */
.product-wizard__content {
    min-height: 520px;
}

.stepper__button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .stepper__button:disabled {
        cursor: default;
    }

.wizard-alert {
    margin: 14px 18px 0;
}

.wizard-section-stack {
    display: grid;
    gap: 18px;
}

.wizard-section {
    display: grid;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 16px;
}

.wizard-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

    .wizard-section__header h3 {
        margin: 2px 0 3px;
        font-size: 15px;
    }

    .wizard-section__header p {
        margin: 0;
        font-size: 10px;
    }

.product-wizard__actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    background: color-mix(in srgb, var(--card-strong) 96%, transparent);
    backdrop-filter: blur(12px);
}

    .product-wizard__actions > div {
        display: flex;
        align-items: center;
        gap: 9px;
    }

.wizard-actions__status {
    color: var(--muted-foreground);
    font-size: 10px;
}

.input-action-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
}

    .input-action-group .input-prefix-copy {
        display: flex;
        align-items: center;
        border: 1px solid var(--border);
        border-right: 0;
        border-radius: 9px 0 0 9px;
        background: var(--muted);
        padding: 0 10px;
        color: var(--muted-foreground);
        font-size: 10px;
    }

    .input-action-group .input {
        border-radius: 0 9px 9px 0;
    }

    .input-action-group .button {
        grid-column: 1 / -1;
        margin-top: 7px;
    }

.field-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted-foreground);
    font-size: 8px;
}

.inventory-options {
    display: grid;
    gap: 9px;
}

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

.category-cell span {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 9px;
}

.gallery-uploader {
    display: grid;
    gap: 13px;
}

.gallery-uploader__dropzone {
    position: relative;
    display: grid;
    min-height: 170px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    overflow: hidden;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--background-elevated);
    padding: 18px;
    color: var(--muted-foreground);
    text-align: center;
    cursor: pointer;
}

    .gallery-uploader__dropzone:hover {
        border-color: var(--primary);
        background: var(--primary-soft);
    }

    .gallery-uploader__dropzone strong {
        color: var(--primary);
    }

    .gallery-uploader__dropzone small {
        font-size: 9px;
    }

.gallery-uploader__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gallery-uploader__item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
}

    .gallery-uploader__item img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .gallery-uploader__item > div {
        min-width: 0;
        padding: 8px;
    }

    .gallery-uploader__item strong, .gallery-uploader__item span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gallery-uploader__item strong {
        font-size: 9px;
    }

    .gallery-uploader__item span {
        color: var(--muted-foreground);
        font-size: 8px;
    }

.gallery-uploader__cover {
    position: absolute;
    top: 7px;
    left: 7px;
}

.gallery-uploader__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-color: rgba(255,255,255,.62);
    background: rgba(20,16,12,.66);
    color: white;
    box-shadow: none;
    backdrop-filter: blur(6px);
}

@media (max-width: 639px) {
    .auth-main__content {
        padding: 18px 20px 42px;
    }

    .auth-card--mobile-flat {
        max-width: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .filter-drawer-layer {
        align-items: flex-end;
    }

    .filter-drawer {
        width: 100%;
        height: min(88vh, 760px);
        border-top: 1px solid var(--border);
        border-left: 0;
        border-radius: 20px 20px 0 0;
        animation-name: filter-drawer-mobile-in;
    }

    @keyframes filter-drawer-mobile-in {
        from {
            transform: translateY(32px);
            opacity: .7;
        }
    }

    .filter-drawer__header {
        padding: 15px 16px;
    }

    .filter-drawer__body {
        padding: 16px;
    }

    .filter-drawer__footer {
        padding-inline: 16px;
    }

        .filter-drawer__footer > div {
            flex: 1;
        }

            .filter-drawer__footer > div .button {
                flex: 1;
            }

    .product-wizard__content {
        min-height: 0;
        padding: 14px;
    }

    .wizard-section {
        border: 0;
        border-radius: 0;
        padding: 0;
    }

        .wizard-section + .wizard-section {
            border-top: 1px solid var(--border);
            padding-top: 18px;
        }

    .product-wizard__actions {
        align-items: stretch;
    }

        .product-wizard__actions, .product-wizard__actions > div:last-child {
            flex-direction: column;
        }

            .product-wizard__actions > div:first-child:empty {
                display: none;
            }

            .product-wizard__actions .button {
                width: 100%;
            }

    .wizard-actions__status {
        text-align: center;
    }
}

@media (min-width: 640px) {
    .input-action-group {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .input-action-group .button {
            grid-column: auto;
            margin-top: 0;
            margin-left: 7px;
        }

    .gallery-uploader__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .gallery-uploader__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter-drawer, .modal-card, .sidebar {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* Searchable form controls */
.searchable-select, .live-search-dropdown {
    position: relative;
    min-width: 0;
}

.searchable-control__backdrop {
    position: fixed;
    z-index: 179;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.searchable-select__control {
    position: relative;
    z-index: 180;
}

.searchable-select__trigger {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    padding: 8px 38px 8px 11px;
    color: var(--foreground);
    text-align: left;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}

    .searchable-select__trigger:hover, .searchable-select__trigger.is-open {
        border-color: var(--primary);
    }

    .searchable-select__trigger:focus-visible {
        outline: 3px solid var(--primary-soft);
        outline-offset: 1px;
    }

    .searchable-select__trigger:disabled {
        cursor: not-allowed;
        opacity: .55;
    }

.searchable-select__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

    .searchable-select__value.is-placeholder {
        color: var(--muted-foreground);
    }

.searchable-select__clear {
    position: absolute;
    z-index: 182;
    top: 50%;
    right: 31px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 7px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

    .searchable-select__clear:hover {
        background: var(--muted);
        color: var(--foreground);
    }

.searchable-select__popover, .live-search-dropdown__menu {
    position: absolute;
    z-index: 181;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-strong);
    box-shadow: var(--shadow-lg);
}

.searchable-select__search {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
}

    .searchable-select__search .icon {
        color: var(--muted-foreground);
    }

    .searchable-select__search input {
        width: 100%;
        height: 32px;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--foreground);
        font-size: 12px;
    }

.searchable-select__options {
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
}

.searchable-select__option, .live-search-dropdown__option {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 8px;
    background: transparent;
    padding: 8px 9px;
    color: var(--foreground);
    text-align: left;
    cursor: pointer;
}

    .searchable-select__option:hover, .searchable-select__option.is-selected, .live-search-dropdown__option:hover {
        background: var(--muted);
    }

    .searchable-select__option.is-selected {
        color: var(--primary-active);
    }

    .searchable-select__option > span, .live-search-dropdown__option > span {
        min-width: 0;
    }

    .searchable-select__option strong, .searchable-select__option small, .live-search-dropdown__option strong, .live-search-dropdown__option small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .searchable-select__option strong, .live-search-dropdown__option strong {
        font-size: 11px;
    }

    .searchable-select__option small, .live-search-dropdown__option small {
        margin-top: 2px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

.searchable-select__empty, .live-search-dropdown__message {
    display: grid;
    min-height: 94px;
    place-content: center;
    justify-items: center;
    gap: 7px;
    padding: 14px;
    color: var(--muted-foreground);
    font-size: 10px;
    text-align: center;
}

.live-search-dropdown__input {
    position: relative;
    z-index: 180;
}

    .live-search-dropdown__input > .icon {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 11px;
        transform: translateY(-50%);
        color: var(--muted-foreground);
        pointer-events: none;
    }

    .live-search-dropdown__input .input {
        padding-right: 38px;
        padding-left: 36px;
    }

.live-search-dropdown__clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8px;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 7px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

    .live-search-dropdown__clear:hover {
        background: var(--muted);
        color: var(--foreground);
    }

.live-search-dropdown__menu {
    max-height: 286px;
    overflow-y: auto;
    padding: 5px;
}

.component-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

    .component-heading h3 {
        margin: 0 0 4px;
        font-size: 15px;
    }

    .component-heading p {
        margin: 0;
        font-size: 10px;
    }


/* Product inventory variants */
.inventory-variants {
    display: grid;
    gap: 13px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.inventory-variants__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

    .inventory-variants__header h4 {
        margin: 0 0 4px;
        font-size: 14px;
    }

    .inventory-variants__header p {
        margin: 0;
        font-size: 10px;
    }

.inventory-variants__empty {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--background-elevated);
    padding: 16px;
    color: var(--muted-foreground);
    text-align: left;
}

    .inventory-variants__empty strong, .inventory-variants__empty span {
        display: block;
    }

    .inventory-variants__empty strong {
        color: var(--foreground);
        font-size: 11px;
    }

    .inventory-variants__empty span {
        margin-top: 3px;
        font-size: 9px;
    }

.inventory-variant-list {
    display: grid;
    gap: 10px;
}

.inventory-variant-card {
    display: grid;
    gap: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background-elevated);
    padding: 12px;
}

    .inventory-variant-card > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

        .inventory-variant-card > header > div {
            min-width: 0;
        }

        .inventory-variant-card > header strong, .inventory-variant-card__number {
            display: block;
        }

        .inventory-variant-card > header strong {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
        }

.inventory-variant-card__number {
    margin-bottom: 2px;
    color: var(--muted-foreground);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.inventory-variant-card__grid {
    grid-template-columns: 1fr;
}

.inventory-variants__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    border-radius: 9px;
    background: var(--muted);
    padding: 9px 11px;
    color: var(--muted-foreground);
    font-size: 9px;
}

    .inventory-variants__summary strong {
        color: var(--foreground);
    }

/* Mobile navigation drawer hardening */
@media (max-width: 1179px) {
    .sidebar {
        visibility: hidden;
        pointer-events: none;
    }

        .sidebar.is-mobile-open {
            visibility: visible;
            pointer-events: auto;
        }

    .mobile-scrim {
        display: block;
        width: 100%;
        border: 0;
        padding: 0;
    }
}

@media (min-width: 640px) {
    .inventory-variants__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .inventory-variant-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .inventory-variant-card__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .sidebar {
        visibility: visible;
        pointer-events: auto;
    }
}

/* Center compact icon surfaces on both axes, independent of inline/SVG baseline behavior. */
.storage-card__icon,
.file-card__icon,
.file-uploader__icon,
.stat-card__icon,
.notification-row__icon,
.notification-item__icon,
.settings-row__icon,
.review-panel__icon,
.empty-state__icon,
.toast__icon,
.auth-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .storage-card__icon > .icon,
    .file-card__icon > .icon,
    .file-uploader__icon > .icon,
    .stat-card__icon > .icon,
    .notification-row__icon > .icon,
    .notification-item__icon > .icon,
    .settings-row__icon > .icon,
    .review-panel__icon > .icon,
    .empty-state__icon > .icon,
    .toast__icon > .icon,
    .auth-card__icon > .icon {
        display: block;
        flex: 0 0 auto;
        margin: 0;
        align-self: center;
    }

.blank-page-surface {
    min-height: min(62vh, 620px);
}

/* Product wizard uses markers without connector lines. */
.product-stepper .stepper__item:not(:last-child)::after {
    content: none;
}

/* Commerce CMS modules */
.content-title-cell strong, .content-title-cell span {
    display: block;
}

.content-title-cell strong {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-title-cell span {
    margin-top: 3px;
    color: var(--muted-foreground);
    font-size: 9px;
}

.blog-editor-layout {
    align-items: start;
}

.blog-editor__content {
    min-height: 340px;
    resize: vertical;
    line-height: 1.75;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: var(--muted);
    padding: 6px;
}

    .editor-toolbar + .blog-editor__content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .editor-toolbar button {
        display: inline-grid;
        min-width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 6px;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
    }

        .editor-toolbar button:hover {
            background: var(--card);
            color: var(--foreground);
        }

.cms-two-column {
    grid-template-columns: 1fr;
    align-items: start;
}

.management-list {
    display: grid;
}

    .management-list article {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 11px;
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
    }

        .management-list article:last-child {
            border-bottom: 0;
        }

        .management-list article > div {
            min-width: 0;
            flex: 1;
        }

    .management-list strong, .management-list small {
        display: block;
    }

    .management-list small {
        margin-top: 3px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

.management-list__icon, .taxonomy-cell__icon, .promotion-card__icon, .order-line__thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
}

.management-list__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.cms-table-scroll {
    overflow-x: auto;
}

.cms-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

    .cms-table th, .cms-table td {
        border-bottom: 1px solid var(--border);
        padding: 13px 15px;
        text-align: left;
    }

    .cms-table th {
        color: var(--muted-foreground);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .cms-table td {
        font-size: 11px;
    }

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

.taxonomy-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.taxonomy-cell__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.promotion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.promotion-card {
    display: grid;
    align-content: start;
    gap: 18px;
}

    .promotion-card > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.promotion-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.promotion-card h3 {
    margin: 5px 0 8px;
    font-size: 15px;
}

.promotion-card code {
    display: inline-flex;
    border: 1px dashed var(--border-strong);
    border-radius: 7px;
    background: var(--muted);
    padding: 5px 8px;
    font-size: 10px;
}

.promotion-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

    .promotion-card dl div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
    }

        .promotion-card dl div:last-child {
            border-bottom: 0;
        }

.promotion-card dt {
    color: var(--muted-foreground);
    font-size: 9px;
}

.promotion-card dd {
    margin: 0;
    font-size: 10px;
    font-weight: 650;
}

.promotion-card footer {
    margin-top: auto;
}

.review-moderation-list {
    display: grid;
    gap: 13px;
}

.review-moderation-card {
    display: grid;
    gap: 10px;
}

    .review-moderation-card > header, .review-moderation-card > footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .review-moderation-card h3 {
        margin: 0;
        font-size: 13px;
    }

    .review-moderation-card p {
        margin: 0;
        font-size: 10px;
    }

    .review-moderation-card time {
        color: var(--muted-foreground);
        font-size: 9px;
    }

.review-stars {
    display: flex;
    gap: 3px;
    color: var(--border-strong);
}

    .review-stars .is-filled {
        color: var(--warning);
        fill: currentColor;
    }

.order-detail-layout {
    display: grid;
    gap: 16px;
}

.order-detail-main, .order-detail-aside {
    display: grid;
    align-content: start;
    gap: 16px;
}

.order-card-header {
    margin: 0;
    padding: 18px 18px 0;
}

.order-line-list {
    display: grid;
    padding: 8px 18px;
}

.order-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 13px 0;
}

    .order-line:last-child {
        border-bottom: 0;
    }

.order-line__thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.order-line__copy {
    min-width: 0;
}

    .order-line__copy strong, .order-line__copy span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-line__copy strong {
        font-size: 11px;
    }

    .order-line__copy span {
        margin-top: 3px;
        color: var(--muted-foreground);
        font-size: 9px;
    }

.order-line__quantity {
    color: var(--muted-foreground);
    font-size: 10px;
}

.order-totals {
    display: grid;
    gap: 9px;
    border-top: 1px solid var(--border);
    background: var(--background-elevated);
    padding: 15px 18px;
}

    .order-totals > div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        font-size: 10px;
    }

    .order-totals span {
        color: var(--muted-foreground);
    }

.order-totals__grand {
    border-top: 1px solid var(--border);
    margin-top: 3px;
    padding-top: 11px;
}

    .order-totals__grand span, .order-totals__grand strong {
        color: var(--foreground);
        font-size: 13px;
    }

.user-cell--large {
    margin-bottom: 12px;
}

.detail-copy + .detail-copy {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 12px;
}

.detail-copy strong {
    font-size: 10px;
}

.detail-copy p {
    margin: 4px 0 0;
    font-size: 10px;
}

@media (min-width: 760px) {
    .promotion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-two-column {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    }
}

@media (min-width: 980px) {
    .blog-editor-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (min-width: 1180px) {
    .promotion-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .order-line {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .order-line > strong {
            grid-column: 2 / -1;
        }

    .review-moderation-card > footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .brand__logo {
        max-width: 140px;
        height: 28px;
    }
}

.justify-text {
    text-align: justify;
}

.text-size-12 {
    font-size: 12px !important;
}

.text-size-10 {
    font-size: 10px !important;
}

.modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.modal {
    width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #18181b;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.22)
}

.modal--md {
    max-width: 640px
}

.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid #e4e4e7;
    background: #fff
}

    .modal__header h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #18181b
    }

    .modal__header p {
        margin: .3rem 0 0;
        font-size: .875rem;
        color: #71717a
    }

.modal__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    overflow-y: auto;
    background: #fff
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e4e4e7;
    background: #fafafa
}

.content-box {
    padding: .875rem 1rem;
    background: #fafafa;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    color: #27272a;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.file-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 58px;
    padding: .625rem .75rem;
    text-decoration: none;
    color: #27272a;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    transition: background-color .15s,border-color .15s
}

    .file-list__item:hover {
        background: #fafafa;
        border-color: #d4d4d8
    }

.file-list__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f5;
    border-radius: 7px;
    color: #52525b
}

.file-list__content {
    min-width: 0;
    flex: 1
}

    .file-list__content strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .875rem;
        font-weight: 500
    }


:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal {
    background: #18181b;
    color: #fafafa;
    border-color: #3f3f46;
    box-shadow: 0 24px 60px rgba(0,0,0,.55)
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal__header {
    background: #18181b;
    border-color: #3f3f46
}

    :is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal__header h2 {
        color: #fafafa
    }

    :is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal__header p {
        color: #a1a1aa
    }

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal__body {
    background: #18181b;
    color: #fafafa
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal__footer {
    background: #1f1f22;
    border-color: #3f3f46
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .content-box {
    background: #27272a;
    color: #e4e4e7;
    border-color: #3f3f46
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .file-list__item {
    background: #18181b;
    color: #e4e4e7;
    border-color: #3f3f46
}

    :is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .file-list__item:hover {
        background: #27272a;
        border-color: #52525b
    }

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .file-list__icon {
    background: #27272a;
    color: #d4d4d8
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal .field label {
    color: #d4d4d8
}

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal .icon-button {
    color: #a1a1aa
}

    :is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal .icon-button:hover {
        background: #27272a;
        color: #fafafa
    }

:is(html.dark,body.dark,html[data-theme="dark"],body[data-theme="dark"]) .modal-layer {
    background: rgba(0,0,0,.68)
}