/* Cricket League Broadcast System — control app styling */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;800&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root{
  --bg:#0a1512; --bg2:#0f1f1a; --card:#122622; --line:#1e3a32;
  --ink:#e8f5ef; --dim:#7fa596; --accent:#35d38a; --warn:#e6b400;
  --bad:#e0564a; --six:#a06bff;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Barlow Condensed',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px}
h1,h2,h3{font-family:var(--disp);letter-spacing:.02em;margin:0}
a{color:var(--accent)}

.wrap{max-width:1080px;margin:0 auto;padding:16px}
.topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.brand{font-family:var(--disp);font-size:22px;font-weight:800;margin-right:auto}
.brand span{color:var(--accent)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);
  color:var(--dim);cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tab.on{background:var(--accent);color:#04120c;border-color:var(--accent)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.card h3{font-size:16px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{min-width:0}
.grow{flex:1}
label{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:9px 10px;font-family:var(--mono);font-size:13px}
input[type=color]{padding:2px;height:38px;cursor:pointer}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.field{margin-bottom:10px}

button{font-family:var(--mono);font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg2);color:var(--ink);padding:9px 14px;transition:transform .06s}
button:hover{border-color:var(--accent)}
button:active{transform:scale(.97)}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:var(--accent);color:#04120c;border-color:var(--accent)}
button.danger{background:#3a1512;border-color:#63241e;color:#ffb4ac}
button.ghost{background:transparent}
button.sm{padding:5px 9px;font-size:11px}

.keypad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.keypad button{font-family:var(--disp);font-size:30px;font-weight:800;padding:14px 0;background:#123a2b;border-color:#1c5240}
.keypad button.four{background:#7fc93f;color:#0a1512;border-color:#7fc93f}
.keypad button.six{background:var(--warn);color:#0a1512;border-color:var(--warn)}
.extras{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.extras button.out{background:#7d211a;border-color:#a32b22;color:#fff}

.scorestrip{display:flex;align-items:baseline;gap:12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-bottom:12px;flex-wrap:wrap}
.scorestrip .big{font-family:var(--disp);font-size:34px;font-weight:800;line-height:1}
.scorestrip .ov{color:var(--dim);font-size:13px}
.scorestrip .right{margin-left:auto;text-align:right;font-size:12px;color:var(--dim)}

.balls{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.pill{min-width:26px;height:26px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;padding:0 7px;background:#1b3830;color:var(--ink)}
.pill.b4{background:#7fc93f;color:#08150f}
.pill.b6{background:var(--warn);color:#08150f}
.pill.bw{background:var(--bad);color:#fff}
.pill.be{background:#2f5c7d;color:#dff0ff}
.pill.b0{background:#16302a;color:var(--dim)}

table{width:100%;border-collapse:collapse;font-size:12px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px;font-size:12px;margin:3px 3px 3px 0}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.logo{width:22px;height:22px;object-fit:contain;border-radius:4px;background:#0006}

.teamcard{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--bg2)}
.plist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

.panelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.panelgrid button{text-align:left;font-size:12px;padding:10px;line-height:1.35}
.panelgrid button.live{background:var(--accent);color:#04120c;border-color:var(--accent)}

.note{font-size:11px;color:var(--dim);line-height:1.6;margin-top:8px}
/* Sits above the page, so it must never swallow clicks meant for the keypad. */
.status{position:fixed;right:14px;bottom:14px;background:#0d2b20;border:1px solid #1f6f4d;border-radius:10px;
  padding:7px 10px;font-size:10px;color:#9fe7c4;z-index:99;max-width:270px;box-shadow:0 6px 22px #0008;
  pointer-events:none;opacity:.92}
.status b{color:#fff;word-break:break-all}
.status.bad{background:#2b0f0d;border-color:#6f2a24;color:#ffb4ac}
.hide{display:none!important}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.split{grid-template-columns:1fr}.keypad{grid-template-columns:repeat(3,1fr)}.extras{grid-template-columns:repeat(3,1fr)}}