:root{
  --bg:#11141a; --panel:#1a1f29; --panel2:#222938; --line:#2c3445;
  --text:#e8edf5; --muted:#94a0b4; --accent:#5b8cff; --good:#36c46b; --bad:#e8554e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Microsoft YaHei",sans-serif}
a{color:var(--accent)}
header{padding:22px 24px 8px}
h1{margin:0;font-size:24px}
.sub{margin:4px 0 0;color:var(--muted);font-size:13px}

.controls{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:14px;
  padding:14px 24px;background:rgba(17,20,26,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line)}
.ctl{display:flex;flex-direction:column;gap:5px;position:relative}
.ctl.grow{flex:1;min-width:150px}
.ctl > label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
select,input[type=text]{background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;font-size:14px;min-width:120px}
input[type=text]{width:100%}
input[type=range]{accent-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel2);color:var(--muted);border:0;padding:7px 12px;font-size:14px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}

/* multi-select dropdown */
.ms-btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font-size:14px;min-width:150px;cursor:pointer;text-align:left;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ms-panel{position:absolute;top:100%;left:0;margin-top:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px;min-width:220px;max-height:340px;overflow:auto;z-index:30;
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ms-panel[hidden]{display:none}
.ms-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:14px}
.ms-row:hover{background:var(--panel2)}
.ms-row.group{font-weight:700;margin-top:4px}
.ms-row.child{padding-left:22px;color:var(--muted)}
.ms-row input{accent-color:var(--accent);width:15px;height:15px}
.ms-tools{display:flex;gap:8px;padding:2px 4px 8px}
.ms-tools button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:5px;font-size:12px;cursor:pointer}

/* dual range */
.dual{position:relative;height:30px;width:190px}
.dual input[type=range]{position:absolute;top:8px;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0c0e12}
.dual input[type=range]::-moz-range-thumb{pointer-events:auto;height:14px;width:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0c0e12}
.dual::before{content:"";position:absolute;top:14px;left:0;right:0;height:4px;background:var(--panel2);border-radius:2px}

main{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;padding:20px 24px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;
  display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;
  transition:transform .08s,border-color .08s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card img{width:100%;height:auto;border-radius:8px;background:#0c0e12;aspect-ratio:3/4;object-fit:contain}
.card .nm{font-size:13px;font-weight:600;margin:8px 0 2px;line-height:1.25}
.card .sect{font-size:11px;color:var(--muted);margin-bottom:6px}
.card .stats{display:flex;gap:10px;width:100%;justify-content:center;margin-top:auto;align-items:center}
.card .wr{font-weight:700}
.card .pop{color:var(--muted);font-size:12px}
.bar{height:5px;width:100%;background:var(--panel2);border-radius:3px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%}
.empty{padding:40px;text-align:center;color:var(--muted)}
footer{padding:18px 24px 40px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;width:min(680px,92vw);max-height:90vh;overflow:auto}
.close{position:absolute;top:12px;right:12px;background:var(--panel2);border:1px solid var(--line);
  color:var(--text);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:14px}
.modal-head{display:flex;gap:16px;align-items:center}
.modal-head img{width:110px;border-radius:10px;background:#0c0e12;aspect-ratio:3/4;object-fit:contain}
.mName{font-size:20px;font-weight:700}
.mSect{color:var(--muted);font-size:13px;margin-top:2px}
.mTot{margin-top:8px;font-size:14px}
.modal-levels{margin:16px 0 6px;font-size:13px;color:var(--muted)}
.levelchips{display:inline-flex;gap:6px;flex-wrap:wrap}
.lchip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px;cursor:pointer;color:var(--text);font-size:13px}
.lchip.off{opacity:.4}
.lchip input{accent-color:var(--accent)}
.chart-wrap{margin-top:16px}
.chart-title{font-size:13px;color:var(--muted);margin-bottom:6px}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;padding:6px;background:var(--panel2);border-radius:8px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.col i{display:block;width:80%;border-radius:2px 2px 0 0;min-height:1px}
.col span{font-size:9px;color:var(--muted);margin-top:3px}
.col .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#000;color:#fff;
  font-size:11px;padding:3px 6px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s}
.col:hover .tip{opacity:1}
.chart-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:var(--muted);font-size:13px;text-align:center;padding:0 16px}

/* ---- top nav (Cards / Combos) ---- */
.topnav{display:flex;gap:6px;padding:10px 24px 0}
.topnav a{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-bottom:none;
  border-radius:10px 10px 0 0;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
  background:var(--panel)}
