/* =========================================================================
   fekraSystem — Premium dark design system
   Visual overrides only. Business logic and component structure stay intact.
   ========================================================================= */

:root {
    color-scheme: dark;

    --bg-primary: #050505;
    --bg-secondary: #080b0a;
    --bg-card: #0b0f0d;
    --bg-card-hover: #101412;
    --bg-input: #080b0a;
    --border: rgba(255, 255, 255, .075);
    --border-strong: rgba(0, 255, 102, .2);
    --text-primary: #f4f7f5;
    --text-secondary: #9aa69f;
    --text-faint: #68736d;
    --green: #00ff66;
    --green-bright: #39ff88;
    --green-deep: #00d957;
    --green-soft: rgba(0, 255, 102, .095);
    --green-glow: 0 0 22px rgba(0, 255, 102, .11);
    --danger: #ef6670;
    --danger-soft: rgba(239, 102, 112, .1);
    --warning: #e7ad52;
    --warning-soft: rgba(231, 173, 82, .11);

    /* Backward-compatible aliases used by every existing component. */
    --color-bg: var(--bg-primary);
    --color-surface: var(--bg-card);
    --color-surface-alt: var(--bg-secondary);
    --color-border: var(--border);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-text-faint: var(--text-faint);
    --color-navy: #080b0a;
    --color-navy-soft: #101712;
    --color-navy-border: rgba(0, 255, 102, .1);
    --color-primary: var(--green);
    --color-primary-dark: var(--green-deep);
    --color-primary-soft: var(--green-soft);
    --color-success: var(--green);
    --color-success-soft: var(--green-soft);
    --color-danger: var(--danger);
    --color-danger-soft: var(--danger-soft);
    --color-warning: var(--warning);
    --color-warning-soft: var(--warning-soft);
    --color-info: #9aa69f;
    --color-info-soft: rgba(154, 166, 159, .1);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, .025), 0 10px 30px rgba(0, 0, 0, .16);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 255, 102, .025);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, .48), 0 0 32px rgba(0, 255, 102, .04);
    --sidebar-width: 274px;
    --header-height: 82px;
    --transition-fast: 180ms ease;
    --transition-base: 240ms ease;
}

html { max-width: 100%; overflow-x: hidden; background: var(--bg-primary); }

body {
    max-width: 100%;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 85% -10%, rgba(0, 255, 102, .055), transparent 28rem),
        radial-gradient(circle at -10% 90%, rgba(0, 217, 87, .025), transparent 30rem),
        var(--bg-primary);
    color: var(--text-primary);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .18;
    background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
    background-size: 48px 48px;
}

