/* Settings sheets follow the main Figma frames; their body scrolls on shorter phones. */
:root {
  --settings-field-border: #c9d5e2;
  --settings-field-ink: #91a3ba;
  --settings-field-active-bg: #f5f5f5;
  --settings-field-active-shadow: none;
  --settings-secondary-ink: #60748d;
  --settings-stack: #e5e5e5;
  --settings-sheet-shadow: 0 -2px 10px rgb(47 66 87 / 24%);
  --settings-icons-border: #91a3ba;
  --settings-icon-selected-width: 2px;
  --icon-veil: #ffffff33;
  --settings-error-ink: #e84c4c;
}
:root[data-theme="dark"] {
  --settings-field-border: #404040;
  --settings-field-ink: #525252;
  --settings-field-active-bg: #171717;
  --settings-field-active-shadow: inset 0 0 8px #ffffff0a;
  --settings-secondary-ink: #b5b5b5;
  --settings-stack: #171717;
  --settings-sheet-shadow: 0 -2px 10px rgb(24 27 29 / 24%);
  --settings-icons-border: #404040;
  --settings-icon-selected-width: 1px;
  --icon-veil: #24242433;
}
.settings-dialog { position: fixed; inset: 0; margin: auto; width: 100%; max-width: 460px; height: 100%; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0; overflow: hidden; color: var(--ink); background: transparent; box-shadow: none; }
.settings-dialog::backdrop { background: #0000004d; backdrop-filter: blur(2px); }
.settings-dialog[data-motion="opening"]::backdrop { animation: settings-dim-in 360ms ease-out both; }
.settings-dialog[data-motion="closing"]::backdrop { animation: settings-dim-out 240ms ease-in both; }
@keyframes settings-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settings-dim-out { from { opacity: 1; } to { opacity: 0; } }
.settings-sheet { z-index: 2; }
.settings-outgoing { pointer-events: none; }
.settings-dialog[data-motion] .settings-sheet { will-change: transform; }
.settings-dialog[open] { display: block; }
.settings-sheet { position: absolute; inset: max(35px, env(safe-area-inset-top)) 0 0; background: var(--page-bg); border-radius: 36px 36px 0 0; display: flex; flex-direction: column; box-shadow: var(--settings-sheet-shadow); overflow: hidden; }
.settings-dialog[data-page]:not([data-page="main"]) .settings-sheet { top: calc(max(35px, env(safe-area-inset-top)) + 18px); }
.settings-stack { display: none; position: absolute; inset: max(35px, env(safe-area-inset-top)) 16px 0; border-radius: 36px 36px 0 0; background: var(--settings-stack); }
.settings-dialog[data-page]:not([data-page="main"]) .settings-stack { display: block; }
.settings-dialog[data-motion="forward"] .settings-stack { visibility: hidden; }
.settings-header { flex: 0 0 70px; position: relative; display: grid; grid-template-columns: 44px 1fr 44px; align-items: start; padding: 13px 5px 0; }
.settings-header h2 { align-self: start; text-align: center; padding-block: .25em; margin-block: -.25em; margin-top: 10px; font: 600 24px/28px Onest, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; outline: none; }
.settings-icon { width: 44px; height: 44px; background: transparent; padding: 11px; border-radius: 50%; }
.settings-icon img { width: 22px; height: 22px; }
.settings-icon.back img { transform: rotate(90deg); }
.settings-dialog[data-page="main"] .settings-icon.back { visibility: hidden; }
.settings-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: 0 16px max(34px, env(safe-area-inset-bottom)); scrollbar-width: none; }
.settings-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.settings-dialog[data-editing="true"] .settings-scroll { padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 94px); }
.settings-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 22px; box-shadow: inset 0 0 8px var(--inset-glow); padding: 16px; }
.settings-card h3, .settings-confirm h3 { margin: 0; font: 600 18px/28px Onest, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-card h3 { padding-block: .25em; margin-block: -.25em; }
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form .settings-card { display: flex; flex-direction: column; gap: 16px; }
.settings-form label { display: flex; flex-direction: column; gap: 12px; color: var(--ink); font: 500 14px/28px Onest, sans-serif; }
.settings-form label > span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-form h3 label { display: block; font: inherit; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.preview-mode .settings-footer { bottom: 34px; }
.preview-mode .settings-dialog[data-editing="true"] .settings-scroll { padding-bottom: 128px; }
.settings-input { position: relative; min-width: 0; }
.settings-field-control { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.settings-field-error { margin: 0; color: var(--settings-error-ink); font: 500 12px/normal Manrope, sans-serif; text-align: right; overflow-wrap: anywhere; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-field-error[hidden] { display: none; }
.settings-form input { height: 56px; min-width: 0; width: 100%; border: 1px solid var(--settings-field-border); border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 8px var(--inset-glow); padding: 16px 49px 16px 16px; font: 500 14px/24px Manrope, sans-serif; color: var(--settings-field-ink); caret-color: var(--ink); }
.settings-form input::placeholder { color: var(--settings-field-ink); opacity: 1; }
/* The field border itself marks focus, without the global offset outline. */
.settings-input:focus-within input { outline: none; border-color: #c861e0; background: var(--settings-field-active-bg); box-shadow: var(--settings-field-active-shadow); color: var(--ink); }
.settings-input input[aria-invalid="true"] { border-color: var(--settings-error-ink); background: var(--settings-field-active-bg); color: var(--ink); box-shadow: none; }
.settings-clear { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 11px; border-radius: 12px; background: transparent; visibility: hidden; }
.settings-clear img { width: 22px; height: 22px; }
.settings-input:focus-within .settings-clear { visibility: visible; }
.settings-input:has(input[aria-invalid="true"]) .settings-clear { visibility: visible; }
.settings-input input:placeholder-shown + .settings-clear { visibility: hidden; }
.settings-form input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }
.settings-fields, .settings-field { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.settings-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-disabled { color: var(--muted); }
.settings-disabled p { margin: 0; text-align: center; font: 500 14px/20px Onest, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-backup { padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.settings-backup p { font: 500 12px/16px Manrope, sans-serif; }
.settings-backup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.settings-primary, .settings-secondary { font: 600 14px/20px Manrope, sans-serif; border-radius: 40px; padding: 15px 14px; text-align: center; min-width: 0; }
.settings-primary { color: white; position: relative; isolation: isolate; background: radial-gradient(ellipse at 24% 8%, #ffffff88, transparent 76%), linear-gradient(172deg, #c861e0, #936cff); box-shadow: var(--accent-shadow); }
.settings-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: url('./media/grain.png'); background-size: 74px; opacity: .2; }
.settings-secondary { background: var(--plus-bg); }
.settings-backup-actions button { padding: 10px 5px; font-size: 12px; line-height: 17px; }
.settings-links { display: flex; flex-direction: column; gap: 8px; }
.settings-link { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; min-height: 70px; padding: 18px; }
.settings-link-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.settings-link-copy strong { font: 600 18px/28px Onest, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; padding-block: .2em; margin-block: -.2em; }
.settings-link-copy small { color: var(--muted); font: 500 12px/16px Manrope, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-link > img { width: 22px; height: 22px; flex: 0 0 22px; transform: rotate(-90deg); }
.settings-link:disabled { cursor: default; color: var(--muted); }
.settings-footer { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); display: flex; gap: 12px; padding: 8px; border-radius: 70px; background: var(--nav-bg); backdrop-filter: blur(12px); box-shadow: 0 5px 10px var(--panel-shadow); }
.settings-footer[hidden] { display: none; }
.settings-footer button { white-space: nowrap; }
.settings-footer button:disabled { opacity: .65; }
.settings-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.settings-theme { background: var(--page-bg); padding: 11px; height: 78px; text-align: left; border: 1px solid transparent; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; color: var(--settings-secondary-ink); }
.settings-theme img { width: 24px; height: 24px; }
.settings-theme span { font: 600 12px/17px Manrope, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-theme[aria-checked="true"] { border-color: #c861e0; color: var(--ink); }
.settings-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 1px solid var(--settings-icons-border); border-radius: 18px; padding: 12px; }
.settings-app-icon { min-width: 0; aspect-ratio: 1; border-radius: 8px; padding: 0; position: relative; background: var(--page-bg); isolation: isolate; }
.settings-app-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.settings-app-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--icon-veil); pointer-events: none; }
.settings-app-icon[aria-checked="true"] { box-shadow: 0 2px 2px #fff3, 0 6px 15px #664ac280; }
.settings-app-icon[aria-checked="true"]::after { background: transparent; border: var(--settings-icon-selected-width) solid #c861e0; }
.settings-switches { display: flex; flex-direction: column; gap: 24px; padding: 12px; border-radius: 8px; background: var(--page-bg); }
.settings-toggle { display: flex; gap: 8px; width: 100%; align-items: center; padding: 0; text-align: left; background: transparent; }
.settings-toggle-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.settings-toggle strong { font: 500 14px/20px Onest, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-toggle small { color: var(--settings-secondary-ink); font: 500 12px/17px Manrope, sans-serif; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.settings-toggle > img { width: 44px; height: 24px; flex: 0 0 44px; }
.settings-toggle::before { content: ''; position: absolute; width: 44px; height: 44px; right: 0; }
.settings-toggle { position: relative; }
.settings-help { font: 500 12px/17px Manrope, sans-serif; color: var(--settings-secondary-ink); }
.settings-motion { display: flex; flex-direction: column; gap: 8px; }
.settings-text-button { background: transparent; padding: 8px 0; text-align: left; color: var(--focus); font: 600 12px/18px Manrope, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.settings-error { font: 500 13px/19px Manrope, sans-serif; color: var(--ink); border-radius: 12px; padding: 12px; background: var(--raised); }
.settings-error:empty { display: none; }
.settings-accordion { padding: 0; overflow: hidden; }
.settings-accordion .settings-link { border: 0; background: transparent; box-shadow: none; }
.settings-accordion .settings-link > img { transform: none; }
.settings-accordion .settings-link > img { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.settings-accordion .settings-link[aria-expanded="true"] > img { transform: rotate(180deg); }
.settings-disclosure { overflow: hidden; }
.settings-disclosure[hidden] { display: none; }
.settings-legal { padding: 6px 18px 18px; font: 500 12px/18px Manrope, sans-serif; overflow-wrap: anywhere; }
.settings-legal p { margin: 0 0 8px; white-space: pre-wrap; }
/* Figma includes blank spacer paragraphs; reduce those too, without tightening readable text. */
.settings-legal .legal-spacer { line-height: 12px; }
.settings-legal .legal-heading { font-weight: 700; margin-top: calc(40px / 3); }
.settings-legal p:first-child { margin-top: 0; }
.settings-legal a { color: var(--focus); text-underline-offset: 3px; }
.settings-legal pre { white-space: pre-wrap; font: inherit; }
.settings-restore { display: flex; flex-direction: column; gap: 16px; }
.settings-restore p { font-size: 13px; line-height: 19px; }
.restore-mode { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--settings-field-border); border-radius: 16px; font: 500 13px/18px Manrope, sans-serif; cursor: pointer; }
.restore-mode input { width: 18px; height: 18px; margin: 1px 0; accent-color: #a768e9; flex: 0 0 18px; }
.restore-mode span { display: flex; flex-direction: column; gap: 5px; }
.restore-mode small { color: var(--settings-secondary-ink); font-size: 12px; }
.settings-confirm { position: absolute; inset: 0; z-index: 2; background: #0008; display: grid; place-items: center; padding: 24px; backdrop-filter: blur(2px); }
.settings-confirm[hidden] { display: none; }
.settings-confirm section { width: 100%; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: 0 10px 30px #0003; display: flex; flex-direction: column; gap: 16px; }
.settings-confirm p { font-size: 13px; line-height: 19px; }
body.settings-open { overflow: hidden; }
body.ready[data-mascot-animation="true"] .avatar img { animation: mascot-breathe 5s ease-in-out infinite; }
@keyframes mascot-breathe { 0%, 65%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 0 -2px; rotate: -2deg; } }
.mascot-hint { position: fixed; z-index: 12; top: max(130px, calc(env(safe-area-inset-top) + 110px)); right: max(20px, calc((100vw - 460px) / 2 + 20px)); width: 244px; padding: 14px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--surface-border); box-shadow: 0 5px 20px #0002; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 18px; }
.mascot-hint[hidden] { display: none; }
.mascot-hint p { flex: 1; }
.mascot-hint button { background: transparent; padding: 0; position: relative; }
.mascot-hint button::before { content: ''; position: absolute; inset: -11px; }
.mascot-hint img { width: 22px; height: 22px; }
.settings-dialog ::selection { color: white; background: #995bdd; }
@media (max-width: 359px) { .settings-theme { padding: 9px; } .settings-theme span { font-size: 11px; } .settings-footer { gap: 8px; } .settings-footer button { font-size: 12px; padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) {
  body.ready[data-mascot-animation="true"] .avatar img { animation: none; }
  .settings-dialog::backdrop { animation: none !important; }
  .settings-accordion .settings-link > img { transition: none; }
}