.topnav a.on{color:#fff;background:var(--panel2);border-color:var(--accent)}

/* ---- combo table (deck page) ---- */
main.deckmain{display:block;padding:14px 24px 60px}
.drow{display:grid;grid-template-columns:46px 1fr 130px 90px 90px;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid var(--line);border-bottom:none;background:var(--panel)}
.drow:first-of-type{border-radius:12px 12px 0 0}
.drow:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
.drow:not(.dhead){cursor:pointer;transition:background .08s}
.drow:not(.dhead):hover{background:var(--panel2)}
.dhead{position:sticky;top:64px;z-index:10;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;background:var(--panel2)}
.drank{color:var(--muted);font-size:13px;text-align:center}
.dcombo{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.cthumb{display:flex;align-items:center;gap:7px;min-width:0}
.cthumb img{width:30px;height:40px;border-radius:5px;background:#0c0e12;object-fit:contain;flex:none}
.cthumb .cnm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.fsect{font-size:11px;color:var(--muted);font-weight:400;white-space:nowrap}
.plus{color:var(--muted);font-weight:700}
.plus.big{font-size:26px;align-self:center;margin:0 4px}
.dwr b{font-size:15px}
.dwr .bar{margin-top:4px}
.dgames{font-variant-numeric:tabular-nums;color:var(--text)}
.dlift{font-weight:700;font-variant-numeric:tabular-nums}

/* combo modal head: two cards side by side */
#mHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mcard{display:flex;gap:12px;align-items:center;flex:1;min-width:200px}
.mcard img{width:80px;border-radius:10px;background:#0c0e12;aspect-ratio:3/4;object-fit:contain;flex:none}

@media(max-width:680px){
  .drow{grid-template-columns:34px 1fr 84px 64px;gap:6px}
  .dlift{display:none}
  .cthumb .cnm{max-width:110px}
}

/* ---- fate page (talent / dao-yun) ---- */
main.mode-held .drow{grid-template-columns:46px 1fr 150px 110px}
main.mode-draft .drow{grid-template-columns:46px 1fr 90px 150px 110px}
.cthumb.tchip{gap:8px}
.tdot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(91,140,255,.18)}
main.mode-draft .dgames,main.mode-held .dgames{font-variant-numeric:tabular-nums}
@media(max-width:680px){
  main.mode-held .drow{grid-template-columns:32px 1fr 92px 64px}
  main.mode-draft .drow{grid-template-columns:32px 1fr 60px 92px}
  main.mode-draft .dlift{display:none}
}

/* fate page images (wiki icons) */
.talimg{width:30px;height:30px;border-radius:7px;background:#0c0e12;object-fit:cover;flex:none}
.dyimg{width:30px;height:40px;border-radius:5px;background:#0c0e12;object-fit:contain;flex:none}
#mHead .talimg{width:56px;height:56px;border-radius:12px}
#mHead .dyimg{width:48px;height:64px}

/* multi-card combo rows (sizes 4-6): compact thumbnails, hide names to fit */
main.deckmain.big .dcombo{gap:4px}
main.deckmain.big .cthumb .cnm{display:none}
main.deckmain.big .cthumb img{width:26px;height:35px}
main.deckmain.big .plus{font-size:11px}
#size button{padding:7px 10px;min-width:0}

/* ===== landing (home) page — 天衍星空 theme, distinct from the tool sub-pages ===== */
body.home{
  background:
    radial-gradient(1150px 560px at 50% -12%, #241c5c 0%, rgba(13,11,34,0) 58%),
    radial-gradient(760px 520px at 88% 14%, #123a44 0%, rgba(7,10,22,0) 55%),
    radial-gradient(680px 520px at 6% 88%, #2a1742 0%, rgba(7,10,22,0) 55%),
    linear-gradient(180deg,#0c0a20 0%, #08070f 100%);
  background-attachment:fixed;min-height:100vh;
  display:flex;flex-direction:column;   /* sticky footer: push footer to viewport bottom when content is short */
}
body.home footer{margin-top:auto}
body.home .topnav{background:rgba(10,9,22,.62);border-bottom-color:rgba(120,140,200,.14);backdrop-filter:blur(8px)}
body.home .topnav a.on{background:linear-gradient(90deg,#6f8cff,#b58bff);color:#fff}

.hero{position:relative;max-width:none;margin:0;padding:40px 24px 8px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.hero-inner{max-width:640px}
.hero-badge{display:inline-block;font-size:11.5px;letter-spacing:2.5px;color:#f0d088;text-transform:uppercase;
  border:1px solid rgba(240,208,136,.34);border-radius:999px;padding:4px 13px;background:rgba(240,208,136,.06)}
.hero-title{font-size:37px;line-height:1.14;margin:15px 0 0;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(92deg,#ffffff 0%,#cdd6ff 48%,#f0d088 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:11px 0 0;font-size:16px;color:#c9d2e6}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:6px}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#c6cfe6;
  border:1px solid rgba(124,142,205,.22);border-radius:999px;padding:5px 12px;background:rgba(20,22,42,.55)}
.pill-season i{width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,#6f8cff,#b58bff);display:inline-block}
.pill-live b{width:7px;height:7px;border-radius:999px;background:#36c46b;display:inline-block;
  box-shadow:0 0 0 0 rgba(54,196,107,.6);animation:livedot 2.4s infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(54,196,107,.55)}70%{box-shadow:0 0 0 6px rgba(54,196,107,0)}100%{box-shadow:0 0 0 0 rgba(54,196,107,0)}}

/* KPI 卡条（顶边彩色 · 大数字） */
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:none;margin:18px 0 0;padding:0 24px}
.kpi{position:relative;background:rgba(20,22,42,.6);border:1px solid rgba(124,142,205,.16);
  border-radius:14px;padding:14px 16px 13px;overflow:hidden;backdrop-filter:blur(4px)}
.kpi::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%}
.kpi.k-games::before{background:linear-gradient(90deg,#f0d088,#e8a24e)}
.kpi.k-tianyan::before{background:linear-gradient(90deg,#6f8cff,#b58bff)}
.kpi.k-cards::before{background:linear-gradient(90deg,#46e3cf,#4a6cf0)}
.kpi.k-fates::before{background:linear-gradient(90deg,#7a5cff,#e06ad6)}
.kpi-label{font-size:12px;color:#9aa4ba;letter-spacing:.5px}
.kpi-num{font-size:27px;font-weight:800;line-height:1.1;margin-top:5px;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.5px}
.kpi-sub{font-size:11px;color:#7e879d;margin-top:4px}

.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  max-width:none;margin:16px 0 0;padding:0 24px}
.home-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);min-width:0;
  background:rgba(20,22,42,.62);border:1px solid rgba(124,142,205,.16);border-radius:18px;
  padding:16px 18px 15px;backdrop-filter:blur(4px);transition:transform .16s ease,border-color .16s,box-shadow .16s}
.home-card:hover{transform:translateY(-4px);border-color:rgba(150,170,255,.55);
  box-shadow:0 20px 48px rgba(0,0,0,.5)}
.hc-head{display:flex;align-items:center;gap:11px}
.hc-no{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#0c0a20;font-variant-numeric:tabular-nums}
.c-cards .hc-no{background:linear-gradient(135deg,#f0d088,#e8a24e)}
.c-combos .hc-no{background:linear-gradient(135deg,#46e3cf,#4a6cf0)}
.c-fate .hc-no{background:linear-gradient(135deg,#7a5cff,#e06ad6)}
.c-tianyan .hc-no{background:linear-gradient(135deg,#6f8cff,#b58bff)}
.hc-htext{flex:1;min-width:0}
.hc-title{font-size:16.5px;font-weight:700}
.hc-sub{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-go{font-size:12.5px;font-weight:600;color:#9bb4ff;flex:none;opacity:.85}
.home-card:hover .hc-go{text-decoration:underline;opacity:1}
.hc-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin:-2px 0 0 41px}
.hc-legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#aeb7cc}
.hc-legend .lg i{width:8px;height:8px;border-radius:999px;display:inline-block}
.hc-chart{position:relative;height:210px;min-width:0;width:100%}
.hc-chart canvas{display:block;max-width:100%}
.hc-foot{display:flex;align-items:center;gap:12px;min-height:24px}
.hc-stat{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13px;color:#dce3f5;
  overflow:hidden;white-space:nowrap}
.hc-stat .chip-tag{font-size:11px;color:#f0d088;border:1px solid rgba(240,208,136,.3);
  border-radius:999px;padding:2px 8px;flex:none}
.hc-stat .chip-name{color:#cdd6ff;overflow:hidden;text-overflow:ellipsis}
.hc-stat b{color:#fff;flex:none}
/* per-card hover accent */
.c-cards:hover{border-color:rgba(240,208,136,.5)}
.c-combos:hover{border-color:rgba(122,224,208,.55)}
.c-fate:hover{border-color:rgba(199,155,255,.55)}
.c-tianyan:hover{border-color:rgba(111,140,255,.6)}

@media(max-width:880px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .home-grid{grid-template-columns:1fr}
  .hero{padding-top:30px}
  .hero-title{font-size:27px}
  .hero-side{align-items:flex-start;width:100%}
  .hero-pills{justify-content:flex-start}
  .hero-inner{max-width:none}
}