.auth-view {
  --auth-surface:#14263d;
  --auth-border:#51647a;
  --auth-heading:#f3ead8;
  --auth-secondary:#c7d3e1;
  --auth-control-border:#a7aca9;
  --auth-control-text:#253447;
  --auth-outline:#e8d09b;
  --auth-primary:#dfc88c;
  --auth-on-primary:#172439;
  width:calc(100% - 48px); max-width:536px; min-height:0;
  margin:140px auto 64px; padding:40px;
  border:1px solid var(--auth-border); border-radius:12px;
  background:var(--auth-surface); color:var(--auth-heading);
}
:root[data-theme="light"] .auth-view {
  --auth-surface:#fffefb;
  --auth-border:#d8d5cd;
  --auth-heading:#253447;
  --auth-secondary:#5d6673;
  --auth-outline:#253447;
  --auth-primary:#80642c;
  --auth-on-primary:#fff;
}
:root[data-theme="light"] body[data-view="login"] { background:#f5f3ee; }
:root[data-theme="light"] body[data-view="login"] .cosmos,
:root[data-theme="light"] body[data-view="login"] .cosmos-image { background:#f5f3ee; }
:root[data-theme="light"] body[data-view="login"] .cosmos-image::before,
:root[data-theme="light"] body[data-view="login"] .cosmos-vignette { display:none; }
body[data-view="login"] #star-canvas { display:none; }
.auth-view h1 { margin:0 0 16px; color:var(--auth-heading); font:500 32px/1.4 var(--serif); }
.auth-view p { margin:12px 0; color:var(--auth-secondary); font:14px/1.85 var(--sans); }
.auth-view form { display:grid; gap:24px; margin-top:32px; }
.auth-view label { display:grid; gap:8px; color:var(--auth-heading); font:500 14px/1.5 var(--sans); }
.auth-view input { width:100%; min-width:0; min-height:48px; padding:11px 12px; border:1px solid var(--auth-control-border); border-radius:8px; background:#fff; color:var(--auth-control-text); font:16px/1.5 var(--sans); }
.auth-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
.auth-view button { min-height:48px; }
.auth-view .outline-button { height:48px; padding:10px 14px; border:1px solid var(--auth-control-border); border-radius:8px; background:transparent; color:var(--auth-outline); font:500 14px/1.5 var(--sans); white-space:nowrap; }
#login-view .gold-button { width:100%; min-height:48px; padding:12px 24px; border-radius:8px; background:var(--auth-primary); color:var(--auth-on-primary); font:600 16px/1.5 var(--sans); box-shadow:none; }
.auth-view input:focus-visible,.auth-view button:focus-visible { outline:2px solid #a2864d; outline-offset:3px; }
#auth-status { min-height:0; margin:16px 0 0; overflow-wrap:anywhere; }
#account-email { overflow-wrap:anywhere; }
.auth-view .consent-option { display:flex; align-items:flex-start; gap:10px; font-weight:400; }
.auth-view .consent-option input { flex:0 0 20px; width:20px; min-height:20px; height:20px; margin:4px 0 0; accent-color:var(--auth-primary); }
.auth-view .consent-option span { line-height:1.85; }
#consent-view [data-info] { display:inline; min-height:0; padding:2px 3px; border:0; background:none; color:var(--auth-outline); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
body[data-signed-in="false"] #bottom-nav { display:none; }
@media(max-width:680px) {
  .auth-view { width:calc(100% - 32px); margin:90px auto 40px; padding:28px 20px; }
  .auth-view h1 { font-size:26px; }
  .auth-view form { margin-top:28px; }
  .auth-code-row { gap:8px; }
  .auth-view .outline-button { padding-inline:10px; font-size:13px; }
}
@media(max-width:300px) { .auth-code-row { grid-template-columns:1fr; } }

#mine-view .mine-account-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
#mine-view .mine-account-actions .mine-logout { width:100%; margin-top:0; }
#close-account-dialog {
  --close-field-surface:#0e1c30;
  --close-field-border:#63758d;
  --close-field-text:#eef2f9;
  width:calc(100% - 32px); max-width:560px; max-height:calc(100dvh - 40px);
  padding:28px; overflow:auto; scrollbar-color:var(--theme-text-secondary, #c4cfe1) transparent;
}
:root[data-theme="light"] #close-account-dialog { --close-field-surface:#f8f9fb; --close-field-border:#75869a; --close-field-text:#1c314a; }
#close-account-form { margin:0; font-family:var(--sans); }
#close-account-heading { margin:0; font:600 22px/1.4 var(--sans); }
#close-account-dialog p { margin:0; font:400 14px/1.8 var(--sans); overflow-wrap:anywhere; }
#close-account-form .close-account-notice { margin-top:12px; }
#close-account-form .close-account-notice strong { color:var(--theme-text-primary, #eef2f9); font-weight:600; }
#close-account-form .close-account-note { margin-top:8px; font-size:13px; line-height:1.75; }
#close-account-form .close-account-verification { margin-top:24px; padding-top:20px; border-top:1px solid var(--theme-border-subtle, var(--line)); }
#close-account-form .close-account-email { display:grid; gap:4px; font-size:13px; line-height:1.5; }
#close-account-form .close-account-email strong { min-width:0; color:var(--theme-text-primary, #eef2f9); font:500 15px/1.6 var(--sans); overflow-wrap:anywhere; }
#close-account-form .close-account-field { display:grid; gap:8px; margin-top:20px; }
#close-account-form label { color:var(--theme-text-primary, #eef2f9); font:500 14px/1.5 var(--sans); }
#close-account-form .close-account-code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
#close-account-form input { display:block; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--close-field-border); border-radius:8px; background:var(--close-field-surface); color:var(--close-field-text); caret-color:var(--close-field-text); font:16px/1.5 var(--sans); }
#close-account-form input::placeholder { color:var(--theme-text-secondary, #c4cfe1); opacity:1; }
#close-account-form button { min-width:0; min-height:44px; padding:10px 14px; font:500 14px/1.5 var(--sans); }
#close-account-form #send-close-code { white-space:nowrap; }
#close-account-form .close-account-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; padding-top:16px; border-top:1px solid var(--theme-border-subtle, var(--line)); }
#close-account-form #close-account-status { margin-top:12px; font-size:13px; }
#close-account-status:empty { display:none; }
#close-account-form #confirm-close-account { background:#863e3e; color:#fff; }
#close-account-form :focus-visible { outline:2px solid #a2864d; outline-offset:3px; }
#close-account-form button:disabled { opacity:.6; cursor:wait; }
@media(max-width:680px) {
  #close-account-dialog { max-height:calc(100dvh - 32px); padding:24px 20px; }
}
@media(max-width:360px) {
  #close-account-form .close-account-code-row { grid-template-columns:1fr; gap:8px; }
}