@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');
:root { --ink:#17201e; --muted:#70807a; --paper:#f7f5ef; --card:#fffefa; --line:#e2e5dc; --gold:#c79a44; --green:#236d57; --dark:#111817; }
* { box-sizing:border-box; } body { margin:0; font:15px/1.5 Manrope,Arial,sans-serif; color:var(--ink); background:var(--paper); } button,input,textarea,select { font:inherit; } button,a { cursor:pointer; } a { color:inherit; text-decoration:none; } h1,h2,p { margin-top:0; } h1,h2 { line-height:1.15; } h1 { font:800 34px/1.15 'Playfair Display',serif; } h2 { font-size:20px; } label { display:grid; gap:6px; font-weight:700; font-size:13px; } input,textarea,select { width:100%; border:1px solid #cbd2ca; border-radius:9px; padding:10px 12px; background:#fff; outline:none; } input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #236d5720; }.checkbox { display:flex; align-items:center; gap:8px; margin:12px 0; }.checkbox input { width:auto; }.primary,.secondary,.outline { border:0; border-radius:9px; padding:11px 16px; font-weight:800; display:inline-flex; justify-content:center; align-items:center; }.primary { color:#fff; background:var(--green); }.secondary { color:var(--green); background:#e9f1ed; }.outline { color:var(--green); border:1px solid #aebcb6; }.eyebrow,.status { font-size:11px; letter-spacing:.14em; font-weight:800; color:var(--green); }.landing { max-width:880px; margin:11vh auto; padding:0 24px; }.landing h1 { font-size:52px; }.tournament-list { margin-top:28px; display:grid; gap:12px; }.tournament-card,.panel,.group-card,.match { background:var(--card); border:1px solid var(--line); border-radius:14px; }.tournament-card { display:flex; justify-content:space-between; align-items:center; padding:20px; }.tournament-card h2 { margin-bottom:6px; }.tournament-card p { margin-bottom:0; color:var(--muted); }.empty { padding:48px 24px; border:1px dashed #bdc6bd; text-align:center; color:var(--muted); border-radius:14px; }.modal { border:0; border-radius:16px; width:min(460px,calc(100% - 32px)); padding:28px; box-shadow:0 24px 80px #0004; }.modal::backdrop { background:#0e1714aa; }.modal form { display:grid; gap:15px; }.close { justify-self:end; border:0; background:none; font-size:30px; line-height:1; }.form-grid,.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.app { min-height:100vh; }.topbar { background:#17201e; color:#fff; min-height:66px; padding:0 4vw; display:flex; align-items:center; gap:25px; }.brand { font-size:18px; font-weight:800; }.topbar #tournament-title { flex:1; font-weight:700; }.tabs { display:flex; gap:8px; padding:14px 4vw; border-bottom:1px solid var(--line); }.tabs button { border:0; background:none; padding:8px 13px; color:var(--muted); font-weight:800; border-radius:8px; }.tabs button.active { background:#dcebe5; color:var(--green); }.workspace { max-width:1200px; margin:0 auto; padding:34px 4vw; }.section-head { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:22px; }.section-head h1 { margin-bottom:0; }.panel { padding:20px; }.panel h2 { margin-bottom:16px; }.panel label:not(.checkbox) { margin-bottom:12px; }.players { columns:2; padding-left:22px; }.players li { padding:5px; }.seed { color:#8d641a; font-size:11px; font-weight:800; margin-left:7px; }.muted { color:var(--muted); }.group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.group-card { overflow:hidden; }.group-card .section-head { padding:17px 18px 6px; margin:0; }.group-card .section-head h2 { margin:0; }.group-card .section-head span { color:var(--muted); font-size:12px; } table { border-collapse:collapse; width:100%; } th,td { padding:9px 10px; text-align:left; border-top:1px solid var(--line); } th { color:var(--muted); font-size:11px; text-transform:uppercase; } .qualified { background:#e4f1e9; } .matches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.match { padding:15px; }.match>span { color:var(--muted); font-size:12px; }.pair { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:12px 0; }.pair strong:last-child { text-align:right; }.pair b { font-size:18px; }.results { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.results button { border:1px solid #b9cbc0; color:var(--green); padding:8px; border-radius:7px; font-weight:800; background:#fff; }.match.done { opacity:.72; }.screen { min-height:100vh; padding:7vh 8vw; background:radial-gradient(circle at 70% 0,#2d5b4b,#101716 60%); color:#f7f5ef; }.screen h1 { font-size:clamp(44px,6vw,98px); margin:5px 0; }.screen .eyebrow { color:#e6b55a; }.screen-stage { font-size:24px; color:#c6d9d0; }.screen-groups { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:5vh; }.screen-groups section { padding:20px; background:#ffffff10; border:1px solid #ffffff24; border-radius:14px; }.screen-groups p { display:flex; justify-content:space-between; margin:10px 0; font-size:18px; }.screen-groups .qualified { background:transparent; color:#f4c66d; }.screen-heading { margin-top:48px; }.screen-matches { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.screen-matches p { font-size:20px; padding:16px; margin:0; background:#fff1; border-radius:10px; }.screen-message { font-size:32px; margin-top:12vh; }
@media(max-width:720px) { .landing h1 { font-size:38px; }.topbar { flex-wrap:wrap; padding:14px 20px; }.topbar #tournament-title { order:3; flex-basis:100%; }.form-grid,.two-columns,.group-grid,.matches,.screen-groups,.screen-matches { grid-template-columns:1fr; }.players { columns:1; }.tournament-card { align-items:start; gap:12px; flex-direction:column; }.screen { padding:40px 22px; } }
.action-row { display:flex; flex-wrap:wrap; gap:10px; }
.bracket { display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:18px; overflow-x:auto; align-items:start; padding-bottom:12px; }
.bracket-stage { min-width:220px; }
.bracket-stage h2 { color:var(--green); font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.bracket-stage .match { margin-bottom:14px; }
@media(max-width:720px) { .action-row { width:100%; }.action-row button { flex:1; } .bracket { grid-template-columns:1fr; } }.screen-bracket { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:20px; margin-top:7vh; overflow-x:auto; }
.screen-bracket section { min-width:180px; }
.screen-bracket h2 { color:#e6b55a; font-size:14px; letter-spacing:.1em; }
.screen-bracket article { background:#ffffff12; border:1px solid #ffffff22; border-radius:10px; padding:12px; margin-bottom:14px; }
.screen-bracket article p { margin:5px 0; font-size:17px; }.screen-bracket article b { color:#f3c66c; }
@media(max-width:720px) { .screen-bracket { grid-template-columns:1fr; } }
.podium { margin-top:8vh; font-size:clamp(26px,4vw,60px); line-height:1.35; }
.podium p { margin:10px 0; }