/* ==========================================================================
   DDTV — "ON AIR" broadcast console theme
   Hand-written CSS (replaces the previous compiled-Tailwind build).
   One place for the whole visual system: edit tokens below.
   ========================================================================== */

:root{
  --ink:        #FFFFFF;   /* page base — white                      */
  --console:    #F8F8F7;   /* panel surface (clean near-white)       */
  --console-2:  #F0F0EE;   /* raised surface / inputs / hover        */
  --line:       rgba(32,22,14,.10);
  --line-2:     rgba(32,22,14,.20);

  --signal:     #E8560C;   /* DDTV signal orange                     */
  --signal-2:   #FF7A2E;
  --brand:      #EA580C;   /* true brand orange (solid fills)        */
  --ink-orange: #C2410C;   /* darker orange for text on white (AA)   */
  --amber:      #B45309;   /* deep phosphor amber — readouts on light*/
  --paper:      #211913;   /* primary text — warm near-black         */
  --muted:      #766A5E;   /* secondary text                         */
  --live:       #FF3B30;   /* on-air red dot                         */

  --f-display: 'Chakra Petch','Noto Sans SC',system-ui,sans-serif;
  --f-body:    'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --f-mono:    'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --col: 30rem;            /* content column width                   */
  --r:   14px;             /* panel radius (broadcast-gear small)    */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--f-body);
  background-color:var(--ink);
  color:var(--paper);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* ambient signal bloom, top-centre */
  background-image:
    radial-gradient(120% 58% at 50% -10%, rgba(232,86,12,.09), transparent 60%),
    radial-gradient(90% 40% at 50% 0%, rgba(180,83,9,.04), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

svg.ic,svg.ic-brand{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.ic-brand{fill:currentColor;stroke:none}

/* ---------- layout column ---------- */
.wrap{
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding:1.25rem 1.15rem 0;
  flex:1 0 auto;
}

/* ---------- header / console bar ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:var(--col);margin-inline:auto;
  height:3.5rem;padding-inline:1.15rem;
  display:flex;align-items:center;justify-content:space-between;
}
.wordmark{
  font-family:var(--f-display);font-weight:700;font-size:1.4rem;
  letter-spacing:.02em;color:var(--paper);line-height:1;
  display:inline-flex;align-items:center;gap:.05em;
}
.wordmark b{color:var(--signal);font-weight:700}
.brand{display:inline-flex;align-items:center}
.brand img{height:1.55rem;width:auto;display:block}

/* ---------- language switch ---------- */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.4rem .55rem .4rem .7rem;
  border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--f-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.06em;color:var(--paper);
  transition:border-color .15s,background-color .15s;
}
.lang-btn:hover{border-color:var(--signal);background:rgba(255,106,26,.08)}
.lang-btn .ic{width:.9rem;height:.9rem;color:var(--muted)}
.lang-btn .caret{width:.75rem;height:.75rem;color:var(--muted);transition:transform .2s}
.lang-menu{
  position:absolute;right:0;top:calc(100% + .55rem);width:13rem;
  background:var(--console-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:.4rem;
  box-shadow:0 18px 40px -14px rgba(32,22,14,.22);
  z-index:60;
}
.lang-menu.hidden{display:none}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.65rem .75rem;border-radius:9px;
  font-size:.9rem;font-weight:500;color:var(--muted);
  transition:background-color .12s,color .12s;
}
.lang-menu a:hover{background:rgba(32,22,14,.05);color:var(--paper)}
.lang-menu a.active{color:var(--signal);font-weight:600}
.lang-menu a.active .ic{width:1rem;height:1rem}

/* ==========================================================================
   HERO — signal monitor
   ========================================================================== */
.monitor{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,106,26,.05), transparent 40%),
    var(--console);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  padding:.7rem 1.25rem .85rem;
  margin-top:.5rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(32,22,14,.04), 0 18px 40px -26px rgba(32,22,14,.22);
}
/* viewfinder corner brackets */
.corner{position:absolute;width:15px;height:15px;pointer-events:none}
.corner.tl{top:9px;left:9px;border-top:2px solid var(--signal);border-left:2px solid var(--signal)}
.corner.tr{top:9px;right:9px;border-top:2px solid var(--signal);border-right:2px solid var(--signal)}
.corner.bl{bottom:9px;left:9px;border-bottom:2px solid var(--signal);border-left:2px solid var(--signal)}
.corner.br{bottom:9px;right:9px;border-bottom:2px solid var(--signal);border-right:2px solid var(--signal)}

.status{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding:.05rem .3rem .1rem;
}
.live{display:inline-flex;align-items:center;gap:.4rem;color:var(--paper);font-weight:700}
.live .dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(255,59,48,.55);
  animation:pulse 1.8s ease-out infinite;
}
.tc{color:var(--amber)}

/* signature: live equalizer waveform */
.wave-wrap{
  position:relative;height:32px;margin:.6rem 0 .65rem;
  display:flex;align-items:flex-end;justify-content:center;gap:3px;
}
.wave-wrap::before{ /* baseline sweep line */
  content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent);
}
.wave-wrap span{
  flex:0 0 auto;width:5px;height:100%;
  transform-origin:bottom;transform:scaleY(.3);
  border-radius:2px;
  background:linear-gradient(180deg,var(--signal-2),var(--brand));
  box-shadow:0 0 5px rgba(232,86,12,.2);
  animation:eq 1.1s ease-in-out infinite;
  animation-delay:calc(var(--i) * -73ms);
}
.wave-wrap span:nth-child(3n){animation-duration:1.5s}
.wave-wrap span:nth-child(4n){animation-duration:.92s}
.wave-wrap span:nth-child(5n){animation-duration:1.32s;background:linear-gradient(180deg,#F2A03C,var(--brand))}

.hero-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.3rem,5.6vw,1.6rem);line-height:1.08;
  letter-spacing:-.01em;text-align:center;color:var(--paper);
}
.hero-sub{
  text-align:center;color:var(--muted);font-size:.86rem;
  margin-top:.3rem;max-width:22rem;margin-inline:auto;
}

