/* ============================================================
   Wristband Web — design system
   Dark-first. Slate base + emerald accent by default; every
   color flows through CSS variables set by js/theme.js so the
   full base/accent theme matrix from the mobile app carries
   over. Glass surfaces, eyebrow typography, identity gradients.
   ============================================================ */

:root {
  --bg:#0F1117; --bg2:#1A1D26; --bg3:#13151C; --bg4:#22263A;
  --line:rgba(241,239,232,0.07); --line2:rgba(241,239,232,0.13);
  --text:#F1EFE8; --text2:#D3D1C7; --text3:#888780;
  --accent:#5DCAA5; --accent-dim:rgba(93,202,165,0.15);
  --glass:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.08);
  --coral:#D85A30;
  --danger:#f07060;
  --radius:16px; --radius-sm:12px;
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'DM Sans', -apple-system, sans-serif;
  --sidebar-w:248px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a { color:var(--accent); text-decoration:none; }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; color:inherit; font-size:13px; }
input, textarea, select { font-family:var(--sans); font-size:14px; color:var(--text); }
::selection { background:var(--accent-dim); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:5px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }

/* ── Ambient atmosphere ───────────────────────────────────── */
#ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; transition:background 600ms; }
.blob-a { width:560px; height:560px; top:-180px; left:-120px; background:radial-gradient(circle, var(--accent-dim), transparent 70%); }
.blob-b { width:640px; height:640px; bottom:-260px; right:-160px; background:radial-gradient(circle, rgba(104,96,204,.13), transparent 70%); }
.blob-c { width:440px; height:440px; top:38%; left:46%; background:radial-gradient(circle, rgba(216,90,48,.08), transparent 70%); }
.grain { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
body.light .grain { opacity:.03; }
body.light .blob { opacity:.45; }

/* ── Boot splash ──────────────────────────────────────────── */
#boot-splash {
  position:fixed; inset:0; display:flex; flex-direction:column; gap:18px;
  align-items:center; justify-content:center; background:var(--bg); z-index:50;
  transition:opacity .55s ease;
}
#boot-splash.out { opacity:0; pointer-events:none; }
#boot-splash svg { animation:bootpulse 2.2s ease-in-out infinite; }
.boot-word { font-family:var(--serif); font-size:24px; letter-spacing:.5px; color:var(--text); }
@keyframes bootpulse { 0%,100%{ transform:rotate(0deg) scale(1);} 50%{ transform:rotate(-4deg) scale(1.04);} }

/* ── App shell ────────────────────────────────────────────── */
#app { position:relative; z-index:1; height:100%; }
.shell { display:flex; height:100%; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; display:flex; flex-direction:column;
  border-right:1px solid var(--line); background:rgba(0,0,0,0.12);
  backdrop-filter:blur(20px); padding:22px 14px 14px;
}
body.light .sidebar { background:rgba(255,255,255,0.35); }
.wordmark { font-family:var(--serif); font-size:23px; padding:2px 12px 18px; letter-spacing:.3px; display:flex; align-items:center; gap:10px; }
.wordmark svg { flex-shrink:0; }
.nav { display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:12px; color:var(--text2); font-weight:500; font-size:13.5px;
  transition:background .15s, color .15s; position:relative; text-align:left;
}
.nav-item svg { width:19px; height:19px; flex-shrink:0; opacity:.85; }
.nav-item:hover { background:var(--glass); color:var(--text); }
.nav-item.active { background:var(--accent-dim); color:var(--accent); }
.nav-item.active svg { opacity:1; }
.nav-badge {
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--coral); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.nav-sep { height:1px; background:var(--line); margin:10px 8px; }

