/* Auto-scoped under .warmvp-root from design_handoff prototype styles.css. */
.warmvp-root { --bg:#F1F3F7; --bg-deep:#E7EAF0; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#161922; --ink-2:#444B5A; --ink-3:#6A7283; --muted:#9097A6; --faint:#C3C9D4;
  --line:#EAEDF2; --line-2:#E0E4EC;
  --coral:#F04E2C; --coral-600:#D63C1B; --coral-700:#B5300F; --coral-soft:#FFEDE6; --coral-tint:#FFF6F2;
  --amber:#F2A516; --amber-600:#D6890A; --amber-soft:#FFF2D6; --amber-tint:#FFFAEE;
  --green:#0FA06A; --green-600:#0B7E53; --green-soft:#E0F5EC;
  --red:#E5484D; --red-600:#C13338; --red-soft:#FCEAEB;
  --blue:#3E63DD; --blue-soft:#E8EDFC; --purple:#8B5CF6; --purple-soft:#F0EAFE; --teal:#10A4B8;
  --ink-panel:#171A23; --ink-panel-2:#1F2330; --ink-panel-line:#2B3040;
  --r-xs:7px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-sm:0 1px 2px rgba(20,26,40,.06), 0 1px 3px rgba(20,26,40,.04);
  --sh-md:0 2px 4px rgba(20,26,40,.04), 0 8px 22px -10px rgba(20,26,40,.16);
  --sh-lg:0 4px 8px rgba(20,26,40,.05), 0 20px 48px -16px rgba(20,26,40,.24);
  --sh-coral:0 8px 24px -8px rgba(240,78,44,.5);
  --ff-display:'Space Grotesk',system-ui,sans-serif;
  --ff:'Plus Jakarta Sans',system-ui,sans-serif;
  --maxw:1280px; }
.warmvp-root * { box-sizing:border-box;margin:0;padding:0 }
.warmvp-root { height:100% }
.warmvp-root { background:var(--bg) }
.warmvp-root { font-family:var(--ff);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14px;line-height:1.45 }
.warmvp-root { min-height:100%;background:var(--bg) }
.warmvp-root button { font-family:inherit;cursor:pointer;border:none;background:none;color:inherit }
.warmvp-root a { color:inherit;text-decoration:none }
.warmvp-root .tnum { font-variant-numeric:tabular-nums;font-feature-settings:"tnum" }
.warmvp-root .dsp { font-family:var(--ff-display) }
.warmvp-root ::selection { background:var(--coral-soft) }
.warmvp-root *::-webkit-scrollbar { height:9px;width:9px }
.warmvp-root *::-webkit-scrollbar-thumb { background:#D2D7E0;border-radius:20px;border:2px solid transparent;background-clip:content-box }
.warmvp-root *::-webkit-scrollbar-thumb:hover { background:#B9C0CD;background-clip:content-box }
.warmvp-root .app { min-height:100vh;display:flex;flex-direction:column }
.warmvp-root .shell { width:100%;max-width:none;margin:0;padding:0 }
.warmvp-root .page { padding:26px 0 64px }
@media(max-width:720px) {
  .warmvp-root .shell { padding:0 14px }
  .warmvp-root .page { padding:16px 0 80px }
}
.warmvp-root .topbar { position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) }
.warmvp-root .topbar-in { display:flex;align-items:center;gap:18px;height:64px }
.warmvp-root .brand { display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em }
.warmvp-root .brand .logo { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#F0532D,#F2A516);box-shadow:var(--sh-coral) }
.warmvp-root .brand b { color:var(--ink) }
.warmvp-root .brand i { color:var(--coral);font-style:normal }
.warmvp-root .topbar-spacer { flex:1 }
.warmvp-root .warchip { display:flex;align-items:center;gap:14px;padding:7px 14px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--surface) }
.warmvp-root .warchip .vs { font-family:var(--ff-display);font-weight:700;font-size:15px;letter-spacing:-.01em }
.warmvp-root .warchip .sub { font-size:11px;color:var(--ink-3);line-height:1.25 }
.warmvp-root .warchip .div { width:1px;height:30px;background:var(--line-2) }
.warmvp-root .icon-btn { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ink-2);
  border:1px solid transparent }
