/* SportWire — shared cabinet design system (TT Commons · 16px floor · app-shell) */
@font-face{font-family:"TT Commons";src:url("/account/assets/fonts/tt-commons/TTCommons-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"TT Commons";src:url("/account/assets/fonts/tt-commons/TTCommons-Medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"TT Commons";src:url("/account/assets/fonts/tt-commons/TTCommons-DemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"TT Commons";src:url("/account/assets/fonts/tt-commons/TTCommons-Black.woff") format("woff");font-weight:800;font-display:swap}
: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:"TT Commons","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace;
  --display:"TT Commons","Helvetica Neue",Arial,sans-serif;
  --sidebar:248px;--maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 16px is the floor for ALL text (owner directive) */
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
b,strong{font-weight:600}
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:600;letter-spacing:-.02em;color:var(--fg);font-family:var(--display)}
.h1{font-size:clamp(30px,3.4vw,40px);line-height:1.06;font-weight:600;letter-spacing:-.03em}
.h2{font-size:clamp(24px,2.6vw,30px);line-height:1.14;font-weight:600;letter-spacing:-.025em}
.h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.lead{font-size:18px;line-height:1.6;color:var(--fg-2)}
.sub{font-size:16px;line-height:1.55;color:var(--fg-3)}
.muted{color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:600;line-height:1;color:var(--fg-3)}
.tag .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
/* eyebrow / section label — small by design, capped at floor via its own rule */
.eyebrow{font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--fg-3);text-transform:uppercase}

/* buttons — pill, ink primary + red arrow (marketing-site match) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;font-family:var(--font);font-size:16px;font-weight:600;line-height:1;letter-spacing:-.01em;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .14s var(--ease),box-shadow .16s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px}
.btn--sm{height:40px;padding:0 16px;font-size:16px;border-radius:10px}
.btn--lg{height:54px;padding:0 26px;font-size:16px}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(192,30,30,.22)}.btn--primary:hover{background:var(--red-hover);color:#fff}
.btn--ink{background:var(--ink);color:#fff}.btn--ink:hover{background:#24282D;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;box-shadow:none}
.btn--arrow::after{content:"\2197";display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:2px;border-radius:50%;background:var(--red);color:#fff;font-size:18px;flex:0 0 auto;transition:transform .2s var(--ease)}
.btn--ink.btn--arrow:hover::after{transform:rotate(45deg)}

.card{background:#fff;border:1px solid var(--border);border-radius:16px;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:16px;font-weight:600;line-height:1;padding:5px 11px;border-radius:8px}
.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:16px;font-weight:500;color:var(--fg-2);margin:0 0 8px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],select,textarea{
  width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:11px;color:var(--fg);
  padding:12px 14px;font-size:16px;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)}
::placeholder{color:var(--fg-4)}
/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:16px}
table.tbl th{text-align:left;font-weight:600;color:var(--fg-3);font-size:16px;letter-spacing:.01em;padding:11px 14px;border-bottom:1px solid var(--border)}
table.tbl td{padding:12px 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:14px;overflow:hidden}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:16px;line-height:1.65;color:#c9d1d9}
.code .k{color:#79C0FF}.code .s{color:#7EE787}.code .n{color:#F0883E}.code .c{color:#6E7681}.code .m{color:#D2A8FF}

/* ─────────────────────────  FULL-SCREEN APP SHELL  ───────────────────────── */
.app{display:flex;min-height:100vh;background:var(--bg-soft)}
/* sidebar */
.app-sb{width:var(--sidebar);flex:0 0 var(--sidebar);position:fixed;inset:0 auto 0 0;height:100vh;
  background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:40}
.sb-logo{display:flex;align-items:center;height:70px;padding:0 22px;border-bottom:1px solid var(--border)}
.sb-logo img{height:21px;display:block}
.sb-acct{margin:16px 16px 6px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft)}
.sb-acct .lbl{font-size:16px;color:var(--fg-4);line-height:1.1;margin-bottom:3px}
.sb-acct .val{font-size:16px;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:8px}
.sb-acct .val .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.sb-nav{flex:1;overflow-y:auto;padding:10px 14px 16px}
.sb-sec{font-size:16px;color:var(--fg-4);font-weight:600;padding:14px 10px 6px;letter-spacing:.01em}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--fg-2);font-size:16px;font-weight:500;cursor:pointer;transition:background .14s,color .14s;margin-bottom:2px}
.sb-item:hover{background:var(--bg-soft);color:var(--fg);text-decoration:none}
.sb-item.on{background:var(--red-tint);color:var(--red);font-weight:600}
.sb-item .ic{width:19px;height:19px;flex:none}
.sb-item .ext{margin-left:auto;color:var(--fg-4);font-size:15px}
.sb-foot{padding:14px;border-top:1px solid var(--border)}
.sb-help{display:block;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);margin-bottom:10px}
.sb-help .t{font-size:16px;color:var(--fg-4);margin-bottom:2px}
.sb-help .l{font-size:16px;font-weight:600;color:var(--red)}
/* main */
.app-main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column}
.app-top{height:70px;flex:none;position:sticky;top:0;z-index:30;background:rgba(245,247,250,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 32px}
.app-top .sp{flex:1}
.app-top .top-link{font-size:16px;font-weight:500;color:var(--fg-2);padding:8px 12px;border-radius:10px}
.app-top .top-link:hover{background:#fff;color:var(--fg);text-decoration:none}
.app-body{flex:1;padding:34px 32px 60px;max-width:1200px;width:100%}
.app-body .h1{margin:0 0 4px}
/* burger (mobile) */
.sb-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;color:var(--fg)}

/* sticky header (legacy marketing-style pages: index/leagues) */
.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:66px;display:flex;align-items:center;gap:16px}
.swhead nav{display:flex;gap:2px;flex:1}
.swhead nav a{font-size:16px;font-weight:500;padding:8px 12px;border-radius:9px;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:20px;display:block}
.swhead .sp{flex:1}
.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:16px;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}

@media(max-width:920px){
  .app-sb{transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:var(--shadow-lg)}
  .app-sb.open{transform:none}
  .app-main{margin-left:0}
  .sb-burger{display:inline-flex}
  .app-body{padding:26px 20px 50px}
  .app-top{padding:0 20px}
}
@media(max-width:680px){.wrap{padding:0 18px}.swhead nav{display:none}}