@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#07101d;--panel:#101d2d;--panel2:#14243a;--line:#263b54;--muted:#9aacc1;--text:#f4f8ff;--cyan:#40e0d0;--blue:#5798ff;--orange:#ff9d45;--red:#ff5e6c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 12% 0%,#12385a66,transparent 40%),radial-gradient(ellipse at 90% 15%,#075e5b33,transparent 35%);z-index:-1}
.topbar{height:76px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1160px)/2));background:#07101dcc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:900;letter-spacing:1px}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#07101d;font:900 26px 'Barlow Condensed'}
.brand small{display:block;font-size:8px;letter-spacing:2px;color:var(--muted);margin-top:2px}
.accent{color:var(--cyan)}
.top-actions{display:flex;align-items:center;gap:14px}
.shell{max-width:1160px;margin:auto;padding:42px 22px 30px}
.hero{padding:38px 0 42px}
.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:900;color:var(--cyan)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:7px}
h1{font:900 clamp(54px,9vw,92px)/.88 'Barlow Condensed',sans-serif;letter-spacing:-1px;margin:18px 0}
.gradient-text{background:linear-gradient(90deg,var(--cyan),#8bb8ff);background-clip:text;color:transparent}
.hero-copy{color:var(--muted);font-size:15px}
.creator{margin-top:28px;border:1px solid #40e0d044;background:linear-gradient(110deg,#102c3a99,#14243a99);border-radius:16px;padding:17px 22px;display:inline-flex;flex-direction:column;gap:4px}
.creator-kicker{font-size:9px;letter-spacing:3px;color:var(--muted);font-weight:800}
.creator strong{font:900 34px 'Barlow Condensed';letter-spacing:1px;color:var(--cyan)}
.creator span:last-child{font-size:9px;letter-spacing:2px;color:#c0d0e4;font-weight:800}
.panel{background:linear-gradient(145deg,#122237f2,#0d1928f2);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 14px 50px #0002}
.panel-head,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h2,.panel-head h3,.section-heading h2{margin:5px 0 0}
.section-heading{margin:38px 0 18px}
.section-heading h2{font:800 32px 'Barlow Condensed';letter-spacing:.5px}
.section-heading .eyebrow{display:block}
.muted{color:var(--muted)}
.small{font-size:11px}
.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer;font-size:12px}
.btn-primary{background:linear-gradient(100deg,var(--cyan),#72b7ff);color:#06111e}
.btn-ghost{background:#1b3048;color:#e9f3ff;border:1px solid #34506d}
.btn-danger{background:#512332;color:#ffdce1;border:1px solid #a94358}
.icon-btn{background:none;color:white;border:0;font-size:20px;cursor:pointer}
.stack{display:grid;gap:14px;margin-top:18px}
label{display:grid;gap:7px;font-size:11px;font-weight:800;color:#c8d6e6;letter-spacing:.3px}
input,textarea,select{width:100%;background:#091522;border:1px solid #30465f;border-radius:9px;padding:12px;color:white;font:500 13px Inter;outline:none}
textarea{min-height:74px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--cyan)}
.two-col,.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inline-form{display:flex;gap:10px;margin-top:18px}
.inline-form input{flex:1}
.access-list{margin-top:16px;display:grid;gap:8px}
.access-item{display:flex;justify-content:space-between;align-items:center;background:#091522;padding:10px 12px;border-radius:9px;font-size:12px}
.role-pill,.status-pill{font-size:9px;letter-spacing:1.5px;font-weight:900;border:1px solid #40e0d055;color:var(--cyan);border-radius:99px;padding:7px 10px}
.status-pill{color:#b7c9dd;border-color:#40536a}
.score-hero{padding:26px}
.score-meta{display:flex;justify-content:space-between;align-items:center}
.teams-line{display:flex;align-items:center;gap:13px;margin-top:20px;font:800 clamp(19px,4vw,30px) 'Barlow Condensed';letter-spacing:.6px}
.vs{font:700 10px Inter;color:var(--muted)}
.big-score{display:flex;align-items:baseline;gap:15px;margin:12px 0}
.big-score strong{font:900 clamp(55px,10vw,78px)/1 'Barlow Condensed';color:white}
.big-score span{color:var(--muted);font-size:12px}
.target-line{font-size:12px;color:var(--orange);min-height:17px}
.score-strip{display:flex;gap:34px;border-top:1px solid #ffffff14;padding-top:16px;margin-top:18px}
.score-strip div{display:grid;gap:5px}
.score-strip small{font-size:9px;color:var(--muted);letter-spacing:1px}
.score-strip b{font:700 20px 'Barlow Condensed'}
.score-table{margin-top:15px;display:grid;gap:9px}
.table-head,.table-row{display:grid;grid-template-columns:minmax(80px,1fr) repeat(4,35px);gap:5px;align-items:center;font-size:11px}
.table-head{color:var(--muted);font-size:9px;letter-spacing:.6px}
.table-row b{font-size:12px}
.table-row span:not(:first-child),.table-head span:not(:first-child){text-align:center}
.balls{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.ball{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1b3048;font-size:11px;font-weight:900}
.ball.boundary{background:#225b64;color:#9ff8ee}
.ball.wicket{background:#672b3b;color:#ffdce1}
.score-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}
.score-buttons button{background:#1b3048;border:1px solid #38516d;color:white;border-radius:10px;padding:14px 5px;font-weight:900;font-size:15px;cursor:pointer}
.score-buttons .four{background:#174b53;border-color:#2d9a9c}
.score-buttons .six{background:#24466e;border-color:#4d91d9}
.score-buttons .wicket{background:#672b3b;border-color:#a94358;font-size:11px;grid-column:span 2}
.control-row{display:flex;align-items:end;gap:10px;margin-top:12px;flex-wrap:wrap}
.control-row label{flex:1;min-width:130px}
.empty{text-align:center;padding:40px 20px}
.empty-icon{font-size:36px}
.empty h3{margin:10px 0 5px}
.hidden{display:none!important}
footer{text-align:center;padding:28px 10px;color:var(--muted);font-size:10px;letter-spacing:1.5px;border-top:1px solid #ffffff12;margin-top:38px}
footer strong{color:white}
footer span{display:block;color:var(--cyan);font-weight:900;margin-top:9px}
footer small{display:block;letter-spacing:0;margin-top:8px}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e9f7ff;color:#07101d;padding:12px 18px;border-radius:12px;font-size:12px;font-weight:800;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){
.shell{padding:26px 14px}
.topbar{padding:0 14px;height:66px}
.top-actions .muted{display:none}
.hero{padding-top:26px}
.two-col,.grid-two{grid-template-columns:1fr}
.panel{padding:17px}
.score-strip{justify-content:space-between;gap:10px}
.score-buttons{grid-template-columns:repeat(3,1fr)}
.score-buttons .wicket{grid-column:span 3}
.inline-form{flex-direction:column}
.teams-line{flex-wrap:wrap}
.control-row .btn{flex:1}
.table-head,.table-row{grid-template-columns:minmax(75px,1fr) repeat(4,28px)}
}