.warmvp-root .icon-btn:hover { background:var(--bg-deep) }
.warmvp-root .avatar-me { width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#F0532D,#D63C1B);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px }
.warmvp-root .me { display:flex;align-items:center;gap:9px }
.warmvp-root .me .nm { font-weight:700;font-size:13px;line-height:1.1 }
.warmvp-root .me .st { font-size:11px;color:var(--muted) }
.warmvp-root .subnav { background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:40 }
.warmvp-root .subnav-in { display:flex;align-items:center;gap:4px;height:54px;overflow-x:auto;scrollbar-width:none }
.warmvp-root .subnav-in::-webkit-scrollbar { display:none }
.warmvp-root .navlink { display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;font-weight:600;
  color:var(--ink-2);font-size:14px;white-space:nowrap;position:relative }
.warmvp-root .navlink:hover { background:var(--bg) }
.warmvp-root .navlink.on { color:var(--coral);background:var(--coral-tint) }
.warmvp-root .navlink.on::after { content:'';position:absolute;left:14px;right:14px;bottom:-9px;height:3px;border-radius:3px;background:var(--coral) }
.warmvp-root .navlink .ic { opacity:.85 }
.warmvp-root .eyebrow { font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral) }
.warmvp-root .h1 { font-family:var(--ff-display);font-weight:700;font-size:34px;letter-spacing:-.02em;line-height:1.05 }
.warmvp-root .h2 { font-family:var(--ff-display);font-weight:700;font-size:21px;letter-spacing:-.01em }
.warmvp-root .sec-title { display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.01em }
.warmvp-root .sec-title .bar { width:4px;height:20px;border-radius:3px;background:var(--coral) }
.warmvp-root .sec-hint { font-size:12.5px;color:var(--muted) }
.warmvp-root .sec-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px }
.warmvp-root .muted { color:var(--muted) }
.warmvp-root .ink2 { color:var(--ink-2) }
.warmvp-root .ink3 { color:var(--ink-3) }
.warmvp-root .card { background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm) }
.warmvp-root .card-p { padding:18px }
.warmvp-root .card.hover { transition:.16s }
.warmvp-root .card.hover:hover { box-shadow:var(--sh-md);border-color:var(--line-2);transform:translateY(-1px) }
.warmvp-root .panel-dark { background:linear-gradient(160deg,#1B1F2B,#13151D);color:#EAECF2;border:1px solid var(--ink-panel-line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg) }
.warmvp-root .pill { display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.3 }
.warmvp-root .pill.green { background:var(--green-soft);color:var(--green-600) }
.warmvp-root .pill.red { background:var(--red-soft);color:var(--red-600) }
.warmvp-root .pill.amber { background:var(--amber-soft);color:var(--amber-600) }
.warmvp-root .pill.coral { background:var(--coral-soft);color:var(--coral-700) }
.warmvp-root .pill.blue { background:var(--blue-soft);color:var(--blue) }
.warmvp-root .pill.grey { background:var(--bg-deep);color:var(--ink-2) }
.warmvp-root .pill.solid-coral { background:var(--coral);color:#fff }
.warmvp-root .th { display:inline-grid;place-items:center;min-width:38px;height:21px;padding:0 7px;border-radius:6px;
  font-size:11px;font-weight:700;font-family:var(--ff-display);letter-spacing:-.01em }
.warmvp-root .chip { display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line-2);font-weight:600;font-size:12.5px;color:var(--ink-2) }
.warmvp-root .chip.on { background:var(--ink);color:#fff;border-color:var(--ink) }
.warmvp-root .star { color:var(--amber) }
.warmvp-root .star-mut { color:var(--faint) }
.warmvp-root .av { display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;font-family:var(--ff-display);
  flex:none;letter-spacing:-.02em }
.warmvp-root .medal { display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:11px;font-weight:800;color:#fff }
.warmvp-root .hex { width:52px;height:58px;display:grid;place-items:center;position:relative;flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#fff;text-align:center }
.warmvp-root .hex .n { font-family:var(--ff-display);font-weight:700;font-size:23px;line-height:1 }
.warmvp-root .hex .of { font-size:8px;font-weight:700;letter-spacing:.06em;opacity:.85;margin-top:1px }
.warmvp-root .stat { display:flex;flex-direction:column;gap:3px }
.warmvp-root .stat .lbl { font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:5px }
.warmvp-root .stat .val { font-family:var(--ff-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1 }
.warmvp-root .stat .val small { font-size:12px;color:var(--muted);font-weight:600 }
.warmvp-root .tile { background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px }
.warmvp-root .tbl { width:100%;border-collapse:separate;border-spacing:0 }
.warmvp-root .tbl thead th { font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  text-align:right;padding:0 11px 11px;white-space:nowrap;cursor:pointer;user-select:none }
.warmvp-root .tbl thead th.l { text-align:left }
.warmvp-root .tbl thead th .ar { color:var(--coral) }
.warmvp-root .tbl tbody td { padding:10px 11px;border-top:1px solid var(--line);text-align:right;white-space:nowrap }
.warmvp-root .tbl tbody td.l { text-align:left }
.warmvp-root .tbl tbody tr:hover { background:var(--surface-2) }
.warmvp-root .tbl tbody tr.you { background:var(--coral-tint) }
.warmvp-root .tbl tbody tr.click { cursor:pointer }
.warmvp-root .row-rank { font-family:var(--ff-display);font-weight:700;color:var(--ink-3) }
.warmvp-root .rankbadge { border-radius:var(--r-md);display:grid;place-items:center;flex:none;text-align:center }
.warmvp-root .rankbadge .n { font-family:var(--ff-display);font-weight:700;line-height:1 }
.warmvp-root .rankbadge .of { font-size:8px;font-weight:700;letter-spacing:.06em;opacity:.82;margin-top:2px }
.warmvp-root .panel-hero { position:relative;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);overflow:hidden;
  background:radial-gradient(130% 130% at 100% 0%, var(--coral-tint), transparent 54%), linear-gradient(180deg,#FFFFFF,#FBFAFC) }
.warmvp-root .form { display:inline-flex;gap:3.5px }
.warmvp-root .form-track { padding:6px 9px;border-radius:9px;background:var(--coral-tint) }
.warmvp-root .form i { width:8.5px;height:18px;border-radius:3px;display:block }
.warmvp-root .fd-g { background:var(--green) }
.warmvp-root .fd-o { background:var(--amber) }
.warmvp-root .fd-r { background:var(--red) }
.warmvp-root .fd-miss { background:var(--faint) }
.warmvp-root .fd-n { background:var(--faint) }
.warmvp-root .fd-out { background:repeating-linear-gradient(135deg,transparent,transparent 2px,var(--line-2) 2px,var(--line-2) 3px);
  box-shadow:inset 0 0 0 1px var(--line-2) }
.warmvp-root .bar { height:8px;border-radius:6px;background:var(--bg-deep);overflow:hidden }
.warmvp-root .bar > i { display:block;height:100%;border-radius:6px;background:var(--coral) }
.warmvp-root .seg { display:inline-flex;background:var(--bg-deep);border-radius:11px;padding:3px;gap:2px }
.warmvp-root .seg button { padding:7px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-2) }
.warmvp-root .seg button.on { background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm) }
.warmvp-root .btn { display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;font-weight:700;font-size:13.5px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2) }
.warmvp-root .btn:hover { background:var(--bg) }
.warmvp-root .btn.primary { background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:var(--sh-coral) }
.warmvp-root .btn.primary:hover { background:var(--coral-600) }
.warmvp-root .btn.dark { background:var(--ink);color:#fff;border-color:var(--ink) }
.warmvp-root .g { display:grid;gap:16px }
.warmvp-root .row { display:flex;gap:16px }
.warmvp-root .wrap { flex-wrap:wrap }
.warmvp-root .between { justify-content:space-between }
.warmvp-root .center { align-items:center }
@media(prefers-reduced-motion:no-preference) {
  .warmvp-root .wm-fade { animation:fade .4s both }
  @keyframes fade {
    from { opacity:0;transform:translateY(8px) }
    to { opacity:1;transform:none }
  }
}
.warmvp-root .tt { position:fixed;z-index:100;background:var(--ink-panel);color:#fff;padding:8px 11px;border-radius:9px;
  font-size:12px;pointer-events:none;box-shadow:var(--sh-lg);max-width:240px;line-height:1.4 }
.warmvp-root .tt b { font-family:var(--ff-display) }
.warmvp-root .v-roster { --vc:var(--green);--vcs:var(--green-soft) }
.warmvp-root .v-backup { --vc:var(--amber-600);--vcs:var(--amber-soft) }
.warmvp-root .v-bench { --vc:var(--ink-3);--vcs:var(--bg-deep) }
.warmvp-root .v-risk { --vc:var(--red);--vcs:var(--red-soft) }
.warmvp-root .grid-3 { display:grid;gap:16px;grid-template-columns:repeat(3,1fr) }
.warmvp-root .grid-2 { display:grid;gap:16px;grid-template-columns:repeat(2,1fr) }
.warmvp-root .grid-4 { display:grid;gap:14px;grid-template-columns:repeat(4,1fr) }
@media(max-width:980px) {
  .warmvp-root .grid-3 { grid-template-columns:1fr }
  .warmvp-root .grid-2 { grid-template-columns:1fr }
  .warmvp-root .grid-4 { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px) {
  .warmvp-root .grid-4 { grid-template-columns:repeat(2,1fr) }
}
.warmvp-root .hide-sm {  }
@media(max-width:720px) {
  .warmvp-root .hide-sm { display:none!important }
}
.warmvp-root .only-sm { display:none }
@media(max-width:720px) {
  .warmvp-root .only-sm { display:initial }
}
.warmvp-root .rost-head { display:grid;gap:8px 14px;align-items:center;padding:0 16px 9px;
  grid-template-columns:24px 22px minmax(150px,1.25fr) 116px minmax(280px,auto) 92px 18px;
  grid-template-areas:"chk rank player trend stats adv chev";
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3) }
.warmvp-root .rost-row { display:grid;gap:8px 14px;align-items:center;padding:12px 16px;cursor:pointer;
  grid-template-columns:24px 22px minmax(150px,1.25fr) 116px minmax(280px,auto) 92px 18px;
  grid-template-areas:"chk rank player trend stats adv chev" }
.warmvp-root .rost-check { grid-area:chk;width:21px;height:21px;border-radius:7px;border:2px solid var(--line-2);
  display:grid;place-items:center;background:var(--surface) }
.warmvp-root .rost-check.on { background:var(--coral);border-color:var(--coral) }
.warmvp-root .rost-rank { grid-area:rank;font-family:var(--ff-display);font-weight:700;color:var(--ink-3);font-size:14 }
.warmvp-root .rost-player { grid-area:player;display:flex;align-items:center;gap:11px;min-width:0 }
.warmvp-root .rost-trend { grid-area:trend;display:flex;justify-content:center }
.warmvp-root .rost-stats { grid-area:stats;display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:10px;align-items:center }
.warmvp-root .rost-cell { display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;border-radius:9px }
.warmvp-root .rost-cell.act { background:var(--coral-tint) }
.warmvp-root .rost-adv { grid-area:adv;display:flex;justify-content:flex-end }
.warmvp-root .rost-chev { grid-area:chev;display:flex;align-items:center }
.warmvp-root .rost-row.rost-sel { border-color:var(--coral);box-shadow:0 0 0 1px var(--coral),var(--sh-sm) }
.warmvp-root .rost-head .rost-stats > div { text-align:center }
@media(max-width:720px) {
  .warmvp-root .rost-row { grid-template-columns:24px 1fr auto 18px;
    grid-template-areas:"chk player adv chev" "stats stats stats stats" }
  .warmvp-root .rost-trend, .warmvp-root .rost-rank { display:none }
  .warmvp-root .rost-stats { padding-top:10px;margin-top:4px;border-top:1px solid var(--line) }
}
.warmvp-root .cmp-bar { position:sticky;bottom:16px;margin-top:18px;display:flex;align-items:center;gap:14px;
  background:var(--ink-panel);color:#fff;padding:10px 12px 10px 16px;border-radius:16px;box-shadow:var(--sh-lg);z-index:30 }
.warmvp-root .cmp-bar .btn { flex:none }
.warmvp-root .pl-cols { display:grid }
@media(max-width:860px) {
  .warmvp-root .pl-cols { grid-template-columns:1fr!important }
}
.warmvp-root .rdy-grid {  }
@media(max-width:680px) {
  .warmvp-root .rdy-grid { grid-template-columns:1fr!important;justify-items:center;text-align:center }
}
.warmvp-root .hero-chip { display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--ink-2) }
.warmvp-root .hero-chip b { font-family:var(--ff-display);font-weight:700;color:var(--ink) }
.warmvp-root .hero-chip span { font-family:var(--ff-display);font-weight:700;color:var(--blue) }
.warmvp-root .hero-chip.up { background:var(--amber-tint);border-color:var(--amber-soft) }
.warmvp-root .hero-chip.up span { color:var(--amber-600) }
.warmvp-root .cmp-chip { display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 8px;border-radius:30px;
  background:var(--surface);border:1.5px solid var(--cc);position:relative }
.warmvp-root .cmp-dot { width:9px;height:9px;border-radius:9px;background:var(--cc) }
.warmvp-root .cmp-pop { position:absolute;top:46px;left:0;z-index:30;width:280px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:14px;box-shadow:var(--sh-lg);padding:10px }
.warmvp-root .cmp-opt { display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:9px }
.warmvp-root .cmp-opt:hover { background:var(--bg) }
.warmvp-root .cmp-tbl thead th { vertical-align:bottom }
.warmvp-root .cmp-tbl tbody td { padding:11px }
.warmvp-root .adv-row { display:flex;align-items:center;gap:14px;padding:13px 16px }
.warmvp-root .adv-factors { display:flex;gap:12px;flex:none }
.warmvp-root .adv-heroes { display:flex;gap:4px;flex:none }
.warmvp-root .hero-mini { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--ff-display);
  font-weight:700;font-size:10.5px;background:var(--bg);border:1px solid var(--line-2);color:var(--ink-2) }
.warmvp-root .hero-mini.up { background:var(--amber-tint);border-color:var(--amber-soft);color:var(--amber-600);
  box-shadow:0 0 0 1px var(--amber-soft) }
@media(max-width:980px) {
  .warmvp-root .adv-factors { display:none!important }
}
@media(max-width:1100px) {
  .warmvp-root .adv-heroes { display:none!important }
}
.warmvp-root .strat-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer }
.warmvp-root .strat-head:hover { background:var(--surface-2) }
.warmvp-root .switch { width:42px;height:24px;border-radius:20px;background:var(--line-2);position:relative;transition:.2s;flex:none;display:block }
.warmvp-root .switch.on { background:var(--coral) }
.warmvp-root .switch i { position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:var(--sh-sm);display:block }
.warmvp-root .switch.on i { left:21px }
.warmvp-root .leadtog { display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;font-weight:700;font-size:13px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2) }
.warmvp-root .leadtog.on { border-color:var(--coral);color:var(--coral);background:var(--coral-tint) }
.warmvp-root .vote-row { display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);text-align:left;transition:.12s }
.warmvp-root .vote-row:hover { background:var(--surface-2);border-color:var(--line-2) }
.warmvp-root .vote-row.mine { border-color:var(--coral);background:var(--coral-tint) }
.warmvp-root .elig-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px }
@media(max-width:720px) {
  .warmvp-root .elig-grid { grid-template-columns:1fr }
}
.warmvp-root .elig-row { display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;border:1px solid var(--line);background:var(--surface) }
.warmvp-root .elig-row.champ { border-color:var(--amber);background:var(--amber-tint) }
.warmvp-root .elig-row.ex { opacity:.55;background:var(--surface-2) }
.warmvp-root .excl-btn { width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);
  background:var(--surface);color:var(--red) }