/* Team switcher pill — the "laminate" */
.team-pill {
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px;
  background:var(--glass); border:1px solid var(--glass-border);
  transition:border-color .15s; width:100%; text-align:left; margin-top:10px;
}
.team-pill:hover { border-color:var(--line2); }
.team-pill .tp-name { font-weight:600; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-pill .tp-role { font-size:11px; color:var(--text3); }
.team-pill .tp-meta { min-width:0; flex:1; }
.team-pill .tp-chev { color:var(--text3); flex-shrink:0; }

.me-row {
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-top:8px;
  border-radius:12px; width:100%; text-align:left; color:var(--text2);
}
.me-row:hover { background:var(--glass); color:var(--text); }
.me-row.active { background:var(--accent-dim); color:var(--accent); }
.me-row .mr-name { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Switcher popover */
.switcher-pop {
  position:fixed; bottom:74px; left:14px; width:calc(var(--sidebar-w) - 28px + 100px);
  max-width:330px; background:var(--bg2); border:1px solid var(--line2);
  border-radius:18px; padding:10px; z-index:90; box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:popin .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popin { from { opacity:0; transform:translateY(8px) scale(.97);} to { opacity:1; transform:none; } }
.switcher-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 10px; border-radius:12px; }
.switcher-row:hover { background:var(--glass); }
.switcher-row.current { background:var(--accent-dim); }
.switcher-row .sw-name { font-size:13.5px; font-weight:600; color:var(--text); }
.switcher-row .sw-role { font-size:11px; color:var(--text3); }
.switcher-actions { display:flex; gap:8px; padding:8px 6px 2px; }
.switcher-actions button { flex:1; padding:8px; border-radius:10px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text2); font-size:12px; font-weight:600; }
.switcher-actions button:hover { color:var(--text); border-color:var(--line2); }

/* Content area */
.content { flex:1; min-width:0; overflow-y:auto; height:100%; }
.page { max-width:1180px; margin:0 auto; padding:34px 36px 80px; animation:pagein .25s ease; }
.page.wide { max-width:1380px; }
@keyframes pagein { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }

/* ── Typography ───────────────────────────────────────────── */
.eyebrow { font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--text2); }
.eyebrow.tinted { color:var(--accent); }
h1.display { font-family:var(--serif); font-size:34px; font-weight:400; line-height:1.15; margin-top:4px; }
h2.section { font-family:var(--serif); font-size:21px; font-weight:400; }
.sub { color:var(--text3); font-size:13px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:30px 0 14px; }
.section-head:first-child { margin-top:0; }

/* ── Cards / glass ────────────────────────────────────────── */
.glass {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); backdrop-filter:blur(14px);
}
.card { padding:18px; }
.card-click { transition:border-color .15s, transform .15s; cursor:pointer; }
.card-click:hover { border-color:var(--line2); }

/* Hero card — one per screen */
.hero {
  position:relative; overflow:hidden; border-radius:20px; padding:24px;
  border:1px solid var(--glass-border);
  background:linear-gradient(120deg, rgba(216,90,48,.26), rgba(83,74,183,.20)), var(--glass);
}
.hero .hero-glow { position:absolute; top:-60px; right:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); pointer-events:none; }

/* Status dots */
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; background:currentColor; }
.dot.pulse { animation:dotpulse 1.8s ease-in-out infinite; }
@keyframes dotpulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* Pills */
.pill {
  padding:6px 13px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text2);
  transition:all .15s; white-space:nowrap;
}
.pill:hover { color:var(--text); border-color:var(--line2); }
.pill.active { background:var(--text); color:var(--bg); border-color:transparent; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; }
.pill-row.scroll { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }

/* Badges */
.badge { font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:3px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:12px; font-weight:600; font-size:13.5px;
  transition:all .15s; border:1px solid transparent;
}
.btn-primary { background:var(--coral); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-accent { background:var(--accent); color:var(--bg); }
.btn-accent:hover { filter:brightness(1.08); }
.btn-ghost { background:var(--glass); border-color:var(--glass-border); color:var(--text2); }
.btn-ghost:hover { color:var(--text); border-color:var(--line2); }
.btn-danger { background:rgba(240,112,96,.13); color:var(--danger); border-color:rgba(240,112,96,.25); }
.btn-danger:hover { background:rgba(240,112,96,.22); }
.btn-sm { padding:7px 13px; font-size:12.5px; border-radius:10px; }
.btn[disabled] { opacity:.45; pointer-events:none; }
.icon-btn { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--text3); background:var(--glass); border:1px solid var(--glass-border); }
.icon-btn:hover { color:var(--text); border-color:var(--line2); }

