/* ===========================================================
   ET-Chat · Rottal Radio Theme
   Design tokens derived from the radio site
   =========================================================== */
:root{
  --bg:#0a0807;
  --bg-2:#0d0a09;
  --surface:#15110f;
  --surface-2:#1b1613;
  --surface-3:#221b17;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.12);

  --orange:#ff4d1f;
  --orange-bright:#ff5f2e;
  --orange-hi:#ff7a4d;
  --orange-deep:#d63a12;
  --orange-glow:rgba(255,77,31,.45);

  --text:#f5f1ee;
  --text-dim:#b3a89f;
  --text-mut:#84776e;
  --text-faint:#5b5048;

  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;

  --shadow:0 28px 70px -28px rgba(0,0,0,.85);
  --ring:0 0 0 1px var(--line);

  --display:"Archivo",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
#root{height:100%}
::selection{background:var(--orange);color:#160a05}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#2a221d;border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#3a2f28;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---- shared atoms ---- */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:9px;
}
.display{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:.96;
  margin:0;
}
.accent{color:var(--orange)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text-dim);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 var(--orange-glow);animation:pulse 2.4s infinite}
.pill.on-air{border-color:rgba(255,77,31,.45);color:var(--orange-hi);background:rgba(255,77,31,.06)}
.pill.live{background:var(--orange);color:#1a0a04;border-color:transparent}
.pill.live .dot{background:#1a0a04;box-shadow:none;animation:none}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--orange-glow)}
  70%{box-shadow:0 0 0 7px rgba(255,77,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,31,0)}
}

.btn{
  font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.01em;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);
  padding:13px 20px;border-radius:13px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--surface-3);border-color:var(--line-strong);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(180deg,var(--orange-bright),var(--orange-deep));
  border-color:transparent;color:#fff;
  box-shadow:0 10px 30px -10px var(--orange-glow),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.btn.ghost{background:transparent}

/* ---- logo ---- */
.logo{display:inline-flex;align-items:center;gap:11px;user-select:none}
.logo-mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,var(--orange-bright),var(--orange-deep));
  display:grid;place-items:center;
  box-shadow:0 6px 16px -6px var(--orange-glow),inset 0 1px 0 rgba(255,255,255,.3);
}
.logo-mark .bars{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.logo-mark .bars i{width:2.5px;background:#160a05;border-radius:2px;display:block}
.logo-word{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1}
.logo-word .b{color:var(--orange)}

/* avatar chip (RR badge) */
.rr{
  display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;color:#fff;
  background:radial-gradient(circle at 50% 35%,#3a1409,#140805);
  border:1px solid rgba(255,77,31,.35);border-radius:9px;
}
.rr .rr-in{color:var(--orange-hi)}

.card{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
}

.field-label{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mut);
}
input.txt{
  width:100%;background:var(--bg);border:1px solid var(--line-strong);
  border-radius:12px;color:var(--text);font-family:var(--body);
  font-size:16px;padding:14px 15px;outline:none;transition:border-color .15s,box-shadow .15s;
}
input.txt::placeholder{color:var(--text-faint)}
input.txt:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,77,31,.16)}

.fade-up{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .fade-up{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}