::selection { background: rgba(0, 255, 102, .24); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #070907; }
::-webkit-scrollbar-thumb { background: #27312b; border: 2px solid #070907; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #35433b; }

.ui-icon {
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    color: var(--text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.icon-button:hover { color: var(--green); border-color: var(--border-strong); background: var(--green-soft); box-shadow: var(--green-glow); }

/* Buttons */
.btn {
    min-height: 40px;
    padding: 9px 17px;
    border-radius: 10px;
    border-color: var(--border);
    background: rgba(255, 255, 255, .035);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: .05px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary,
.btn-success {
    background: var(--green);
    border-color: var(--green);
    color: #031007;
    box-shadow: 0 0 0 1px rgba(0, 255, 102, .08), 0 8px 24px rgba(0, 255, 102, .12);
}
.btn-primary:hover,
.btn-success:hover { background: var(--green-bright); border-color: var(--green-bright); box-shadow: 0 10px 30px rgba(0, 255, 102, .18); }
.btn-outline {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(0, 255, 102, .2);
    color: #d8e1dc;
}
.btn-outline:hover { background: var(--green-soft); border-color: rgba(0, 255, 102, .48); color: var(--green-bright); }
.btn-ghost { color: var(--text-secondary); background: transparent; }
.btn-ghost:hover { color: var(--green); background: var(--green-soft); }
.btn-danger { background: #361417; border-color: rgba(239, 102, 112, .38); color: #ffb8be; }
.btn-danger:hover { background: #49191e; border-color: var(--danger); }
.btn-danger-ghost { color: #f48a93; border-color: transparent; }
.btn-danger-ghost:hover { background: var(--danger-soft); color: #ffadb4; }
.btn-warning { background: #35270f; border-color: rgba(231, 173, 82, .4); color: #ffd994; }
.btn-warning:hover { background: #483513; border-color: var(--warning); }
.btn-sm { min-height: 34px; padding: 6px 11px; font-size: 12.5px; }

/* Cards and raised surfaces */
.card,
.stat-card,
.task-card,
.client-card,
.client-progress-card,
.designer-load-card,
.designer-progress-card,
.designer-analytics-card,
.overview-mini-designer-card,
.month-summary-card,
.month-card,
.manager-note-card,
.client-work-card,
.video-content-stat-card {
    background: linear-gradient(145deg, rgba(16, 20, 18, .96), rgba(9, 13, 11, .98));
    border: 1px solid rgba(0, 255, 102, .105);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.stat-card:hover,
.task-card:hover,
.client-card:hover,
.client-progress-card:hover,
.designer-load-card:hover,
.designer-progress-card:hover,
.designer-analytics-card:hover,
.overview-mini-designer-card:hover,
.month-summary-card:hover,
.month-card:hover,
.manager-note-card:hover,
.client-work-card:hover,
.video-content-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 102, .3);
    box-shadow: var(--shadow-md), var(--green-glow);
}
.card:hover { border-color: rgba(0, 255, 102, .2); box-shadow: var(--shadow-md); }
/* Slightly tighter corners for this specifically small/dense card. */
.video-content-stat-card { border-radius: 12px; }
.card-header { border-bottom-color: var(--border); }
.card-header h3,
.page-section-title h3 { color: #f8fbf9; letter-spacing: -.15px; }
.page-section-title h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-inline-end: 9px;
    border-radius: 99px;
    background: var(--green);
    box-shadow: 0 0 12px rgba(0, 255, 102, .32);
    vertical-align: -2px;
}

/* Form controls */
.form-label { color: #e8eeea; }
.form-control,
.month-picker-toggle {
    min-height: 43px;
    background: var(--bg-input);
    border-color: rgba(255, 255, 255, .1);
    color: var(--text-primary);
}
.form-control:hover { border-color: rgba(255, 255, 255, .17); }
.form-control:focus,
.month-picker-toggle:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 255, 102, .11), 0 0 20px rgba(0, 255, 102, .055);
}
.form-control:disabled { background: #0b0d0c; color: var(--text-faint); }
select.form-control { color-scheme: dark; }
select.form-control option { background: #0b0f0d; color: var(--text-primary); }
input[type='date']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset; transition: background-color 9999s ease-out; }

/* Badges */
.badge { border: 1px solid transparent; font-weight: 750; }
.badge-progress,
.badge-neutral { color: #b9c3bd; background: rgba(185, 195, 189, .08); border-color: rgba(185, 195, 189, .11); }
.badge-review,
.badge-warning,
.badge-priority-medium { color: #f1c36f; background: var(--warning-soft); border-color: rgba(231, 173, 82, .2); }
.badge-rejected,
.badge-priority-urgent { color: #ff939c; background: var(--danger-soft); border-color: rgba(239, 102, 112, .2); }
.badge-approved,
.badge-priority-normal { color: var(--green-bright); background: var(--green-soft); border-color: rgba(0, 255, 102, .2); }
.badge-category { color: var(--green-bright); background: var(--green-soft); border-color: rgba(0, 255, 102, .15); }

/* Progress */
.progress-track { height: 8px; background: #1a211d; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.progress-fill { background: linear-gradient(90deg, var(--green-deep), var(--green-bright)); box-shadow: 0 0 12px rgba(0, 255, 102, .35); transition: width 600ms cubic-bezier(.2, .75, .3, 1); }
.progress-fill.is-complete { background: linear-gradient(90deg, var(--green), #8affb5); }

/* Modal and menus */
.modal-overlay { background: rgba(0, 0, 0, .78); backdrop-filter: blur(8px); }
.modal {
    background: linear-gradient(150deg, #101512, #080b09 72%);
    border: 1px solid rgba(0, 255, 102, .16);
    box-shadow: var(--shadow-lg);
}
.modal-header,
.modal-footer { border-color: var(--border); }
.modal-close { color: var(--text-secondary); }
.modal-close:hover { background: var(--green-soft); color: var(--green); }
.picker-option { background: rgba(255, 255, 255, .018); border-color: var(--border); }
.picker-option:hover,
.picker-option.is-selected { border-color: var(--green); background: var(--green-soft); box-shadow: var(--green-glow); }
.picker-avatar { background: #131a16; color: var(--green); border: 1px solid rgba(0, 255, 102, .18); }
.account-dropdown,
.month-picker-menu,
.month-context-menu {
    background: rgba(10, 14, 12, .98);
    border-color: rgba(0, 255, 102, .16);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}
.account-dropdown-item { display: flex; align-items: center; gap: 9px; color: var(--text-primary); }
.account-dropdown-item:hover,
.month-picker-item:hover,
.month-context-menu-item:hover { background: var(--green-soft); color: var(--green-bright); }

/* Feedback */
.state-box { color: var(--text-secondary); }
.state-box .state-icon { color: var(--green); opacity: .72; }
.state-box .state-icon .ui-icon { width: 32px; height: 32px; }
.spinner-dark { border-color: rgba(255, 255, 255, .14); border-top-color: var(--green); }
.toast { background: #111713; border: 1px solid var(--border-strong); color: var(--text-primary); }
.toast-success { background: #0b2113; border-color: rgba(0, 255, 102, .28); }
.toast-error { background: #261013; border-color: rgba(239, 102, 112, .3); }
.auth-error-banner,
.task-card-rejection,
.task-card-emergency { color: #ffb5bb; border-color: rgba(239, 102, 112, .25); }
.auth-info-banner,
.task-card-team-notice { color: var(--green-bright); border-color: rgba(0, 255, 102, .22); }
.task-card-modification { color: #f4cc82; border-color: rgba(231, 173, 82, .3); }

/* Dashboard shell */
.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset-block: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #070a08 0%, #050706 100%);
    border-left: 1px solid rgba(0, 255, 102, .1);
    color: var(--text-secondary);
    box-shadow: 14px 0 50px rgba(0, 0, 0, .2);
}
.main-area { width: calc(100% - var(--sidebar-width)); margin-right: var(--sidebar-width); min-height: 100vh; }
.app-shell-no-sidebar .main-area { width: 100%; margin-right: 0; }
.sidebar-brand { min-height: 92px; padding: 18px 20px; border-color: rgba(0, 255, 102, .09); }
.sidebar-logo { width: 84px; height: auto; object-fit: contain; flex: 0 0 auto; }
.sidebar-brand .brand-title { color: #f5faf7; font-size: 15px; letter-spacing: .2px; }
.sidebar-brand .brand-subtitle { color: var(--text-faint); font-size: 10.5px; }
.sidebar-role {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 14px 12px 5px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
}
.sidebar-user-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 255, 102, .25);
    border-radius: 12px;
    background: var(--green-soft);
    color: var(--green);
    font-weight: 800;
}
.sidebar-user-copy { min-width: 0; }
.sidebar-role .sidebar-user-copy strong { display: block; margin: 0; overflow: hidden; color: #eef5f1; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-copy small { display: block; margin-top: 1px; color: var(--text-faint); font-size: 10.5px; }
.sidebar-nav { padding: 10px 12px 14px; }
.sidebar-link {
    min-height: 44px;
    margin-bottom: 5px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #98a39d;
    font-size: 13px;
}
.sidebar-link .nav-icon { display: grid; place-items: center; width: 22px; color: #727f78; }
.sidebar-link:hover { background: rgba(255, 255, 255, .025); border-color: rgba(0, 255, 102, .09); color: #e8efeb; }
.sidebar-link:hover .nav-icon { color: var(--green-bright); }
.sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(0, 255, 102, .12), rgba(0, 255, 102, .045));
    border-color: rgba(0, 255, 102, .28);
    color: #f2fff7;
    box-shadow: inset -3px 0 0 var(--green), 0 0 18px rgba(0, 255, 102, .055);
}
.sidebar-link.is-active .nav-icon { color: var(--green); filter: drop-shadow(0 0 7px rgba(0, 255, 102, .3)); }
.sidebar-link .nav-count { background: var(--green); color: #041008; }
.sidebar-link.is-active .nav-count { background: var(--green-bright); color: #031007; }
.nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66, 0 0 12px rgba(0, 255, 102, .65);
}
.sidebar-footer { border-color: rgba(0, 255, 102, .09); }
.sidebar-logout-btn { justify-content: flex-start; }

.topbar {
    height: var(--header-height);
    padding: 0 28px;
    background: rgba(5, 7, 6, .82);
    border-color: var(--border);
    backdrop-filter: blur(18px);
}
.topbar-title h1 { color: #f7fbf8; font-size: 20px; letter-spacing: -.25px; }
.topbar-title p { color: var(--text-faint); }
.topbar-logo { width: 72px; height: auto; object-fit: contain; }
.sidebar-toggle.icon-button { display: none; }
.topbar-right { gap: 11px; }
.topbar-date {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .02);
    color: var(--text-secondary);
}
.topbar-date .ui-icon { color: var(--green); }
.topbar-notification { position: relative; }
.topbar-notification-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66, 0 0 12px rgba(0, 255, 102, .65);
}
.avatar {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 255, 102, .3);
    border-radius: 12px;
    background: linear-gradient(145deg, #142019, #0b100d);
    color: var(--green);
    box-shadow: inset 0 0 14px rgba(0, 255, 102, .04);
}
.avatar:hover { border-color: var(--green); box-shadow: var(--green-glow); }
.page-content { padding: 28px; }
.breadcrumb-bar { color: var(--text-faint); }
.breadcrumb-crumb { color: var(--green); }
.breadcrumb-current { color: var(--text-primary); }

/* KPI cards */
.stats-grid { gap: 16px; }
.stat-card { position: relative; min-height: 150px; padding: 19px; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; width: 90px; height: 90px; left: -38px; top: -42px; border-radius: 50%; background: rgba(0, 255, 102, .035); filter: blur(2px); }
.stat-card .stat-icon {
    width: 39px;
    height: 39px;
    border: 1px solid rgba(0, 255, 102, .15);
    border-radius: 11px;
    background: var(--green-soft);
    color: var(--green);
}
.stat-card .stat-icon .ui-icon { width: 19px; height: 19px; }
.stat-card .stat-value { color: var(--green-bright); font-size: 29px; line-height: 1.15; }
.stat-card .stat-label { color: var(--text-secondary); }
.stat-card.stat-warning .stat-icon { background: var(--warning-soft); border-color: rgba(231, 173, 82, .18); color: var(--warning); }
.stat-card.stat-warning .stat-value { color: #f1c36f; }
.stat-card.stat-danger .stat-icon { background: var(--danger-soft); border-color: rgba(239, 102, 112, .18); color: var(--danger); }
.stat-card.stat-danger .stat-value { color: #ff8d96; }
.stat-card.stat-success .stat-value { color: var(--green-bright); }

/* Navigation tabs and filters */
.tabs { border-color: var(--border); gap: 4px; }
.tab-btn { color: var(--text-secondary); border-bottom-width: 2px; }
.tab-btn:hover { color: #fff; background: rgba(255, 255, 255, .02); }
.tab-btn.is-active { color: var(--green); border-color: var(--green); }
.filter-chip { background: #0a0e0c; border-color: var(--border); color: var(--text-secondary); }
.filter-chip:hover { border-color: var(--border-strong); color: var(--green-bright); }
.filter-chip.is-active { background: var(--green-soft); border-color: rgba(0, 255, 102, .3); color: var(--green-bright); box-shadow: var(--green-glow); }
.tab-panel.is-active { animation: premiumFadeIn 260ms ease both; }

/* Data tables */
.table-wrap { border-radius: inherit; scrollbar-color: #27312b #070907; }
.data-table { color: var(--text-primary); }
.data-table thead { background: #101412; }
.data-table th { padding-block: 14px; color: #9fa9a3; border-color: var(--border); text-transform: none; letter-spacing: .1px; }
.data-table td { border-color: rgba(255, 255, 255, .055); }
.data-table tbody tr { background: rgba(11, 15, 13, .8); transition: background var(--transition-fast); }
.data-table tr:hover td { background: rgba(0, 255, 102, .035); }

/* Existing task and client components */
.task-card { background: linear-gradient(150deg, #101512, #090c0a); border-color: rgba(0, 255, 102, .1); }
.task-card.is-reviewing { border-color: rgba(231, 173, 82, .3); background: linear-gradient(180deg, rgba(231, 173, 82, .07), #0b0f0d 92px); }
.task-card.is-rejected { border-color: rgba(239, 102, 112, .3); }
.task-card.is-approved { border-color: rgba(0, 255, 102, .28); background: linear-gradient(180deg, rgba(0, 255, 102, .065), #0b0f0d 92px); }
.task-card-thumb { background: #080b0a; border-bottom: 1px solid var(--border); }
.task-card-thumb-icon { color: rgba(0, 255, 102, .35); }
.task-card-ref-btn { background: rgba(255, 255, 255, .02); }
.task-card-ref-btn:hover { background: var(--green-soft); color: var(--green-bright); }
.inline-submit-box,
.designer-analytics-stat,
.designer-progress-stat,
.designer-progress-status,
.designer-load-stat,
.month-card-stat,
.overview-pending-item,
.video-content-empty-note { background: rgba(255, 255, 255, .025); border-color: var(--border); }
.client-card-icon { background: #121914; border: 1px solid rgba(0, 255, 102, .13); color: var(--green); }
.client-card.is-active { background: linear-gradient(145deg, rgba(0, 255, 102, .16), rgba(0, 255, 102, .07)); border-color: rgba(0, 255, 102, .42); box-shadow: var(--green-glow); }
.client-card.is-active .client-card-name { color: #f5fff8; }
.client-card.is-active .client-card-count { color: #9dffbf; }
.client-card.is-active .client-card-icon { background: var(--green); color: #031007; }
.client-section-title { color: var(--text-primary); }
.client-progress-percent,
.month-summary-value { color: var(--green-bright); }
.client-type-btn-lg { background: #0b0f0d; border-color: var(--border); }
.client-type-btn-lg:hover { background: var(--green-soft); border-color: var(--border-strong); }
.client-type-btn-lg.is-active { background: var(--green); border-color: var(--green); color: #031007; box-shadow: var(--green-glow); }
.timeline-dot { background: var(--green); box-shadow: 0 0 10px rgba(0, 255, 102, .4); }

.sidebar-user-copy strong,
.account-dropdown-name,
.client-card-name,
.task-card-client,
.perf-name,
.designer-load-name,
.designer-progress-name,
.designer-analytics-name,
.month-card-name {
    unicode-bidi: plaintext;
}

/* Auth */
.auth-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 102, .09), transparent 26rem),
        radial-gradient(circle at 10% 90%, rgba(0, 232, 93, .035), transparent 28rem),
        #030403;
}
.auth-page::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(0, 255, 102, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 102, .025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.auth-card {
    position: relative;
    z-index: 1;
    max-width: 430px;
    padding: 34px 32px;
    background: rgba(10, 14, 12, .92);
    border: 1px solid rgba(0, 255, 102, .16);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}
.auth-brand { flex-direction: column; justify-content: center; text-align: center; gap: 10px; margin-bottom: 26px; }
.auth-brand-logo { width: 188px; height: auto; object-fit: contain; margin-inline: auto; }
.auth-brand-title { color: #f7fbf8; font-size: 18px; }
.auth-brand-subtitle { color: var(--text-faint); }
.auth-heading { margin-bottom: 23px; color: #f5faf7; font-size: 19px; text-align: center; }
.auth-password-toggle { display: grid; place-items: center; width: 34px; height: 34px; left: 7px; padding: 0; border-radius: 9px; color: var(--text-faint); }
.auth-password-toggle:hover { background: var(--green-soft); color: var(--green); }
.auth-password-toggle .icon-eye-off { display: none; }
.auth-password-toggle[aria-pressed='true'] .icon-eye { display: none; }
.auth-password-toggle[aria-pressed='true'] .icon-eye-off { display: block; }
.auth-password-field .form-control { padding-left: 50px; }

@keyframes premiumFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    :root { --header-height: 74px; }
    .sidebar { transform: translateX(100%); box-shadow: -20px 0 60px rgba(0, 0, 0, .5); }
    .sidebar.is-open { transform: translateX(0); }
    .main-area { width: 100%; margin-right: 0; }
    .sidebar-toggle.icon-button { display: inline-flex; }
    .sidebar-backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(4px); }
    .page-content { padding: 20px; }
    .topbar { padding: 0 18px; }
}

@media (max-width: 640px) {
    .page-content { padding: 16px 13px 24px; }
    .topbar { gap: 10px; padding: 0 13px; }
    .topbar-title h1 { max-width: 52vw; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-title p { display: none; }
    .topbar-notification { width: 37px; height: 37px; }
    .avatar { width: 37px; height: 37px; }
    .stats-grid { gap: 10px; }
    .stat-card { min-height: 132px; padding: 15px; }
    .stat-card .stat-value { font-size: 24px; }
    .card-padded { padding: 17px; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal { max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(24px); }
    .modal-header { padding: 17px 18px; }
    .modal-body { padding: 18px; }
    .modal-footer { padding: 14px 18px; }
    .auth-page { padding: 15px; }
    .auth-card { padding: 28px 20px; }
    .auth-brand-logo { width: 165px; }
}

@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 122px; }
    .sidebar { width: min(88vw, 292px); }
}

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