:root {
      --bg-1: #f3faf8; --bg-2: #e8f4f0; --bg-3: #d4ede5;
      --surface: #ffffff; --surface-dim: #f1f7f5; --surface-hover: #e2efea;
      --text: #1a1a1a; --text-secondary: #5a5a5a; --text-muted: #94978f; --text-on-dark: #ffffff;
      --border: rgba(0,0,0,0.06); --border-strong: rgba(0,0,0,0.1);
      --primary: #1a1a1a; --primary-soft: #eaf2ef; --primary-text: #ffffff;
      --accent: #0d9488; --accent-soft: #ccfbf1; --accent-text: #ffffff;
      --success: #5cb874; --success-soft: #e2f5e7;
      --danger: #e57373; --danger-soft: #fde8e8;
      --info: #4a90c2; --info-soft: #e8f1f9;
      --purple: #7c4dbd; --purple-soft: #f0e7f9;
      --shadow-card: 0 4px 20px rgba(15, 60, 55, 0.06);
      --shadow-lg: 0 8px 24px rgba(15, 60, 55, 0.09);
      --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
      --radius: 14px; --radius-lg: 20px; --radius-pill: 999px;
      --topbar-h: 76px; --sidebar-w: 260px;
      --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    }
    [data-theme="dark"] {
      --bg-1: #0d1614; --bg-2: #111c1a; --bg-3: #16221f;
      --surface: #1c2723; --surface-dim: #131e1b; --surface-hover: #243530;
      --text: #e6efeb; --text-secondary: #9aa39e; --text-muted: #6e7773;
      --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.1);
      --primary: #e6efeb; --primary-soft: #243530; --primary-text: #0d1614;
      --accent: #14b8a6; --accent-soft: #134e4a; --accent-text: #0d1614;
      --success: #7dd396; --success-soft: #1f3525;
      --danger: #ef8a8a; --danger-soft: #3a1f1f;
      --info: #7fb3d9; --info-soft: #1a2a3a;
      --purple: #b09cd0; --purple-soft: #2a1f3a;
      --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    }
    html[lang="hi"] body { font-family: "Hind", "Hanken Grotesk", sans-serif; }
    html[lang="ar"] body { font-family: "Cairo", "Hanken Grotesk", sans-serif; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: var(--font-body);
      font-size: 14px; line-height: 1.5;
      color: var(--text);
      background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-3) 100%);
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      overflow: hidden; letter-spacing: -0.005em;
    }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    input, select, textarea { font-family: inherit; }

    /* === TOPBAR === */
    .topbar {
      position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0;
      height: var(--topbar-h); display: flex; align-items: center;
      padding: 0 28px; gap: 16px; z-index: 100;
    }
    .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; }
    .brand-logo {
      width: 38px; height: 38px; border-radius: 12px;
      background: var(--primary); display: flex; align-items: center; justify-content: center;
      color: var(--accent); font-weight: 800; font-size: 20px;
      position: relative; transform: rotate(-3deg);
    }
    .brand-logo::after {
      content: ""; position: absolute; width: 14px; height: 14px;
      background: var(--accent); border-radius: 50%;
      top: -4px; inset-inline-end: -4px; border: 3px solid var(--bg-2);
    }
    .brand-name { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -0.03em; }

    .topnav-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
    .topnav {
      display: flex; align-items: center;
      background: var(--surface); border-radius: var(--radius-pill);
      padding: 5px; box-shadow: var(--shadow-card);
      gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav-item {
      display: flex; align-items: center; gap: 7px;
      padding: 9px 18px; border-radius: var(--radius-pill);
      font-size: 13.5px; font-weight: 500;
      color: var(--text-secondary); white-space: nowrap;
      transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
    }
    .topnav-item:hover { color: var(--text); background: var(--surface-hover); }
    .topnav-item.active { color: var(--primary-text); background: var(--primary); font-weight: 600; }
    .topnav-item svg { width: 15px; height: 15px; flex-shrink: 0; }

    .topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .action-pill {
      display: flex; align-items: center; gap: 7px;
      padding: 10px 18px; background: var(--surface);
      border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
      font-size: 13.5px; font-weight: 500; color: var(--text);
      transition: all 0.18s ease;
    }
    .action-pill:hover { background: var(--surface-hover); transform: translateY(-1px); }
    .action-pill svg { width: 16px; height: 16px; }

    .icon-circle {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--surface); box-shadow: var(--shadow-card);
      display: flex; align-items: center; justify-content: center;
      color: var(--text); transition: all 0.18s ease;
      position: relative; flex-shrink: 0;
    }
    .icon-circle:hover { background: var(--surface-hover); transform: translateY(-1px); }
    .icon-circle svg { width: 17px; height: 17px; }
    .notif-dot {
      position: absolute; top: 9px; inset-inline-end: 11px;
      width: 8px; height: 8px; background: var(--accent);
      border-radius: 50%; border: 2px solid var(--surface);
    }

    .lang-wrap { position: relative; }
    .lang-menu {
      position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
      background: var(--surface); border-radius: var(--radius);
      box-shadow: var(--shadow-lg); min-width: 180px; padding: 6px;
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: all 0.18s ease; z-index: 200;
    }
    .lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .lang-option {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; border-radius: var(--radius-pill);
      font-size: 13.5px; width: 100%; transition: background 0.15s ease;
      color: var(--text);
    }
    .lang-option:hover { background: var(--surface-hover); }
    .lang-option.active { background: var(--primary); color: var(--primary-text); font-weight: 500; }
    .lang-option .check { width: 14px; height: 14px; opacity: 0; }
    .lang-option.active .check { opacity: 1; }

    /* === LAYOUT === */
    .app {
      display: flex; padding-top: var(--topbar-h); height: 100vh;
      gap: 20px; padding-inline: 24px; padding-bottom: 24px;
    }
    .sidebar {
      width: var(--sidebar-w); flex-shrink: 0;
      background: var(--surface); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card); padding: 22px 14px;
      overflow-y: auto;
    }
    .sidebar.hidden { display: none; }
    .sidebar::-webkit-scrollbar { width: 5px; }
    .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
    .sidebar.animate { animation: slideIn 0.3s ease; }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .sidebar-header { padding: 0 12px 18px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
    .sidebar-eyebrow {
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-muted); font-weight: 600; margin-bottom: 4px;
    }
    .sidebar-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
    .submenu-section { margin-bottom: 18px; }
    .submenu-section:last-child { margin-bottom: 0; }
    .submenu-section-title {
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--text-muted); padding: 4px 12px 8px; font-weight: 600;
    }
    .submenu-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; border-radius: var(--radius-pill);
      font-size: 13.5px; color: var(--text-secondary);
      transition: all 0.15s ease; cursor: pointer;
      font-weight: 500; margin-bottom: 2px;
    }
    .submenu-item:hover { background: var(--surface-hover); color: var(--text); }
    .submenu-item.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
    .submenu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
    .submenu-item-label { flex: 1; }
    .submenu-item-badge {
      background: var(--primary); color: var(--primary-text);
      font-size: 10.5px; font-weight: 600; padding: 2px 8px;
      border-radius: var(--radius-pill); min-width: 22px; text-align: center;
    }

    /* === MAIN === */
    .main { flex: 1; overflow-y: auto; padding-inline-end: 4px; }
    .main::-webkit-scrollbar { width: 6px; }
    .main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

    .page-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
    }
    .page-title { font-size: 44px; font-weight: 700; color: var(--text); letter-spacing: -0.035em; line-height: 1; }
    .page-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 8px; }

    .strip-mini { display: flex; align-items: center; gap: 22px; }
    .strip-mini-item { display: flex; align-items: center; gap: 10px; }
    .strip-mini-icon {
      width: 30px; height: 30px; border-radius: 9px;
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary); box-shadow: var(--shadow-card);
    }
    .strip-mini-icon svg { width: 14px; height: 14px; }
    .strip-mini-value { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
    .strip-mini-label { font-size: 11.5px; color: var(--text-secondary); }

    .strip-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
    .strip-stat { display: flex; flex-direction: column; gap: 6px; }
    .strip-stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
    .strip-pill {
      height: 34px; padding: 0 18px; border-radius: var(--radius-pill);
      display: inline-flex; align-items: center; font-weight: 600;
      font-size: 13px; white-space: nowrap;
    }
    .strip-pill.dark { background: var(--primary); color: var(--primary-text); min-width: 110px; }
    .strip-pill.yellow { background: var(--accent); color: var(--accent-text); min-width: 70px; }
    .strip-pill.striped {
      background: repeating-linear-gradient(45deg, var(--surface) 0 6px, var(--surface-dim) 6px 12px);
      color: var(--text); border: 1px solid var(--border); min-width: 90px;
    }
    .strip-pill.muted { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

    /* === CARDS === */
    .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px; }
    .card-dark { background: var(--primary); color: var(--text-on-dark); }
    [data-theme="dark"] .card-dark { background: #0d0d0d; }
    .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
    .card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
    .card-action {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--surface-dim); display: flex; align-items: center; justify-content: center;
      color: var(--text); transition: all 0.15s ease; flex-shrink: 0; cursor: pointer;
    }
    .card-action:hover { background: var(--surface-hover); }
    .card-action svg { width: 13px; height: 13px; }
    .card-dark .card-action { background: rgba(255,255,255,0.12); color: var(--text-on-dark); }
    .card-dark .card-action:hover { background: rgba(255,255,255,0.2); }
    [dir="rtl"] .card-action svg.flip { transform: scaleX(-1); }

    /* === DASHBOARD GRID === */
    .dash-grid { display: grid; grid-template-columns: 320px 1fr 320px; gap: 18px; margin-top: 24px; }
    @media (max-width: 1280px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

    .schedule-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; }
    .schedule-day { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; cursor: pointer; transition: background 0.15s ease; }
    .schedule-day:hover { background: var(--surface-hover); }
    .schedule-day-name { font-size: 10.5px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; }
    .schedule-day-num { font-size: 16px; font-weight: 600; color: var(--text); margin-top: 2px; }
    .schedule-day.active { background: var(--accent-soft); }
    .schedule-day.active .schedule-day-num { font-weight: 700; }
    .schedule-timeline { display: flex; gap: 12px; align-items: flex-start; }
    .timeline-times { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
    .time-pill { width: 50px; height: 26px; border-radius: var(--radius-pill); background: var(--surface-dim); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
    .time-pill.dark { background: var(--primary); color: var(--primary-text); }
    .time-pill.yellow { background: var(--accent); color: var(--accent-text); }
    .timeline-events { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
    .timeline-event { padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.3; }
    .timeline-event.dark { background: var(--primary); color: var(--text-on-dark); }
    .timeline-event.light { background: var(--surface-dim); color: var(--text); }
    .timeline-event-title { font-weight: 600; font-size: 13px; }
    .timeline-event-time { font-size: 11px; opacity: 0.7; margin-top: 1px; }
    .spacer { height: 32px; }

    .row-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 14px; transition: background 0.15s ease; cursor: pointer; }
    .row-item:hover { background: var(--surface-dim); }
    .row-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
    .row-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
    .row-name { font-weight: 600; color: var(--text); font-size: 13.5px; }
    .row-meta { font-size: 11.5px; color: var(--text-muted); }
    .row-salary { font-weight: 600; font-size: 13px; color: var(--text); }

    .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
    .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .badge.green { background: var(--success-soft); color: var(--success); }
    .badge.gray { background: var(--surface-dim); color: var(--text-muted); }
    .badge.yellow { background: #fff4c2; color: #8b6914; }
    .badge.red { background: var(--danger-soft); color: var(--danger); }
    .badge.blue { background: var(--info-soft); color: var(--info); }
    .badge.purple { background: var(--purple-soft); color: var(--purple); }
    [data-theme="dark"] .badge.yellow { background: #3a3320; color: #ffd93d; }

    .attendance-stat { display: flex; gap: 28px; align-items: flex-end; margin-bottom: 4px; }
    .attendance-num { display: flex; align-items: center; gap: 6px; font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
    .attendance-num svg { width: 18px; height: 18px; }
    .attendance-num.green { color: var(--success); }
    .attendance-num.red { color: #ff9090; }
    .dot-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; padding: 14px 0 4px; }
    .dot { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.15); }
    .dot.on { background: var(--accent); }
    .dot.warm { background: #f4a847; }

    .chart-card { grid-column: span 2; }
    @media (max-width: 900px) { .chart-card { grid-column: auto; } }
    .chart-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; }
    .chart-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
    .chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    .chart-area { position: relative; height: 160px; margin-top: 8px; }
    .chart-area svg { width: 100%; height: 100%; overflow: visible; }

    .donut-card { display: flex; align-items: center; gap: 22px; }
    .donut { width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(var(--accent) 0deg 252deg, var(--primary) 252deg 360deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
    .donut::before { content: ""; position: absolute; inset: 14px; background: var(--surface); border-radius: 50%; }
    .donut-center { position: relative; z-index: 1; text-align: center; }
    .donut-num { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
    .donut-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
    .donut-legend { display: flex; flex-direction: column; gap: 10px; }
    .donut-legend-row { display: flex; align-items: center; gap: 8px; }
    .donut-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .donut-dot.yellow { background: var(--accent); }
    .donut-dot.dark { background: var(--primary); }
    .donut-legend-val { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
    .donut-legend-key { font-size: 11.5px; color: var(--text-secondary); margin-inline-start: 6px; }

    /* === TABLES === */
    .table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; margin-top: 20px; }
    .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--surface); border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-card); cursor: pointer; transition: all 0.15s ease; color: var(--text); }
    .filter-pill:hover { background: var(--surface-hover); }
    .filter-pill svg { width: 12px; height: 12px; opacity: 0.6; }
    .search-pill { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
    .search-pill svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
    .search-pill input { flex: 1; border: none; background: none; outline: none; color: var(--text); font-size: 13.5px; }
    .search-pill input::placeholder { color: var(--text-muted); }

    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
    .btn svg { width: 14px; height: 14px; }
    .btn-primary { background: var(--primary); color: var(--primary-text); }
    .btn-primary:hover { background: #2a2a2a; transform: translateY(-1px); }
    [data-theme="dark"] .btn-primary:hover { background: #fff; }
    .btn-accent { background: var(--accent); color: var(--accent-text); }
    .btn-accent:hover { background: #0b7d72; transform: translateY(-1px); }
    .btn-ghost { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
    .btn-ghost:hover { background: var(--surface-hover); }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { background: #d65d5d; transform: translateY(-1px); }
    .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; }
    .btn-icon:hover { background: var(--surface-hover); }
    .btn-icon svg { width: 14px; height: 14px; }

    .data-table-wrap { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th { text-align: start; padding: 14px 18px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px dashed var(--border-strong); white-space: nowrap; }
    .data-table th .sortable { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
    .data-table th .sortable svg { width: 11px; height: 11px; opacity: 0.5; }
    .data-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table tbody tr { transition: background 0.15s ease; cursor: pointer; }
    .data-table tbody tr:hover { background: var(--surface-dim); }
    .data-table tbody tr.selected { background: var(--accent); }
    .data-table tbody tr.selected td { color: var(--accent-text); }
    .data-table tbody tr.selected .row-name, .data-table tbody tr.selected .row-meta { color: var(--accent-text); }

    .table-cell-emp { display: flex; align-items: center; gap: 10px; }
    .table-cell-flag { display: inline-flex; align-items: center; gap: 6px; }
    .flag { width: 18px; height: 12px; border-radius: 2px; background: var(--surface-dim); display: inline-block; }
    .row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
    .data-table tbody tr:hover .row-actions { opacity: 1; }
    .data-table tbody tr.selected .row-actions { opacity: 1; }
    .row-act-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; }
    .row-act-btn:hover { background: var(--surface-hover); }
    .row-act-btn svg { width: 13px; height: 13px; }
    .row-act-btn.danger { color: var(--danger); }

    .checkbox-cell { width: 20px; }
    .table-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface); transition: all 0.15s; }
    .table-checkbox.checked { background: var(--primary); border-color: var(--primary); }
    .table-checkbox.checked svg { width: 10px; height: 10px; color: var(--primary-text); }
    .table-checkbox:not(.checked) svg { display: none; }

    .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; padding-bottom: 8px; }
    .page-btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
    .page-btn:hover { background: var(--surface-hover); }
    .page-btn.active { background: var(--primary); color: var(--primary-text); }
    .page-btn svg { width: 12px; height: 12px; }
    [dir="rtl"] .page-btn svg { transform: scaleX(-1); }

    /* === MODAL === */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all 0.2s ease; backdrop-filter: blur(2px); }
    .modal-overlay.open { opacity: 1; visibility: visible; }
    .modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 100%; max-width: 540px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.96) translateY(8px); transition: transform 0.2s ease; }
    .modal-overlay.open .modal { transform: scale(1) translateY(0); }
    .modal.wide { max-width: 720px; }
    .modal-header { padding: 22px 24px 14px; display: flex; align-items: center; justify-content: space-between; }
    .modal-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
    .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .modal-close:hover { background: var(--surface-hover); }
    .modal-close svg { width: 14px; height: 14px; }
    .modal-body { padding: 4px 24px 18px; overflow-y: auto; flex: 1; }
    .modal-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
    .modal-footer { padding: 14px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }

    /* === FORMS === */
    .form-row { margin-bottom: 14px; }
    .form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
    .form-input, .form-select, .form-textarea { width: 100%; padding: 11px 16px; background: var(--surface-dim); border: 1.5px solid transparent; border-radius: var(--radius-pill); font-size: 14px; color: var(--text); outline: none; transition: all 0.15s ease; }
    .form-input:focus, .form-select:focus, .form-textarea:focus { background: var(--surface); border-color: var(--accent); }
    .form-textarea { border-radius: var(--radius); min-height: 90px; resize: vertical; padding: 12px 16px; }
    .form-select { appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%235a5a5a" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>'); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }
    [dir="rtl"] .form-select { background-position: left 16px center; padding-right: 16px; padding-left: 40px; }
    [data-theme="dark"] .form-select { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23a8a39a" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>'); }

    /* === CARDS GRID (Departments, Jobs, etc.) === */
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 4px; }

    .dept-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px; transition: transform 0.2s ease, box-shadow 0.2s; cursor: pointer; }
    .dept-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .dept-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
    .dept-icon svg { width: 22px; height: 22px; }
    .dept-name { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
    .dept-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
    .dept-stats { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
    .dept-stat-num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
    .dept-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    .job-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px; transition: transform 0.2s ease, box-shadow 0.2s; cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
    .job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .job-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
    .job-dept { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
    .job-meta { display: flex; flex-wrap: wrap; gap: 6px; }
    .job-applicants { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); }
    .job-applicants-count { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
    .job-applicants-label { font-size: 11px; color: var(--text-muted); }

    /* === DETAIL PAGE === */
    .detail-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; margin-top: 4px; }
    @media (max-width: 1024px) { .detail-grid { grid-template-columns: 1fr; } }
    .detail-avatar-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px; }
    .detail-avatar {
      width: 100%; aspect-ratio: 1; border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      font-size: 64px; font-weight: 700; color: var(--accent-text);
      overflow: hidden; margin-bottom: 14px;
    }
    .detail-info-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px; }
    .detail-name { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
    .detail-role { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
    .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
    .tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
    .tag-pill.purple { background: var(--purple-soft); color: var(--purple); }
    .tag-pill.green { background: var(--success-soft); color: var(--success); }
    .tag-pill.blue { background: var(--info-soft); color: var(--info); }
    .tag-pill.yellow { background: #fff4c2; color: #8b6914; }
    [data-theme="dark"] .tag-pill.yellow { background: #3a3320; color: #ffd93d; }

    .detail-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
    .detail-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
    .detail-list { display: flex; flex-direction: column; gap: 8px; }
    .detail-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .detail-row-label { font-size: 13px; color: var(--text-muted); }
    .detail-row-val { font-size: 13.5px; font-weight: 500; color: var(--text); }

    /* === TOAST === */
    .toast-host { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
    .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; animation: toastIn 0.25s ease forwards; }
    .toast.dismiss { animation: toastOut 0.2s ease forwards; }
    .toast.success { color: var(--success); }
    .toast.error { color: var(--danger); }
    .toast.info { color: var(--info); }
    .toast svg { width: 16px; height: 16px; flex-shrink: 0; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

    /* === STUB === */
    .stub { padding: 80px 30px; text-align: center; }
    .stub-icon { width: 72px; height: 72px; border-radius: 22px; background: var(--surface); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; box-shadow: var(--shadow-card); }
    .stub-icon svg { width: 32px; height: 32px; color: var(--accent); }
    .stub h3 { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.025em; }
    .stub p { font-size: 14px; max-width: 380px; margin: 0 auto; color: var(--text-secondary); }

    /* === LEAVE / APPROVALS LIST === */
    .approval-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 22px; margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
    @media (max-width: 768px) { .approval-card { grid-template-columns: 1fr; } }
    .approval-emp { display: flex; align-items: center; gap: 12px; }
    .approval-details { display: flex; flex-direction: column; gap: 6px; }
    .approval-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text-secondary); }
    .approval-meta-item { display: inline-flex; align-items: center; gap: 5px; }
    .approval-meta-item svg { width: 13px; height: 13px; opacity: 0.7; }
    .approval-actions { display: flex; gap: 8px; }

    /* === ANIMATIONS === */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .page-anim > * { animation: fadeUp 0.4s ease backwards; }
    .page-anim > *:nth-child(1) { animation-delay: 0.05s; }
    .page-anim > *:nth-child(2) { animation-delay: 0.1s; }
    .page-anim > *:nth-child(3) { animation-delay: 0.15s; }
    .page-anim > *:nth-child(4) { animation-delay: 0.2s; }
    .page-anim > *:nth-child(5) { animation-delay: 0.25s; }

    @media (max-width: 1024px) {
      .topnav-item-label { display: none; }
      .action-pill span { display: none; }
      .app { padding-inline: 12px; gap: 12px; }
      .page-title { font-size: 32px; }
      .topbar { padding-inline: 12px; }
    }
    @media (max-width: 768px) {
      .sidebar:not(.hidden) { position: fixed; top: var(--topbar-h); inset-inline-start: 12px; z-index: 90; width: calc(100vw - 24px); max-width: 280px; height: calc(100vh - var(--topbar-h) - 24px); }
    }

    /* === BLAZOR LOADING & ERROR UI === */
    .app-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
    .app-loading-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--surface-hover); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
    .app-loading-text { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
    @keyframes spin { to { transform: rotate(360deg); } }

    #blazor-error-ui {
        background: var(--danger); color: #fff; bottom: 0; box-shadow: var(--shadow-lg);
        display: none; left: 0; padding: 12px 20px; position: fixed; width: 100%; z-index: 3000; font-size: 13.5px;
    }
    #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }
    #blazor-error-ui .reload { color: #fff; text-decoration: underline; }

    /* Spinner inside buttons / inline */
    .spinner-inline { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: spin 0.7s linear infinite; }
    .center-pad { padding: 60px 0; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--text-secondary); }

    /* === AUTH PAGES (split-screen) === */
    .auth-screen {
      position: fixed; inset: 0; display: flex;
      background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-3) 100%);
    }
    .auth-left {
      width: 460px; min-width: 380px; flex-shrink: 0;
      display: flex; flex-direction: column;
      padding: 28px 48px 24px; overflow-y: auto;
    }
    .auth-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .auth-brand-logo {
      width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
      background: var(--primary); display: flex; align-items: center; justify-content: center;
      color: var(--accent); font-weight: 800; font-size: 20px;
      transform: rotate(-3deg);
    }
    .auth-brand-name { font-weight: 800; font-size: 14px; letter-spacing: -0.02em; }
    .auth-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .auth-form { width: 100%; max-width: 320px; margin: auto; padding: 24px 0; }
    .auth-title    { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; text-align: center; margin-bottom: 6px; }
    .auth-subtitle { font-size: 13.5px; color: var(--text-secondary); text-align: center; margin-bottom: 28px; }
    .auth-error {
      display: flex; align-items: center; gap: 8px;
      background: var(--danger-soft); color: var(--danger);
      border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
      border-radius: var(--radius); padding: 10px 14px;
      font-size: 13px; font-weight: 500; margin-bottom: 16px;
    }
    .auth-info {
      margin-top: 14px; padding: 9px 14px;
      background: var(--info-soft); color: var(--info);
      border-radius: var(--radius); font-size: 12.5px; font-weight: 500; text-align: center;
    }
    .form-group  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .form-label  { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-inline-start: 6px; }
    .form-hint   { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
    .form-error  { font-size: 12px; color: var(--danger); font-weight: 500; margin-inline-start: 6px; }
    .form-input {
      width: 100%; height: 46px; padding: 0 18px;
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: var(--radius-pill); color: var(--text); font-size: 14px;
      box-shadow: var(--shadow-card);
      transition: border-color 0.15s, box-shadow 0.15s;
      outline: none;
    }
    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    }
    .input-with-action { position: relative; }
    .input-with-action .form-input { padding-inline-end: 48px; }
    .input-action-btn {
      position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); opacity: 0.7; padding: 4px; display: flex;
    }
    .input-action-btn:hover { opacity: 1; color: var(--accent); }
    .auth-submit-btn {
      width: 100%; height: 48px; margin-top: 10px;
      background: var(--accent); color: var(--accent-text);
      border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
      transition: opacity 0.15s, transform 0.1s;
    }
    .auth-submit-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
    .auth-submit-btn:active:not(:disabled) { transform: translateY(0); }
    .auth-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .btn-spinner {
      width: 16px; height: 16px; border-radius: 50%;
      border: 2px solid color-mix(in srgb, var(--accent-text) 40%, transparent); border-top-color: var(--accent-text);
      animation: spin 0.7s linear infinite; display: inline-block;
    }
    .social-row { display: flex; gap: 12px; margin-top: 14px; }
    .social-btn {
      flex: 1; height: 44px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: var(--surface); border: 1.5px solid var(--border-strong);
      border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; color: var(--text);
      transition: background 0.15s, transform 0.1s;
    }
    .social-btn:hover { background: var(--surface-hover); transform: translateY(-1px); }
    .auth-link { color: var(--accent); font-weight: 700; }
    .auth-link:hover { text-decoration: underline; }
    .auth-hint {
      margin-top: 18px; padding: 9px 14px;
      background: var(--accent-soft); border-radius: var(--radius);
      font-size: 12px; color: var(--text-secondary); text-align: center;
    }
    .auth-hint strong { color: var(--accent); }
    .auth-footer {
      flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
      font-size: 12.5px; color: var(--text-secondary); padding-top: 12px;
    }
    .auth-footer-muted { color: var(--text-muted); text-decoration: underline; }
    .auth-footer-muted:hover { color: var(--text-secondary); }

    /* Right showcase panel */
    .auth-right {
      flex: 1; min-width: 0; position: relative;
      margin: 16px 16px 16px 0; border-radius: 32px; overflow: hidden;
      background:
        radial-gradient(circle at 75% 15%, rgba(255,255,255,0.16), transparent 45%),
        radial-gradient(circle at 20% 85%, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(135deg, #0f766e 0%, #115e59 45%, #134e4a 100%);
    }
    .auth-right::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px);
    }
    .showcase-close {
      position: absolute; top: 22px; inset-inline-end: 22px; z-index: 5;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.92); color: #1a1a1a;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; box-shadow: var(--shadow-lg); cursor: default;
    }
    .float-card {
      position: absolute; z-index: 3;
      border-radius: 18px; box-shadow: 0 14px 38px rgba(0,0,0,0.28);
      animation: floatY 5s ease-in-out infinite;
    }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }
    .task-card {
      top: 9%; inset-inline-start: 8%;
      background: var(--accent); color: #ffffff;
      padding: 14px 20px 12px; min-width: 220px;
    }
    .task-dot {
      position: absolute; top: 12px; inset-inline-end: 14px;
      width: 7px; height: 7px; border-radius: 50%; background: #fde047;
    }
    .task-title { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
    .task-card .task-time { font-size: 12px; opacity: 0.85; }
    .task-card-shadow {
      top: calc(9% + 34px); inset-inline-start: calc(8% + 44px); z-index: 2;
      background: rgba(10, 20, 18, 0.62); color: rgba(255,255,255,0.75);
      padding: 12px 20px; backdrop-filter: blur(4px);
      animation-delay: 0.6s;
    }
    .task-card-shadow .task-time { font-size: 12px; }
    .calendar-card {
      bottom: 27%; inset-inline-end: 9%;
      background: #ffffff; color: #1a1a1a; padding: 14px 18px;
      animation-delay: 1.2s;
    }
    .cal-row { display: flex; gap: 14px; }
    .cal-day {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      font-size: 11px; color: #94978f; padding: 6px 7px; border-radius: 12px;
    }
    .cal-day b { font-size: 14px; color: #1a1a1a; font-weight: 700; }
    .cal-day.active { background: #0d9488; color: rgba(255,255,255,0.85); }
    .cal-day.active b { color: #ffffff; }
    .meeting-card {
      bottom: 9%; inset-inline-end: 24%;
      background: #ffffff; color: #1a1a1a; padding: 14px 20px; min-width: 200px;
      animation-delay: 1.8s;
    }
    .meeting-title { font-weight: 700; font-size: 13.5px; }
    .meeting-time  { font-size: 12px; color: #94978f; margin: 3px 0 10px; }
    .meeting-avatars { display: flex; }
    .mini-avatar {
      width: 26px; height: 26px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #fff;
      border: 2px solid #fff; margin-inline-start: -7px;
    }
    .mini-avatar:first-child { margin-inline-start: 0; }
    .mini-avatar.a1 { background: #0d9488; }
    .mini-avatar.a2 { background: #7c4dbd; }
    .mini-avatar.a3 { background: #4a90c2; }
    .mini-avatar.a4 { background: #5cb874; }
    .mini-avatar.dot { background: #f1f5f4; color: #5a5a5a; }
    .mini-avatar.dot::after { content: "+"; }
    .showcase-caption {
      position: absolute; bottom: 7%; inset-inline-start: 8%; z-index: 3;
      color: #ffffff; max-width: 340px;
    }
    .showcase-caption-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
    .showcase-caption-sub   { font-size: 13.5px; opacity: 0.75; line-height: 1.55; }

    @media (max-width: 980px) {
      .auth-right { display: none; }
      .auth-left  { width: 100%; min-width: 0; }
    }

    /* === USER MENU (topbar) === */
    .user-menu-wrap  { position: relative; }
    .user-pill {
      display: flex; align-items: center; gap: 8px;
      background: var(--surface); border-radius: var(--radius-pill);
      padding: 5px 12px 5px 5px; box-shadow: var(--shadow-card);
      font-size: 13px; font-weight: 600; color: var(--text);
      transition: box-shadow 0.15s;
    }
    .user-pill:hover, .user-pill.open { box-shadow: var(--shadow-lg); }
    .user-avatar {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--accent); color: var(--accent-text);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; flex-shrink: 0;
    }
    .user-avatar.lg { width: 38px; height: 38px; font-size: 16px; }
    .user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-dropdown {
      position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
      min-width: 240px; background: var(--surface);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
      border: 1px solid var(--border); z-index: 200; overflow: hidden;
      animation: fadeSlideIn 0.15s ease;
    }
    .user-dropdown-header {
      display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px;
    }
    .user-dropdown-name  { font-weight: 700; font-size: 14px; }
    .user-dropdown-email { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
    .user-dropdown-divider { height: 1px; background: var(--border); }
    .user-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; font-size: 13.5px; font-weight: 500;
      width: 100%; transition: background 0.12s;
    }
    .user-dropdown-item:hover { background: var(--surface-hover); }
    .user-dropdown-item.danger { color: var(--danger); }
    .user-dropdown-item.danger:hover { background: var(--danger-soft); }
    .overlay-dismiss {
      /* Must stay BELOW .topbar (z-index: 100): the topbar is a stacking context,
         so the dropdown inside it can never paint above a root-level overlay. */
      position: fixed; inset: 0; z-index: 99;
    }

    /* === ROLE SEGMENT (register) === */
    .role-segment { display: flex; gap: 8px; }
    .role-option {
      flex: 1; height: 40px; border-radius: var(--radius-pill);
      background: var(--surface); border: 1.5px solid var(--border-strong);
      font-size: 13px; font-weight: 600; color: var(--text-secondary);
      transition: all 0.15s;
    }
    .role-option:hover { border-color: var(--accent); }
    .role-option.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

    /* === LEARNING PATHWAY === */
    .pathway-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
    .pathway-progress { min-width: 220px; flex: 1; max-width: 360px; }
    .progress-track { height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
    .progress-label { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

    .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
    .module-card {
      background: var(--surface); border-radius: var(--radius-lg); padding: 20px;
      box-shadow: var(--shadow-card); border: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 12px; position: relative;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .module-card:not(.locked):hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .module-card.locked { opacity: 0.65; }
    .module-stage {
      display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-pill);
    }
    .module-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-text);
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
    .module-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
    .module-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .module-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); margin-top: auto; }
    .status-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
    .status-pill.completed { background: var(--success-soft); color: var(--success); }
    .status-pill.available, .status-pill.inprogress { background: var(--info-soft); color: var(--info); }
    .status-pill.locked { background: var(--surface-hover); color: var(--text-muted); }
    .module-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn-learn {
      height: 38px; padding: 0 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-text);
      transition: opacity 0.15s;
    }
    .btn-learn:hover { opacity: 0.9; }
    .btn-learn.secondary { background: var(--surface-hover); color: var(--text); }
    .btn-learn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Lesson list inside a module */
    .lesson-list { display: flex; flex-direction: column; gap: 6px; }
    .lesson-row {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
      border-radius: var(--radius); background: var(--surface-dim); font-size: 13px;
      cursor: pointer; transition: background 0.12s;
    }
    .lesson-row:hover { background: var(--surface-hover); }
    .lesson-row.locked { cursor: not-allowed; opacity: 0.6; }
    .lesson-type { font-size: 11px; color: var(--text-muted); margin-inline-start: auto; }
    .lesson-check { color: var(--success); }

    /* === LESSON PLAYER === */
    .player-wrap { max-width: 860px; margin: 0 auto; }
    .player-media { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-card); }
    .player-media iframe, .player-media video { width: 100%; height: 100%; border: 0; display: block; }
    .player-body { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; margin-top: 16px; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
    .player-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

    /* === QUIZ === */
    .quiz-card { max-width: 720px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
    .quiz-q { padding: 16px 0; border-bottom: 1px solid var(--border); }
    .quiz-q:last-of-type { border-bottom: none; }
    .quiz-q-text { font-weight: 600; margin-bottom: 12px; }
    .quiz-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); margin-bottom: 8px; cursor: pointer; transition: all 0.12s; }
    .quiz-opt:hover { border-color: var(--accent); }
    .quiz-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
    .quiz-result { text-align: center; padding: 24px; }
    .quiz-result-score { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
    .quiz-result.pass .quiz-result-score { color: var(--success); }
    .quiz-result.fail .quiz-result-score { color: var(--danger); }

    /* === SCORE BREAKDOWN === */
    .score-breakdown { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
    .score-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
    .score-label { font-size: 13.5px; font-weight: 600; }
    .score-weight { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--radius-pill); margin-inline-start: 6px; }
    .score-pct { font-size: 13.5px; font-weight: 700; }

    /* === RECORD-WRITTEN TOOLBAR === */
    .record-written { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .form-input.mini { width: 110px; height: 38px; }

    /* === TRAINER RUBRIC === */
    .rubric { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
    .rubric-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .rubric-label { font-size: 13.5px; font-weight: 500; }
    .rubric-marks { display: flex; gap: 6px; }
    .rubric-mark {
      width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--border-strong);
      background: var(--surface); font-weight: 700; color: var(--text-secondary); transition: all 0.12s;
    }
    .rubric-mark:hover { border-color: var(--accent); }
    .rubric-mark.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
    .rubric-total { text-align: right; font-size: 15px; margin: 8px 0 12px; }
    .rubric-total strong { color: var(--accent); }

    /* === CERTIFICATES === */
    .certificate-card {
      background: var(--surface); border-radius: var(--radius-lg); padding: 24px; text-align: center;
      box-shadow: var(--shadow-card); border: 2px solid var(--border); position: relative; overflow: hidden;
    }
    .certificate-card.winner { border-color: #d4af37; background: linear-gradient(160deg, var(--surface), color-mix(in srgb, #d4af37 8%, var(--surface))); }
    .certificate-card.merit { border-color: var(--accent); }
    .certificate-seal {
      width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      background: var(--accent-soft); color: var(--accent);
    }
    .certificate-card.winner .certificate-seal { background: #faf3d8; color: #b8902a; }
    .certificate-type { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
    .certificate-card.winner .certificate-type { color: #b8902a; }
    .certificate-program { font-size: 11.5px; color: var(--text-muted); margin-top: 12px; }
    .certificate-name { font-size: 18px; font-weight: 700; margin: 4px 0; }
    .certificate-no { font-size: 11px; color: var(--text-muted); font-family: monospace; }
    .certificate-date { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* validation message */
    .field-error { color: var(--danger); font-size: 11.5px; margin-top: 4px; display: block; }
    .form-input.invalid, .form-select.invalid { border-color: var(--danger); }