/* Product adapter for the approved SFSound iOS Glass foundation. */
:root { --bar: var(--panel); --card: var(--surface); --card-hi: var(--hover); --gold: var(--accent); --radius: 20px; }
.topbar { position: relative; height: 96px; padding: 16px var(--pad); gap: 14px; background: none; }
.ios-notice-region { padding: 0 var(--pad); }
footer { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
footer > a { color: var(--text); font-size: 12px; font-weight: 800; }
footer > div { max-width: 340px; text-align: right; }
footer p { margin: 0 0 5px; line-height: 1.7; }
footer [data-go] { color: var(--accent); padding: 0; border: 0; background: none; font: inherit; font-weight: 700; }
.logo.ios-brand { font-size: 24px; font-weight: 650; letter-spacing: -.65px; }
.logo.ios-brand strong { font-weight: 650; }
.logo em { color: inherit; }
.iconbtn { color: var(--text); border-radius: 50%; min-height: 44px; }
.iconbtn:hover { color: var(--text); background: var(--hover); }
.search { flex: 0 1 520px; min-height: 54px; padding: 8px 8px 8px 16px; background: var(--material); border: 1px solid var(--glass-edge); border-radius: 28px; box-shadow: var(--material-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); }
.search:focus-within { border-color: var(--accent); }
.search input { font-size: 16px; }
.search input:focus-visible { outline: none; }
.search input::placeholder, .search > .ic { color: var(--muted) !important; }
.search .go, .toolbar .solid, .more-wrap button { background: var(--action); border: 1px solid transparent; color: var(--action-text); border-radius: 999px; min-height: 38px; font-weight: 600; }
.search .go:hover, .toolbar .solid:hover, .more-wrap button:hover { background: var(--action); filter: brightness(1.08); }
.hero { max-width: 1560px; margin: 4px auto 24px; width: calc(100% - var(--pad) * 2); border-radius: var(--radius-card); box-shadow: 0 5px 16px var(--glass-shadow); }
.slide .cap { background: var(--suggestion-surface); border: 1px solid var(--line); color: var(--text); border-radius: 20px; padding: 12px 18px; font-weight: 650; }
.hero-arrow { background: var(--suggestion-surface); color: var(--text); border: 1px solid var(--line); }
.hero-arrow:hover { background: var(--glass-solid); }
.dots button { background: #ffffff80; }
.dots button.on { background: var(--accent); }
.row-head .more:hover { color: var(--accent); }
.card { background: transparent; padding: 0; border: 0; border-radius: var(--radius-art); }
.card:hover { background: transparent; }
.card:hover h3 { color: var(--accent); }
.card .thumb { background: var(--panel-soft); border-radius: var(--radius-art); box-shadow: 0 5px 16px var(--glass-shadow); }
.grid .card { padding: 0; }
.card h3 { font-weight: 600; margin: 10px 2px 6px; }
.badge, .tag { background: var(--suggestion-surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
.tag { color: var(--accent); }
.chips button { min-height: 40px; background: var(--surface); color: var(--text); border: 1px solid var(--glass-edge); }
.chips button:hover { background: var(--hover); }
.chips button.on { background: var(--action); color: var(--action-text); border-color: transparent; }
.wrap { padding-bottom: 116px; }
.row { margin-bottom: 28px; }
.row-head h2 { font-weight: 650; letter-spacing: -.4px; }
.watch { max-width: 1580px; margin: 0 auto; padding: 16px var(--pad); gap: 24px; }
.stage { position: relative; min-width: 0; min-height: 0; background: transparent; }
.panel, .about > * { background: var(--card-material); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); color: var(--text); }
.about > * { min-width: 0; }
.kv { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.dev { min-width: 0; }
.dev .ava, .dev .ava img { background: var(--panel-soft); }
.dev .ava { flex: none; }
.panel { padding-bottom: 32px; }
.pchips { color: var(--muted); }
.pchips span { border-color: var(--line); }
.acts button { color: var(--text); border-radius: 15px; min-height: 48px; }
.acts button:hover { background: var(--hover); }
.desc { background: var(--well); border-radius: 20px; }
.desc summary .chev, .desc p { color: var(--muted); }
.eps button { min-height: 46px; background: var(--surface); color: var(--text); border: 1px solid var(--glass-edge); border-radius: 15px; }
.eps button:hover { background: var(--hover); }
.eps button.on { background: var(--action); color: var(--action-text); border-color: transparent; }
.note { color: var(--muted); background: var(--well); border-color: var(--line); border-radius: 20px; }
.note button { background: var(--action); color: var(--action-text); }
.box p { color: var(--muted); }
.dev .photo { background: var(--panel-soft); }
footer { border-color: var(--line); padding-bottom: 116px; }
.bars { background: var(--panel); border-color: var(--line); border-radius: 0 0 20px 20px; }
.bar .lbl { color: var(--muted); }
.bar button { min-height: 36px; background: var(--surface); color: var(--text); border: 1px solid var(--glass-edge); border-radius: 999px; }
.bar button:hover { background: var(--hover); }
.bar button.on { background: var(--action); color: var(--action-text); border-color: transparent; }
/* The video stage stays dark, like the approved SFSound lyrics stage. */
.frame { color-scheme: dark; --text: #f2f2f7; --muted: #aeaeb2; --gold: #0a84ff; --danger: #ff6961; color: var(--text); border-radius: 20px; overflow: hidden; }
.stage:has(.bars:not([hidden])) .frame { border-radius: 20px 20px 0 0; }
.frame .hint { background: #1c1c1ef0; color: var(--text); }
.frame .hint .spin { border-color: #ffffff1a; border-top-color: var(--gold); }
.frame .hint button { background: var(--gold); color: #fff; }
.cdtitle { color: var(--text); }
.cd i, .cdnote { color: var(--muted); }
.cd .sec b { color: var(--danger); }
.pmenu { color-scheme: dark; background: #1c1c1ef5; border: 1px solid #ffffff24; color: #f2f2f7; border-radius: 24px; box-shadow: 0 8px 28px #00000040; padding: 10px; right: 12px; max-width: calc(100% - 24px); max-height: var(--pmenu-max-height, calc(100dvh - 160px)); overflow-y: auto; overscroll-behavior: contain; }
.pmrow, .pmopts button { color: #f2f2f7; border-radius: 15px; }
.pmrow .pmval { color: #aeaeb2; }
.pmrow:hover, .pmopts button:hover { background: #ffffff0d; }
.pmopts button.on, .ptop button.on { color: #0a84ff; }
#view-watch .frame:fullscreen, #view-watch .frame.fsx { border-radius: 0; }
/* Normal playback anchors the menu to the stage, outside the clipped video. */
/* iPhone's rotated fullscreen frame supplies its own coordinate system. */
#view-watch .frame:fullscreen .pmenu, #view-watch .frame.fsx .pmenu { position: absolute; top: 46px; right: 12px; left: auto; transform: none; width: 266px; max-width: calc(100% - 24px); max-height: calc(100% - 62px); }
#view-watch .frame.fsx .fsx-close { left: max(10px, env(safe-area-inset-left)); right: auto; }
@media (min-width: 1001px) { #view-watch .watch { height: calc(100dvh - 190px); } }
@media (max-width: 860px) {
  .topbar { height: auto; min-height: 96px; flex-wrap: wrap; padding: 12px var(--pad); gap: 10px; }
  .logo.ios-brand { font-size: 21px; }
  .search { order: 2; flex: 1 1 100%; margin-left: 0; }
  .hero { margin-top: 8px; }
  .slide .cap { padding: 10px 14px; font-size: 16px; }
  .watch { gap: 16px; }
  .panel { margin: 0; padding: 18px 16px 28px; }
  .grid { gap: 20px 12px; }
  .eps { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); }
}