:root{color-scheme:light;--bg:#eef3f9;--surface:#fff;--surface-2:#f7f9fc;--text:#11233f;--muted:#6d7c91;--border:#dbe3ed;--primary:#2563eb;--primary-hover:#1d4ed8;--shadow:0 20px 55px rgba(19,39,72,.12);font-family:system-ui,sans-serif}
html[data-theme="dark"]{color-scheme:dark;--bg:#050914;--surface:#101b2d;--surface-2:#0b1525;--text:#e9eff8;--muted:#9caac0;--border:#2a3a52;--primary:#3b82f6;--primary-hover:#60a5fa;--shadow:0 20px 55px rgba(0,0,0,.4)}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:linear-gradient(145deg,var(--bg),var(--surface-2));color:var(--text)}button,input{font:inherit}.hidden{display:none!important}
.settings-page-shell{width:min(980px,calc(100% - 32px));margin:0 auto;padding:28px 0 60px}.settings-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:24px}.back-home{justify-self:start;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:13px;padding:11px 15px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.05)}.back-home:hover{transform:translateY(-1px)}.page-heading{text-align:center}.page-heading p{margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.page-heading h1{margin:0;font-size:30px}.account-pill{justify-self:end;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:9px 13px;color:var(--muted);font-size:13px;font-weight:700}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}.wide-card{grid-column:1/-1}.card-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px}.card-heading h2{margin:0 0 5px;font-size:20px}.card-heading p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}.card-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:#eaf2ff;color:#1d4ed8;font-weight:800}html[data-theme="dark"] .card-icon{background:#172947;color:#93c5fd}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border)}.setting-row span{display:flex;flex-direction:column;gap:4px}.setting-row small{color:var(--muted)}.setting-row input{appearance:none;width:52px;height:30px;border-radius:999px;background:#b7c2d0;position:relative;cursor:pointer;transition:.2s}.setting-row input:after{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:.2s}.setting-row input:checked{background:var(--primary)}.setting-row input:checked:after{transform:translateX(22px)}
.settings-form{display:grid;gap:10px}.settings-form label{font-size:13px;font-weight:800;color:var(--muted)}.settings-form input{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:13px;padding:13px 14px;outline:none}.settings-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.settings-form button,.secondary-action,.state-card button{border:0;border-radius:13px;background:var(--primary);color:#fff;padding:13px 18px;font-weight:800;cursor:pointer}.settings-form button:hover,.secondary-action:hover,.state-card button:hover{background:var(--primary-hover)}.settings-form button:disabled,.secondary-action:disabled{opacity:.65;cursor:wait}.password-form{grid-template-columns:1fr 1fr}.password-form label,.password-form input:first-of-type{grid-column:1/-1}.password-form button{grid-column:1/-1;margin-top:4px}.secondary-action{width:100%}
.state-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:34px;text-align:center;box-shadow:var(--shadow)}.state-card h2{margin-top:0}.state-card p{color:var(--muted)}.toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:50;background:#111827;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;box-shadow:0 14px 35px rgba(0,0,0,.25);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#b91c1c}
@media(max-width:720px){.settings-page-shell{width:min(100% - 20px,980px);padding-top:14px}.settings-topbar{grid-template-columns:auto 1fr;align-items:center}.page-heading{text-align:left}.page-heading h1{font-size:25px}.account-pill{grid-column:1/-1;justify-self:stretch;max-width:none;text-align:center}.settings-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}.password-form{grid-template-columns:1fr}.password-form label,.password-form input:first-of-type,.password-form button{grid-column:auto}.settings-card{padding:18px}.back-home{padding:10px 12px}}


.profile-photo-editor{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.profile-photo-preview{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#dbeafe;color:#1e40af;font-size:36px;font-weight:800;border:3px solid rgba(124,58,237,.22);box-shadow:0 10px 28px rgba(15,23,42,.14)}.profile-photo-preview img{width:100%;height:100%;object-fit:cover}.profile-photo-actions{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;flex:1}.profile-photo-actions small{flex-basis:100%;color:var(--muted,#64748b)}html[data-theme="dark"] .profile-photo-preview{background:#182641;color:#bfdbfe;border-color:#375071}@media(max-width:560px){.profile-photo-editor{justify-content:center;text-align:center}.profile-photo-actions{justify-content:center}}

/* Theme picker */
.theme-sync-note{display:block;margin-top:10px;font-size:12px;opacity:.7}
.setting-row-locked{opacity:.55}
.setting-row-locked input{cursor:not-allowed}

/* Story popup (story.css) names the dashboard's variables; alias them here so
   the popup matches this page even when the Default palette is selected. */
:root{--panel:var(--surface);--line:var(--border)}

/* Stories & Surprise, moved off the dashboard sidebar into Settings. */
.settings-links-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.settings-link-btn{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 15px;border:1px solid var(--border);border-radius:15px;
  background:var(--surface-2);color:inherit;text-decoration:none;
  font:inherit;text-align:left;cursor:pointer;transition:transform .14s ease,border-color .14s ease;
}
.settings-link-btn:hover{transform:translateY(-1px)}
.settings-link-btn>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.settings-link-btn strong{font-size:15px}
.settings-link-btn small{color:var(--muted);font-size:12px;line-height:1.4}
.settings-link-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);font-size:17px;
}
.surprise-count-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:#b45c5c;color:#fff;font-size:11px;font-weight:800;
  display:inline-grid;place-items:center;line-height:1;
}
/* Stays lit until the person actually opens what was left for them. Kept as a
   slow, low-contrast pulse rather than a flash, to match the soft palette. */
