/* Two themes share one DOM; everything that differs is a variable or a theme-scoped rule. */
:root { color-scheme: dark; }

.theme-modern {
  --bg: #0b1220; --surface: #131d33; --surface2: #1b2742; --line: #243558;
  --text: #eef2fb; --muted: #a9b6d3; --accent: #a78bfa; --accent-ink: #14110a; --accent-hi: rgb(195, 176, 252); --accent-lo: rgb(154, 128, 230); --accent-glow: rgba(167, 139, 250, .38); --good: #3dd6c6; --warn: #ffc93c;
  --font: Inter, system-ui, sans-serif; --font-head: 'Barlow Condensed', Inter, sans-serif;
  --fs: 15px; --fs-small: 12px; --head-size: 34px; --upper: none;
  --radius: 16px; --radius-sm: 12px; --bw: 0px; --bc: transparent; --shadow: none; --gap: 12px;
}
.theme-retro {
  --bg: #0a1a9e; --surface: #0a1a9e; --surface2: #0a1a9e; --line: #3a4bd0;
  --text: #ffffff; --muted: #b8c4ff; --accent: #fcd835; --accent-ink: #0a1a9e; --good: #7df09a; --warn: #ff6b5e;
  --font: 'Press Start 2P', ui-monospace, monospace; --font-head: 'Press Start 2P', ui-monospace, monospace;
  --fs: 10px; --fs-small: 8px; --head-size: 16px; --upper: uppercase;
  --radius: 0; --radius-sm: 0; --bw: 4px; --bc: #ffffff; --shadow: 4px 4px 0 #000; --gap: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
html { overflow-x: hidden; }   /* on html only: overflow on body would make it the scroll container and break the sticky header */
#app > * { min-width: 0; }
body { color: var(--text); font-family: var(--font); font-size: var(--fs); line-height: 1.6; text-transform: var(--upper); }
button, input, textarea { font-family: inherit; font-size: inherit; text-transform: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.theme-retro::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px 16px 96px; gap: var(--gap); }

h1, h2 { margin: 0; font-family: var(--font-head); font-size: var(--head-size); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.theme-retro h1, .theme-retro h2 { color: var(--accent); text-shadow: 3px 3px 0 #000; }
.muted { color: var(--muted); font-size: var(--fs-small); }
.eyebrow { color: var(--accent); font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; }

/* surfaces */
.card { background: var(--surface); border: var(--bw) solid var(--bc); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

/* buttons */
.btn { border: var(--bw) solid var(--bc); border-radius: var(--radius-sm); background: var(--surface2); box-shadow: var(--shadow); min-height: 48px; padding: 0 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.theme-modern .btn { border: 0; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: #fff; }
.theme-retro .btn.primary { background: #d8281f; color: #fff; }
.btn.ghost { background: transparent; }
.theme-modern .btn.ghost { border: 1px solid #3a4b73; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.small { min-height: 44px; padding: 0 12px; }
.icon-btn { width: 48px; padding: 0; }

.btn > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 96px; padding: 14px; text-align: left; font-size: calc(var(--fs) + 1px); width: 100%; }
.tile .sub { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.tile svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.chips::-webkit-scrollbar { display: none; }
.theme-retro .chips { flex-wrap: wrap; }
.chip { flex: none; border: var(--bw) solid var(--bc); border-width: calc(var(--bw) * .75); border-radius: 999px; background: var(--surface2); min-height: 40px; padding: 0 16px; font-weight: 600; }
.theme-retro .chip { border-radius: 0; padding: 0 10px; }
.chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: var(--accent); }

/* header bar */
.topbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.seg { display: flex; background: var(--surface); border-radius: 999px; padding: 3px; }
.theme-retro .seg { background: transparent; padding: 0; border-radius: 0; }
.seg.col { flex-direction: column; border-radius: var(--radius-sm); }
.seg.col button { min-height: 40px; border-radius: var(--radius-sm); }
.seg button { border: 0; border-radius: 999px; min-height: 36px; padding: 0 12px; background: transparent; color: var(--muted); font-weight: 600; font-size: var(--fs-small); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.theme-retro .seg button { border: 3px solid #fff; border-radius: 0; color: #fff; }
.theme-retro .seg button.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* rosters */
.team-head { display: flex; align-items: center; gap: 8px; }
.team-head .name { flex-grow: 1; justify-content: center; font-family: var(--font-head); font-size: var(--head-size); text-transform: uppercase; }
.swatch { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #1f4fd8 50%, #d8281f 50%); flex: none; }
.theme-retro .swatch { border-radius: 0; border: 2px solid #fff; }
.list { display: flex; flex-direction: column; gap: 10px; }
.theme-retro .list { gap: 0; }
.row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 72px; padding: 10px 12px; background: var(--surface); border: var(--bw) solid transparent; border-radius: var(--radius); }
.theme-retro .row { border: 0; border-bottom: 2px dashed var(--line); border-radius: 0; background: transparent; }
.theme-retro .row:hover::before, .theme-retro .row.cur::before { content: ''; border-left: 10px solid var(--accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent; flex: none; }
.face { width: 48px; height: 56px; border-radius: 10px; background: #2a3a5e; display: flex; align-items: flex-end; justify-content: center; flex: none; overflow: hidden; }
.theme-retro .face { background: #000; border: 2px solid #fff; border-radius: 0; }
.face svg { width: 80%; height: 80%; }
.face.sp { width: 68px; height: 68px; align-items: center; }
.face.sp.big { width: 72px; height: 72px; }
.sprite { display: block; flex: none; background-image: url(img/faces.png); background-repeat: no-repeat; image-rendering: pixelated; }
.row .grow { flex-grow: 1; min-width: 0; }
.row .nm { font-size: calc(var(--fs) + 2px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .num { font-family: var(--font-head); font-weight: 700; font-size: 34px; color: var(--good); }
.theme-retro .row .num { font-size: 14px; color: var(--text); }

button.row { color: inherit; font: inherit; }
.theme-modern button.row:hover { background: var(--surface2); }

/* player editor */
.editgrid { display: flex; gap: var(--gap); align-items: stretch; }
.facecard { display: flex; align-items: center; gap: 10px; padding: 10px; flex: none; }
.face.big { width: 64px; height: 76px; }
.names { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field { font-size: var(--fs-small); color: var(--muted); display: block; }
.field input { display: block; width: 100%; margin-top: 4px; min-height: 44px; padding: 0 12px; background: var(--surface); color: var(--text); border: 1px solid #2a3a5e; border-radius: var(--radius-sm); font-size: 16px; text-transform: none; }
.theme-retro .field input { background: #000; border: 3px solid #fff; border-radius: 0; color: var(--accent); font-size: 12px; text-transform: uppercase; }
.k { font-size: var(--fs-small); color: var(--muted); font-weight: 600; letter-spacing: .06em; }
.jersey { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper.col { flex-direction: column; }
.stepper .icon-btn { width: 44px; min-height: 44px; font-size: 22px; padding: 0; }
.val { font-family: var(--font-head); font-weight: 700; font-size: 34px; min-width: 40px; text-align: center; }
.val.sm { font-size: 14px; min-width: 0; }
.theme-retro .val { font-size: 18px; }
.theme-retro .val.sm { font-size: 9px; }
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.btn.tile2 { flex-direction: column; gap: 0; min-height: 64px; padding: 0; font-weight: 400; background: var(--surface); line-height: 1.2; }
.theme-retro .btn.tile2 { gap: 6px; line-height: 1; }
.btn.tile2 .v { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.1; }
.theme-retro .btn.tile2 .v { font-size: 14px; }
.btn.tile2.on { background: var(--surface2); border: 2px solid var(--accent); color: var(--accent); }
.theme-retro .btn.tile2.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.theme-retro .btn.tile2.on .k { color: var(--accent-ink); }
.picker2 { background: var(--surface2); }
.theme-retro .picker2 { background: #000; border-color: var(--accent); }
.pk { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: var(--fs-small); }
.pk .big { font-family: var(--font-head); font-size: 34px; color: var(--accent); }
.theme-retro .pk .big { font-size: 16px; }
.slidebar { display: flex; align-items: center; gap: 8px; }
.slidebar input[type=range] { flex-grow: 1; min-width: 0; }
.slidebar .icon-btn { flex: none; width: 44px; min-height: 44px; font-size: 22px; padding: 0; }
.ladder { margin: 0 52px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2a3a5e; }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #2a3a5e; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -13px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 2px 6px #0008; }
input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); border: 0; }
.theme-retro input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 0; background: #333; }
.theme-retro input[type=range]::-moz-range-track { height: 14px; border-radius: 0; background: #333; }
.theme-retro input[type=range]::-webkit-slider-thumb { border-radius: 0; width: 22px; height: 32px; margin-top: -9px; border: 2px solid #fff; box-shadow: none; }
.theme-retro input[type=range]::-moz-range-thumb { border-radius: 0; width: 18px; height: 28px; border: 2px solid #fff; }
.simgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.simbox { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; }
.simbox .val { font-size: 28px; }
.theme-retro .simbox .val { font-size: 14px; }

/* face picker */
.facebox { border: 0; background: transparent; padding: 0; border-radius: var(--radius-sm); }
.facegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 12px; }
.facebtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; background: var(--surface2); border: 2px solid transparent; border-radius: var(--radius-sm); }
.theme-retro .facebtn { border-radius: 0; background: #000; }
.facebtn.on { border-color: var(--accent); }
.facebtn .fid { font-size: var(--fs-small); color: var(--muted); }
.facebtn.on .fid { color: var(--accent); }

.modal-open { overflow: hidden; }
.scrim.pop { align-items: flex-start; padding: var(--pop-top, 16px) 16px; }
.sheet.pop { width: min(528px, 100%); height: 100%; max-height: none; border-radius: var(--radius); }
.theme-modern .sheet.pop { box-shadow: 0 12px 40px #000a; }

/* sheet (team picker) */
.scrim { position: fixed; inset: 0; background: #000a; display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet { width: min(560px, 100%); max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 24px 24px 0 0; padding: 14px 16px 24px; border: var(--bw) solid var(--bc); }
.theme-retro .sheet { border-radius: 0; background: var(--bg); }
.sheet > .topbar { flex: none; padding: 0 0 10px; }
.sheetbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.picker .btn { min-height: 48px; padding: 0 6px; }
.picker .btn.on { border: 2px solid var(--accent); color: var(--accent); }

/* text view */
.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search input { flex-grow: 1; min-width: 0; background: var(--surface); border: 1px solid #2a3a5e; border-radius: var(--radius-sm); color: var(--text); padding: 0 12px; min-height: 44px; }
.theme-retro .search input { background: #000; border: 3px solid #fff; color: var(--accent); border-radius: 0; }
#editor { width: 100%; height: 56vh; resize: vertical; background: #070c18; color: var(--text); border: 1px solid #1d2b4d; border-radius: var(--radius-sm); padding: 12px; font: 12px/1.65 ui-monospace, 'JetBrains Mono', Consolas, monospace; white-space: pre; overflow: auto; text-transform: none; }
.theme-retro #editor { background: #000; border: 4px solid #fff; border-radius: 0; font-size: 11px; }

/* bottom action bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); z-index: 5; }
.bar > div { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.bar .btn { flex: 1; min-height: 52px; }
.bar .btn.primary { flex: 2; }

/* feedback */
.banner { border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; background: #3a2a05; color: var(--text); font-size: var(--fs-small); line-height: 1.5; text-transform: none; overflow-wrap: anywhere; }
.banner summary { cursor: pointer; font-weight: 600; }
.banner .detail { margin-top: 8px; white-space: pre-wrap; max-height: 40vh; overflow: auto; color: var(--muted); }
.theme-retro .banner { background: #000; border: 4px solid var(--warn); border-radius: 0; }
.status { text-align: center; padding: 28px 0; color: var(--muted); }
.dropzone { border: 2px dashed #3a4b73; border-radius: var(--radius); padding: 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dropzone.over { border-color: var(--accent); background: var(--surface); }
.theme-retro .dropzone { border: 4px dashed #fff; border-radius: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; margin-right: 8px; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.title-art { text-align: center; line-height: 1.4; }
.title-art .big { font-size: 26px; color: #fff; text-shadow: 4px 4px 0 #d8281f, 8px 8px 0 #000; display: block; margin: 8px 0; }
.theme-modern .only-retro, .theme-retro .only-modern { display: none !important; }

/* team editor */
.seg.wide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius-sm); }
.seg.wide button { min-height: 52px; border-radius: var(--radius-sm); line-height: 1.2; padding: 0 4px; }
.theme-retro .seg.wide { gap: 6px; }
.theme-retro .seg.wide button { font-size: 7px; }
.field select { display: block; width: 100%; margin-top: 4px; min-height: 48px; padding: 0 12px; background: var(--surface); color: var(--text); border: 1px solid #2a3a5e; border-radius: var(--radius-sm); font-size: 16px; }
.theme-retro .field select { background: #000; border: 3px solid #fff; border-radius: 0; color: var(--accent); font-size: 11px; text-transform: uppercase; }
.playgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.playslot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; }
.playimg { flex: none; line-height: 0; }
.playimg.none { line-height: 1.4; font-size: var(--fs-small); color: var(--muted); }
.sprite.play { background-image: url(img/plays_tsb1.png); }
.sprite.play23 { background-image: url(img/plays_tsb23.png); }

/* tabs, compact playbook, play picker, identity */
.seg.tabs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.seg.tabs button { min-height: 44px; font-size: var(--fs); }
.theme-retro .seg.tabs button { font-size: 9px; }
.seg button:disabled { opacity: .4; cursor: default; }
.tabbody { display: flex; flex-direction: column; gap: var(--gap); }
.playrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.playbtn, .playopt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-sm); }
.theme-retro .playbtn, .theme-retro .playopt { background: #000; border: 3px solid #fff; border-radius: 0; }
.playbtn .k { font-size: 10px; text-align: center; }
.theme-retro .playbtn .k { font-size: 7px; }
.playpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; align-content: start; }
.playopt.on { border-color: var(--accent); }
.playopt .k { font-size: var(--fs); }
.idgrid { display: flex; flex-direction: column; gap: 10px; }

/* identity fields */
.field .fl { display: flex; justify-content: space-between; align-items: baseline; }
.field .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }

/* uniform editor */
.unirow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.unibtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius); }
.theme-retro .unibtn { background: #000; border: 3px solid #fff; border-radius: 0; }
.unibtn.on { border-color: var(--accent); }
.unibtn canvas, .champcv { image-rendering: pixelated; display: block; }
.champcv { border-radius: var(--radius-sm); }
.chips2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.colorchip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-sm); text-align: left; font: inherit; }
.theme-retro .colorchip { background: #000; border: 3px solid #fff; border-radius: 0; }
.colorchip .sw { width: 32px; height: 32px; border-radius: 8px; border: 2px solid #fff6; flex: none; }
.theme-retro .colorchip .sw { border-radius: 0; border-color: #fff; }
.colorchip .cl { flex-grow: 1; }
.colorchip .hx { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-small); text-transform: none; }
.bigsw { height: 84px; border-radius: var(--radius); margin: 12px 0 6px; border: 2px solid #fff4; }
.theme-retro .bigsw { border: 4px solid #fff; border-radius: 0; }
.lvrow { display: grid; grid-template-columns: 52px 44px minmax(0, 1fr) 44px 28px; align-items: center; gap: 6px; margin-top: 6px; }
.lvrow .icon-btn { width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
.lvrow .val { font-size: 16px; min-width: 0; }
.nat { position: relative; margin-top: 12px; width: 100%; }
.nat input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bar2 { display: flex; gap: 10px; margin-top: 14px; }
.bar2 .btn { flex: 1; }
.nespal { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 12px; }
.nsw { min-height: 44px; border: 2px solid #0006; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-small); }
.theme-retro .nsw { border: 2px solid #fff; border-radius: 0; }
.nsw.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.usagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 12px; }
.chk { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; background: var(--surface2); border: 2px solid transparent; border-radius: var(--radius-sm); text-align: left; font: inherit; }
.theme-retro .chk { background: #000; border: 2px solid #fff; border-radius: 0; }
.chk .box { width: 20px; height: 20px; border: 2px solid var(--muted); border-radius: 5px; flex: none; }
.theme-retro .chk .box { border-radius: 0; border-color: #fff; }
.chk.on .box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg); }

/* dialogs sized to their content and centered on the screen (color pickers, uniform usage) */
.scrim.pop.fit { align-items: center; padding: 16px; }
.sheet.pop.fit { height: auto; max-height: 100%; }

/* fixed header: the title area stays put, only the middle scrolls (the action bar at the bottom is already fixed) */
.hdr { position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 10px; margin: -16px -16px 0; padding: 16px 16px 10px; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.hdr > * { min-width: 0; }
.hdr .chips { padding-bottom: 2px; }
@media (max-height: 740px) {          /* short phones: give the scrolling part more room */
  .hdr { gap: 6px; padding-bottom: 8px; }
  .hdr h1 { display: none; }
}

/* auto-update sim dialog */
.autobody { margin-top: 10px; line-height: 1.5; text-transform: none; }
.autobtns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.autobtns .btn { width: 100%; }
.autobody p { margin: 0 0 12px; }
.autobody p.fdesc { margin-top: 14px; }
.autobody p:last-child { margin-bottom: 0; }

/* schedule */
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weekchips { padding-bottom: 0; }
.chip.warn::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--warn); vertical-align: super; }
.game { display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%; padding: 0 14px; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-sm); text-align: left; font: inherit; }
.theme-retro .game { background: transparent; border: 0; border-bottom: 2px dashed var(--line); border-radius: 0; }
.game .tm { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game .tm.r { text-align: right; }
.game .at { color: var(--muted); font-size: var(--fs-small); min-width: 18px; text-align: center; }
.game.bad { border-color: var(--warn); }
.theme-retro .game.bad { border: 3px solid var(--warn); }
.list.games { gap: 8px; }

/* ===== Modern style: glass ===== */
.theme-modern {
  --bg: #070b1a;
  --surface: rgba(255, 255, 255, .075);
  --surface2: rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .14);
  --muted: #b4c0dc;
  --glass-edge: rgba(255, 255, 255, .17);
  --g1: rgba(99, 102, 241, .50); --g2: rgba(14, 165, 233, .38); --g3: rgba(168, 85, 247, .36); --g4: rgba(20, 184, 166, .30);
  --glass-shadow: 0 8px 28px rgba(2, 6, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .20);
  --radius: 20px; --radius-sm: 14px;
}
/* the color the glass sits on */
.theme-modern::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 12% 8%, var(--g1), transparent 70%),
    radial-gradient(48% 40% at 95% 22%, var(--g2), transparent 70%),
    radial-gradient(56% 44% at 70% 98%, var(--g3), transparent 70%),
    radial-gradient(42% 34% at 5% 80%, var(--g4), transparent 70%),
    var(--bg);
}
html:has(.theme-modern) { background: var(--bg); }

/* panels: translucent fill, light edge, top highlight, soft shadow */
.theme-modern :is(.card, .row, .game, .colorchip, .playbtn, .playopt, .unibtn, .chk, .facebtn, .btn.tile2, .btn.tile, .banner, .dropzone) {
  background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
.theme-modern .btn:not(.primary):not(.ghost):not(.icon-btn):not(.tile):not(.tile2) { background: var(--surface2); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20); }
.theme-modern .btn.icon-btn { background: var(--surface2); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20); }
.theme-modern .btn.ghost { border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .04); }
.theme-modern .btn.primary { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 6px 22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .6); }
.theme-modern .btn:disabled { opacity: .38; }
.theme-modern .btn.tile2.on, .theme-modern .game.bad, .theme-modern .chk.on, .theme-modern .facebtn.on, .theme-modern .playopt.on, .theme-modern .unibtn.on { border-color: var(--accent); }
.theme-modern .chip { background: var(--surface2); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.theme-modern .chip.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: rgba(255, 255, 255, .5); box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .55); }
.theme-modern .seg { background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.theme-modern .seg button.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 3px 12px var(--accent-glow); }
.theme-modern .face { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); }
.theme-modern .banner { background: rgba(255, 201, 60, .12); border-color: rgba(255, 201, 60, .5); }

/* inputs */
.theme-modern :is(.field input, .field select, .search input) { background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-edge); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22); }
.theme-modern #editor { background: rgba(3, 7, 22, .55); border: 1px solid var(--glass-edge); }
.theme-modern input[type=range]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, .20); }
.theme-modern input[type=range]::-moz-range-track { background: rgba(255, 255, 255, .20); }
.theme-modern .picker2 { background: rgba(255, 255, 255, .10); }

/* frosted bars and dialogs: content passes underneath them */
.theme-modern .hdr { background: rgba(7, 11, 26, .50); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 var(--glass-edge); }
.theme-modern .bar { background: rgba(7, 11, 26, .50); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--glass-edge); }
.theme-modern .scrim { background: rgba(3, 6, 18, .50); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.theme-modern .sheet { background: rgba(20, 28, 62, .58); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 24px 64px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .26); }
.theme-modern .sheet .btn.on, .theme-modern .picker .btn.on { border-color: var(--accent); }

/* no backdrop blur available: use denser panels so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-modern { --surface: rgba(34, 46, 92, .88); --surface2: rgba(52, 68, 124, .92); }
  .theme-modern .hdr, .theme-modern .bar { background: rgba(10, 16, 40, .96); }
  .theme-modern .sheet { background: rgba(22, 32, 72, .97); }
  .theme-modern .scrim { background: rgba(3, 6, 18, .75); }
}

/* highlight color dialog */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; margin-top: 12px; }
.swatch-btn { width: 100%; aspect-ratio: 1; min-height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.swatch-btn.on { outline: 3px solid var(--text); outline-offset: 2px; }
.theme-retro .swatch-btn { border-radius: 0; }
.accentpick { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.accentpick input[type=color] { width: 64px; height: 44px; padding: 0; border: 1px solid var(--glass-edge, #fff4); border-radius: 10px; background: transparent; cursor: pointer; }

/* pro bowl */
.pbspot .code { width: 44px; flex: none; color: var(--accent); font-weight: 700; font-size: var(--fs-small); }
.pbspot .tm { flex: 1; }
.pbspot .who { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.theme-retro .pbspot .who { font-size: 7px; }

/* dropdowns: one look in both styles. The open list takes the select's colors, so it needs solid ones. */
:root { --stage: #7b86a6; }
.field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.theme-modern .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef2fb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-retro .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcd835' stroke-width='3' stroke-linecap='square'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-modern select option, .theme-modern select optgroup { background: #151c3a; color: #eef2fb; }
.theme-retro select option, .theme-retro select optgroup { background: #000; color: #fcd835; }
.sheetbody > .field, .sheetbody > .swaprow + .field { margin-top: 12px; display: block; }
.swaprow { margin: 12px 0 0; text-align: center; }

/* uniform pictures sit on a mid-tone so both white and black parts of a uniform stay visible */
.unibtn canvas { box-sizing: content-box; background: var(--stage); padding: 6px; border-radius: var(--radius-sm); }
.champcv { background: #000; }

/* bubbles replace dropdowns */
.field .fl { display: block; }
.pickfield { width: 100%; margin-top: 4px; min-height: 48px; justify-content: space-between; padding: 0 14px; font-weight: 500; text-align: left; }
.pickfield svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }
.theme-retro .pickfield { background: #000; color: var(--accent); }
.picker .btn { flex-direction: column; gap: 0; line-height: 1.25; }
.picker .btn .why { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.theme-retro .picker .btn .why { font-size: 6px; }
.picker .btn:disabled { opacity: .4; }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.three button { min-height: 52px; line-height: 1.2; padding: 0 6px; }
.theme-retro .seg.three button { font-size: 8px; }
.bubbles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 4px; }
.bub { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-height: 52px; padding: 6px 12px; text-align: left; font: inherit; background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-sm); }
.theme-modern .bub { background: var(--surface2); border: 1px solid var(--glass-edge); }
.theme-retro .bub { background: #000; border: 3px solid #fff; border-radius: 0; }
.bub .k { font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.bub .nm { font-size: var(--fs-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bub.on { border-color: var(--accent); }
.theme-modern .bub.on { background: var(--surface); }
.sheet > .topbar { gap: 8px; }
.sheet > .topbar h2 { flex: 1; }

/* ===== wide layout: tablets and desktop browsers (>= 900px wide) ===== */
@media (min-width: 700px) and (max-width: 899px) { #app { max-width: 680px; } }   /* portrait tablets: a wider phone column */
body.wide { overflow: hidden; }
body.wide #app { max-width: none; padding: 0; gap: 0; display: block; min-height: 0; }
.shell { position: fixed; inset: 0; display: grid; grid-template-columns: 105px minmax(0, 1fr); }
.shell.two { grid-template-columns: 105px 390px minmax(0, 1fr); }
.rail { overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.railmark { width: 76px; height: 64px; border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; margin-bottom: 10px; }
.railmark { padding: 0; font: inherit; cursor: pointer; }
.railmark:hover { background: var(--surface); }
.railmark img { image-rendering: pixelated; display: block; }
.theme-modern .railmark { border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.theme-retro .railmark { background: #000; border: 3px solid #fff; font-size: 10px; border-radius: 0; box-shadow: var(--shadow); }
.railbtn { width: 88px; min-height: 64px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 11px; font-weight: 600; }
.theme-retro .railbtn { font-size: 7px; border-radius: 0; }
.railbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.railbtn:hover { background: var(--surface); }
.railbtn.on { background: var(--surface2); color: var(--accent); }
.theme-modern .railbtn.on { border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.theme-retro .railbtn.on { background: var(--accent); color: var(--accent-ink); }
.railbtn.dl { background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-top: 6px; }
.theme-modern .railbtn.dl { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 6px 18px var(--accent-glow); }
.theme-retro .railbtn.dl { background: #d8281f; color: #fff; border: 3px solid #fff; }
.railgrow { flex-grow: 1; }
.rail .seg { flex-direction: column; border-radius: var(--radius-sm); width: 88px; }
.rail .seg button { width: 100%; border-radius: var(--radius-sm); }
.theme-modern .rail { background: rgba(7, 11, 26, .42); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.pane { overflow-y: auto; height: 100%; min-width: 0; overscroll-behavior: contain; }
.pane + .pane { border-left: 1px solid var(--line); }
.col { display: flex; flex-direction: column; gap: var(--gap); padding: 16px; min-height: 100%; max-width: 780px; margin: 0 auto; }
.list-pane .col, .edit-pane .col { max-width: none; }
.edit-pane .col { max-width: 820px; }
/* the screens' own Home/Back buttons and style switch are replaced by the rail */
.pane .stylebtn { display: none; }
.pane .topbar [data-act="go:home"], .pane .topbar [data-act="go:roster"], .pane .topbar [data-act="pl-done"] { display: none; }
.pane .hdr > .topbar:not(:has(> :not([data-act="go:home"]):not([data-act="go:roster"]):not([data-act="pl-done"]):not(.stylebtn):not(span:empty))) { display: none; }
/* action bars sit at the bottom of their pane */
body.wide .bar { position: sticky; left: auto; right: auto; bottom: 0; margin: auto -16px -16px; padding: 12px 16px 16px; }
body.wide .bar > div { max-width: none; }
.emptyed { margin: auto; text-align: center; max-width: 340px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.bigtitle { font-family: var(--font-head); font-size: var(--head-size); font-weight: 700; text-transform: uppercase; }
.theme-retro .bigtitle { color: var(--accent); text-shadow: 3px 3px 0 #000; }
.theme-modern .row.cur { border-color: var(--accent); background: var(--surface2); }
.edit-pane .tiles4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pane .hdr:not(:has(> :not(.topbar))) { display: none; }                 /* nothing left in it once the rail has taken over */
.pane .hdr > .topbar { justify-content: flex-end; }
.pane .bar:has([data-act="download"]) { display: none; }                  /* the rail has the Download button */

/* text view: the editor takes all the room between the header and the footer */
#editor { height: auto; flex: 1 1 auto; min-height: 240px; resize: none; }

/* ---- TSB3 photos ---- */
.phimg { image-rendering: pixelated; display: block; }
.face.sp .phimg { margin: 0 auto; max-height: 100%; width: auto; }
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 10px; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; color: inherit; min-height: 44px; }
.pcard:hover, .pcard:focus-visible { border-color: var(--accent); }
.pcard .nm { font-size: var(--fs-small); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .slot { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 14px; }
.phbig { display: flex; justify-content: center; padding: 12px 0; }
.phbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.phnone { display: flex; align-items: center; justify-content: center; width: 72px; height: 96px; border: 2px dashed var(--muted); border-radius: 8px; color: var(--muted); font-size: var(--fs-small); text-align: center; }
.phprev { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 8px 0; }
.phsrc, .phres { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.phsrc canvas, .phres canvas { background: #000; border-radius: 6px; max-width: 100%; }
.phres canvas { image-rendering: pixelated; }
.phrow { grid-template-columns: 96px minmax(0, 1fr) 44px; }
.phrow input[type=range] { width: 100%; }
.phbox.over, .pcard.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.phsrc canvas { touch-action: none; cursor: grab; } .phsrc canvas:active { cursor: grabbing; }
.sheetfoot { flex: none; margin-top: 0; padding-top: 12px; }

/* color picker: hue strip, saturation/brightness square, palette grid */
.pickhead { display: flex; align-items: center; gap: 12px; }
.pickhead .bigsw { flex: 1; margin: 12px 0 6px; height: 56px; }
.pickcv { display: block; width: 100%; border-radius: var(--radius-sm); margin-top: 8px; touch-action: none; cursor: crosshair; }
.pickcv#usv { height: 150px; }
.pickcv.hue { height: 26px; }
.theme-retro .pickcv { border-radius: 0; border: 3px solid #fff; }
.pk { margin-top: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pal .prow, .prow { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; margin-top: 6px; }
.psw { width: 100%; aspect-ratio: 1; min-height: 34px; padding: 0; border: 2px solid #0006; border-radius: 6px; }
.theme-retro .psw { border: 2px solid #fff; border-radius: 0; }
.psw.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.fine { margin-top: 20px; margin-bottom: 8px; width: 100%; }
.pickhead + .pickcv { margin-top: 4px; }

/* TSB2/TSB3 uniform presets ("Start from...") */
.presetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 8px; }
.presetgrid .unibtn { width: 100%; min-height: 92px; font: inherit; color: inherit; }
.presetgrid .unibtn .cl { font-size: 12px; line-height: 1.2; text-align: center; }
.presetcell { display: flex; flex-direction: column; gap: 4px; }
.presethead { margin: 16px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.presetform { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; flex-wrap: wrap; }
.presetform input, .presetform textarea { flex: 1 1 160px; min-width: 0; padding: 8px 10px; font: inherit; color: inherit; background: var(--surface2); border: 2px solid transparent; border-radius: var(--radius-sm); }
.theme-retro .presetform :is(input, textarea) { background: #000; border: 2px solid #fff; border-radius: 0; }

/* team themes */
.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 10px; }
.themebtn { min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; background: var(--surface2); border: 2px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 13px; text-align: left; }
.themebtn.on { border-color: var(--accent); }
.themebtn .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, .45); }
.themehead { margin: 16px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* help / about / guide */
.tbright { display: flex; align-items: center; gap: 8px; }
.helpbtn { width: 40px; min-height: 40px; font-weight: 700; }
.rail .tbright { flex-direction: column; }
.helpmenu { display: grid; gap: 10px; margin-top: 8px; }
.helpmenu .btn { min-height: 56px; font-size: 16px; }
.sheettitle { margin: 4px 0 8px; }
.aboutbody { display: grid; gap: 10px; }
.aboutbody p { margin: 0; }
.aboutbody .links { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.aboutbody a, .guidebody a { color: var(--accent); }
.guidetoc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.guidetoc a { padding: 6px 12px; border-radius: 999px; background: var(--surface2); color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.guidebody section { margin-bottom: 18px; }
.guidebody h3 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.guidebody p, .guidebody li { line-height: 1.5; }
.guidebody img { max-width: 100%; border-radius: var(--radius-sm); }
.themebtn.wide { grid-column: 1 / -1; flex-wrap: wrap; }
.themebtn.wide .muted { flex-basis: 100%; font-size: 12px; margin-left: 30px; margin-top: -4px; }
.hint { font-size: 12px; margin-top: -4px; }
.helmetbtn { width: 56px; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface2); color: var(--text); font: inherit; cursor: pointer; }
.helmetbtn:hover { background: var(--surface); }
.helmetbtn img { width: 48px; height: auto; image-rendering: pixelated; display: block; }
.theme-modern .helmetbtn { border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.theme-retro .helmetbtn { background: #000; border: 3px solid #fff; border-radius: 0; box-shadow: var(--shadow); }
body.wide .helmetbtn { display: none; }
.gamerow { display: flex; align-items: center; gap: 8px; }
.gamerow .game { flex: 1; min-width: 0; width: auto; }
.gamedel { flex: none; width: 48px; min-height: 56px; }
.gamedel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gamedel:hover { color: var(--warn); }
.theme-retro .gamedel { background: transparent; border: 0; }
.themebtn .retrodot { background: linear-gradient(135deg, #1d3aa8 0 50%, #ffd23f 50%); border-radius: 0; border: 2px solid #fff; }
.theme-retro .themebtn { font-size: 9px; gap: 6px; padding: 6px; }
.theme-retro .themebtn.wide .muted { font-size: 8px; margin-left: 28px; }
@media (max-width: 360px) { .theme-retro .themebtn { font-size: 8px; } }

/* ===== Cyber style: dark neon HUD ===== */
.theme-cyber {
  --bg: #04090f; --surface: rgba(6, 24, 36, .88); --surface2: rgba(10, 40, 58, .92); --line: #0f5f73;
  --text: #d6f7ff; --muted: #7fb4c4; --accent: #19f0ff; --accent-ink: #00181d; --accent-hi: #19f0ff; --accent-lo: #19f0ff; --accent-glow: rgba(25, 240, 255, .45);
  --good: #39ff88; --warn: #ff3df2; --mag: #ff3df2; --lime: #b6ff3a;
  --font: Rajdhani, 'Share Tech Mono', system-ui, sans-serif; --font-head: 'Share Tech Mono', ui-monospace, monospace;
  --fs: 16px; --fs-small: 12px; --head-size: 28px; --upper: none;
  --radius: 0; --radius-sm: 0; --bw: 1px; --bc: #0f5f73; --shadow: none; --gap: 12px;
  --cut: 12px;
  --cutclip: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
html:has(.theme-cyber) { background: var(--bg); }
.theme-cyber::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 10% 0%, rgba(25, 240, 255, .14), transparent 70%),
    radial-gradient(50% 40% at 95% 100%, rgba(255, 61, 242, .12), transparent 70%),
    linear-gradient(rgba(25, 240, 255, .05) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(25, 240, 255, .05) 1px, transparent 1px) 0 0 / 32px 100%,
    var(--bg);
}
.theme-cyber h1, .theme-cyber h2 { color: var(--accent); letter-spacing: .1em; text-shadow: 0 0 12px var(--accent-glow); font-weight: 400; }
.theme-cyber .eyebrow { color: var(--mag); letter-spacing: .2em; }
.theme-cyber .only-retro { display: none !important; }
.theme-cyber .k { letter-spacing: .12em; text-transform: uppercase; }

/* cut-corner panels with a bright edge */
.theme-cyber :is(.card, .row, .game, .colorchip, .playbtn, .playopt, .unibtn, .chk, .facebtn, .btn.tile2, .btn.tile, .banner, .dropzone) {
  background: var(--surface); border: 1px solid var(--line); border-radius: 0; box-shadow: none; clip-path: var(--cutclip);
}
.theme-cyber .card { border-top: 2px solid var(--accent); }
.theme-cyber .btn { border: 1px solid var(--line); border-radius: 0; background: var(--surface2); clip-path: var(--cutclip); --cut: 9px; letter-spacing: .04em; font-weight: 600; }
.theme-cyber .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.theme-cyber .btn.icon-btn, .theme-cyber .stepper .icon-btn { --cut: 7px; }
.theme-cyber .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.theme-cyber .btn.primary:hover:not(:disabled) { background: #fff; color: var(--accent-ink); }
.theme-cyber .btn.ghost { background: transparent; border: 1px solid var(--line); }
.theme-cyber .btn.tile2.on, .theme-cyber .game.bad, .theme-cyber .chk.on, .theme-cyber .facebtn.on, .theme-cyber .playopt.on, .theme-cyber .unibtn.on { border-color: var(--accent); background: var(--surface2); }
.theme-cyber .game.bad { border-color: var(--mag); }
.theme-cyber .btn.tile2.on { color: var(--accent); }
.theme-cyber :focus-visible { outline: 2px solid var(--mag); outline-offset: -4px; }
.theme-cyber .chip { border-radius: 0; background: var(--surface2); border: 1px solid var(--line); min-height: 36px; padding: 0 14px; }
.theme-cyber .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
.theme-cyber .seg { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 2px; }
.theme-cyber .seg button { border-radius: 0; }
.theme-cyber .seg button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 12px var(--accent-glow); }
.theme-cyber .seg.col, .theme-cyber .seg.col button { border-radius: 0; }
.theme-cyber .face { background: rgba(25, 240, 255, .08); border: 1px solid var(--line); border-radius: 0; }
.theme-cyber .swatch { border-radius: 0; }
.theme-cyber .banner { background: rgba(255, 61, 242, .10); border-color: var(--mag); }
.theme-cyber .row .num, .theme-cyber .val, .theme-cyber .btn.tile2 .v { color: var(--good); font-weight: 400; }
.theme-cyber .val { color: var(--text); }
.theme-cyber .pk .big { color: var(--accent); }

/* inputs */
.theme-cyber :is(.field input, .field select, .search input) { background: rgba(0, 0, 0, .45); border: 1px solid var(--line); border-radius: 0; color: var(--accent); font-family: 'Share Tech Mono', ui-monospace, monospace; }
.theme-cyber #editor { background: rgba(0, 0, 0, .55); border: 1px solid var(--line); border-radius: 0; color: var(--text); }
.theme-cyber input[type=range]::-webkit-slider-runnable-track { background: #0f3b49; height: 4px; border-radius: 0; }
.theme-cyber input[type=range]::-moz-range-track { background: #0f3b49; height: 4px; border-radius: 0; }
.theme-cyber .picker2 { background: var(--surface2); }
.theme-cyber .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319f0ff' stroke-width='3' stroke-linecap='square'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-cyber select option, .theme-cyber select optgroup { background: #04121b; color: #19f0ff; }
.theme-cyber .pickfield { color: var(--accent); }
.theme-cyber .swatch-btn { border-radius: 0; }
.theme-cyber .game .tm { font-weight: 600; }

/* bars, rail and dialogs */
.theme-cyber .hdr, .theme-cyber .bar { background: rgba(4, 9, 15, .94); box-shadow: 0 1px 0 var(--line); }
.theme-cyber .bar { border-top: 1px solid var(--accent); box-shadow: 0 -6px 20px rgba(25, 240, 255, .08); }
.theme-cyber .hdr { border-bottom: 1px solid var(--line); box-shadow: none; }
.theme-cyber .scrim { background: rgba(2, 6, 10, .78); }
.theme-cyber .sheet { background: #05121b; border: 1px solid var(--accent); border-radius: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); box-shadow: none; }
.theme-cyber .sheet.pop { border-radius: 0; }
.theme-cyber .sheet .btn.on, .theme-cyber .picker .btn.on { border-color: var(--accent); color: var(--accent); }
.theme-cyber .rail { background: rgba(4, 9, 15, .9); border-right: 1px solid var(--accent); }
.theme-cyber .railmark, .theme-cyber .helmetbtn { background: rgba(25, 240, 255, .06); border: 1px solid var(--line); border-radius: 0; }
.theme-cyber .railbtn { border-radius: 0; }
.theme-cyber .railbtn.on { background: rgba(25, 240, 255, .12); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.theme-cyber .railbtn.dl { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 14px var(--accent-glow); }
.theme-cyber .rail .seg button { border-radius: 0; }
.theme-cyber .game .at, .theme-cyber .pbspot .code { color: var(--mag); }
.theme-cyber .gamedel:hover { color: var(--mag); }

.themebtn .cyberdot { background: linear-gradient(135deg, #04090f 0 40%, #19f0ff 40% 70%, #ff3df2 70%); border-radius: 0; border: 1px solid #19f0ff; }
.themebtn .y2kdot { background: linear-gradient(135deg, #ff9ed8 0 35%, #b9a6ff 35% 70%, #8fe3ff 70%); border-radius: 50%; border: 2px solid #fff; }

/* ===== Y2K style: pastel gel and Windows 98 windows ===== */
.theme-y2k {
  color-scheme: light;
  --bg: #e6d9ff; --surface: #f6f3ff; --surface2: #dfe9ff; --line: #8a8fd8;
  --text: #20204a; --muted: #5a5f93; --accent: #7b4dff; --accent-ink: #ffffff; --accent-hi: #a98bff; --accent-lo: #6a3df0; --accent-glow: rgba(123, 77, 255, .35);
  --good: #14935a; --warn: #d6249f; --pink: #ff6fc8; --title1: #0a2a8a; --title2: #7fb0f0;
  --font: Nunito, Tahoma, Verdana, sans-serif; --font-head: Nunito, Tahoma, Verdana, sans-serif;
  --fs: 15px; --fs-small: 12px; --head-size: 30px; --upper: none;
  --radius: 6px; --radius-sm: 999px; --bw: 2px; --bc: #8a8fd8; --shadow: none; --gap: 12px;
  --bevel: #ffffff #7a7fb8 #7a7fb8 #ffffff;
  --gel: linear-gradient(180deg, #ffffff 0%, #d7e6ff 48%, #b4cdfb 52%, #e3eeff 100%);
  --gelpink: linear-gradient(180deg, #ffe3f5 0%, #ff9fdc 48%, #ff6fc8 52%, #ffb3e4 100%);
  --gelviolet: linear-gradient(180deg, #d9c8ff 0%, #9a76ff 48%, #7b4dff 52%, #a98bff 100%);
}
html:has(.theme-y2k) { background: var(--bg); }
.theme-y2k::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 10% 5%, #ffc2e8, transparent 70%), radial-gradient(55% 45% at 95% 30%, #bfe9ff, transparent 70%), radial-gradient(60% 50% at 40% 100%, #d8c8ff, transparent 70%), #f1e6ff;
}
.theme-y2k h1, .theme-y2k h2 { color: #4a2fc0; font-weight: 800; text-shadow: 2px 2px 0 #fff, 0 0 12px rgba(255, 255, 255, .8); }
.theme-y2k .eyebrow { color: var(--warn); }
.theme-y2k .only-retro { display: none !important; }
.theme-y2k :focus-visible { outline: 2px dotted #20204a; outline-offset: 2px; }

/* bevelled Win98 panels */
.theme-y2k :is(.card, .row, .game, .colorchip, .playbtn, .playopt, .unibtn, .chk, .facebtn, .btn.tile2, .btn.tile, .banner, .dropzone) {
  background: var(--surface); border: 2px solid; border-color: var(--bevel); border-radius: 4px; box-shadow: 1px 1px 0 #5a5f93, 4px 6px 14px rgba(90, 70, 160, .18);
}
.theme-y2k .row { box-shadow: 1px 1px 0 #5a5f93; }
.theme-y2k button.row:hover, .theme-y2k .btn.tile:hover { background: #fff; }

/* gel buttons */
.theme-y2k .btn { background: var(--gel); border: 1px solid #5e84d0; border-radius: 999px; color: #1a2a66; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(60, 80, 160, .25); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); font-weight: 700; }
.theme-y2k .btn:hover:not(:disabled) { filter: brightness(1.06) saturate(1.1); }
.theme-y2k .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(60, 80, 160, .35); }
.theme-y2k .btn.primary { background: var(--gelpink); border: 1px solid #c2368f; color: #5a0b3d; }
.theme-y2k .btn.ghost { background: rgba(255, 255, 255, .45); box-shadow: none; }
.theme-y2k .btn.tile, .theme-y2k .btn.tile2 { border-radius: 4px; text-shadow: none; font-weight: 600; }
.theme-y2k .btn.tile2 { background: var(--surface); color: var(--text); }
.theme-y2k .btn.tile2 .v, .theme-y2k .val { color: #3a2a9a; }
.theme-y2k .btn.tile2.on, .theme-y2k .game.bad, .theme-y2k .chk.on, .theme-y2k .facebtn.on, .theme-y2k .playopt.on, .theme-y2k .unibtn.on { border: 2px solid var(--accent); background: #fff; }
.theme-y2k .game.bad { border-color: var(--warn); }
.theme-y2k .btn.tile2.on { color: var(--accent-lo); }
.theme-y2k .tile svg { stroke: var(--accent-lo); }
.theme-y2k .chip { background: var(--gel); border: 1px solid #5e84d0; border-radius: 999px; color: #1a2a66; box-shadow: inset 0 1px 0 #fff; }
.theme-y2k .chip.on { background: var(--gelviolet); border-color: #4a2fc0; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.theme-y2k .seg { background: rgba(255, 255, 255, .6); border: 1px solid #5e84d0; }
.theme-y2k .seg button { color: #3a4380; }
.theme-y2k .seg button.on { background: var(--gelviolet); color: #fff; }
.theme-y2k .face { background: #d4dcff; border: 2px solid; border-color: #7a7fb8 #fff #fff #7a7fb8; border-radius: 4px; }
.theme-y2k .swatch { border-radius: 50%; border: 2px solid #fff; }
.theme-y2k .banner { background: #fff3c4; border-color: #fff #c9a227 #c9a227 #fff; }
.theme-y2k .row .num { color: var(--good); }
.theme-y2k .pk .big { color: var(--accent-lo); }
.theme-y2k .game .at, .theme-y2k .pbspot .code { color: var(--warn); }
.theme-y2k .gamedel { background: transparent; border: 0; box-shadow: none; text-shadow: none; }
.theme-y2k .gamedel:hover { color: var(--warn); }

/* inputs: sunken fields */
.theme-y2k :is(.field input, .field select, .search input) { background: #fff; color: #20204a; border: 2px solid; border-color: #7a7fb8 #fff #fff #7a7fb8; border-radius: 3px; font-family: Tahoma, Verdana, sans-serif; }
.theme-y2k #editor { background: #fff; color: #20204a; border: 2px solid; border-color: #7a7fb8 #fff #fff #7a7fb8; border-radius: 3px; }
.theme-y2k input[type=range]::-webkit-slider-runnable-track { background: #b9bff0; border: 1px solid #7a7fb8; }
.theme-y2k input[type=range]::-moz-range-track { background: #b9bff0; border: 1px solid #7a7fb8; }
.theme-y2k .picker2 { background: var(--surface2); }
.theme-y2k .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b4dff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-y2k select option, .theme-y2k select optgroup { background: #fff; color: #20204a; }
.theme-y2k .pickfield { color: var(--text); }

/* bars, rail, and windows with a title bar */
.theme-y2k .hdr { background: rgba(246, 240, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 #fff, 0 2px 0 #b9bff0; }
.theme-y2k .bar { background: rgba(246, 240, 255, .92); border-top: 2px solid #fff; box-shadow: 0 -2px 0 #b9bff0; }
.theme-y2k .scrim { background: rgba(80, 60, 140, .35); }
.theme-y2k .sheet { background: var(--surface); border: 2px solid; border-color: var(--bevel); border-radius: 6px; box-shadow: 1px 1px 0 #20204a, 6px 10px 28px rgba(60, 40, 130, .4); padding-top: 0; }
.theme-y2k .sheet.pop { border-radius: 6px; }
.theme-y2k .sheet > .topbar { margin: 0 -16px 10px; padding: 6px 8px 6px 14px; background: linear-gradient(90deg, var(--title1), var(--title2)); color: #fff; }
.theme-y2k .sheet > .topbar h2 { color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 20, .45); font-size: 18px; }
.theme-y2k .sheet > .topbar .btn { min-height: 28px; padding: 0 12px; border-radius: 4px; background: var(--gel); }
.theme-y2k .sheet > .topbar .icon-btn { width: 32px; padding: 0; }
.theme-y2k .sheet .btn.on, .theme-y2k .picker .btn.on { border-color: var(--accent); }
.theme-y2k .rail { background: linear-gradient(180deg, #ffc2e8, #d3c4ff 55%, #bfe9ff); border-right: 2px solid #fff; box-shadow: 2px 0 0 #b9bff0; }
.theme-y2k .railmark, .theme-y2k .helmetbtn { background: #fff; border: 2px solid; border-color: var(--bevel); border-radius: 12px; }
.theme-y2k .railbtn { color: #3a4380; border-radius: 16px; }
.theme-y2k .railbtn:hover { background: rgba(255, 255, 255, .5); }
.theme-y2k .railbtn.on { background: #fff; color: var(--accent-lo); box-shadow: 0 2px 8px rgba(90, 70, 160, .3); }
.theme-y2k .railbtn.dl { background: var(--gelpink); color: #5a0b3d; border: 1px solid #c2368f; }
.theme-y2k .rail .seg button { border-radius: 999px; }
.theme-y2k .helpbtn { border-radius: 50%; }

.theme-y2k .themebtn .y2kdot { border-color: #fff; }

/* ===== Aqua style: early-2000s Mac (pinstripes, glossy blue gel, traffic-light windows) ===== */
.theme-aqua {
  color-scheme: light;
  --bg: #ececec; --surface: #ffffff; --surface2: #eef3fa; --line: #b4b9c2;
  --text: #1c1c1e; --muted: #6a6f78; --accent: #1f7ae8; --accent-ink: #ffffff; --accent-hi: #6db4ff; --accent-lo: #1060d0; --accent-glow: rgba(31, 122, 232, .35);
  --good: #1b8a3a; --warn: #d62d20;
  --font: 'Lucida Grande', 'Lucida Sans Unicode', -apple-system, 'Segoe UI', Nunito, sans-serif; --font-head: 'Lucida Grande', -apple-system, 'Segoe UI', Nunito, sans-serif;
  --fs: 14px; --fs-small: 12px; --head-size: 26px; --upper: none;
  --radius: 10px; --radius-sm: 999px; --bw: 1px; --bc: #a0a6b0; --shadow: none; --gap: 12px;
  --aquagel: linear-gradient(180deg, #ffffff 0%, #e9eef6 49%, #d3dbe8 51%, #eef2f8 100%);
  --aquablue: linear-gradient(180deg, #a9d4ff 0%, #4a9cf2 49%, #1f7ae8 51%, #6fb4ff 100%);
  --pin: repeating-linear-gradient(180deg, #f0f0f0 0 2px, #e6e6e6 2px 4px);
}
html:has(.theme-aqua) { background: #ececec; }
.theme-aqua::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--pin); }
.theme-aqua h1, .theme-aqua h2 { color: #2a2f3a; font-weight: 700; text-shadow: 0 1px 0 #fff; text-transform: none; }
.theme-aqua .eyebrow { color: var(--accent-lo); }
.theme-aqua .only-retro { display: none !important; }
.theme-aqua :focus-visible { outline: 3px solid rgba(80, 160, 255, .65); outline-offset: 1px; }

/* white panels with a soft shadow */
.theme-aqua :is(.card, .row, .game, .colorchip, .playbtn, .playopt, .unibtn, .chk, .facebtn, .btn.tile2, .btn.tile, .banner, .dropzone) {
  background: #fff; border: 1px solid #b8bdc7; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 1px 0 #fff;
}
.theme-aqua button.row:hover, .theme-aqua .btn.tile:hover { background: #f3f8ff; }

/* aqua gel pills: glossy top half, deeper bottom half */
.theme-aqua .btn { background: var(--aquagel); border: 1px solid #8e949e; border-radius: 999px; color: #1c1c1e; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 #fff; }
.theme-aqua .btn:hover:not(:disabled) { filter: brightness(1.04); }
.theme-aqua .btn:active:not(:disabled) { filter: brightness(.95); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.theme-aqua .btn.primary { background: var(--aquablue); border: 1px solid #1b5fb8; color: #fff; text-shadow: 0 -1px 0 rgba(0, 40, 110, .55); box-shadow: 0 1px 3px rgba(0, 50, 130, .4), 0 0 10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .7); }
.theme-aqua .btn.ghost { background: rgba(255, 255, 255, .55); box-shadow: none; }
.theme-aqua .btn.tile, .theme-aqua .btn.tile2 { border-radius: 10px; background: #fff; }
.theme-aqua .tile svg { stroke: var(--accent-lo); }
.theme-aqua .btn.tile2 .v, .theme-aqua .val { color: #22304a; }
.theme-aqua .btn.tile2.on, .theme-aqua .game.bad, .theme-aqua .chk.on, .theme-aqua .facebtn.on, .theme-aqua .playopt.on, .theme-aqua .unibtn.on { border: 2px solid var(--accent); background: #f3f8ff; box-shadow: 0 0 0 3px rgba(80, 160, 255, .3); }
.theme-aqua .game.bad { border-color: var(--warn); box-shadow: none; }
.theme-aqua .btn.tile2.on { color: var(--accent-lo); }
.theme-aqua .chip { background: var(--aquagel); border: 1px solid #8e949e; border-radius: 999px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .2); }
.theme-aqua .chip.on { background: var(--aquablue); border-color: #1b5fb8; color: #fff; text-shadow: 0 -1px 0 rgba(0, 40, 110, .5); }
.theme-aqua .seg { background: var(--aquagel); border: 1px solid #8e949e; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15); }
.theme-aqua .seg button { color: #3a3f48; }
.theme-aqua .seg button.on { background: var(--aquablue); color: #fff; text-shadow: 0 -1px 0 rgba(0, 40, 110, .5); }
.theme-aqua .face { background: #dde6f3; border: 1px solid #b8bdc7; border-radius: 8px; }
.theme-aqua .swatch { border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px #8e949e; }
.theme-aqua .banner { background: #fff6cf; border-color: #d6bd5a; }
.theme-aqua .row .num { color: var(--good); }
.theme-aqua .pk .big { color: var(--accent-lo); }
.theme-aqua .game .at, .theme-aqua .pbspot .code { color: var(--accent-lo); }
.theme-aqua .gamedel { background: transparent; border: 0; box-shadow: none; }
.theme-aqua .gamedel:hover { color: var(--warn); }

/* inputs: inset rounded fields */
.theme-aqua :is(.field input, .field select, .search input) { background: #fff; color: #1c1c1e; border: 1px solid #8e949e; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22); }
.theme-aqua #editor { background: #fff; color: #1c1c1e; border: 1px solid #8e949e; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }
.theme-aqua input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(180deg, #b8bec8, #e4e8ee); border: 1px solid #8e949e; height: 6px; }
.theme-aqua input[type=range]::-moz-range-track { background: linear-gradient(180deg, #b8bec8, #e4e8ee); border: 1px solid #8e949e; height: 6px; }
.theme-aqua .picker2 { background: var(--surface2); }
.theme-aqua .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231060d0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-aqua select option, .theme-aqua select optgroup { background: #fff; color: #1c1c1e; }
.theme-aqua .pickfield { color: var(--text); }

/* bars, rail, and windows with a brushed title bar and traffic lights */
.theme-aqua .hdr { background: linear-gradient(180deg, #f8f8f8, #dcdcdc); box-shadow: 0 1px 0 #9a9fa8; }
.theme-aqua .bar { background: linear-gradient(180deg, #f8f8f8, #dcdcdc); border-top: 1px solid #9a9fa8; }
.theme-aqua .scrim { background: rgba(60, 70, 90, .35); }
.theme-aqua .sheet { background: #f6f6f6; border: 1px solid #7d828c; border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); padding-top: 0; }
.theme-aqua .sheet.pop { border-radius: 10px; }
.theme-aqua .sheet > .topbar { margin: 0 -16px 10px; padding: 7px 10px 7px 14px; background: linear-gradient(180deg, #ededed, #c9c9c9); border-bottom: 1px solid #8e949e; border-radius: 9px 9px 0 0; }
.theme-aqua .sheet > .topbar h2 { color: #2a2f3a; font-size: 15px; }
.theme-aqua .sheet > .topbar .btn { min-height: 28px; padding: 0 12px; }
.theme-aqua .sheet > .topbar .icon-btn { width: 28px; min-height: 28px; padding: 0; border-radius: 50%; border: 1px solid #a8261a; background: radial-gradient(circle at 50% 30%, #ff9a8e, #e8392a 60%, #c4281c); color: #5a0f08; font-size: 16px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.theme-aqua .sheet .btn.on, .theme-aqua .picker .btn.on { border-color: var(--accent); }
.theme-aqua .rail { background: linear-gradient(90deg, #dfe3ea, #cfd4dc); border-right: 1px solid #8e949e; }
.theme-aqua .railmark, .theme-aqua .helmetbtn { background: #fff; border: 1px solid #b8bdc7; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.theme-aqua .railbtn { color: #3a3f48; border-radius: 12px; }
.theme-aqua .railbtn:hover { background: rgba(255, 255, 255, .55); }
.theme-aqua .railbtn.on { background: var(--aquablue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 50, 130, .4); }
.theme-aqua .railbtn.dl { background: var(--aquablue); color: #fff; border: 1px solid #1b5fb8; text-shadow: 0 -1px 0 rgba(0, 40, 110, .5); }
.theme-aqua .rail .seg button { border-radius: 999px; }
.theme-aqua .helpbtn { border-radius: 50%; }

.themebtn .aquadot { background: linear-gradient(180deg, #a9d4ff 0 48%, #1f7ae8 52%); border-radius: 50%; border: 1px solid #1b5fb8; }

/* ===== Windows XP style: Luna ===== */
.theme-xp {
  color-scheme: light;
  --bg: #5a8fe0; --surface: #ece9d8; --surface2: #f5f4ea; --line: #aca899;
  --text: #000000; --muted: #4a4a52; --accent: #316ac5; --accent-ink: #ffffff; --accent-hi: #5a8fe0; --accent-lo: #245edb; --accent-glow: rgba(49, 106, 197, .35);
  --good: #137a1f; --warn: #cc2a1a; --lunablue: #0a58d6; --lunalight: #3d95ff;
  --font: Tahoma, 'Segoe UI', Verdana, Nunito, sans-serif; --font-head: 'Trebuchet MS', Tahoma, 'Segoe UI', sans-serif;
  --fs: 14px; --fs-small: 12px; --head-size: 26px; --upper: none;
  --radius: 4px; --radius-sm: 3px; --bw: 1px; --bc: #003c74; --shadow: none; --gap: 12px;
  --xpbtn: linear-gradient(180deg, #ffffff 0%, #f3f2ea 55%, #dcd8c8 92%, #cdc8b4 100%);
  --xpgreen: linear-gradient(180deg, #6fd96f 0%, #3dae3d 50%, #2c8f2c 100%);
  --xptitle: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
}
html:has(.theme-xp) { background: #5a8fe0; }
.theme-xp::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 55% at 20% 108%, #5fb23a 0 45%, transparent 46%), radial-gradient(110% 50% at 90% 112%, #3f9a2a 0 45%, transparent 46%), linear-gradient(180deg, #2a6fd8 0%, #6aa6ec 55%, #bcd8f6 100%); }
.theme-xp h1, .theme-xp h2 { color: #fff; font-weight: 700; text-shadow: 1px 1px 2px #0a2a6a; }
.theme-xp .sheet h2, .theme-xp .card h2 { color: #0a2a8a; text-shadow: none; }
.theme-xp .eyebrow { color: var(--accent-lo); }
.theme-xp .only-retro { display: none !important; }
.theme-xp .muted { color: #4a4a52; }
.theme-xp :focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

/* beige windows */
.theme-xp :is(.card, .row, .game, .colorchip, .playbtn, .playopt, .unibtn, .chk, .facebtn, .btn.tile2, .btn.tile, .banner, .dropzone) {
  background: var(--surface); border: 1px solid #7f9db9; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0, 20, 80, .35);
}
.theme-xp .card { border: 3px solid #0a58d6; border-top-width: 3px; padding: 14px; background: var(--surface); }
.theme-xp button.row:hover, .theme-xp .btn.tile:hover { background: #fff8e0; border-color: #e5a62d; }

/* XP push buttons: cream gradient, navy edge, orange glow on hover */
.theme-xp .btn { background: var(--xpbtn); border: 1px solid #003c74; border-radius: 3px; color: #000; font-weight: 400; box-shadow: inset 0 0 0 1px #fff; }
.theme-xp .btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #f8b636; }
.theme-xp .btn:active:not(:disabled) { background: linear-gradient(180deg, #cdc8b4, #e3e0d0); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35); }
.theme-xp .btn.primary { background: var(--xpgreen); border-color: #1d6a1d; color: #fff; font-weight: 700; text-shadow: 1px 1px 1px rgba(0, 50, 0, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.theme-xp .btn.ghost { background: rgba(236, 233, 216, .88); box-shadow: none; border-color: #7f9db9; }
.theme-xp .btn.tile, .theme-xp .btn.tile2 { background: var(--surface); box-shadow: 1px 1px 3px rgba(0, 20, 80, .35); border-color: #7f9db9; }
.theme-xp .tile svg { stroke: var(--accent-lo); }
.theme-xp .btn.tile2 .v, .theme-xp .val { color: #0a2a8a; }
.theme-xp .btn.tile2.on, .theme-xp .game.bad, .theme-xp .chk.on, .theme-xp .facebtn.on, .theme-xp .playopt.on, .theme-xp .unibtn.on { border: 2px solid #316ac5; background: #fff; }
.theme-xp .game.bad { border-color: var(--warn); }
.theme-xp .btn.tile2.on { color: var(--accent-lo); }
.theme-xp .chip { background: var(--xpbtn); border: 1px solid #003c74; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff; }
.theme-xp .chip.on { background: #316ac5; border-color: #1c3f8a; color: #fff; box-shadow: none; }
.theme-xp .seg { background: #fff; border: 1px solid #7f9db9; border-radius: 3px; padding: 2px; }
.theme-xp .seg button { border-radius: 2px; color: #000; }
.theme-xp .seg button.on { background: #316ac5; color: #fff; }
.theme-xp .face { background: #cfd8ee; border: 1px solid #7f9db9; border-radius: 3px; }
.theme-xp .swatch { border-radius: 2px; border: 1px solid #003c74; }
.theme-xp .banner { background: #ffffe1; border-color: #000; }
.theme-xp .row .num { color: var(--good); }
.theme-xp .pk .big { color: var(--accent-lo); }
.theme-xp .game .at, .theme-xp .pbspot .code { color: var(--accent-lo); }
.theme-xp .gamedel { background: transparent; border: 0; box-shadow: none; }
.theme-xp .gamedel:hover { color: var(--warn); }

/* inputs: white, 1px blue-gray frame */
.theme-xp :is(.field input, .field select, .search input) { background: #fff; color: #000; border: 1px solid #7f9db9; border-radius: 0; box-shadow: none; }
.theme-xp #editor { background: #fff; color: #000; border: 1px solid #7f9db9; border-radius: 0; }
.theme-xp input[type=range]::-webkit-slider-runnable-track { background: #fff; border: 1px solid #7f9db9; height: 4px; }
.theme-xp input[type=range]::-moz-range-track { background: #fff; border: 1px solid #7f9db9; height: 4px; }
.theme-xp .picker2 { background: var(--surface2); }
.theme-xp .field select { background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245edb' stroke-width='3' stroke-linecap='square'><path d='m6 9 6 6 6-6'/></svg>"); }
.theme-xp select option, .theme-xp select optgroup { background: #fff; color: #000; }
.theme-xp .pickfield { color: #000; }

/* Luna title bars; taskbar-blue bottom bar; task-pane rail */
.theme-xp .hdr { background: var(--xptitle); box-shadow: 0 1px 0 #002a9a; }
.theme-xp .hdr :is(.muted, .eyebrow) { color: #dbe8ff; }
.theme-xp .bar { background: linear-gradient(180deg, #245edb 0%, #3f8cf3 9%, #245edb 20%, #245edb 85%, #1941a5 100%); border-top: 1px solid #0a2a8a; }
.theme-xp .scrim { background: rgba(0, 20, 80, .35); }
.theme-xp .sheet { background: var(--surface); border: 3px solid #0a58d6; border-radius: 8px 8px 0 0; box-shadow: 0 10px 30px rgba(0, 0, 40, .5); padding-top: 0; }
.theme-xp .sheet.pop { border-radius: 8px 8px 0 0; }
.theme-xp .sheet > .topbar { margin: 0 -16px 10px; padding: 5px 6px 5px 12px; background: var(--xptitle); border-radius: 5px 5px 0 0; }
.theme-xp .sheet > .topbar h2 { color: #fff; font-size: 15px; text-shadow: 1px 1px 0 #0a2a6a; }
.theme-xp .sheet > .topbar .btn { min-height: 26px; padding: 0 10px; }
.theme-xp .sheet > .topbar .icon-btn { width: 28px; min-height: 26px; padding: 0; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(180deg, #e8805e, #d2451f 60%, #b8330f); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: none; }
.theme-xp .sheet .btn.on, .theme-xp .picker .btn.on { border-color: #316ac5; }
.theme-xp .rail { background: linear-gradient(180deg, #7ba2e7, #6375d6); border-right: 2px solid #0a2a8a; }
.theme-xp .railmark, .theme-xp .helmetbtn { background: #fff; border: 1px solid #003c74; border-radius: 4px; }
.theme-xp .railbtn { color: #fff; border-radius: 4px; text-shadow: 1px 1px 0 rgba(0, 20, 90, .6); }
.theme-xp .railbtn:hover { background: rgba(255, 255, 255, .2); }
.theme-xp .railbtn.on { background: #ece9d8; color: #0a2a8a; text-shadow: none; border: 1px solid #fff; }
.theme-xp .railbtn.dl { background: var(--xpgreen); color: #fff; border: 1px solid #1d6a1d; }
.theme-xp .rail .seg button { border-radius: 2px; }
.theme-xp .helpbtn { border-radius: 3px; }

.themebtn .xpdot { background: linear-gradient(180deg, #0a58d6 0 45%, #4cb94a 45%); border-radius: 3px; border: 1px solid #fff; }

/* Aqua scrollbars: glossy blue thumb in a pale groove (Firefox gets the colors only) */
html:has(.theme-aqua)::-webkit-scrollbar, .theme-aqua *:not(.chips)::-webkit-scrollbar { width: 15px; height: 15px; background: #eceef2; }
html:has(.theme-aqua)::-webkit-scrollbar-track, .theme-aqua *:not(.chips)::-webkit-scrollbar-track { background: linear-gradient(90deg, #d9dce2, #f6f7f9 60%, #eceef2); border-left: 1px solid #c4c8d0; }
html:has(.theme-aqua)::-webkit-scrollbar-track:horizontal, .theme-aqua *:not(.chips)::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #d9dce2, #f6f7f9 60%, #eceef2); border-left: 0; border-top: 1px solid #c4c8d0; }
html:has(.theme-aqua)::-webkit-scrollbar-thumb, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; border: 1px solid #1b5fb8; border-radius: 8px; background: linear-gradient(90deg, #a9d4ff 0%, #4a9cf2 49%, #1f7ae8 51%, #6fb4ff 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
html:has(.theme-aqua)::-webkit-scrollbar-thumb:horizontal, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #a9d4ff 0%, #4a9cf2 49%, #1f7ae8 51%, #6fb4ff 100%); }
html:has(.theme-aqua)::-webkit-scrollbar-corner, .theme-aqua *::-webkit-scrollbar-corner { background: #eceef2; }

/* Scrollbars follow the style (Aqua is above) */
html:has(.theme-modern)::-webkit-scrollbar, .theme-modern *:not(.chips)::-webkit-scrollbar { width: 12px; height: 12px; background: rgba(255,255,255,.05); }
html:has(.theme-modern)::-webkit-scrollbar-track, .theme-modern *:not(.chips)::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-left: 1px solid transparent; }
html:has(.theme-modern)::-webkit-scrollbar-track:horizontal, .theme-modern *:not(.chips)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid transparent; }
html:has(.theme-modern)::-webkit-scrollbar-thumb, .theme-modern *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
html:has(.theme-modern)::-webkit-scrollbar-thumb:horizontal, .theme-modern *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: rgba(255,255,255,.28); }
html:has(.theme-modern)::-webkit-scrollbar-corner, .theme-modern *::-webkit-scrollbar-corner { background: transparent; }
html:has(.theme-retro)::-webkit-scrollbar, .theme-retro *:not(.chips)::-webkit-scrollbar { width: 16px; height: 16px; background: #000; }
html:has(.theme-retro)::-webkit-scrollbar-track, .theme-retro *:not(.chips)::-webkit-scrollbar-track { background: #000; border-left: 1px solid #fff; }
html:has(.theme-retro)::-webkit-scrollbar-track:horizontal, .theme-retro *:not(.chips)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #fff; }
html:has(.theme-retro)::-webkit-scrollbar-thumb, .theme-retro *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; background: #fcd835; border: 3px solid #fff; border-radius: 0; }
html:has(.theme-retro)::-webkit-scrollbar-thumb:horizontal, .theme-retro *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: #fcd835; }
html:has(.theme-retro)::-webkit-scrollbar-corner, .theme-retro *::-webkit-scrollbar-corner { background: #fff; }
html:has(.theme-cyber)::-webkit-scrollbar, .theme-cyber *:not(.chips)::-webkit-scrollbar { width: 12px; height: 12px; background: #04121b; }
html:has(.theme-cyber)::-webkit-scrollbar-track, .theme-cyber *:not(.chips)::-webkit-scrollbar-track { background: #04121b; border-left: 1px solid #0f5f73; }
html:has(.theme-cyber)::-webkit-scrollbar-track:horizontal, .theme-cyber *:not(.chips)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #0f5f73; }
html:has(.theme-cyber)::-webkit-scrollbar-thumb, .theme-cyber *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; background: #19f0ff; border: 1px solid #04121b; border-radius: 0; }
html:has(.theme-cyber)::-webkit-scrollbar-thumb:horizontal, .theme-cyber *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: #19f0ff; }
html:has(.theme-cyber)::-webkit-scrollbar-corner, .theme-cyber *::-webkit-scrollbar-corner { background: #0f5f73; }
html:has(.theme-y2k)::-webkit-scrollbar, .theme-y2k *:not(.chips)::-webkit-scrollbar { width: 15px; height: 15px; background: linear-gradient(90deg,#e8defc,#f8f4ff); }
html:has(.theme-y2k)::-webkit-scrollbar-track, .theme-y2k *:not(.chips)::-webkit-scrollbar-track { background: linear-gradient(90deg,#e8defc,#f8f4ff); border-left: 1px solid #b9bff0; }
html:has(.theme-y2k)::-webkit-scrollbar-track:horizontal, .theme-y2k *:not(.chips)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #b9bff0; }
html:has(.theme-y2k)::-webkit-scrollbar-thumb, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; background: linear-gradient(90deg,#ffe3f5 0%,#ff9fdc 48%,#ff6fc8 52%,#ffb3e4 100%); border: 1px solid #c2368f; border-radius: 999px; }
html:has(.theme-y2k)::-webkit-scrollbar-thumb:horizontal, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg,#ffe3f5 0%,#ff9fdc 48%,#ff6fc8 52%,#ffb3e4 100%); }
html:has(.theme-y2k)::-webkit-scrollbar-corner, .theme-y2k *::-webkit-scrollbar-corner { background: #b9bff0; }
html:has(.theme-xp)::-webkit-scrollbar, .theme-xp *:not(.chips)::-webkit-scrollbar { width: 17px; height: 17px; background: linear-gradient(90deg,#f3f1e8,#fefefa 50%,#f3f1e8); }
html:has(.theme-xp)::-webkit-scrollbar-track, .theme-xp *:not(.chips)::-webkit-scrollbar-track { background: linear-gradient(90deg,#f3f1e8,#fefefa 50%,#f3f1e8); border-left: 1px solid #d9d6c4; }
html:has(.theme-xp)::-webkit-scrollbar-track:horizontal, .theme-xp *:not(.chips)::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #d9d6c4; }
html:has(.theme-xp)::-webkit-scrollbar-thumb, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb { min-height: 36px; min-width: 36px; background: linear-gradient(90deg,#c1d3fb 0%,#8fb1f7 45%,#7aa0f0 55%,#a9c5fa 100%); border: 1px solid #5a7fd0; border-radius: 3px; }
html:has(.theme-xp)::-webkit-scrollbar-thumb:horizontal, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg,#c1d3fb 0%,#8fb1f7 45%,#7aa0f0 55%,#a9c5fa 100%); }
html:has(.theme-xp)::-webkit-scrollbar-corner, .theme-xp *::-webkit-scrollbar-corner { background: #d9d6c4; }

/* Glossy scrollbars: grip ridges, arrow buttons, hover and drag shades */
html:has(.theme-aqua)::-webkit-scrollbar-thumb:vertical, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb:vertical { background: repeating-linear-gradient(180deg, rgba(0,40,110,.5) 0 1px, rgba(255,255,255,.65) 1px 2px) center / 7px 9px no-repeat, linear-gradient(90deg,#a9d4ff 0%,#4a9cf2 49%,#1f7ae8 51%,#6fb4ff 100%); border: 1px solid #1b5fb8; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
html:has(.theme-aqua)::-webkit-scrollbar-thumb:horizontal, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: repeating-linear-gradient(90deg, rgba(0,40,110,.5) 0 1px, rgba(255,255,255,.65) 1px 2px) center / 9px 7px no-repeat, linear-gradient(180deg,#a9d4ff 0%,#4a9cf2 49%,#1f7ae8 51%,#6fb4ff 100%); border: 1px solid #1b5fb8; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
html:has(.theme-aqua)::-webkit-scrollbar-thumb:hover, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb:hover { filter: brightness(1.08) saturate(1.1); }
html:has(.theme-aqua)::-webkit-scrollbar-thumb:active, .theme-aqua *:not(.chips)::-webkit-scrollbar-thumb:active { filter: brightness(.9); }
html:has(.theme-aqua)::-webkit-scrollbar-button:single-button, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:single-button { display: block; width: 15px; height: 15px; border: 1px solid #a4aab6; border-radius: 8px; background-repeat: no-repeat; background-position: center; }
html:has(.theme-aqua)::-webkit-scrollbar-button:vertical:decrement, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 2 8 7H1z' fill='%231060d0'/></svg>"), linear-gradient(90deg,#f4f6fa,#d9dee8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-aqua)::-webkit-scrollbar-button:vertical:increment, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 7 1 2h7z' fill='%231060d0'/></svg>"), linear-gradient(90deg,#f4f6fa,#d9dee8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-aqua)::-webkit-scrollbar-button:horizontal:decrement, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M2 4.5 7 1v7z' fill='%231060d0'/></svg>"), linear-gradient(180deg,#f4f6fa,#d9dee8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-aqua)::-webkit-scrollbar-button:horizontal:increment, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M7 4.5 2 1v7z' fill='%231060d0'/></svg>"), linear-gradient(180deg,#f4f6fa,#d9dee8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-aqua)::-webkit-scrollbar-button:single-button:hover, .theme-aqua *:not(.chips)::-webkit-scrollbar-button:single-button:hover { filter: brightness(1.06); }
html:has(.theme-y2k)::-webkit-scrollbar-thumb:vertical, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb:vertical { background: linear-gradient(90deg,#ffe3f5 0%,#ff9fdc 48%,#ff6fc8 52%,#ffb3e4 100%); border: 1px solid #c2368f; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 2px 0 rgba(255,255,255,.7); }
html:has(.theme-y2k)::-webkit-scrollbar-thumb:horizontal, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg,#ffe3f5 0%,#ff9fdc 48%,#ff6fc8 52%,#ffb3e4 100%); border: 1px solid #c2368f; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 2px 0 rgba(255,255,255,.7); }
html:has(.theme-y2k)::-webkit-scrollbar-thumb:hover, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb:hover { filter: brightness(1.08) saturate(1.1); }
html:has(.theme-y2k)::-webkit-scrollbar-thumb:active, .theme-y2k *:not(.chips)::-webkit-scrollbar-thumb:active { filter: brightness(.9); }
html:has(.theme-y2k)::-webkit-scrollbar-button:single-button, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:single-button { display: block; width: 15px; height: 15px; border: 1px solid #5e84d0; border-radius: 50%; background-repeat: no-repeat; background-position: center; }
html:has(.theme-y2k)::-webkit-scrollbar-button:vertical:decrement, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 2 8 7H1z' fill='%23c2368f'/></svg>"), linear-gradient(90deg,#fff,#d7e6ff); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-y2k)::-webkit-scrollbar-button:vertical:increment, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 7 1 2h7z' fill='%23c2368f'/></svg>"), linear-gradient(90deg,#fff,#d7e6ff); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-y2k)::-webkit-scrollbar-button:horizontal:decrement, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M2 4.5 7 1v7z' fill='%23c2368f'/></svg>"), linear-gradient(180deg,#fff,#d7e6ff); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-y2k)::-webkit-scrollbar-button:horizontal:increment, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M7 4.5 2 1v7z' fill='%23c2368f'/></svg>"), linear-gradient(180deg,#fff,#d7e6ff); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-y2k)::-webkit-scrollbar-button:single-button:hover, .theme-y2k *:not(.chips)::-webkit-scrollbar-button:single-button:hover { filter: brightness(1.06); }
html:has(.theme-xp)::-webkit-scrollbar-thumb:vertical, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb:vertical { background: repeating-linear-gradient(180deg, rgba(40,70,160,.55) 0 1px, rgba(255,255,255,.8) 1px 2px) center / 7px 9px no-repeat, linear-gradient(90deg,#c9d9fc 0%,#93b4f8 45%,#7aa0f0 55%,#b4cbfb 100%); border: 1px solid #5a7fd0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
html:has(.theme-xp)::-webkit-scrollbar-thumb:horizontal, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb:horizontal { background: repeating-linear-gradient(90deg, rgba(40,70,160,.55) 0 1px, rgba(255,255,255,.8) 1px 2px) center / 9px 7px no-repeat, linear-gradient(180deg,#c9d9fc 0%,#93b4f8 45%,#7aa0f0 55%,#b4cbfb 100%); border: 1px solid #5a7fd0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
html:has(.theme-xp)::-webkit-scrollbar-thumb:hover, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb:hover { filter: brightness(1.08) saturate(1.1); }
html:has(.theme-xp)::-webkit-scrollbar-thumb:active, .theme-xp *:not(.chips)::-webkit-scrollbar-thumb:active { filter: brightness(.9); }
html:has(.theme-xp)::-webkit-scrollbar-button:single-button, .theme-xp *:not(.chips)::-webkit-scrollbar-button:single-button { display: block; width: 17px; height: 17px; border: 1px solid #5a7fd0; border-radius: 3px; background-repeat: no-repeat; background-position: center; }
html:has(.theme-xp)::-webkit-scrollbar-button:vertical:decrement, .theme-xp *:not(.chips)::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 2 8 7H1z' fill='%23233a8a'/></svg>"), linear-gradient(90deg,#d6e2fd,#a9c3f8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-xp)::-webkit-scrollbar-button:vertical:increment, .theme-xp *:not(.chips)::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 7 1 2h7z' fill='%23233a8a'/></svg>"), linear-gradient(90deg,#d6e2fd,#a9c3f8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-xp)::-webkit-scrollbar-button:horizontal:decrement, .theme-xp *:not(.chips)::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M2 4.5 7 1v7z' fill='%23233a8a'/></svg>"), linear-gradient(180deg,#d6e2fd,#a9c3f8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-xp)::-webkit-scrollbar-button:horizontal:increment, .theme-xp *:not(.chips)::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M7 4.5 2 1v7z' fill='%23233a8a'/></svg>"), linear-gradient(180deg,#d6e2fd,#a9c3f8); background-size: 9px 9px, auto; background-repeat: no-repeat, no-repeat; background-position: center, center; }
html:has(.theme-xp)::-webkit-scrollbar-button:single-button:hover, .theme-xp *:not(.chips)::-webkit-scrollbar-button:single-button:hover { filter: brightness(1.06); }
html:has(.theme-cyber)::-webkit-scrollbar-thumb, .theme-cyber *:not(.chips)::-webkit-scrollbar-thumb { box-shadow: 0 0 6px rgba(25,240,255,.7); }
html:has(.theme-cyber)::-webkit-scrollbar-thumb:hover, .theme-cyber *:not(.chips)::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 12px #19f0ff; filter: brightness(1.15); }
html:has(.theme-cyber)::-webkit-scrollbar-thumb:active, .theme-cyber *:not(.chips)::-webkit-scrollbar-thumb:active { background: #ff3df2; border-color: #04121b; box-shadow: 0 0 12px #ff3df2; }
html:has(.theme-modern)::-webkit-scrollbar-thumb:hover, .theme-modern *:not(.chips)::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); }
html:has(.theme-modern)::-webkit-scrollbar-thumb:active, .theme-modern *:not(.chips)::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,.6); }

/* Firefox has only flat scrollbar colors. Chrome, Edge and Safari must not get them: scrollbar-color switches off the ::-webkit-scrollbar styling above. */
@supports not selector(::-webkit-scrollbar) {
  html:has(.theme-aqua), .theme-aqua * { scrollbar-color: #3d8def #eceef2; }
  html:has(.theme-modern), .theme-modern * { scrollbar-color: rgba(255, 255, 255, .35) rgba(255, 255, 255, .05); }
  html:has(.theme-retro), .theme-retro * { scrollbar-color: #fcd835 #000; }
  html:has(.theme-cyber), .theme-cyber * { scrollbar-color: #19f0ff #04121b; }
  html:has(.theme-y2k), .theme-y2k * { scrollbar-color: #ff6fc8 #efe6ff; }
  html:has(.theme-xp), .theme-xp * { scrollbar-color: #8fb1f7 #f3f1e8; }
}

.stylelist { display: grid; gap: 8px; margin-top: 12px; }
.stylelist .themebtn { width: 100%; }
.rail .stylebtn { width: 88px; }
.themebtn .moderndot { background: linear-gradient(135deg, #0b1220 0 40%, #a78bfa 40% 70%, #3dd6c6 70%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }

.guidebody .shots { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.guidebody figure { margin: 0; width: min(100%, 220px); }
.guidebody figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border, rgba(128, 128, 128, .35)); }
.guidebody figcaption { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); text-align: center; }