/* ============================================================
   STREAMARENA — design tokens
   Subject: Indonesian live sports broadcast aggregator.
   Signature: LED ticker + tally-light "ON AIR" indicator +
   lower-third title treatment, borrowed from broadcast graphics.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* color */
  --bg-base:      #0B0F0E;   /* night pitch */
  --bg-panel:     #121815;
  --bg-panel-2:   #161E1A;
  --line:         #223028;
  --text-primary: #F2F5F1;
  --text-muted:   #8B9A91;
  --text-dim:     #5C6B63;
  --accent-live:    #FF3B30; /* tally light red */
  --accent-live-dim:#5A1E1B;
  --accent-upcoming:#E8B339; /* floodlight amber */
  --accent-pitch:   #4CD787; /* pitch green */
  --accent-pitch-dim:#173626;

  /* type */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --radius: 10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--f-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

::selection{ background:var(--accent-pitch); color:#06120a; }

:focus-visible{
  outline:2px solid var(--accent-pitch);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------- layout shell ---------- */
.shell{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- LED ticker (signature element) ---------- */
.ticker{
  background:#000;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  height:34px;
  display:flex;
  align-items:center;
}
.ticker__track{
  display:inline-flex;
  align-items:center;
  gap:48px;
  padding-left:48px;
  animation:ticker-scroll 28s linear infinite;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--accent-pitch);
}
.ticker__track span{ display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); }
.ticker__track b{ color:var(--accent-live); font-weight:600; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker--empty .ticker__track{ animation:none; padding-left:20px; color:var(--text-dim); }

/* ---------- header ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; }
.brand{
  font-family:var(--f-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:.01em;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.brand small{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--accent-pitch);
  font-weight:500;
  letter-spacing:.08em;
}
.topnav{ display:flex; align-items:center; gap:22px; font-size:13px; color:var(--text-muted); }
.topnav a{ transition:color .15s; }
.topnav a:hover{ color:var(--text-primary); }

/* ---------- tally / live badge ---------- */
.tally{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-live);
  background:rgba(255,59,48,.1);
  border:1px solid rgba(255,59,48,.35);
  padding:4px 8px 4px 6px;
  border-radius:4px;
}
.tally__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-live);
  box-shadow:0 0 0 0 rgba(255,59,48,.6);
  animation:tally-pulse 1.4s ease-out infinite;
}
@keyframes tally-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.55); }
  70%{ box-shadow:0 0 0 6px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

/* ---------- viewer count badge ---------- */
.viewer-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.viewer-count::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ca099'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .75;
}

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px;
}
.badge--upcoming{ color:var(--accent-upcoming); background:rgba(232,179,57,.1); border:1px solid rgba(232,179,57,.35); }
.badge--ended{ color:var(--text-dim); background:rgba(140,150,145,.08); border:1px solid var(--line); }

/* ---------- section label (lower-third strip) ---------- */
.section-strip{
  display:flex; align-items:center; gap:12px;
  margin:36px 0 16px;
}
.section-strip__bar{ width:5px; height:22px; border-radius:2px; }
.section-strip--live .section-strip__bar{ background:var(--accent-live); }
.section-strip--upcoming .section-strip__bar{ background:var(--accent-upcoming); }
.section-strip--ended .section-strip__bar{ background:var(--text-dim); }
.section-strip h2{
  font-family:var(--f-display); font-weight:800; font-size:20px;
  letter-spacing:.02em; text-transform:uppercase; margin:0;
}
.section-strip__count{
  font-family:var(--f-mono); font-size:12px; color:var(--text-dim);
}

