:root {
      --bg: #f0f3f8;
      --surface: #ffffff;
      --surface2: #f5f7fa;
      --border: #dde3ed;
      --border2: #c5cfe0;
      --navy: #1e3a5f;
      --navy-dark: #163052;
      --navy-hover: rgba(255, 255, 255, 0.08);
      --text: #1a2332;
      --text-dim: #4a5568;
      --text-muted: #9ca3af;
      --green: #16a34a;
      --red: #dc2626;
      --amber: #d97706;
      --orange: #ea580c;
      --blue: #2563eb;
      --purple: #7c3aed;
      --cyan: #0891b2;
      --teal: #0d9488;
      --mono: 'JetBrains Mono', monospace;
      --sans: 'Plus Jakarta Sans', sans-serif;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
      --shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .05);
      --shadow-lg: 0 8px 24px rgba(30, 58, 95, .12), 0 2px 6px rgba(0, 0, 0, .06);
      --r: 8px;
      --r-sm: 5px;
      --r-lg: 12px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    *:focus {
      outline: none
    }

    *:focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: 2px;
      border-radius: 3px
    }

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

    html,
    body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      overflow: hidden;
      -webkit-font-smoothing: antialiased
    }

    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative
    }

    .view {
      display: none;
      flex: 1;
      overflow: hidden;
      flex-direction: column
    }

    .view.active {
      display: flex
    }

    /* ── LOGIN ── */
    #view-login {
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, #e8edf5 0%, #f0f3f8 50%, #e4eaf3 100%);
      position: relative;
      overflow-y: auto;
      padding: 20px
    }

    .login-grid {
      position: fixed;
      inset: 0;