:root{
    --bg:#FFFFFF;
    --bg-elevated:#F5F6F8;
    --bg-card:#FFFFFF;
    --bg-card-hi:#EEF1F5;
    --border:#D7DBE1;
    --border-soft:#E5E8EC;
    --text:#212226;
    --text-muted:#54565C;
    --text-dim:#8C8E94;
    --accent:#1B3E85;
    --accent-hi:#15316B;
    --accent-soft:#E4EAF6;
    --accent-ink:#FFFFFF;
    --positive:#1B3E85;
    --positive-bg:#E4EAF6;
    --negative:#BE0F2E;
    --negative-bg:#FAE7EA;
    --gold-faint: rgba(169,129,46,0.09);
    --gold-faint-soft: rgba(169,129,46,0.04);
    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:8px;
    --font-display: 'Big Shoulders Display', Arial, sans-serif;
    --font-body: 'Libre Franklin', Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:radial-gradient(ellipse 900px 700px at 85% 0%, var(--gold-faint-soft), transparent 60%), var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  #root{min-height:100vh;}
  ::selection{background:var(--accent-soft);color:var(--text);}

  .diagonal-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:repeating-linear-gradient(135deg, transparent 0px, transparent 78px, var(--gold-faint) 78px, var(--gold-faint) 79px);
  }
  .page-wrap{position:relative; width:100%; min-height:100vh; transition:background .4s ease;}
  @keyframes pageSwipeIn{
    0%{opacity:0; transform:translateX(24px);}
    100%{opacity:1; transform:translateX(0);}
  }
  .page-anim{animation:pageSwipeIn .5s cubic-bezier(.2,.75,.2,1);}
  .shell{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:48px 24px 96px;}

  .topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:44px; flex-wrap:wrap; gap:24px; padding-bottom:20px; position:relative;}
  .topbar::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 46%, var(--negative) 54%, var(--negative) 100%);}
  .brand{display:flex; align-items:center; gap:8px;}
  .brand-logo{height:44px; width:auto; display:block;}
  @media (max-width:640px){.brand-logo{height:34px;}}
  .brand-mark{
    font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:-0.01em; color:var(--text);
  }
  .brand-mark em{font-style:normal; color:var(--accent); font-weight:800;}
  .brand-sub{color:var(--text-dim); font-size:13px; font-style:italic;}
  .brand-sport-tag{font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:var(--accent); border:1px solid var(--accent); border-radius:5px; padding:2px 6px; align-self:center; line-height:1.3;}
  @media (max-width:640px){.brand-sport-tag{font-size:9.5px; padding:1px 5px;}}
  .nav-links{display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:8px;}
  .nav-link{font-family:var(--font-body); background:transparent; border:none; padding:10px 19px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer; transition:color .15s, background-color .15s; white-space:nowrap;}
  .nav-link:hover{color:var(--text); background:var(--bg-card-hi);}
  .nav-link.active{color:var(--accent-ink); background:var(--accent);}
  .nav-link.nav-link-method{color:var(--text-dim); font-style:italic;}
  .nav-link.nav-link-method:hover{color:var(--accent); background:transparent; text-decoration:underline;}
  .nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:8px; width:40px; height:40px; font-size:17px; color:var(--text); cursor:pointer; align-items:center; justify-content:center;}
  @media (max-width:640px){
    .topbar{position:relative;}
    .nav-toggle{display:flex;}
    .nav-links{display:none; flex-direction:column; align-items:stretch; gap:2px; position:absolute; top:100%; left:0; right:0; margin-top:10px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:10px; padding:8px; box-shadow:0 12px 28px rgba(0,0,0,0.16); z-index:30;}
    .nav-links.open{display:flex;}
    .nav-links .nav-link{width:100%; text-align:left; border-radius:7px; padding:11px 14px; font-size:14px;}
    .nav-links .nav-link.active{background:var(--accent); color:var(--accent-ink);}
  }

  .steps{display:flex; gap:6px; align-items:center;}
  .step-dot{
    width:7px; height:7px; border-radius:50%; background:var(--border);
    transition:background .25s;
  }
  .step-dot.active{background:var(--accent);}
  .step-dot.done{background:var(--positive);}
  .step-label{font-size:12px; color:var(--text-dim); margin-left:8px; font-style:italic;}

  h1.hero{
    font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.1;
    letter-spacing:-0.01em; margin:0 0 14px; color:var(--text); max-width:620px;
  }
  p.lede{color:var(--text-muted); font-size:16.5px; line-height:1.65; max-width:560px; margin:0 0 40px;}

  .card{
    background:var(--bg-card); border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); padding:32px;
    box-shadow: 0 1px 2px rgba(28,28,30,0.04);
  }
  .card + .card{margin-top:20px;}
  .side-by-side-cards.card, .side-by-side-cards .card{margin-top:0 !important;}
  .side-by-side-cards .card{overflow-x:auto;}
  @media (max-width:760px){
    .side-by-side-cards{grid-template-columns:minmax(0,1fr) !important;}
  }

  .site-footer{margin-top:64px; padding-top:40px; border-top:1px solid var(--border-soft);}
  .footer-ad{width:100%; min-height:90px; margin-bottom:32px; overflow:hidden; display:flex; justify-content:center;}
  /* The page body (.shell) tops out at 1080px wide and stays centered, so
     its left/right edge always sits at 50% of the viewport minus 540px.
     A 160px-wide skyscraper plus a 24px gap needs 1080 + 2*(160+24) = 1448px
     of viewport to fit without crowding the content, so these only turn on
     comfortably past that. */
  .side-ad{display:none; position:fixed; top:140px; width:160px; max-height:600px; overflow:hidden; z-index:5;}
  .side-ad-left{left:calc(50% - 724px);}
  .side-ad-right{right:calc(50% - 724px);}
  @media (min-width:1500px){ .side-ad{display:block;} }
  .site-footer .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px;}
  @media (max-width:800px){.site-footer .footer-top{grid-template-columns:1fr 1fr; row-gap:28px;}}
  @media (max-width:480px){.site-footer .footer-top{grid-template-columns:1fr;}}
  @media (max-width:640px){
    .footer-hide-mobile{display:none;}
    .site-footer .footer-top{grid-template-columns:1fr; margin-bottom:12px;}
  }
  .site-footer .footer-brand{font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text);}
  .site-footer .footer-brand em{font-style:normal; color:var(--accent);}
  .site-footer .footer-blurb{color:var(--text-dim); font-size:13px; line-height:1.6; margin-top:10px; max-width:260px;}
  .footer-col-title{font-family:var(--font-display); font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px;}
  .site-footer .footer-col a, .site-footer .footer-col button.footer-link{display:block; color:var(--text-muted); font-size:13.5px; text-decoration:none; margin-bottom:10px; background:none; border:none; padding:0; text-align:left; font-family:var(--font-body); cursor:pointer;}
  .site-footer .footer-col a:hover, .site-footer .footer-col button.footer-link:hover{color:var(--accent);}
  .site-footer .footer-cta{background:var(--accent); color:var(--accent-ink); display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:8px; font-family:var(--font-body); font-weight:600; font-size:13.5px; border:none; cursor:pointer; margin-top:4px; text-decoration:none;}
  .site-footer .footer-cta:hover{filter:brightness(1.08); transform:translateY(-1px);}
  .site-footer .footer-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; border-top:1px solid var(--border-soft); padding-bottom:20px;}
  .site-footer .footer-bottom span{color:var(--text-dim); font-size:12px;}

  .contact-form label.field-label{margin-top:16px;}
  .contact-form label.field-label:first-child{margin-top:0;}
  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea{
    width:100%; box-sizing:border-box; padding:12px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14px;
  }
  .contact-form textarea{min-height:130px; resize:vertical;}
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent);}
  .method-tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--border-soft); margin-bottom:28px; padding-bottom:0;}
  .method-tab{font-family:var(--font-display); font-weight:700; font-size:13.5px; background:none; border:none; padding:12px 18px; cursor:pointer; color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s;}
  .method-tab:hover{color:var(--text);}
  .method-tab.active{color:var(--accent); border-bottom-color:var(--accent);}
  @media (max-width:640px){.method-tab{padding:10px 12px; font-size:12.5px;}}


  .guide-list{display:grid; gap:14px; max-width:820px;}
  .guide-card{display:block; text-decoration:none; color:inherit; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:12px; padding:22px 24px; transition:transform .2s, box-shadow .2s, border-color .2s;}
  .guide-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.10); border-color:var(--accent);}
  .guide-card-title{font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--text); margin-bottom:6px; line-height:1.2;}
  .guide-card-desc{font-size:14.5px; color:var(--text-muted); line-height:1.6;}
  .guide-card-meta{font-size:12.5px; color:var(--accent); font-weight:700; margin-top:10px;}
  .guide-back{font-size:13.5px; color:var(--text-dim); text-decoration:none;}
  .guide-back:hover{color:var(--accent);}
  .guide-article{max-width:760px;}
  .guide-title{font-family:var(--font-display); font-weight:800; font-size:40px; line-height:1.12; margin:6px 0 8px; color:var(--text);}
  .guide-meta{font-size:13px; color:var(--text-dim); margin-bottom:22px;}
  .guide-article h2{font-family:var(--font-display); font-weight:800; font-size:24px; margin:30px 0 10px; color:var(--text);}
  .guide-article p, .guide-article li{font-size:16px; line-height:1.75; color:var(--text-muted);}
  .guide-article p{margin:0 0 14px;}
  .guide-article ul{padding-left:22px; margin:10px 0 14px;}
  .guide-article li{margin-bottom:8px;}
  .guide-cta{max-width:760px; margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
  .guide-cta-title{font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text);}
  .guide-more-title{font-family:var(--font-display); font-weight:800; font-size:24px; margin:40px 0 14px; color:var(--text);}
  .home-about{margin-top:34px;}
  .home-about h2{font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 12px; color:var(--text);}
  .home-about h3{font-family:var(--font-display); font-weight:800; font-size:17px; margin:20px 0 8px; color:var(--text);}
  .home-about p{font-size:15px; line-height:1.7; color:var(--text-muted); margin:0 0 12px;}
  .home-about ul{padding-left:20px; margin:0 0 12px;}
  .home-about li{margin-bottom:6px; font-size:15px;}
  .home-about a{color:var(--accent); text-decoration:none; font-weight:600;}
  .home-about a:hover{text-decoration:underline;}
  @media (max-width:640px){.guide-title{font-size:30px;} .guide-card{padding:18px;}}

  .contact-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:stretch;}
  .contact-sidebar{display:grid; grid-template-rows:repeat(3, 1fr); gap:16px; height:100%;}
  .contact-sidebar .card{margin-top:0 !important; height:100%; display:flex; flex-direction:column; justify-content:center;}
  @media (max-width:800px){.contact-grid{grid-template-columns:1fr;} .contact-sidebar{grid-template-rows:none;}}

  .field-row{display:flex; gap:40px; flex-wrap:wrap; margin-bottom:28px;}
  @media (max-width:640px){.field-row{gap:20px;}}

  label.field-label{
    display:block; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--text-dim); margin-bottom:10px; font-style:italic;
  }
  .stepper{
    display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--bg-elevated); overflow:hidden; width:fit-content;
  }
  .stepper button{
    width:40px; height:44px; background:transparent; border:none; color:var(--text-muted);
    font-size:18px; cursor:pointer; transition:background .15s, color .15s; font-family:var(--font-body);
  }
  .stepper button:hover{background:var(--accent-soft); color:var(--accent-hi);}
  .stepper .val{
    width:64px; text-align:center; font-variant-numeric:tabular-nums; font-weight:700; font-size:17px; color:var(--text);
    font-family:var(--font-display);
  }

  .format-toggle{display:flex; gap:10px;}
  .format-btn{
    flex:1; text-align:left; padding:16px 18px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--bg-elevated); cursor:pointer; font-family:var(--font-body);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    position:relative; overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .format-btn::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.28) 55%, transparent 75%); transform:translateX(-140%); transition:transform .55s cubic-bezier(.2,.7,.2,1); pointer-events:none;}
  .format-btn:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.07);}
  .format-btn:hover::after{transform:translateX(140%);}
  .format-btn.active{border-color:var(--accent); background:linear-gradient(160deg, var(--accent-soft), transparent 70%);}
  .format-btn.active-red{border-color:var(--negative); background:linear-gradient(160deg, var(--negative-bg), transparent 70%);}
  .format-btn.active-dark{border-color:var(--text); background:linear-gradient(160deg, var(--bg-card-hi), transparent 70%);}
  .format-btn.active-crimson{border-color:#B3122B; background:linear-gradient(160deg, #F6DDE0, transparent 70%);}
  .format-btn.active-gold{border-color:#A9812E; background:linear-gradient(160deg, #F0E6D0, transparent 70%);}
  .format-btn .ft-name{font-weight:700; font-size:15px; color:var(--text); margin-bottom:3px; font-family:var(--font-display);}
  .format-btn .ft-desc{font-size:12.5px; color:var(--text-dim); line-height:1.4;}

  .warn-note{
    display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-muted);
    background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
    padding:14px 16px; margin-top:4px; line-height:1.5;
  }
  .warn-note.alert{border-color:#E3B3BA; color:#7A0E20; background:var(--negative-bg);}

  /* buttons: swipe hover, not just a glow */
  .btn{
    font-family:var(--font-body); font-weight:700; font-size:14.5px; border-radius:var(--radius-sm);
    padding:14px 26px; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    position:relative; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  }
  .btn::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.4) 55%, transparent 70%);
    transform:translateX(-130%); transition:transform .55s cubic-bezier(.2,.7,.2,1);
    pointer-events:none;
  }
  .btn:hover::before{transform:translateX(130%);}
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-primary:hover{background:var(--accent-hi); transform:translateY(-2px); box-shadow:0 6px 16px rgba(169,129,46,0.32);}
  .btn-primary:disabled{opacity:0.35; cursor:not-allowed;}
  .btn-primary:disabled:hover{transform:none; box-shadow:none;}
  .btn-gold{background:#A9812E; color:#FFFFFF;}
  .btn-gold:hover{background:#8F6D26; transform:translateY(-2px); box-shadow:0 6px 16px rgba(169,129,46,0.32);}
  .btn-gold:disabled{opacity:0.35; cursor:not-allowed;}
  .btn-crimson{background:#B3122B; color:#FFFFFF;}
  .btn-crimson:hover{background:#8E0E22; transform:translateY(-2px); box-shadow:0 6px 16px rgba(179,18,43,0.32);}
  .btn-crimson:disabled{opacity:0.35; cursor:not-allowed;}
  .btn-ghost{background:transparent; color:var(--text-muted); border:1px solid var(--border);}
  .btn-ghost:hover{color:var(--text); border-color:var(--accent); transform:translateY(-2px);}
  .btn-sm{padding:9px 14px; font-size:13px;}

  .actions-row{display:flex; justify-content:space-between; align-items:center; margin-top:32px;}

  .tabs{display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border-soft);}
  .tab{
    padding:12px 4px; margin-right:24px; background:none; border:none; cursor:pointer;
    color:var(--text-dim); font-weight:700; font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px;
    font-family:var(--font-body); transition:color .15s, border-color .15s;
  }
  .tab.active{color:var(--accent-hi); border-bottom-color:var(--accent);}
  .tab:hover{color:var(--text);}

  .search-box{position:relative; margin-bottom:16px;}
  .search-box input{
    width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--bg-elevated); color:var(--text); font-size:15px; font-family:var(--font-body);
  }
  .search-box input:focus{outline:none; border-color:var(--accent);}

  .player-list{max-height:320px; overflow-y:auto; border:1px solid var(--border-soft); border-radius:var(--radius-sm);}
  .player-row{
    display:flex; align-items:center; justify-content:space-between; padding:11px 16px;
    border-bottom:1px solid var(--border-soft); font-size:14px; transition:background .15s;
  }
  .player-row:last-child{border-bottom:none;}
  .player-row:hover{background:var(--bg-card-hi);}
  .p-name{font-weight:600; color:var(--text);}
  .p-meta{color:var(--text-dim); font-size:12.5px; margin-left:8px; font-style:italic;}
  .p-stat{color:var(--text-muted); font-variant-numeric:tabular-nums; font-size:13px; margin-right:14px;}
  .add-btn, .rm-btn{
    border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-muted);
    width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:all .15s;
  }
  .add-btn:hover{border-color:var(--positive); color:var(--positive); background:var(--positive-bg); transform:scale(1.1);}
  .rm-btn:hover{border-color:var(--negative); color:var(--negative); background:var(--negative-bg); transform:scale(1.1);}

  .roster-panel{margin-top:28px;}
  .roster-header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
  .roster-count{font-family:var(--font-display); font-size:20px; color:var(--text); font-weight:600;}
  .roster-count .of{color:var(--text-dim); font-size:15px; font-style:italic;}

  textarea.paste-area{
    width:100%; min-height:150px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--bg-elevated); color:var(--text); font-family:var(--font-body); font-size:14.5px;
    padding:16px; resize:vertical; line-height:1.6;
  }
  textarea.paste-area:focus{outline:none; border-color:var(--accent);}
  .paste-hint{font-size:12.5px; color:var(--text-dim); margin-top:8px; line-height:1.5; font-style:italic;}

  .match-row{
    display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
    border-bottom:1px solid var(--border-soft); font-size:14px; gap:12px;
  }
  .match-row:last-child{border-bottom:none;}
  .match-left{display:flex; flex-direction:column; gap:2px;}
  .raw-text{color:var(--text-dim); font-size:12px; font-style:italic;}
  .match-status{font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px;}
  .status-matched{background:var(--positive-bg); color:var(--positive);}
  .status-unmatched{background:var(--negative-bg); color:var(--negative);}
  select.suggest-select{
    background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); border-radius:4px;
    padding:7px 10px; font-size:13px; font-family:var(--font-body);
  }

  /* dashboard */
  .grade-hero{
    display:flex; align-items:center; gap:32px; padding:38px 36px; flex-wrap:wrap;
    background:radial-gradient(ellipse at top right, var(--gold-faint), transparent 55%), linear-gradient(135deg, var(--accent-soft), transparent 65%), var(--bg-card);
    border:1px solid var(--border-soft); border-radius:var(--radius-lg); position:relative;
  }
  .grade-badge{
    font-family:var(--font-display); font-weight:900; font-size:76px; line-height:1;
    color:var(--accent-hi); min-width:110px; text-align:center;
  }
  .grade-badge-sm{font-size:52px; min-width:auto;}
  .grade-copy h2{font-family:var(--font-display); font-size:26px; margin:0 0 8px; font-weight:700; color:var(--text);}
  .grade-copy p{color:var(--text-muted); font-size:15px; line-height:1.6; margin:0; max-width:480px;}

  .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px;}
  @media (max-width:720px){.stat-grid{grid-template-columns:1fr 1fr;}}
  .stat-tile{background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:22px;}
  .stat-tile .label{font-size:12px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-dim); margin-bottom:10px; font-weight:700; font-style:italic; min-height:29px; display:block;}
  .stat-tile .big{font-family:var(--font-display); font-size:32px; color:var(--text); font-variant-numeric:tabular-nums; font-weight:700;}
  .stat-tile .cmp{font-size:13px; margin-top:6px; font-weight:600;}
  .cmp.up{color:var(--positive);}
  .cmp.down{color:var(--negative);}

  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin:44px 0 18px; border-bottom:1px solid var(--border-soft); padding-bottom:12px;}
  .section-head h3{font-family:var(--font-display); font-size:22px; color:var(--text); margin:0; font-weight:700;}
  .section-head .sub{font-size:13px; color:var(--text-dim); font-style:italic;}

  .cat-grid{display:flex; flex-direction:column; gap:10px;}
  .cat-row{
    display:grid; grid-template-columns:90px 1fr 130px 70px; align-items:center; gap:14px;
    padding:13px 16px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
    transition:border-color .15s;
  }
  .cat-row:hover{border-color:var(--border);}
  @media (max-width:640px){.cat-row{grid-template-columns:70px 1fr 60px; }.cat-row .cat-vals{display:none;}}
  .cat-name{font-weight:700; font-size:13.5px; color:var(--text);}
  .cat-bar-track{position:relative; height:8px; background:var(--bg-elevated); border-radius:6px; overflow:visible;}
  .cat-bar-avg{position:absolute; top:-3px; width:2px; height:14px; background:var(--text-dim); transition:left .45s cubic-bezier(.2,.7,.2,1);}
  .cat-bar-fill{position:absolute; top:0; left:0; height:100%; border-radius:6px; background:var(--accent); transition:width .45s cubic-bezier(.2,.7,.2,1), background .3s ease;}
  .cat-vals{font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; text-align:right;}
  .cat-pct{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;}

  table.value-table{width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px;}
  table.value-table th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
    padding:0 12px 10px; font-weight:700; font-style:italic;
  }
  table.value-table td{padding:12px; border-top:1px solid var(--border-soft); color:var(--text-muted); font-variant-numeric:tabular-nums;}
  table.value-table td.name-cell{color:var(--text); font-weight:600; font-variant-numeric:normal;}
  table.value-table tr{transition:background .15s;}
  table.value-table tr:hover td{background:var(--bg-card-hi);}
  .pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700;}
  .pill.pos{background:var(--bg-elevated); color:var(--text-muted); border:1px solid var(--border);}
  .value-tag{font-weight:700;}
  .value-tag.steal{color:var(--positive);}
  .value-tag.reach{color:var(--negative);}

  footer.foot{margin-top:64px; color:var(--text-dim); font-size:12.5px; text-align:center; line-height:1.7; font-style:italic; border-top:1px solid var(--border-soft); padding-top:24px;}
  footer.foot a{color:var(--text-dim);}

  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}
  /* ---------- Draft Companion: same design system, dark scope ---------- */
  .league-theme{
    --bg:#FBF2F2;
    --bg-elevated:#F7E6E7;
    --bg-card:#FFFFFF;
    --bg-card-hi:#F9E9EA;
    --accent:#B3122B;
    --accent-hi:#8E0E22;
    --accent-soft:#F6DDE0;
    --accent-ink:#FFFFFF;
    --positive:#1B3E85;
    --positive-bg:#E4EAF6;
    --negative:#8E0E22;
    --negative-bg:#F6DDE0;
    --gold-faint:rgba(201,161,79,0.14);
    --gold-faint-soft:rgba(201,161,79,0.07);
    background:radial-gradient(ellipse 1000px 800px at 85% -5%, rgba(179,18,43,0.08), transparent 60%), radial-gradient(ellipse 700px 600px at 0% 100%, var(--gold-faint-soft), transparent 55%), var(--bg);
    min-height:100vh;
  }
  .home-live-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:12.5px;
    letter-spacing:0.02em; color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border);
    padding:8px 16px; border-radius:20px; margin-bottom:18px;
  }
  .home-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:32px 0 28px;}
  @media (max-width:860px){
    .home-cards{grid-template-columns:1fr;}
    .home-card, .home-card-wide{min-height:172px; box-sizing:border-box;}
    .home-card-wide{flex-direction:column; align-items:flex-start; padding:28px 24px 24px; gap:0;}
    .home-card-wide .hcw-left{flex-direction:column; align-items:flex-start; gap:12px;}
    .home-card-wide .hc-cta{margin-top:auto; padding-top:14px;}
  }
  .home-card{
    position:relative; overflow:hidden; text-align:left; cursor:pointer; border:1px solid var(--border);
    border-radius:14px; padding:28px 24px 24px; background:var(--bg-card);
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(16px); animation:homeCardIn .55s cubic-bezier(.2,.75,.2,1) forwards;
    display:flex; flex-direction:column;
    min-height:230px; box-sizing:border-box;
  }
  .home-card:nth-child(1){animation-delay:.05s;}
  .home-card:nth-child(2){animation-delay:.16s;}
  .home-card:nth-child(3){animation-delay:.27s;}
  @keyframes homeCardIn{ to{opacity:1; transform:translateY(0);} }
  .home-card::before{content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--card-accent), var(--gold-faint) 160%);}
  .home-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.14); border-color:var(--card-accent);}
  .home-card .hc-num{font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--card-accent); opacity:0.4; line-height:1; margin-bottom:12px;}
  .home-card .hc-tag{font-family:var(--font-display); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--card-accent); font-weight:700; margin-bottom:8px;}
  .home-card .hc-name{font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--text); margin-bottom:10px;}
  .home-card .hc-desc{font-size:13.5px; color:var(--text-muted); line-height:1.55; margin-bottom:18px;}
  .home-card .hc-cta{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--card-accent); margin-top:auto;}
  .home-card .hc-cta span{display:inline-block; transition:transform .2s;}
  .home-card:hover .hc-cta span{transform:translateX(4px);}
  .home-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
  .home-fact{background:var(--bg-card); border:1px solid var(--border-soft); border-radius:10px; padding:16px 18px;}
  .home-fact .hf-num{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); line-height:1.15;}
  .home-fact .hf-label{font-size:11.5px; color:var(--text-dim); margin-top:3px; line-height:1.4;}
  .home-theme{
    --bg:#F3F6FC;
    --bg-elevated:#E9EFF9;
    --bg-card:#FFFFFF;
    --bg-card-hi:#EAF0FA;
    --gold-faint:rgba(201,161,79,0.16);
    --gold-faint-soft:rgba(201,161,79,0.08);
    background:radial-gradient(ellipse 1000px 800px at 80% -5%, rgba(27,62,133,0.09), transparent 60%), radial-gradient(ellipse 700px 600px at 5% 100%, var(--gold-faint-soft), transparent 55%), var(--bg);
    min-height:100vh;
  }
  .companion-theme{
    --bg:#14181D;
    --bg-elevated:#1B2027;
    --bg-card:#1A1F25;
    --bg-card-hi:#242B33;
    --border:#323A44;
    --border-soft:#262D36;
    --text:#F3F5F8;
    --text-muted:#AEB6C0;
    --text-dim:#78818B;
    --accent:#4C7FE8;
    --accent-hi:#6C97F0;
    --accent-soft:rgba(76,127,232,0.16);
    --accent-ink:#0A1424;
    --positive:#4C7FE8;
    --positive-bg:rgba(76,127,232,0.16);
    --negative:#FF5D7A;
    --negative-bg:rgba(255,93,122,0.14);
    --gold-faint:rgba(201,161,79,0.16);
    --gold-faint-soft:rgba(201,161,79,0.09);
    background:radial-gradient(ellipse 900px 700px at 85% 0%, var(--gold-faint-soft), transparent 60%), var(--bg);
    color:var(--text); min-height:100vh;
  }
  .companion-theme ::selection{background:var(--accent-soft); color:var(--text);}
  .companion-theme .card{box-shadow:none;}
  .companion-theme .format-btn.active{background:linear-gradient(160deg, var(--accent-soft), transparent 70%);}
  .companion-theme .format-btn.active-red{background:linear-gradient(160deg, var(--negative-bg), transparent 70%);}
  .companion-theme .grade-hero{background:radial-gradient(ellipse at top right, var(--gold-faint), transparent 55%), linear-gradient(135deg, var(--accent-soft), transparent 65%), var(--bg-card);}
  .companion-theme .cat-row{grid-template-columns:80px 1fr 200px 46px;}
  @media (max-width:640px){
    .companion-theme .cat-row{
      display:grid;
      grid-template-columns:56px 1fr 54px;
      grid-template-areas:"name bar bar" ". vals pct";
      row-gap:10px; column-gap:8px;
      padding:16px 12px;
      align-items:center;
    }
    .companion-theme .cat-name{grid-area:name; font-size:11px; line-height:1.25; word-break:normal; overflow-wrap:break-word;}
    .companion-theme .cat-bar-track{grid-area:bar; height:12px;}
    .companion-theme .cat-vals{
      grid-area:vals !important; justify-content:center !important; text-align:center !important;
      white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
      font-size:13.5px; flex-wrap:wrap; row-gap:2px;
    }
    .companion-theme .cat-vals *{font-size:13.5px !important;}
    .companion-theme .dc-avg-label{display:none !important;}
    .companion-theme .cat-pct{grid-area:pct; text-align:center; font-size:12px;}
  }
  .companion-theme .warn-note.alert{border-color:var(--negative); color:var(--negative); background:var(--negative-bg);}

  .trade-theme{
    --bg:#000000;
    --bg-elevated:#0C0C0C;
    --bg-card:#121212;
    --bg-card-hi:#1C1A14;
    --border:#33301F;
    --border-soft:#242217;
    --text:#F5F3EC;
    --text-muted:#C7C2AE;
    --text-dim:#8A8570;
    --accent:#D4AF37;
    --accent-hi:#E8C458;
    --accent-soft:rgba(212,175,55,0.16);
    --accent-ink:#100D00;
    --positive:#D4AF37;
    --positive-bg:rgba(212,175,55,0.14);
    --negative:#FF5D5D;
    --negative-bg:rgba(255,93,93,0.14);
    --gold-faint:rgba(212,175,55,0.18);
    --gold-faint-soft:rgba(212,175,55,0.08);
    background:radial-gradient(ellipse 900px 700px at 85% 0%, var(--gold-faint-soft), transparent 60%), var(--bg);
    color:var(--text); min-height:100vh;
  }
  .trade-theme ::selection{background:var(--accent-soft); color:var(--text);}
  .trade-theme .card{box-shadow:none;}
  .trade-theme .warn-note.alert{border-color:var(--negative); color:var(--negative); background:var(--negative-bg);}
  .trade-lock{position:relative;}
  .trade-lock::after{content:'Confirm league settings above to unlock'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.78); color:var(--text-dim); font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.03em; text-transform:uppercase; border-radius:14px; z-index:2;}
  .trade-lock > *{ filter:blur(2px); pointer-events:none; }
  .home-card-wide{
    grid-column:1 / -1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:18px;
    padding:28px 24px 24px; border-radius:14px; cursor:pointer; text-align:left; position:relative; overflow:hidden;
    border:1px solid #E2E2E2; background:#FFFFFF; color:#111111;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(16px); animation:homeCardIn .55s cubic-bezier(.2,.75,.2,1) forwards; animation-delay:.38s;
    min-height:230px; box-sizing:border-box;
  }
  .home-card-wide::before{content:''; position:absolute; top:0; left:0; right:0; height:5px; background:#111111;}
  .home-card-wide:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,0.16); border-color:#111111;}
  .home-card-wide .hcw-left{display:flex; align-items:center; gap:16px;}
  .home-card-wide .hcw-num{font-family:var(--font-display); font-weight:800; font-size:26px; color:#111111; opacity:0.35; line-height:1;}
  .home-card-wide .hcw-text .hc-tag{font-family:var(--font-display); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:#111111; font-weight:700; margin-bottom:8px;}
  .home-card-wide .hcw-text .hc-name{font-family:var(--font-display); font-weight:800; font-size:21px; color:#111111; margin-bottom:10px;}
  .home-card-wide .hcw-text .hc-desc{font-size:13.5px; color:#6B6B6B; line-height:1.55;}
  .home-card-wide .hc-cta{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:#111111; white-space:nowrap;}
  .home-card-wide .hc-cta span{display:inline-block; transition:transform .2s;}
  .home-card-wide:hover .hc-cta span{transform:translateX(4px);}
  @media (max-width:640px){
    .home-card-wide{flex-direction:column; align-items:flex-start;}
  }


  /* Player Rankings card: full-width third row on web, same card family as the rest */
  .home-card.hc-rankings{min-height:0; flex-direction:row; align-items:center; justify-content:space-between; gap:28px; animation-delay:.49s;}
  .hc-rankings .hcr-text{flex:1 1 auto; min-width:0;}
  .hc-rankings .hc-name{font-size:24px;}
  .hc-rankings .hc-desc{max-width:560px; margin-bottom:14px;}
  .hc-rankings .hcr-chips{display:grid; grid-template-columns:repeat(3,64px); gap:6px; flex:none;}
  .hc-rankings .hcr-chips span{font-family:var(--font-display); font-weight:700; font-size:12.5px; text-align:center; padding:9px 0; border-radius:8px; border:1px solid var(--border-soft); color:var(--text);}
  @media (min-width:861px){ .home-cards .hc-rankings{grid-column:1 / -1; grid-row:3;} }
  @media (max-width:640px){ .home-card.hc-rankings{flex-direction:column; align-items:flex-start;} .hc-rankings .hcr-chips{grid-template-columns:repeat(3,1fr); width:100%;} }
  /* Web layout: three columns, two rows. The Draft Companion and the Trade Machine are the
     marquee tools, so each takes two columns, with the Post-Draft Analyzer beside the
     Companion and the League Analyzer beside the Trade Machine. Narrow screens keep the
     single-column stack. */
  @media (min-width:861px){
    .home-cards .hc-companion{grid-column:1 / span 2; grid-row:1;}
    .home-cards .hc-draftgrade{grid-column:3; grid-row:1;}
    .home-cards .hc-trade{grid-column:1 / span 2; grid-row:2; animation-delay:.27s;}
    .home-cards .hc-league{grid-column:3; grid-row:2; animation-delay:.38s;}
    /* the Trade Machine card was a centred row; stack it like the others so the two marquee cards read the same */
    .home-cards .hc-trade{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;}
    .home-cards .hc-trade .hcw-left{flex-direction:column; align-items:flex-start; gap:12px;}
    .home-cards .hc-trade .hc-cta{margin-top:auto; padding-top:14px;}
    .home-cards .hc-companion .hc-name, .home-cards .hc-trade .hc-name{font-size:30px; margin-bottom:12px;}
    .home-cards .hc-companion .hc-desc, .home-cards .hc-trade .hcw-text .hc-desc{font-size:15.5px; max-width:560px;}
  }

  .dc-live-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); display:inline-block; animation:dcPulse 2s infinite; margin-right:8px;}
  .dc-avatar{
    display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent-hi); font-family:var(--font-display); font-weight:800; font-size:9.5px;
    margin-right:8px; vertical-align:middle;
  }
  @keyframes dcPulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}

  .dc-pick-badge{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--text-muted); background:var(--bg-elevated); border:1px solid var(--border); padding:7px 16px; border-radius:20px;}
  .dc-pick-badge b{color:var(--accent);}

  /* ghost preview extension on top of the shared .cat-bar-track/.cat-bar-fill bars */
  .cat-bar-ghost{position:absolute; top:0; height:100%; border-radius:0 6px 6px 0; opacity:0.5; transition:left .3s ease, width .3s ease, background .3s ease;}

  .dc-confirm-wrap{position:sticky; bottom:0; display:flex; justify-content:center; padding:18px 0 0; margin-top:-1px; z-index:40; pointer-events:none;}
  .dc-confirm-inner{
    pointer-events:auto; display:flex; align-items:center; gap:16px; background:var(--bg-card-hi); border:1px solid var(--accent);
    border-radius:12px; padding:14px 20px; box-shadow:0 14px 34px rgba(0,0,0,0.45); max-width:600px; width:100%; margin-bottom:18px;
  }
  .dc-confirm-inner .ci-name{font-weight:700; font-size:15px; color:var(--text);}
  .dc-confirm-inner .ci-sub{font-size:12px; color:var(--text-dim); margin-top:2px;}

  /* ---------- mobile ---------- */
  @media (max-width:640px){
    .shell{padding:28px 16px 64px;}
    .topbar{margin-bottom:32px; padding-bottom:16px;}
    .brand{gap:6px;}
    .brand-mark{font-size:20px;}
    .brand-sub{font-size:11.5px;}
    h1.hero{font-size:30px; line-height:1.15;}
    p.lede{font-size:15px; margin-bottom:28px;}
    .card{padding:20px;}
    .section-head{margin:32px 0 14px;}
    .section-head h3{font-size:19px;}

    /* every stat grid (2 or 3 col) stacks to one column */
    .stat-grid{grid-template-columns:1fr !important;}

    /* league setup + format pickers stack instead of squeezing side by side */
    .format-toggle{flex-direction:column;}

    /* compare page: winner panels stack instead of cramming side by side */
    .compare-panels{flex-direction:column;}
    .compare-panel-left{border-right:none !important; border-bottom:1px solid var(--border-soft);}
    .grade-badge-sm{font-size:40px !important;}

    /* compare page: ranked player-list split stacks */
    .compare-split{grid-template-columns:1fr !important;}
    .compare-split-col{border-right:none !important; border-bottom:1px solid var(--border-soft);}
    .compare-split-col:last-child{border-bottom:none;}

    /* compare page: category rows keep their 3-part shape but tighten up */
    .cat-row-vs{grid-template-columns:1fr 46px 1fr !important; gap:8px; padding:11px 10px;}
    .cat-row-vs .cat-name{font-size:11.5px;}

    .grade-hero{padding:26px 20px;}
    .compare-panels{padding:0;}
    .grade-badge{font-size:56px;}
    .grade-copy h2{font-size:21px;}

    table.value-table{min-width:480px; font-size:12.5px;}
    table.value-table td, table.value-table th{padding:9px 8px;}

    .player-row{flex-wrap:wrap; gap:6px;}
    .p-meta{display:block; margin-left:0; margin-top:2px;}

    .actions-row{flex-wrap:wrap; gap:10px;}
    .actions-row .btn{flex:1 1 auto; justify-content:center;}

    .add-btn, .rm-btn{width:32px; height:32px; font-size:16px;}
    .stepper button{width:44px; height:48px;}
  }