.warmvp-root .excl-btn:hover { background:var(--red-soft);border-color:var(--red-soft) }
.warmvp-root .excl-btn.on { color:var(--green);background:var(--green-soft);border-color:var(--green-soft) }
.warmvp-root .hist-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
@media(max-width:900px) {
  .warmvp-root .hist-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:520px) {
  .warmvp-root .hist-grid { grid-template-columns:1fr }
}
.warmvp-root .hist-card { border:1px solid var(--line);border-radius:var(--r-md);padding:10px;background:var(--surface-2) }
.warmvp-root .method-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
@media(max-width:860px) {
  .warmvp-root .method-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px) {
  .warmvp-root .method-grid { grid-template-columns:1fr }
}
.warmvp-root .method-item { display:flex;gap:10px;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface) }
.warmvp-root .method-item.off { background:var(--surface-2);opacity:.72 }
.warmvp-root .mi-ic { width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--coral-soft);color:var(--coral-700) }
.warmvp-root .method-item.off .mi-ic { background:var(--bg-deep);color:var(--ink-3) }
.warmvp-root .potm-tbl thead th { cursor:pointer }
.warmvp-root .rng { -webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--bg-deep);outline:none }
.warmvp-root .rng::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--coral);cursor:pointer;box-shadow:var(--sh-sm) }
.warmvp-root .rng::-moz-range-thumb { width:18px;height:18px;border:none;border-radius:50%;background:var(--coral);cursor:pointer }
.warmvp-root .livedot { width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:livep 1.8s infinite }
@keyframes livep {
  0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent) }
  70% { box-shadow:0 0 0 5px transparent }
  100% { box-shadow:0 0 0 0 transparent }
}
.warmvp-root .potm-hist { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
@media(max-width:900px) {
  .warmvp-root .potm-hist { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px) {
  .warmvp-root .potm-hist { grid-template-columns:1fr }
}
.warmvp-root .potm-hist-card { border:1px solid var(--line);border-radius:var(--r-md);padding:14px;background:var(--surface);text-align:left;transition:.14s }
.warmvp-root .potm-hist-card:hover { box-shadow:var(--sh-md);transform:translateY(-1px);border-color:var(--line-2) }
.warmvp-root .potm-hist-card.on { border-color:var(--coral);box-shadow:0 0 0 1px var(--coral) }
.warmvp-root .drawer-wrap { position:fixed;inset:0;z-index:80;background:rgba(20,26,40,.44);backdrop-filter:blur(3px);
  display:flex;justify-content:flex-end;animation:dwfade .2s both }
@keyframes dwfade {
  from { opacity:0 }
  to { opacity:1 }
}
.warmvp-root .drawer { width:min(480px,100%);height:100%;background:var(--surface);box-shadow:var(--sh-lg);display:flex;flex-direction:column;
  animation:dwslide .24s cubic-bezier(.2,.7,.3,1) both }
@keyframes dwslide {
  from { transform:translateX(30px);opacity:.4 }
  to { transform:none;opacity:1 }
}
.warmvp-root .drawer-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);flex:none }
.warmvp-root .drawer-body { padding:18px 20px 26px;overflow-y:auto }
.warmvp-root .drawer-tiles { display:grid;grid-template-columns:repeat(4,1fr);gap:9px }
@media(max-width:520px) {
  .warmvp-root .drawer-tiles { grid-template-columns:repeat(2,1fr) }
}
.warmvp-root .ins-select { padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:13px;
  font-weight:600;background:var(--surface);color:var(--ink);outline:none;min-width:180px }
