/* v359 (part 2): the NEW LOOK for the Settings page only (from my screenshots of Supabase and GitHub settings): thin borders, small uppercase mono labels, icon boxes, stat tiles, rows with a bold name and a grey line, one accent, no glass and no glow. Every colour comes from the theme variables (--bg, --card, --line, --tx, --mut, --acc), so dark, light and every Look work. Names: stg-* only (grep checked against all css files). Loaded last. */
.stg{--stg-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--stg-ok:#3ecf8e;padding:0 14px 24px}
.stg-ttl{margin:6px 0 16px;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--tx)}
.stg-pt{margin:4px 0 14px;font-size:26px}

/* icon box (the rounded square with a thin outline) */
.stg-ib{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--tx)}
.stg-ib .stg-i{width:24px;height:24px;display:block}
.stg-ib.stg-sm{width:42px;height:42px;border-radius:12px}
.stg-ib.stg-sm .stg-i{width:21px;height:21px}
.stg-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}

/* four stat tiles */
.stg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;margin:0 0 8px}
.stg-tile{display:flex;align-items:center;gap:11px;min-width:0}
.stg-lb{font-family:var(--stg-mono);font-size:10.5px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);overflow-wrap:anywhere}
.stg-vl{margin-top:3px;font-size:15px;line-height:1.25;font-weight:500;color:var(--tx);overflow-wrap:anywhere}
.stg-ok .stg-ib{color:var(--stg-ok)}
.stg-bad .stg-ib{color:var(--sell)}
@media(max-width:359px){.stg-tile .stg-ib{width:46px;height:46px;border-radius:12px}.stg-tiles{gap:14px 8px}.stg-tile{gap:9px}.stg-lb{font-size:10px;letter-spacing:.07em}}