/* ==========================================================================
   Section eyebrows
   ========================================================================== */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:1.9rem .2rem .85rem;
}
.eyebrow::before{content:"";width:.55rem;height:.55rem;background:var(--signal);border-radius:1px;transform:rotate(45deg);flex:0 0 auto}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* ==========================================================================
   Mirrors (domains) — tuner readouts, tap to copy
   ========================================================================== */
.mirrors{display:flex;flex-direction:column;gap:.6rem}
.mirror{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:left;
  background:var(--console);border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;
  box-shadow:0 1px 2px rgba(32,22,14,.04);
  transition:border-color .15s,background-color .15s,transform .08s;
}
.mirror:hover{border-color:var(--line-2);background:var(--console-2)}
.mirror:active{transform:scale(.985)}
.mirror-role{
  font-size:.82rem;font-weight:600;color:var(--muted);
  letter-spacing:.01em;
}
.mirror-val{
  display:inline-flex;align-items:center;gap:.55rem;flex:0 0 auto;
  font-family:var(--f-mono);font-weight:700;font-size:1.05rem;
  color:var(--ink-orange);transition:color .2s;
}
.mirror-val .ic{width:1rem;height:1rem;color:var(--muted);transition:color .2s}
.mirror:hover .mirror-val .ic{color:var(--signal)}
.mirror.copied .mirror-val,
.mirror.copied .mirror-val .ic{color:#059669}

/* ==========================================================================
   Downloads
   ========================================================================== */
.downloads{display:flex;flex-direction:column;gap:.7rem}
.dl{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  width:100%;padding:1rem 1.25rem;border-radius:12px;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  letter-spacing:.01em;
  transition:transform .08s,box-shadow .2s,background-color .2s,border-color .2s;
}
.dl .ic-brand{width:1.25rem;height:1.25rem;flex:0 0 auto}
.dl:active{transform:scale(.97)}
.dl.primary{
  background:linear-gradient(180deg,#F0631A,#D9490A);
  color:#fff;
  box-shadow:0 8px 22px -6px rgba(217,73,10,.5);
}
.dl.primary:hover{box-shadow:0 10px 28px -6px rgba(217,73,10,.62)}
.dl.ghost{
  background:var(--console);
  border:1px solid var(--line-2);
  color:var(--paper);
}
.dl.ghost:hover{border-color:var(--signal);color:var(--signal)}

.meta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.55rem;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;
  color:var(--muted);
}
.meta i{color:var(--line-2);font-style:normal}
.meta b{color:var(--amber);font-weight:400}

/* ==========================================================================
   Support module
   ========================================================================== */
.support{
  margin-top:2rem;
  background:var(--console);border:1px solid var(--line);
  border-radius:var(--r);padding:1.25rem 1.25rem 1.35rem;
  box-shadow:0 1px 2px rgba(32,22,14,.04), 0 16px 36px -28px rgba(32,22,14,.2);
}
.support-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
.support-title{font-family:var(--f-display);font-weight:600;font-size:1.15rem;color:var(--paper)}
.onair{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:.28rem .55rem;
}
.onair .dot{width:.42rem;height:.42rem;border-radius:50%;background:#10B981;box-shadow:0 0 6px rgba(16,185,129,.6)}
.support-desc{color:var(--muted);font-size:.9rem;margin:.35rem 0 1.1rem;line-height:1.6}
.support-btn{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.85rem 1.25rem;border-radius:11px;
  background:var(--console-2);border:1px solid var(--line-2);
  color:var(--paper);font-weight:600;font-size:.95rem;
  transition:transform .08s,border-color .2s,color .2s,background-color .2s;
}
.support-btn .ic{width:1.05rem;height:1.05rem}
.support-btn:hover{border-color:var(--signal);color:var(--signal)}
.support-btn:active{transform:scale(.98)}

/* ==========================================================================
   Footer — station ID
   ========================================================================== */
.slate{
  margin-top:2.25rem;padding:1.75rem 1.15rem 2rem;
  text-align:center;
}
.slate p{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
}
.slate .sep{color:var(--line-2)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.75rem;transform:translateX(-50%);
  z-index:100;max-width:calc(100% - 2.5rem);text-align:center;
  padding:.75rem 1.15rem;border-radius:999px;
  background:#211913;border:1px solid rgba(255,255,255,.08);
  color:#F6F1EA;font-size:.85rem;font-weight:600;
  box-shadow:0 14px 34px -10px rgba(32,22,14,.4);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes eq{0%,100%{transform:scaleY(.26)}50%{transform:scaleY(1)}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.5)}
  70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}
}
@keyframes rise{to{opacity:1;transform:none}}

.rise{}
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* freeze the waveform at its static silhouette instead of a flat block */
  .wave-wrap span{transform:scaleY(var(--h,.5))}
}

/* ---------- fine tuning for very small phones ---------- */
@media (max-width:360px){
  .wrap{padding-inline:.9rem}
  .mirror-val{font-size:.95rem}
}