:root{
  --bg:#08080b;
  --panel:#101015;
  --panel-2:#16161d;
  --raise:#1c1c24;
  --edge:rgba(255,255,255,.08);
  --edge-soft:rgba(255,255,255,.045);
  --text:#eceae5;
  --muted:#8b8894;
  --dim:#5e5c68;
  --gold:#f0c264;
  --gold-hot:#ffdf95;
  --gold-deep:#7e6226;
  --steel:#8794a1;
  --crimson:#e0576f;
  --crimson-deep:#7d2b3c;
  --steel-deep:#39424c;
  --r:12px;
  --rs:8px;
  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 90px;
  background-image:radial-gradient(1000px 640px at 88% -18%,rgba(240,194,100,.1),rgba(240,194,100,.03) 42%,rgba(240,194,100,0) 78%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.wrap{max-width:1000px;margin:0 auto}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-0.015em}

/* ── шапка ── */
header{
  position:sticky;top:0;z-index:12;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 0 14px;margin-bottom:6px;
}
header::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:0;bottom:-18px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,11,.93),rgba(8,8,11,.78) 52%,rgba(8,8,11,0));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(to bottom,#000 54%,transparent);
  mask-image:linear-gradient(to bottom,#000 54%,transparent);
}
h1{font-family:var(--display);font-size:20px;font-weight:600;margin:0;letter-spacing:-0.02em}
h1 span{display:block;font-family:"Inter",sans-serif;font-size:12px;font-weight:400;color:var(--dim);margin-top:2px}
.nav{display:flex;align-items:center;gap:8px}
.navgroup{
  display:flex;align-items:center;gap:2px;padding:3px;
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:999px;
}
.navgroup .arrow{width:32px;height:32px;padding:0;border:none;background:none;border-radius:50%;font-size:17px;line-height:1}
.navgroup .arrow:hover{background:rgba(255,255,255,.08)}
.month{
  min-width:170px;height:32px;padding:0 12px;text-align:center;
  font-family:var(--display);font-size:15px;font-weight:500;
  background:none;border:none;border-radius:999px;
}
.pill{height:38px;padding:0 17px;border-radius:999px}
#menuBtn{width:38px;height:38px;padding:0;border-radius:50%;font-size:16px;letter-spacing:.5px;line-height:1}
.mpick-head .arrow{width:32px;height:32px;padding:0;border-radius:50%;font-size:16px;line-height:1}
button{
  font:inherit;color:inherit;background:rgba(255,255,255,.045);
  border:1px solid var(--edge-soft);border-radius:var(--rs);
  padding:8px 13px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
button:hover{background:rgba(255,255,255,.085);border-color:var(--edge)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.arrow{width:36px;padding:8px 0;line-height:1;color:var(--muted)}
.arrow:hover{color:var(--text)}
.ghost{background:transparent}
.ghost:hover{background:rgba(255,255,255,.06)}

/* ── сегодня ── */
.today{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin:10px 0 28px;padding:18px 20px;border-radius:var(--r);
  background:
    radial-gradient(460px 200px at 0% 0%,rgba(240,194,100,.13),rgba(240,194,100,0) 76%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge-soft);
}
.today .d{font-size:13px;color:var(--muted)}
.today .d b{display:block;font-family:var(--display);color:var(--text);font-size:19px;font-weight:600;letter-spacing:-0.02em;margin-bottom:2px}
.today .status{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mark{
  background:linear-gradient(180deg,var(--gold-hot),var(--gold));
  color:#1a1305;border-color:transparent;font-weight:600;padding:11px 20px;border-radius:999px;
  box-shadow:0 6px 20px -10px rgba(240,194,100,.9);
}
.mark:hover{background:linear-gradient(180deg,#ffe9b4,var(--gold-hot));border-color:transparent}
.got{font-family:var(--display);color:var(--gold);font-weight:600;font-size:18px;letter-spacing:-0.01em}
.got.denny{color:var(--steel)}
.got.master{color:var(--crimson)}

/* ── сетка дней ── */
.grid-head,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.grid-head{margin-bottom:8px}
.grid-head div{font-size:11px;color:var(--dim);text-align:center;letter-spacing:.03em}
.grid-head div:nth-child(n+6){color:#4b4955}
.cell{
  position:relative;aspect-ratio:1/.88;min-height:60px;padding:8px 9px;
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;text-align:left;overflow:hidden;
}
.cell:hover{background:var(--panel-2);border-color:var(--edge);transform:translateY(-1px)}
.cell.blank{background:none;border:none;cursor:default;pointer-events:none}
.cell .dn{font-family:var(--display);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.cell .val{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.05;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.cell .sub{font-size:10px;color:var(--dim);line-height:1.2;letter-spacing:.02em}
.cell.future{opacity:.28;cursor:default}
.cell.future:hover{transform:none;background:var(--panel);border-color:var(--edge-soft)}
.cell.today-c{border-color:rgba(255,255,255,.2)}
.cell.today-c .dn{color:var(--text)}

/* незаполненный гарантированный день — точка в углу */
.cell.guar:not(.p):not(.d)::after{
  content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:50%;
  background:var(--gold-deep);box-shadow:0 0 0 3px rgba(240,194,100,.07);
}
.cell.guar:not(.p):not(.d) .dn{color:#9a7a30}

/* денни */
.cell.d .val{color:var(--steel);font-size:15px}
.cell.d{box-shadow:inset 2px 0 0 var(--steel-deep)}
/* полихромы: чем крупнее награда, тем теплее и ярче ячейка */
.cell.p .val{color:var(--gold)}
.cell.p1{background:linear-gradient(150deg,rgba(240,194,100,.07),rgba(240,194,100,.015));box-shadow:inset 2px 0 0 rgba(240,194,100,.42)}
.cell.p2{background:linear-gradient(150deg,rgba(240,194,100,.13),rgba(240,194,100,.02));box-shadow:inset 2px 0 0 rgba(240,194,100,.62)}
.cell.p3{background:linear-gradient(150deg,rgba(240,194,100,.2),rgba(240,194,100,.03));box-shadow:inset 2px 0 0 var(--gold);border-color:rgba(240,194,100,.22)}
.cell.p4{
  background:linear-gradient(150deg,rgba(255,223,149,.3),rgba(240,194,100,.05));
  border-color:rgba(240,194,100,.5);
  box-shadow:inset 2px 0 0 var(--gold-hot),0 8px 26px -14px rgba(240,194,100,.95);
}
.cell.p4 .val{color:var(--gold-hot);font-size:19px}
.cell.m{background:linear-gradient(150deg,rgba(224,87,111,.12),rgba(224,87,111,.02));box-shadow:inset 2px 0 0 var(--crimson);border-color:rgba(224,87,111,.2)}
.cell.m .val{color:var(--crimson)}
.cell.m .dn{color:#a3596a}
.cell.m .sub{color:#7d4a55}
.cell.p .dn{color:#a08243}
.cell.p .sub{color:#7b6531}

/* ── итоги ── */
.totals{display:grid;grid-template-columns:1.25fr 2fr;gap:8px;margin:30px 0 0}
.tot{padding:16px 18px;background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r)}
.tot .k{font-size:12px;color:var(--muted);margin-bottom:6px}
.tot .v{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-0.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.hero{
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(360px 190px at 100% 0%,rgba(240,194,100,.14),rgba(240,194,100,0) 76%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  border-color:rgba(240,194,100,.16);
}
.hero .v{font-size:44px;color:var(--gold-hot);margin:2px 0 4px}
.hero .delta{font-size:12px;color:var(--muted);min-height:18px}
.bar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:2px;transition:width .4s ease}
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subs .v{font-size:23px}
.subs .tot.gold .v{color:var(--gold)}
.subs .tot.st .v{color:var(--steel)}
.hint{font-size:12.5px;color:var(--dim);margin:12px 0 0}

section{margin-top:46px}
h2{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 4px;letter-spacing:-0.015em}
section .hint{margin:0 0 14px}
.card{background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);padding:18px 18px 12px}
svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:18px;font-size:11.5px;color:var(--dim);padding:6px 2px 6px}
.legend i{display:inline-block;width:8px;height:8px;margin-right:7px;vertical-align:-1px;border-radius:2px}
.bar-h{transition:opacity .15s ease,filter .15s ease}
svg:hover .bar-h{opacity:.4}
svg .bar-h:hover{opacity:1;filter:brightness(1.15) saturate(1.05)}

/* ── рекорды ── */
.sechead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.sechead > div{min-width:0}
.sechead > button{flex:0 0 auto;white-space:nowrap;margin-top:2px}
.sechead .hint{margin:0 0 14px}
.seg{display:flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--edge-soft);border-radius:999px}
.seg button{border:none;background:none;padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--muted)}
.seg button:hover{background:rgba(255,255,255,.06);color:var(--text)}
.seg button.on{background:rgba(240,194,100,.14);color:var(--gold-hot)}
.seg:empty{display:none}
.segs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
th.sortable{cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text)}
th.sorted{color:var(--gold-hot)}
th .arw{margin-left:5px;font-size:9px;vertical-align:1px}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 4px 8px;font-size:12.5px;color:var(--muted)}
.pager:empty{display:none}
.pager button{padding:6px 12px;border-radius:999px}
.pager button[disabled]{opacity:.35;cursor:default}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11.5px;font-weight:400;color:var(--dim);text-align:right;padding:0 12px 10px}
th:first-child,td:first-child{text-align:left}
td{padding:11px 12px;border-top:1px solid var(--edge-soft);text-align:right;font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover td{background:rgba(255,255,255,.03)}
.rank{color:var(--dim);width:32px;text-align:right !important;padding-right:0;font-family:var(--display)}
tr.top1 .rank{color:var(--gold-hot)}
tr.top2 .rank,tr.top3 .rank{color:#a08243}
td.poly{font-family:var(--display);color:var(--gold);font-weight:600}
td.denny{color:var(--steel)}
td.master{color:var(--crimson)}
.empty{padding:26px 4px;color:var(--muted);font-size:13.5px;border-top:none}

/* ── боковое меню ── */
.hidden{display:none !important}
.shell{display:flex;gap:26px;max-width:1240px;margin:0 auto;align-items:flex-start}
.shell .wrap{flex:1;min-width:0;margin:0}
.side{
  position:sticky;top:18px;z-index:20;width:196px;flex:0 0 196px;
  padding:18px 0 0;display:flex;flex-direction:column;gap:22px;
  max-height:calc(100vh - 18px);overflow:auto;scrollbar-width:thin;
}
.sgame{display:flex;flex-direction:column;gap:1px}
.sgame + .sgame{margin-top:10px}
.navhead{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;border-radius:8px;text-align:left;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);padding:5px 14px;font-weight:600;cursor:pointer}
.navhead span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navhead:hover{color:var(--muted);background:rgba(255,255,255,.03)}
.navhead .caret{font-style:normal;font-size:9px;transform:rotate(90deg);transition:transform .15s ease;opacity:.8}
.sgame.fold .navhead .caret{transform:none}
.sitems{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.sgame.fold .sitems{display:none}
.sgame.cur .navhead{color:#b8933f}
.sgame .navitem{padding:7px 14px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgame .navitem.on::before{top:8px;bottom:8px}
.navadd{border:none;background:none;text-align:left;padding:7px 14px;color:var(--dim);font-size:13px;border-radius:10px}
.navadd:hover{color:var(--gold-hot);background:rgba(255,255,255,.04)}
.navform{display:flex;gap:6px;padding:4px 4px 0 8px}
.navform input{flex:1;min-width:0;padding:7px 9px;font-size:13px}
.navform .sm{height:32px;padding:0 10px}
.navnote{font-size:11px;color:var(--dim);margin:6px 14px 0;line-height:1.4}
.burger{display:none;width:38px;height:38px;padding:0;border-radius:10px;font-size:18px;line-height:1;color:var(--muted)}
.scrim{position:fixed;inset:0;z-index:29;display:none;background:rgba(5,5,8,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.menu-open .scrim{display:block}
.brand{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-0.02em;padding:0 14px 4px}
.brand span{color:var(--gold)}
.sidenav{display:flex;flex-direction:column;gap:3px}
.navitem{
  border:none;background:none;text-align:left;padding:10px 14px;border-radius:10px;
  font-size:14.5px;color:var(--muted);position:relative;
}
.navitem:hover{background:rgba(255,255,255,.05);color:var(--text)}
.navitem.on{background:rgba(240,194,100,.12);color:var(--gold-hot);font-weight:500}
.navitem.on::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:2px;background:var(--gold)}
.hleft{display:flex;align-items:center;gap:13px;min-width:0}
.sidelabel{font-size:11px;color:var(--dim);letter-spacing:.04em;padding:0 14px 8px}
.sidegroup{display:flex;flex-direction:column;gap:2px}
.sidegroup .linkbtn{align-self:flex-start;margin:8px 0 0 14px;font-size:12.5px}
.sidegroup .inline{margin:8px 0 0 0;flex-wrap:nowrap}
.sidegroup .inline input{min-width:0}
body:not(.tab-pulls) #navGame,body:not(.game-custom) #navGame{display:none}
#achGameSeg{display:none}
#gameLabel{min-width:120px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#navGame{padding:3px 4px}
body:not(.tab-calendar) #navMonth,body:not(.tab-calendar) #toToday{display:none}
body:not(.tab-pulls) #navPatch{display:none}

/* ── чипы, поля, формы ── */
.rowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:999px;font-size:13.5px;position:relative}
.chip.on{background:rgba(240,194,100,.13);border-color:rgba(240,194,100,.45);color:var(--gold-hot)}
.chip .x{color:var(--dim);margin-left:8px;font-size:15px;line-height:1}
.chip .x:hover{color:#e09a9a}
.sm{height:34px;padding:0 14px;font-size:13px}
input,select{
  font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--edge-soft);
  border-radius:var(--rs);padding:9px 11px;min-width:0;
}
input::placeholder{color:var(--dim)}
input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
input[type=number]{font-variant-numeric:tabular-nums}
.inline{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:12px}
.inline input{flex:1;min-width:130px}
/* типы круток — аккордеон */
.acc{background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.acc.open{border-color:var(--edge)}
.acchead{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-radius:0;padding:15px 18px;text-align:left}
.acchead:hover{background:rgba(255,255,255,.03)}
.acchead .caret{color:var(--dim);font-size:11px;transition:transform .15s ease;display:inline-block}
.acc.open .acchead .caret{transform:rotate(90deg)}
.acchead .nm{flex:1;font-size:14.5px}
.acchead .cnt{font-size:12px;color:var(--dim)}
.acchead .sum{font-family:var(--display);font-size:19px;font-weight:600;color:var(--gold);letter-spacing:-0.02em}
.acchead .unit{font-size:11.5px;color:var(--dim);margin-left:-6px}
.accbody{padding:2px 18px 16px;border-top:1px solid var(--edge-soft)}
.curline{display:grid;grid-template-columns:1fr 108px 118px 32px 32px;gap:7px;align-items:center;padding:8px 0}
.iconbtn.trk{color:var(--gold);font-size:12px}
.iconbtn.trk:hover{color:var(--gold-hot);border-color:rgba(240,194,100,.45)}
.iconbtn.trk.off{color:var(--dim)}
.iconbtn.trk.off:hover{color:var(--muted);border-color:var(--edge)}
.curline .hd{font-size:11.5px;color:var(--dim);padding:0 2px}
.curline input{text-align:right}
.curline input.nm{text-align:left}
.accfoot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.typename{display:flex;align-items:center;gap:10px;padding:12px 0 4px}
.typename span{font-size:11.5px;color:var(--dim);white-space:nowrap}
.typename input{flex:1;max-width:260px}
.plist{display:flex;flex-direction:column;gap:3px;max-height:230px;overflow:auto}
.plist button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:none;background:none;border-radius:var(--rs);padding:9px 10px;font-size:13.5px}
.plist button:hover{background:rgba(255,255,255,.06)}
.plist button.on{background:rgba(240,194,100,.13);color:var(--gold-hot)}
.plist button span{color:var(--dim);font-size:12px}
.plist button.on span{color:#b8933f}
.mpick.wide{width:320px}
.sheet.wide{max-width:660px}
.impscroll{max-height:44vh;overflow:auto;margin:0 -2px 16px;padding:0 2px}
.impacc{border:1px solid var(--edge-soft);border-radius:var(--rs);padding:13px 15px;margin-bottom:8px}
.impacc.off{opacity:.45}
.imphead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imphead .chip{padding:6px 12px;font-size:13px}
.impnums{font-size:12.5px;color:var(--muted);flex:1 1 100%}
.impnums b{color:var(--text);font-variant-numeric:tabular-nums}
.impnums b.plus{color:var(--gold)}
.impacc table{margin-top:10px;font-size:12.5px}
.impacc th{padding:0 8px 6px;font-size:11.5px}
.impacc td{padding:6px 8px}
.impacc .note2{font-size:11.5px;color:var(--dim);margin:9px 0 0}
.impacc .note2.ok{color:#8fa86a}
.editrow{display:flex;align-items:center;gap:10px;padding:3px 2px 7px}
.editrow span{font-size:11.5px;color:var(--dim);width:66px;flex:0 0 66px}
.editrow input{flex:1;min-width:0;padding:7px 10px;font-size:13.5px}
.mpick .mpick-head span{font-size:12px;color:var(--muted);font-weight:400}
td input.cell-in{width:96px;text-align:right;padding:6px 8px;font-size:13.5px}
tr.sum-row td{font-weight:600;border-top:1px solid var(--edge)}
#calcTable{table-layout:fixed}
#calcTable th:nth-child(1),#calcTable td:nth-child(1){width:46%}
#calcTable th:nth-child(2),#calcTable td:nth-child(2){width:18%}
#calcTable th:nth-child(3),#calcTable td:nth-child(3){width:18%}
#calcTable th:nth-child(4),#calcTable td:nth-child(4){width:18%}
#calcTable td.tcell{cursor:pointer;user-select:none;-webkit-user-select:none}
#calcTable tr.type-row:hover td{background:rgba(255,255,255,.028)}
#calcTable tr.type-row:hover td.tcell{background:rgba(255,255,255,.07)}
.tinner{display:inline-flex;align-items:center;gap:9px;max-width:100%}
.tinner .tnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tinner .caret{
  flex:0 0 12px;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:9px;line-height:1;transition:transform .15s ease;transform-origin:50% 50%;
}
tr.type-row.open .tinner .caret{transform:rotate(90deg)}
#calcTable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.sub td{border-top:none;padding-top:5px;padding-bottom:5px;color:var(--muted);font-size:13px}
tr.sub td:first-child{padding-left:29px}
tr.sub .raw{color:var(--dim);font-size:12px;margin-left:8px}
tr.sub:last-of-type td{padding-bottom:11px}
.iconbtn{width:32px;height:32px;padding:0;border-radius:50%;color:var(--dim);font-size:15px;line-height:1}
.iconbtn:hover{color:#e09a9a;border-color:rgba(200,80,80,.4)}
.pulls .tot .v{font-size:25px}
.pulls .gold .v{color:var(--gold)}
.pulls .st .v{color:var(--steel)}
.pulls .cr .v{color:var(--crimson)}
.totals.pulls{grid-template-columns:1.15fr 2fr;margin-top:22px;align-items:stretch}
.totals.pulls .hero{justify-content:center;gap:2px;padding:20px 22px}
.totals.pulls .subs .tot{display:flex;flex-direction:column;justify-content:center;min-height:104px}
.totals.pulls .delta{margin-top:6px;line-height:1.45}
.nodata{color:var(--muted);font-size:13.5px;padding:14px 2px}

/* ── история круток ── */
.drop{
  border:1px dashed var(--edge);text-align:center;padding:26px 20px;margin-top:22px;
  transition:border-color .15s ease,background .15s ease;
}
.drop.over{border-color:var(--gold);background:rgba(240,194,100,.07)}
.dropin{display:flex;flex-direction:column;align-items:center;gap:9px}
.dropin b{font-size:15px;font-weight:600}
.dropin span{font-size:12.5px;color:var(--muted);max-width:540px;line-height:1.55}
.dropin .row{margin-top:6px}
.dropin .hint{margin:4px 0 0}
a.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.045);border:1px solid var(--edge-soft);border-radius:var(--rs);
  transition:background .15s ease,border-color .15s ease;
}
a.btn:hover{background:rgba(255,255,255,.085);border-color:var(--edge)}
a.btn.ghost{background:transparent}
a.btn.mark{background:linear-gradient(180deg,var(--gold-hot),var(--gold));color:#1a1305;border-color:transparent;border-radius:999px}
a.btn.mark:hover{background:linear-gradient(180deg,#ffe9b4,var(--gold-hot))}
a.btn.sm{padding:0 14px}
details.exporter{align-self:stretch;max-width:600px;margin:10px auto 0;text-align:left;font-size:13px;line-height:1.6;color:var(--muted)}
details.exporter summary{cursor:pointer;text-align:center;color:var(--gold);font-size:13px;list-style:none}
details.exporter summary::-webkit-details-marker{display:none}
details.exporter summary::after{content:" ▾";font-size:11px}
details.exporter[open] summary::after{content:" ▴"}
details.exporter[open]{padding:14px 16px 16px;background:var(--panel-2);border:1px solid var(--edge-soft);border-radius:var(--rs)}
details.exporter p{margin:10px 0}
details.exporter ol{margin:8px 0;padding-left:20px}
details.exporter li{margin:3px 0}
details.exporter b{font-size:inherit;font-weight:600;color:var(--text)}
details.exporter code{font-size:12px;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px;color:var(--text)}
details.exporter a:not(.btn){color:var(--gold)}
details.exporter .row{margin-top:12px}
.watchrow{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;font-size:12.5px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--edge-soft);border-radius:var(--rs);
}
.watchrow b{color:var(--text);font-weight:500}
.watchrow .dot{width:7px;height:7px;border-radius:50%;background:#8fa86a;flex:0 0 7px}
.watchrow .dot.wait{background:var(--gold)}
.watchrow button{padding:6px 12px;font-size:12.5px;border-radius:999px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:8px}
.bcard{
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);padding:16px 18px;
  cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.bcard:hover{border-color:var(--edge);background:var(--panel-2);transform:translateY(-1px)}
.bcard.on{border-color:rgba(240,194,100,.5);background:linear-gradient(160deg,rgba(240,194,100,.08),rgba(240,194,100,.01))}
.bcard .more{font-size:11.5px;color:var(--dim);margin-top:12px}
#fiftyStats{margin-bottom:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
#fiftyStats .tot{padding:13px 15px}
#fiftyStats .v{font-size:21px}
.tag{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;
  border:1px solid transparent;cursor:pointer;user-select:none;-webkit-user-select:none;
}
.tag.win{background:rgba(240,194,100,.14);color:var(--gold-hot);border-color:rgba(240,194,100,.35)}
.tag.lose{background:rgba(224,87,111,.14);color:var(--crimson);border-color:rgba(224,87,111,.35)}
.tag.guard{background:rgba(255,255,255,.05);color:var(--muted)}
.tag:hover{filter:brightness(1.2)}
.tag.fixed::after{content:"·";margin-left:5px;opacity:.7}
.tag.none{border-color:var(--edge);border-style:dashed;color:var(--dim)}
.chartcard{position:relative}
.tip{
  position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--raise);border:1px solid var(--edge);border-radius:var(--rs);
  padding:9px 12px;font-size:12.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);
}
.tip b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.tip .st-win{color:var(--gold-hot)}
.tip .st-lose{color:var(--crimson)}
.tip .st-guard{color:var(--muted)}
.tip .st-none{color:var(--dim)}
tr.flash td{animation:flash 1.4s ease-out}
@keyframes flash{from{background:rgba(240,194,100,.22)}to{background:transparent}}
.bcard.on .more{color:var(--gold)}
.bcard .nm{font-size:14px;font-weight:600}
.bcard .sub2{font-size:11.5px;color:var(--dim);margin-top:2px}
.bcard .big{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-0.035em;color:var(--gold);margin-top:10px}
.bcard .big small{font-size:12px;font-weight:400;color:var(--dim);margin-left:6px;letter-spacing:0}
.bcard .line{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-top:9px}
.bcard .line b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.bcard .bar{margin-top:12px}
.bcard.hot .bar i{background:linear-gradient(90deg,#8a3247,var(--crimson))}
.icodiag{margin-top:12px;font-size:11.5px;color:var(--dim);line-height:1.6;word-break:break-all}
.icodiag b{color:var(--muted);font-weight:500}
.icodiag .ok{color:#8fa86a}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;margin-top:8px}
.pcard{
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);
  padding:14px 10px 12px;text-align:center;
}
.pcard.lose{border-color:rgba(224,87,111,.3)}
.pcard.win{border-color:rgba(240,194,100,.35)}
.pcard img{
  width:62px;height:62px;border-radius:50%;object-fit:cover;display:block;
  margin:0 auto 9px;background:rgba(255,255,255,.05);
}
.pcard .nm2{
  height:2.6em;display:flex;align-items:center;justify-content:center;
  overflow:hidden;overflow-wrap:anywhere;
}
.pcard .nm2 span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.3;
}
.pcard .pl{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-0.03em;margin:7px 0 1px}
.pcard .pl.poly{color:var(--gold)}
.pcard .pl.master{color:var(--crimson)}
.pcard .dt{font-size:10.5px;color:var(--dim)}
.pcard .tag{margin-top:8px}
td.pic,th.pic{width:36px;padding-right:0}
td.pic img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;
  background:rgba(255,255,255,.05);
}
td.rare{color:var(--gold-hot);font-weight:600}
td.mid{color:#b49ad6}

/* ── быстрый выбор месяца ── */
.pickwrap{position:relative}
.month{cursor:pointer}
.month:hover{background:rgba(255,255,255,.08)}
.mpick{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);width:268px;z-index:16;
  background:var(--raise);border:1px solid var(--edge);border-radius:var(--r);
  padding:12px;display:none;box-shadow:0 22px 48px -18px rgba(0,0,0,.9);
}
.mpick.on{display:block;animation:drop .13s ease-out}
.mpick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mpick-head span{font-size:15px;font-weight:600}
.mpick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mpick-grid button{position:relative;padding:10px 4px 14px;font-size:13px;text-align:center}
.mpick-grid button.has::after{
  content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold-deep);
}
.mpick-grid button.cur{background:rgba(240,194,100,.12);border-color:rgba(240,194,100,.45);color:var(--gold-hot)}
.mpick-grid button.cur.has::after{background:var(--gold-hot)}
.mpick-grid button.fut{opacity:.4}

/* ── меню данных ── */
.menuwrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 8px);width:268px;z-index:16;
  background:var(--raise);border:1px solid var(--edge);border-radius:var(--r);
  padding:6px;box-shadow:0 22px 48px -18px rgba(0,0,0,.9);display:none;text-align:left;
}
.menu.on{display:block;animation:drop .13s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;border-radius:var(--rs);padding:10px 11px;font-size:14px}
.menu button:hover{background:rgba(255,255,255,.07)}
.menu .danger{color:#cd8f8f}
.menu .danger:hover{background:rgba(180,60,60,.14);color:#efa9a9}
.sep{height:1px;background:var(--edge-soft);margin:6px 8px}
.menunote{font-size:11.5px;color:var(--dim);line-height:1.5;margin:10px 11px 5px}
.menunote:empty{display:none}
.destroy{background:#8b3030;border-color:transparent;color:#ffe6e6;font-weight:500}
.destroy:hover{background:#a03737;border-color:transparent;color:#fff}

/* ── модальные окна ── */
.overlay{
  position:fixed;inset:0;background:rgba(5,5,8,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:20;
}
.overlay.on{display:flex}
.sheet{
  width:100%;max-width:420px;background:var(--raise);border:1px solid var(--edge);
  border-radius:16px;padding:22px;box-shadow:0 30px 70px -26px rgba(0,0,0,.95);
  animation:pop .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet,.menu.on{animation:none}.bar i{transition:none}}
.sheet h3{font-family:var(--display);margin:0;font-size:18px;font-weight:600;letter-spacing:-0.02em}
.sheet .sub{font-size:12.5px;color:var(--muted);margin:4px 0 18px;line-height:1.5}
.sheet .sub.guar{color:var(--gold)}
.group{font-size:11.5px;color:var(--dim);margin:0 0 9px;letter-spacing:.02em}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:18px}
.opt{padding:13px 10px;text-align:center;line-height:1.2;border-radius:var(--rs)}
.opt b{display:block;font-family:var(--display);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.025em}
.opt small{font-size:10.5px;color:var(--dim);display:block;margin-top:3px}
.opt kbd{font:inherit;font-size:10px;color:#4b4955;display:block;margin-top:4px}
.opt.p{background:linear-gradient(150deg,rgba(240,194,100,.1),rgba(240,194,100,.02));border-color:rgba(240,194,100,.22)}
.opt.p b{color:var(--gold)}
.opt.p:hover{background:linear-gradient(150deg,rgba(240,194,100,.22),rgba(240,194,100,.05));border-color:rgba(240,194,100,.55)}
.opt.p.big b{color:var(--gold-hot)}
.opt.sel{outline:2px solid var(--gold);outline-offset:-1px}
.opt.one{grid-template-columns:1fr}
.opt.m{background:linear-gradient(150deg,rgba(224,87,111,.1),rgba(224,87,111,.02));border-color:rgba(224,87,111,.25)}
.opt.m b{color:var(--crimson)}
.opt.m:hover{background:linear-gradient(150deg,rgba(224,87,111,.2),rgba(224,87,111,.04));border-color:rgba(224,87,111,.6)}
.opt.d b{color:var(--steel)}
.opt.d:hover{border-color:rgba(135,148,161,.45)}
.collapsed{display:none}
.linkbtn{background:none;border:none;padding:0;color:var(--muted);font-size:12.5px;text-decoration:underline;text-underline-offset:4px}
.linkbtn:hover{background:none;color:var(--text)}
.sheet .row{display:flex;gap:8px;margin-top:6px}
.sheet .row button{flex:1;padding:11px 12px}
textarea{
  width:100%;height:190px;resize:vertical;margin-bottom:12px;
  background:var(--bg);color:var(--text);border:1px solid var(--edge-soft);border-radius:var(--rs);
  padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;
}
textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

@media(max-width:1040px){
  .shell{display:block;max-width:none}
  .burger{display:block}
  .side{
    position:fixed;left:0;top:0;bottom:0;width:252px;flex:none;z-index:30;
    padding:22px 12px;gap:24px;overflow:auto;
    background:var(--raise);border-right:1px solid var(--edge);
    box-shadow:24px 0 60px -30px rgba(0,0,0,.95);
    transform:translateX(-101%);transition:transform .22s cubic-bezier(.2,.9,.3,1);
  }
  body.menu-open .side{transform:none}
  .sidelabel{padding:0 14px 8px}
  .brand{padding:0 14px 10px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
@media(max-width:760px){
  body{padding:0 14px 70px}
  .totals.pulls{grid-template-columns:1fr}
  .bgrid{grid-template-columns:1fr}
  .drop{padding:20px 14px}
  .curline{grid-template-columns:1fr 74px 84px 30px 30px;gap:5px}
  td.pic,th.pic{display:none}
  .mpick.wide{width:calc(100vw - 40px);max-width:320px}
  td input.cell-in{width:74px}
  .totals{grid-template-columns:1fr}
  .subs{grid-template-columns:repeat(3,1fr)}
  .subs .tot{padding:13px 14px}
  .subs .v{font-size:19px}
  .hero .v{font-size:38px}
  .nav{width:100%}
  .navgroup{flex:1}
  .nav .pickwrap{flex:1}
  .month{width:100%;min-width:0}
  .mpick{width:calc(100vw - 40px);max-width:280px}
  .cell{min-height:54px;padding:6px 7px;aspect-ratio:1/.96;border-radius:10px}
  .cell .val{font-size:14px}
  .cell.p4 .val{font-size:15px}
  .cell .sub{display:none}
  .today{padding:16px}
  .today .status{margin-left:0;width:100%}
  .today .status .mark{width:100%}
  .grid,.grid-head{gap:5px}
  .card{padding:14px 12px 8px}
  /* выбор награды — шторкой снизу */
  .overlay{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:18px 18px 0 0;padding:20px 16px 26px;animation:slideup .2s cubic-bezier(.2,.9,.3,1)}
  @keyframes slideup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .menu{position:fixed;left:14px;right:14px;top:auto;width:auto}
}
/* ── достижения ── */
.achtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.achtop .grow,.fbar .grow{flex:1}
.achstate{margin-top:22px;padding:22px}
.achstate b{display:block;font-size:15px;margin-bottom:6px}
.achstate p{margin:0 0 6px;color:var(--muted);font-size:13.5px}
.achstate code{font-size:12px;color:var(--dim);word-break:break-all}
.achstate .row{justify-content:flex-start;flex-wrap:wrap;margin-top:14px}
.tot .v small{font-size:.52em;color:var(--dim);font-weight:500;margin-left:5px;letter-spacing:0}
#achSrcLine{margin:10px 2px 0}
#achSrcLine .warn{color:#d9a45a}
.achfilters{margin-top:16px;padding:16px 18px;scroll-margin-top:92px}
/* медали: золото +20, серебро +10, бронза +5 */
.medal{display:inline-block;width:15px;height:15px;border-radius:50%;flex:0 0 auto;vertical-align:-2px;position:relative;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.5)}
.medal::after{content:"";position:absolute;inset:3.5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);background:rgba(255,255,255,.12)}
.medal.g{background:radial-gradient(circle at 35% 30%,#fff1bf,#f0c264 45%,#a87a25)}
.medal.s{background:radial-gradient(circle at 35% 30%,#ffffff,#c9d0d8 45%,#7c8794)}
.medal.b{background:radial-gradient(circle at 35% 30%,#ffd7b8,#cf8a58 45%,#7e4626)}
.medal.n{background:var(--raise)}
.medals{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.medals span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.medals b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.medals small{color:var(--dim);font-size:12px}
.arow .ar{display:flex;align-items:center;gap:7px;align-self:start}
.arow .ar .medal{width:17px;height:17px}
.arow:not(.done) .ar .medal{opacity:.7}
.totop{position:fixed;right:22px;bottom:24px;z-index:20;width:46px;height:46px;padding:0;border-radius:50%;
  font-size:19px;line-height:1;color:var(--gold-hot);background:var(--raise);border:1px solid rgba(240,194,100,.35);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.85);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:#26262f;border-color:var(--gold)}
body:not(.tab-achievements) .totop{display:none}
@media(max-width:760px){.totop{right:14px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
.qwrap{margin-top:14px}
.achsearch::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.7);cursor:pointer}
.achsearch{width:100%;padding:11px 14px;font-size:14.5px;border-color:var(--edge)}
.qnote{margin:8px 2px 0;font-size:12.5px;color:var(--muted)}
.qnote b{color:var(--gold-hot);font-weight:500}
.arow mark{background:rgba(240,194,100,.22);color:var(--gold-hot);border-radius:3px;padding:0 1px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fgrid label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--dim);min-width:0}
.fgrid select{width:100%;padding:8px 10px;font-size:13.5px}
.fgrid select.set{border-color:rgba(240,194,100,.45);color:var(--gold-hot)}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.fchips:empty{display:none}
.fchips .chip{padding:6px 12px;font-size:12.5px}
.fchips .chip i{font-style:normal;color:var(--dim);margin-left:6px;font-size:11.5px}
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--edge-soft)}
.fbar .lbl{font-size:11.5px;color:var(--dim)}
.fbar select{padding:6px 10px;font-size:13px}
.fbar .chip{padding:6px 12px;font-size:12.5px}
#aDir{width:34px;padding:0;font-size:15px}
.achsum{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:22px 2px 10px;font-size:13px;color:var(--muted)}
.achsum b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.achsum b.g{color:var(--gold)}
.achsum .acts{display:flex;gap:14px;flex:1 1 100%}
.alist{display:flex;flex-direction:column;gap:6px}
.achempty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.agroup{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:9px 6px;border:none;background:none;border-radius:var(--rs);text-align:left}
.alist > .agroup:first-child{margin-top:0}
.agroup:hover{background:rgba(255,255,255,.04)}
.agroup .caret{color:var(--dim);font-size:11px;transition:transform .15s ease;display:inline-block;width:10px}
.agroup.open .caret{transform:rotate(90deg)}
.agroup .nm{flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-0.01em}
.agroup .ct{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.agroup .ct.g{color:var(--gold)}
.agroup .mini{width:70px;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden;flex:0 0 auto}
.agroup .mini i{display:block;height:100%;background:var(--gold)}
.arow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:2px 12px;padding:13px 16px 12px 12px;background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r)}
.arow.done{background:linear-gradient(90deg,rgba(240,194,100,.075),var(--panel) 55%);border-color:rgba(240,194,100,.2)}
.arow.blocked .amain,.arow.blocked .ar{opacity:.45}
.achk{width:24px;height:24px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:none;color:#1a1405;font-size:13px;font-weight:700;line-height:1;margin-top:1px}
.achk:hover{border-color:var(--gold);background:rgba(240,194,100,.1)}
.arow.done .achk{background:var(--gold);border-color:var(--gold)}
.arow.blocked .achk{border-style:dashed}
.amain{min-width:0}
.arow .an{font-weight:500;font-size:14.5px;line-height:1.4}
.arow .ad{font-size:13px;color:var(--muted);white-space:pre-line;margin-top:3px;line-height:1.45}
.arow .ad.spoil{filter:blur(5px);cursor:pointer;user-select:none;transition:filter .15s ease}
.arow .ad.spoil:hover{filter:blur(3.5px)}
.arow .ar{font-family:var(--display);font-weight:600;color:var(--gold);font-size:15px;white-space:nowrap;text-align:right}
.arow .ar small{display:block;font-family:"Inter",system-ui,sans-serif;font-size:10.5px;color:var(--dim);font-weight:400}
.ameta{grid-column:2 / 4;display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;align-items:center}
.am{font-size:11.5px;line-height:1.5;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--edge-soft);white-space:nowrap}
button.am{height:auto;font:inherit;font-size:11.5px}
button.am:hover{color:var(--text);border-color:var(--edge)}
.am.hid{color:#b8a6dc;border-color:rgba(184,166,220,.25)}
.am.set{color:var(--gold-hot);border-color:rgba(240,194,100,.3)}
.am.warn{color:var(--crimson);border-color:rgba(224,87,111,.3)}
.am.d-hard{color:#e39a7a}
.am.d-medium{color:#d6c27c}
.am.d-easy{color:#8fa86a}
.am.hintbtn{border-style:dashed}
.am.hintbtn.on{color:var(--text);border-style:solid}
.ahint{grid-column:2 / 4;font-size:12.5px;color:var(--muted);background:var(--bg);border:1px solid var(--edge-soft);border-radius:var(--rs);padding:9px 11px;margin-top:8px;line-height:1.5}
.amore{display:block;margin:14px auto 0}
@media(max-width:760px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achfilters{padding:14px 12px}
  .arow{padding:12px 12px 11px 10px;gap:2px 10px}
  .agroup .mini{display:none}
}
/* ── шансы ── */
.oddscard{padding:18px 18px 14px}
.oddsin{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}
.oddsin label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--dim);min-width:0}
.oddsin input,.oddsin select{width:100%;font-size:14px;padding:8px 10px}
.oddsrow{display:flex;align-items:center;gap:8px;min-width:0}
.oddsrow input{flex:0 0 96px;width:96px}
.oddsrow .chip{padding:7px 12px;font-size:12.5px;white-space:nowrap}
.oddsrow .linkbtn{white-space:nowrap;font-size:12px}
.oddsfrom{margin:10px 2px 0}
.oddsk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.oddsk .lbl{font-size:11.5px;color:var(--dim)}
.oddsk .seg{flex-wrap:wrap;border-radius:14px}
.oddsmain{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 2px 6px}
.oddsmain .v{font-family:var(--display);font-size:40px;font-weight:600;color:var(--gold);letter-spacing:-0.04em;line-height:1}
.oddsmain .t{font-size:13.5px;color:var(--muted)}
.oddstable{margin-top:8px}
.oddstable tbody tr{cursor:default}
.oddstable tbody tr:hover td{background:none}
.oddstable tr.cur td{color:var(--gold-hot)}
.oddstable td.pbar{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.oddstable td.pbar .bar{width:120px;margin:0;height:4px}
.oddstable td.pbar b{min-width:52px;font-weight:600}
@media(max-width:760px){
  .oddsin{grid-template-columns:1fr 1fr}
  .oddsin label:last-child{grid-column:1 / 3}
  .oddstable td.pbar .bar{width:54px}
  .oddstable th,.oddstable td{padding-left:6px;padding-right:6px}
  .oddsmain .v{font-size:32px}
  #oddsSection .sechead{flex-wrap:wrap}
  #oddsSection .sechead .seg{margin-bottom:12px}
}
/* ── удача ── */
.luck{background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);padding:16px 18px;margin-bottom:8px}
.luckmain{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.luckmain .v{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-0.04em;line-height:1}
.luckmain.good .v{color:var(--gold)}
.luckmain.bad .v{color:var(--crimson)}
.luckmain .t{flex:1 1 260px;font-size:13.5px;color:var(--muted);line-height:1.5}
.luckmain .t b{color:var(--text);font-weight:500}
.lucksub{margin-top:10px;font-size:13.5px;color:var(--muted)}
.lucknote{margin-top:10px;font-size:11.5px;color:var(--dim)}

/* ── синхронизация ── */
.synctxt.bad{color:#e08a9a}
#syncTokenRow .editrow input{flex:1}
#syncTokenRow a{color:var(--gold)}
/* узкие экраны: заголовки секций переносятся, широкие таблицы прокручиваются внутри карточки */
@media(max-width:760px){
  .sechead{flex-wrap:wrap}
  .sechead .segs{margin-bottom:10px}
  .card:has(> table),#rareTableCard{overflow-x:auto}
}
.syncbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.syncbtns .sm{flex:0 0 auto;white-space:nowrap;padding:0 16px}
.syncbtns .linkbtn{margin-left:4px;white-space:nowrap}
.synccheck{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13px;color:var(--muted);cursor:pointer}
.synccheck input{width:16px;height:16px;margin:0;accent-color:var(--gold);flex:0 0 auto}
.syncbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:19;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:calc(100vw - 28px);padding:10px 10px 10px 16px;border-radius:14px;background:var(--raise);border:1px solid rgba(240,194,100,.35);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9);font-size:13.5px}
.syncbar span{flex:1;min-width:0}
.syncbar .sm{flex:0 0 auto;white-space:nowrap}
#syncBarClose{width:34px;padding:0}

/* ── телефон: шапка, календарь, таблицы ── */
.cell .vs{display:none}
@media(max-width:760px){
  .month{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav{flex-wrap:wrap}
  body.tab-history .nav,body.tab-achievements .nav{width:auto;margin-left:auto}
  .hleft{flex:1 1 auto}
  body.game-custom #navGame{flex:1 1 100%}
  body.game-custom #navGame .pickwrap,body.game-custom #gameLabel{width:100%;max-width:none}
  .cell.d .vf{display:none}
  .cell.d .vs{display:inline}
  .cell .val{font-size:14px}
  .cell.p4 .val{font-size:15px}
  .cell.d .val{font-size:13px}
  th,td{padding-left:8px;padding-right:8px}
  td{padding-top:10px;padding-bottom:10px}
  th{font-size:11px}
}
@media(max-width:380px){
  .cell .val{font-size:13px}
  .cell.d .val{font-size:12px}
  .cell .dn{font-size:11px}
}
@media(max-width:760px){
  .navgroup,.nav .pickwrap{min-width:0}
  #toToday{flex:0 0 auto;padding:0 14px}
  #menuBtn{flex:0 0 auto}
  #fiftyStats .v{font-size:17px}
}
#monthLabel .ms{display:none}
@media(max-width:420px){
  #monthLabel .ml{display:none}
  #monthLabel .ms{display:inline}
  #toToday{padding:0 12px;font-size:13.5px}
  .nav{gap:6px}
}
@media(max-width:340px){
  h1{font-size:19px}
}
@media(max-width:360px){
  body{padding:0 10px 70px}
  .grid,.grid-head{gap:3px}
  .cell{padding:5px 4px;min-width:0;min-height:44px}
  .subs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .subs .tot{padding:11px 10px;min-width:0}
  .subs .v{font-size:17px}
  .tot .k{font-size:11.5px}
}
@media(max-width:760px){
  .card svg text{font-size:11px}
}

/* ── шансы: пояснение словами и двухстрочная шапка таблицы ── */
.oddsexplain{margin:0 2px 4px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.oddsexplain b{color:var(--text);font-weight:600}
.oddstable thead th{vertical-align:bottom}
.oddstable th.grp{text-align:center;border-bottom:1px solid var(--edge-soft);padding-bottom:6px}
.oddstable thead tr:nth-child(2) th{padding-top:6px}
.oddstable thead tr:nth-child(2) th{text-align:right}
#oddsSection .sechead > .seg{flex:0 0 auto;min-width:auto}

/* ── шансы: строки гаранта, цели, сценарий удачи ── */
.oddsin{grid-template-columns:1fr 1fr 1fr}
.pityrows{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pityrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pityrow .pk{font-size:12px;color:var(--dim);min-width:300px}
.pityrow input{flex:0 0 96px;width:96px;font-size:14px;padding:8px 10px}
#oddsTargets{display:flex;flex-direction:column;gap:2px}
#oddsTargets .oddsk{margin-top:12px}
#oddsTargets .oddsk .lbl{min-width:96px}
.luckscen{margin:10px 2px 0;padding:10px 12px;border-radius:var(--rs);background:rgba(240,194,100,.06);border:1px solid rgba(240,194,100,.18);font-size:12.5px;line-height:1.55;color:var(--muted)}
.luckscen b{color:var(--gold-hot);font-weight:500}
@media(max-width:760px){
  .oddsin{grid-template-columns:1fr 1fr}
  .oddsin label:last-child{grid-column:auto}
  .oddsin label:first-child{grid-column:1 / 3}
  .pityrow .pk{min-width:0;flex:1 1 100%}
  #oddsTargets .oddsk .lbl{min-width:0;flex:1 1 100%}
}
@media(max-width:760px){
  #oddsKind{flex-wrap:wrap;border-radius:14px}
}

/* ── потрачено за патч ── */
.spent{margin-top:12px;padding:14px 16px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge-soft)}
.sp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sp-head b{font-family:var(--display);font-weight:600;font-size:15px}
.sp-head span{font-size:12px;color:var(--dim)}
.sp-empty{font-size:13px;color:var(--muted);line-height:1.55}
.sp-head + .sp-empty{margin-top:-2px}
.sp-bar{display:flex;gap:2px;height:6px;border-radius:999px;overflow:hidden;margin-bottom:12px;background:rgba(255,255,255,.05)}
.sp-bar i{display:block;min-width:3px}
.spent .char i,.sp-bar i.char{background:var(--gold)}
.spent .weap i,.sp-bar i.weap{background:var(--steel)}
.spent .std i,.sp-bar i.std{background:#8fa86a}
.spent .other i,.sp-bar i.other{background:#8b7fb8}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.sp{padding:9px 11px;border-radius:var(--rs);background:rgba(255,255,255,.03);border:1px solid var(--edge-soft);min-width:0}
.sp .k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp .k i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.sp .v{font-family:var(--display);font-size:20px;font-weight:600;margin-top:2px}
.sp .s{font-size:11.5px;color:var(--dim)}
.sp.tot{background:transparent;border-style:dashed}
.sp-note{margin:10px 2px 0;font-size:11.5px;color:var(--dim);line-height:1.5}

/* ── карточка удачи ── */
.sharebtn{align-self:flex-start;margin-top:12px}
.sharesheet{max-width:540px;max-height:calc(100vh - 32px);overflow:auto}
.sharepre{position:relative;border-radius:var(--rs);overflow:hidden;border:1px solid var(--edge-soft);margin:0 auto 12px;width:100%;max-width:min(100%,calc(62vh * .8))}
/* превью в масштабе картинки 1080×1350: те же размеры, что на холсте */
.scard{position:absolute;left:0;top:0;width:1080px;height:1350px;transform-origin:0 0;box-sizing:border-box;padding:64px;color:#ece9f1;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(760px 760px at 100% 0,rgba(240,194,100,.22),rgba(240,194,100,0)),radial-gradient(700px 700px at 0 100%,rgba(135,148,161,.12),rgba(135,148,161,0)),#0b0b10}
.scard .sc-brand{color:#f0c264;font-weight:600;font-size:24px;letter-spacing:4px;line-height:30px}
.scard .sc-game{font-family:var(--display);font-weight:600;font-size:64px;line-height:76px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .sc-sub{color:#9a97a6;font-size:26px;margin-top:12px;white-space:nowrap}
.scard .sc-box{background:#14141b;border:2px solid rgba(255,255,255,.08);border-radius:22px;box-sizing:border-box;min-width:0}
.scard .sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.scard .sc-stats .sc-box{height:150px;padding:26px}
.scard .sc-stats .hot{background:#1f1b14;border-color:rgba(240,194,100,.28)}
.scard .k{color:#9a97a6;font-size:23px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .v{font-family:var(--display);font-weight:600;font-size:60px;line-height:1;margin-top:20px}
.scard .hot .v{color:#ffdf95}
.scard .sc-luck{display:flex;gap:16px;margin-top:28px}
.scard .sc-luck .sc-box{flex:1;height:300px;padding:22px 26px}
.scard .sc-lh{display:flex;justify-content:space-between;gap:12px;color:#9a97a6;font-size:23px;font-weight:500}
.scard .sc-lh span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .sc-lh em{font-style:normal;color:#5e5c68;font-size:20px;font-weight:400;flex:0 0 auto}
.scard .sc-avg{display:flex;align-items:center;gap:16px;margin-top:8px}
.scard .sc-avg b{font-family:var(--display);font-weight:600;font-size:66px;line-height:80px}
.scard .sc-avg span{color:#9a97a6;font-size:21px;line-height:26px}
.scard .good .sc-avg b,.scard .good .sc-word{color:#f0c264}
.scard .bad .sc-avg b,.scard .bad .sc-word{color:#e0576f}
.scard .sc-gauge{position:relative;height:10px;border-radius:5px;margin-top:22px;background:linear-gradient(90deg,rgba(224,87,111,.75),rgba(135,148,161,.5),rgba(240,194,100,.85))}
.scard .sc-gauge i{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-sizing:border-box;border:5px solid #f0c264}
.scard .bad .sc-gauge i{border-color:#e0576f}
.scard .sc-word{font-weight:600;font-size:25px;margin-top:30px;white-space:nowrap;letter-spacing:-.2px}
.scard .sc-fifty{color:#9a97a6;font-size:21px;margin-top:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .sc-none{padding:40px 26px;color:#9a97a6;font-size:24px;margin-top:28px}
.scard .sc-rh{font-family:var(--display);font-weight:600;font-size:30px;margin-top:40px}
.scard .sc-rec{display:grid;grid-template-columns:repeat(5,1fr);row-gap:24px;margin-top:16px}
.scard .sc-it{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.scard .sc-pic{position:relative;width:108px;height:108px;border-radius:50%;background:#1c1c24;box-sizing:border-box;border:4px solid #f0c264;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scard .lose .sc-pic{border-color:#e0576f}
.scard .std .sc-pic{border-color:#8794a1}
.scard .sc-pic span{font-family:var(--display);font-weight:600;font-size:44px;color:#f0c264}
.scard .sc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard .sc-n{margin-top:-18px;position:relative;font-family:var(--display);font-weight:600;font-size:22px;line-height:32px;padding:0 11px;border-radius:16px;background:#2a2a35;color:#fff}
.scard .sc-n.good{background:#f0c264;color:#1a1305}
.scard .sc-n.bad{background:#e0576f}
.scard .sc-nm{font-size:21px;font-weight:500;margin-top:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 7px;box-sizing:border-box}
.scard .sc-tg{font-size:18px;color:#5e5c68;margin-top:4px}
.scard .lose .sc-tg{color:#e0576f}
.scard .sc-foot{position:absolute;left:64px;right:64px;bottom:44px;display:flex;justify-content:space-between;color:#5e5c68;font-size:21px}
.sharebtns{flex-wrap:wrap}
.sharelbl{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.sharechans .chip{padding:6px 12px;font-size:12.5px}
.sharebtns button{flex:1 1 auto}
.sharebtns button{white-space:nowrap;padding:10px 14px}
@media (max-width:640px){
  .sp.tot{grid-column:1/-1}
  .sheet .row.sharebtns{display:grid;grid-template-columns:1fr 1fr}
  .sharebtns #shareSave{order:-1;grid-column:1/-1}
}

/* ── стандартный пул ── */
.stdsheet{max-width:620px;max-height:calc(100vh - 32px);overflow:auto}
.stdgame{margin:-8px 0 14px;color:var(--gold);opacity:.85}
.stdgame:empty{display:none}
.stdlist{display:flex;flex-direction:column;gap:2px}
.stdgrp{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:var(--rs);
  font-size:12px;color:var(--muted);margin:10px 0 2px;padding:7px 8px;text-transform:uppercase;letter-spacing:.06em}
.stdgrp:hover{background:rgba(255,255,255,.04)}
.stdgrp:first-child{margin-top:0}
.stdgrp span{flex:1 1 auto;min-width:0}
.stdgrp em{font-style:normal;color:var(--dim);letter-spacing:0}
.stdgrp::after{content:"▾";color:var(--dim);font-size:11px;transition:transform .15s ease}
.stdgrp.shut::after{transform:rotate(-90deg)}
.stdrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--rs);background:rgba(255,255,255,.025)}
.stdrow .nm{flex:1 1 auto;min-width:0;font-size:13.5px}
.stdrow .nm small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stdrow .nm small.user{color:var(--gold)}
.stdrow input[type=date],.stdrow .since{width:150px;flex:0 0 auto;padding:5px 8px;font-size:12.5px}
.stdrow .since{height:32px;color:var(--muted)}
.stdrow .x{flex:0 0 auto;width:30px;height:30px;padding:0;border-radius:50%;color:var(--dim);background:none;border:none;font-size:16px}
.stdrow .x:hover{color:var(--crimson);background:rgba(224,87,111,.08)}
.stdrow.off{opacity:.55}
.stdrow.off .nm{text-decoration:line-through}
.stdadd{display:flex;gap:8px;flex-wrap:wrap}
.stdadd #stdAddName{flex:1 1 200px;min-width:0}
.stdadd #stdAddDate{flex:0 0 150px}
.stdadd #stdAddKind{flex:1 1 180px;min-width:0}
@media (max-width:640px){
  .stdrow input[type=date],.stdrow .since{width:128px}
  .stdadd #stdAddDate{flex:1 1 120px}
}

/* ── коллекция ── */
.coltot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 0}
.coltot .v small{font-size:14px;color:var(--dim);font-weight:500;letter-spacing:0}
.coltot .gold .v{color:var(--gold-hot)}
.coltools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:20px 0 10px}
.coltools select{margin-left:auto;padding:7px 10px;font-size:13px}
.colsearch{margin-bottom:6px}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:8px}
.colcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;min-width:0;text-align:center;
  background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r)}
.colcard.top{border-color:rgba(240,194,100,.22);background:linear-gradient(180deg,rgba(240,194,100,.07),var(--panel) 60%)}
.colcard.none{opacity:.42}
.colcard.none:hover{opacity:.8}
.colpic{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--raise);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.colpic span{font-family:var(--display);font-weight:600;font-size:28px;color:var(--gold)}
.colpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.colcard.none .colpic img{filter:grayscale(1)}
.colcard .lvl{position:absolute;top:8px;right:8px;font-style:normal;font-family:var(--display);font-weight:600;font-size:12px;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--text)}
.colcard.top .lvl{background:rgba(240,194,100,.18);color:var(--gold-hot)}
.colcard.max .lvl{background:var(--gold);color:#1a1305}
.colcard .nm{font-size:13px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.colcard .sb{font-size:11px;color:var(--dim)}
.colsheet{max-width:460px;max-height:calc(100vh - 32px);overflow:auto}
.colhead{display:flex;align-items:center;gap:14px}
.colpic.big{width:76px;height:76px}
.collevel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 18px;padding:12px 14px;border-radius:var(--rs);background:var(--panel-2);border:1px solid var(--edge-soft)}
.collevel b{font-family:var(--display);font-size:24px;color:var(--gold-hot);font-weight:600}
.collevel span{font-size:13px;color:var(--muted)}
.colextra{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.colextra button{width:38px;height:38px;padding:0;border-radius:50%;font-size:18px;line-height:1}
.colextra b{min-width:28px;text-align:center;font-size:20px}
.colextra label{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;color:var(--muted)}
.colextra input{padding:6px 8px;font-size:12.5px}
.colevents{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.colev{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--rs);background:rgba(255,255,255,.025);font-size:13px}
.colev .d{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.colev .b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colev i{font-style:normal;font-family:var(--display);font-weight:600;color:var(--gold)}
@media (max-width:640px){
  .coltot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coltools select{margin-left:0;flex:1 1 100%}
  .colgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .colpic{width:60px;height:60px}
  .colextra label{margin-left:0}
}

/* ── витрина ── */
.sc-top{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0}
.sc-top #scUid{flex:0 1 200px;min-width:0;font-variant-numeric:tabular-nums}
.sc-help{margin:10px 0 0;padding:14px 16px;border-radius:var(--rs);background:var(--panel-2);border:1px solid rgba(240,194,100,.25);font-size:13px;color:var(--muted);line-height:1.6}
.sc-help b{color:var(--text);font-weight:600}
.sc-help ol{margin:8px 0 0;padding-left:20px}
.sc-help a{color:var(--gold)}
.sc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 12px}
.sc-tab{position:relative;width:54px;height:54px;padding:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--raise);border:2px solid var(--edge-soft)}
.sc-tab span{font-family:var(--display);font-weight:600;font-size:20px;color:var(--gold)}
.sc-tab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-tab.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,194,100,.18)}
.sc-tab.old{opacity:.55}
.sc-tab.old.on{opacity:1}
.sc-empty{padding:28px 20px;border:1px dashed var(--edge);border-radius:var(--r);text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}
/* герой: арт агента справа во всю высоту, слева — данные; цвет — по стихии */
.sc-hero{--accent:#f0c264;position:relative;min-height:400px;padding:26px 28px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(520px 420px at 78% 60%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),
    linear-gradient(105deg,var(--panel-2) 0%,var(--panel) 55%,color-mix(in srgb,var(--accent) 8%,var(--panel)) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--edge-soft))}
/* косая полоса цвета стихии за персонажем */
.sc-hero::before{content:"";position:absolute;z-index:-1;top:-20%;bottom:-20%;right:12%;width:150px;transform:skewX(-14deg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 4%,transparent))}
.sc-hero::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.6;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.016) 22px 23px)}
.sc-art{position:absolute;z-index:0;top:0;right:0;bottom:0;width:50%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)}
/* арт целиком вписывается в правую часть: высокие персонажи — по высоте, широкие (крылья, оружие) — по ширине */
.sc-art img{position:absolute;top:14px;right:3%;bottom:0;width:97%;height:calc(100% - 14px);object-fit:contain;object-position:60% bottom;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.sc-art-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:160px;
  color:color-mix(in srgb,var(--accent) 30%,transparent)}
.sc-art-letter[hidden]{display:none}
.sc-head{position:relative;z-index:1;max-width:min(520px,52%);display:flex;flex-direction:column}
.sc-chips{display:flex;gap:6px;flex-wrap:wrap}
.sc-chips span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);color:var(--muted)}
.sc-chips .sc-el{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.sc-chips .sc-el i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.sc-head h2{font-family:var(--display);font-size:44px;line-height:1;margin:14px 0 14px;letter-spacing:-.035em;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.sc-lvl{display:flex;align-items:center;gap:10px;max-width:340px}
.sc-lvl .num{font-size:14px;font-weight:600}
.sc-lvl small{color:var(--dim);font-size:11px}
.sc-lvlbar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.sc-lvlbar i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--accent))}
/* кинограмма — шесть «кадров плёнки» */
.sc-mind{display:flex;align-items:center;gap:5px;margin-top:14px}
.sc-mind i{width:26px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10.5px;font-family:var(--display);
  color:var(--dim);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)}
.sc-mind i.on{color:#111;background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.sc-mind b{margin-left:6px;font-family:var(--display);font-size:15px}
.sc-pips{display:inline-flex;gap:4px}
.sc-pips i{width:12px;height:12px;transform:rotate(45deg) scale(.75);border:1.5px solid rgba(255,255,255,.22);border-radius:2px}
.sc-pips i.on{background:var(--gold);border-color:var(--gold)}
.sc-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.sc-keys div{padding:10px 12px;border-radius:var(--rs);background:rgba(8,8,12,.55);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sc-keys div:first-child{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.sc-keys span{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-keys b{font-size:22px;font-weight:600;color:var(--text)}
.sc-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sc-skills span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);padding:3px 3px 3px 9px;border-radius:999px;background:rgba(8,8,12,.55)}
.sc-skills i{font-style:normal}
.sc-skills b{min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:var(--text);font-family:var(--display);font-size:12px}
.sc-when{font-size:11.5px;color:var(--dim);margin:14px 0 0}
.sc-tab{border-color:color-mix(in srgb,var(--accent,#f0c264) 35%,var(--edge-soft))}
.sc-tab.on{border-color:var(--accent,#f0c264);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#f0c264) 22%,transparent)}
/* панели */
.sc-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;margin-top:8px}
.sc-panel{padding:14px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--edge-soft)}
.sc-ptitle{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;font-weight:600}
.sc-stats{display:grid;grid-template-columns:1fr}
.sc-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.04)}
.sc-stat:last-child{border-bottom:none}
.sc-stat span{color:var(--muted)}
.sc-stat b{font-weight:600;text-align:right}
.sc-stat b small{display:block;font-size:11px;color:var(--dim);font-weight:400}
.sc-stat b small em{font-style:normal;color:#8fa86a}
.sc-stat.hl span{color:var(--gold)}
.sc-stat.hl b{color:var(--gold-hot)}
.sc-side{display:flex;flex-direction:column;gap:8px}
.sc-weapon.r4{border-color:rgba(240,194,100,.25);background:linear-gradient(135deg,rgba(240,194,100,.06),var(--panel) 55%)}
.sc-weapon.none{color:var(--dim);font-size:13px}
.sc-wbody{display:flex;gap:14px;align-items:center}
.sc-wimg{position:relative;flex:0 0 96px;height:96px;border-radius:var(--rs);overflow:hidden;background:radial-gradient(circle at 50% 60%,rgba(240,194,100,.18),transparent 70%),#0c0c11}
.sc-wimg span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:38px;color:rgba(240,194,100,.35)}
.sc-wimg img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
.sc-wimg.tall{height:128px}
.sc-winfo{min-width:0;flex:1}
.sc-wname{font-weight:600;font-size:15px}
.sc-wmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);margin:4px 0 8px}
.sc-wmeta b{color:var(--gold);font-family:var(--display)}
.sc-wstat{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);padding:2px 0}
.sc-wstat b{color:var(--text);font-weight:600}
.sc-sets{display:flex;flex-direction:column;gap:6px}
.sc-set{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--rs);background:rgba(255,255,255,.03);font-size:13px}
.sc-set img,.sc-set > i{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.sc-set span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-set b{font-family:var(--display);font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08)}
.sc-set.full b{background:var(--gold);color:#1a1305}
.sc-none{margin:0;font-size:13px;color:var(--dim)}
.sc-cv{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px;color:var(--muted)}
.sc-cv b{font-size:18px;color:var(--gold-hot)}
/* диски */
.sc-dtitle{margin:18px 2px 8px}
.sc-discs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sc-disc{position:relative;overflow:hidden;padding:12px 14px;border-radius:var(--r);background:var(--panel);border:1px solid var(--edge-soft);min-width:0}
.sc-disc.r4{border-color:rgba(240,194,100,.18)}
.sc-disc.none{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13px;min-height:120px}
.sc-disc.none p{margin:0}
.sc-dmark{position:absolute;right:-18px;top:-18px;width:96px;height:96px;object-fit:contain;opacity:.13;pointer-events:none}
.sc-dhead{position:relative;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:8px}
.sc-slot{font-style:normal;width:22px;height:22px;border-radius:6px;background:rgba(240,194,100,.14);color:var(--gold-hot);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;font-weight:600;flex:0 0 auto}
.sc-dhead span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-dhead span b{color:var(--text);font-weight:600}
.sc-dhead i{font-style:normal;color:var(--dim);font-family:var(--display)}
.sc-dmain{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 0 8px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.sc-dmain span{font-size:13.5px}
.sc-dmain b{font-size:20px;font-weight:600;color:var(--gold-hot)}
.sc-dsub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:12.5px;color:var(--dim);padding:2px 0}
.sc-dsub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-dsub i{font-style:normal;color:var(--gold);letter-spacing:1px;font-size:12px}
.sc-dsub b{color:var(--muted);font-weight:500;min-width:44px;text-align:right}
.sc-dsub.val span,.sc-dsub.val b{color:var(--text)}
.sc-dsub.val b{color:var(--gold-hot)}
.sc-foot{margin:12px 2px 0}
@media (max-width:760px){
  .sc-top #scUid{flex:1 1 100%}
  .sc-hero{min-height:0;padding:0 14px 16px}
  .sc-hero::before{right:20%;width:110px}
  .sc-art{position:relative;width:auto;height:260px;margin:0 -14px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .sc-art img{top:10px;right:0;width:100%;height:calc(100% - 10px);object-position:center bottom}
  .sc-head{max-width:none;margin-top:-28px}
  .sc-head h2{font-size:32px;margin:10px 0 12px}
  .sc-keys b{font-size:19px}
  .sc-cols{grid-template-columns:1fr}
  .sc-discs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .sc-discs{grid-template-columns:1fr}
}


/* ══ витрина: вид «как в игре» (тестовый) ══ */
.sc-layout:empty{display:none}
/* строка над персонажами: вид карточки и превью слева, картинка и копирование справа */
.sc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.sc-bar-gap{flex:1}
.xi{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ximg{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.ximg b{font-family:var(--display);color:rgba(255,255,255,.35)}
.ximg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.xrow{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:13px;color:#d6e2e0;min-width:0}
.xrow .xl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xrow .xba{display:flex;flex-direction:column;align-items:flex-end;font-size:9.5px;line-height:1.15}
.xrow .xba i{font-style:normal;opacity:.7}
.xrow .xba em{font-style:normal;color:#7fd9ff}
.xrow > b{font-family:var(--display);font-weight:600;font-size:14px;min-width:54px;text-align:right}

/* Genshin — окно персонажа HoYoLAB: бирюзовый фон, арт слева, созвездия дугой */
.gx{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:14px;padding:16px;border-radius:14px;color:#e8f1ef;
  background:radial-gradient(600px 400px at 18% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(135deg,#123a3d,#0e2b30 45%,#0b2226);
  border:1px solid rgba(160,220,210,.14)}
.gx-left{position:relative;min-height:440px;display:flex;flex-direction:column}
.gx-art{position:relative;flex:1;min-height:340px}
.gx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.gx-cons{position:absolute;right:4px;top:30px;display:flex;flex-direction:column;gap:12px}
.gx-cons i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,30,32,.75);border:1.5px solid rgba(200,240,235,.35);color:#9fb7b4}
.gx-cons i.on{border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);color:#fff}
.gx-cons i b{font-size:10.5px;font-family:var(--display)}
.xim{display:inline-block;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:1;width:17px;height:17px;flex:0 0 17px}
.gx-cons .xi{width:13px;height:13px}
.gx-friend{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#b9cfcc;margin:6px 0}
.gx-friend b{color:#fff}
.gx-talents{display:flex;gap:10px;padding:10px;border-radius:10px;background:rgba(5,20,22,.5);border:1px solid rgba(160,220,210,.12)}
.gx-talents span{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.25)}
.gx-talents i{font-style:normal;font-family:var(--display);font-size:16px;color:#d7e8e5}
.gx-talents b{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#1b2b2d;font-size:10.5px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25)}
.gx-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.gx-head{display:flex;align-items:center;gap:12px}
.gx-el{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%);color:var(--accent)}
.gx-el .xi{width:26px;height:26px}
.gx-name{font-size:22px;font-weight:700}
.gx-name em,.gx-wname em{font-style:normal;font-size:12px;font-weight:600;padding:2px 7px;border-radius:4px;background:#e5d7b3;color:#3b3020;vertical-align:middle;margin-left:6px}
.gx-stars{color:#ffcc33;letter-spacing:2px;font-size:13px}
.gx-stars small{letter-spacing:0;color:#9fbab6;margin-left:8px}
.gx-panel{border-radius:10px;background:rgba(18,52,56,.72);border:1px solid rgba(160,220,210,.14);overflow:hidden}
.gx-pt{padding:9px 14px;font-weight:700;font-size:15px;color:#ecd9a8;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(160,220,210,.1)}
.gx-pt small{font-weight:400;font-size:11.5px;color:#9fbab6;margin-left:8px}
.gx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gx-grid .xrow{border-bottom:1px solid rgba(160,220,210,.07)}
.gx-grid .xrow:nth-child(odd){border-right:1px solid rgba(160,220,210,.07)}
.gx-weapon{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px}
.gx-wimg{width:62px;height:62px;border-radius:8px;background:linear-gradient(135deg,#6d4f8c,#3a2b55)}
.gx-wimg.r5{background:linear-gradient(135deg,#b07a3c,#6b4520)}
.gx-ref{position:absolute;left:12px;top:10px;font-style:normal;font-size:11px;font-weight:700;padding:0 5px;border-radius:3px;background:#1d1d1d;color:#fff}
.gx-wname{font-weight:700;font-size:15px}
.gx-ws{font-size:12px;color:#b9cfcc;margin-top:2px}
.gx-arts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px}
.gx-art-i{position:relative;padding:8px;border-radius:8px;background:rgba(5,20,22,.45);border:1px solid rgba(160,220,210,.1);font-size:11.5px;min-width:0}
.gx-art-i.none{color:#7b9592;display:flex;align-items:center;justify-content:center;min-height:120px}
.gx-aimg{width:44px;height:44px;border-radius:6px;background:linear-gradient(135deg,#b07a3c55,#6b452055);margin-bottom:4px}
.gx-art-i > em{position:absolute;right:8px;top:8px;font-style:normal;font-size:10.5px;color:#9fbab6}
.gx-am{display:flex;align-items:center;gap:5px;font-size:14px;color:#ecd9a8;margin-bottom:4px}
.gx-as{display:flex;align-items:center;gap:5px;color:#b9cfcc;padding:1px 0}
.gx-as span{flex:1}
.gx-as.val{color:#fff}
.gx-as i{font-style:normal;color:#ecd9a8;letter-spacing:1px}
.gx-as .xi,.gx-am .xi{width:12px;height:12px;flex-basis:12px}

/* Star Rail — раскладка HoYoLAB в цветах трекера */
.hx{--accent:#f0c264;display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:14px;padding:14px;border-radius:var(--r);color:var(--text);
  background:radial-gradient(600px 400px at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge-soft)}
.hx-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.hx-art{position:relative;height:480px;border-radius:var(--rs);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--edge-soft));
  background-color:#05060b;background-size:cover;background-position:center}
/* карточка персонажа с фоном: крупнее и без лишнего неба сверху */
.hx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.14);transform-origin:50% 22%}
/* края арта растворяются в туманности */
.hx-art > img{-webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 42%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 85% at 50% 42%,#000 55%,transparent 100%)}
.hx-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,14,.55),transparent 22%,transparent 72%,rgba(10,10,14,.85))}
.hx-head{position:absolute;z-index:1;left:12px;right:12px;top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.hx-name{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.15;text-shadow:0 2px 10px #000;max-width:100%}
.hx-name em{white-space:nowrap}
.hx-name em,.hx-lcmeta em{font-style:normal;font-family:var(--body,inherit);font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--gold);color:#1a1305;vertical-align:middle}
.hx-tags{display:flex;flex-wrap:wrap;gap:6px}
.hx-tags span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:var(--muted)}
.hx-tags .el{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.hx-tags .el i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hx-eid{position:absolute;z-index:1;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.hx-e{width:38px;height:38px;border-radius:50%;background:rgba(10,10,14,.75);border:1.5px solid rgba(255,255,255,.2);color:var(--dim)}
.hx-e img{opacity:.3;filter:grayscale(1)}
.hx-e .lk{position:relative;z-index:1;width:13px;height:13px}
.hx-e.on{border-color:var(--gold);box-shadow:0 0 10px rgba(240,194,100,.45)}
.hx-e.on img{opacity:1;filter:none}
.hx-box{border-radius:var(--rs);background:rgba(255,255,255,.025);border:1px solid var(--edge-soft);padding:10px 12px}
.hx-bt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:8px}
.hx-bt small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:6px}
.hx-lc{display:flex;gap:12px;align-items:center}
.hx-lcimg{width:58px;height:76px;border-radius:6px;background:#0c0c11;border:1px solid var(--edge-soft)}
.hx-lcname{font-size:14px;font-weight:600;color:var(--text)}
.hx-lcname.top{color:var(--gold-hot)}
.hx-lcmeta{font-size:11.5px;color:var(--dim);margin:2px 0 4px}
.hx-lcst{font-size:11.5px;color:var(--muted)}
.hx-lcst b{color:var(--text);font-family:var(--display)}
.hx-skills{display:flex;flex-wrap:wrap;gap:10px}
.hx-skills > span{position:relative}
.hx-sk{width:44px;height:44px;border-radius:50%;background:#0c0c11;border:1.5px solid rgba(240,194,100,.45)}
.hx-skills b{position:absolute;right:-4px;bottom:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:#1a1305;font-size:10.5px;font-family:var(--display);display:flex;align-items:center;justify-content:center}
.hx-nodes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.hx-major{width:34px;height:34px;border-radius:50%;background:#0c0c11;border:1.5px solid var(--edge)}
.hx-minor{width:22px;height:22px;border-radius:50%;background:#0c0c11;border:1px solid var(--edge-soft)}
.hx-major img,.hx-minor img{opacity:.25;filter:grayscale(1)}
.hx-major.on,.hx-minor.on{border-color:rgba(240,194,100,.6)}
.hx-major.on img,.hx-minor.on img{opacity:1;filter:none}
.hx-minor img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
.hx-tbonus{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.hx-tbonus b{color:var(--gold);font-family:var(--display);font-weight:600}
.hx-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.hx-title{font-family:var(--display);font-size:20px;font-weight:600;padding-left:10px;border-left:3px solid var(--gold)}
.hx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;column-gap:14px}
.hx-grid .xrow{color:var(--muted);border-bottom:1px solid rgba(255,255,255,.05)}
.hx-grid .xrow > b{color:var(--text)}
.hx-grid .xrow.hl,.hx-grid .xrow.hl > b{color:var(--gold-hot)}
.hx-grid .xrow .xba em{color:#8fa86a}
.hx-useful{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:8px 10px;border-radius:var(--rs);background:rgba(240,194,100,.05);border:1px solid rgba(240,194,100,.15)}
.hx-useful > div:first-child{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hx-ut{font-size:12px;color:var(--muted);margin-right:4px}
.hx-uc{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--edge-soft)}
.hx-uc b{color:var(--gold-hot);font-family:var(--display)}
.hx-utot{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--gold);background:radial-gradient(circle,rgba(240,194,100,.18),transparent 70%)}
.hx-utot b{font-family:var(--display);font-size:20px;color:var(--gold-hot);line-height:1}
.hx-utot small{font-size:9.5px;color:var(--dim)}
.hx-relics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px;padding-top:14px}
.hx-rel{position:relative;border-radius:var(--rs);background:var(--panel);border:1px solid var(--edge-soft);min-width:0}
.hx-rel.top{border-color:rgba(240,194,100,.25)}
.hx-rel.none p{margin:0;padding:20px 10px;color:var(--dim);font-size:12px;text-align:center}
/* низкая шапка, крупная иконка комплекта выступает за её верх — как в HoYoLAB */
.hx-rh{position:relative;display:flex;align-items:center;height:26px;padding:0 56px 0 10px;border-radius:var(--rs) var(--rs) 0 0;font-size:13px;font-weight:600;
  background:linear-gradient(90deg,rgba(240,194,100,.22),rgba(240,194,100,.05) 70%);border-bottom:1px solid rgba(240,194,100,.18);color:var(--text)}
.hx-rh span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-rh em{font-style:normal;font-size:10px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.4);color:var(--gold);margin-left:4px}
.hx-ricon{position:absolute;right:4px;top:-18px;width:48px;height:48px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.hx-rm,.hx-rs{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.04)}
.hx-rm{background:rgba(255,255,255,.035);font-weight:600;font-size:13.5px}
.hx-rm b{color:var(--gold-hot)}
.hx-rm span,.hx-rs span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-rs{color:var(--dim)}
.hx-rs i:not(.xi){font-style:normal;font-size:10px;color:var(--muted);padding:0 4px;border-radius:999px;background:rgba(255,255,255,.07)}
.hx-rs.val{color:var(--text)}
.hx-rs.val b{color:var(--gold-hot)}
.hx-rs.val i:not(.xi){background:rgba(240,194,100,.18);color:var(--gold-hot)}
.hx-rm b,.hx-rs b{font-family:var(--display)}
/* ZZZ — карточка в духе окна агента: арт, наклонный столбец кинограмм, характеристики, диски-пластинки справа */
.zx{--zr:color-mix(in srgb,var(--accent) 62%,#000);--zr2:color-mix(in srgb,var(--accent) 70%,#fff);--zrd:color-mix(in srgb,var(--accent) 34%,#0a0a0a);position:relative;display:flex;flex-direction:column;
  border-radius:14px;overflow:hidden;color:#f3f3f3;border:2px solid #2a2a2e;background:color-mix(in srgb,var(--zrd) 80%,#000)}
/* основная часть — со скруглёнными нижними углами и тенью, сводка сабстатов подложена под неё */
.zx-main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,215px) 46px minmax(0,1fr) minmax(0,300px);
  border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.55);
  background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px),linear-gradient(90deg,#1d1d21,#161618)}
/* фон агента в стиле ZZZ: косые полосы, полутоновые точки, развёртка как у кассеты, крупное слово стихии */
.zx-art{position:relative;overflow:hidden;margin-right:-44px;min-height:440px;clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    linear-gradient(118deg,transparent 0 38%,color-mix(in srgb,var(--accent) 30%,transparent) 38% 46%,transparent 46% 52%,color-mix(in srgb,var(--accent) 16%,transparent) 52% 55%,transparent 55%),
    radial-gradient(circle at 60% 30%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--accent) 22%,#1b1b20),#0f0f12 80%)}
.zx-art::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent) 1.3px,transparent 1.8px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%);opacity:.8}
.zx-bgw{position:absolute;left:4px;top:10px;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:104px;letter-spacing:.04em;line-height:.9;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 55%,transparent);opacity:.75}
/* арт сдвинут влево: центр — по видимой части, а не под столбцом кинограммы */
.zx-art img{position:absolute;top:0;left:-28px;width:100%;height:100%;object-fit:cover;object-position:center top}
.zx-art::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.zx-uid{position:absolute;right:82px;bottom:16px;z-index:1;writing-mode:vertical-rl;transform:rotate(185deg);font-weight:700;font-size:13px;letter-spacing:1px;opacity:.85}
.zx-id{position:absolute;left:14px;right:110px;bottom:14px;z-index:1}
.zx-lv{font-size:14px;font-weight:700;white-space:nowrap}
.zx-lv b{font-size:18px}
.zx-nm{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
/* столбец кинограмм — 9 прямоугольников под наклоном */
.zx-mind{position:relative;z-index:1;display:flex;align-items:stretch;margin-left:-12px;width:56px;background:#202024;transform:skewX(-5deg);transform-origin:center;
  box-shadow:-6px 0 14px rgba(0,0,0,.45)}
.zx-mind-in{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px 11px}
.zx-mind i{flex:1;min-height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:15px;
  color:#4a4a50;border:1.5px solid #2f2f34;background:#19191c}
.zx-mind i > *{transform:skewX(5deg)}
.zx-mind i.on{color:#fff;border-color:var(--zr);background:color-mix(in srgb,var(--accent) 10%,#141416);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.zx-mind i.blank{border-color:#2a2a2e;background:transparent}
.zx-mind i.ic{border-color:#2f2f34;background:#141416}
.zx-mind i.ic img{width:24px;height:24px;object-fit:contain}
.zx-mind i.ic span{font-size:10px;color:#aaa}
.zx-mid{min-width:0;padding:16px 14px 14px 14px}
/* содержимое идёт вдоль наклона столбца кинограмм: блок скошен, строки выпрямлены обратно */
.zx-mid-in{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:12px;transform:skewX(-5deg)}
.zx-mid-in .zx-st,.zx-mid-in .zx-w,.zx-mid-in .zx-low2{transform:skewX(5deg)}
/* буквы задатков: блок остаётся скошенным, каждая буква выпрямлена — второй ряд сдвигается вдоль наклона */
.zx-mid-in .zx-core i{transform:skewX(5deg)}
.zx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.zx-st{display:grid;grid-template-columns:17px minmax(0,auto) minmax(8px,1fr) auto;align-items:center;gap:6px;padding:5px 0;font-size:13px;font-weight:700}
.zx-st .xi{width:17px;height:17px;flex-basis:17px}
.zx-l{line-height:1.15}
.zx-dots{display:block}
.zx-v{display:flex;flex-direction:column;align-items:flex-end}
.zx-v b{font-family:var(--display);font-size:14.5px}
.zx-v small{font-size:10px;color:#9a9a9a;font-weight:500;white-space:nowrap}
.zx-v small em{font-style:normal;color:#8fc06a}
.zx-st.hl .zx-l,.zx-st.hl .zx-v b{color:var(--gold-hot)}
.zx-low{display:flex;align-items:center;gap:14px}
.zx-core{display:grid;grid-template-columns:repeat(3,30px);gap:8px 8px;flex:0 0 auto}
.zx-core i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:14px;line-height:1;padding:0;box-sizing:border-box;color:#555;border:2px solid #333}
.zx-core i.on{color:var(--zr2);border-color:var(--zr2);background:color-mix(in srgb,var(--accent) 16%,#111)}
.zx-w{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-right:34px;padding:12px 44px 12px 12px;border-radius:18px 6px 18px 6px;background:#0f0f11;border:1px solid #2a2a2e}
.zx-wn{font-weight:800;font-size:13.5px;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zx-wst{display:flex;justify-content:center;gap:6px;margin-top:7px}
.zx-wst span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:#222226}
.zx-wst .xi{width:15px;height:15px}
.zx-wimg{position:absolute;right:-34px;top:50%;width:70px;height:70px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#444,#1a1a1a);overflow:hidden}
.zx-p{position:absolute;right:-30px;top:-10px;font-style:normal;font-weight:900;font-size:13px;padding:2px 9px;border-radius:3px 9px 3px 9px;background:#000;border:1px solid #444}
.zx-wl{position:absolute;right:-36px;bottom:-10px;font-style:normal;font-weight:900;font-size:13px;padding:2px 9px;border-radius:3px 9px 3px 9px;background:#000;border:1px solid #444}
.zx-low2{display:flex;align-items:center;justify-content:space-between;gap:14px}
.zx-skills{display:flex;gap:6px;flex:0 0 auto}
.zx-skills span{position:relative;width:38px;height:38px}
.zx-skimg{width:38px;height:38px;display:block}
.zx-skills b{position:absolute;right:-4px;bottom:-3px;font-size:11px;font-weight:900;padding:0 4px;border-radius:6px;background:#000;border:1px solid #555}
.zx-sets{flex:1;display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-size:12px;font-weight:800;min-width:0}
.zx-sets div{display:flex;align-items:center;gap:7px;max-width:100%}
.zx-sets span{min-width:0;text-align:right;line-height:1.15}
.zx-sicon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#2a2a2e;overflow:hidden}
.zx-sets b{font-size:11px;padding:1px 7px;border-radius:9px 3px 9px 3px;background:color-mix(in srgb,var(--accent) 22%,#111);color:var(--zr2)}
/* диски: коробка (наклонный квадрат) крупнее строки, пластинка наполовину выглядывает из неё; строка заканчивается полосой цвета ранга */
.zx-discs{position:relative;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:14px 10px 14px 36px;z-index:0;isolation:isolate}
/* фон дисков: наклонная плашка цвета стихии с полосами, точками и развёрткой, сбоку — контурная надпись */
.zx-discs::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
    radial-gradient(circle,rgba(255,255,255,.16) 1.2px,transparent 1.7px) 0 0/10px 10px,
    linear-gradient(118deg,transparent 0 30%,rgba(255,255,255,.07) 30% 36%,transparent 36% 62%,rgba(0,0,0,.18) 62% 70%,transparent 70%),
    repeating-linear-gradient(-62deg,transparent 0 22px,rgba(0,0,0,.08) 22px 24px),
    radial-gradient(ellipse at 85% 10%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 55%),
    linear-gradient(160deg,var(--zr),var(--zrd) 75%)}
/* блик по краю плашки */
.zx-discs::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 6%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 75%,rgba(0,0,0,.25))}
.zx-d{--rk:#4fa3ff;position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;padding:4px 12px 4px 0;min-height:54px;
  border-radius:12px 16px 16px 12px;background:rgba(18,18,20,.94);border-right:4px solid var(--rk)}
.zx-d.rS{--rk:#f5a524}
.zx-d.rA{--rk:#b46cff}
.zx-d.none{--rk:#3a3a3e}
.zx-d.none p{margin:0;color:#777;font-size:12px}
.zx-box{position:relative;height:54px;transform:rotate(6deg)}
.zx-vin{position:absolute;left:-22px;top:50%;width:62px;height:62px;transform:translateY(-50%);border-radius:50%;background:#111}
.zx-dicon{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#2a2a2e}
.zx-dicon img{width:100%;height:100%;object-fit:cover}
.zx-sq{position:absolute;left:12px;top:50%;width:84px;height:66px;margin-top:-33px;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,#2a2a2e),#1a1a1d 85%);border:1.5px solid rgba(255,255,255,.14);box-shadow:-5px 3px 10px rgba(0,0,0,.55)}
.zx-d.rS .zx-sq{border-color:rgba(245,165,36,.6)}
.zx-sqi{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 7px;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.12))}
.zx-sq1{display:flex;align-items:center;gap:4px}
.zx-sq1 b{font-family:var(--display);font-size:15px;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.zx-sq1 .xi{width:13px;height:13px;flex:0 0 13px}
.zx-sq2{display:flex;align-items:center;gap:5px;white-space:nowrap}
.zx-sq2 em{font-style:normal;font-size:10px;font-weight:800;padding:0 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#f0c264}
.zx-sq2 s{width:15px;height:15px;border-radius:50%;text-decoration:none;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;background:var(--rk);color:#1a1200}
.zx-ds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 8px}
.zx-ds span{position:relative;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:#bdbdbd}
.zx-ds span.val{color:#fff}
.zx-ds .xi{width:14px;height:14px}
.zx-ds u{position:absolute;left:19px;bottom:-4px;height:2px;border-radius:1px;background:repeating-linear-gradient(90deg,#ffb347 0 6px,transparent 6px 8px)}
.zx-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 18px;font-weight:800;font-size:13.5px}
.zx-sum{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:18px;min-width:0}
.zx-sum > span{display:flex;align-items:center;gap:4px}
.zx-sum small{font-size:10.5px;opacity:.75}
.xig{object-fit:contain;opacity:1}
/* подсветка при наведении: прямоугольник, левый верхний и правый нижний углы круглее */
.zx [data-f]{transition:background .12s,box-shadow .12s}
.zx-st,.zx-ds span,.zx-sum > span{border-radius:18px 6px 18px 6px}
.zx-st{margin:0 -6px;padding-left:6px;padding-right:6px;cursor:default}
.zx-ds span{margin:-2px -4px;padding:2px 4px}
.zx-sum > span{margin:-3px -6px;padding:3px 6px}
.zx .zx-on{background:color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.zx-sq1.zx-on{background:none;box-shadow:none}
.zx-sq1.zx-on b{color:var(--zr2)}
.zx-ds span.zx-on,.zx-sum > span.zx-on{color:#fff}
.zx-wst span{border-radius:18px 6px 18px 6px}
/* иконки нерекомендуемых характеристик тусклее */
.zx-ds span:not(.val) .xi,.zx-sum > span:not(.val) .xi{opacity:.4}
@media (max-width:900px){
  .gx,.hx{grid-template-columns:1fr}
  .gx-left{min-height:0}
  .hx-art{height:380px}
  .gx-arts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zx-main{grid-template-columns:minmax(0,1fr) 58px}
  .zx-art{min-height:360px}
  .zx-mid,.zx-discs{grid-column:1 / -1}
  .zx-discs{clip-path:none;padding:12px 10px 12px 30px}
  .zx-mind{margin-left:-10px;width:58px}
  .zx-mid{padding:16px}
  .zx-mid-in,.zx-mid-in .zx-st,.zx-mid-in .zx-w,.zx-mid-in .zx-low2,.zx-mid-in .zx-core i{transform:none}
}
@media (max-width:520px){
  .gx-grid,.hx-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .gx-grid .xrow:nth-child(odd){border-right:none}
  .hx-relics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-rh{padding-right:44px}
  .hx-ricon{width:40px;height:40px;top:-15px;right:2px}
  .zx-stats{grid-template-columns:1fr}
  .zx-low,.zx-low2{flex-wrap:wrap}
  .zx-sets{flex-basis:100%;align-items:flex-start}
  .zx-sets span{text-align:left}
  .zx-w{padding-right:48px;flex-basis:calc(100% - 34px)}
}

/* коллекция: ссылка на сборку из витрины */
.colbuild{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.colbuild .hint{margin:0}
.colcard .bld{position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(120,190,255,.16);color:#8fc8ff}
.colcard .bld svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* витрина: элементы карточки не выделяются */
.sc-card{-webkit-user-select:none;user-select:none}
.sc-card img{-webkit-user-drag:none}
/* портрет, подогнанный по рамке фигуры: размер и место задаются из JS */
.zx-art > img.fx,.hx-art > img.fx,.gx-art > img.fx{inset:auto;right:auto;bottom:auto;height:auto;max-width:none;object-fit:fill;transform:none}
.gx-art{overflow:hidden}
.art-edit{cursor:grab;outline:2px dashed color-mix(in srgb,var(--accent,#f0c264) 70%,transparent);outline-offset:-4px}
.art-edit:active{cursor:grabbing}
.art-tools{position:absolute;left:10px;top:10px;z-index:5;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px 4px 12px 4px;background:rgba(10,10,12,.82);cursor:default}
.art-tools div{display:flex;gap:4px}
.art-tools button{min-width:30px;height:28px;padding:0 9px;border-radius:7px;border:1px solid rgba(255,255,255,.15);background:#1e1e22;color:#eee;font-weight:700;cursor:pointer}
.art-tools button.on{background:#f0c264;color:#1a1305;border-color:#f0c264}
.art-tools small{font-size:10.5px;color:#aaa}
#scArt.on{border-color:var(--gold);color:var(--gold-hot)}
/* ZZZ: переключатели под карточкой */
.sc-opts{margin-top:12px;align-items:center}
.sc-opts-sep{width:1px;align-self:stretch;background:var(--edge-soft);margin:0 4px}
.zx.no-uid .zx-uid{display:none}
.zx.no-bar .zx-bar{display:none}
.zx.no-bar .zx-main{border-radius:0;box-shadow:none}
.zx.no-rolls .zx-ds u{display:none}
/* HSR: число усилений важнее названия — название обрезается, «»2» остаётся видно */
.hx-rs span{display:flex;align-items:center;gap:4px}
.hx-rs span em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.hx-rs span i{flex:none}
.hx-rh span{display:flex;align-items:center}
.hx-rh span em{flex:none}
/* ZZZ: свечение по редкости агента и амплификатора */
.zx.rS{border-color:rgba(245,165,36,.5);box-shadow:0 0 0 1px rgba(245,165,36,.12),0 0 26px rgba(245,165,36,.16)}
.zx.rA{border-color:rgba(180,108,255,.5);box-shadow:0 0 0 1px rgba(180,108,255,.12),0 0 26px rgba(180,108,255,.16)}
.zx-w.wS .zx-wimg{box-shadow:0 0 0 2px #f5a524,0 0 16px rgba(245,165,36,.5)}
.zx-w.wA .zx-wimg{box-shadow:0 0 0 2px #b46cff,0 0 16px rgba(180,108,255,.45)}
.zx-w.wB .zx-wimg{box-shadow:0 0 0 2px #4fa3ff,0 0 14px rgba(79,163,255,.4)}
/* ZZZ: оценка сборки и ник в нижней строке */
.zx-who{display:flex;align-items:center;gap:14px;flex:none}
.zx-grade{display:flex;align-items:baseline;gap:6px;padding:2px 10px;border-radius:18px 6px 18px 6px;background:rgba(0,0,0,.35)}
.zx-grade b{font-family:var(--display);font-size:22px;line-height:1}
.zx-grade small{font-size:10.5px;opacity:.7}
.zx-grade.gSS b{background:linear-gradient(90deg,#ffd36b,#ff8a5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.zx-grade.gS b{color:#f5a524}
.zx-grade.gA b{color:#c18cff}
.zx-grade.gB b{color:#6fb4ff}
.zx-grade.gC b{color:#9a9aa2}
.zx-nick{font-size:13px;opacity:.85;white-space:nowrap}
.zx.no-nick .zx-nick,.zx.no-grade .zx-grade{display:none}
@media (max-width:520px){ .zx-bar{flex-wrap:wrap} .zx-sum{justify-content:flex-start} }
/* задатки ZZZ: векторные буквы в кольце (белые SVG, цвет — из currentColor) */
.zx-core i{border:none;background:#0d0d0f;color:#3c3c42;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.zx-core i.on{background:#0d0d0f;color:var(--zr2)}
.zx-core i span{display:block;width:100%;height:100%;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.zx-art > img.pre,.hx-art > img.pre,.gx-art > img.pre{opacity:0}
.zx-art > img.pre.fit,.hx-art > img.pre.fit,.gx-art > img.pre.fit{opacity:1;transition:opacity .15s}
/* история уже загружена: блок загрузки файла компактный, в одну строку */
.drop.compact{padding:10px 14px;margin-top:14px;text-align:left}
.drop.compact .dropin{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.drop.compact .dropin > b,.drop.compact .dropin > span{display:none}
.drop.compact .dropin .row{margin-top:0}
.drop.compact .watchrow{margin-top:0;padding:6px 12px;justify-content:flex-start}
.drop.compact .hint{flex-basis:100%;margin:0}
.drop.compact .hint:empty{display:none}
.drop.compact details.exporter{align-self:center;margin:0}
.drop.compact details.exporter[open]{flex-basis:100%;max-width:none;order:9}
/* ── Genshin «как в игре»: тот же каркас, что у HSR, со своими деталями ── */
.hx.gi .hx-art{background-color:#060810}
.hx.gi .hx-art > img:not(.fx){object-fit:cover;object-position:50% 25%;transform:scale(1.25);transform-origin:50% 30%}
.hx.gi.r5 .hx-art{border-color:rgba(240,194,100,.4);box-shadow:0 0 22px rgba(240,194,100,.12)}
.hx.gi.r4 .hx-art{border-color:rgba(180,108,255,.4);box-shadow:0 0 22px rgba(180,108,255,.12)}
.gi-stars{color:var(--gold-hot) !important;letter-spacing:1px}
.hx.gi.r4 .gi-stars{color:#c18cff !important}
/* созвездия дугой у правого края */
.gi-cons{position:absolute;z-index:1;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.gi-c{width:40px;height:40px;border-radius:50%;background:rgba(8,10,16,.8);border:1.5px solid rgba(255,255,255,.18);color:var(--dim)}
.gi-c img{opacity:.28;filter:grayscale(1)}
.gi-c .lk{position:relative;z-index:1;width:13px;height:13px}
.gi-c.on{border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.gi-c.on img{opacity:1;filter:none}
.gi-friend{position:absolute;z-index:1;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:var(--muted)}
.gi-friend b{color:var(--text)}
/* оружие — квадратная иконка с рамкой по редкости */
.gi-wimg{width:72px;height:72px;border-radius:10px;background:linear-gradient(160deg,#5a4a7a,#2a2238);border-color:rgba(180,108,255,.45)}
.gi-wimg.top{background:linear-gradient(160deg,#8a6a3a,#3a2a14);border-color:rgba(240,194,100,.55)}
.gi-w .hx-lcmeta em{background:var(--gold);color:#1a1305}
/* таланты: подпись под иконкой, усиленные созвездием — голубым */
.gi-tal{gap:16px}
.gi-tal > span{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px}
.gi-tal small{font-size:10.5px;color:var(--dim);text-align:center;line-height:1.2}
.gi-tal b{right:12px;bottom:auto;top:30px}
.gi-tal b.up{background:#6fd3ff;color:#062030}
/* оценка артефактов */
.gi-cv b{color:#ff9b7a}
.gi-grade{border-color:var(--gold)}
.gi-grade small{font-size:9px}
.gi-grade.gSS b{background:linear-gradient(90deg,#ffd36b,#ff8a5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.gi-grade.gS b{color:#f5a524}
.gi-grade.gA b{color:#c18cff}.gi-grade.gA{border-color:#b46cff}
.gi-grade.gB b{color:#6fb4ff}.gi-grade.gB{border-color:#4fa3ff}
.gi-grade.gC b{color:#9a9aa2}.gi-grade.gC{border-color:#5a5a62}
.hx-art .gi-elic{position:static;inset:auto;width:18px;height:18px;margin:-3px -2px -3px -4px;object-fit:contain;transform:none;opacity:1}
/* Genshin: сверху портрет | характеристики + оружие и таланты, снизу 5 артефактов в строку */
.hx.gi .hx-left{display:flex}
.hx.gi .hx-art{height:auto;flex:1;min-height:440px}
.gi-wt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.hx.gi{grid-template-rows:auto auto auto}
.hx.gi .hx-left{grid-row:1 / 3}
/* артефакты — один блок буквой Г: шапка под оружием и талантами, ряд артефактов на всю ширину под портретом */
.gi-rhead{position:relative;border-bottom:none;border-radius:var(--rs) var(--rs) 0 0;margin:-4px 0 -14px;padding-bottom:4px}
/* скруглённый внутренний угол буквы Г — у правого нижнего угла портрета */
.gi-rhead::after{content:"";position:absolute;left:calc(-1px - var(--rs));bottom:0;width:calc(var(--rs) + 1px);height:var(--rs);pointer-events:none;
  background:radial-gradient(circle at 0 0,#131218 calc(var(--rs) - 1px),#1e1e24 calc(var(--rs) - 1px),#1e1e24 var(--rs),#17171d var(--rs))}
.gi-rhead .hx-useful{margin-bottom:0}
.gi-rels{grid-column:1 / -1;position:relative;border-top:none;border-top-right-radius:0;padding-top:7px}
.gi-rels::before{content:"";position:absolute;left:-1px;top:0;width:calc(344px - var(--rs));height:var(--rs);border:1px solid var(--edge-soft);border-right:none;border-bottom:none;border-top-left-radius:var(--rs);pointer-events:none}
.hx.gi .hx-relics{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){
  .hx.gi .hx-art{flex:none;height:380px;min-height:0}
  .hx.gi .hx-left{grid-row:auto}
  .gi-rels::before,.gi-rhead::after{display:none}
  .gi-rhead{margin-top:0}
  .gi-rels{border-top-left-radius:0}
  .hx.gi .hx-relics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){ .gi-wt{grid-template-columns:1fr} }
@media (max-width:520px){ .hx.gi .hx-relics{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* превью всех персонажей и выбор полезных характеристик */
#scPrev.on{border-color:var(--gold);color:var(--gold-hot);background:rgba(240,194,100,.08)}
.sc-tab.cfg::after{content:"";position:absolute;z-index:1;right:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg,#0b0b0f)}
.sc-recp{margin-top:10px;padding:12px 14px;border-radius:var(--rs);background:rgba(240,194,100,.04);border:1px solid rgba(240,194,100,.18)}
.sc-recp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sc-recp-h small{color:var(--dim);font-size:12px;flex:1}
.sc-recp .chip{display:inline-flex;align-items:center;gap:6px}
.sc-recp .chip .xi{width:14px;height:14px}
.sc-prevq{display:block;width:100%;max-width:320px;margin:14px 0 0}
.sc-tabs.prev{max-height:166px;overflow-y:auto;gap:6px;padding:4px;margin-top:10px;scrollbar-width:thin}
.sc-tabs.prev .sc-tab{width:46px;height:46px;flex:none}
.sc-tabs.prev .sc-tab span{font-size:16px}
/* настройки: разделы сворачиваются, в заголовке — текущее значение */
.setsec{border:1px solid var(--edge-soft);border-radius:var(--rs);background:rgba(255,255,255,.02);margin:8px 0 0}
.setsec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rs);user-select:none}
.setsec > summary::-webkit-details-marker{display:none}
.setsec > summary::after{content:"";flex:none;width:7px;height:7px;margin-left:4px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.setsec[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.setsec > summary:hover{background:rgba(255,255,255,.03)}
.setsec > summary b{font-weight:600;font-size:14px;color:var(--text)}
.setsec > summary small{flex:1;min-width:0;text-align:right;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setsec > summary small.on{color:var(--gold)}
.setsec[open]{border-color:rgba(240,194,100,.22)}
.setbody{padding:2px 14px 14px}
#setTitle{margin-bottom:6px}
/* Genshin: главная характеристика не из рекомендованных */
.hx.gi .hx-rm.gi-bad b{color:#ff9b7a}
.gi-badi{flex:none;width:15px;height:15px;border-radius:50%;background:rgba(255,120,90,.18);border:1px solid rgba(255,120,90,.55);color:#ff9b7a;font-style:normal;font-size:10px;font-weight:700;line-height:13px;text-align:center;cursor:help}
.hx.gi.no-mains .gi-badi{display:none}
.hx.gi.no-mains .hx-rm.gi-bad b{color:var(--gold-hot)}
/* история сборки персонажа */
.sc-hist{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.sc-hist > span{font-size:12px;color:var(--dim);margin-right:4px}
.sc-diff{margin-top:10px;padding:12px 14px;border-radius:var(--rs);background:var(--panel-2);border:1px solid var(--edge-soft)}
.sc-diff p{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.sc-diff > div{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid rgba(255,255,255,.04);font-size:13px}
.sc-diff span{color:var(--muted)}
.sc-diff em{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sc-diff b{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-diff .up b{color:#7fd88f}
.sc-diff .dn b{color:#ff8f7a}
@media (max-width:520px){ .sc-diff > div{grid-template-columns:1fr auto} .sc-diff em{grid-column:1 / -1;grid-row:2} }
/* список персонажей: свернуть в одну строку */
.sc-tabsw{display:flex;align-items:flex-start;gap:8px;margin:12px 0}
.sc-tabsw .sc-tabs{flex:1;min-width:0;margin:0}
.sc-tabs.col{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:3px 2px}
.sc-tabs.col::-webkit-scrollbar{display:none}
.sc-tabs.col.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.sc-tabs.col.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.sc-tabs.col.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.sc-tabs.col .sc-tab{flex:none}
.sc-tabtog{flex:none;width:36px;height:36px;margin-top:9px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--raise);border:1px solid var(--edge-soft);color:var(--muted)}
.sc-tabtog i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-135deg) translate(-2px,-2px)}
.sc-tabtog.on i{transform:rotate(45deg) translate(-2px,-2px)}
.sc-tabtog:hover{color:var(--gold);border-color:rgba(240,194,100,.35)}

/* заготовка карточки с бликом, пока грузятся справочники */
.skel{display:block;border-radius:8px;background:linear-gradient(100deg,rgba(255,255,255,.035) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.035) 70%);background-size:300% 100%;animation:skel 1.5s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }
.sc-tab.skel{display:block;border:none;border-radius:50%}
.sk-wrap{padding:14px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge-soft)}
.sk{display:grid;gap:14px}
.sk-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.sk-wrap .art{height:440px}
.sk-wrap .ttl{height:26px;width:45%}
.sk-wrap .ln{height:14px;margin:6px 0}
.sk-wrap .ln.w60{width:60%}
.sk-wrap .box{height:110px}
.sk-wrap .box.sm{height:70px}
.sk-wrap .disc{height:58px}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:6px 12px;border-radius:var(--rs);border:1px solid var(--edge-soft)}
.sk-row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.sk-tiles{display:grid;gap:8px}
.sk-tiles.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sk-tiles.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.sk-tile{padding:10px;border-radius:var(--rs);border:1px solid var(--edge-soft);background:rgba(255,255,255,.015)}
.sk-gi{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
.sk-gi > .sk-tiles{grid-column:1 / -1}
.sk-hx{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
.sk-hx .art{height:480px}
.sk-zx{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr)}
.sk-zx .art{height:420px}
.sk-tr{grid-template-columns:minmax(0,280px) minmax(0,1fr);margin-bottom:14px}
.sk-tr .art{height:300px}
@media (max-width:900px){
  .sk-gi,.sk-hx,.sk-zx,.sk-tr{grid-template-columns:1fr}
  .sk-wrap .art{height:320px}
  .sk-tiles.n5,.sk-tiles.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sc-tabtog[hidden]{display:none}
/* персонажи в ряду: картинки не выделяются и не вытаскиваются; свёрнутый ряд тащится мышкой */
.sc-tabs{-webkit-user-select:none;user-select:none}
.sc-tabs img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.sc-tabs.col{cursor:grab}
.sc-tabs.col.drag{cursor:grabbing}
.sc-tabs.col.drag .sc-tab{pointer-events:none}
.hoyosteps{margin:10px 0;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.hoyosteps li{margin:4px 0}
.hoyosteps code{font-size:12px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--text)}
#hoyoOverlay a{color:var(--gold);text-underline-offset:2px}
/* подсказки с описаниями */
.dtip{position:fixed;z-index:200;max-width:calc(100vw - 16px);overflow:hidden;padding:10px 12px;border-radius:10px;background:#16161d;border:1px solid rgba(240,194,100,.28);box-shadow:0 10px 30px rgba(0,0,0,.55);font-size:12.5px;line-height:1.5;color:var(--muted);pointer-events:none}
.dtip b{display:block;color:var(--text);font-size:13px;margin-bottom:4px}
.dtip p{margin:6px 0 0}
.dtip em{font-style:normal;color:var(--gold)}
[data-tip]{cursor:help}
.hx-bt .dt{border-bottom:1px dotted rgba(255,255,255,.25)}
/* ZZZ: оценка HoYoLAB рядом со своей */
.zx-hoyo{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);font-size:12px}
.zx-hoyo small{font-size:9.5px;letter-spacing:.06em;color:var(--dim)}
.zx-hoyo b{font-family:var(--display);color:var(--gold-hot)}
.zx-hoyo em{font-style:normal;color:var(--muted)}
.dtip.scroll{overflow-y:auto;pointer-events:auto;overscroll-behavior:contain;scrollbar-width:thin}
.zx.no-hoyo .zx-hoyo{display:none}
/* меню экспорта */
.sc-expw{position:relative;display:inline-flex}
.sc-exp{position:absolute;z-index:60;bottom:calc(100% + 8px);right:0;width:min(340px,calc(100vw - 32px));padding:12px;border-radius:12px;background:#16161d;border:1px solid rgba(240,194,100,.25);box-shadow:0 12px 34px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:6px}
.sc-exp > b{font-size:13.5px;color:var(--text)}
.sc-exp > small{font-size:11.5px;color:var(--dim);margin-bottom:4px}
.sc-exp label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer}
.sc-exp label:hover{background:rgba(255,255,255,.04)}
.sc-exp label.off{opacity:.45;cursor:default}
.sc-exp label span{flex:1;display:flex;flex-direction:column;font-size:13px;color:var(--text)}
.sc-exp label em{font-style:normal;font-size:11px;color:var(--dim)}
.sc-exp label i{font-style:normal;font-family:var(--display);color:var(--gold);min-width:20px;text-align:right}
.sc-expb{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.hoyobm{display:inline-block;margin:2px 0;padding:4px 12px;border-radius:999px;background:linear-gradient(180deg,#ffd77a,#f0b24a);color:#1a1305 !important;font-weight:600;text-decoration:none;cursor:grab}

/* флажки в стиле сайта: тёмный квадрат, отмеченный — золотой с тёмной галочкой */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;transition:background .12s,border-color .12s}
input[type=checkbox]::before{content:"";width:9px;height:5px;border-left:2px solid #1a1305;border-bottom:2px solid #1a1305;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .12s}
input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
input[type=checkbox]:checked::before{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
input[type=checkbox]:hover:not(:disabled){border-color:rgba(240,194,100,.6)}
input[type=checkbox]:focus-visible{outline:2px solid rgba(240,194,100,.6);outline-offset:2px}
input[type=checkbox]:disabled{cursor:default;opacity:.5}
#scPrevReset.warn{border-color:rgba(255,120,90,.6);color:#ff9b7a}
/* карточка «Трекер»: портрет подгоняется по фигуре (art_focus) и вручную, как в «как в игре» */
.sc-art > img.fx{inset:auto;right:auto;bottom:auto;height:auto;max-width:none;object-fit:fill}
.sc-art > img.pre{opacity:0}
.sc-art > img.pre.fit{opacity:1;transition:opacity .15s}
.sc-art.art-edit{pointer-events:auto;z-index:2;-webkit-mask-image:none;mask-image:none}
.sc-art .art-tools{left:auto;right:10px}
/* оружие в шапке карточки */
.sc-hw{display:flex;align-items:center;gap:12px;margin-top:14px;padding:8px 12px 8px 8px;border-radius:var(--rs);background:rgba(8,8,12,.55);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:100%}
.sc-hw.top{border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.sc-hwimg{position:relative;flex:none;width:58px;height:58px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#4a3d66,#211c2e);border:1px solid rgba(180,108,255,.35)}
.sc-hw.top .sc-hwimg{background:linear-gradient(160deg,#7a5c2e,#2c2112);border-color:rgba(240,194,100,.45)}
.sc-hwimg.tall{width:46px;height:62px}
.sc-hwimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sc-hwi{min-width:0;display:flex;flex-direction:column;gap:1px}
.sc-hwi small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sc-hwi b{font-size:14.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-hw.top .sc-hwi b{color:var(--gold-hot)}
.sc-hwi span{font-size:12px;color:var(--muted)}
.sc-hwi em{font-style:normal;color:var(--gold);font-weight:600}
.sc-hwi i{font-style:normal;color:var(--text)}
/* «Трекер»: комплекты в шапке, характеристики в два столбца */
.sc-hsets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sc-hset{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 4px;border-radius:999px;background:rgba(8,8,12,.55);border:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--text);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sc-hset img,.sc-hset i{width:22px;height:22px;border-radius:50%;object-fit:contain;background:rgba(255,255,255,.05)}
.sc-hset b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;background:rgba(255,255,255,.08);color:var(--muted)}
.sc-hset.full b{background:var(--gold);color:#1a1305}
.sc-hset.none{padding:5px 12px;color:var(--dim)}
.sc-hcv{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(8,8,12,.55);border:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--muted)}
.sc-hcv b{font-family:var(--display);color:#ff9b7a}
.sc-statp{margin-top:8px}
.sc-stats.two{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;column-gap:32px}
@media (max-width:640px){ .sc-stats.two{grid-template-columns:1fr;grid-template-rows:none !important;grid-auto-flow:row} }
/* оценка каждого предмета: полезные усиления; ▲ лучший, ▼ слабейший */
.pcs{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:6px;border-radius:999px;font-size:10.5px;font-weight:700;font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;background:rgba(255,255,255,.07);color:var(--muted);border:1px solid transparent;cursor:help}
.pcs.g1{color:#ffd36b;background:rgba(240,194,100,.14)}
.pcs.g2{color:#c18cff;background:rgba(180,108,255,.12)}
.pcs.g3{color:#8fb8ff;background:rgba(79,163,255,.1)}
.pcs.g4{color:#9a9aa2}
.pcs.best{border-color:rgba(240,194,100,.6)}
.pcs.worst{border-color:rgba(255,120,90,.55);color:#ff9b7a}
.zx-d > .pcs{position:absolute;z-index:4;right:-2px;top:-7px;margin:0;height:16px;padding:0 6px;font-size:9.5px;background:rgba(10,10,12,.92)}
.zx.no-grade .zx-d > .pcs{display:none}
/* Genshin / Star Rail: значок — под иконкой предмета, чтобы не теснить название слота */
.hx-rh .pcs{position:absolute;z-index:2;right:2px;top:5px;margin:0;height:17px;padding:0 6px;background:rgba(10,10,12,.88)}
.sc-dhead .pcs{margin-left:auto;margin-right:6px}
/* сравнение сборок */
.sc-cmp{margin-top:10px;padding:12px 14px;border-radius:var(--rs);background:var(--panel-2);border:1px solid var(--edge-soft)}
.sc-cmph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sc-cmph b{font-size:14px}
.sc-cmph select{flex:1;min-width:0;max-width:340px}
.sc-cmpt{overflow-x:auto}
.sc-cmp table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.sc-cmp th,.sc-cmp td{padding:6px 8px;border-top:1px solid rgba(255,255,255,.04);text-align:right;white-space:nowrap}
.sc-cmp thead th{border-top:none;font-size:11.5px;color:var(--dim);font-weight:600}
.sc-cmp tbody th{text-align:left;font-weight:400;color:var(--muted)}
.sc-cmp tr.hl th{color:var(--gold-hot)}
.sc-cmp tr.sep th,.sc-cmp tr.sep td{border-top:1px solid rgba(255,255,255,.12)}
.sc-cmp tr.txt td{white-space:normal;text-align:left;font-size:12px;color:var(--muted)}
.sc-cmp td.up{color:#7fd88f;font-family:var(--display)}
.sc-cmp td.dn{color:#ff8f7a;font-family:var(--display)}
.sc-shared{color:var(--gold)}

/* ── планировщик прокачки ── */
.colmode{width:max-content;margin:18px 0 0}
.colcard .sk{font-size:11px;color:var(--muted);min-height:14px;letter-spacing:.02em}
.colskills{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.colsk{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.colsk span{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 8px;background:var(--panel-2);border:1px solid var(--edge-soft);border-radius:var(--rs)}
.colsk b{font-size:17px;color:var(--gold-hot)}
.colsk small{font-size:10.5px;color:var(--dim);text-align:center;line-height:1.2}
#planView{margin-top:16px}
.pltop{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pladd,.plph{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pladd input{flex:1 1 260px;min-width:0}
.plph input{flex:1 1 180px;min-width:0}
input.bad{outline:2px solid var(--crimson)}
.pltotal{margin-bottom:14px;padding-bottom:14px}
.plth{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.plitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.pli{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 6px;background:var(--panel-2);border:1px solid var(--edge-soft);border-radius:var(--rs);min-width:0}
.pli i{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--raise);font-style:normal}
.pli i span{font-family:var(--display);font-weight:600;font-size:20px;color:var(--muted)}
.pli i img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pli.r2 i{background:linear-gradient(160deg,#2b4d3a,#1c2a22)}
.pli.r3 i{background:linear-gradient(160deg,#28456b,#1a2433)}
.pli.r4 i{background:linear-gradient(160deg,#4d2f6e,#251a33)}
.pli.r5 i{background:linear-gradient(160deg,#7a5a24,#33270f)}
.pli.unk i{outline:1px dashed var(--dim)}
.pli b{font-size:14px}
.pli small{font-size:10px;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;align-items:start}
.plc{background:var(--panel);border:1px solid var(--edge-soft);border-radius:var(--r);padding:14px;min-width:0}
.plc.top{border-color:rgba(240,194,100,.2)}
.plc.off{opacity:.6}
.plh{display:flex;align-items:center;gap:10px}
.plh .colpic{width:46px;height:46px}
.plh .colpic span{font-size:20px}
.pln{flex:1;min-width:0;display:flex;flex-direction:column}
.pln b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pln small{font-size:11.5px;color:var(--dim)}
.plon{font-size:12px;margin:0;white-space:nowrap}
.pldel{padding:5px 9px}
.plc.confirm .pldel{color:var(--crimson);border-color:var(--crimson-deep)}
.plbind{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0;padding:8px 10px;border:1px dashed var(--edge);border-radius:var(--rs)}
.plbind select{flex:1 1 160px;min-width:0}
.plrows{display:flex;flex-direction:column;gap:5px;margin:12px 0 4px}
.plr{display:flex;align-items:center;gap:6px;min-width:0}
.plr>span{flex:1 1 auto;font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plr select{padding:4px 6px;font-size:12.5px;min-width:58px}
.plr>i{font-style:normal;color:var(--dim);font-size:12px}
.plr .synccheck{margin:0;font-size:12px;white-space:nowrap}
.plw input{flex:0 1 210px;min-width:0;padding:5px 8px;font-size:12.5px}
.plw button{padding:4px 8px}
.plmat{margin-top:8px;border-top:1px solid var(--edge-soft);padding-top:8px}
.plmat summary{cursor:pointer;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.plmat summary small{color:var(--dim)}
.plsrc{margin:8px 0 0;font-size:11.5px}
@media (max-width:420px){ .plgrid{grid-template-columns:1fr} .plitems{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))} .pli i{width:56px;height:56px} }
/* редкость материалов ZZZ: зелёный, синий, пурпурный, оранжевый — как в игре */
.pli.zr1 i,.pli.zr2 i,.pli.zr3 i,.pli.zr4 i{background:#23232b;border-bottom:4px solid var(--zc)}
.pli.zr1{--zc:#7fae8f}
.pli.zr2{--zc:#1fa7ff}
.pli.zr3{--zc:#d61bff}
.pli.zr4{--zc:#ff9e1a}
.pli.zr0 i{border-bottom:4px solid #6b6b74}
/* хватает / не хватает */
.pli.ok{border-color:rgba(120,200,140,.28)}
.pli.ok b{color:#9fe0b0}
.pli.lack{border-color:rgba(224,87,111,.45);background:linear-gradient(180deg,rgba(224,87,111,.1),var(--panel-2))}
.pli em{font-style:normal;font-size:10.5px;color:var(--crimson);font-family:var(--display);line-height:1.1}
.plst{display:inline-block;width:max-content;margin-top:3px;font-size:10.5px;padding:1px 7px;border-radius:999px}
.plst.ok{background:rgba(120,200,140,.14);color:#9fe0b0}
.plst.bad{background:rgba(224,87,111,.16);color:#ff9aac}
.plst.unk{background:rgba(255,255,255,.07);color:var(--muted)}
.plth .plst{margin:0}
.plup{padding:5px 9px}
.plbar{margin-top:18px}
/* инвентарь */
.plinvtop{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.plinvtools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.plinv{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.plinvi{cursor:text}
.plinvi input{width:100%;padding:4px 4px;font-size:13px;text-align:center;font-family:var(--display);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.plinvi input::-webkit-outer-spin-button,.plinvi input::-webkit-inner-spin-button,#plItemAmt::-webkit-outer-spin-button,#plItemAmt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pli.pick{cursor:pointer;transition:border-color .15s,transform .15s}
.pli.pick:hover{border-color:var(--edge);transform:translateY(-1px)}
.plitemhead{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.plitemhead .pli{padding:0;background:none;border:none}
.plitemhead .pli i{width:64px;height:64px}
#plItemAmt{width:100%;font-size:18px;text-align:center;font-family:var(--display);-moz-appearance:textfield;appearance:textfield;margin-bottom:6px}
.lackt{color:#ff9aac}.okt{color:#9fe0b0}
.plinvi em{color:var(--muted)}
.plinvi.lack em{color:var(--crimson)}
.plinvi.ok em{color:#9fe0b0}
.plnone{grid-column:1/-1;margin:0}
.plitemsheet .row button{white-space:nowrap;padding:11px 8px}