/* Shared styles for every brand. Colours come from the tokens in :root; a brand overrides them in css/brand.css. */
:root {
  --ground: #120e0a;
  --header: #0e0a07;
  --plate-a: #3b332c;
  --plate-b: #2c2621;
  --plate-c: #201b17;
  --well: #14100c;
  --line: #5a4325;
  --brass: #d9aa55;
  --brass-lit: #e0b560;
  --brass-hi: #f6dd9d;
  --brass-title: #f3d890;
  --copper: #cf7a4a;
  --copper-hi: #e89468;
  --text: #e8dcc0;
  --muted: #b3a587;
  --ink: #241606;
  --font-head: "Zilla Slab", Georgia, serif;
  --font-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Lora, Georgia, serif;
  --brass-deep: #b9822f;
  --well-deep: #1c130b;
  --brass-rgb: 217, 170, 85;
  --glow: 224, 181, 96;
  --copper-rgb: 207, 122, 74;
  --btn-top: #e8bf6a;
  --btn-bot: #c1912f;
  --btn-edge: #6e4a16;
  --rim: #8d6428;
  --field-text: #f3e6c4;
  --placeholder: #9a8c6e;
  --rivet: radial-gradient(circle, #fff2c8 0 1.5px, #d9aa55 2.5px, #6e4a16 6px, transparent 7px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(900px 480px at 50% -60px, rgba(var(--glow), .12), transparent 70%), var(--ground);
  color: var(--text);
  font: 17px/1.55 var(--font-body);
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--brass-lit); }
a:hover { color: var(--brass-hi); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--brass-title); line-height: 1.15; }

