:root {
      /* Base Colors */
      --black: #000000;
      --white: #ffffff;

      /* Primary scale */
      --primary-900: #0b1220; /* darkest */
      --primary-800: #14213d;
      --primary-700: #23395d;
      --primary-600: #2f4f77;
      --primary-500: #3f6ea8; /* base */
      --primary-400: #5c86b9;
      --primary-300: #7ea2cb;
      --primary-200: #a7c0dc;
      --primary-100: #d3deed;
      --primary-50:  #ecf2fa; /* lightest */

      /* Greys */
      --grey-900: #111827;
      --grey-800: #1f2937;
      --grey-700: #374151;
      --grey-600: #4b5563;
      --grey-500: #6b7280;
      --grey-400: #9ca3af;
      --grey-300: #d1d5db;
      --grey-200: #e5e7eb;
      --grey-100: #f3f4f6;
      --grey-50:  #f9fafb;

      /* Semantic */
      --success-900:#064e3b; --success-700:#047857; --success-500:#10b981; --success-300:#6ee7b7; --success-100:#d1fae5;
      --danger-900:#7f1d1d; --danger-700:#b91c1c; --danger-500:#ef4444; --danger-300:#fca5a5; --danger-100:#fee2e2;
      --warning-900:#78350f; --warning-700:#b45309; --warning-500:#f59e0b; --warning-300:#fcd34d; --warning-100:#fef3c7;
      --info-900:#0c4a6e; --info-700:#0369a1; --info-500:#0ea5e9; --info-300:#7dd3fc; --info-100:#e0f2fe;

      /* Shadows */
      --shadow-100: 0 1px 2px rgba(0,0,0,.06);
      --shadow-200: 0 2px 6px rgba(0,0,0,.09);
      --shadow-300: 0 6px 16px rgba(0,0,0,.12);
      --shadow-400: 0 12px 24px rgba(0,0,0,.16);

      /* Radii & spacing */
      --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;
      --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

      /* Typography */
      --h1: 48px/58px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --h2: 40px/48px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --h3: 32px/38px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --h4: 28px/34px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --h5: 24px/28px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --s1: 18px/28px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --s2: 16px/24px 600 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --b1: 16px/24px 400 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --b2: 14px/20px 400 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --c1: 12px/16px 400 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --c2: 10px/14px 500 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

      /* Focus */
      --focus: 0 0 0 3px rgba(14,165,233,.35);
    }

    /* Base */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font: var(--b1); color: var(--grey-900); background: var(--grey-50); }
    .container { max-width: 1100px; margin: 0 auto; padding: 32px 20px 96px; }

    /* Typography helpers */
    .h1{ font: var(--h1) } .h2{ font: var(--h2) } .h3{ font: var(--h3) } .h4{ font: var(--h4) } .h5{ font: var(--h5) }
    .s1{ font: var(--s1) } .s2{ font: var(--s2) }
    .b1{ font: var(--b1) } .b2{ font: var(--b2) }
    .c1{ font: var(--c1) } .c2{ font: var(--c2) }

    .muted{ color: var(--grey-600) }
    .code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

    /* Card */
    .card{ background:#fff; border:1px solid var(--grey-200); border-radius: var(--r-2xl); box-shadow: var(--shadow-100); }
    .card .hd{ padding: 20px 24px; border-bottom:1px solid var(--grey-200); display:flex; gap:12px; align-items:center; }
    .card .bd{ padding: 20px 24px; }
    .card .ft{ padding: 16px 24px; border-top:1px solid var(--grey-200); display:flex; gap:12px; justify-content:flex-end; }

    /* Buttons */
    .btn { --btn-bg: var(--grey-800); --btn-fg:#fff; --btn-bg-h: var(--grey-700); --btn-bg-p: var(--grey-900); --btn-bd: transparent;
      display:inline-flex; align-items:center; gap:8px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
      border-radius: var(--r-md); cursor:pointer; font: 600 14px/20px Inter; padding:10px 14px; transition: .15s; box-shadow: 0 0 0 rgba(0,0,0,0); }
    .btn i{ font-size:18px }
    .btn:hover{ background: var(--btn-bg-h) }
    .btn:active{ background: var(--btn-bg-p); transform: translateY(0.5px); }
    .btn:focus-visible{ outline: none; box-shadow: var(--focus); }
    .btn[disabled]{ opacity:.6; cursor:not-allowed; }

    .btn-outline{ --btn-bg: transparent; --btn-fg: var(--grey-900); --btn-bg-h: var(--grey-100); --btn-bg-p: var(--grey-200); --btn-bd: var(--grey-300); }
    .btn-ghost{ --btn-bg: transparent; --btn-fg: var(--grey-800); --btn-bg-h: var(--grey-100); --btn-bg-p: var(--grey-200); --btn-bd: transparent; }
    .btn-primary{ --btn-bg: var(--primary-500); --btn-bg-h: var(--primary-600); --btn-bg-p: var(--primary-700); }
    .btn-success{ --btn-bg: var(--success-500); --btn-bg-h: var(--success-700); --btn-bg-p: var(--success-900); }
    .btn-danger{ --btn-bg: var(--danger-500); --btn-bg-h: var(--danger-700); --btn-bg-p: var(--danger-900); }
    .btn-warning{ --btn-bg: var(--warning-500); --btn-bg-h: var(--warning-700); --btn-bg-p: var(--warning-900); color:#111; }
    .btn-info{ --btn-bg: var(--info-500); --btn-bg-h: var(--info-700); --btn-bg-p: var(--info-900); }

    /* Button Sizes */
    .btn.tiny{ padding:6px 10px; border-radius: var(--r-xs); font: 600 10px/12px Inter; }
    .btn.small{ padding:8px 12px; font: 600 12px/16px Inter; }
    .btn.medium{ padding:10px 14px; font: 600 14px/20px Inter; }
    .btn.large{ padding:12px 16px; font: 600 16px/20px Inter; }
    .btn.giant{ padding:16px 22px; font: 600 18px/24px Inter; border-radius: var(--r-lg); }

    .btn-group{ display:inline-flex; border:1px solid var(--grey-300); border-radius: var(--r-md); overflow:hidden; background:#fff }
    .btn-group .btn{ border:0; border-right:1px solid var(--grey-300); background:#fff; color:var(--grey-800); }
    .btn-group .btn:hover{ background:var(--grey-100) }
    .btn-group .btn[aria-pressed="true"]{ background:var(--primary-50); color: var(--primary-700); }
    .btn-group .btn:last-child{ border-right:none }

    /* Inputs */
    .field{ display:grid; gap:8px; }
    .label{ font: var(--s2); color: var(--grey-800); }
    .control{ position:relative; }
    .input{ width:100%; border:1px solid var(--grey-300); border-radius: var(--r-md); padding:10px 12px; background:#fff; font: var(--b1); color:var(--grey-900); }
    .input::placeholder{ color: var(--grey-500) }
    .input:focus{ outline:none; border-color: var(--primary-500); box-shadow: var(--focus); }
    .help{ font: var(--c1); color: var(--grey-600); }
    .field.success .input{ border-color: var(--success-500); box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
    .field.info    .input{ border-color: var(--info-500);    box-shadow: 0 0 0 3px rgba(14,165,233,.25); }
    .field.warning .input{ border-color: var(--warning-500); box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
    .field.error   .input{ border-color: var(--danger-500);  box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
    .field[aria-disabled="true"] .input{ background: var(--grey-100); color: var(--grey-500); cursor:not-allowed }
    .field.large .input{ padding: 14px 14px; font: var(--s2); }

    /* Checkbox / Radio / Toggle */
    .control-inline{ display:flex; align-items:center; gap:10px; }
    input[type="checkbox"], input[type="radio"]{ width:18px; height:18px; accent-color: var(--primary-600); }
    .toggle{ appearance:none; width:44px; height:26px; border-radius: 999px; border:1px solid var(--grey-300); position:relative; cursor:pointer; background: var(--grey-200); transition:.2s; }
    .toggle:after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow: var(--shadow-200); transition:.2s; }
    .toggle:checked{ background: var(--primary-500); border-color: var(--primary-500); }
    .toggle:checked:after{ transform: translateX(18px); }

    /* Badges / Chips */
    .badge{ display:inline-flex; align-items:center; gap:8px; padding:4px 8px; border-radius: 999px; font: 600 12px/16px Inter; border:1px solid transparent; }
    .badge.default{ background: var(--grey-100); color: var(--grey-800); }
    .badge.success{ background: var(--success-100); color: var(--success-700); }
    .badge.info{ background: var(--info-100); color: var(--info-700); }
    .badge.warning{ background: var(--warning-100); color: var(--warning-700); }
    .badge.error{ background: var(--danger-100); color: var(--danger-700); }
    .chip{ composes: badge; }
    .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; background: var(--grey-100); }
    .chip .close{ border:0; background:transparent; cursor:pointer; font-size:16px; line-height:16px; }

    /* Alerts */
    .alert{ display:grid; grid-template-columns:auto 1fr auto; gap:12px 16px; align-items:flex-start; padding:14px 16px; border-radius: var(--r-lg); border:1px solid var(--grey-200); background: #fff; }
    .alert i{ font-size:22px; }
    .alert .title{ font: var(--s2); }
    .alert .desc{ font: var(--b2); color: var(--grey-700); }
    .alert .actions{ display:flex; gap:10px; align-self:center; }
    .alert.success{ border-color: var(--success-300); background: var(--success-100); }
    .alert.info{    border-color: var(--info-300);    background: var(--info-100); }
    .alert.warning{ border-color: var(--warning-300); background: var(--warning-100); }
    .alert.error{   border-color: var(--danger-300);  background: var(--danger-100); }

    /* Avatars */
    .avatar{ width:40px; height:40px; border-radius: 999px; background: var(--primary-200); color: var(--primary-900); display:inline-flex; align-items:center; justify-content:center; font: 600 16px/1 Inter; }

    /* Progress */
    .progress{ width:100%; height:10px; background: var(--grey-200); border-radius:999px; overflow:hidden; }
    .progress > span{ display:block; height:100%; background: var(--primary-500); width:0; transition: width .3s; }

    /* Breadcrumbs */
    .breadcrumbs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .breadcrumbs a{ color: var(--grey-700); text-decoration:none; font: var(--b2) }
    .breadcrumbs .sep{ color: var(--grey-400); }

    /* Tooltip */
    [data-tooltip]{ position:relative; cursor:help; }
    [data-tooltip]:hover:after{ content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#111; color:#fff; font: var(--c1); padding:6px 8px; border-radius:6px; white-space:nowrap; box-shadow: var(--shadow-200); }

    /* Loader */
    .spinner{ width:28px; height:28px; border-radius:50%; border:3px solid var(--grey-300); border-top-color: var(--primary-500); animation: spin .9s linear infinite; }
    @keyframes spin{ to{ transform: rotate(360deg) } }

    /* Navbar */
    .navbar{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--grey-200); box-shadow: var(--shadow-100); }
    .navbar .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:1100px; margin:0 auto; }
    .nav-links{ display:flex; gap:14px; }
    .nav-links a{ text-decoration:none; color:var(--grey-700); font: var(--b2) }
    .nav-links a[aria-current="page"]{ color: var(--primary-700); font-weight:600; }

    /* Bottom navbar */
    .navbar-bottom{ position:fixed; bottom:0; left:0; right:0; z-index:40; background:#fff; border-top:1px solid var(--grey-200); }
    .navbar-bottom .row{ display:grid; grid-template-columns: repeat(5, 1fr); max-width:700px; margin:0 auto; }
    .navbar-bottom a{ display:flex; flex-direction:column; gap:4px; align-items:center; padding:10px 8px; color:var(--grey-600); text-decoration:none; font: var(--c1); }
    .navbar-bottom a[aria-current="page"]{ color: var(--primary-700); }

    /* Cards */
    .vstack{ display:flex; flex-direction:column; gap:16px; }
    .hstack{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .grid{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; }
    .card-vertical .bd{ display:grid; gap:10px; }
    .card-h.small{ display:grid; grid-template-columns: 80px 1fr; gap:12px; padding:12px; }

    /* Tabs */
    .tabs{ display:flex; gap:6px; border-bottom:1px solid var(--grey-200); }
    .tabs button{ background:transparent; border:0; padding:10px 14px; cursor:pointer; font: 600 14px/20px Inter; color: var(--grey-600); border-bottom:2px solid transparent; }
    .tabs button[aria-selected="true"]{ color: var(--primary-700); border-bottom-color: var(--primary-600); }

    /* Pagination */
    .pagination{ display:flex; gap:6px; align-items:center; }
    .pagination button{ min-width:34px; height:34px; border-radius:10px; border:1px solid var(--grey-300); background:#fff; cursor:pointer; }
    .pagination .active{ background: var(--primary-50); border-color: var(--primary-400); color: var(--primary-700); font-weight:600; }

    /* Page control */
    .page-ctrl{ display:flex; gap:8px; align-items:center; }
    .page-ctrl input{ width:64px; text-align:center; }

    /* Stepper */
    .stepper{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
    .step{ display:flex; align-items:center; gap:10px; color: var(--grey-600); }
    .step .dot{ width:28px; height:28px; border-radius:50%; background: var(--grey-200); display:grid; place-items:center; font: 600 12px/1 Inter; }
    .step[aria-current="step"]{ color: var(--primary-800); }
    .step[aria-current="step"] .dot{ background: var(--primary-500); color:#fff; }

    /* Dropdown / Select */
    .select{ position:relative; }
    .select button{ width:100%; justify-content:space-between }
    .menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--grey-200); border-radius:12px; box-shadow: var(--shadow-200); padding:6px; display:none; z-index:10; }
    .menu.open{ display:block }
    .menu .opt{ padding:8px 10px; border-radius:8px; cursor:pointer; }
    .menu .opt:hover{ background: var(--grey-100); }
    .menu .opt[aria-selected="true"]{ background: var(--primary-50); color: var(--primary-800); }

    /* Modal (Pop-Up) */
    .modal-wrap{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(17,24,39,.45); z-index:50; padding:20px; }
    .modal{ width:min(560px, 100%); }
    .modal-wrap.open{ display:flex }

    .modal-content{ background: #fff; padding: 24px; border-radius: 16px; box-shadow: var(--shadow-300); max-width: 500px; width: 100%; }

    /* Context menu / Action sheet */
    .ctx{ position:relative }
    .ctx .ctx-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:220px; background:#fff; border:1px solid var(--grey-200); border-radius:12px; box-shadow: var(--shadow-200); padding:6px; display:none; z-index:20; }
    .ctx .item{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; cursor:pointer; }
    .ctx .item:hover{ background: var(--grey-100) }
    .ctx.open .ctx-menu{ display:block }

    /* Utilities */
    .mt-4{ margin-top:16px } .mt-6{ margin-top:24px } .mb-2{ margin-bottom:8px } .mb-4{ margin-bottom:16px }
    .w-100{ width:100% } .max-w-sm{ max-width:420px } .max-w-md{ max-width:640px }
    .center{ display:grid; place-items:center }
    .right{ display:flex; justify-content:flex-end }
    .space{ display:flex; gap:10px; flex-wrap:wrap }
    .center-h{ justify-content:center; }
    .font-bold{ font-weight: 600; }

    .dashboard-layout{ display:grid; grid-template-columns: 300px 1fr; gap: 16px; }

    @media (max-width: 768px) {
        .dashboard-layout{ grid-template-columns: 1fr; }
    }