/* Auth layout mirrors the local 5174 reference; colours come from Dots voice. */
html.account-locked #app { visibility:hidden; pointer-events:none; }
html.account-locked body { overflow:hidden; }
#accountGate[hidden],#accountGate [hidden],.settings-account-page [hidden] { display:none!important; }
#accountGate { position:fixed; inset:0; z-index:10000; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --workspace-accent:#5e60ed; --workspace-text:#f4f5f8; --workspace-muted:#a4a9b6; --workspace-border:rgba(255,255,255,.10); --workspace-panel:#191c28; --workspace-danger:#ff9ba8; }
body.account-light #accountGate { --workspace-text:#181b23; --workspace-muted:#6b7180; --workspace-border:rgba(24,27,35,.1); --workspace-panel:#fff; --workspace-danger:#b52c4d; }
#accountGate * { box-sizing:border-box; }
#accountGate input,#accountGate button { font:inherit; font-size:13px; }
#accountGate .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#accountGate button:focus-visible {outline:2px solid #4eafea;outline-offset:4px;}
#accountSetup {font-size:12px;line-height:1.6;color:var(--workspace-muted);margin:0 0 18px;}
.auth-shell {
  position: relative;
  isolation: isolate;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 78% 18%, rgba(94, 96, 237, 0.08), transparent 27%),
    radial-gradient(circle at 14% 82%, rgba(88, 190, 220, 0.05), transparent 29%),
    #0e1117;
}
@supports (height: 100dvh) {
  .auth-shell { height: 100dvh; min-height: 100dvh; }
}
.auth-shell {
  background-size: auto;
}
.auth-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18%;
  width: auto;
  height: auto;
  border-radius: 52% 48% 56% 44% / 46% 58% 42% 54%;
  background:
    radial-gradient(ellipse 46% 31% at 74% 16%, rgba(171, 99, 223, 0.68) 0%, rgba(171, 99, 223, 0.3) 36%, transparent 72%),
    radial-gradient(ellipse 49% 34% at 24% 80%, rgba(78, 175, 234, 0.58) 0%, rgba(78, 175, 234, 0.25) 37%, transparent 74%),
    radial-gradient(ellipse 44% 29% at 48% 52%, rgba(243, 129, 134, 0.14) 0%, rgba(243, 129, 134, 0.06) 38%, transparent 74%),
    linear-gradient(118deg, rgba(78, 175, 234, 0.12) 5%, transparent 28%, rgba(243, 129, 134, 0.08) 46%, transparent 62%, rgba(171, 99, 223, 0.14) 90%);
  filter: blur(38px) saturate(120%);
  opacity: 0.84;
  mix-blend-mode: screen;
  animation: authFlowDrift 46s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.auth-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10%;
  width: auto;
  height: auto;
  border-radius: 53% 47% 58% 42% / 43% 56% 44% 57%;
  background:
    radial-gradient(ellipse 34% 20% at 35% 48%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(104deg, transparent 31%, rgba(255, 255, 255, 0.11) 45%, rgba(255, 255, 255, 0.04) 53%, transparent 69%);
  filter: blur(20px);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: authFlowSheen 58s cubic-bezier(0.45, 0.05, 0.55, 0.95) -4s infinite alternate;
  will-change: transform;
  pointer-events: none;
}
body.account-light .auth-shell {
  background:
    radial-gradient(circle at 78% 18%, rgba(94, 96, 237, 0.08), transparent 27%),
    radial-gradient(circle at 14% 82%, rgba(78, 175, 234, 0.04), transparent 29%),
    #f4f6fa;
}
body.account-light .auth-shell::before {
  background:
    radial-gradient(ellipse 46% 31% at 74% 16%, rgba(94, 96, 237, 0.42) 0%, rgba(94, 96, 237, 0.2) 36%, transparent 72%),
    radial-gradient(ellipse 49% 34% at 24% 80%, rgba(78, 175, 234, 0.35) 0%, rgba(78, 175, 234, 0.15) 37%, transparent 74%),
    radial-gradient(ellipse 44% 29% at 48% 52%, rgba(243, 129, 134, 0.1) 0%, rgba(243, 129, 134, 0.05) 38%, transparent 74%),
    linear-gradient(118deg, rgba(78, 175, 234, 0.08) 5%, transparent 28%, rgba(243, 129, 134, 0.06) 46%, transparent 62%, rgba(94, 96, 237, 0.09) 90%);
  filter: blur(38px) saturate(110%);
  opacity: 0.72;
  mix-blend-mode: multiply;
}
body.account-light .auth-shell::after {
  opacity: 0.42;
  mix-blend-mode: normal;
}
@keyframes authFlowDrift {
  0% { transform: translate3d(-3%, -3%, 0) rotate(-2deg) scale(1.02); }
  50% { transform: translate3d(3%, 2%, 0) rotate(1deg) scale(1.05); }
  100% { transform: translate3d(-2%, 5%, 0) rotate(-1deg) scale(1.03); }
}
@keyframes authFlowSheen {
  0% { transform: translate3d(-5%, -1%, 0) rotate(-3deg) scale(0.98); }
  50% { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.04); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(3deg) scale(1.01); }
}
.auth-frame { position: relative; z-index: 2; width: min(100%, 428px); display: grid; gap: 20px; }
.auth-brand { display: flex; width: 100%; align-items: center; justify-content: center; gap: 11px; color: #f4f5f8; line-height: 1; text-shadow: 0 1px 18px rgba(255, 255, 255, 0.12); }
.auth-mark { width: 44px; height: 44px; object-fit: contain; transform: translateY(-0.92px); filter: none; background: transparent; }
.auth-mark-bg { fill: #7468ed; }
.auth-mark-line { fill: none; stroke: rgba(255, 255, 255, 0.88); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.auth-mark-node { fill: #fff; }
.auth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 36px 36px 30px;
  color: #f4f5f8;
  border: 1px solid rgba(188, 203, 255, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(71, 77, 119, 0.46), rgba(25, 28, 40, 0.48) 48%, rgba(15, 18, 27, 0.44)),
    rgba(25, 28, 40, 0.24);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 54px rgba(94, 96, 237, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(171, 99, 223, 0.12) inset;
}
.auth-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -44%;
  left: -20%;
  width: 106%;
  height: 96%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 42%, rgba(164, 188, 255, 0.34), transparent 60%),
    linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.15) 48%, transparent 70%);
  filter: blur(15px);
  opacity: 0.42;
  pointer-events: none;
}
.auth-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -24%;
  bottom: -50%;
  width: 84%;
  height: 78%;
  border-radius: 48% 52% 43% 57%;
  background:
    radial-gradient(circle at 28% 28%, rgba(171, 99, 223, 0.24), transparent 62%),
    linear-gradient(155deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  filter: blur(18px);
  opacity: 0.28;
  pointer-events: none;
}
.auth-card > * { position: relative; z-index: 1; }
body.account-light .auth-brand { color: #181b23; text-shadow: 0 1px 14px rgba(255, 255, 255, 0.92); }
body.account-light .auth-card {
  color: #181b23;
  border-color: rgba(94, 96, 237, 0.17);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(250, 250, 253, 0.48) 52%, rgba(242, 244, 250, 0.58)),
    rgba(255, 255, 255, 0.32);
  box-shadow:
    0 30px 90px rgba(35, 42, 56, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 54px rgba(94, 96, 237, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 -1px 0 rgba(94, 96, 237, 0.08) inset;
}
body.account-light .auth-card::before {
  background:
    radial-gradient(circle at 62% 42%, rgba(171, 99, 223, 0.22), transparent 60%),
    linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.84) 48%, transparent 70%);
  filter: blur(16px);
}
body.account-light .auth-card::after {
  background:
    radial-gradient(circle at 28% 28%, rgba(94, 96, 237, 0.15), transparent 62%),
    linear-gradient(155deg, transparent 30%, rgba(255, 255, 255, 0.62) 50%, transparent 70%);
}
.auth-heading { display: grid; gap: 11px; margin-bottom: 27px; }
.auth-heading::after { content: ""; width: 40px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--workspace-accent), color-mix(in srgb, var(--workspace-accent) 30%, transparent)); }
.auth-heading h1 { margin: 0; font-size: 27px; font-weight: 630; letter-spacing: -0.045em; }
.auth-form { display: grid; gap: 12px; }
.auth-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  color: var(--workspace-text);
  border: 1px solid var(--workspace-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--workspace-panel) 76%, transparent);
}
.auth-field input {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.065);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 5px 16px rgba(0, 0, 0, 0.06);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
body.account-light .auth-field input {
  border-color: rgba(24, 27, 35, 0.11);
  background: rgba(255, 255, 255, 0.52);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 5px 16px rgba(35, 42, 56, 0.045);
}
.auth-field input::placeholder { color: var(--workspace-muted); }
#accountPassword::-webkit-caps-lock-indicator { display: none; visibility: hidden; }
.auth-field input:focus { border-color: var(--workspace-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 14%, transparent), 0 5px 16px color-mix(in srgb, var(--workspace-accent) 10%, transparent); }
.auth-submit { height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; color: #fff; appearance: none; -webkit-appearance: none; border: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #4eafea 0%, #5e60ed 58%, #ab63df 100%); background-clip: padding-box; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease; }
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset; }
.auth-submit:disabled { cursor: wait; opacity: 0.55; }
.auth-switch { display: flex; justify-content: center; gap: 5px; margin: 24px 0 0; padding-top: 21px; color: var(--workspace-muted); border-top: 1px solid var(--workspace-border); font-size: 12px; }
.auth-switch button { padding: 0; color: var(--workspace-text); border: 0; background: transparent; cursor: pointer; font-weight: 650; }
.auth-switch button:hover { color: var(--workspace-accent); }
.form-error { margin: 0; color: var(--workspace-danger); font-size: 12px; line-height: 1.5; }
.auth-retry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 10px 12px; color: var(--workspace-muted); border: 1px solid color-mix(in srgb, var(--workspace-accent) 16%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--workspace-accent) 5%, transparent); font-size: 11px; }
.auth-retry button { padding: 0; color: var(--workspace-text); border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; }
.auth-retry button:hover:not(:disabled) { color: var(--workspace-accent); }
.auth-retry button:disabled { cursor: wait; opacity: 0.5; }

