:root,
    html[data-theme="light"] {
      --bg: #eef2f8;
      --bg-accent:
        radial-gradient(680px 300px at 12% -10%, rgba(61, 120, 193, 0.18), transparent 60%),
        radial-gradient(760px 340px at 92% -22%, rgba(87, 142, 211, 0.14), transparent 62%);
      --surface: #ffffff;
      --surface-soft: #f3f7fd;
      --text: #172033;
      --muted: #5f6f8d;
      --line: #d4deee;
      --control-bg: #ffffff;
      --control-line: #b8c8df;
      --button-bg: #2d67a9;
      --button-hover: #265a94;
      --button-text: #ffffff;
      --focus: rgba(65, 132, 208, 0.25);
      --shadow: 0 12px 34px rgba(13, 32, 67, 0.08);
    }
    html[data-theme="dark"] {
      --bg: #0d1727;
      --bg-accent:
        radial-gradient(680px 300px at 12% -10%, rgba(56, 114, 188, 0.26), transparent 60%),
        radial-gradient(760px 340px at 92% -22%, rgba(37, 82, 137, 0.2), transparent 62%);
      --surface: #111d2e;
      --surface-soft: #17263b;
      --text: #e8f0ff;
      --muted: #9fb1ce;
      --line: #2b3f59;
      --control-bg: #13243a;
      --control-line: #33516f;
      --button-bg: #3b7bc0;
      --button-hover: #4a8bd2;
      --button-text: #f4f8ff;
      --focus: rgba(84, 151, 226, 0.34);
      --shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Avenir Next", "Inter", "Segoe UI", "Sora", sans-serif;
      font-size: 15px;
      line-height: 1.42;
      background-color: var(--bg);
      background-image: var(--bg-accent);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 18px;
    }
    .card {
      width: 100%;
      max-width: 400px;
      background: linear-gradient(180deg, var(--surface), var(--surface-soft));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: 14px;
      padding: 21px;
    }
    .field { margin-top: 9px; }
    input, button {
      width: 100%;
      height: 40px;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1px solid var(--control-line);
      background: var(--control-bg);
      color: var(--text);
      font-size: 14px;
    }
    input:focus {
      outline: none;
      border-color: #60a5fa;
      box-shadow: 0 0 0 3px var(--focus);
    }
    button {
      margin-top: 12px;
      cursor: pointer;
      border-color: var(--button-bg);
      background: linear-gradient(180deg, var(--button-bg), var(--button-hover));
      color: var(--button-text);
      font-weight: 700;
    }
    button:hover { filter: brightness(1.03); }
    .small { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
    .flash {
      margin: 8px 0 2px;
      padding: 9px 11px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.35;
      border: 1px solid transparent;
      background: var(--surface-soft);
      color: var(--text);
    }
    .flash.error {
      background: #ffecec;
      border-color: #f1bdbd;
      color: #8f2626;
      font-weight: 700;
    }
    html[data-theme="dark"] .flash.error {
      background: #412127;
      border-color: #7d3a44;
      color: #ffb3b3;
    }
    .login-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .login-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }
    .login-title img {
      width: 26px;
      height: 26px;
      object-fit: contain;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    }
    .theme-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      color: var(--text);
      user-select: none;
      font-size: 11px;
      font-weight: 700;
    }
    .theme-switch input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
    }
    .theme-switch .track {
      position: relative;
      width: 34px;
      height: 20px;
      border-radius: 999px;
      background: #7892b7;
    }
    .theme-switch .thumb {
      position: absolute;
      left: 2px;
      top: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: transform .2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    }
    .theme-switch input:checked + .track {
      background: #0ea5e9;
    }
    .theme-switch input:checked + .track .thumb {
      transform: translateX(14px);
    }