*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0ede6;--fg:#0a0a0a;--grey:#999;--light:#e6e3db;
  --mono:'Share Tech Mono',monospace;--display:'Bebas Neue',sans-serif;
  --b:2px solid #0a0a0a;
  --dot-color:#00000009;--card-hover:#e6e3db;
  --border-light:#ccc;--accent:#f5c800;
}
[data-theme="dark"]{
  --bg:#0e0e0e;--fg:#e8e4dc;--grey:#666;--light:#1a1a1a;
  --b:2px solid #e8e4dc;
  --dot-color:#ffffff06;--card-hover:#1a1a1a;
  --border-light:#333;--accent:#f5c800;
}
[data-theme="dark"] body::before{
  background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1px)}
[data-theme="dark"] .ticker{background:#e8e4dc;border-bottom-color:#e8e4dc}
[data-theme="dark"] .ticker-inner{color:#0e0e0e}
[data-theme="dark"] .tick-dot{color:#666}
[data-theme="dark"] nav a,[data-theme="dark"] nav button{border-right-color:#333}
[data-theme="dark"] .nav-admin{border-left-color:#333!important}
[data-theme="dark"] .filter-label{background:var(--light)}
[data-theme="dark"] .ftag{border-right-color:#333}
[data-theme="dark"] .count-bar{background:var(--light);border-bottom-color:#333}
[data-theme="dark"] .chrome{background:var(--light);border-bottom-color:#333}
[data-theme="dark"] .tag{border-color:#444;color:var(--grey)}
[data-theme="dark"] .card:hover .tag,[data-theme="dark"] .card.open .tag{border-color:var(--fg);color:var(--fg)}
[data-theme="dark"] .card-action{border-top-color:#333}
[data-theme="dark"] .set-row{border-bottom-color:#333}
[data-theme="dark"] .stag{border-color:#444}
[data-theme="dark"] footer{background:var(--light)}
[data-theme="dark"] .login-chrome{background:var(--light)}
[data-theme="dark"] .admin-panel-head{background:var(--light)}
[data-theme="dark"] .admin-form-panel{background:var(--light)}
[data-theme="dark"] .form-chrome{background:#151515}
[data-theme="dark"] .genre-chip{background:var(--light);border-color:#444}
[data-theme="dark"] .tags-wrap{background:var(--light);border-color:#444}
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=url],[data-theme="dark"] input[type=password],
[data-theme="dark"] textarea.field-input,[data-theme="dark"] .field-input{
  background:var(--light);border-color:#444;color:var(--fg)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#555}
[data-theme="dark"] input:focus,[data-theme="dark"] textarea:focus{box-shadow:3px 3px 0 var(--fg)}

/* theme toggle */
.theme-toggle{background:none;border:none;border-left:1px solid #ccc;color:#f5c800;
  padding:0 .9rem;display:flex;align-items:center;cursor:pointer;font-size:.95rem;
  transition:color .15s,background .15s;font-family:var(--mono);flex-shrink:0}
.theme-toggle:hover{background:#f5c800;color:var(--fg)}
[data-theme="dark"] .theme-toggle{border-left-color:#333;color:#f5c800}
[data-theme="dark"] .theme-toggle:hover{background:#f5c800;color:#0e0e0e}
html{font-size:14px}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);min-height:100vh}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,var(--dot-color) 1px,transparent 1px);background-size:6px 6px}

/* ── VIEWS ── */
#view-main,#view-admin,#view-login,#view-info,#view-artists{position:relative;z-index:1}
.hidden{display:none!important}

/* ══════════════════════════════
   MAIN SITE
══════════════════════════════ */

/* HEADER */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:var(--b);
  display:flex;align-items:stretch;height:48px}
.logo{font-family:var(--display);font-size:1.7rem;letter-spacing:.04em;text-decoration:none;
  color:var(--bg);background:var(--fg);padding:0 1.25rem;display:flex;align-items:center;
  flex-shrink:0;line-height:1;border-right:var(--b);cursor:pointer}
.logo em{color:#f5c800;font-style:normal}
nav{display:flex;align-items:stretch;flex:1}
nav a,nav button{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  text-decoration:none;padding:0 1.1rem;border-right:1px solid #ccc;
  display:flex;align-items:center;transition:background .1s,color .1s;
  background:none;border-top:none;border-bottom:none;border-left:none;
  font-family:var(--mono);cursor:pointer}
nav a:hover,nav a.active,nav button:hover{background:var(--fg);color:var(--bg)}
.nav-admin{margin-left:auto;border-right:none!important;border-left:1px solid #ccc}

/* TICKER */
.ticker{height:30px;overflow:hidden;display:flex;align-items:center;
  background:var(--fg);border-bottom:var(--b)}
.ticker-inner{display:flex;gap:2.5rem;white-space:nowrap;font-size:.62rem;
  letter-spacing:.1em;color:var(--bg);animation:tick 35s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick-dot{color:#555}

/* FILTER BAR */
.filter-bar{display:flex;align-items:stretch;border-bottom:var(--b);flex-wrap:wrap}
.filter-label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  padding:0 1rem;border-right:1px solid #ccc;display:flex;align-items:center;
  background:var(--light);white-space:nowrap}
.ftag{background:none;border:none;border-right:1px solid #ccc;color:var(--grey);
  padding:0 1rem;height:36px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:background .1s,color .1s}
.ftag:hover,.ftag.active{background:var(--fg);color:var(--bg)}

/* COUNT BAR */
.count-bar{padding:.6rem 1.5rem;border-bottom:1px solid #ccc;
  display:flex;align-items:center;justify-content:space-between;background:var(--light)}
.count-label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));border-left:var(--b)}

/* CARD */
.card{border-right:var(--b);border-bottom:var(--b);background:var(--bg);overflow:hidden;transition:background .08s}
.card:hover{background:var(--light)}
.chrome{display:flex;align-items:center;gap:.6rem;padding:.4rem .75rem;
  border-bottom:1px solid #ccc;background:var(--light)}
.dots{display:flex;gap:.3rem}
.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--fg);background:var(--bg)}
.card.open .dot:first-child{background:var(--fg)}
.chrome-url{flex:1;font-size:.56rem;letter-spacing:.04em;color:var(--grey);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrome-date{font-size:.54rem;color:var(--grey);flex-shrink:0}
.card-body{display:flex;align-items:stretch;cursor:pointer}
.stripe{width:4px;flex-shrink:0;transition:width .15s}
.card:hover .stripe,.card.open .stripe{width:6px}
.card-content{flex:1;padding:.85rem 1rem;min-width:0}
.tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.45rem}
.tag{font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid #ccc;color:var(--grey);padding:.08rem .35rem}
.card.open .tag,.card:hover .tag{border-color:var(--fg);color:var(--fg)}
.title{font-family:var(--display);font-size:1.5rem;letter-spacing:.02em;line-height:1.05;margin-bottom:.15rem}
.artist{font-size:.63rem;letter-spacing:.06em;color:var(--grey)}
.waveform{display:none;align-items:flex-end;gap:2px;height:12px;margin-top:.4rem}
.card.open .waveform{display:flex}
.wb{width:3px;background:var(--fg);animation:wv .65s ease-in-out infinite alternate}
.wb:nth-child(1){height:4px;animation-delay:0s}.wb:nth-child(2){height:10px;animation-delay:.1s}
.wb:nth-child(3){height:6px;animation-delay:.2s}.wb:nth-child(4){height:12px;animation-delay:.05s}
.wb:nth-child(5){height:8px;animation-delay:.15s}
@keyframes wv{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.card-side{padding:.85rem .9rem;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:space-between;flex-shrink:0;gap:.4rem}
.play-btn{width:32px;height:32px;border:var(--b);display:flex;align-items:center;
  justify-content:center;font-size:.6rem;cursor:pointer;background:none;transition:background .1s}
.card:hover .play-btn,.card.open .play-btn{background:var(--fg);color:var(--bg)}
.dur{font-size:.58rem;color:var(--grey)}
.card-action{border-top:1px solid #ccc;padding:.5rem .75rem;
  display:flex;align-items:center;justify-content:space-between}
.play-link{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  cursor:pointer;display:flex;align-items:center;gap:.35rem;
  transition:color .1s;background:none;border:none;font-family:var(--mono)}
.play-link:hover,.card.open .play-link{color:var(--fg)}
.share-link{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  cursor:pointer;display:flex;align-items:center;gap:.35rem;
  transition:color .1s;background:none;border:none;font-family:var(--mono);position:relative}
.share-link:hover{color:var(--fg)}
.share-copied{position:absolute;top:-1.6rem;right:0;background:var(--fg);color:var(--bg);
  font-size:.5rem;letter-spacing:.1em;padding:.15rem .4rem;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:all .2s;pointer-events:none}
.share-copied.show{opacity:1;transform:translateY(0)}
.card-player{display:none;border-top:var(--b)}
.card.open .card-player{display:block}
.card-player iframe[id^="iframe-"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mini-player{background:var(--fg);padding:.6rem .75rem;display:flex;align-items:center;gap:.75rem}
.mini-play{width:32px;height:32px;border:1.5px solid #444;color:var(--bg);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:.6rem;flex-shrink:0;transition:all .1s;background:none}
.mini-play:hover{border-color:#f5c800;color:#f5c800}
.mini-play.playing{border-color:#f5c800;color:#f5c800}
.mini-info{flex:1;min-width:0}
.mini-title{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#aaa;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.35rem}
.mini-progress{height:3px;background:#222;cursor:pointer;position:relative;border-radius:0}
.mini-progress:hover .mini-bar{opacity:.85}
.mini-bar{height:100%;background:#f5c800;width:0%;transition:width .8s linear;pointer-events:none}
.mini-time{font-size:.52rem;color:#555;flex-shrink:0;letter-spacing:.05em;min-width:75px;text-align:right}
.empty{grid-column:1/-1;padding:5rem 2rem;text-align:center;
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);border-right:var(--b)}

/* FOOTER */
footer{border-top:var(--b);padding:.75rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;background:var(--light)}
.footer-logo{font-family:var(--display);font-size:1.3rem;letter-spacing:.04em}
.footer-logo em{font-style:normal;background:var(--fg);color:#f5c800;padding:0 .2rem;margin-left:.1rem}
.footer-meta{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}

/* ══════════════════════════════
   LOGIN
══════════════════════════════ */
#view-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}
.login-box{
  border:var(--b);background:var(--bg);width:100%;max-width:380px;
}
.login-chrome{display:flex;align-items:center;gap:.6rem;padding:.4rem .75rem;
  border-bottom:var(--b);background:var(--light)}
.login-body{padding:2rem}
.login-title{font-family:var(--display);font-size:2.2rem;letter-spacing:.04em;margin-bottom:.25rem}
.login-sub{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin-bottom:1.5rem}
.login-input{width:100%;background:var(--bg);border:var(--b);color:var(--fg);
  padding:.6rem .75rem;font-family:var(--mono);font-size:.8rem;outline:none;
  letter-spacing:.1em;transition:box-shadow .1s;margin-bottom:.75rem}
.login-input:focus{box-shadow:3px 3px 0 var(--fg)}
.login-btn{width:100%;background:var(--fg);border:none;color:var(--bg);
  padding:.75rem;font-family:var(--display);font-size:1.3rem;letter-spacing:.1em;cursor:pointer}
.login-btn:hover{opacity:.85}
.login-err{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#d63c1f;margin-top:.5rem;min-height:1rem;text-align:center}

/* ══════════════════════════════
   ADMIN
══════════════════════════════ */
#view-admin .admin-header{
  position:sticky;top:0;z-index:50;background:var(--fg);border-bottom:var(--b);
  display:flex;align-items:stretch;height:48px;
}
.admin-logo{font-family:var(--display);font-size:1.7rem;letter-spacing:.04em;
  color:var(--bg);padding:0 1.25rem;display:flex;align-items:center;
  flex-shrink:0;line-height:1;border-right:2px solid #333;cursor:pointer}
.admin-logo em{color:#f5c800;font-style:normal}
.admin-badge{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);background:#f5c800;padding:0 1rem;
  display:flex;align-items:center;border-right:2px solid #333}
.admin-back{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#888;
  padding:0 1.1rem;display:flex;align-items:center;margin-left:auto;
  border-left:2px solid #333;cursor:pointer;transition:color .1s;background:none;border-top:none;border-bottom:none;border-right:none;
  font-family:var(--mono)}
.admin-back:hover{color:var(--bg)}

.admin-layout{display:grid;grid-template-columns:1fr 400px;min-height:calc(100vh - 48px)}

/* list */
.admin-list-panel{border-right:var(--b)}
.admin-panel-head{padding:1rem 2rem;border-bottom:var(--b);
  display:flex;align-items:center;justify-content:space-between;background:var(--light)}
.admin-panel-title{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em}
.admin-set-count{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.set-row{display:flex;align-items:center;border-bottom:1px solid #ccc;
  padding:.8rem 2rem;gap:.85rem;transition:background .1s}
.set-row:hover{background:var(--light)}
.set-stripe{width:4px;height:40px;flex-shrink:0;border-radius:2px}
.set-info{flex:1;min-width:0}
.set-title{font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-sub{display:flex;align-items:center;gap:.4rem;margin-top:.2rem;flex-wrap:wrap}
.set-artist{font-size:.58rem;color:var(--grey)}
.stag{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid #ccc;color:var(--grey);padding:.06rem .28rem}
.set-date{font-size:.52rem;color:#aaa;flex-shrink:0}
.set-actions{display:flex;gap:.4rem;flex-shrink:0}
.act-btn{background:none;border:var(--b);color:var(--fg);padding:.28rem .6rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .1s}
.act-btn:hover{background:var(--fg);color:var(--bg)}
.act-btn.del{border-color:#ccc;color:var(--grey)}
.act-btn.del:hover{border-color:#d63c1f;background:#d63c1f;color:white}
.admin-empty{padding:3rem 2rem;text-align:center;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:#aaa}

/* form */
.admin-form-panel{background:var(--light);position:sticky;top:48px;
  height:calc(100vh - 48px);overflow-y:auto}
.form-chrome{display:flex;align-items:center;gap:.6rem;padding:.4rem .75rem;
  border-bottom:var(--b);background:var(--bg)}
.form-chrome-title{flex:1;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);text-align:center}
.form-body{padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field-label{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.field-hint{font-size:.52rem;color:#aaa;margin-top:-.15rem}
input[type=text],input[type=date],input[type=url],input[type=password]{
  background:var(--bg);border:var(--b);color:var(--fg);padding:.5rem .7rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  width:100%;outline:none;transition:box-shadow .1s;border-radius:0;-webkit-appearance:none}
input:focus{box-shadow:3px 3px 0 var(--fg)}
input::placeholder{color:#bbb}
textarea.field-input,.field-input{
  background:var(--bg);border:var(--b);color:var(--fg);padding:.5rem .7rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  width:100%;outline:none;transition:box-shadow .1s;border-radius:0;-webkit-appearance:none}
textarea.field-input:focus,.field-input:focus{box-shadow:3px 3px 0 var(--fg)}
textarea.field-input::placeholder,.field-input::placeholder{color:#bbb}

/* genre chips */
.genre-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.genre-chip{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  border:var(--b);color:var(--grey);padding:.25rem .6rem;cursor:pointer;
  transition:all .1s;background:var(--bg)}
.genre-chip:hover,.genre-chip.selected{background:var(--fg);color:var(--bg)}
.add-genre-row{display:flex;gap:.4rem;margin-top:.3rem}
.add-genre-input{flex:1;background:var(--bg);border:var(--b);color:var(--fg);
  padding:.4rem .6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  outline:none;transition:box-shadow .1s;border-radius:0}
.add-genre-input:focus{box-shadow:3px 3px 0 var(--fg)}
.add-genre-input::placeholder{color:#bbb}
.add-genre-btn{background:none;border:var(--b);color:var(--fg);padding:.4rem .75rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:all .1s;white-space:nowrap}
.add-genre-btn:hover{background:var(--fg);color:var(--bg)}

/* tags */
.tags-wrap{display:flex;gap:.35rem;flex-wrap:wrap;background:var(--bg);
  border:var(--b);padding:.35rem .5rem;cursor:text;min-height:38px;transition:box-shadow .1s}
.tags-wrap:focus-within{box-shadow:3px 3px 0 var(--fg)}
.tag-chip{background:var(--fg);color:var(--bg);font-family:var(--mono);
  font-size:.56rem;letter-spacing:.08em;padding:.18rem .45rem;
  display:flex;align-items:center;gap:.28rem}
.tag-chip button{background:none;border:none;color:var(--bg);cursor:pointer;font-size:.62rem;line-height:1;padding:0;opacity:.6}
.tag-chip button:hover{opacity:1}
.tags-input{background:none;border:none;outline:none;color:var(--fg);
  font-family:var(--mono);font-size:.66rem;min-width:80px;flex:1}

/* colors */
.color-row{display:flex;gap:.4rem;flex-wrap:wrap}
.color-swatch{width:24px;height:24px;border:var(--b);cursor:pointer;
  transition:transform .1s,outline .1s;flex-shrink:0}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.selected{outline:3px solid var(--fg);outline-offset:2px}

/* submit */
.submit-area{padding-top:.6rem;border-top:var(--b);display:flex;flex-direction:column;gap:.5rem}
.submit-btn{background:var(--fg);border:none;color:var(--bg);padding:.75rem;
  font-family:var(--display);font-size:1.2rem;letter-spacing:.1em;cursor:pointer;transition:opacity .1s;width:100%}
.submit-btn:hover{opacity:.85}
.cancel-btn{background:none;border:var(--b);color:var(--grey);padding:.55rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .1s;width:100%;display:none}
.cancel-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.status-msg{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;min-height:.9rem}
.status-msg.ok{color:#1a6b2a}.status-msg.err{color:#d63c1f}

/* toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--fg);color:var(--bg);
  padding:.7rem 1.2rem;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  transform:translateY(80px);opacity:0;transition:all .3s cubic-bezier(.22,1,.36,1);
  z-index:999;pointer-events:none;border:var(--b)}
.toast.show{transform:translateY(0);opacity:1}
.toast.err{background:#d63c1f}

/* loading */
.loading-overlay{position:fixed;inset:0;background:rgba(240,237,230,.9);
  display:flex;align-items:center;justify-content:center;z-index:998;
  opacity:0;pointer-events:none;transition:opacity .2s}
.loading-overlay.show{opacity:1;pointer-events:all}
.loading-text{font-family:var(--display);font-size:2rem;letter-spacing:.1em}
.loading-text::after{content:'';animation:dots 1s step-end infinite}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
[data-theme="dark"] .loading-overlay{background:rgba(14,14,14,.9)}

/* ═══ BOTTOM NAV (mobile) ═══ */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--fg);border-top:2px solid #222;height:56px;
  align-items:stretch;justify-content:stretch}
.bottom-nav button{flex:1;background:none;border:none;border-right:1px solid #333;
  color:#888;font-family:var(--mono);font-size:.48rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.25rem;transition:color .1s}
.bottom-nav button:last-child{border-right:none}
.bottom-nav button.active{color:#f5c800}
.bottom-nav button:hover{color:var(--bg)}
.bottom-nav .bn-icon{font-size:1.1rem;line-height:1}

@media(max-width:900px){
  .admin-layout{grid-template-columns:1fr}
  .admin-form-panel{position:static;height:auto;border-top:var(--b)}
}
@media(max-width:700px){
  /* header: hide desktop nav, show bottom nav */
  header{height:44px}
  nav a,nav .nav-admin{display:none!important}
  .theme-toggle{margin-left:auto;border-left:none;border-right:none;padding:0 1rem}
  .bottom-nav{display:flex}

  /* spacing for bottom nav */
  footer{margin-bottom:56px}
  #view-main,#view-info,#view-artists{padding-bottom:56px}

  /* logo smaller */
  .logo{font-size:1.4rem;padding:0 .9rem}

  /* grid single col */
  .grid{grid-template-columns:1fr;border-left:none}
  .card{border-left:var(--b)}

  /* filter bar scroll */
  .filter-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .ftag{white-space:nowrap;flex-shrink:0}

  /* info page: stack columns */
  .info-grid{grid-template-columns:1fr!important}
  .info-left{border-right:none!important;border-bottom:var(--b)}

  /* artists page: stack */
  .artists-grid{grid-template-columns:1fr!important}
  .artists-sidebar{border-right:none!important;border-bottom:var(--b);max-height:35vh;overflow-y:auto}

  /* artist detail: stack bio + sets */
  .artist-detail-grid{grid-template-columns:1fr!important}
  .artist-detail-bio{border-right:none!important;border-bottom:var(--b)}

  /* sticky player: full width */
  #sticky-player{left:.5rem!important;right:.5rem!important;width:auto!important;bottom:calc(56px + .5rem)!important}
  #sp-thumb{width:72px!important;height:72px!important}

  /* expanded player */
  #sp-expanded > div{width:min(95vw,680px)!important}

  /* card tweaks */
  .title{font-size:1.3rem}
  .card-body{min-height:60px}

  /* admin: hide desktop tabs on small */
  .admin-header{flex-wrap:wrap;height:auto!important;min-height:48px}
  .admin-badge{display:none}

  /* login box */
  .login-box{margin:1rem;max-width:none!important}

  /* count bar */
  .count-bar{padding:.5rem 1rem}

  /* set row admin */
  .set-row{padding:.65rem 1rem;flex-wrap:wrap;gap:.5rem}
  .set-actions{width:100%;justify-content:flex-end}
  .set-date{order:-1}
}
/* ═══ USER SYSTEM ═══ */
.nav-user{border-left:1px solid #ccc;border-right:1px solid #ccc;display:flex;align-items:center;
  gap:.5rem;padding:0 1rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);cursor:pointer;background:none;border-top:none;border-bottom:none;
  font-family:var(--mono);transition:background .1s,color .1s;margin-left:auto}
.nav-user:hover{background:var(--fg);color:var(--bg)}
.nav-user .user-dot{width:7px;height:7px;border-radius:50%;background:#f5c800;flex-shrink:0}
[data-theme="dark"] .nav-user{border-color:#333}
.fav-btn{background:none;border:none;font-size:.85rem;cursor:pointer;padding:0;
  line-height:1;transition:transform .15s;color:var(--grey)}
.fav-btn:hover{transform:scale(1.25)}
.fav-btn.liked{color:#d63c1f;animation:fav-pop .3s ease}
@keyframes fav-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* user login modal */
.user-modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.user-modal-box{width:min(400px,92vw);background:var(--bg);border:2px solid var(--fg);
  box-shadow:10px 10px 0 rgba(0,0,0,.5)}
.user-modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1rem;border-bottom:var(--b);background:var(--light)}
.user-modal-body{padding:1.5rem}
.user-tabs{display:flex;border-bottom:var(--b);margin-bottom:1.25rem}
.user-tab{flex:1;background:none;border:none;padding:.6rem;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  cursor:pointer;transition:all .1s;border-bottom:2px solid transparent}
.user-tab.active{color:var(--fg);border-bottom-color:#f5c800}
.user-tab:hover{color:var(--fg)}

/* ═══ CRT FILTER ═══ */
/* soft glow on accent elements */
body.crt .logo em,
body.crt .footer-logo em,
body.crt .admin-logo em,
body.crt .admin-badge{
  text-shadow:0 0 12px #f5c800, 0 0 35px rgba(245,200,0,0.35), 0 0 60px rgba(245,200,0,0.1);
}
body.crt .splash-13{
  text-shadow:0 0 30px #f5c800, 0 0 80px rgba(245,200,0,0.45), 0 0 140px rgba(245,200,0,0.15);
}
body.crt .mini-bar,
body.crt #sp-bar,
body.crt #sp-exp-bar,
body.crt .splash-line{
  box-shadow:0 0 10px rgba(245,200,0,0.6), 0 0 28px rgba(245,200,0,0.25), 0 0 50px rgba(245,200,0,0.08);
}
body.crt .card.open .stripe{
  box-shadow:4px 0 16px rgba(245,200,0,0.2), 8px 0 30px rgba(245,200,0,0.08);
}
body.crt .ftag.active,
body.crt nav a.active{
  box-shadow:inset 0 0 16px rgba(245,200,0,0.12);
}
body.crt .theme-toggle{
  text-shadow:0 0 10px #f5c800, 0 0 25px rgba(245,200,0,0.25);
}
body.crt .bottom-nav button.active .bn-icon{
  text-shadow:0 0 10px #f5c800, 0 0 28px rgba(245,200,0,0.4);
}
body.crt .play-btn,
body.crt .mini-play.playing{
  box-shadow:0 0 12px rgba(245,200,0,0.3), 0 0 25px rgba(245,200,0,0.1);
}
body.crt .ticker{
  box-shadow:0 2px 20px rgba(245,200,0,0.06);
}
body.crt .splash-dots .splash-dot{
  box-shadow:0 0 8px rgba(245,200,0,0.5), 0 0 20px rgba(245,200,0,0.2);
}
/* very subtle warm tint */
body.crt #view-main,
body.crt #view-info,
body.crt #view-artists{
  filter:sepia(0.03) brightness(1.01);
}
[data-theme="dark"] body.crt #view-main,
[data-theme="dark"] body.crt #view-info,
[data-theme="dark"] body.crt #view-artists{
  filter:brightness(1.02);
}

/* ═══ SPLASH SCREEN ═══ */
.splash{position:fixed;inset:0;z-index:9999;background:#0a0a0a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s ease,transform .5s ease}
.splash.out{opacity:0;transform:scale(1.02);pointer-events:none}
.splash-logo{font-family:var(--display);font-size:clamp(4rem,12vw,8rem);letter-spacing:.06em;
  position:relative;display:flex;align-items:center}
.splash-gleis{color:#e8e4dc;opacity:0;animation:splash-letter .5s .2s ease forwards}
.splash-13{color:#f5c800;font-style:normal;opacity:0;
  animation:splash-glow .8s .5s ease forwards}
.splash-sub{font-family:var(--mono);font-size:clamp(.55rem,1.5vw,.72rem);letter-spacing:.35em;
  text-transform:uppercase;color:#333;margin-top:1rem;
  opacity:0;animation:splash-fade .6s .9s ease forwards}
.splash-line{width:60px;height:2px;background:#f5c800;margin-top:1.5rem;
  transform:scaleX(0);animation:splash-line-grow .5s 1.2s cubic-bezier(.22,1,.36,1) forwards}
.splash-dots{display:flex;gap:.5rem;margin-top:1.5rem;
  opacity:0;animation:splash-fade .4s 1.5s ease forwards}
.splash-dot{width:6px;height:6px;border-radius:50%;background:#333;
  animation:splash-pulse .8s ease-in-out infinite alternate}
.splash-dot:nth-child(2){animation-delay:.15s}
.splash-dot:nth-child(3){animation-delay:.3s}

@keyframes splash-letter{
  0%{opacity:0;transform:translateY(8px);filter:blur(4px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes splash-glow{
  0%{opacity:0;transform:scale(0.9);filter:blur(6px);text-shadow:none}
  60%{opacity:1;transform:scale(1.05);filter:blur(0);text-shadow:0 0 30px #f5c800,0 0 80px rgba(245,200,0,0.5),0 0 140px rgba(245,200,0,0.2)}
  100%{opacity:1;transform:scale(1);filter:blur(0);text-shadow:0 0 20px #f5c800,0 0 50px rgba(245,200,0,0.3),0 0 100px rgba(245,200,0,0.1)}
}
@keyframes splash-fade{to{opacity:1}}
@keyframes splash-line-grow{
  0%{transform:scaleX(0);box-shadow:none}
  100%{transform:scaleX(1);box-shadow:0 0 10px rgba(245,200,0,0.6),0 0 28px rgba(245,200,0,0.25)}
}
@keyframes splash-pulse{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}