@media (max-width: 480px) {
  .auth-shell { padding: 20px 14px; }
  .auth-frame { gap: 16px; }
  .auth-card { padding: 28px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell,
  .auth-shell::before,
  .auth-shell::after,
  .auth-card::before,
  .auth-card::after { animation: none; }
}


.auth-mark { object-fit:contain; }
.settings-account-page { max-width:760px; margin:0 auto; }
.settings-account-page[hidden] { display:none; }
.settings-account-page h3 { font-size:13px; font-weight:550; margin:0; }
.account-profile-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.account-profile-row strong { font-size:14px; font-weight:550; }
.account-profile-row p { margin:4px 0 0; color:var(--secondary,#666); font-size:12px; overflow-wrap:anywhere; }
.settings-account-page .settings-note { color:var(--secondary,#666); font-size:12px; line-height:1.6; }
#accountUsersSection { margin-top:24px; padding-top:20px; border-top:1px solid var(--line,rgba(128,128,128,.18)); }
#accountUsersSection>header { display:flex; align-items:center; justify-content:space-between; }
#accountUsersStatus { color:var(--secondary,#666); font-size:12px; }
.account-user-row { padding:16px 0; border-bottom:1px solid var(--line,rgba(128,128,128,.16)); }
.account-user-row:last-child { border-bottom:0; }
.account-user-identity { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.account-user-identity strong { font-size:13px; font-weight:550; }
.account-user-identity small { color:var(--secondary,#666); font-size:12px; overflow-wrap:anywhere; }
.account-owner { color:var(--secondary,#666); font-size:11px; margin-left:auto; }
.account-user-controls { display:flex; align-items:flex-end; gap:14px; margin-top:12px; flex-wrap:wrap; }
.account-user-controls label { display:flex; flex-direction:column; gap:6px; color:var(--secondary,#666); font-size:11px; }
.account-user-controls select { min-height:32px; border:1px solid var(--line,rgba(128,128,128,.2)); border-radius:7px; background:var(--canvas,#fff); color:var(--text,#222); padding:4px 24px 4px 8px; font:inherit; font-size:12px; }
.account-user-controls .account-server-toggle { flex-direction:row; align-items:center; min-height:32px; gap:7px; color:var(--text,#222); font-size:12px; }
.account-user-controls input { appearance:auto; -webkit-appearance:checkbox; width:15px; height:15px; margin:0; flex:0 0 15px; accent-color:#5e60ed; }
.account-user-controls button { margin-left:auto; min-height:32px; }
.settings-account-page button:disabled,.settings-account-page select:disabled {opacity:.5;cursor:default;}
.account-user-result {margin:10px 0 0;font-size:12px;color:var(--secondary,#666);}
.account-user-result.is-error,#accountSettingsError {color:#bf3d59;line-height:1.6;}
.account-no-server #projectsGroup,.account-no-server [data-workspace-tool="files"],.account-no-server [data-workspace-tool="terminal"],.account-no-server [data-workspace-tool="execution"],.account-no-server .v21-terminal-tool {display:none!important;}
@media(max-width:540px){.account-user-controls{gap:12px}.account-user-controls button{margin-left:0}.account-profile-row{gap:10px}}

.account-no-server [data-settings-codex],.account-no-server [data-settings-page="codex"],.account-no-server #avatarQuotaCard>header,.account-no-server .v26-quota-content {display:none!important;}
html:not([data-account-owner="true"]) .memory-topics {display:none!important;}

/* A shared outlined handwritten wordmark keeps the brand identical on both platforms. */
.auth-brand > span { display: block; flex: 0 0 65.973px; width: 65.973px; height: 34px; font-size: 0; background: currentColor; -webkit-mask: url("/assets/auth-wordmark.svg") center / contain no-repeat; mask: url("/assets/auth-wordmark.svg") center / contain no-repeat; }

.auth-qr {text-align:center;color:var(--workspace-muted);font-size:13px}
.auth-qr-image {width:196px;height:196px;padding:12px;margin:0 auto 18px;background:white;border-radius:12px}
.auth-qr-image img {width:100%;height:100%;image-rendering:pixelated}
#accountQRCode {font-size:16px;letter-spacing:3px;color:var(--workspace-text)}

.auth-remembered {text-align:center;color:var(--workspace-muted);font-size:13px}
#accountGate .auth-remembered button {border:0;background:none;color:inherit;cursor:pointer}
#accountRememberedLogin {display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:12px}
#accountRememberedAvatar {display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--workspace-border);color:var(--workspace-text);font-size:28px;overflow:hidden}
#accountRememberedAvatar img {width:100%;height:100%;object-fit:cover}
#accountRememberedName {color:var(--workspace-text);font-size:18px}
#accountRememberedCode {letter-spacing:3px;font-size:16px;color:var(--workspace-text)}


#accountGate .auth-switch {display:flex;align-items:center;justify-content:center;gap:24px}

#accountGate button.auth-qr-image {display:block;border:0;background:#fff;padding:12px;cursor:pointer}
#accountGate button.auth-qr-image:disabled {cursor:wait}

/* Login methods share a compact card; registration sizes independently. */
.auth-card {
  height: min(380px, calc(100vh - 128px));
  height: min(380px, calc(100dvh - 128px));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 12px;
  padding: 24px 28px 20px;
}
.auth-heading { margin-bottom: 0; }
.auth-stage {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: safe center;
  overflow-y: auto;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
}
#accountGate .auth-switch { margin-top: 0; }
@media (max-width: 480px) {
  .auth-card { height: min(380px, calc(100vh - 100px)); height: min(380px, calc(100dvh - 100px)); padding-left: 20px; padding-right: 20px; }
}
@media (max-height: 420px) {
  .auth-shell { padding: 12px 14px; }
  .auth-frame { gap: 12px; }
  .auth-card { height: calc(100vh - 80px); height: calc(100dvh - 80px); padding: 16px 20px; row-gap: 12px; }
}

.auth-qr-image { width: 160px; height: 160px; margin-bottom: 10px; }
.auth-qr p { margin: 6px 0; }
#accountGate[data-auth-mode="register"] .auth-card {
  height: auto;
  max-height: calc(100vh - 128px);
  max-height: calc(100dvh - 128px);
}
@media (max-width: 480px) {
  #accountGate[data-auth-mode="register"] .auth-card { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
}
@media (max-height: 420px) {
  #accountGate[data-auth-mode="register"] .auth-card { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
}

#accountGate .auth-switch { padding-top: 14px; }
#accountRememberedLogin { gap: 8px; padding: 8px; }
.auth-remembered p { margin: 6px 0; }

/* Keep every login field on the card centre line, including overlay-scrollbar WebKit. */
#accountGate .auth-stage { width: 100%; scrollbar-gutter: auto; scrollbar-width: none; }
#accountGate .auth-stage::-webkit-scrollbar { display: none; width: 0; height: 0; }
#accountGate .auth-form { width: 100%; min-width: 0; margin: 0; }
#accountGate .auth-field { display: block; width: 100%; min-width: 0; }


#accountGate .auth-code-row { display: flex; align-items: center; gap: 10px; }
#accountGate .auth-code-row .auth-field { flex: 1; width: 0; min-width: 0; }
#accountGate #accountSendCode { flex: 0 0 104px; height: 48px; border: 1px solid var(--workspace-border); border-radius: 10px; background: color-mix(in srgb, var(--workspace-text) 5%, transparent); color: var(--workspace-text); cursor: pointer; }
#accountGate #accountSendCode:disabled { opacity: .5; cursor: default; }
#accountGate #accountCodeStatus { margin: 6px 0 0; color: var(--workspace-muted); font-size: 11px; line-height: 1.5; }
#accountGate #accountCodeStatus:empty { display: none; }

#accountGate[data-auth-mode="register"] .auth-switch { justify-content: center; }