.warmvp-root .ins-charts { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px }
@media(max-width:900px) {
  .warmvp-root .ins-charts { grid-template-columns:1fr }
}
.warmvp-root .ins-charts>div { background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 12px 12px }
.warmvp-root .ins-chart-t { text-align:center;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:10px;letter-spacing:-.01em }
.warmvp-root .ins-tbl thead th { white-space:nowrap }
.warmvp-root .ins-tbl tbody td { vertical-align:middle }
.warmvp-root .move-tag { display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:700;white-space:nowrap }
.warmvp-root .ins-badge { display:inline-block;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;white-space:nowrap }
.warmvp-root .cmp-cols { display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center }
@media(max-width:820px) {
  .warmvp-root .cmp-cols { grid-template-columns:1fr }
}
.warmvp-root .strat-body { padding:4px 16px 18px;border-top:1px solid var(--line) }
.warmvp-root .ig-title { font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 9px }
.warmvp-root .strat-cols { display:grid;grid-template-columns:1.3fr 1fr;gap:8px 24px }
@media(max-width:760px) {
  .warmvp-root .strat-cols { grid-template-columns:1fr }
}
.warmvp-root .item-chip { display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);transition:.12s }
.warmvp-root .item-chip:hover { border-color:var(--faint);background:var(--surface-2) }
.warmvp-root .item-chip.on { background:color-mix(in srgb, var(--ic) 12%, white);border-color:var(--ic);color:color-mix(in srgb, var(--ic), black 22%) }
.warmvp-root .item-chip .ic-dot { width:8px;height:8px;border-radius:9px;flex:none;display:block }
.warmvp-root .strat-equip { display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px }
@media(max-width:760px) {
  .warmvp-root .strat-equip { grid-template-columns:1fr }
}
.warmvp-root .equip-hero-h { display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:8px }
.warmvp-root .strat-foot { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line) }
.warmvp-root .req-toggle { display:flex;align-items:center;gap:10px;text-align:left }
.warmvp-root .req-box { width:21px;height:21px;border-radius:7px;border:2px solid var(--line-2);background:var(--surface);flex:none;display:grid;place-items:center }
.warmvp-root .req-toggle.on .req-box { background:var(--coral);border-color:var(--coral) }
.warmvp-root .miss-chip { display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:7px;font-size:10.5px;font-weight:700;
  background:var(--red-soft);color:var(--red-600);font-family:var(--ff-display) }
