:root{
  --bg:#0a0907; --panel:#14110d; --panel2:#1c1812; --line:#3a3123; --line2:#5e4d31; --gold:#c9a45c; --gold2:#ecd394; --text:#ddd3bb; --muted:#9b907a; --dim:#6c6453;
  --magic:#8f8fff; --str:#d0593f; --dex:#79b04a; --int:#6d8ff0; --ws1:#e2705a; --ws2:#a9d46a; --bad:#e0664f;
  --sc:'Alegreya SC', Georgia, serif; --font:'Alegreya', Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px}
body{opacity:0;transition:opacity .2s}body.ready{opacity:1}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.pe{position:relative;height:calc(100dvh - var(--kult-nav-height, 0px));min-height:520px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% 40%, #12100c, #070605)}

/* header */
.pe-head{display:flex;align-items:center;gap:16px;padding:8px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1a160f,#0d0b08);position:relative;z-index:5}
.pe-brand{display:flex;align-items:center;gap:10px;min-width:0}
.pe-tile{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line2);background:#0d0b08;color:var(--gold);flex:none}
.pe-tile svg{width:18px;height:20px}
.pe-brand b{display:block;font-family:var(--sc);font-weight:700;font-size:18px;letter-spacing:.03em;color:var(--gold2);white-space:nowrap}
.pe-brand small{display:block;font-size:12px;color:var(--muted)}
.pe-whobox{display:flex;align-items:center;gap:12px}
.pe-who{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 4px;border:1px solid var(--line2);background:linear-gradient(180deg,#221c13,#120f0b);text-align:left}
.pe-who:hover{border-color:var(--gold)}
.pe-who .face{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);background:var(--art) 50% 22%/160% no-repeat #000;flex:none}
.pe-who b{display:block;font-family:var(--sc);font-size:16px;color:var(--gold2);line-height:1.1}
.pe-who small{display:block;font-size:12px;color:var(--muted)}
.pe-level{display:flex;align-items:center;gap:4px}
.pe-level small{font-family:var(--sc);color:var(--muted);margin-right:4px}
.pe-level button{width:26px;height:30px;border:1px solid var(--line2);background:#120f0b}
.pe-level input{width:52px;height:30px;text-align:center;border:1px solid var(--line2);background:#0c0a07;font-family:var(--sc);font-size:16px;color:var(--gold2)}
.pe-tabs{display:flex;gap:2px;margin-left:auto}
.pe-tab{height:36px;padding:0 18px;border:1px solid var(--line);background:#100d0a;font-family:var(--sc);font-size:16px;color:var(--muted);letter-spacing:.04em}
.pe-tab[aria-selected="true"]{color:var(--gold2);border-color:var(--gold);background:linear-gradient(180deg,#2a2216,#15110c)}
.pe-acts{display:flex;align-items:center;gap:6px}
.pe-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line2);background:linear-gradient(180deg,#231d14,#120f0b);font-family:var(--sc);font-size:14.5px;letter-spacing:.03em;white-space:nowrap}
.pe-btn:hover:not([aria-disabled]){border-color:var(--gold);color:var(--gold2)}
.pe-btn.gold{border-color:var(--gold);color:#1a140b;background:linear-gradient(180deg,#e5c77f,#b58e45)}
.pe-btn.gold:hover:not([aria-disabled]){color:#000;filter:brightness(1.08)}
.pe-btn[aria-disabled]{opacity:.55;cursor:default}
.pe-btn.sm{height:28px;padding:0 9px;font-size:13.5px}
.pe-btn.warn{border-color:var(--bad);color:var(--bad)}
.pe-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold2)}
.pe-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* saved builds drawer */
.pe-drawer{position:absolute;right:12px;top:62px;z-index:20;width:300px;max-height:min(520px,70vh);display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line2);background:rgba(16,13,9,.97);box-shadow:0 16px 40px #000}
.pe-dhead{display:flex;align-items:center;justify-content:space-between}
.pe-dhead b{font-family:var(--sc);font-size:17px;color:var(--gold2)}
.pe-name{height:32px;padding:0 8px;border:1px solid var(--gold);background:#0c0a07}
.pe-plist{display:flex;flex-direction:column;gap:4px;overflow:auto}
.pe-preset{text-align:left;padding:7px 9px;border:1px solid var(--line);background:#120f0b}
.pe-preset b{display:block;font-family:var(--sc);font-size:15px}
.pe-preset small{color:var(--muted);font-size:12.5px}
.pe-preset[aria-current="true"]{border-color:var(--gold)}
.pe-dacts{display:flex;gap:6px}
.pe-empty{color:var(--muted);font-size:14px;margin:4px 0}

/* main */
.pe-main{position:relative;min-height:0}
.pe-tree,.pe-skills{position:absolute;inset:0}
#app[data-view="tree"] .pe-skills,#app[data-view="skills"] .pe-tree{display:none}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}
#cv:active{cursor:grabbing}
.pe-fine{margin:0;padding:5px 14px;font-size:11.5px;color:var(--dim);border-top:1px solid #1d1912;background:#0a0907;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* passive summary (left) */
.pe-side{position:absolute;left:12px;top:12px;bottom:12px;width:290px;display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(12,10,8,.9);backdrop-filter:blur(2px);z-index:2}
.pe-stats{display:flex;flex-direction:column;min-height:0;height:100%}
.pe-shead{padding:10px 12px 6px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#221b12,#120f0b)}
.pe-shead b{display:block;font-family:var(--sc);font-size:17px;color:var(--gold2)}
.pe-shead small{color:var(--muted);font-size:12.5px}
.pe-setpick{display:flex;gap:4px;padding:8px 10px 0}
.pe-setpick button{flex:1;height:26px;border:1px solid var(--line);background:#100d0a;font-size:12.5px;color:var(--muted)}
.pe-setpick button.ws1[aria-pressed="true"]{border-color:var(--ws1);color:var(--ws1)}
.pe-setpick button.ws2[aria-pressed="true"]{border-color:var(--ws2);color:var(--ws2)}
.pe-attr{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px}
.pe-attr div{padding:5px 6px;border:1px solid var(--line);background:#100d0a;text-align:center}
.pe-attr b{display:block;font-family:var(--sc);font-size:19px}
.pe-attr small{font-size:11.5px;color:var(--muted)}
.pe-attr .a0 b{color:var(--str)}.pe-attr .a1 b{color:var(--dex)}.pe-attr .a2 b{color:var(--int)}
.pe-keys{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 6px}
.pe-keys span{padding:2px 7px;border:1px solid var(--gold);color:var(--gold2);font-family:var(--sc);font-size:13px}
.pe-slist{list-style:none;margin:0;padding:4px 12px 12px;overflow:auto;flex:1;font-size:14px;line-height:1.35;color:var(--magic)}
.pe-slist li{padding:2px 0}
.pe-slist li.empty{color:var(--muted)}

/* points panel (top right), as the game shows it */
.pe-hud{position:absolute;right:12px;top:12px;width:270px;z-index:2}
.pe-points{display:flex;flex-direction:column;gap:3px}
.pe-prow{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid #2c261c;background:linear-gradient(180deg,rgba(32,27,20,.95),rgba(14,12,9,.95));font-family:var(--sc);font-size:15.5px;color:var(--text);cursor:pointer;user-select:none}
.pe-prow:hover{border-color:var(--line2)}
.pe-prow.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,164,92,.35)}
.pe-prow b{margin-left:auto;font-size:17px;color:var(--gold2)}
.pe-prow b.neg{color:var(--bad)}
.pe-prow small{color:var(--muted);font-size:13px}
.pe-prow i{font-style:normal}
.pe-prow .plus{width:20px;text-align:center;font-size:20px;color:var(--gold2)}
.pe-prow .arrow{font-size:11px;color:var(--muted)}
.pe-prow .num{width:18px;height:20px;display:grid;place-items:center;font-family:var(--sc);font-weight:700;font-size:13px;color:#120f0b}
.pe-prow.ws1 .num{background:var(--ws1)}.pe-prow.ws2 .num{background:var(--ws2)}
.pe-prow.ws1.on{border-color:var(--ws1)}.pe-prow.ws2.on{border-color:var(--ws2)}
.pe-prow.asc u{text-decoration-color:var(--muted)}
.pe-search{display:flex;align-items:center;gap:6px;height:34px;margin-top:3px;padding:0 10px;border:1px solid var(--line2);background:rgba(10,9,7,.95)}
.pe-search span{color:var(--muted);font-size:18px}
.pe-search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-family:var(--font);font-size:15px}
.pe-search small{color:var(--gold2);font-family:var(--sc)}
.pe-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;justify-content:flex-end}

/* ascendancy window */
.pe-ascov{position:absolute;top:12px;bottom:12px;left:50%;transform:translateX(-50%);width:min(860px,calc(100% - 24px));z-index:6;display:flex;flex-direction:column;border:1px solid var(--gold);background:#070605;box-shadow:0 20px 60px #000}
.pe-aschead{display:flex;align-items:center;gap:14px;padding:8px 12px;border-bottom:1px solid var(--line2);background:linear-gradient(180deg,#241d13,#100d09)}
.pe-aschead>div:first-child{min-width:0;flex:1}
.pe-aschead b{display:block;font-family:var(--sc);font-size:19px;color:var(--gold2)}
.pe-aschead small{display:block;font-size:12.5px;color:var(--muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-ascpick{display:flex;gap:4px}
.pe-ascpts{display:flex;align-items:baseline;gap:5px;font-family:var(--sc)}
.pe-ascpts b{font-size:18px;color:var(--gold2)}
.pe-ascpts small{color:var(--muted)}
#asccv{flex:1;min-height:0;width:100%;touch-action:none;cursor:grab;display:block}
.pe-x{width:30px;height:30px;border:1px solid var(--line2);background:#120f0b;font-size:18px;line-height:1}
.pe-x:hover{border-color:var(--gold);color:var(--gold2)}

/* tooltips, as the game draws them */
.pe-tip,.pe-popup{position:fixed;z-index:60;max-width:380px;min-width:220px;border:1px solid #4a3d27;background:rgba(8,7,5,.97);box-shadow:0 10px 30px #000;pointer-events:none}
.pe-popup{pointer-events:auto;z-index:55;max-width:340px}
.pe-tth{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #4a3d27;background:linear-gradient(180deg,#2b241a,#17130e);justify-content:center;text-align:center}
.pe-tth b{font-family:var(--font);font-weight:500;font-size:19px;color:#e6dcc4;letter-spacing:.01em}
.pe-tth.nt b{color:#e8c874}.pe-tth.ks b{color:#f0a84a}
.pe-tth small{display:block;font-size:12.5px;color:var(--muted)}
.pe-tth>div{text-align:left}
.pe-ttb{padding:8px 13px 10px;font-size:15px;line-height:1.35}
.pe-ttb p{margin:2px 0;color:var(--magic);white-space:pre-line}
.pe-ttb p.dim,.pe-ttb .dim{color:var(--muted);font-size:13.5px}
.pe-ttb u{text-decoration-thickness:1px;text-underline-offset:2px}
.pe-ttb .kind{display:block;color:var(--muted);font-size:12.5px;margin-bottom:2px}
.pe-ttb .act{margin-top:7px;padding-top:6px;border-top:1px solid #2c251a;color:var(--muted);font-size:13px}
.pe-ttb .act.bad,.bad{color:var(--bad)}
.pe-ttb .ws1{color:var(--ws1)}.pe-ttb .ws2{color:var(--ws2)}
.pe-ttb ul.mc{margin:4px 0 0;padding-left:16px;color:var(--muted);font-size:13px}
.pe-ttb small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.pe-opts{display:flex;flex-direction:column;gap:4px;padding:8px}
.pe-opt{text-align:left;padding:6px 9px;border:1px solid var(--line);background:#120f0b}
.pe-opt b{display:block;font-family:var(--sc);font-size:15px;color:var(--gold2)}
.pe-opt span{display:block;color:var(--magic);font-size:14px}
.pe-opt[aria-pressed="true"]{border-color:var(--gold)}
.pe-opt:hover{border-color:var(--line2)}
.pe-popacts{display:flex;justify-content:flex-end;gap:6px;padding:0 8px 8px}
.pe-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;max-width:min(560px,calc(100% - 32px));padding:10px 16px;border:1px solid var(--gold);background:rgba(14,11,8,.97);font-size:15px;box-shadow:0 10px 30px #000}

/* gems */
.pe-gem{display:inline-block;flex:none;width:38px;height:38px;background:var(--ic) center/86% no-repeat #0c0a08;border:1px solid #3d3324}
.pe-gem.sq{border-radius:3px}
.pe-gem.rd{border-radius:50%;width:40px;height:40px;background-size:92%}
.pe-gem.big{width:54px;height:54px}
.pe-gem.c-r{box-shadow:inset 0 0 0 1px rgba(208,89,63,.35)}.pe-gem.c-g{box-shadow:inset 0 0 0 1px rgba(121,176,74,.35)}.pe-gem.c-b{box-shadow:inset 0 0 0 1px rgba(109,143,240,.35)}
.c-r{color:var(--str)}.c-g{color:var(--dex)}.c-b{color:var(--int)}.c-w{color:var(--text)}

/* skills tab */
.pe-skills{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:12px}
.pe-sklist{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;padding-right:2px}
.pe-sechead{display:flex;align-items:baseline;justify-content:space-between;padding:2px 2px 4px;border-bottom:1px solid var(--line)}
.pe-sechead b{font-family:var(--sc);font-size:17px;color:var(--gold2)}
.pe-sechead small{color:var(--muted);font-size:13px}
.pe-skrow{padding:6px 8px;border:1px solid #2e271c;background:linear-gradient(180deg,#1b1711,#100d0a);cursor:pointer}
.pe-skrow:hover{border-color:var(--line2)}
.pe-skrow.on{border-color:var(--gold);background:linear-gradient(180deg,#2a2216,#14100b)}
.pe-skrow .top{display:flex;align-items:center;gap:9px}
.pe-skrow .nm{font-family:var(--sc);font-size:16px;line-height:1.1;flex:1}
.pe-skrow .from{color:var(--gold);font-size:12px}
.pe-skrow .socks{display:flex;gap:5px;margin:6px 0 0 47px}
.sock{width:20px;height:20px;border-radius:50%;border:2px solid #5a4d36;background:#0b0907}
.sock.off{opacity:.25}
.sock.full{background:var(--ic) center/120% no-repeat #0b0907;border-color:var(--gold)}
.sock.bad{border-color:var(--bad)}
.pe-add{height:38px;border:1px dashed var(--line2);background:transparent;font-family:var(--sc);font-size:15.5px;color:var(--gold2)}
.pe-add:hover{border-style:solid;border-color:var(--gold)}
.pe-note{color:var(--muted);font-size:14px;margin:4px 0}
.pe-box{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pe-wset{display:grid;grid-template-columns:22px 1fr 1fr;gap:5px;align-items:center}
.pe-wset .num,.pe-spirit .num{width:20px;height:22px;display:grid;place-items:center;font-family:var(--sc);font-weight:700;font-size:13px;color:#120f0b;font-style:normal}
.ws1 .num{background:var(--ws1)}.ws2 .num{background:var(--ws2)}
.pe-wset select{height:30px;min-width:0;border:1px solid var(--line2);background:#0f0c09;font-size:14px}
.pe-wset select:disabled{opacity:.45}
.pe-spirit{display:grid;grid-template-columns:22px auto auto 1fr;gap:7px;align-items:center;font-family:var(--sc);font-size:15px}
.pe-spirit b{color:var(--gold2)}
.pe-spirit .bar{height:8px;border:1px solid var(--line2);background:#0c0a08}
.pe-spirit .bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a32,#e6c97f)}
.pe-spirit.over b,.pe-spirit.over .bar i{color:var(--bad);background:var(--bad)}
.pe-extra{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted)}
.pe-extra input{width:70px;height:28px;border:1px solid var(--line2);background:#0c0a07;text-align:center}
.pe-need{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px}
.pe-need small{width:100%;color:var(--muted)}
.pe-skdetail{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.pe-blank{margin:auto;text-align:center;max-width:380px}
.pe-blank b{font-family:var(--sc);font-size:20px;color:var(--gold2)}
.pe-blank p{color:var(--muted)}
.pe-gemcard{border:1px solid #4a3d27;background:rgba(8,7,5,.9)}
.pe-gemcard .pe-tth{justify-content:flex-start}
.pe-gemcard .facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:13.5px;color:var(--muted)}
.pe-gemcard .row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px}
.pe-gemcard .row .lab{font-family:var(--sc);color:var(--muted);margin-right:3px}
.pe-gemcard .row .pe-btn{margin-left:auto}
.pe-chip{height:28px;padding:0 10px;border:1px solid var(--line);background:#100d0a;font-family:var(--sc);font-size:13.5px;color:var(--muted)}
.pe-chip[aria-pressed="true"],.pe-chip.on{border-color:var(--gold);color:var(--gold2)}
.pe-chip.ws1[aria-pressed="true"]{border-color:var(--ws1);color:var(--ws1)}.pe-chip.ws2[aria-pressed="true"]{border-color:var(--ws2);color:var(--ws2)}
.pe-socks{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);background:#0e0c09}
.pe-socks .lab{font-family:var(--sc);color:var(--gold2);font-size:16px;margin-right:4px}
.pe-sock{display:flex;flex-direction:column;align-items:center;gap:3px;width:86px;padding:5px 2px;border:1px solid transparent;background:transparent}
.pe-sock:not(.full)::before{content:'';width:40px;height:40px;border-radius:50%;border:2px dashed #4f4431}
.pe-sock small{font-family:var(--sc);font-size:12.5px;color:var(--muted);text-align:center;line-height:1.1}
.pe-sock.full small{color:var(--text)}
.pe-sock.full:hover{border-color:var(--bad)}
.pe-sock.bad small{color:var(--bad)}
.pe-sockn{display:flex;align-items:center;gap:6px;margin-left:auto}
.pe-sockn small{color:var(--muted);font-size:13px}
.pe-supbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pe-supbar b{font-family:var(--sc);font-size:18px;color:var(--gold2)}
.pe-seg{display:flex}
.pe-seg button{height:28px;padding:0 11px;border:1px solid var(--line);background:#100d0a;font-family:var(--sc);font-size:13.5px;color:var(--muted);margin-left:-1px}
.pe-seg button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold2);position:relative}
.pe-tiers{display:flex;flex-direction:column;gap:4px}
.pe-tier{display:grid;grid-template-columns:64px 1fr;gap:6px;padding:6px;border:1px solid #2a2419;background:linear-gradient(180deg,#191510,#0f0d0a)}
.pe-roman{align-self:start;justify-self:start;padding:1px 8px;background:linear-gradient(180deg,#d9b76d,#9c7738);color:#1a140b;font-family:var(--sc);font-weight:700;font-size:13px}
.pe-sups{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:4px}
.pe-sup{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px;border:1px solid transparent;background:transparent}
.pe-sup span{font-family:var(--sc);font-size:13px;line-height:1.1;text-align:center}
.pe-sup:hover{border-color:var(--line2)}
.pe-sup.on{border-color:var(--gold);background:rgba(201,164,92,.1)}
.pe-sup.no{opacity:.35}
.pe-sup.blocked{opacity:.55}
.pe-sup.blocked span{color:var(--muted)}

/* skill bar */
.pe-bar{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:5px;padding:8px 10px;border:1px solid var(--line);background:linear-gradient(180deg,#17130e,#0c0a08);overflow-x:auto}
.pe-bar .lab{font-family:var(--sc);color:var(--muted);margin-right:6px;white-space:nowrap}
.pe-key{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid #4a3d27;background:#0b0907}
.pe-key .pe-gem{width:44px;height:44px;border:0}
.pe-key small{position:absolute;right:2px;bottom:1px;font-family:var(--sc);font-size:11.5px;color:var(--gold2);text-shadow:0 0 3px #000}
.pe-key.alt{border-color:#3a3122;opacity:.9}
.pe-key:nth-of-type(9){margin-left:14px}
.pe-key.on,.pe-key:hover{border-color:var(--gold)}
.pe-barpick{position:fixed;z-index:50;bottom:96px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px));max-height:50vh;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;padding:10px;border:1px solid var(--gold);background:rgba(12,10,7,.98);box-shadow:0 16px 40px #000}
.pe-barpick b{grid-column:1/-1;font-family:var(--sc);color:var(--gold2)}
.pe-barpick button{display:flex;align-items:center;gap:7px;padding:4px 6px;border:1px solid var(--line);background:#120f0b;font-family:var(--sc);font-size:14px;text-align:left}
.pe-barpick button:hover{border-color:var(--gold)}
.pe-barpick .pe-gem{width:30px;height:30px}

/* overlays */
.pe-overlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(4,3,2,.72)}
.pe-modal{width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;border:1px solid var(--gold);background:#0c0a07;box-shadow:0 20px 60px #000}
.pe-mhead,.pe-pkhead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line2);background:linear-gradient(180deg,#241d13,#100d09)}
.pe-mhead b,.pe-pkhead b{font-family:var(--sc);font-size:20px;color:var(--gold2)}
.pe-classgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;overflow:auto}
.pe-class{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--line);background:#100d0a}
.pe-class.on{border-color:var(--gold)}
.pe-classart{position:relative;height:150px;border:1px solid var(--line2);background:var(--art) 50% 18%/cover no-repeat #000;display:flex;align-items:flex-end;padding:0}
.pe-classart b{width:100%;padding:18px 8px 6px;background:linear-gradient(180deg,transparent,#000);font-family:var(--sc);font-size:19px;color:var(--gold2);text-align:left}
.pe-classart:hover{border-color:var(--gold)}
.pe-ascs{display:flex;flex-wrap:wrap;gap:4px}
.pe-ascs .pe-chip{flex:1 1 auto}
.pe-picker .pe-modal{width:min(920px,100%);height:min(720px,100%)}
.pe-pkfilters{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.pe-pkfilters input{flex:1 1 220px;height:30px;padding:0 9px;border:1px solid var(--line2);background:#0c0a07}
.pe-pklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:5px;padding:12px 14px;overflow:auto;min-height:0}
.pe-pkgem{display:flex;align-items:center;gap:9px;padding:5px 7px;border:1px solid #2a2419;background:#110e0b;text-align:left}
.pe-pkgem:hover{border-color:var(--gold)}
.pe-pkgem .nm b{display:block;font-family:var(--sc);font-size:15px;line-height:1.1}
.pe-pkgem .nm small{color:var(--muted);font-size:12.5px}
.pe-pkgem.have{opacity:.45}

@media (max-width:1180px){
  .pe-brand div{display:none}
  .pe-side{width:250px}
  .pe-skills{grid-template-columns:290px minmax(0,1fr)}
}
@media (max-width:900px){
  .pe-head{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .pe-tabs{margin-left:0;order:3;flex:1}
  .pe-tab{flex:1;padding:0 8px}
  .pe-acts{order:4;margin-left:auto}
  .pe-side{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:auto;max-height:55%}
  .pe-stats:not(.open)>:not(.pe-shead){display:none}
  .pe-shead{cursor:pointer;position:relative;padding-right:34px}
  .pe-shead::after{content:'▴';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--gold2)}
  .pe-stats.open .pe-shead::after{content:'▾'}
  .pe-hud{right:8px;top:8px;width:230px}
  .pe-prow{height:30px;font-size:14px}
  .pe-tools{display:none}
  .pe-skills{grid-template-columns:1fr;grid-template-rows:max-content max-content max-content;overflow:auto;padding:8px}
  .pe-sklist,.pe-skdetail{overflow:visible;min-height:auto}
  .pe-bar{position:sticky;bottom:-8px;z-index:3}
  .pe-classgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pe-ascov{left:8px;right:8px;width:auto;transform:none;top:8px;bottom:8px}
  .pe-aschead{flex-wrap:wrap}
  .pe-fine{white-space:normal}
}
@media (max-width:560px){
  .pe-brand{display:none}
  .pe-head{gap:6px;padding:6px 8px}
  .pe-whobox{width:100%}
  .pe-who{flex:1;height:38px}
  .pe-who .face{width:30px;height:30px}
  .pe-tab{height:32px;font-size:15px}
  .pe-btn{height:32px;padding:0 9px}
  .pe-fine{font-size:10px;padding:3px 8px;max-height:3.6em;overflow:hidden}
  .pe-hud{width:200px}
  .pe-search{display:none}
  .pe-sock{width:70px}
}