:root{
  --bg:#edf6f7;
  --panel:#ffffff;
  --line:rgba(0,60,70,.11);
  --text:#0c2224;
  --muted:#547d84;
  --accent:#1aa99f;
  --accent-strong:#0d8f86;
  --warn:#b87700;
  --danger:#cc3333;
  --tv-columns:4;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  background:linear-gradient(135deg, #ddf0f2 0%, #f2fbfc 55%, #e4eef5 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}
.hidden{display:none!important}
.tv-shell,.tv-screen{width:100%;height:100%}
.tv-screen{position:relative}

/* ── PAIR SCREEN ─────────────────────────────── */
.tv-pair-screen{
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:4vh 5vw;
}
.tv-pair-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(16px,1.5vw,26px);
  font-weight:900;
}
.tv-pair-brand img,.tv-display-brand img{
  width:clamp(38px,3.6vw,58px);
  height:clamp(38px,3.6vw,58px);
  object-fit:contain;
}
.tv-brand-easy{color:#0d346b}
.tv-brand-sadaqa{color:var(--accent)}
.tv-pair-panel{
  align-self:center;
  justify-self:center;
  width:min(780px,82vw);
  text-align:center;
  padding:clamp(26px,3.6vw,56px);
  border:1px solid var(--line);
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 12px 48px rgba(0,80,90,.09), 0 2px 8px rgba(0,0,0,.05);
}
.tv-kicker{
  color:var(--accent);
  font-size:clamp(12px,.9vw,18px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.tv-pair-panel h1{
  margin:12px 0 20px;
  font-size:clamp(22px,2.6vw,46px);
  line-height:1.05;
  color:var(--text);
}
.tv-pair-code{
  font-variant-numeric:tabular-nums;
  letter-spacing:.14em;
  font-size:clamp(52px,8vw,128px);
  font-weight:950;
  color:var(--accent);
}
.tv-pair-countdown{
  margin-top:16px;
  color:var(--warn);
  font-size:clamp(14px,1.2vw,24px);
  font-weight:800;
}
.tv-pair-hint{
  margin-top:10px;
  color:var(--muted);
  font-size:clamp(12px,.85vw,16px);
}
.tv-msg{
  min-height:22px;
  color:var(--danger);
  font-size:clamp(12px,.85vw,16px);
  text-align:center;
}

/* ── DISPLAY SCREEN ──────────────────────────── */
.tv-display-screen{
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(14px,1.6vw,26px);
  gap:clamp(10px,1vw,18px);
}
.tv-display-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:clamp(10px,1vw,18px) clamp(14px,1.4vw,24px);
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(0,60,70,.08);
  border:1px solid var(--line);
}
.tv-display-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.tv-display-title{
  font-size:clamp(16px,1.7vw,34px);
  line-height:1;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
}
.tv-display-meta{
  margin-top:3px;
  color:var(--muted);
  font-size:clamp(10px,.78vw,14px);
  font-weight:700;
}
.tv-display-clock{
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  font-size:clamp(20px,2vw,40px);
  font-weight:950;
  flex-shrink:0;
}

/* ── MEMBER BOARD ────────────────────────────── */
.tv-member-board{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(var(--tv-columns), minmax(0, 1fr));
  gap:clamp(5px,.5vw,10px);
}
.tv-member-column{
  min-width:0;
  display:grid;
  align-content:start;
  gap:clamp(4px,.4vw,8px);
}
.tv-member-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(80px, 1fr) minmax(160px, 1.5fr);
  gap:clamp(5px,.5vw,10px);
  align-items:center;
  padding:clamp(6px,.58vw,11px) clamp(8px,.8vw,14px);
  border:1px solid var(--line);
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 1px 4px rgba(0,60,70,.05);
}
.tv-member-name{
  min-width:0;
  font-size:clamp(12px,.9vw,18px);
  line-height:1.12;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
}
.tv-months{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:2px;
}
.tv-month{
  min-width:0;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:5px;
  border:1px solid rgba(0,60,70,.13);
  color:rgba(12,34,36,.35);
  font-size:clamp(6px,.5vw,9px);
  font-weight:900;
  text-transform:uppercase;
}
.tv-month.is-paid{
  background:linear-gradient(135deg, #1aa99f, #5dd6ce);
  border-color:transparent;
  color:#052327;
}
.tv-empty{
  grid-column:1/-1;
  align-self:center;
  justify-self:center;
  color:var(--muted);
  font-size:clamp(16px,1.6vw,32px);
  font-weight:800;
}

/* ── FOOTER ──────────────────────────────────── */
.tv-display-footer{
  display:grid;
  grid-template-columns:auto minmax(160px,1fr) auto;
  gap:12px;
  align-items:center;
  color:var(--muted);
  font-size:clamp(11px,.78vw,16px);
  font-weight:800;
}
.tv-progress{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,80,90,.09);
}
.tv-progress span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.tv-partition-label{text-align:right}

@media (max-width: 900px){
  body{overflow:auto}
  .tv-display-screen{height:auto;min-height:100%}
  .tv-display-head,.tv-display-footer{grid-template-columns:1fr;display:grid}
  .tv-display-clock,.tv-partition-label{text-align:left}
  .tv-member-board{grid-template-columns:1fr}
  .tv-member-row{grid-template-columns:1fr}
}