/* ---------- match grid + card ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:18px;
}
.card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .15s, transform .15s;
  display:flex; flex-direction:column;
}
.card:hover{ border-color:#33453a; transform:translateY(-2px); }
.card__media{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#16201b,#0c1310);
  overflow:hidden;
}
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__top{
  position:absolute; top:8px; left:8px; right:8px;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.card__comp{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted);
  background:rgba(0,0,0,.55); padding:3px 6px; border-radius:4px;
}
.card__lower{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 12px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
}
.card__title{
  font-family:var(--f-display); font-weight:700; font-size:18px;
  line-height:1.15; margin:0;
}
.card__body{ padding:10px 12px 14px; display:flex; justify-content:space-between; align-items:center; }
.card__time{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-dim); }
.card__cta{ font-size:12px; color:var(--accent-pitch); font-weight:600; }

.empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:30px; text-align:center; color:var(--text-dim);
  font-family:var(--f-mono); font-size:13px;
}

footer.site{ margin:60px 0 30px; text-align:center; color:var(--text-dim); font-size:12px; font-family:var(--f-mono); }

/* ---------- watch page ---------- */
.player-wrap{ margin-top:20px; }
.player-frame{
  position:relative; background:#000; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line);
}
.player-frame video{ width:100%; display:block; aspect-ratio:16/9; background:#000; }
.player-lower{
  position:absolute; left:0; bottom:0; right:0;
  padding:30px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  transform:translateY(0);
  animation:lower-in .5s ease-out;
  pointer-events:none;
}
@keyframes lower-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.player-lower h1{ font-family:var(--f-display); font-weight:800; font-size:22px; margin:0 0 4px; }
.player-lower .comp{ font-family:var(--f-mono); font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }

.meta-row{ display:flex; gap:10px; margin:16px 0 6px; flex-wrap:wrap; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:12px; color:var(--text-muted);
  border:1px solid var(--line); padding:7px 12px; border-radius:6px;
  margin-bottom:18px;
}
.back-link:hover{ color:var(--text-primary); border-color:#33453a; }
.info-panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-top:16px; color:var(--text-muted); font-size:13.5px; line-height:1.6;
}
.player-error{
  padding:18px; text-align:center; color:var(--accent-upcoming);
  font-family:var(--f-mono); font-size:13px;
}

/* ---------- upcoming / ended overlay (inside player-frame) ---------- */
.upcoming-overlay{
  aspect-ratio:16/9;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(76,215,135,.07), transparent 60%),
    linear-gradient(160deg,#141d18,#0a0f0c);
}
.upcoming-title{
  font-family:var(--f-display); font-weight:800; font-size:clamp(20px,4vw,30px);
  line-height:1.15; max-width:560px; margin-bottom:6px;
}
.upcoming-sched{
  font-family:var(--f-mono); font-size:12.5px; color:var(--text-muted);
  margin-bottom:22px;
}
.countdown-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.countdown-label{
  font-family:var(--f-mono); font-size:10.5px; color:var(--text-dim);
  letter-spacing:.12em; text-transform:uppercase;
}
.countdown{ display:flex; align-items:center; gap:10px; }
.cd-block{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.cd-val{
  font-family:var(--f-display); font-weight:800; font-size:clamp(26px,5vw,40px);
  color:var(--accent-upcoming); line-height:1; min-width:1.4em;
}
.cd-label{
  font-family:var(--f-mono); font-size:10px; color:var(--text-dim);
  letter-spacing:.08em;
}
.cd-sep{
  font-family:var(--f-display); font-weight:800; font-size:clamp(22px,4vw,32px);
  color:var(--text-dim); align-self:flex-start; margin-top:2px;
}

.ended-overlay{
  background:
    radial-gradient(circle at 50% 35%, rgba(140,150,145,.06), transparent 60%),
    linear-gradient(160deg,#16191a,#0a0c0c);
}
.ended-msg{
  font-family:var(--f-mono); font-size:13px; color:var(--text-dim);
  letter-spacing:.03em; margin-top:4px;
}

/* ---------- server selector (watch.html) ---------- */
.server-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px;
}
.server-row__label{
  font-family:var(--f-mono); font-size:11px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.05em; margin-right:4px;
}
.server-btn{
  font-family:var(--f-mono); font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--line); background:transparent; color:var(--text-muted);
  transition:all .15s;
}
.server-btn:hover{ border-color:var(--accent-pitch); color:var(--accent-pitch); }
.server-btn.active{
  background:var(--accent-pitch); border-color:var(--accent-pitch); color:#06140b;
}

/* ============================================================
   Admin "control room" panel — same palette, flatter & denser,
   utility-mono forward, no broadcast flourishes.
   ============================================================ */
.admin-shell{ max-width:980px; margin:0 auto; padding:0 20px 60px; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-card{
  width:100%; max-width:360px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px;
}
.login-card .brand{ margin-bottom:4px; }
.login-card p.sub{ color:var(--text-dim); font-family:var(--f-mono); font-size:11.5px; margin:0 0 22px; letter-spacing:.04em; }
.field{ margin-bottom:14px; }
.field label{
  display:block; font-family:var(--f-mono); font-size:11px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-base); border:1px solid var(--line); color:var(--text-primary);
  border-radius:6px; padding:9px 11px; font-family:var(--f-body); font-size:14px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent-pitch); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--accent-pitch); background:var(--accent-pitch); color:#06140b;
  font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:6px; width:100%;
  transition:opacity .15s;
}
.btn:hover{ opacity:.88; }
.btn--ghost{ background:transparent; color:var(--text-muted); border-color:var(--line); width:auto; }
.btn--danger{ background:transparent; color:var(--accent-live); border-color:var(--accent-live-dim); width:auto; }
.btn--small{ padding:6px 11px; font-size:12px; width:auto; }
.form-msg{ font-family:var(--f-mono); font-size:12px; margin-top:10px; min-height:14px; }
.form-msg--err{ color:var(--accent-live); }
.form-msg--ok{ color:var(--accent-pitch); }