/* ── Forms ────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); }
.input, textarea.input, select.input {
  background:var(--bg3); border:1px solid var(--line); border-radius:11px;
  padding:11px 13px; color:var(--text); outline:none; transition:border-color .15s; width:100%;
}
.input:focus { border-color:var(--accent); }
.input::placeholder { color:var(--text3); }
textarea.input { resize:vertical; min-height:84px; }
select.input { appearance:none; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-grid .span2 { grid-column:1 / -1; }
.check-row { display:flex; align-items:center; gap:10px; padding:6px 0 14px; cursor:pointer; user-select:none; font-size:13.5px; color:var(--text2); }
.check-row input { accent-color:var(--accent); width:16px; height:16px; }
.search-wrap { position:relative; }
.search-wrap svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text3); }
.search-wrap .input { padding-left:38px; }

/* ── Avatars / identity ───────────────────────────────────── */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:500; letter-spacing:.5px; flex-shrink:0; background-size:cover; background-position:center; overflow:hidden; }
.avatar.bordered { border:1.5px solid rgba(255,255,255,.15); }
.avatar-stack { display:flex; }
.avatar-stack .avatar { border:2px solid var(--bg); margin-left:-8px; }
.avatar-stack .avatar:first-child { margin-left:0; }

/* Gradient date block */
.date-block {
  width:54px; height:58px; border-radius:13px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; flex-shrink:0;
}
.date-block .db-mo { font-size:10px; font-weight:700; letter-spacing:1px; opacity:.9; }
.date-block .db-day { font-family:var(--serif); font-size:23px; line-height:1.05; }

/* ── Lists ────────────────────────────────────────────────── */
.row { display:flex; align-items:center; gap:13px; padding:13px 16px; border-bottom:1px solid var(--line); transition:background .12s; }
.row:last-child { border-bottom:none; }
.row.clickable { cursor:pointer; }
.row.clickable:hover { background:var(--glass); }
.grow { flex:1; min-width:0; }
.row .title { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .meta { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-letter { font-size:11px; font-weight:600; letter-spacing:1px; color:var(--text3); padding:14px 4px 6px; }

/* ── Master-detail split ──────────────────────────────────── */
.split { display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start; }
.split .pane-list { position:sticky; top:0; max-height:calc(100vh - 130px); overflow-y:auto; }
.split-3 { grid-template-columns:340px 1fr; }
.detail-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:380px; color:var(--text3); text-align:center; }
.detail-empty svg { opacity:.4; }

/* Schedule timeline */
.timeline { position:relative; padding-left:22px; }
.timeline::before { content:''; position:absolute; left:6px; top:8px; bottom:8px; width:1.5px; background:var(--line2); }
.tl-item { position:relative; padding:7px 0; }
.tl-item::before { content:''; position:absolute; left:-20px; top:13px; width:9px; height:9px; border-radius:50%; background:var(--bg4); border:1.5px solid var(--text3); }
.tl-item.key::before { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent); }
.tl-time { font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.tl-label { font-size:12px; color:var(--text3); }

/* Stat tiles */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat-tile { background:rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:13px; padding:11px 13px; }
.stat-tile .st-label { font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); }
.stat-tile .st-value { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }

/* Stage plot thumbnail */
.sp-thumb {
  width:46px; height:46px; flex-shrink:0; border-radius:10px;
  background:var(--bg4) center/cover no-repeat; border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--text3);
}
.sp-thumb svg { width:20px; height:20px; }

/* Setlist — auto-numbered, one song per row */
.setlist { list-style:none; counter-reset:song; margin-top:12px; }
.setlist li { counter-increment:song; display:flex; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.4; }
.setlist li:last-child { border-bottom:none; }
.setlist li::before { content:counter(song,decimal-leading-zero); font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); min-width:26px; font-size:12.5px; }

/* Quick action tiles */
.qa-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qa-tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-border); font-size:11.5px; font-weight:500; color:var(--text); transition:border-color .15s; }
.qa-tile:hover { border-color:var(--line2); }
.qa-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ── Mini calendar ────────────────────────────────────────── */
.mini-cal { user-select:none; }
.mini-cal .mc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mini-cal .mc-title { font-weight:600; font-size:13.5px; }
.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mc-dow { text-align:center; font-size:10px; font-weight:600; color:var(--text3); padding:4px 0; letter-spacing:.5px; }
.mc-day { aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; color:var(--text2); cursor:pointer; border:1px solid transparent; position:relative; }
.mc-day:hover { background:var(--glass); }
.mc-day.selected { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:700; }
.mc-day.today { font-weight:700; color:var(--text); }
.mc-day.today::after { content:''; position:absolute; top:5px; right:5px; width:4px; height:4px; border-radius:50%; background:var(--coral); }
.mc-day.blank { visibility:hidden; }
.mc-dots { display:flex; gap:2.5px; height:4px; }
.mc-dots i { width:4px; height:4px; border-radius:50%; }

