:root {
  color-scheme: dark;
  --canvas: #040914;
  --surface: rgba(13, 29, 49, .74);
  --surface-strong: #112742;
  --ink: #f4faff;
  --muted: #a9bdd0;
  --cyan: #54e5ff;
  --cyan-dark: #07374a;
  --line: rgba(157, 190, 219, .2);
  --error: #ff9ba4;
  font-family: "Aptos", "Microsoft JhengHei UI", "Noto Sans TC", sans-serif;
  background: var(--canvas);
  color: var(--ink);
}
html[data-theme="light"] { color-scheme: light; --canvas: #edf4f8; --surface: rgba(255,255,255,.9); --surface-strong: #fff; --ink: #102837; --muted: #526d7e; --cyan: #007f98; --cyan-dark: #d8f0f5; --line: rgba(42,83,105,.2); --error: #ae3341; }
:root {
  --fm-inset-top: 0px;
  --fm-inset-right: 0px;
  --fm-inset-bottom: 0px;
  --fm-inset-left: 0px;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: linear-gradient(rgba(84,229,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(84,229,255,.025) 1px, transparent 1px), radial-gradient(circle at 15% 10%, rgba(38,133,164,.2), transparent 32%), linear-gradient(145deg, #0a1729, var(--canvas) 62%, #061526); background-size: 48px 48px, 48px 48px, auto, auto; }
html[data-theme="light"] body { background: linear-gradient(rgba(0,108,132,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,108,132,.035) 1px, transparent 1px), radial-gradient(circle at 15% 10%, rgba(90,179,197,.18), transparent 32%), linear-gradient(145deg, #d8e7ef, var(--canvas) 62%, #e8f2f6); background-size: 48px 48px, 48px 48px, auto, auto; }
button, input { font: inherit; }
.login-shell { width: min(100% - 32px, 1040px); min-height: 100vh; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); }
.login-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.login-header > div:first-child { display: flex; align-items: center; gap: 10px; color: var(--cyan); }
.login-tools { display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 12px; height: 28px; border: 2px solid var(--cyan); border-width: 0 3px; transform: skew(-12deg); }
.segmented-control { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented-control button { min-width: 48px; min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.segmented-control button.selected { background: var(--cyan-dark); color: var(--cyan); }
.login-layout { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(40px, 9vw, 112px); align-items: center; padding: 48px 0; }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 0; max-width: 560px; font-size: 48px; line-height: 1.08; letter-spacing: 0; }
.login-context > p:last-child { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.login-form { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: inset 0 1px rgba(232,249,255,.08), 0 22px 56px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.field-group + .field-group { margin-top: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 600; }
input { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 6px; padding: 0 13px; background: var(--surface-strong); color: var(--ink); outline: none; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(84,229,255,.15); }
small { display: block; margin-top: 7px; color: var(--muted); }
.login-message { min-height: 24px; margin: 18px 0 8px; color: var(--error); }
.login-submit { width: 100%; min-height: 50px; border: 1px solid var(--cyan); border-radius: 6px; background: var(--cyan); color: #04111a; font-weight: 700; cursor: pointer; }
.login-submit:disabled { border-color: var(--line); background: var(--surface-strong); color: var(--muted); cursor: wait; }
footer { border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 12px; }
@media (max-width: 720px) { .login-header { align-items: flex-start; padding: 10px 0; } .login-tools { justify-content: flex-end; flex-wrap: wrap; } .login-layout { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; } h1 { font-size: 36px; } .login-form { padding: 22px; } }
@media (prefers-reduced-transparency: reduce) { .login-form { background: var(--surface-strong); backdrop-filter: none; } }
@media (forced-colors: active) { .login-form, input, .login-submit { border: 1px solid CanvasText; } }