/* ---- planner ---- */
.plhome h1{margin-bottom:6px}
.plnew{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 10px;color:var(--mute);font-size:14.5px}
.chip2{display:inline-block;padding:6px 12px;border:1px solid rgba(226,179,90,.35);background:rgba(0,0,0,.45);color:var(--gold2);text-decoration:none;font-family:"DR Frank Bold",sans-serif;font-size:13px;letter-spacing:.05em}
.chip2:hover{border-color:var(--gold);background:rgba(248,183,0,.12)}
.plans .pllist{max-height:560px;overflow:auto;padding:6px 0}
.plcard{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:10px 16px;text-decoration:none;color:var(--text)}
.plcard:hover{background:rgba(255,214,160,.06)}
.plcard .plic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a2a14,#0a0705 70%);box-shadow:0 0 0 2px #7a5a2a;overflow:hidden}
.plcard .plic img{width:78%;height:78%;object-fit:contain}.plcard .plic svg{width:55%;color:var(--gold2)}
.plcard b{display:block;font-family:"DR Frank Bold",sans-serif;font-weight:400;color:var(--gold2);font-size:16px}
.plcard small{display:block;color:var(--mute);font-size:12.5px}.plcard small.dim{color:var(--dim)}
.pltitle{display:block;width:100%;max-width:640px;margin:0;padding:2px 6px 2px 0;border:0;border-bottom:1px dashed rgba(226,179,90,.35);background:transparent;font-family:"DR Frank Bold",sans-serif;font-size:clamp(28px,3.4vw,46px);line-height:1.12;color:#F7D98E;text-shadow:0 2px 0 #000,0 3px 12px rgba(0,0,0,.6)}
.pltitle:focus{outline:none;border-bottom-color:var(--gold)}
.plhead .cls a{color:var(--gold2)}
.fact .fd{display:block;margin-top:4px;font-family:"DR Frank Bold",sans-serif;font-size:12.5px}
.fact .fd em{font-style:normal}
.pgs{cursor:pointer;position:relative}
.pgs:disabled{cursor:default;opacity:.7}
.pgs.empty .gn::after{content:" \00b7  add";color:var(--gold);font-size:12.5px}
.pgs.chg .gi::after{content:"";position:absolute;right:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #000,0 0 10px rgba(248,183,0,.8)}
.pgs:hover .gi{box-shadow:0 0 0 1px #000,0 0 0 2px var(--gold)!important}
/* summary cards */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.scard{padding:10px 12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,214,160,.08)}
.scard .sk{font-family:"DR Frank Bold",sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.scard .sv{font-family:"DR Frank Bold",sans-serif;font-size:24px;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums}
.scard .sd{font-size:12px;color:var(--dim)}.scard .sd b{font-family:"DR Frank Bold",sans-serif;font-weight:400;margin-right:4px}
.scard.up{border-color:rgba(124,240,138,.3);background:linear-gradient(rgba(124,240,138,.07),rgba(0,0,0,.28))}.scard.up .sd b{color:#7CF08A}
.scard.down{border-color:rgba(255,138,122,.3);background:linear-gradient(rgba(255,138,122,.07),rgba(0,0,0,.28))}.scard.down .sd b{color:#ff8a7a}
.gchg{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,214,160,.1);display:grid;gap:6px}
.gchg li{display:grid;grid-template-columns:90px minmax(0,1fr) 22px minmax(0,1fr);gap:10px;align-items:baseline;font-size:14.5px}
.gchg .gl2{font-family:"DR Frank Bold",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.gchg .gn{display:inline;-webkit-line-clamp:unset;font-size:14.5px}
.gchg .arr{color:var(--gold);text-align:center}
.gchg .dim{color:var(--dim)}
/* level and attributes */
.plattr .lvrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 2px 12px}
.plattr .lvrow label{font-family:"DR Frank Bold",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-size:13px}
.plattr input[type=range]{flex:1;min-width:180px;accent-color:#F8B700}
.plattr output{font-family:"DR Frank Bold",sans-serif;font-size:26px;color:var(--gold2);min-width:44px}
.plattr select,.pkcfg select{background:#0b0806;color:var(--text);border:1px solid rgba(226,179,90,.35);padding:6px 8px;font-family:"DR Frank",sans-serif;font-size:14px;max-width:100%}
.ptsbar{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-top:1px solid rgba(255,214,160,.08);color:var(--mute)}
.ptsbar b{font-family:"DR Frank Bold",sans-serif;font-weight:400;font-size:20px;color:var(--gold2)}.ptsbar b.down{color:#ff8a7a}
.linkbtn{background:none;border:0;padding:0;color:var(--gold2);text-decoration:underline;cursor:pointer;font-size:13.5px}
.arows{display:grid;gap:2px}
.arow{display:grid;grid-template-columns:34px 110px auto 1fr;gap:12px;align-items:center;padding:8px 2px;border-top:1px solid rgba(255,214,160,.06)}
.arow .ai svg{width:26px;height:26px;color:var(--gold)}
.arow .an{font-family:"DR Frank Bold",sans-serif;color:var(--text)}
.astep{display:inline-flex;align-items:center;gap:0;border:1px solid rgba(226,179,90,.35);background:#0b0806}
.astep button{width:32px;height:32px;border:0;background:rgba(255,214,160,.06);color:var(--gold2);font-size:18px;cursor:pointer;line-height:1}
.astep button:hover{background:rgba(248,183,0,.18)}
.astep input,.astep output{width:64px;text-align:center;border:0;background:transparent;color:var(--text);font-family:"DR Frank Bold",sans-serif;font-size:16px;-moz-appearance:textfield}
.astep output{width:40px;display:inline-block}
.astep input::-webkit-inner-spin-button{-webkit-appearance:none}
.arow .at b{font-family:"DR Frank Bold",sans-serif;font-weight:400;font-size:22px;color:var(--text)}
.arow .at em{font-style:normal;font-family:"DR Frank Bold",sans-serif;font-size:14px;margin-left:8px}
.arow .at small{display:block;color:var(--dim);font-size:12px}
/* planned tray */
.tk.add{background:rgba(0,0,0,.35);color:rgba(255,214,160,.5);font-size:clamp(14px,2vw,24px);font-family:"DR Frank Bold",sans-serif;cursor:pointer}
.tk.add:hover{color:var(--gold2);background:rgba(248,183,0,.12)}
.slist{margin-top:14px;display:grid;gap:2px}
.srow{--ec:var(--phys);display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:7px 2px;border-top:1px solid rgba(255,214,160,.06)}
.srow .hi{width:40px;height:40px}
.srow .hn b{display:block;font-weight:600;color:#F6E7C8}.srow .hn small{color:var(--dim);font-size:12.5px}
.srow .mx{color:var(--dim);font-size:12.5px;min-width:90px}
/* dialogs */
body.dlgopen{overflow:hidden}
.dlg{position:fixed;inset:0;z-index:70;background:rgba(4,3,2,.78);display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.dlgbox{width:min(1100px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;border:24px solid transparent;border-image:url(assets/ui/panel.webp) 46 fill stretch;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.dlghead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 10px;border-bottom:1px solid rgba(255,214,160,.12)}
.dlghead h2{margin:0;font-family:"DR Frank Bold",sans-serif;font-weight:400;font-size:22px;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(#FBE3A6,#D7A24A 55%,#8C5A1C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000)}
.dlgx{background:none;border:0;color:var(--mute);font-size:30px;line-height:1;cursor:pointer;padding:0 4px}.dlgx:hover{color:var(--gold2)}
.dlgbody{flex:1;min-height:0;overflow:hidden;padding-top:12px}
.pk{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:18px;height:100%;min-height:0}
.pkl{display:flex;flex-direction:column;min-height:0;max-height:calc(min(88vh,860px) - 120px)}
.pks{width:100%;padding:9px 12px;background:#0b0806;border:1px solid rgba(226,179,90,.35);color:var(--text);font-family:"DR Frank",sans-serif;font-size:15px}
.pks:focus{outline:none;border-color:var(--gold)}
.pkf{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.pkf button{padding:4px 10px;background:rgba(0,0,0,.4);border:1px solid rgba(226,179,90,.25);color:var(--mute);font-family:"DR Frank Bold",sans-serif;font-size:12.5px;letter-spacing:.05em;cursor:pointer}
.pkf button[aria-pressed="true"]{background:rgba(248,183,0,.18);border-color:var(--gold);color:var(--gold2)}
.pklist{flex:1;min-height:0;overflow:auto;border-top:1px solid rgba(255,214,160,.08)}
.pki{--qc:var(--q7);display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:6px 4px;background:none;border:0;border-bottom:1px solid rgba(255,214,160,.05);text-align:left;cursor:pointer;color:var(--text)}
.pki:hover{background:rgba(255,214,160,.06)}.pki.on{background:rgba(248,183,0,.12)}
.pki:disabled{opacity:.45;cursor:default}.pki.locked .gn{opacity:.6}
.pki .gi{width:44px;height:44px;padding:5px}.pki .gi svg{width:22px;height:22px}
.pki .gn{font-size:14.5px;-webkit-line-clamp:1}
.pki.sk .gn{color:#F6E7C8}
.pki small{display:block;color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pki.none .gn,.pki.keep small{color:var(--mute)}
.pkr{min-height:0;overflow:auto;max-height:calc(min(88vh,860px) - 120px);padding-right:4px}
.pkcfg{display:grid;gap:10px;margin-bottom:12px}
.pkg{display:grid;gap:4px}
.pgl{font-family:"DR Frank Bold",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pgl small{color:var(--dim);letter-spacing:.04em;text-transform:none;font-family:"DR Frank",sans-serif}
.pgv{color:#1EFF00;font-size:14.5px}
.tiers{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tiers button{padding:5px 10px;background:rgba(0,0,0,.45);border:1px solid rgba(226,179,90,.25);color:var(--text);font-family:"DR Frank Bold",sans-serif;font-size:13px;cursor:pointer}
.tiers button[aria-pressed="true"]{border-color:var(--gold);background:rgba(248,183,0,.16)}
.tiers button .tier{margin:0 2px 0 0}
.tiers input{width:70px;padding:5px 6px;background:#0b0806;border:1px solid rgba(226,179,90,.25);color:var(--text);font-family:"DR Frank Bold",sans-serif}
.pkprev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:14px;align-items:start}
.pkprev .pkeq{grid-column:1/-1;justify-self:start;height:42px;padding:0 22px;font-size:15px}
.tip.inl{position:static;display:block;width:auto;pointer-events:auto}
.pkdiff h3{margin:0 0 6px;font-family:"DR Frank Bold",sans-serif;font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pkdiff ul{list-style:none;margin:0;padding:0;font-size:14.5px}.pkdiff li{padding:2px 0}
.skprev{display:grid;grid-template-columns:64px 1fr;gap:16px}
.skprev .si{--ec:var(--phys);width:64px;height:64px;border:0;background:url(assets/ui/slot.png) 0 0/100% 100% no-repeat,#070504;padding:5px;display:grid;place-items:center;color:var(--ec)}
.skprev h3{margin:0;font-family:"DR Frank Bold",sans-serif;font-weight:400;font-size:24px;color:var(--gold2)}
.skprev .pkg{margin:10px 0}
.skprev .skdesc{margin-bottom:14px}
.skprev .pkeq{height:42px;padding:0 20px}
@media (max-width:820px){
  .dlg{padding:0;place-items:stretch}.dlgbox{max-height:100vh;height:100vh;border-width:16px}
  .pk{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto}
  .pkl{max-height:42vh}.pkr{max-height:none;overflow:visible}
  .pkprev{grid-template-columns:1fr}
  .arow{grid-template-columns:28px 1fr auto;row-gap:4px}.arow .at{grid-column:1/-1}
  .srow{grid-template-columns:40px minmax(0,1fr) auto;row-gap:4px}.srow .mx{display:none}
  .gchg li{grid-template-columns:1fr;gap:0}.gchg .arr{text-align:left}
}
.plhead .hact{position:relative}
.sharebox{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(440px,86vw);padding:12px 14px;background:#0d0a07;border:1px solid rgba(226,179,90,.45);box-shadow:0 18px 40px rgba(0,0,0,.8)}
.sharebox label{display:block;font-family:"DR Frank Bold",sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.sbrow{display:flex;gap:8px}.sbrow input{flex:1;min-width:0;padding:6px 8px;background:#050403;border:1px solid rgba(226,179,90,.3);color:var(--text);font-size:13px}
.sharebox small{display:block;margin-top:6px;color:var(--dim);font-size:12px}
.plattr select,.pkcfg select{appearance:none;-webkit-appearance:none;padding-right:30px;background:#0b0806 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E2B35A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center/12px 8px;cursor:pointer}
.pkcfg select:hover,.plattr select:hover{border-color:var(--gold)}
.tabs .fresh .linkbtn{font-size:13px;text-shadow:0 1px 2px #000}
.plcard{position:relative}
.pltitle{field-sizing:content;min-width:8ch;max-width:100%;font-size:clamp(26px,2.8vw,40px)}
.plhead .who{flex:0 1 auto}
.pgs.empty:disabled .gn::after{content:none}