@import url('/ui-tokens.css');
.account-login{margin:0;min-height:100vh;display:grid;place-items:center;background:#0f1216;color:#e9edf1;font:var(--ff-text-body)/var(--ff-leading-body) var(--ff-font)}.account-login main{box-sizing:border-box;width:min(460px,calc(100vw - 32px));padding:var(--ff-space-6);background:#181d23;border:1px solid #34404a;border-radius:var(--ff-radius-panel)}.account-login h1{font-size:var(--ff-text-h1);line-height:var(--ff-leading-tight);margin:0}.account-login p{color:#b4bdc8}.account-login [hidden]{display:none!important}.account-login label{display:grid;gap:var(--ff-space-2);margin:var(--ff-space-4) 0}.account-login input{box-sizing:border-box;width:100%;min-height:var(--ff-touch);padding:var(--ff-space-3);color:inherit;background:#0f1216;border:1px solid #54616e;border-radius:var(--ff-radius-control);font:inherit}.account-login button{min-height:var(--ff-touch);padding:var(--ff-space-2) var(--ff-space-4);margin:var(--ff-space-1) var(--ff-space-1) var(--ff-space-1) 0;border:0;border-radius:var(--ff-radius-control);background:#4f9cf9;color:#08233c;font:600 var(--ff-text-ui)/var(--ff-leading-ui) var(--ff-font);cursor:pointer}.account-login button:disabled{opacity:.5;cursor:wait}.account-login :focus-visible{outline:3px solid #90c1ff;outline-offset:3px}#status{min-height:24px}
.ff-account-chip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}.ff-account-chip select{max-width:240px;padding:5px 8px}.ff-account-chip a{white-space:nowrap}.ff-account-settings{max-width:740px}.ff-account-settings .account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line,#34404a);padding:12px 0}.ff-account-settings form{display:grid;gap:14px;margin:20px 0}.ff-account-settings label{display:grid;gap:5px}.ff-account-settings input,.ff-account-settings select{box-sizing:border-box;width:100%;padding:9px;border:1px solid var(--line,#34404a);border-radius:6px;background:var(--surface,#181d23);color:var(--ink,#e9edf1);font:inherit}.ff-account-settings button{padding:8px 12px;cursor:pointer}.ff-account-settings .account-fields{display:grid;grid-template-columns:1fr 120px;gap:12px}.ff-account-settings [hidden]{display:none!important}.ff-account-settings summary{cursor:pointer;padding:8px 0}.ff-account-settings .account-status{min-height:22px;color:var(--muted,#b4bdc8)}.ff-account-settings .account-actions{display:flex;gap:8px;flex-wrap:wrap}.ff-account-settings small{color:var(--muted,#b4bdc8)}@media(max-width:650px){.ff-account-chip{width:100%}.ff-account-chip select{flex:1;max-width:100%}.ff-account-settings .account-row{align-items:flex-start}.ff-account-settings .account-fields{grid-template-columns:1fr}}

.ff-account-settings p{margin:10px 0}.ff-account-settings h2{margin:22px 0 6px;font-size:20px}.ff-account-settings form{margin:12px 0;gap:12px}.ff-account-settings button:disabled{opacity:.45;cursor:not-allowed}.ff-account-chip select{background:var(--surface,#181d23);color:var(--ink,#e9edf1);border:1px solid var(--line,#34404a);border-radius:7px}

.ff-account-chip{font-size:var(--ff-text-sm);gap:var(--ff-space-2)}
.ff-account-settings{font-size:var(--ff-text-body);line-height:var(--ff-leading-body)}
.ff-account-settings :is(input,select){font-size:var(--ff-text-body);min-height:var(--ff-touch);border-radius:var(--ff-radius-control);padding:var(--ff-space-2) var(--ff-space-3)}
.ff-account-settings form{gap:var(--ff-space-3);margin:var(--ff-space-4) 0}
.ff-account-settings label{gap:var(--ff-space-2)}
.ff-account-settings small{font-size:var(--ff-text-xs)}
.ff-account-settings .account-row{gap:var(--ff-space-3);padding-block:var(--ff-space-3)}
.ff-account-settings .account-actions{gap:var(--ff-space-2)}
.ff-account-settings button{font-size:var(--ff-text-ui);min-height:var(--ff-control);padding:var(--ff-space-2) var(--ff-space-3)}
@media(pointer:coarse){.ff-account-settings :is(button,summary),.ff-account-chip select{min-height:var(--ff-touch)}}

/* Keep the authentication and settings surfaces in the same paper system as
   the app shell. */
:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --line: #d7dee7;
  --ink: #172231;
  --ink-2: #3e4d5f;
  --muted: #66758a;
  --accent: #1d66c2;
  --accent-bg: #e9f2fc;
}
.account-login { background: var(--bg); color: var(--ink); }
.account-login main { background: var(--surface); border-color: var(--line); box-shadow: 0 8px 28px rgb(23 34 49 / .08); }
.account-login p { color: var(--muted); }
.account-login input { color: var(--ink); background: var(--surface); border-color: var(--line); }
.account-login button { background: var(--accent); color: #fff; }
.account-login :focus-visible { outline-color: var(--accent); }