.settings-link-btn.has-surprise{
  border-color:var(--theme-btn-line,var(--primary));
  animation:surprise-pulse 1.8s ease-in-out infinite;
}
@keyframes surprise-pulse{
  0%,100%{background:var(--surface-2)}
  50%{background:var(--theme-accent-soft,rgba(148,163,184,.16))}
}
@media (prefers-reduced-motion: reduce){
  .settings-link-btn.has-surprise{animation:none;background:var(--theme-accent-soft,rgba(148,163,184,.16))}
}

/* The "Use this colour" and other quiet buttons should not stretch. */
.accent-apply{width:auto!important}
.accent-custom-row label{font-size:13px;color:var(--muted)}
@media(max-width:560px){.settings-links-row{grid-template-columns:1fr}}

/* A live sample of the chosen colour, drawn from the very tokens the buttons
   across the app use, so what is shown here is what is actually applied. */
.accent-sample{
  display:inline-flex;align-items:center;padding:11px 16px;border-radius:13px;
  font-weight:800;font-size:14px;
  background:var(--theme-btn-bg,var(--primary));
  color:var(--theme-btn-ink,#fff);
  border:1px solid var(--theme-btn-line,transparent);
}
.accent-sample.quiet{background:transparent;color:var(--muted);border:1px solid var(--border)}


/* Settings → Chat theme & wallpaper: a link styled like the other buttons (owner, 2026-10-04). */
a.secondary-action{display:block;box-sizing:border-box;text-align:center;text-decoration:none}

/* Account & layout (Login sessions, Groups, iPhone layout): soft colour tiles like the sidebar's */
.settings-link-icon.tinted{color:var(--tint);background:color-mix(in srgb,var(--tint) 16%,transparent);border-color:color-mix(in srgb,var(--tint) 32%,transparent)}
.settings-link-btn:hover .settings-link-icon.tinted{background:color-mix(in srgb,var(--tint) 24%,transparent)}

/* Login sessions popup (moved here from the dashboard, which keeps a copy for its Forward dialog) */
.login-sessions-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(2,8,20,.68);backdrop-filter:blur(5px)}
.login-sessions-overlay.hidden{display:none}
.login-sessions-card{width:min(430px,100%);max-height:min(650px,88vh);overflow:auto;border:1px solid var(--line,#2b3d5d);border-radius:20px;background:var(--panel,#0d1728);color:var(--text,#eef4ff);box-shadow:0 24px 70px rgba(0,0,0,.45);padding:18px}
.login-sessions-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.login-sessions-header h2{margin:2px 0 0}.login-sessions-header button{width:36px;height:36px;border:0;border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:inherit;font-size:24px;cursor:pointer}
.login-sessions-help{margin:10px 0 14px;color:var(--muted,#9aabc6);font-size:13px}.login-sessions-list{display:grid;gap:9px}.login-session-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line,#283955);border-radius:14px;background:rgba(255,255,255,.035)}
.login-session-number{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:rgba(96,165,250,.16);font-weight:800}.login-session-row strong,.login-session-row small{display:block}.login-session-row small{margin-top:3px;color:var(--muted,#9aabc6)}.login-sessions-empty{margin:8px 0;padding:14px;text-align:center;color:var(--muted,#9aabc6)}.login-sessions-empty.error{color:#ff9e9e}
.login-session-details{min-width:0}.login-session-location{color:var(--text,#eef4ff)!important}.login-session-network{font-size:11px;opacity:.78;overflow-wrap:anywhere}
.login-search{display:flex;gap:8px;margin:0 0 12px}.login-search.hidden{display:none}
.login-search input{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid var(--line,#283955);border-radius:12px;background:rgba(255,255,255,.05);color:inherit;font:inherit}
.login-search button{height:42px;padding:0 14px;border:0;border-radius:12px;background:var(--accent,#3b82f6);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.login-session-row .login-session-details{flex:1}.login-session-user{color:var(--text,#eef4ff)!important;font-weight:700}
.login-session-del{flex:0 0 auto;min-width:44px;height:44px;border:0;border-radius:12px;background:rgba(239,68,68,.14);color:#f87171;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.login-session-del:disabled{opacity:.5}
/* Long IPv6 addresses have no break points: wrap them so a row never outgrows the popup and it never scrolls sideways (owner's iPhone recording, 2026-11-04). */
.login-sessions-card{overflow-x:hidden}.login-session-row small{overflow-wrap:anywhere}
.login-sessions-card .eyebrow{margin:0 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:700}