:root{--bg:#0b0b0b;--panel:#111;--panel2:#161616;--line:#232323;--text:#e8e8e8;--dim:#8a8a8a;--accent:#c6f432;--accentDim:#23301a}
*{box-sizing:border-box}
body{margin:0;height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:14px system-ui,"Segoe UI",sans-serif;overflow:hidden}
header{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.logo{color:var(--accent);font-size:16px}.crumb{color:#444}.sp{flex:1}
#status{color:#4ade80;font-size:12px}#status::before{content:"●";margin-right:6px}
button{background:#151515;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:13px}
button:hover{border-color:#444}button.primary{background:var(--accent);color:#000;border:0;font-weight:600}
button.on{background:#262626;border-color:#3a3a3a}
main{flex:1;display:grid;grid-template-columns:230px 260px 1fr 320px;min-height:0}
nav,section,aside{background:var(--panel);border-right:1px solid var(--line);padding:10px;overflow:auto}
aside{border-right:0;border-left:1px solid var(--line);padding:0}
nav small{color:var(--dim);display:block;margin:6px 8px 10px;font-size:11px;letter-spacing:.06em}
.cat{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;cursor:pointer;color:#bbb}
.cat .ic{width:18px;text-align:center;color:#888}.cat .nm{flex:1}.cat .n{color:#666;font-size:12px}
.cat:hover{background:#1a1a1a}.cat.on{background:var(--accentDim);color:var(--accent)}.cat.on .ic,.cat.on .n{color:var(--accent)}
.gridHead{display:flex;gap:8px;align-items:baseline;margin:4px 2px 12px}.gridHead span{color:var(--dim);font-size:12px}
#cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{border:1px solid var(--line);border-radius:12px;padding:6px;cursor:pointer;background:var(--panel2)}
.card:hover{border-color:#3a3a3a}.card.on{border-color:var(--accent);background:#141a0c}
.card b{display:block;font-size:13px;margin:6px 4px 0}.card small{color:var(--dim);display:block;margin:0 4px 4px;font-size:12px}
.thumb{position:relative;aspect-ratio:1;border-radius:8px;background:radial-gradient(circle at 50% 40%,#3a3a3a,#1a1a1a 75%);background-size:cover;background-position:center;background-repeat:no-repeat}
.onped{position:absolute;top:6px;left:6px;background:#1d2414;color:var(--accent);font-size:11px;padding:2px 7px;border-radius:99px}

#viewWrap{position:relative;min-width:0;display:flex;flex-direction:column;border:1px solid var(--accent);border-width:0 1px}
#toolbar{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;z-index:2;pointer-events:none}
#toolbar>*{pointer-events:auto}#toolbar button{padding:6px 10px;border-radius:8px;background:#151515cc}
.seg{display:flex;background:#151515cc;border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{border:0;background:none;padding:5px 10px}.seg button.on{background:#2a2a2a}
#loading{color:var(--accent);font-size:12px;align-self:center}
#view{flex:1;min-height:0}#view canvas{display:block}
#empty{position:absolute;inset:auto 0 40%;text-align:center;color:var(--dim);pointer-events:none}

.dHead{padding:14px;border-bottom:1px solid var(--line)}
.dHead h3{margin:0 0 6px;font-size:16px}
.tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:#bbb}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;background:#12301f;color:#4ade80}
.badge.med{background:#33290f;color:#facc15}.badge.big{background:#33130f;color:#f87171}
button.wide{width:100%}
.variantsHead{padding:12px 14px 6px;color:#bbb;font-size:13px}
#variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;padding:0 14px 14px;border-bottom:1px solid var(--line)}
.var{position:relative;border:1px solid var(--line);border-radius:10px;padding:4px;cursor:pointer;background:var(--panel2);text-align:center}
.var.on{border-color:var(--accent)}.var canvas{width:100%;aspect-ratio:1;border-radius:6px;background:#262626}
.var .vn{position:absolute;left:8px;top:58px;background:#000c;font-size:11px;padding:0 5px;border-radius:4px}
.var small{display:block;color:var(--dim);font:10px ui-monospace,monospace;word-break:break-all;margin-top:2px}
.sec{border-bottom:1px solid var(--line)}
.secHead{display:flex;justify-content:space-between;padding:12px 14px;cursor:pointer;font-weight:500}
.secHead span{color:var(--dim);transition:transform .15s}.sec.open .secHead span{transform:rotate(90deg)}
.secBody{padding:0 14px 12px}.sec:not(.open) .secBody{display:none}
.kv{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}.kv span{color:var(--dim)}
.kv.sub{padding-left:12px}.kv code{text-align:right;word-break:break-all}
code{color:#bbb;font:12px ui-monospace,monospace}code.link{cursor:pointer;text-decoration:underline dotted}
.dim{color:var(--dim)}p{margin:6px 0}
#detailBody>p.dim{padding:14px}

.overlay{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:20}
.ovBox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;max-width:90vw}
.ovHead{display:flex;gap:10px;align-items:center;margin-bottom:10px}.ovHead button{margin-left:auto}
.ovBox canvas{max-width:80vw;max-height:75vh;background:repeating-conic-gradient(#1a1a1a 0 25%,#222 0 50%) 0 0/24px 24px;border-radius:8px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1b1b1b;border:1px solid #333;padding:10px 16px;border-radius:10px;z-index:30}

#start{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:10}
#start .box{text-align:center;width:min(640px,90vw)}
#start h1{color:var(--accent);margin:0 0 6px;font-size:34px}
#start p{color:var(--dim);margin:0 0 24px}
#startChoices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
button.big{padding:34px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:18px}
button.big:hover{border-color:var(--accent)}button.big small{display:block;color:var(--dim);margin-top:8px;font-size:13px}
#startNew input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#161616;color:var(--text);font-size:16px}
#startNew .row{display:flex;gap:10px;justify-content:center;margin-top:14px}
[hidden]{display:none!important}

/* ---------- Lägg till plagg ---------- */
.gridHead{align-items:center}
button.icon{padding:2px 9px;border-radius:8px;font-size:15px}
.addBox{width:min(620px,92vw);max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #000a}
.overlay.drop .addBox{border-color:var(--accent);box-shadow:0 0 0 3px #c6f43233}
.addHead{display:flex;align-items:center;padding:18px 20px 10px}.addHead b{font-size:17px}
.addHead .x{margin-left:auto;border:0;background:none;font-size:16px}
.tabs{display:flex;gap:4px;margin:0 20px;padding:4px;border:1px solid var(--line);border-radius:12px}
.tabs button{border:1px solid transparent;background:none;border-radius:9px;padding:7px 12px}
.tabs button.on{border-color:var(--accent);font-weight:600}
.addBody{padding:16px 20px;border-bottom:1px solid var(--line)}.addBody p{color:#aaa;line-height:1.5;margin:0 0 14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end;margin-top:12px}
.review{padding:0 20px 18px}.review:empty{display:none}.review>p{margin-top:14px}
.revHead{margin:14px 0 8px;color:#bbb}
.revList{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.revRow{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer}
.revRow.bad{border-color:#7a3a1a}
.rthumb{width:48px;height:48px;border-radius:8px;flex:none;background:#262626 center/cover no-repeat}
.rname{flex:1;min-width:0}.rname b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rname small{color:var(--dim);font-size:12px}
select{background:#151515;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px}
button:disabled{opacity:.45;cursor:default}
.err{color:#f87171}
.edited,.new{position:absolute;bottom:6px;right:6px;font-size:10px;padding:2px 6px;border-radius:99px;background:#33290f;color:#facc15}
.new{right:auto;left:6px;background:#12301f;color:#4ade80}

/* ---------- Passform ---------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:10px}
.tools button{border-radius:8px;padding:7px 4px;font-size:12px}
.tools button.on{background:var(--accentDim);border-color:var(--accent);color:var(--accent)}
.brush{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:10px;background:#141414}
.seg.wide{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:6px}.seg.wide button{font-size:12px;padding:5px 2px}
.sl{display:grid;grid-template-columns:auto 1fr 58px;gap:8px;align-items:center;font-size:12px;color:var(--dim);margin:6px 0}
.sl input{width:100%;accent-color:var(--accent)}.sl code{text-align:right}
.chk{display:flex;gap:6px;align-items:center;font-size:12px;color:#bbb;margin:6px 0}
.chk input{accent-color:var(--accent)}
.hint{font-size:11px;color:#777;line-height:1.4}
.xyz{display:grid;grid-template-columns:62px 1fr 1fr 1fr 22px;gap:4px;align-items:center;margin:5px 0;font-size:12px}
.xyz span{color:var(--dim)}.xyz em{color:#666;font-style:normal;font-size:11px}
.xyz label{display:flex;align-items:center;background:#151515;border:1px solid var(--line);border-radius:7px;padding:0 0 0 6px}
.xyz i{font-style:normal;font-size:10px;color:#777}
.xyz input{width:100%;min-width:0;background:none;border:0;color:var(--text);padding:5px 4px;font:12px ui-monospace,monospace}
.xyz input:focus{outline:none}.xyz label:focus-within{border-color:var(--accent)}
#view.sculpting canvas{cursor:crosshair}
.revHead.row .chk{margin:0}
.why{font-size:12px;margin-right:6px}

/* ---------- Export ---------- */
.field{display:block;margin:0 0 14px}.field>span{display:block;color:#bbb;font-size:12px;margin-bottom:6px}
.field input:not([type]),.field input[type=text]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#161616;color:var(--text);font:14px ui-monospace,monospace}
.field input:focus{outline:none;border-color:var(--accent)}
code.path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#151515;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.exInfo{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#141414;margin-bottom:6px}
.exDone{margin:16px 0 4px;font-size:16px;color:var(--accent)}
.warn{color:#facc15;font-size:12px;margin:3px 0}
pre.code{background:#151515;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:13px ui-monospace,monospace;color:var(--accent);margin:6px 0}
#exResult .kv{padding:2px 0}

.rname small.rig{display:block;font-size:11px}.rig.same{color:#4ade80}.rig.rig{color:var(--accent)}.rig.none{color:#888}
.rigInfo{margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#141414;color:#bbb;font-size:12px;line-height:1.5}

/* ---------- Kropp ---------- */
.bodyRow{display:flex;align-items:baseline;margin:6px 0 8px}.bodyRow b{font-weight:600}.bodyRow code{margin-left:auto;color:#ddd;font-size:13px}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.seg3.four{grid-template-columns:repeat(4,1fr)}
.seg3 button{border:0;background:none;border-radius:7px;padding:6px 4px}.seg3 button.on{background:#2a2a2a;color:#fff;font-weight:600}
.rng{width:100%;accent-color:var(--accent);margin:0 0 4px}
.rngLbl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:10px}

/* ---------- Inloggning ---------- */
body.authPage{overflow:auto;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,#1a2410 0,var(--bg) 60%)}
.authWrap{width:min(420px,92vw);margin:auto;padding:40px 0}
.authBrand{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:22px}
.authBrand .logo{font-size:30px;letter-spacing:-.02em}
.authCard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 20px 60px #000a}
.authTabs{margin:0 0 18px}.authTabs button{flex:1}
.field input[type=password]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#161616;color:var(--text);font:14px system-ui,"Segoe UI",sans-serif}
.authCard .field input[type=text]{font-family:system-ui,"Segoe UI",sans-serif}
.authGo{padding:11px;font-size:14px;margin-top:4px}
.small{font-size:12px;text-align:center;margin-top:12px}
.note{background:#33290f;color:#facc15;border-radius:10px;padding:8px 12px;font-size:13px}
.authCard h2{margin:6px 0 6px;font-size:19px;text-align:center}
.authCard #stText{text-align:center;margin-bottom:16px;line-height:1.45}
.statusIcon{font-size:34px;text-align:center}
.authBtns{margin-top:16px}
.authServer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:12px;flex-wrap:wrap}
.authServer form{display:flex;gap:6px;width:100%;margin-top:6px}
.authServer input{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:#161616;color:var(--text);font:12px ui-monospace,monospace}
.dot{width:8px;height:8px;border-radius:50%;background:#555;display:inline-block}.dot.ok{background:#4ade80}.dot.bad{background:#f87171}
.linkBtn{border:0;background:none;color:var(--accent);padding:0 4px;font-size:12px}
.row.end{justify-content:flex-end}

/* ---------- Konto i toppen ---------- */
.acct{position:relative}
.acctBtn{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accentDim);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:700;text-transform:uppercase}
.acctLeft{font-size:11px;color:var(--dim)}.acctLeft.low{color:#facc15}
.acctMenu{position:absolute;right:0;top:calc(100% + 6px);width:240px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:6px;z-index:30;box-shadow:0 12px 40px #000a}
.acctMenu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acctMenu .who b{display:block}.acctMenu .who small{color:var(--dim)}
.acctMenu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px}
.acctMenu button:hover{background:#222}
button.adminBtn{border-color:#3d4a1f;color:var(--accent)}

/* ---------- Adminmeny ---------- */
.admBox{width:min(1240px,96vw);height:min(820px,92vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #000a;overflow:hidden}
.admHead{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.admHead b{font-size:17px}.admHead .x{border:0;background:none;font-size:16px}
.admStats{display:flex;gap:8px;padding:12px 18px 0}
.stat{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.stat b{display:block;font-size:20px}.stat small{color:var(--dim)}.stat.on{border-color:var(--accent)}
.admTools{display:flex;gap:8px;align-items:center;padding:12px 18px}
.admTools input{flex:1;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#161616;color:var(--text);font:inherit}
.admTools input:focus,.admEdit input:focus,.admEdit textarea:focus{outline:none;border-color:var(--accent)}
.admMain{flex:1;display:grid;grid-template-columns:1fr 380px;min-height:0;border-top:1px solid var(--line)}
.admList{overflow:auto}
.admTable{width:100%;border-collapse:collapse;font-size:13px}
.admTable th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:500;color:var(--dim);font-size:12px;padding:9px 12px;border-bottom:1px solid var(--line)}
.admTable td{padding:9px 12px;border-bottom:1px solid #1b1b1b;vertical-align:middle}
.admTable tr{cursor:pointer}.admTable tbody tr:hover{background:#151515}.admTable tr.on{background:#141a0c}
.admTable td small{display:block;color:var(--dim);font-size:11px}
.st{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;white-space:nowrap}
.st.active,.st.lifetime{background:#12301f;color:#4ade80}.st.pending{background:#33290f;color:#facc15}
.st.expired{background:#2a1a12;color:#fb923c}.st.blocked{background:#33130f;color:#f87171}.st.admin{background:var(--accentDim);color:var(--accent)}
.admEdit{border-left:1px solid var(--line);overflow:auto;padding:16px 18px}
.admEdit h3{margin:0;font-size:17px}.admEdit .sub{color:var(--dim);font-size:12px;margin:2px 0 14px}
.admSec{border-top:1px solid var(--line);padding:14px 0}
.admSec>b{display:block;font-size:13px;margin-bottom:10px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.quick button{border-radius:8px;padding:7px 4px;font-size:12px}
.admEdit input,.admEdit select,.admEdit textarea{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#161616;color:var(--text);font:13px system-ui,"Segoe UI",sans-serif}
.admEdit input[type=date]{color-scheme:dark}
.admEdit textarea{resize:vertical;min-height:54px}
.admEdit .row{display:flex;gap:6px;align-items:center}.admEdit .row>input{flex:1}
.admEdit label.lbl{display:block;color:var(--dim);font-size:12px;margin:8px 0 4px}
.big2{font-size:15px;margin:2px 0 8px}
.danger{color:#f87171;border-color:#4a1f1f}.danger.sure{background:#7f1d1d;color:#fff}
.admMsg{font-size:12px;margin-top:6px;min-height:16px}.admMsg.ok{color:#4ade80}.admMsg.bad{color:#f87171}
.pwShow{display:flex;gap:6px;align-items:center;background:#12301f;color:#4ade80;padding:8px 10px;border-radius:8px;margin-top:8px;font:13px ui-monospace,monospace}
.pwShow button{margin-left:auto;padding:3px 10px;font-size:12px}
.logList{font-size:12px}.logList div{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid #1b1b1b}
.logList time{color:var(--dim);white-space:nowrap;min-width:92px}.logList span{flex:1}
.admEmpty{padding:40px;text-align:center;color:var(--dim)}
.newForm{padding:14px 18px;border-top:1px solid var(--line);background:#0e0e0e}
.field select{width:100%;padding:10px 12px;border-radius:10px;background:#161616}

/* ---------- Textur och UV ---------- */
.uvOverlay{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column}
.uvHead{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
.uvHead .logo{color:var(--accent);font-size:16px}
.pill{font-size:11px;padding:2px 8px;border-radius:99px;background:#1d2414;color:var(--accent)}
#uvInfo{font-size:12px}
.uvMain{flex:1;display:grid;grid-template-columns:52px 1fr 1fr 320px;min-height:0}
.uvTools{display:flex;flex-direction:column;gap:6px;padding:10px 6px;border-right:1px solid var(--line);background:var(--panel)}
.uvTools button{width:40px;height:40px;border-radius:10px;padding:0;font-size:17px}
.uvTools button.on{background:var(--accentDim);border-color:var(--accent);color:var(--accent)}
.uvSep{height:1px;background:var(--line);margin:4px 0}
.uvPane{position:relative;min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column}
.uvLbl{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:12px;color:#bbb;border-bottom:1px solid var(--line)}
.uvPane canvas#uv2d{display:block;cursor:crosshair;touch-action:none}
.uv3d{flex:1;position:relative;min-height:0}.uv3d canvas{display:block}
.uvSide{background:var(--panel);overflow:auto}
.dzSec{border-bottom:1px solid var(--line);padding:12px 16px}
.dzSec>b{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}.dzSec>b span{color:var(--dim);font-weight:400;font-size:12px}
.dzHint{font-size:11.5px;color:var(--dim);margin:6px 2px 4px;line-height:1.4}
.dzSw{width:24px;height:24px;border-radius:6px;border:1px solid #444;display:inline-block;position:relative;overflow:hidden;cursor:pointer;flex:none}
.dzSw.small{width:30px;height:30px;border-radius:8px}.dzSw.big{width:40px;height:40px;border-radius:10px}
.dzSw input{position:absolute;inset:-4px;opacity:0;cursor:pointer;width:200%;height:200%}
.dzPal{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.dzPal i{width:20px;height:20px;border-radius:50%;display:block;cursor:pointer;border:1px solid #333}
.dzPal i:hover{transform:scale(1.15)}
.dzSl{display:grid;grid-template-columns:80px 1fr 56px;align-items:center;gap:8px;font-size:12px;color:#bbb;margin:6px 0}
.dzSl input{width:100%;accent-color:var(--accent)}.dzSl code{text-align:right;color:var(--dim);font-size:11px}
.dzTog{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.dzTog button{border-radius:8px;padding:6px 10px;font-size:12px}
.dzPrint{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0;background:#141414}
.dzPrHead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dzPrHead input{flex:1;min-width:0;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:#0e0e0e;color:var(--text);font:600 13px system-ui,"Segoe UI",sans-serif}
.dzPrGrid{display:flex;gap:6px;align-items:center;margin-bottom:4px}.dzPrGrid select{flex:1;padding:6px 8px;font-size:12px}
.uvColor{display:flex;align-items:center;gap:10px}
.uvRow{display:flex;align-items:center;gap:8px;font-size:12px;color:#bbb;margin:6px 0}
.uvObj{padding:6px 8px;border-radius:8px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uvObj:hover{background:#1a1a1a}.uvObj.on{background:#141a0c;color:var(--accent)}
button.small{padding:3px 9px;font-size:12px;border-radius:7px}
.var .editedTag{position:absolute;right:6px;top:6px;background:#1d1430;color:#c4b5fd;font-size:10px;padding:1px 6px;border-radius:99px}
.uvBtnRow{padding:0 14px 14px;border-bottom:1px solid var(--line)}
button.uvBtn{border-color:#3d4a1f;color:var(--accent)}

/* ---------- Vikter ---------- */
.wPanel{position:absolute;top:52px;left:10px;width:270px;max-height:calc(100% - 64px);overflow:auto;z-index:3;background:#111e;border:1px solid var(--line);border-radius:14px;padding:12px;backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:8px;font-size:12px}
.wHead{display:flex;align-items:center}.wHead b{font-size:14px}.wHead .x{margin-left:auto;border:0;background:none;padding:2px 6px}
.wSeg{display:grid;grid-template-columns:1fr 1fr}.wSeg button{text-align:center}
.wScale{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px}
.wScale i{flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,#0d26f2,#00bfff,#1ae64d,#ffeb1a,#ff800d,#f20d0d)}
.wPanel input[type=text]{width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:#161616;color:var(--text);font:12px ui-monospace,monospace}
.wList{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:3px}
.wBone{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;cursor:pointer;font:11.5px ui-monospace,monospace}
.wBone:hover{background:#1c1c1c}.wBone.on{background:var(--accentDim);color:var(--accent)}
.wBone span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wBone code{color:var(--dim);font-size:10.5px}
.wBone i{width:10px;height:10px;border-radius:3px;flex:none}
.wHint{color:var(--dim);font-size:11.5px;line-height:1.4;margin:0}
.wVert{border-top:1px solid var(--line);padding-top:8px}
.wW{display:grid;grid-template-columns:1fr 70px 38px;align-items:center;gap:6px;padding:3px 0;cursor:pointer;font:11px ui-monospace,monospace}
.wW em{height:8px;border-radius:4px;background:linear-gradient(90deg,#0d26f2,#ffeb1a,#f20d0d);display:block}
.wW span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wW code{text-align:right}
.wPose{border-top:1px solid var(--line);padding-top:8px}.wPose b{display:block;margin-bottom:4px;font-size:12px}
.wPanel .dzSl{display:grid;grid-template-columns:20px 1fr 40px;align-items:center;gap:8px;margin:4px 0}
.wPanel .dzSl input{accent-color:var(--accent)}
/* ---------- Ansikten ---------- */
.baseInfo{font-size:12px;color:var(--dim);margin:10px 0 6px;line-height:1.5}.baseInfo .ok{color:var(--accent);font-weight:700}
.baseInfo code{background:#1d1d1d;padding:1px 5px;border-radius:4px}
.npHead{padding:14px 16px 6px}.npHead small{display:block;color:var(--accent);font-size:10px;letter-spacing:.12em;font-weight:700}.npHead b{font-size:17px}
.npSteps{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px 10px;border-bottom:1px solid var(--line)}
.npSteps button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border:1px solid transparent;background:none;border-radius:8px;color:var(--dim)}
.npSteps button span{font-size:16px}.npSteps button small{font-size:9px;line-height:1.1;text-align:center}
.npSteps button.on{border-color:var(--accent);color:var(--text);background:var(--accentDim)}
.npBody{flex:1;overflow:auto;padding:12px 16px 20px}
.npBody h3{margin:2px 0 10px;font-size:15px}
.npHint{font-size:12px;color:var(--dim);margin:4px 0 8px}
.npSub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px;font-weight:600}
.npPar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.npPar button{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:6px;border-radius:12px}
.npPar button .npTh{grid-row:1/3;width:54px;height:54px}.npPar button small{color:var(--dim)}
.npPar button.on{border-color:var(--accent);background:var(--accentDim)}
.npGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.npCard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px}
.npCard small{font-size:10px;color:var(--dim)}
.npCard.on{border-color:var(--accent);background:var(--accentDim)}
.npTh{display:block;width:100%;aspect-ratio:1;border-radius:8px;background:radial-gradient(circle at 50% 40%,#3a3a3a,#1a1a1a 75%) center/cover no-repeat;font-style:normal}
.npTh.none{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--dim)}
.npSl{display:grid;grid-template-columns:118px 1fr 44px;gap:8px;align-items:center;font-size:12px;color:#bbb;margin:4px 0}
.npSl .rng{margin:0}.npSl code{font-size:11px;color:var(--dim);text-align:right}
.npSw{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.npSw button{width:30px;height:30px;border-radius:50%;padding:0;border:2px solid #2a2a2a}
.npSw button.on{border-color:var(--accent);box-shadow:0 0 0 2px #0008 inset}
.npSw button.npSwText{width:auto;border-radius:15px;padding:0 10px;font-size:11px;background:#1d1d1d}
.npOv{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:6px}
.npOv button{padding:2px;border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:10px}
.npOv button canvas{width:100%;height:100%;border-radius:6px}.npOv button.on{border-color:var(--accent)}
.npMissing{border:1px dashed #3a3a3a;border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55}
.npMissing code{background:#1d1d1d;padding:1px 5px;border-radius:4px}
.npFoot{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
.npFoot .sp{flex:1}
#startChoices{grid-template-columns:1fr 1fr 1fr}
.faceOv{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column}
.faceTop{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.faceTop input{width:260px;background:#161616;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;font:inherit}.faceTop input.bad{border-color:#e5484d}.faceTop .sp{flex:1}
.faceMain{flex:1;display:grid;grid-template-columns:400px 1fr;min-height:0}
.facePanel{display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.facePanel .npSteps{grid-template-columns:repeat(5,1fr)}
.faceView{position:relative;min-width:0;min-height:0}.faceView canvas{display:block}
.faceBusy{position:absolute;top:12px;right:14px;color:var(--dim);font-size:12px}
.faceLib{width:min(760px,94vw)}
.flGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px;max-height:60vh;overflow:auto}
.flCard{border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:3px;background:var(--panel2)}
.flCard i{display:block;aspect-ratio:1;border-radius:8px;background:#1a1a1a center/cover no-repeat;margin-bottom:4px}
.flCard small{color:var(--dim);font-size:11px}
.flBtns{display:flex;gap:4px;margin-top:6px}.flBtns button{padding:5px 8px;font-size:12px}.flBtns .primary{flex:1}
/* ---------- Ta bort plagg ---------- */
.card{position:relative}
.cardDel{position:absolute;top:10px;right:10px;width:28px;height:28px;padding:0;border-radius:8px;font-size:13px;background:#000a;border:1px solid #333;opacity:0;transition:opacity .15s}
.card:hover .cardDel{opacity:1}.cardDel:hover{border-color:#e5484d;background:#3a1416}
.row2{display:flex;gap:6px}.row2 .wide{flex:1}
button.danger:hover{border-color:#e5484d;color:#ff8a8d;background:#2a1213}
.toast{display:flex;align-items:center;gap:14px}
.toastBtn{padding:4px 12px;border-radius:8px;border-color:var(--accent);color:var(--accent);background:none;font-weight:600}
/* ---------- Måla vikter ---------- */
.wPaint{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px}
.wPaint .acc{color:var(--accent)}
.wOps{display:grid;grid-template-columns:1fr 1fr;gap:3px}.wOps button{font-size:11.5px;padding:5px 4px;text-align:center}
.wPaint .dzSl{grid-template-columns:52px 1fr 54px!important}
.wPaint .row{display:flex;gap:4px;flex-wrap:wrap}.wPaint .row button{font-size:11px}
/* ---------- Inbäddade texturer ---------- */
.secN{font-style:normal;font-weight:400;margin-left:6px;color:var(--dim)}
.embGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.embCard{position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--panel2);cursor:pointer;min-width:0}
.embCard canvas{width:100%;aspect-ratio:1;height:auto;border-radius:6px;background:repeating-conic-gradient(#1a1a1a 0 25%,#222 0 50%) 0 0/12px 12px}
.embCard b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.embCard small{font-size:10.5px;color:var(--dim)}
.embCard input{position:absolute;top:10px;left:10px;accent-color:#e5484d;width:16px;height:16px}
.embCard:has(input:checked:not(:disabled)){border-color:#e5484d}
.embCard.gone{opacity:.45}.embCard.gone canvas{filter:grayscale(1)}
.embCard .role{position:absolute;top:10px;right:10px;font-size:10px;padding:1px 6px;border-radius:6px;background:#000b}
.role.rD{color:#ffb347}.role.rN{color:#8ab4ff}.role.rS{color:#c9c9c9}.role.rO{color:var(--dim)}
.goneTag{font-size:10px;color:#ff8a8d}
.embBtns{display:flex;flex-direction:column;gap:6px}
/* ---------- Lägg till varianter ---------- */
.varAdd{display:flex;flex-direction:column;align-items:center;justify-content:center;border-style:dashed;min-height:110px;color:var(--dim)}
.varAdd b{font-size:26px;font-weight:400;line-height:1}.varAdd:hover{border-color:var(--accent);color:var(--accent)}
.varMenu{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel2)}
.varMenu[hidden]{display:none}.varMenu button{text-align:left}.varMenu .hint{margin:2px 0 0;font-size:11px}
.varDel{position:absolute;right:6px;bottom:22px;width:22px;height:22px;padding:0;border-radius:6px;font-size:11px;background:#000b;opacity:0;transition:opacity .15s}
.var:hover .varDel{opacity:1}.varDel:hover{border-color:#e5484d;color:#ff8a8d}
.tOk{color:#7fd17f;font-style:normal;font-size:11px;margin-left:6px;white-space:nowrap}.tBad{color:#ffb347;font-style:normal;font-size:11px;margin-left:6px;white-space:nowrap}

/* ---------- Flikar: din ped + andra peddar ---------- */
#pedTabs{display:flex;align-items:center;gap:6px;padding:6px 14px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto}
#pedTabs[hidden]{display:none}
.pedTab{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;white-space:nowrap;font-size:13px;color:#bbb}
.pedTab:hover{border-color:#3a3a3a}
.pedTab.on{border-color:var(--accent);background:var(--accentDim);color:var(--text)}
.pedTab .ic{color:var(--accent)}.pedTab.src .ic{color:#7dd3fc}
.pedTab .nm{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.pedTab em{font-style:normal;font-size:11px;background:#12301f;color:#4ade80;border-radius:99px;padding:1px 7px}
.pedTab .tabX{padding:1px 7px;font-size:11px;border-radius:6px;background:none;border-color:transparent;color:var(--dim)}
.pedTab .tabX:hover{border-color:#444;color:var(--text)}
.tabHint{color:var(--dim);font-size:12px;white-space:nowrap}

/* Välj plagg i en annan peds flik */
.pickBox{position:absolute;bottom:6px;left:6px;display:flex;align-items:center;gap:4px;background:#000b;border:1px solid #333;border-radius:99px;padding:2px 8px 2px 4px;font-size:11px;cursor:pointer}
.pickBox input{accent-color:var(--accent);margin:0;width:14px;height:14px;cursor:pointer}
.card.picked{border-color:#4ade80;box-shadow:inset 0 0 0 1px #4ade80}
.card.picked .pickBox{background:#12301f;border-color:#4ade80;color:#4ade80}
#pickBar{position:sticky;bottom:-10px;margin:12px -10px -10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--panel);border-top:1px solid var(--line)}
#pickBar .pickInfo{font-size:13px}
#pickBar button.link{background:none;border:0;padding:0 4px;color:var(--dim);text-decoration:underline;font-size:12px}
#pickBar button:disabled{opacity:.45;cursor:default}
button.picked{background:#12301f;border-color:#4ade80;color:#4ade80;font-weight:600}

/* ---------- Flytta plagg till annan kategori ---------- */
.catMove{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:12px;color:var(--dim)}
.catMove select{flex:1;padding:5px 8px}
.movedHint{margin:2px 0 0;font-size:11px;color:#facc15}
.card.dragSrc{opacity:.45}
body.dragging .cat.dropOk{outline:1px dashed #4ade8088;outline-offset:-2px}
body.dragging .cat.dropOk .n:empty::after{content:'tom';font-size:10px;color:#555}
.cat.dropHover{background:#12301f!important;color:#4ade80!important;outline:1px solid #4ade80!important}
.dropTip{color:#4ade80;font-size:12px;margin:10px 8px}