/* Big calendar */
.big-cal .mc-day { aspect-ratio:auto; min-height:78px; align-items:flex-start; justify-content:flex-start; padding:7px 8px; border:1px solid var(--line); border-radius:12px; }
.big-cal .mc-grid { gap:6px; }

/* ── Messages / inbox ─────────────────────────────────────── */
/* The inbox fills the viewport and never scrolls the page itself — only
   the message thread scrolls internally, so the conversation list and
   header stay put while you read and send. */
.inbox-page { height:100%; display:flex; flex-direction:column; overflow:hidden; padding-bottom:18px; }
.inbox-split { display:grid; grid-template-columns:360px 1fr; gap:0; border:1px solid var(--glass-border); border-radius:20px; overflow:hidden; background:var(--glass); backdrop-filter:blur(14px); flex:1; min-height:0; }
.inbox-list { border-right:1px solid var(--line); overflow-y:auto; }
.thread { display:flex; flex-direction:column; min-width:0; }
.thread-head { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; }
.thread-body { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:4px; }
.msg { max-width:64%; padding:9px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; word-wrap:break-word; }
.msg.mine { align-self:flex-end; background:var(--accent); color:var(--bg); border-bottom-right-radius:5px; }
.msg.theirs { align-self:flex-start; background:var(--bg4); border-bottom-left-radius:5px; }
.msg .mention { font-weight:700; opacity:.95; }
.msg-meta { font-size:10.5px; color:var(--text3); margin:1px 6px 7px; }
.msg-meta.mine { align-self:flex-end; }
.msg-day { align-self:center; font-size:11px; font-weight:600; letter-spacing:.6px; color:var(--text3); margin:14px 0 8px; text-transform:uppercase; }
.composer { display:flex; gap:10px; padding:13px 16px; border-top:1px solid var(--line); position:relative; }
.composer .input { flex:1; }
.mention-pop { position:absolute; bottom:64px; left:16px; background:var(--bg2); border:1px solid var(--line2); border-radius:14px; padding:6px; min-width:220px; box-shadow:0 18px 50px rgba(0,0,0,.45); z-index:5; }

