/* Settings screen. */
/* ---------- settings ---------- */
.group { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.item { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s4); border: 0; background: none; width: 100%; text-align: start; border-bottom: 1px solid var(--line); }
.group > :last-child { border-bottom: 0; }
.item svg.i { width: 24px; height: 24px; color: var(--ink); flex: none; }
.item .t { flex: 1; font-weight: 700; } .item .t small { display: block; font-weight: 500; color: var(--ink-2); font-size: 12.5px; }
.item .v { color: var(--ink-2); font-size: 14px; }
.item svg.chev { width: 18px; height: 18px; color: var(--ink-3); }
.seg { display: inline-flex; background: var(--lilac-50); border-radius: var(--r-pill); padding: 3px; }
.seg button { border: 0; background: none; border-radius: var(--r-pill); padding: 7px 14px; font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--purple); box-shadow: 0 1px 4px rgba(60,30,140,.15); }
.pref-select { border: 0; background: var(--lilac-50); border-radius: var(--r-pill); padding: 6px 10px; font-weight: 700; max-width: 46%; }
.soon { font-size: 11px; font-weight: 800; color: var(--ink-3); background: var(--bg); border-radius: var(--r-pill); padding: 3px 8px; }
.about-card { border-radius: var(--r-lg); background: linear-gradient(135deg, #EFE6FF, var(--lilac)); padding: var(--s5); display: flex; align-items: center; gap: var(--s3); }
.about-card svg.mascot { width: 110px; height: 92px; flex: none; }
.about-card .wordmark { font-size: 28px; }
.about-card p { margin: 10px 0 0; font-weight: 700; color: var(--ink-2); }
.fine { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.fine b { color: var(--ink); }