/* menu: group headings and rows */
.stg-h{margin:24px 2px 8px;font-family:var(--stg-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.stg-list{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.stg-row{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 14px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--tx);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none}
.stg-row:first-child{border-top:0}
.stg-row:active{background:color-mix(in srgb,var(--tx) 7%,transparent)}
.stg-row:focus-visible,.stg-back:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.stg-nm{font-size:15.5px;font-weight:700;line-height:1.25;color:var(--tx)}
.stg-ln{margin-top:2px;font-size:13px;line-height:1.3;color:var(--mut)}
.stg-ar{flex:0 0 auto;display:flex;color:var(--mut)}
.stg-ar .stg-i{width:20px;height:20px}

/* group page */
.stg-back{display:inline-flex;align-items:center;gap:2px;margin:0 0 4px -6px;padding:8px 10px 8px 4px;border:0;border-radius:10px;background:transparent;color:var(--mut);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
.stg-back .stg-i{width:20px;height:20px}
.stg-back:active{color:var(--tx)}

/* show only the open group; the cards always stay in the page */
.stg-w{display:contents}

/* the cards inside a group: plain, thin border, small uppercase label, no glow, no glass */
.stg .setgrid{gap:12px}
.stg .setgrid .card,html[data-theme="premium"] .stg .setgrid .card{background:var(--card)!important;background-image:none!important;border:1px solid var(--line)!important;border-radius:14px;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--tx);padding:16px 14px}
.stg .setgrid .card>h3{margin:0 0 12px;font-family:var(--stg-mono);font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--mut)}
.stg .setgrid .card>h3::before{display:none!important}
.stg .setgrid .card h4{font-family:var(--stg-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.stg .setgrid .card .help,.stg .setgrid .card small{color:var(--mut)}
.stg .setgrid .card .kv>div{border-bottom:1px solid var(--line)}
.stg .setgrid .card .kv>div:last-child{border-bottom:0}
.stg .setgrid .card .kv dt{font-family:var(--stg-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.stg .setgrid .card details.acc{background:transparent;border:1px solid var(--line);border-radius:12px}
.stg .setgrid .card details.acc summary{color:var(--tx);font-weight:700}
@media(min-width:860px){.stg-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.stg{max-width:760px}}

/* v361: the box is a copy of the Claude app Log out box from my screenshot of 2026-10-26: every size is measured from the screenshot (1220 px wide) and uses the unit --u = 1/1220 of the screen width, so it keeps the same proportions on any screen; small screens use at least .42 px per unit. v360 (part 3): the red Log out row and the Log out box (names lxq-* exist in no other file) */
.lxq-lo{margin-top:0}
.lxq-row .stg-nm,.lxq-row .stg-ib{color:var(--sell)}
.lxq-ov{--u:max(.082vw,.42px);position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(0,0,0,.5)}
.lxq-bx{width:min(calc(814*var(--u)),100%);box-sizing:border-box;padding:calc(50*var(--u)) calc(49*var(--u)) calc(49*var(--u));border:1px solid rgba(255,255,255,.1);border-radius:calc(24*var(--u));background:#20201e;color:#fffffd;box-shadow:none}
.lxq-t{margin:0 0 calc(9.6*var(--u));font-size:calc(34*var(--u));font-weight:500;line-height:1.2;color:#fffffd}
.lxq-d{margin:0 0 calc(31.5*var(--u));font-size:calc(26.5*var(--u));line-height:1.4;color:#d7d8d3;opacity:1}
.lxq-bt{display:flex;gap:calc(17*var(--u))}
.lxq-b{flex:0 0 calc((100% - 17*var(--u))/2);min-width:0;box-sizing:border-box;height:max(calc(66*var(--u)),32px);min-height:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px;font:inherit;font-size:calc(29*var(--u));font-weight:600;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none}
.lxq-c{background:transparent;color:#fffffd;border:max(calc(2.4*var(--u)),1px) solid #3c3c3a}
.lxq-o{background:#d03c3c;color:#fff;border:0}
html[data-mode="light"] .lxq-bx{background:#fff;border-color:rgba(0,0,0,.1);color:#1f1e1d}
html[data-mode="light"] .lxq-t{color:#1f1e1d}
html[data-mode="light"] .lxq-d{color:#5c5b57}
html[data-mode="light"] .lxq-c{color:#1f1e1d;border-color:rgba(0,0,0,.2)}
.lxq-b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lxq-b:active{filter:brightness(.92)}

/* v365: SETTINGS AS COLOURFUL GRIDS, nothing folded. The five groups sit one under the other; each is a title row and a 2 column grid of coloured tiles (same look as the All apps drawer tiles: thin coloured border, soft tint, icon). A tile that needs a chooser opens the old card in a bottom sheet (.stg-pg); every old card stays in the page. */
.stg-tile{padding:10px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--card))}
.stg-tile .stg-ib{border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.stg-tiles{gap:10px}
.stg-g{margin:22px 0 0}
.stg-gh{display:flex;align-items:center;gap:12px;margin:0 2px 10px}
.stg-g .stg-ib{border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.stg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stg-gt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;min-height:96px;margin:0;padding:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--card));color:var(--tx);font:inherit;text-align:left;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
.stg-gt:active{background:color-mix(in srgb,var(--c) 20%,var(--card))}
.stg-gt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.stg-gi{display:flex;color:var(--c)}
.stg-gi .stg-i{width:20px;height:20px}
.stg-gl{font-family:var(--stg-mono);font-size:10.5px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);overflow-wrap:anywhere}
.stg-gv{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--tx);overflow-wrap:anywhere;word-break:break-word}
.stg-ga{margin-top:auto;padding:2px 9px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;color:var(--c)}
.stg-gt.stg-red{--c:#e5484d}
.stg-gt.stg-red .stg-gl{color:var(--c)}
.stg-gt.stg-red .stg-gv:empty{display:none}
.stg-gt.stg-red{min-height:84px}
@media(max-width:359px){.stg-gt{padding:10px}.stg-gv{font-size:13.5px}}
/* sheet */
.stg-sc{display:none}
.stg:not([data-open=""]) .stg-sc{display:block;position:fixed;inset:0;z-index:7;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.5);box-shadow:none}
.stg-pg{display:none}
.stg:not([data-open=""]) .stg-pg{display:block;position:fixed;left:0;right:0;bottom:0;z-index:8;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:10px 14px calc(92px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;background:var(--bg)}
.stg-w{display:none}
.stg:not([data-open=""]) .stg-w{display:contents}
.stg[data-open="acct"] .stg-w:not([data-stg="acct"]),.stg[data-open="notif"] .stg-w:not([data-stg="notif"]),.stg[data-open="look"] .stg-w:not([data-stg="look"]),.stg[data-open="content"] .stg-w:not([data-stg="content"]),.stg[data-open="about"] .stg-w:not([data-stg="about"]){display:none}
.stg[data-sub="look"] .stg-w>:not(#look),.stg[data-sub="shelf"] .stg-w>:not(#shelflook),.stg[data-sub="feel"] .stg-w>:not(#feel),.stg[data-sub="season"] .stg-w>:not(#ssncard),.stg[data-sub="off"] .stg-w>:not([data-gate="offline_book3"]),.stg[data-sub="listen"] .stg-w>:not([data-gate="listening"]),.stg[data-sub="about"] .stg-w>:not(:nth-child(1)),.stg[data-sub="risk"] .stg-w>:not(:nth-child(2)){display:none}

/* v366: the old big cards and the Subscription details popup now match the grids: coloured tiles, small grey info under each. Account sheet and every other Settings sheet use the colour of their group (--c). The popup is a bottom sheet (found by its Close button #sdc). Nothing in the app code changed. */
.stg[data-open="acct"]{--c:#f5a623}.stg[data-open="notif"]{--c:#3ecf8e}.stg[data-open="look"]{--c:#a78bfa}.stg[data-open="content"]{--c:#4da3ff}.stg[data-open="about"]{--c:#9aa3b2}
.stg .setgrid .card,html[data-theme="premium"] .stg .setgrid .card{border-color:color-mix(in srgb,var(--c,#9aa3b2) 45%,transparent)!important;background:color-mix(in srgb,var(--c,#9aa3b2) 9%,var(--card))!important}
.stg .setgrid .card>h3{color:var(--c,var(--mut))}
.stg .setgrid .card .kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.stg .setgrid .card .kv>div{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:12px;border:1px solid color-mix(in srgb,var(--c,#9aa3b2) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c,#9aa3b2) 11%,var(--card))}
.stg .setgrid .card .kv>div:last-child{grid-column:1/-1;border-bottom:1px solid color-mix(in srgb,var(--c,#9aa3b2) 45%,transparent)}
.stg .setgrid .card .kv dt{order:0;margin:0}
.stg .setgrid .card .kv dd{order:1;margin:0;font-size:14.5px;font-weight:600;line-height:1.25;color:var(--tx);text-align:left;overflow-wrap:anywhere}
.stg .setgrid .card .acts .btn{width:auto;padding:6px 14px;border:1px solid color-mix(in srgb,var(--c,#9aa3b2) 55%,transparent);border-radius:999px;background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--c,var(--tx));font-size:13px;font-weight:600}
.stg .setgrid .card .sw small{font-size:12px;color:var(--mut)}
.ov:has(#sdc){align-items:flex-end;padding:0}
.dlg:has(#sdc){--c:#f5a623;box-sizing:border-box;width:100%;max-width:760px;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;margin:0 auto;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;border-bottom:0}
.dlg:has(#sdc)>h3{margin:0 0 12px!important;font-size:22px;font-weight:800;color:var(--tx)}
.dlg:has(#sdc) .subsec{margin:0 0 10px;padding:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--card))}
.dlg:has(#sdc) .subsec>h4{margin:0 0 8px;font-family:var(--stg-mono,ui-monospace,Menlo,Consolas,monospace);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.dlg:has(#sdc) .subsec b{font-size:14.5px;font-weight:600}
.dlg:has(#sdc) .subsec .help{margin:3px 0 0;font-size:12px;line-height:1.35;color:var(--mut)}
.dlg:has(#sdc) .subitem{padding:8px 0;border-top:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.dlg:has(#sdc) .subitem:first-of-type{border-top:0;padding-top:0}
.dlg:has(#sdc) .pst{padding:1px 9px;font-size:11.5px;line-height:1.5}
.dlg:has(#sdc)>p.help{font-size:12px;color:var(--mut)}
.stg .setgrid .card .kv>div{justify-content:flex-start}
.stg .setgrid .card .kv>div dd{margin:0!important;padding:0}
.stg .setgrid .card .kv>div:nth-child(2){grid-column:1/-1}
.stg .setgrid .card .acct-h{margin:0 0 12px}

/* v367: the Get Premium popup (found by its Close button #pic) and the Change username dialog (found by its Cancel button #nmc) now match the grids: a bottom sheet the same width as the grids, coloured tiles, small grey info under them. CSS only, no change in app code. */
.ov:has(#pic),.ov:has(#nmc){align-items:flex-end;padding:0}
.dlg:has(#pic),.dlg:has(#nmc){--c:#f5a623;box-sizing:border-box;width:100%;max-width:760px;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;margin:0 auto;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;border-bottom:0}
.dlg:has(#pic)>h3,.dlg:has(#nmc)>h3{margin:0 0 12px!important;font-size:22px;font-weight:800;color:var(--tx)}
.dlg:has(#pic)>p{margin:0 0 10px!important;padding:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--card));font-size:14.5px;font-weight:600;line-height:1.35;color:var(--tx)}
.dlg:has(#pic) .vpay{margin:0 0 10px;padding:12px}
.dlg:has(#pic) .vpay .help{font-size:12px;color:var(--mut)}
.dlg:has(#nmc)>label{display:block;margin:0 0 6px;font-family:var(--stg-mono,ui-monospace,Menlo,Consolas,monospace);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.dlg:has(#nmc)>input{box-sizing:border-box;width:100%;margin:0;padding:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--card));font-size:14.5px;font-weight:600;color:var(--tx)}
.dlg:has(#nmc)>p.help{margin:6px 0 10px;font-size:12px;line-height:1.35;color:var(--mut)}
.dlg:has(#pic) .acts,.dlg:has(#nmc) .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:6px 0 0}
.dlg:has(#pic) .acts .btn,.dlg:has(#nmc) .acts .btn{width:auto;padding:6px 14px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:999px;background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--c);font-size:13px;font-weight:600}
.dlg:has(#nmc) .acts #nmok{background:color-mix(in srgb,var(--c) 22%,transparent)!important}