/* ── Modal / toast ────────────────────────────────────────── */
#modal-root .overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:24px;
  animation:fadein .18s ease;
}
@keyframes fadein { from{opacity:0;} to{opacity:1;} }
.modal {
  background:var(--bg2); border:1px solid var(--line2); border-radius:22px;
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:26px;
  animation:popin .2s cubic-bezier(.2,.9,.3,1.15);
}
.modal.wide { max-width:720px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.modal-head h3 { font-family:var(--serif); font-size:21px; font-weight:400; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

#toast-root { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--bg2); border:1px solid var(--line2); color:var(--text); padding:11px 20px; border-radius:13px; font-size:13px; font-weight:500; box-shadow:0 14px 40px rgba(0,0,0,.4); animation:toastin .25s ease; }
.toast.err { border-color:rgba(240,112,96,.4); color:var(--danger); }
@keyframes toastin { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ── Auth screens ─────────────────────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:100%; max-width:400px; }
.auth-logo { text-align:center; margin-bottom:30px; }
.auth-logo .wm { font-family:var(--serif); font-size:34px; margin-top:10px; }
.auth-logo .tag { color:var(--text3); font-size:13px; margin-top:4px; }
.auth-foot { text-align:center; margin-top:18px; font-size:13px; color:var(--text3); }
.auth-foot button { color:var(--accent); font-weight:600; }

/* ── Misc ─────────────────────────────────────────────────── */
.spinner { width:26px; height:26px; border:2.5px solid var(--line2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty { text-align:center; color:var(--text3); padding:36px 20px; font-size:13px; }
.kv { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.kv:last-child { border-bottom:none; }
.kv .k { color:var(--text3); flex-shrink:0; }
.kv .v { text-align:right; word-break:break-word; }
.notes-callout { background:var(--bg3); border-left:3px solid var(--accent); border-radius:0 11px 11px 0; padding:12px 14px; font-size:13px; color:var(--text2); line-height:1.55; white-space:pre-wrap; }
.chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-border); font-size:12.5px; font-weight:600; color:var(--text2); }
.chip:hover { color:var(--text); border-color:var(--line2); }
.offline-note { background:rgba(240,160,96,.12); border:1px solid rgba(240,160,96,.3); color:#f0a060; border-radius:12px; padding:10px 14px; font-size:12.5px; margin-bottom:18px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.col { display:flex; flex-direction:column; gap:18px; min-width:0; }
.theme-swatch { width:42px; height:42px; border-radius:12px; border:2px solid transparent; cursor:pointer; position:relative; }
.theme-swatch.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.swatch-grid { display:flex; gap:9px; flex-wrap:wrap; }
.upgrade-note { background:linear-gradient(120deg, rgba(240,192,64,.13), rgba(216,90,48,.10)); border:1px solid rgba(240,192,64,.3); border-radius:14px; padding:14px 16px; font-size:13px; }

/* Mobile-ish responsive */
@media (max-width:1080px) {
  .split, .split-3 { grid-template-columns:1fr; }
  .split .pane-list { position:static; max-height:none; }
  .grid-2 { grid-template-columns:1fr; }
}
/* Inbox stays two-pane down to small screens; only genuine phone widths
   collapse to a single pane (list ⇄ thread). */
@media (max-width:760px) {
  .inbox-split { grid-template-columns:1fr; }
  .inbox-split .thread { display:none; }
  .inbox-split.threaded .inbox-list { display:none; }
  .inbox-split.threaded .thread { display:flex; }
}
@media (max-width:880px) {
  :root { --sidebar-w:64px; }
  .sidebar { padding:18px 8px 12px; align-items:center; }
  .wordmark span, .nav-item span, .team-pill .tp-meta, .team-pill .tp-chev, .me-row .mr-name { display:none; }
  .nav-item { justify-content:center; padding:11px; }
  .nav-badge { position:absolute; top:4px; right:4px; margin:0; }
  .team-pill { justify-content:center; padding:7px; }
  .me-row { justify-content:center; }
  .switcher-pop { left:70px; bottom:14px; }
  .page { padding:22px 18px 70px; }
  h1.display { font-size:27px; }
  .form-grid { grid-template-columns:1fr; }
  .msg { max-width:84%; }
}

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

/* ─── Song bank + setlist builder ──────────────────────────── */
.sb-num { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text3); min-width:22px; }

.setlist-trigger {
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text);
  cursor:pointer; transition:border-color .15s;
}
.setlist-trigger:hover { border-color:var(--accent); }
.setlist-trigger .st-icon { font-size:19px; line-height:1; }
.setlist-trigger .st-body { flex:1; min-width:0; }
.setlist-trigger .st-title { font-weight:600; font-size:14px; }
.setlist-trigger .st-sub { font-size:12px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.setlist-trigger > span:last-child { color:var(--text3); display:inline-flex; }

.sl-section-label { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text3); margin-bottom:9px; }
.sl-card { border:1px solid var(--glass-border); border-radius:var(--radius-sm); background:var(--glass); overflow:hidden; }
.sl-empty { padding:16px; font-size:13px; color:var(--text3); text-align:center; }

.sl-set-row { position:relative; display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--line); background:var(--glass); will-change:transform; }
.sl-set-row:last-child { border-bottom:none; }
.sl-set-row.dragging { z-index:10; border-bottom-color:transparent; border-radius:10px; background:var(--bg2); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.sl-set-row.dragging .sl-handle { cursor:grabbing; color:var(--accent); }
.sl-handle { cursor:grab; color:var(--text3); font-size:14px; letter-spacing:-2px; user-select:none; touch-action:none; padding:0 2px; }
.sl-num { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); min-width:22px; }
.sl-set-title { flex:1; min-width:0; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-remove { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; color:var(--text3); background:transparent; border:none; cursor:pointer; }
.sl-remove:hover { color:var(--text); background:var(--glass); }

.sl-lib-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.sl-lib-row:last-child { border-bottom:none; }
.sl-lib-row:hover { background:var(--glass); }
.sl-check { flex-shrink:0; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--text3); display:inline-flex; align-items:center; justify-content:center; color:#0F1117; }
.sl-check.on { background:var(--accent); border-color:var(--accent); }
.sl-check svg { width:15px; height:15px; }
.sl-lib-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-lib-del { width:30px; height:30px; flex-shrink:0; }
.sl-hint { font-size:12px; color:var(--text3); margin-top:12px; text-align:center; }