/* Login page in the v2 (iOS) style: large title, grouped inset fields, system font, follows light / dark. */
:root {
  color-scheme: dark light;
  --bg: #000000; --surface: #1C1C1E; --sep: rgba(84, 84, 88, .55); --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .32); --tint: #0A84FF; --down: #FF453A; --up: #30D158;
  --spring: cubic-bezier(.2, .9, .25, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #F2F2F7; --surface: #FFFFFF; --sep: rgba(60, 60, 67, .29); --label: #000000; --label-2: rgba(60, 60, 67, .6);
          --label-3: rgba(60, 60, 67, .3); --tint: #007AFF; --down: #D70015; --up: #248A3D; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--label); }
body { font-size: 17px; line-height: 1.29; -webkit-font-smoothing: antialiased; }
.login { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 64px) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
         animation: rise .45s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.brand-mark { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--up), #0A84FF); margin: 0 0 18px; }
.large-title { font-size: 34px; line-height: 41px; font-weight: 700; margin: 0 0 6px; }
.subtitle { color: var(--label-2); font-size: 15px; margin: 0 0 28px; }
.group { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 12px; overflow: hidden; }
.row { display: flex; align-items: center; min-height: 48px; padding: 0 16px; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.row label { width: 64px; flex: none; }
.row input { flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--label); background: transparent; border: 0; outline: 0; padding: 12px 0; }
.row input::placeholder { color: var(--label-3); }
.row:focus-within label { color: var(--tint); }
.error { color: var(--down); font-size: 15px; margin: 12px 4px 0; }
.primary { display: block; width: 100%; margin-top: 20px; font: inherit; font-size: 17px; font-weight: 600; color: #fff; background: var(--tint);
           border: 0; border-radius: 12px; padding: 14px; cursor: pointer; transition: transform .15s var(--spring), opacity .15s; }
.primary:active { transform: scale(.98); opacity: .85; }
.primary:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.footnote { font-size: 12px; color: var(--label-3); text-align: center; margin-top: 28px; line-height: 17px; }
@media (prefers-reduced-motion: reduce) { .login { animation: none; } .primary { transition: none; } }