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

    :root {
      --bg: #0d0f14;
      --surface: #161920;
      --surface2: #1e222d;
      --border: rgba(255,255,255,0.07);
      --border-focus: rgba(255,180,50,0.5);
      --text: #e8eaf0;
      --text-muted: #6b7280;
      --accent: #f4b942;
      --accent-dim: rgba(244,185,66,0.12);
      --accent-glow: rgba(244,185,66,0.25);
      --danger: #e05252;
      --radius: 10px;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Grid background */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(244,185,66,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244,185,66,0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
    }

    /* Glow blob */
    body::after {
      content: '';
      position: fixed;
      top: -20%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(244,185,66,0.06) 0%, transparent 65%);
      pointer-events: none;
    }

    .login-wrap {
      width: 100%;
      max-width: 400px;
      padding: 24px;
      position: relative;
      z-index: 1;
    }

    /* Logo / header */
    .logo-area {
      text-align: center;
      margin-bottom: 40px;
    }

    .logo-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      background: var(--accent-dim);
      border: 1px solid rgba(244,185,66,0.3);
      border-radius: 14px;
      margin-bottom: 16px;
    }

    .logo-icon svg {
      width: 26px;
      height: 26px;
      fill: var(--accent);
    }

    .logo-title {
      font-family: 'Space Mono', monospace;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .logo-title span {
      color: var(--accent);
    }

    /* Card */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 36px 32px;
    }

    .card-title {
      font-size: 33px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 6px;
    }

    .card-sub {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 32px;
    }

    /* Form */
    .field {
      margin-bottom: 20px;
    }

    .field label {
      display: block;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .field input {
      width: 100%;
      height: 46px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .field input:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .field input::placeholder {
      color: #3a3f4d;
    }

    /* Password field with toggle */
    .password-wrap {
      position: relative;
    }

    .password-wrap input {
      padding-right: 44px;
    }

    .toggle-password {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: var(--text-muted);
      transition: color 0.2s;
      display: flex;
      align-items: center;
    }

    .toggle-password:hover { color: var(--text); }

    /* Error */
    .error-msg {
      display: none;
      background: rgba(224,82,82,0.1);
      border: 1px solid rgba(224,82,82,0.25);
      border-radius: var(--radius);
      padding: 12px 14px;
      font-size: 13px;
      color: #f08080;
      margin-bottom: 20px;
      align-items: center;
      gap: 8px;
    }

    .error-msg.show { display: flex; }

    .error-msg svg {
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    /* Submit button */
    .btn-login {
      width: 100%;
      height: 48px;
      background: var(--accent);
      color: #1a1200;
      border: none;
      border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.1s;
      position: relative;
      overflow: hidden;
    }

    .btn-login:hover { opacity: 0.9; }
    .btn-login:active { transform: scale(0.98); }

    .btn-login.loading {
      pointer-events: none;
      opacity: 0.7;
    }

    .btn-login .btn-text { transition: opacity 0.2s; }
    .btn-login.loading .btn-text { opacity: 0; }

    .btn-spinner {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .btn-login.loading .btn-spinner { display: flex; }

    .spinner-ring {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(26,18,0,0.3);
      border-top-color: #1a1200;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* Footer */
    .login-footer {
      text-align: center;
      margin-top: 28px;
      font-size: 12px;
      color: var(--text-muted);
      font-family: 'Space Mono', monospace;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .login-footer span {
      color: rgba(244,185,66,0.5);
    }

    .btn-back {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--text-muted);
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 5px 12px;
      transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }

    .btn-back:hover {
      color: var(--accent);
      border-color: rgba(244,185,66,0.3);
    }

    /* Animate in */
    .card, .logo-area {
      animation: fadeUp 0.4s ease both;
    }
    .logo-area { animation-delay: 0s; }
    .card { animation-delay: 0.08s; }

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