.warmvp-root .miss-chip i { width:6px;height:6px;border-radius:9px;display:block;opacity:.6 }
.warmvp-root .miss-chip .mc-x { opacity:.7 }
@media(max-width:680px) {
  .warmvp-root .arch-stats { grid-template-columns:repeat(2,1fr)!important;gap:14px!important }
}
.warmvp-root .arch-rounds {  }
@media(max-width:760px) {
  .warmvp-root .arch-rounds { grid-template-columns:repeat(3,1fr)!important }
}
.warmvp-root .round-card { display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px;background:var(--surface-2) }
.warmvp-root .round-card.win { border-left:3px solid var(--green) }
.warmvp-root .round-card.loss { border-left:3px solid var(--red) }
.warmvp-root .podium { display:flex;align-items:flex-end;justify-content:center;gap:14px;padding-top:8px }
.warmvp-root .pod-col { display:flex;flex-direction:column;align-items:center }
.warmvp-root .pod-bar { width:64px;border-radius:10px 10px 0 0;display:grid;place-items:center;margin-top:8px;align-items:flex-start;padding-top:8px }
@media(max-width:760px) {
  .warmvp-root .pod-bar { width:48px }
}
.warmvp-root.compact { font-size:13px }
.warmvp-root.compact .card-p { padding:13px }
.warmvp-root.compact .page { padding:16px 0 48px }
.warmvp-root.compact .h1 { font-size:26px }