.wm {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .06em;
  background: linear-gradient(var(--brass-hi), var(--brass-lit) 55%, var(--brass-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lbl {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--copper);
}
.muted { color: var(--muted); }
.small { font-size: 15px; line-height: 1.4; }
.err { color: var(--copper-hi); font-size: 15px; }
.warn { color: var(--copper); font-size: 15px; line-height: 1.4; }

/* ---------- header ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding: 14px 32px;
  background: var(--header); border-bottom: 1px solid rgba(var(--brass-rgb), .35);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-height: 44px; }
.brand img { width: 52px; height: 52px; display: block; }
.brand-name { font-size: 24px; }
.nav { display: flex; gap: 28px; align-items: center; min-height: 44px; }
.nav a {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-size: 15px; color: var(--brass-lit); text-decoration: none;
}
.nav a:hover { color: var(--brass-hi); }

/* ---------- layout ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 48px 24px 72px; display: flex; flex-direction: column; gap: 32px; }
.page-wide-gap { gap: 40px; }
.hero { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.5vw, 64px); max-width: 820px; }
.hero .lead { max-width: 640px; font-size: 19px; }
.title-block { display: flex; flex-direction: column; gap: 12px; }
.title-block h1 { font-size: clamp(32px, 4.5vw, 52px); }
.title-block .lead { max-width: 720px; font-size: 18px; }
.cols { display: flex; flex-wrap: wrap; gap: 36px 40px; }
.split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.wrap-row { display: flex; flex-wrap: wrap; gap: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.center { text-align: center; }

/* ---------- plate (brass panel) ---------- */
.plate {
  position: relative;
  border: 2px solid var(--brass);
  border-radius: 22px;
  background:
    var(--rivet) left 16px top 16px / 14px 14px no-repeat,
    var(--rivet) right 16px top 16px / 14px 14px no-repeat,
    var(--rivet) left 16px bottom 16px / 14px 14px no-repeat,
    var(--rivet) right 16px bottom 16px / 14px 14px no-repeat,
    linear-gradient(var(--plate-a), var(--plate-b) 50%, var(--plate-c));
  box-shadow: 0 0 70px rgba(var(--glow), .10), 0 18px 40px rgba(0, 0, 0, .5);
}
.plate::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(var(--copper-rgb), .55); border-radius: 15px; pointer-events: none;
}
.plate-pad { padding: 48px 44px; }
.plate-pad-sm { padding: 40px 36px; }
.well { background: var(--well); border: 1px solid var(--line); border-radius: 14px; }
.well-pad { padding: 18px; }

/* ---------- buttons and fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px; border-radius: 12px;
  border: 2px solid var(--brass-hi); background: linear-gradient(var(--btn-top), var(--btn-bot)); color: var(--ink);
  font-family: var(--font-ui); font-weight: 600; font-size: 20px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 0 var(--btn-edge), 0 0 24px rgba(var(--glow), .25);
}
.btn:hover { color: var(--ink); filter: brightness(1.08); }
.btn-block { width: 100%; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  border: 2px solid var(--brass); background: transparent; color: var(--brass-lit);
  font-family: var(--font-ui); font-weight: 600; font-size: 18px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.btn-ghost:hover { color: var(--brass-hi); background: rgba(var(--glow), .1); }
.btn-ghost.copper { border-color: var(--copper); color: var(--copper-hi); }
.btn-ghost[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-step { min-width: 52px; padding: 0 14px; font-size: 28px; }

.field {
  width: 100%; min-height: 52px; background: var(--well); border: 2px solid var(--rim); border-radius: 12px;
  color: var(--field-text); font: inherit; font-size: 18px; padding: 0 16px;
}
.field::placeholder { color: var(--placeholder); }
.field:focus { outline: 3px solid rgba(var(--glow), .5); border-color: var(--brass-lit); }
textarea.field { padding: 14px 16px; min-height: 200px; resize: vertical; line-height: 1.5; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
button:focus-visible, input:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid rgba(var(--glow), .6); outline-offset: 2px; }
input[type="file"] { color: var(--text); font: inherit; font-size: 16px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brass-lit); }

/* ---------- selectable options ---------- */
.opt {
  flex: 1 1 150px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; min-height: 68px; border-radius: 12px; font: inherit; color: var(--text);
  border: 2px solid var(--line); background: var(--well);
}
.opt .lbl { color: var(--brass-title); font-size: 16px; }
.opt .desc { color: var(--muted); font-size: 15px; line-height: 1.35; }
.opt[aria-pressed="true"] { border-color: var(--brass-lit); background: rgba(var(--glow), .14); box-shadow: 0 0 22px rgba(var(--glow), .22); }
.preset { flex: 1 1 110px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 8px; border-radius: 12px; background: var(--well); font: inherit; color: var(--text); border: 2px solid var(--line); }
.preset[aria-pressed="true"] { border-color: var(--brass-lit); }
.preset .swatch { display: block; height: 56px; border-radius: 8px; }
.sw-sunset { background: linear-gradient(160deg, #f28c52, #c4462f 55%, #2a1030); }
.sw-electric { background: linear-gradient(160deg, #3a7bff, #6a2cff 50%, #0d0a2a); }
.sw-fence { background: linear-gradient(160deg, #c2284d, #4a0f26 60%, #0c0610); }
.sw-dusk { background: linear-gradient(160deg, #e6a07a, #6a4a7a 55%, #141428); }
.sw-midnight { background: radial-gradient(circle at 30% 35%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 68% 62%, #cfd6ff 0 1.5px, transparent 2.5px), radial-gradient(circle at 82% 22%, #ffffff 0 1px, transparent 2px), linear-gradient(160deg, #15151c, #08080b); }
.sw-champagne { background: radial-gradient(circle at 28% 62%, transparent 0 6px, rgba(255,205,120,.75) 7px 8px, transparent 9px), radial-gradient(circle at 66% 38%, transparent 0 9px, rgba(255,205,120,.75) 10px 11.5px, transparent 12.5px), linear-gradient(180deg, #120a04, #4a2a0c); }
.sw-overcast { background: linear-gradient(160deg, #5a6a7e, #2c3644 55%, #181e28); }
.sw-aurora { background: linear-gradient(170deg, #050814 20%, #28d890 48%, #9a5aff 70%, #0a0a1e); }

.range-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.range-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--brass); height: 28px; cursor: pointer; }
.range-row .lbl { min-width: 3.2em; text-align: right; color: var(--brass-title); font-size: 18px; }
.songs { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.song { display: grid; gap: 12px; }
.song-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.song-titles { min-width: 0; }
.song-title { font-size: 24px; margin: 0 0 4px; overflow-wrap: anywhere; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; }
.stepper .lbl { color: var(--brass-title); font-size: 18px; text-align: center; }
.check-row { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.check-row input:disabled + span { opacity: .55; cursor: not-allowed; }
.check-row input { width: 22px; height: 22px; margin-top: 2px; }
.section-rule { flex: 1 1 100%; padding-top: 28px; border-top: 1px solid rgba(var(--brass-rgb), .25); }
.col-2 { flex: 2 1 460px; }
.col-1 { flex: 1 1 260px; }

/* ---------- login ---------- */
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login-card { width: 100%; max-width: 540px; padding: 60px 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.login-card img { display: block; }
.login-title { font-size: clamp(30px, 6vw, 44px); }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.sent { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 14px; text-align: left; }

/* ---------- candidates (confirm) ---------- */
.cand { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 36px 36px 36px 44px; cursor: pointer; }
.cand input { width: 24px; height: 24px; flex: 0 0 auto; }
.cand-thumb { flex: 0 0 160px; height: 90px; display: flex; align-items: center; justify-content: center; }
.cand-body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.cand-title { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--brass-title); line-height: 1.2; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line); }
.tag-ok { border: 1px solid var(--brass); color: var(--brass-title); background: rgba(var(--glow), .12); }
.tag-warn { border: 1px solid var(--copper); color: var(--copper-hi); background: rgba(var(--copper-rgb), .12); }
.summary { display: flex; flex-direction: column; gap: 14px; }
.summary dd { font-size: 17px; overflow-wrap: anywhere; }

/* ---------- progress ---------- */
.stages li { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(var(--brass-rgb), .2); }
.stages li:last-child { border-bottom: 0; }
.stages li.active { padding: 18px 0; }
.stages h3 { font-size: 20px; }
.stages li.pending h3 { color: var(--muted); }
.stages li.active h3 { font-size: 22px; color: var(--brass-hi); }
.stage-ico { flex: 0 0 auto; width: 32px; height: 32px; }
.stage-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.bar { height: 16px; padding: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brass-deep), var(--brass-lit) 70%, var(--brass-hi)); box-shadow: 0 0 14px rgba(var(--glow), .5); }
.big-stat { font-family: var(--font-head); font-weight: 700; color: var(--brass-hi); line-height: 1.1; }
.big-stat.xl { font-size: 40px; }
.big-stat.lg { font-size: 28px; color: var(--brass-title); line-height: 1.2; }
.aside-col { flex: 1 1 280px; display: flex; flex-direction: column; gap: 24px; }
@keyframes km-spin { to { transform: rotate(360deg); } }
.spin { animation: km-spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ---------- ready ---------- */
.preview { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #f28c52, #c4462f 55%, #2a1030); border: 2px solid var(--rim); }
.preview::before { content: ""; position: absolute; inset: 0; background: rgba(10, 7, 5, .5); }
.preview-lines { position: absolute; left: 8%; right: 8%; bottom: 10%; display: flex; flex-direction: column; gap: 10px; }
.pl { font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 3.4vw, 38px); line-height: 1.2; color: rgba(255, 255, 255, .4); }
.pl.on { background: linear-gradient(90deg, #ffd76a 0 55%, #ffffff 55% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* a real video inside the preview frame: no tint, no placeholder gradient */
.preview.live { background: #000; }
.preview.live::before { display: none; }
.preview.live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
hr.rule { border: 0; border-top: 1px solid rgba(var(--brass-rgb), .25); width: 100%; }

@media (max-width: 560px) {
  .site-header { padding: 12px 18px; }
  .plate-pad { padding: 40px 28px; }
  .plate-pad-sm { padding: 36px 28px; }
  .login-card { padding: 48px 28px; }
  .cand { padding: 32px 28px; }
}