/* Tunes: today's Apple Music (iOS 26). Floating frosted-glass bars over full-bleed content,
   big artwork, capsule buttons, almost no rules. One modern move borrowed from Brad's
   reference: artist pages open on a flat pastel block in the artist's own color. */
:root {
  --bg: #000;
  --bg-elev: #161618;
  --ink: #fff;
  --ink-2: rgb(235 235 245 / 0.62);
  --ink-3: rgb(235 235 245 / 0.32);
  --hair: rgb(255 255 255 / 0.08);
  --accent: #ff375f;
  --fill: rgb(255 255 255 / 0.1);
  --fill-2: rgb(255 255 255 / 0.16);
  --press: rgb(255 255 255 / 0.06);
  --cap-ink: #000;
  --cap-bg: #fff;
  --glass-bg: rgb(36 36 40 / 0.62);
  --glass-line: rgb(255 255 255 / 0.12);
  --glass-hi: rgb(255 255 255 / 0.1);
  --glass-shadow: 0 12px 34px rgb(0 0 0 / 0.45);
  --glass-on: rgb(255 255 255 / 0.12);
  --lift: #1c1c1f;
  --tab-h: 62px;
  --tab-bottom: max(10px, calc(env(safe-area-inset-bottom) - 12px));
  --mini-h: 58px;
  --gap: 10px;
  --safe-t: env(safe-area-inset-top);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #fff;
  --bg-elev: #f2f2f7;
  --ink: #000;
  --ink-2: rgb(60 60 67 / 0.62);
  --ink-3: rgb(60 60 67 / 0.32);
  --hair: rgb(0 0 0 / 0.07);
  --fill: rgb(0 0 0 / 0.06);
  --fill-2: rgb(0 0 0 / 0.1);
  --press: rgb(0 0 0 / 0.04);
  --cap-ink: #fff;
  --cap-bg: #000;
  --glass-bg: rgb(250 250 252 / 0.7);
  --glass-line: rgb(0 0 0 / 0.06);
  --glass-hi: rgb(255 255 255 / 0.7);
  --glass-shadow: 0 12px 34px rgb(0 0 0 / 0.12);
  --glass-on: rgb(0 0 0 / 0.07);
  --lift: #fff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; background: var(--bg); }
/* iOS 26 home-screen apps (WebKit bug 301108): the viewport comes out shorter than the screen
   by the status bar's height while the page is shorter than the screen, so anything pinned to
   the bottom floats above the edge. A page at least screen-tall gets the full viewport; the
   min() cap stops it from growing past the screen. */
@media (display-mode: standalone) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
}
body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font: 17px/1.3 var(--font); letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-touch-callout: none; }
img { display: block; -webkit-touch-callout: none; -webkit-user-drag: none; }
[data-cover], [data-cover] * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.hide { display: none !important; }

/* Frosted glass, shared by the tab bar, mini player, round buttons and sheets. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  border: 0.5px solid var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* ---------- Tab stacks ---------- */
.stacks { position: fixed; inset: 0; }
.stack { position: absolute; inset: 0; display: none; }
.stack.active { display: block; }
.screen {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  background: var(--bg);
  padding: 0 0 calc(var(--tab-bottom) + var(--tab-h) + var(--mini-pad, 0px) + 28px);
  will-change: transform;
}
body.has-mini { --mini-pad: calc(var(--mini-h) + var(--gap)); }
.screen.pushing { animation: push 0.34s cubic-bezier(0.2, 0.85, 0.25, 1); }
.screen.popping { animation: pop 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
.screen.under { animation: under 0.34s cubic-bezier(0.2, 0.85, 0.25, 1); }
@keyframes push { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pop { from { transform: none; } to { transform: translateX(100%); } }
@keyframes under { from { transform: translateX(-24%); opacity: 0.6; } to { transform: none; opacity: 1; } }
.screen.dragging { transition: none; }
.screen .edge-shadow { position: absolute; top: 0; bottom: 0; left: -20px; width: 20px; background: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.3)); pointer-events: none; }

/* ---------- Nav bar: reaches up under the clock, invisible at the top, glass once you scroll ---------- */
.nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: calc(52px + var(--safe-t)); padding: calc(var(--safe-t) + 6px) 16px 6px; }
/* The glass sits behind the bar's buttons and fades out at its lower edge, so nothing scrolling
   up ever shows behind the status bar. */
