/* ══════════════════════════════════════
       DESIGN TOKENS
    ══════════════════════════════════════ */
    :root {
      --sidebar-bg: #0d1b2a;
      --sidebar-active: #1a6fc4;
      --primary: #1a6fc4;
      --primary-dark: #155299;
      --primary-light: #e8f1fb;
      --accent: #00c9a7;
      --text-dark: #0d1b2a;
      --text-muted: #6b7a8d;
      --border: #dde3ec;
      --bg-light: #f0f4f9;
      --card-bg: #fff;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg-light);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      position: relative;
      overflow: hidden;
    }

    /* Decorative bg circles */
    body::before {
      content: '';
      position: fixed; top: -120px; right: -120px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(26,111,196,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    body::after {
      content: '';
      position: fixed; bottom: -100px; left: -100px;
      width: 400px; height: 400px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,201,167,.1) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── LOGIN CARD ── */
    .login-card {
      background: var(--card-bg);
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(13,27,42,.12);
      max-width: 460px; width: 100%;
      padding: 3rem 2.8rem;
      position: relative; z-index: 2;
      animation: fadeUp .5s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Logo / Brand */
    .brand-mark {
      display: flex; align-items: center; gap: .75rem;
      margin-bottom: 2rem; justify-content: center;
    }
    .brand-icon {
      width: 52px; height: 52px; border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), #2a85d8);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(26,111,196,.35);
    }
    .brand-name { font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text-dark); }
    .brand-name span { color: var(--primary); }
    .brand-sub { font-size: .75rem; color: var(--text-muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

    h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--text-dark); margin-bottom: .3rem; }
    .subtitle { color: var(--text-muted); font-size: .88rem; margin-bottom: 1.8rem; }

    /* FORM */
    .form-label { font-weight: 600; font-size: .82rem; color: var(--text-dark); margin-bottom: .3rem; letter-spacing: .02em; text-transform: uppercase; }
    .form-control {
      border: 1.5px solid var(--border); border-radius: 10px;
      padding: .7rem 1rem; font-size: .92rem; color: var(--text-dark);
      transition: border .2s, box-shadow .2s; background: var(--bg-light);
    }
    .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,111,196,.12); background: #fff; }
    .input-group .input-group-text {
      background: var(--bg-light); border: 1.5px solid var(--border);
      border-right: none; border-radius: 10px 0 0 10px; color: var(--text-muted);
    }
    .input-group .form-control { border-left: none; border-radius: 0 10px 10px 0; }
    .input-group:focus-within .input-group-text { border-color: var(--primary); background: #fff; }
    .btn-toggle-pw {
      border: 1.5px solid var(--border); border-left: none;
      border-radius: 0 10px 10px 0 !important;
      background: var(--bg-light); color: var(--text-muted);
    }
    .btn-toggle-pw:hover { color: var(--primary); }

    /* Demo info box */
    .demo-box {
      background: var(--primary-light); border: 1px solid #c2d8f0;
      border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1.5rem;
      font-size: .82rem; color: var(--primary-dark);
    }

    /* Submit button */
    .btn-login {
      background: linear-gradient(135deg, var(--primary), #2a85d8);
      color: #fff; border: none; border-radius: 10px;
      padding: .8rem; font-weight: 700; font-size: .95rem;
      width: 100%; transition: all .2s;
      box-shadow: 0 4px 16px rgba(26,111,196,.3);
    }
    .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,111,196,.4); }
    .btn-login:active { transform: translateY(0); }

    .forgot-link { text-align: center; font-size: .84rem; color: var(--text-muted); margin-top: 1rem; }
    .forgot-link a { color: var(--primary); text-decoration: none; font-weight: 600; }
    .forgot-link a:hover { text-decoration: underline; }

    /* Error */
    .error-msg { font-size: .82rem; color: #dc3545; margin-top: .3rem; display: none; }