@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap");

:root{
  --beach-sand:#f8f1e5;
  --beach-ink:#102f3d;
  --beach-deep:#053249;
  --beach-ocean:#0c95aa;
  --beach-lime:#d4f56a;
  --beach-muted:#6a7a86;
  --beach-line:#dccbb3;
  --beach-card:#fffdf8;
  --beach-field:#f7eddf;
  --beach-danger:#ef4444;
  --beach-ok:#16a34a;
  --beach-shadow:0 18px 50px rgba(27,44,56,.12);
}

html{background:var(--beach-sand)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 6%, rgba(12,149,170,.12), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(244,185,95,.16), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 260px),
    repeating-linear-gradient(105deg, rgba(110,84,46,.035) 0 1px, transparent 1px 16px),
    var(--beach-sand) !important;
  color:var(--beach-ink) !important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

.wrap,.container{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.wrap{padding:18px 18px 44px}

h1,.title{
  color:var(--beach-ink) !important;
  font-family:"Archivo Black",Inter,sans-serif !important;
  letter-spacing:0 !important;
  line-height:1 !important;
}
h1{
  font-size:clamp(30px,4.5vw,52px) !important;
  text-transform:uppercase;
  margin:24px 0 18px !important;
  text-shadow:none !important;
}
.title{font-size:clamp(28px,4vw,48px) !important;margin:24px 0 18px}

.wrap > h1:first-child,
.wrap > .title:first-child{
  background:linear-gradient(135deg,var(--beach-deep),#0b5f73);
  color:#fff !important;
  border-radius:8px;
  padding:30px 34px;
  box-shadow:var(--beach-shadow);
}

.bar,.topbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.bar,.topbar{
  margin:0 0 18px;
  padding:12px;
  border:1px solid var(--beach-line);
  border-radius:8px;
  background:rgba(255,253,248,.75);
  box-shadow:0 10px 30px rgba(27,44,56,.08);
}

.card,.form-card,.panel,.qr-box,.pair-row,.court-card,.info-card{
  border-color:var(--beach-line) !important;
  border-radius:8px !important;
  background:rgba(255,253,248,.94) !important;
  color:var(--beach-ink) !important;
  box-shadow:var(--beach-shadow) !important;
}
.card{overflow:hidden;margin-bottom:18px}
.head,.card .head{
  background:#fffaf1 !important;
  border-bottom:1px solid var(--beach-line) !important;
  color:var(--beach-ink) !important;
  padding:16px 20px !important;
}
.body,.card .body{padding:20px !important;color:var(--beach-ink) !important}

.muted,.meta,small,.form-sub,.hdr-event,.hdr-meta,.empty{
  color:var(--beach-muted) !important;
}

.btn,button.btn,a.btn,.btn-submit,.act-btn,.tbtn{
  border:1px solid transparent !important;
  border-radius:8px !important;
  background:var(--beach-deep) !important;
  color:#fff !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,43,66,.18) !important;
}
.btn:hover,button.btn:hover,a.btn:hover,.btn-submit:hover{filter:brightness(1.06)}
.btn.sec,.btn.secondary,.btn-ghost,.act-btn:not(.primary),a.btn.sec,button.btn.sec{
  background:#f2e4d0 !important;
  border-color:var(--beach-line) !important;
  color:var(--beach-ink) !important;
  box-shadow:none !important;
}
.btn.primary,.act-btn.primary,.btn-submit{
  background:var(--beach-deep) !important;
  color:#fff !important;
}

input[type=text],input[type=number],input[type=email],input[type=url],input[type=password],
select,textarea,.input,.inp{
  border:1px solid var(--beach-line) !important;
  border-radius:8px !important;
  background:var(--beach-field) !important;
  color:var(--beach-ink) !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:700;
  outline:none;
}
input:focus,select:focus,textarea:focus,.input:focus,.inp:focus{
  border-color:var(--beach-ocean) !important;
  box-shadow:0 0 0 4px rgba(0,152,189,.15) !important;
  background:#fff !important;
}
label{
  color:#486170 !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.08em;
}

table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--beach-line);
  border-radius:8px;
  background:#fffdf8;
}
th{
  background:#f4ead9 !important;
  color:#264a5b !important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
td,th{border-color:rgba(220,203,179,.75) !important}
td{color:var(--beach-ink) !important;background:rgba(255,253,248,.96) !important}
td a{color:#07536b !important;font-weight:800}
tr:hover td{background:rgba(223,248,251,.35)}

.pill,.status-pill,.badge-status,.match-status{
  border:1px solid var(--beach-line) !important;
  border-radius:999px !important;
  background:#edf8fb !important;
  color:#07536b !important;
  font-weight:900 !important;
}
.msg{
  border:1px solid rgba(22,163,74,.25) !important;
  background:rgba(22,163,74,.1) !important;
  color:var(--beach-ok) !important;
  border-radius:8px !important;
}
.err{
  border:1px solid rgba(239,68,68,.25) !important;
  background:rgba(239,68,68,.1) !important;
  color:var(--beach-danger) !important;
  border-radius:8px !important;
}

.bracket,.courts-grid,.results-wrap{
  background:transparent !important;
}
.round-title,.section-hdr{
  color:var(--beach-ink) !important;
  font-weight:900 !important;
}

#matchModal > div,#qrModal > div,#coachModal > div,#liveQrModal > div,
[role=dialog] > div{
  background:var(--beach-card) !important;
  color:var(--beach-ink) !important;
  border:1px solid var(--beach-line) !important;
  border-radius:8px !important;
}

@media(max-width:760px){
  .wrap{padding:12px 12px 28px}
  .bar,.topbar{align-items:stretch}
  .bar .btn,.topbar .btn{flex:1 1 auto;justify-content:center}
  .card .body,.body{padding:16px !important}
  table{display:block;overflow-x:auto}
  h1{font-size:30px !important}
}