.nav::before {
  content: ''; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.2s;
  background: linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 68%, transparent));
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 12px), transparent); mask-image: linear-gradient(#000 calc(100% - 12px), transparent);
}
.nav.scrolled::before { opacity: 1; }
.nav .title { flex: 1; text-align: center; font-weight: 600; font-size: 17px; opacity: 0; transition: opacity 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav.titled .title { opacity: 1; }
.nav .spacer { width: 40px; flex: none; }
.nav .tools { display: flex; align-items: center; gap: 8px; min-width: 40px; justify-content: flex-end; }
.round { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.round svg { width: 20px; height: 20px; }
.round.back svg { width: 18px; height: 18px; margin-left: -2px; }
h1.large { margin: 0 0 6px; padding: 0 20px; font-size: 34px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 20px 12px; }
.sec-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.sec-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.sec-link { display: inline-flex; align-items: center; gap: 4px; }
.sec-link svg { width: 14px; height: 14px; color: var(--ink-3); }
.sec-head .more { color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.hint { padding: 0 20px; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.hint.center { text-align: center; }

/* ---------- Rows (no rules, generous spacing) ---------- */
.list { list-style: none; margin: 0; padding: 0 12px; }
.list li { position: relative; }
.row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 6px 8px; border-radius: 12px; }
.row:active { background: var(--press); }
.art { width: 52px; height: 52px; flex: none; border-radius: 8px; object-fit: cover; background: var(--fill); }
.art.round-art { border-radius: 50%; }
.art.fallback { display: grid; place-items: center; color: var(--ink-3); font-weight: 600; }
.art.fallback svg { width: 44%; height: 44%; }
.row .meta { flex: 1; min-width: 0; }
.row .t { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.playing .t { color: var(--accent); }
.row .n { width: 24px; flex: none; text-align: center; font-size: 15px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row .more { flex: none; width: 36px; height: 36px; margin-right: -6px; display: grid; place-items: center; color: var(--ink-3); border-radius: 50%; }
.row .more svg { width: 20px; height: 20px; }
.row .chev { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.bars-anim { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 12px; flex: none; }
.bars-anim i { flex: 1; background: var(--accent); border-radius: 1px; animation: bar 0.8s ease-in-out infinite alternate; }
.bars-anim i:nth-child(2) { animation-delay: -0.25s; } .bars-anim i:nth-child(3) { animation-delay: -0.5s; }
@keyframes bar { from { height: 25%; } to { height: 100%; } }

/* ---------- Filter chips (Library) ---------- */
.chips { position: sticky; top: calc(52px + var(--safe-t)); z-index: 4; display: flex; gap: 8px; padding: 4px 20px 12px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(var(--bg) 70%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 16px; border-radius: 17px; background: var(--fill); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--cap-bg); color: var(--cap-ink); }

/* ---------- Cards and shelves ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; padding: 0 20px; }
.card { text-align: left; min-width: 0; }
.card .art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.card .t { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .s { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:active .art { transform: scale(0.97); transition: transform 0.15s; }
.shelf { display: flex; gap: 14px; overflow-x: auto; padding: 0 20px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf .card { flex: none; width: 156px; scroll-snap-align: start; }
.shelf .card.artist { width: 116px; text-align: center; }
.shelf .card.artist .art { border-radius: 50%; }

/* Liked Songs hero card on Home */
.hero-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: calc(100% - 40px); margin: 4px 20px 0; min-height: 168px; padding: 18px; border-radius: 20px; text-align: left;
  background: radial-gradient(120% 120% at 100% 0%, #ff6a88 0%, #ff375f 35%, #7a1fa2 100%); color: #fff; overflow: hidden; position: relative; }
.hero-card .k { font-size: 13px; font-weight: 600; opacity: 0.85; }
.hero-card .h { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.hero-card .play { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.95); color: #000; }
.hero-card .play svg { width: 22px; height: 22px; margin-left: 2px; }
.hero-card .heart { position: absolute; right: -18px; top: -18px; width: 140px; height: 140px; opacity: 0.18; }
.hero-card.has-photo { background-size: cover; background-position: center; }
.hero-card.has-photo .heart { display: none; }
/* Liked Songs artwork when it wears a color wash instead of a photo */
.art.liked-art { display: grid; place-items: center; color: #fff; }
.art.liked-art svg { width: 46%; height: 46%; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.2)); }

/* ---------- Capsule buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; padding: 0 22px; border-radius: 24px; background: var(--fill); color: var(--ink); font-size: 16px; font-weight: 600; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--cap-bg); color: var(--cap-ink); }
.btn-row { display: flex; gap: 10px; padding: 0 20px; }
.btn-row .btn { flex: 1; }
.btn-text { color: var(--accent); font-size: 16px; font-weight: 500; }

/* ---------- Artist header: pastel block in the artist's color ---------- */
/* The hue lives on the screen so the pinned nav bar and the header share it. */
.screen[data-screen="artist"] { --ah: 262; --as: 40%; }
.artist-hero { position: relative; background: hsl(var(--ah) var(--as) 80%); color: #111; padding: calc(52px + var(--safe-t)) 20px 22px; border-radius: 0 0 28px 28px; }
/* Pinned over the header (the header slides up beneath it) and stays put as the songs scroll. */
.nav.nav-over { margin-bottom: calc(-52px - var(--safe-t)); }
.nav-over::before { background: hsl(var(--ah) var(--as) 80% / 0.9); }
.nav-over .title { color: #111; }
.nav-over .round { background: rgb(0 0 0 / 0.08); color: #111; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.photo-btn { display: block; width: 100%; border-radius: 18px; }
.artist-hero h1 { margin: 4px 0 16px; font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1.02; overflow-wrap: anywhere; }
.artist-hero .photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 44px rgb(0 0 0 / 0.2); }
.artist-hero .photo.fallback { background: rgb(0 0 0 / 0.1); display: grid; place-items: center; font-size: 72px; font-weight: 800; color: rgb(0 0 0 / 0.45); }
.artist-hero .stats { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 0; font-size: 14px; color: rgb(17 17 17 / 0.65); }
.artist-hero .stats b { font-size: 26px; font-weight: 800; color: #111; letter-spacing: -0.5px; }
.artist-hero .genres { margin: 6px 0 0; font-size: 13px; color: rgb(17 17 17 / 0.55); }
.artist-hero .btn-row { padding: 0; margin-top: 16px; }
.artist-hero .btn { background: rgb(0 0 0 / 0.1); color: #111; }
.artist-hero .btn-primary { background: #111; color: #fff; }

/* ---------- Playlist header ---------- */
.set-hero { text-align: center; padding: 4px 20px 0; }
.set-hero .cover-btn { display: block; width: min(240px, 64vw); margin: 0 auto; border-radius: 16px; }
.set-hero .art { width: min(240px, 64vw); height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 16px; box-shadow: 0 22px 50px rgb(0 0 0 / 0.45); }
.set-hero h1 { margin: 20px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.set-hero .by { margin: 0; color: var(--ink-2); font-size: 15px; }
.set-hero .desc { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.set-hero .btn-row { padding: 0; margin: 20px 0 10px; }

/* ---------- Rank list ---------- */
.rank .grip { flex: none; width: 36px; height: 44px; margin-right: -6px; display: grid; place-items: center; color: var(--ink-3); touch-action: none; }
.rank .grip svg { width: 22px; height: 22px; }
.rank.dragging { user-select: none; -webkit-user-select: none; }
.rank.dragging li:not(.lifted) { transition: transform 0.18s ease; }
.rank li.lifted { z-index: 5; background: var(--lift); box-shadow: 0 14px 34px rgb(0 0 0 / 0.4); border-radius: 14px; }

/* ---------- Search ---------- */
.search-wrap { position: sticky; top: calc(52px + var(--safe-t)); z-index: 4; padding: 2px 20px 12px; background: linear-gradient(var(--bg) 75%, transparent); }
.search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 22px; background: var(--fill); color: var(--ink-2); }
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--ink-2); }
.search .clear { width: 22px; height: 22px; border-radius: 50%; background: var(--ink-3); color: var(--bg); display: grid; place-items: center; }
.search .clear svg { width: 10px; height: 10px; }

/* ---------- Empty / notice ---------- */
.empty { padding: 56px 32px; text-align: center; color: var(--ink-2); font-size: 16px; }
.empty b { display: block; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; }
.empty .btn { margin-top: 22px; }
.notice { margin: 12px 20px; padding: 16px; border-radius: 18px; background: var(--bg-elev); font-size: 15px; color: var(--ink-2); }
.notice b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }
.notice .btn { margin-top: 14px; width: 100%; }
.progress { height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; margin: 12px 0 4px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.settings-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 8px; border-radius: 12px; font-size: 16px; }
.settings-row:active { background: var(--press); }
.settings-row svg { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
.settings-row span { flex: 1; }
.settings-row em { font-style: normal; font-size: 13px; color: var(--accent); }

/* ---------- Floating tab bar ---------- */
.tabbar { position: fixed; left: 16px; right: 16px; bottom: var(--tab-bottom); z-index: 30; display: flex; align-items: center; gap: var(--gap); pointer-events: none; }
.tabbar > * { pointer-events: auto; }
.tab-capsule { flex: 1; height: var(--tab-h); border-radius: 31px; display: flex; padding: 5px; gap: 4px; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 26px; font-size: 10px; font-weight: 600; color: var(--ink); transition: background 0.2s, color 0.2s; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-current="page"] { background: var(--glass-on); color: var(--accent); }
.tab-search { flex: none; width: var(--tab-h); height: var(--tab-h); border-radius: 50%; }
.tab-search svg { width: 24px; height: 24px; }
.tab-search[aria-current="page"] { color: var(--accent); }

/* ---------- Mini player ---------- */
.mini { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tab-bottom) + var(--tab-h) + var(--gap)); z-index: 31; height: var(--mini-h); border-radius: 29px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 7px; overflow: hidden; }
.mini[hidden] { display: none; }
.mini .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; height: 100%; }
.mini .art { width: 44px; height: 44px; border-radius: 50%; }
.mini .meta { min-width: 0; }
.mini .t { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .s { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .ctl { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; }
.mini .ctl svg { width: 22px; height: 22px; }
.mini .ctl.liked { color: var(--accent); }
.mini .prog { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 1px; background: var(--fill); overflow: hidden; }
.mini .prog i { display: block; height: 100%; width: 0; background: var(--ink-2); }

/* ---------- Now Playing ---------- */
.np {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: linear-gradient(180deg, hsl(var(--nh, 262) 34% 36%), hsl(var(--nh, 262) 30% 16%) 68%, #08080a);
  color: #fff; padding: calc(var(--safe-t) + 10px) 26px max(24px, env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.np.open { transform: none; }
.np.dragging { transition: none; }
.np .handle { width: 38px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.35); margin: 0 auto 12px; flex: none; }
.np .art-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.np .art { width: min(100%, 62vh); max-width: 380px; aspect-ratio: 1; height: auto; border-radius: 14px; box-shadow: 0 28px 70px rgb(0 0 0 / 0.55); transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1); }
.np.paused .art { transform: scale(0.84); }
.np .titles { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.np .titles .meta { flex: 1; min-width: 0; }
.np .t { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np .s { display: block; font-size: 18px; color: rgb(255 255 255 / 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np .round { background: rgb(255 255 255 / 0.14); color: #fff; }
.np .round.liked { color: #ff6a88; }
.np .scrub { position: relative; height: 30px; margin-top: 14px; touch-action: none; }
.np .scrub .track { position: absolute; left: 0; right: 0; top: 13px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.22); overflow: hidden; }
.np .scrub .track i { display: block; height: 100%; width: 0; background: rgb(255 255 255 / 0.9); }
.np .times { display: flex; justify-content: space-between; font-size: 12px; color: rgb(255 255 255 / 0.55); font-variant-numeric: tabular-nums; }
.np .controls { display: flex; align-items: center; justify-content: center; gap: 46px; margin: 24px 0 12px; }
.np .controls button { color: #fff; display: grid; place-items: center; }
.np .controls .skip svg { width: 38px; height: 38px; }
.np .controls .play svg { width: 56px; height: 56px; }
.np .bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.np .bottom button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; background: rgb(255 255 255 / 0.12); color: #fff; font-size: 13px; font-weight: 600; }
.np .bottom svg { width: 18px; height: 18px; }

/* ---------- Sheet ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.4); opacity: 0; transition: opacity 0.22s; }
.sheet-bg.open { opacity: 1; }
.sheet { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 46; max-height: 82vh; overflow-y: auto; border-radius: 28px; padding: 8px 8px 10px; transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1); }
.sheet.open { transform: none; }
.sheet .handle { width: 38px; height: 5px; border-radius: 3px; background: var(--ink-3); margin: 2px auto 10px; }
.sheet h3 { margin: 4px 14px 2px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.sheet p { margin: 0 14px 10px; color: var(--ink-2); font-size: 14px; }
.sheet .menu-list { list-style: none; margin: 0; padding: 0; }
.sheet .menu-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 16px; font-size: 16px; font-weight: 500; }
.sheet .menu-row:active { background: var(--press); }
.sheet .menu-row svg { width: 22px; height: 22px; color: var(--ink); flex: none; }
.sheet .menu-row small { color: var(--ink-2); font-size: 13px; font-weight: 400; }
.sheet .washes { display: grid; grid-template-columns: repeat(6, 42px); justify-content: space-between; gap: 8px; padding: 4px 14px 14px; }
.sheet .wash { width: 42px; height: 42px; border-radius: 50%; }
.sheet .wash[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--glass-bg), 0 0 0 4px var(--ink); }
.sheet .field { display: flex; gap: 8px; margin: 4px 8px 10px; }
.sheet .field input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 23px; border: 0; background: var(--fill); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.sheet .field .btn { height: 46px; padding: 0 18px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tab-bottom) + var(--tab-h) + var(--mini-pad, 0px) + 18px); transform: translate(-50%, 16px); opacity: 0; z-index: 60; max-width: min(90vw, 420px); padding: 11px 18px; border-radius: 22px; background: var(--cap-bg); color: var(--cap-ink); font-size: 14px; font-weight: 600; text-align: center; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* The page a separate browser shows after finishing a login for the home-screen app. */
.relay { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; text-align: center; }
.relay-mark { width: 72px; height: 72px; color: #1ed760; margin-bottom: 18px; }
.relay-mark svg { width: 100%; height: 100%; }
.relay h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.relay p { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}