.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.admin-topbar .who{ font-family:var(--f-mono); font-size:12px; color:var(--text-dim); }

.panel{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:24px;
}
.panel h3{
  font-family:var(--f-display); font-weight:700; font-size:16px; text-transform:uppercase;
  letter-spacing:.03em; margin:0 0 16px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.form-grid .full{ grid-column:1/-1; }

/* ---------- server link rows (admin form) ---------- */
.server-links{ display:flex; flex-direction:column; gap:8px; }
.server-link-row{
  display:flex; align-items:center; gap:8px;
}
.server-link-row .server-link-label{
  flex:0 0 96px;
  background:var(--bg-base); border:1px solid var(--line); color:var(--text-muted);
  border-radius:6px; padding:9px 10px; font-family:var(--f-mono); font-size:12.5px;
}
.server-link-row .server-link-url{
  flex:1; min-width:0;
  background:var(--bg-base); border:1px solid var(--line); color:var(--text-primary);
  border-radius:6px; padding:9px 11px; font-family:var(--f-body); font-size:14px;
}
.server-link-row .server-link-url:focus, .server-link-row .server-link-label:focus{
  border-color:var(--accent-pitch);
}
.server-link-remove{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:transparent; border:1px solid var(--accent-live-dim); color:var(--accent-live);
  border-radius:6px; font-size:16px; line-height:1;
  transition:background .15s, opacity .15s;
}
.server-link-remove:hover{ background:rgba(255,59,48,.1); }
.server-link-remove:disabled{ opacity:.35; cursor:not-allowed; }
.server-link-add{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  align-self:flex-start;
  margin-top:4px;
  background:transparent; border:1px dashed var(--line); color:var(--accent-pitch);
  border-radius:6px; padding:8px 14px; font-family:var(--f-mono); font-size:12px; font-weight:600;
  transition:border-color .15s, background .15s;
}
.server-link-add:hover{ border-color:var(--accent-pitch); background:var(--accent-pitch-dim); }
.server-link-add svg{ width:13px; height:13px; }

table.match-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.match-table th{
  text-align:left; font-family:var(--f-mono); font-size:10.5px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--line);
}
table.match-table td{ padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.match-table tr:last-child td{ border-bottom:none; }
.row-actions{ display:flex; gap:6px; }
.status-select{
  background:var(--bg-base); color:var(--text-primary); border:1px solid var(--line);
  border-radius:5px; padding:5px 8px; font-family:var(--f-mono); font-size:11.5px;
}
.status-hint{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:6px;
  font-family:var(--f-mono); font-size:10.5px; color:var(--accent-upcoming);
}
.status-hint__apply{
  background:transparent; border:1px solid var(--accent-upcoming); color:var(--accent-upcoming);
  border-radius:4px; padding:2px 7px; font-family:var(--f-mono); font-size:10px; font-weight:600;
  transition:background .15s;
}
.status-hint__apply:hover{ background:rgba(232,179,57,.12); }

@media (max-width: 720px){
  .form-grid{ grid-template-columns:1fr; }
  .topnav{ gap:14px; font-size:12px; }
  .brand{ font-size:22px; }
}