/* Fluid layout: cap chart SVGs so they don't balloon at full width. */
.warmvp-root .ins-charts > div > svg { max-width:520px;display:block;margin:0 auto }
.warmvp-root .cmp-cols > div > svg { display:block;margin:0 auto }
.warmvp-root .cmp-cols > div:nth-child(1) > svg { max-width:320px }
.warmvp-root .cmp-cols > div:nth-child(2) > svg { max-width:560px }

/* Sit on the app canvas (no paler panel behind the page) and read in the player's chosen font. */
.warmvp-root { --bg: var(--app-canvas, #F1F3F7); --ff: var(--app-font-ui, system-ui, sans-serif); }
/* Dark mode: the page follows the app theme. Surfaces, ink and lines come from the app's
   own tokens; the soft tints become low-alpha washes so chips stay readable on navy. */
[data-theme-mode="dark"] .warmvp-root {
  --bg-deep: var(--app-surface-2); --surface: var(--app-surface); --surface-2: var(--app-surface-2);
  --ink: var(--app-ink); --ink-2: var(--app-ink-soft); --ink-3: var(--app-mute); --muted: var(--app-fade); --faint: #64748b;
  --line: var(--app-line); --line-2: rgba(255,255,255,.12);
  --coral-soft: rgba(240,78,44,.16); --coral-tint: rgba(240,78,44,.08);
  --amber-soft: rgba(242,165,22,.16); --amber-tint: rgba(242,165,22,.08);
  --green-soft: rgba(15,160,106,.18); --red-soft: rgba(229,72,77,.16);
  --blue-soft: rgba(62,99,221,.2); --purple-soft: rgba(139,92,246,.2);
  --sh-sm: 0 2px 4px rgba(0,0,0,.4); --sh-md: 0 8px 22px -10px rgba(0,0,0,.6); --sh-lg: 0 20px 48px -16px rgba(0,0,0,.7);
}
[data-theme-mode="dark"] .warmvp-root .topbar { background: rgba(15,23,42,.86); }
[data-theme-mode="dark"] .warmvp-root .panel-hero { background: radial-gradient(130% 130% at 100% 0%, var(--coral-tint), transparent 54%), linear-gradient(180deg, var(--app-surface), var(--app-surface-2)); }
[data-theme-mode="dark"] .warmvp-root .chip.on, [data-theme-mode="dark"] .warmvp-root .btn.dark { background: var(--app-surface-3, #334155); border-color: var(--app-surface-3, #334155); color: #fff; }