/* SportWire — shared design system (account / dashboard / docs) */
:root{
  --red:#C01E1E;--red-hover:#A81717;--red-tint:rgba(192,30,30,.07);
  --green:#2FA844;--blue:#0A6BD6;--amber:#C98A12;
  --bg:#FFFFFF;--bg-soft:#F5F7FA;--bg-tint:#F7FAFE;--ink:#0C1116;--ink-2:#11181F;
  --border:#E7ECF2;--border-strong:#CFD8E3;
  --fg:#161B21;--fg-2:#454F59;--fg-3:#6B7682;--fg-4:#929BA5;
  --fg-dim:rgba(255,255,255,.64);--fg-dim-2:rgba(255,255,255,.40);
  --shadow-sm:0 1px 2px rgba(16,28,44,.06);
  --shadow-md:0 6px 22px rgba(16,28,44,.09),0 1px 3px rgba(16,28,44,.05);
  --shadow-lg:0 26px 60px rgba(16,28,44,.16),0 6px 16px rgba(16,28,44,.07);
  --font:"Proxima Nova","Inter","Helvetica Neue","Segoe UI",Roboto,-apple-system,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --display:var(--font);
  --maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
code,kbd{font-family:var(--mono)}
::selection{background:rgba(192,30,30,.16)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3,h4,h5{margin:0;font-weight:650;letter-spacing:-.02em;color:var(--fg)}
.h1{font-family:var(--display);font-size:clamp(34px,4.2vw,46px);line-height:1.04;font-weight:600;letter-spacing:-.03em}
.h2{font-family:var(--display);font-size:clamp(27px,3.1vw,31px);line-height:1.12;font-weight:600;letter-spacing:-.025em}
.h3{font-size:20px;font-weight:650;letter-spacing:-.015em}
.lead{font-size:17px;line-height:1.6;color:var(--fg-2)}
.sub{font-size:14.5px;line-height:1.58;color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;line-height:1;color:var(--fg-3)}
.tag .d{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 20px;font-family:var(--font);font-size:15px;font-weight:600;line-height:1;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .12s var(--ease),box-shadow .16s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn--sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:9px}.btn--lg{height:52px;padding:0 26px;font-size:16px}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(192,30,30,.24)}.btn--primary:hover{background:var(--red-hover);transform:translateY(-1px);color:#fff}
.btn--outline{background:#fff;color:var(--fg);border-color:var(--border-strong)}.btn--outline:hover{border-color:var(--fg-4);background:var(--bg-soft);color:var(--fg)}
.btn--ghost{background:var(--bg-soft);color:var(--fg-2);border-color:transparent}.btn--ghost:hover{background:#ebeef3;color:var(--fg)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.ic{width:20px;height:20px;display:inline-block;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:7px}
.badge--green{background:rgba(47,168,68,.1);color:#1f7a31}
.badge--red{background:var(--red-tint);color:var(--red)}
.badge--blue{background:rgba(10,107,214,.08);color:var(--blue)}
.badge--amber{background:rgba(201,138,18,.1);color:var(--amber)}
.badge--gray{background:var(--bg-soft);color:var(--fg-3)}
/* forms */
label{display:block;font-size:13px;font-weight:550;color:var(--fg-2);margin:0 0 7px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:10px;color:var(--fg);
  padding:12px 14px;font-size:15px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-weight:600;color:var(--fg-3);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 14px;border-bottom:1px solid var(--border)}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--fg-2)}
table.tbl tr:last-child td{border-bottom:none}
/* code */
.code{background:#0D1117;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:#c9d1d9}
.code .k{color:#79C0FF}.code .s{color:#7EE787}.code .n{color:#F0883E}.code .c{color:#6E7681}.code .m{color:#D2A8FF}
/* sticky header */
.swhead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.swhead .bar{height:64px;display:flex;align-items:center;gap:16px}
.swhead nav{display:flex;gap:2px;flex:1}
.swhead nav a{font-size:14.5px;font-weight:550;padding:8px 12px;border-radius:8px;color:var(--fg-2)}
.swhead nav a:hover{color:var(--fg);background:var(--bg-soft);text-decoration:none}
.swhead .logo{display:flex;align-items:center;gap:9px;flex-shrink:0}.swhead .logo img{height:19px;display:block}
.swhead .sp{flex:1}
/* footer */
.swfoot{background:var(--ink-2);color:#fff;margin-top:60px}
.swfoot .wrap{padding:34px 28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--fg-dim-2)}
.swfoot a{color:var(--fg-dim)}.swfoot a:hover{color:#fff}
.swfoot .links{display:flex;gap:20px;flex-wrap:wrap}
.muted{color:var(--fg-3)}
@media(max-width:680px){.wrap{padding:0 18px}.swhead nav{display:none}}