:root{--bg:#0b0a0c;--panel:#111014;--panel2:#0f0d10;--line:#1c191d;--line2:#2a262c;--line3:#4a444c;--ink:#efe9e4;--muted:#9b909c;--dim:#7d7280;--faint:#6a6068;--lilac:#c9b8d6;--focus:#8d76a0;--ok:#8fd9ad;--warn:#e6c08a;--bad:#f0a1ad;--display:Anton,Impact,sans-serif;--okLine:#2e5a41;--badLine:#3a2a30;--badLine2:#5a3540;--warnLine:#5a4a2f;--warnBg:#15110c;--lilacLine:#4a3d55;--stripe1:#17151a;--stripe2:#121015;--ph:#4a424c;--inkHover:#fff;--bgRgb:11,10,12;--panelRgb:17,16,20;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}
button:disabled{opacity:.3;cursor:default}
input{font:inherit}
input::placeholder{color:var(--faint)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
@keyframes lcspin{to{transform:rotate(360deg)}}
@keyframes lcrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:lcrise .5s ease}

.page{min-height:100vh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:rgba(var(--bgRgb),.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px clamp(16px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandline{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand{font-family:var(--display);font-size:clamp(24px,5vw,32px);letter-spacing:.06em;line-height:1;text-transform:uppercase}
.brandsub{font-size:9px;letter-spacing:.3em;color:var(--dim);font-weight:600;white-space:nowrap}
.status{--c:var(--dim);display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--c)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.status.online{--c:var(--ok)}.status.offline{--c:var(--warn)}

.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:24px clamp(16px,4vw,40px) 120px;display:flex;flex-direction:column;gap:28px}
.eyebrow{font-size:10px;letter-spacing:.3em;color:var(--dim);font-weight:600}
.display{margin:0;font-family:var(--display);font-size:clamp(40px,9vw,72px);font-weight:400;line-height:.95;letter-spacing:.01em;text-transform:uppercase;text-wrap:pretty}
.display.sm{font-size:clamp(36px,8vw,60px);letter-spacing:0}
.accent{color:var(--lilac)}
.lead{margin:0;color:var(--muted);font-size:14px;line-height:1.65;text-wrap:pretty}
.fine{margin:0;color:var(--faint);font-size:12px;line-height:1.6}
.error{margin:0;color:var(--bad);font-size:13px}.error:empty{display:none}

.connect{max-width:520px;margin:0 auto;width:100%;padding-top:clamp(8px,3vh,40px);display:flex;flex-direction:column;gap:24px}
.connect-live{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--lilacLine);border-radius:16px;background:var(--panel2)}
.connect-live .lc-mark{width:48px;height:48px;font-size:18px;flex:0 0 auto}
.connect-live-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.connect-live-text strong{font-size:14px}.connect-live-text small{font-size:12px;color:var(--muted);line-height:1.45}
.connect-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.connect-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.connect-steps li>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.connect-steps strong{font-size:13px}.connect-steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.connect-steps p b{color:var(--ink)}
.connect-steps .mark{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);font-size:11px;font-weight:700;color:var(--muted)}
.connect-steps li.ok{border-color:var(--okLine)}.connect-steps li.ok .mark{border-color:var(--ok);color:var(--ok)}
.connect-steps li.wait{border-color:var(--lilacLine)}.connect-steps li.wait .mark{border-top-color:var(--lilac);animation:lcspin 1s linear infinite}
.connect-steps li.todo{opacity:.55}
.connect-hint{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px dashed var(--line3);border-radius:12px}
.connect-hint-ic{font-size:20px;line-height:1;flex:0 0 auto}
.connect-hint>div{display:flex;flex-direction:column;gap:2px}.connect-hint strong{font-size:13px}.connect-hint p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.connect-hint b{color:var(--ink)}
.connect-head{display:flex;flex-direction:column;gap:12px}
.connect-head{display:flex;flex-direction:column;gap:12px}
.connecting{display:flex;align-items:center;gap:16px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:13px}
.connecting .lc-mark{width:44px;height:44px;font-size:16px}

.screen{display:flex;flex-direction:column;gap:22px}
.screen-head{display:flex;flex-direction:column;gap:14px}
.titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.found{font-size:10px;letter-spacing:.14em;color:var(--dim);font-weight:600;white-space:nowrap;padding-bottom:6px}
.field{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:14px 16px;min-height:48px;border-radius:12px;outline:none;font-size:15px}
.field:focus{border-color:var(--focus)}
.offline{padding:12px 14px;border:1px solid var(--warnLine);background:var(--warnBg);border-radius:12px;color:var(--warn);font-size:12px;line-height:1.5}
.note{margin:0;color:var(--dim);font-size:12px;line-height:1.6;text-wrap:pretty}
.empty{margin:0;color:var(--faint);font-size:13px;text-align:center;padding:40px 16px}

/* Chips wrap onto new lines: the SL media screen has no touch and the wheel only scrolls vertically. */
.catbar{display:flex;flex-wrap:wrap;gap:6px}
.cat{flex:0 0 auto;background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:999px;padding:8px 13px;font-size:10px;letter-spacing:.12em;font-weight:700;white-space:nowrap}
.cat:hover{border-color:var(--line3);color:var(--ink)}
.cat.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat .n{margin-left:7px;opacity:.55}
/* quick views: one segmented control, so they read as "show" and not as categories */
/* ALL · NEW · RECENT · ★ · UNWORN: a second line when it does not fit (it slid sideways - no swipe on the HUD - and with a
   bigger Text size UNWORN was cut off) */
.seg{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;border:1px solid var(--line2);border-radius:18px;padding:3px;gap:2px}
.seg:empty{display:none}
.seg .cat{border-color:transparent;padding:7px 12px}
.seg .cat.selected{border-color:var(--ink)}
.seg .cat svg.ic{margin:0}
.catlabel{align-self:center;color:var(--faint);font-size:9px;letter-spacing:.2em;font-weight:700;margin-right:2px}
.catlabel:empty{display:none}
/* SMART WEAR: a setting with a switch, set apart from the filters */
/* the two switches stay together at the right of the filter row; when they do not fit, both go to the next line */
.brandrow .switches{display:flex;gap:inherit;margin-left:auto;flex:0 0 auto}
#smartBtn{display:inline-flex;align-items:center;gap:6px}
#smartBtn .sw{position:relative;width:26px;height:14px;border-radius:999px;background:var(--line3);transition:background .2s}
#smartBtn .sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transition:transform .2s}
#smartBtn.on .sw{background:var(--lilac)}
#smartBtn.on .sw::after{transform:translateX(12px);background:var(--bg)}
#smartBtn:not(.on){color:var(--muted)}
/* MY BODY: a switch like SMART WEAR, just before it */
#bodyBtn{display:inline-flex;align-items:center;gap:6px}
#bodyBtn .sw{position:relative;width:26px;height:14px;border-radius:999px;background:var(--line3);transition:background .2s}
#bodyBtn .sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transition:transform .2s}
#bodyBtn.on .sw{background:var(--lilac)}
#bodyBtn.on .sw::after{transform:translateX(12px);background:var(--bg)}
#bodyBtn:not(.on){color:var(--muted)}
.body-note{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:var(--dim);font-size:12px;line-height:1.4}
.body-note[hidden]{display:none}
@media(max-width:560px){.brandrow{gap:5px}.brandrow .smallbtn{letter-spacing:.08em;padding:7px 9px}#smartBtn,#bodyBtn{gap:5px}}
.cat.add{color:var(--lilac);border-color:var(--lilacLine)}
.cat.more{border-style:dashed;color:var(--ink)}
.cat.add:hover{color:var(--ink);border-color:var(--lilac)}
.looklist{display:flex;flex-direction:column;gap:12px}
.look{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.look.on{border-color:var(--okLine)}
.look-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.look-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.look-thumbs{display:flex;gap:6px}
.look-photo{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel)}.look-photo img{width:100%;height:100%;object-fit:cover;display:block}.look-thumbs .thumb{width:72px;height:54px}
.thumb.missing{opacity:.3}.thumb.more{display:grid;place-items:center;font-size:12px;color:var(--muted);font-weight:700}
.look-items{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}.look-items .missing{text-decoration:line-through;opacity:.5}
.look-tools{display:flex;flex-wrap:wrap;gap:4px 16px}
.editpreview{aspect-ratio:4/3;border-radius:10px}
.edit-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.operation-card.dialog{align-items:stretch;text-align:left;gap:12px;max-height:calc(100vh - 48px);overflow-y:auto}
.titleside{display:flex;align-items:center;gap:10px;padding-bottom:4px}
.smallbtn{background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:8px 13px;font-size:10px;letter-spacing:.14em;font-weight:700;white-space:nowrap}
.smallbtn:hover{border-color:var(--line3)}.smallbtn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.selbar{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:6px;padding:10px clamp(16px,4vw,40px);background:rgba(var(--panelRgb),.97);border-top:1px solid var(--line2);backdrop-filter:blur(12px)}
.selcount{flex:1;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.tile.selectable{cursor:pointer}
body.selecting .main{padding-bottom:150px}
.tile.picked .cover{border-color:var(--lilac);box-shadow:0 0 0 2px var(--lilac) inset}
.check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:rgba(var(--bgRgb),.6);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--bg)}
.tile.picked .check{background:var(--lilac);border-color:var(--lilac)}
.picklist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto}
.pick{text-align:left;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:12px 14px;font-size:13px;font-weight:600}
.pick:hover{border-color:var(--lilac)}.pick.muted{color:var(--muted)}.pick.add{color:var(--lilac);font-size:11px;letter-spacing:.14em;font-weight:700}
.dialog strong{font-size:15px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cattools{display:flex;gap:16px;margin-top:-4px}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--dim);font-size:9px;letter-spacing:.16em;font-weight:700}
.linkbtn:hover{color:var(--ink)}.linkbtn.danger{color:var(--bad)}
.fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px;background:rgba(var(--bgRgb),.75);border:1px solid var(--line2);color:var(--muted);font-size:15px;display:grid;place-items:center}
.fav:hover{color:var(--ink)}.fav.on{color:var(--warn);border-color:var(--warnLine)}
.tile-edit{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.edit-label{font-size:9px;letter-spacing:.18em;color:var(--dim);font-weight:700}
.catpick{display:flex;flex-wrap:wrap;gap:5px}.catpick .cat{padding:6px 10px;font-size:9px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:clamp(12px,2.5vw,20px)}
/* TEXT SIZE (settings): the cards and lists drawn bigger on this screen - on a small monitor the 480-wide HUD page is small */
#grid,#lookList,#wornList{zoom:var(--tz,1)}
/* and the rows above them (filters, notes, ALL/NEW, categories) - not the search box, which floats on <body> by its measured place */
.screen-head>:not(.searchbox):not(.search-ph){zoom:var(--tz,1)}
/* and the bottom bar and the dialogs' contents (the dialog itself keeps its height on the screen and grows wider) */
#tabs,.operation-card.dialog>*{zoom:var(--tz,1)}
.tile{display:flex;flex-direction:column;gap:12px}
.cover{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--stripe1) 0 12px,var(--stripe2) 12px 24px);border:1px solid var(--line);display:grid;place-items:center;transition:border-color .25s}
.cover:hover{border-color:var(--line3)}
.tile.on .cover{border-color:var(--okLine)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-ph{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--ph)}
/* the cover's chips (NEW, WEARING, HUD) stop before the star and wrap - with a bigger Text size WEARING ran under it */
.chips{position:absolute;top:10px;left:10px;right:48px;display:flex;gap:6px;flex-wrap:wrap}
#grid.list .cover .chips{right:auto}
.chip{background:var(--bg);color:var(--ok);border:1px solid var(--okLine);border-radius:999px;padding:4px 9px;font-size:9px;letter-spacing:.16em;font-weight:700}
.chip.hud{color:var(--lilac);border-color:var(--lilacLine)}
.chip.part{color:var(--warn);border-color:var(--warnLine)}
.chip.ad{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tile.sponsored .cover{border-color:var(--line3)}
.chip.new{background:var(--lilac);color:var(--bg);border-color:var(--lilac);cursor:pointer}
.cat.newchip{border-color:var(--lilac);color:var(--lilac)}.cat.newchip.selected{background:var(--lilac);color:var(--bg)}
.brand-eyebrow{font-size:9px;letter-spacing:.2em;color:var(--dim);font-weight:700;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandrow{display:flex;gap:6px;flex-wrap:wrap}#tagDialog .catpick{max-height:46vh;overflow:auto;margin:10px 0}#tagDialog .note{margin:4px 0 0}#tagTools{display:flex;gap:14px;margin-bottom:6px}#tagTools[hidden]{display:none}.pick.selected{border-color:var(--lilac)}.pick .n{float:right;opacity:.55;font-weight:600}
.cat.muted{color:var(--dim);border-style:dashed}
.coveredit{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:9px;background:rgba(var(--bgRgb),.8);border:1px solid var(--line2);color:var(--muted);font-size:13px;display:grid;place-items:center}
.coveredit:hover{color:var(--ink);border-color:var(--line3)}
.tile-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile h3{margin:0;font-size:15px;font-weight:600;line-height:1.25;text-wrap:pretty;overflow-wrap:anywhere}
/* names take exactly two lines (longer ones end in …), so the buttons of cards side by side stay level */
.grid .tile h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.5em}
.meta{font-size:10px;letter-spacing:.18em;color:var(--faint);font-weight:600}
.tile.on .meta{color:var(--ok)}
.actions{display:grid;gap:6px}
.btn{border-radius:10px;padding:12px;min-height:44px;font-weight:700;font-size:11px;letter-spacing:.14em;border:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.btn:hover:not(:disabled){background:var(--inkHover)}
.btn.remove{background:transparent;color:var(--bad);border-color:var(--badLine)}
.btn.remove:hover:not(:disabled){background:transparent;border-color:var(--badLine2)}
.btn.hud{background:transparent;color:var(--lilac);border-color:var(--line2);font-size:10px;letter-spacing:.12em;padding:11px 6px}
.btn.hud:hover:not(:disabled){background:transparent;border-color:var(--line3)}
.coverform{display:flex;gap:6px}
.coverform input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:10px;border-radius:10px;outline:none;font-size:11px}
.coverform input:focus{border-color:var(--focus)}
.coverform button{background:transparent;border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:0 12px;font-size:10px;letter-spacing:.14em;font-weight:700}

.wornlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel2)}
.worn{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.worn:last-child{border-bottom:0}
.thumb{width:64px;height:48px;flex:0 0 auto;border-radius:8px;background:repeating-linear-gradient(135deg,var(--stripe1) 0 8px,var(--stripe2) 8px 16px) center/cover}
.worn-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.worn-name{font-size:14px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.worn-kind{font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--ok)}
.worn-kind.hud{color:var(--lilac)}
.x{width:44px;height:44px;flex:0 0 auto;background:transparent;border:1px solid var(--line2);color:var(--bad);border-radius:10px;font-size:18px;display:grid;place-items:center}
.x:hover:not(:disabled){border-color:var(--badLine2)}
.removeall{flex:0 0 auto;background:transparent;border:1px solid var(--badLine);color:var(--bad);border-radius:10px;padding:11px 16px;min-height:44px;font-size:10px;letter-spacing:.16em;font-weight:700}
.removeall:hover:not(:disabled){border-color:var(--badLine2)}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(var(--bgRgb),.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px clamp(16px,4vw,40px) calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:center}
.tabs-inner{width:100%;max-width:1120px;display:flex;gap:6px;align-items:center}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--dim);border:0;border-radius:10px;padding:13px;min-height:46px;font-size:11px;letter-spacing:.16em;font-weight:700}
.tab.selected{background:var(--line);color:var(--ink)}
.tabcount{color:var(--dim);font-size:10px}
.badge{background:var(--lilac);color:var(--bg);border-radius:999px;min-width:18px;height:18px;display:inline-grid;place-items:center;font-size:10px;padding:0 5px}
.iconbtn{flex:0 0 46px;height:46px;background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:10px;font-size:18px;display:grid;place-items:center}
.iconbtn:hover{color:var(--ink)}
.iconbtn.spinning{animation:lcspin .8s linear infinite}

.lc-mark{width:64px;height:64px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--lilac);display:grid;place-items:center;font-family:var(--display);font-size:22px;letter-spacing:0;color:var(--ink)}
.lc-mark.spin{animation:lcspin .9s linear infinite}
.operation-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(var(--bgRgb),.8);backdrop-filter:blur(6px)}
.operation-card{width:min(calc(320px * var(--tz,1)),88vw);padding:30px 24px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;animation:lcrise .3s ease}
.operation-text{display:flex;flex-direction:column;gap:6px}
.operation-text strong{font-size:15px;letter-spacing:.02em}
.operation-text small{color:var(--muted);font-size:12px;line-height:1.5}
.operation-fx{width:170px;height:170px;display:block;margin:-18px 0 -10px}
.operation-overlay.success .lc-mark{animation:none;border-color:var(--ok);color:var(--ok)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-size:12px;font-weight:600;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:lcrise .3s ease}
/* The HUD screen is 480x800: a thin scrollbar, so everyone sees there is more below (no sideways bars) */
::-webkit-scrollbar{width:8px;height:0}
/* the bar's place is always kept, so the page does not jump sideways between long and short screens */
html{overflow-y:scroll;scrollbar-gutter:stable}
html:has(body.mini){overflow-y:hidden;scrollbar-gutter:auto}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(201,184,214,.5);border-radius:8px;border:2px solid transparent;background-clip:padding-box;min-height:48px}
::-webkit-scrollbar-thumb:hover{background:rgba(201,184,214,.62);background-clip:padding-box;border:2px solid transparent}
:root[data-theme=light] ::-webkit-scrollbar-thumb{background:rgba(122,90,146,.4);background-clip:padding-box}
@media(max-width:560px){
 .top{padding:10px 14px}.brand{font-size:22px}.brandsub{font-size:8px;letter-spacing:.24em}.status{padding:6px 10px;font-size:8px}
 .main{padding:14px 14px 92px;gap:18px}
 .screen{gap:14px}.screen-head{gap:10px}
 .display{font-size:44px}.display.sm{font-size:34px}.found{padding-bottom:3px}
 .field{min-height:40px;padding:10px 14px;font-size:14px;border-radius:10px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tile{gap:8px}.cover{border-radius:10px}.chips{top:7px;left:7px;gap:4px}.chip{padding:3px 7px;font-size:8px}
 .coveredit{width:26px;height:26px;right:6px;bottom:6px;font-size:11px;border-radius:7px}
 .fav{width:26px;height:26px;top:6px;right:6px;font-size:13px;border-radius:7px}
 .catbar{gap:5px}.cat{padding:7px 10px;font-size:9px}
 .look{padding:12px}.look-head h3{font-size:19px}.look-thumbs .thumb{width:60px;height:45px}
 .selbar{bottom:calc(56px + env(safe-area-inset-bottom));padding:8px 14px;gap:5px}.smallbtn{padding:7px 10px;font-size:9px}
 .tile h3{font-size:13px}.meta{font-size:9px;letter-spacing:.14em}
 .actions{gap:5px}.btn{min-height:34px;padding:8px;font-size:10px;border-radius:8px}.btn.hud{padding:8px 4px;font-size:9px;letter-spacing:.08em}
 .worn{padding:10px 12px;gap:12px}.x{width:38px;height:38px}.removeall{min-height:36px;padding:8px 12px}
 .tabs{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}.tab{min-height:40px;padding:9px;font-size:10px}.iconbtn{flex-basis:40px;height:40px}
 .toast{bottom:64px}
 .connect{padding-top:10px;gap:16px}.connect .display{font-size:40px}
}
.fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
.fxcard{width:auto;animation:none}.fxcard canvas{width:200px;height:200px;display:block}.fxcard .btn{width:100%}
@media(prefers-reduced-motion:reduce){.rise,.toast,.operation-card{animation:none}.lc-mark.spin{animation:none}}
#editUuid{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}

/* ---- admin panel (desktop first, same tokens) */
body.admin .main{max-width:1560px;padding-bottom:60px}
.adm-head-right{display:flex;align-items:center;gap:12px}
/* narrow phones: "updated 23:29" ran over the HANGER logo - the time stays off there */
@media(max-width:480px){.adm-head-right #updated{display:none}}
.adm-tabs{display:flex;gap:6px;max-width:1560px;margin:0 auto;width:100%;padding:14px clamp(16px,4vw,40px) 0;flex-wrap:wrap}
.adm-tabs .tab{flex:0 0 auto;padding:10px 16px;min-height:40px}
.adm-view{display:flex;flex-direction:column;gap:18px}
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.adm-tile{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);display:flex;flex-direction:column;gap:4px}
.adm-tile-value{font-family:var(--display);font-size:34px;line-height:1;letter-spacing:.02em}
.adm-tile-label{font-size:10px;letter-spacing:.2em;color:var(--muted);font-weight:700}
.adm-tile-hint{font-size:11px;color:var(--dim)}
.adm-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.adm-card{margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);display:flex;flex-direction:column;gap:12px}
.adm-card figcaption,.adm-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.adm-card small,.adm-card-head small{color:var(--dim);font-size:11px}
.adm-bars{display:flex;flex-direction:column;gap:6px}
.adm-plot{height:140px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--line2)}
.adm-col{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.adm-col:hover .adm-bar{background:var(--ink)}
.adm-bar{width:100%;background:var(--lilac);border-radius:4px 4px 0 0;min-height:0}
.adm-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);letter-spacing:.08em}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px}.adm-chips .cat{cursor:default}
.adm-toolbar{display:flex;align-items:center;gap:12px}.adm-toolbar .field{max-width:420px}
.adm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;font-size:9px;letter-spacing:.18em;color:var(--dim);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.adm-table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table .num{text-align:right;font-variant-numeric:tabular-nums}
.adm-brand-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px 0 10px}
.adm-brand-bar .field{flex:0 1 280px;height:38px;min-height:0;padding:6px 12px}
.adm-brand-bar .adm-check{padding:0;font-weight:600;letter-spacing:0;font-size:12px;color:var(--muted)}
.adm-brands th:nth-child(3),.adm-brands td.adm-bar-cell{width:34%}
.adm-brands .adm-bar-in{display:flex;align-items:center;gap:10px}
.adm-brands .adm-hbar{flex:1;max-width:220px}
.adm-brands .adm-rank{width:36px;color:var(--dim);font-size:11px}
.adm-brands .adm-worn{color:var(--ok);font-weight:700}
.adm-brands tr.adm-folder td{color:var(--dim)}
.adm-tag{margin-left:8px;padding:1px 6px;border:1px solid var(--line2);border-radius:999px;font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:700;vertical-align:1px}
.adm-table tr.clickable{cursor:pointer}.adm-table tr.clickable:hover td{background:var(--panel)}
.adm-table td.strong{font-weight:700}
.adm-who{display:flex;align-items:center;gap:12px}.adm-who small{display:block;color:var(--dim);font-size:10px;font-family:ui-monospace,monospace}
.adm-avatar{width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);display:grid;place-items:center;overflow:hidden;font-weight:700;color:var(--muted);flex:0 0 auto}
.adm-avatar img{width:100%;height:100%;object-fit:cover}.adm-avatar.big{width:64px;height:64px;font-size:22px}
.adm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line3)}.adm-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.adm-bar-cell{min-width:180px}.adm-bar-in{display:flex;align-items:center;gap:10px}
.adm-hbar{flex:1;height:8px;background:var(--panel);border-radius:4px;overflow:hidden}.adm-hbar span{display:block;height:100%;background:var(--lilac);border-radius:0 4px 4px 0}
.adm-events{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.adm-event{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.adm-event:last-child{border-bottom:0}.adm-when{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.adm-what .linkbtn{font-size:13px;letter-spacing:0;color:var(--lilac);text-transform:none}
.adm-events.small .adm-event{padding:8px 12px;font-size:12px}
.adm-kinds{display:flex;flex-wrap:wrap;gap:6px}
.adm-kinds .cat.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.adm-kinds .cat.on .n{color:var(--bg);opacity:.7}
.adm-feed{display:flex;flex-direction:column;gap:18px}
.adm-day{display:flex;flex-direction:column;gap:8px}
.adm-day-head{display:flex;align-items:baseline;gap:10px;padding:0 4px}
.adm-day-head span{font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--ink)}
.adm-day-head small{font-size:11px;color:var(--dim)}
.adm-event{align-items:center}
.adm-ev-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.adm-ev-ic svg.ic{width:14px;height:14px;margin:0}
.adm-event.k-wardrobe .adm-ev-ic{color:var(--ok);border-color:var(--okLine)}
.adm-event.a-remove .adm-ev-ic,.adm-event.a-remove_all .adm-ev-ic{color:var(--bad);border-color:var(--badLine)}
.adm-event.k-looks .adm-ev-ic{color:var(--lilac);border-color:var(--lilacLine)}
.adm-event.k-shop .adm-ev-ic{color:var(--warn);border-color:var(--warnLine)}
.operation-card.adm-user{width:min(900px,94vw);gap:14px;padding:0 24px 24px}
.adm-user .adm-user-head{position:sticky;top:0;z-index:2;margin:0 -24px;padding:20px 24px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.adm-user-id{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.adm-badges{display:flex;flex-wrap:wrap;gap:6px}
.adm-badge{padding:3px 9px;border-radius:999px;border:1px solid var(--line2);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.adm-badge.on{color:var(--ok);border-color:var(--okLine)}.adm-badge.warn{color:var(--warn);border-color:var(--warnLine)}
.adm-key{font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.adm-stats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.adm-stat{padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);display:flex;flex-direction:column;align-items:center;gap:2px}
.adm-stat strong{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.adm-stat span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.adm-box{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);display:flex;flex-direction:column;gap:10px;min-width:0}
.adm-box-head{display:flex;align-items:baseline;gap:10px}
.adm-box-head span{font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--ink)}
.adm-box-head small{font-size:11px;color:var(--dim)}
.adm-slots{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.adm-slots .adm-label{flex:0 0 110px}
.adm-slots .field,.adm-label .field{flex:none;height:38px;min-height:0;padding:6px 10px;font-size:15px}
.adm-slots .adm-check{padding-bottom:10px}.adm-slots .smallbtn{margin-left:auto}
.adm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adm-li-pic{width:36px;height:36px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.adm-li-pic img{width:100%;height:100%;object-fit:cover;display:block}
.adm-li-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-li-txt strong{font-size:13px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-li-txt small{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-prod .cover{position:relative}
.adm-on{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:999px;background:rgba(var(--bgRgb),.8);border:1px solid var(--okLine);color:var(--ok);font-size:9px;font-weight:700;letter-spacing:.1em}
@media(max-width:720px){.adm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.adm-two{grid-template-columns:1fr}}
.adm-user-head{display:flex;align-items:center;gap:14px}.adm-user-head>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.adm-user-head strong{font-size:20px}.adm-user-head small{white-space:normal;padding:0}
.adm-actions{display:flex;flex-wrap:wrap;gap:8px}.smallbtn.danger-outline{color:var(--bad);border-color:var(--badLine)}
.adm-list{display:flex;flex-direction:column;gap:6px}.adm-li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:6px 8px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.adm-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.adm-prod{display:flex;flex-direction:column;gap:4px}.adm-prod .cover{border-radius:8px}.adm-prod.on .cover{border-color:var(--okLine);box-shadow:0 0 0 1px var(--ok) inset}
.adm-prod-name{font-size:12px;font-weight:600;overflow-wrap:anywhere}

/* ---- advertise page */
.adv-main{max-width:980px;gap:22px}
.adv-hero{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.adv-steps{list-style:none;counter-reset:s;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.adv-steps li{counter-increment:s;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.adv-steps li::before{content:counter(s);font-family:var(--display);font-size:22px;color:var(--lilac)}
.adv-steps strong{color:var(--ink)}
.adv-form label,.adv-two label,.adm-label{display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--dim);text-transform:uppercase}
.adv-packages{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.adv-package{text-align:left;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--ink)}
.adv-package.selected{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac) inset}
.adv-price{font-family:var(--display);font-size:26px;letter-spacing:.02em}.adv-package small{color:var(--muted);font-size:12px}
.adv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.adv-image{display:flex;flex-direction:column;gap:8px}.adv-fields{display:flex;flex-direction:column;gap:12px}
.adv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.adv-result{border-color:var(--lilac)}.adv-kiosk{align-self:flex-start;text-decoration:none;display:inline-block}
.adv-status-card{display:flex;gap:14px;align-items:flex-start;margin-top:8px}.adv-status-card img{width:160px;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.adv-status-card>div{display:flex;flex-direction:column;gap:4px}.adv-status-card small{color:var(--muted);font-size:12px}
.adv-state{color:var(--lilac);font-weight:700;font-size:13px}
@media(max-width:700px){.adv-grid,.adv-two{grid-template-columns:1fr}}

/* ---- admin: ads */
.adm-ads{display:flex;flex-direction:column;gap:10px}
.adm-ad{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.adm-ad img,.adm-ad .ph{width:140px;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--panel)}
.adm-ad-info{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--muted)}
.adm-ad-info strong{color:var(--ink);font-size:15px}.adm-ad-info a{color:var(--lilac);overflow-wrap:anywhere}
.adm-ad-side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.adm-status{font-size:9px;letter-spacing:.16em;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--line2)}
.adm-status.active{color:var(--ok);border-color:var(--okLine)}.adm-status.pending_review{color:var(--warn);border-color:var(--warnLine)}.adm-status.awaiting_payment{color:var(--lilac);border-color:var(--lilacLine)}
.adm-status.rejected,.adm-status.expired,.adm-status.paused{color:var(--dim)}
.adm-pkg{display:grid;grid-template-columns:minmax(0,2fr) 90px 120px 70px 34px;gap:8px;align-items:center}
.adm-pkg .field{height:38px;min-height:0;padding:6px 10px;font-size:14px}
.adm-pkg.head span{font-size:9px;letter-spacing:.16em;font-weight:700;color:var(--dim);text-transform:uppercase}
.adm-pkg input[type=checkbox]{justify-self:center}
.adm-pkg .smallbtn{padding:0;width:32px;height:32px;display:grid;place-items:center}
.adm-hint{font-size:11px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--dim)}
.adm-card .empty{padding:14px 12px}
#adTiles{margin-bottom:14px}
.adm-pkg input[type=checkbox]{width:18px;height:18px}
.adm-toolbar{flex-wrap:wrap;justify-content:space-between}
a.smallbtn{text-decoration:none;display:inline-block}
@media(max-width:700px){.adm-ad{grid-template-columns:1fr}.adm-ad-side{align-items:flex-start}.adm-pkg{grid-template-columns:minmax(0,1fr) 70px 90px 40px 34px}}

/* Day mode: same tokens, light values. The wear/remove animation card stays dark (the stardust glows on dark). */
:root[data-theme=light]{--bg:#f5f1ee;--panel:#ffffff;--panel2:#faf7f5;--line:#e6dfe3;--line2:#d6ccd3;--line3:#b3a7b0;--ink:#1a151c;--muted:#5d5360;--dim:#6b6170;--faint:#8b818d;--lilac:#7a5a92;--focus:#7a5a92;--ok:#237a4b;--warn:#94640f;--bad:#b83b52;
 --okLine:#9fcfb3;--badLine:#e6b7c0;--badLine2:#d48b99;--warnLine:#e2c68f;--warnBg:#fbf3e3;--lilacLine:#cdbfd9;--stripe1:#efe9ec;--stripe2:#e7e0e5;--ph:#b3a7b0;--inkHover:#000;--bgRgb:245,241,238;--panelRgb:255,255,255;color-scheme:light}
:root[data-theme=light] .operation-card:not(.dialog){--panel:#111014;--line2:#2a262c;--ink:#efe9e4;--muted:#9b909c;--lilac:#c9b8d6;--ok:#8fd9ad;background:#111014;color:#efe9e4}
:root[data-theme=light] .operation-overlay{background:rgba(var(--bgRgb),.7)}
:root[data-theme=light] .toast{box-shadow:0 12px 30px rgba(26,21,28,.18)}
.themebtn{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:15px;line-height:1}
.themebtn:hover{color:var(--ink);border-color:var(--line3)}
.top-right{display:flex;align-items:center;gap:8px}
@media(max-width:560px){.themebtn{width:30px;height:30px;font-size:13px}}

.adv-mine{border-color:var(--lilac)}.adv-mine-list{display:flex;flex-direction:column;gap:14px}.adv-mine-list .adv-status-card{padding-bottom:14px;border-bottom:1px solid var(--line)}.adv-mine-list .adv-status-card:last-child{border-bottom:0}

/* ---- mini screen (small square HUD face): every size is relative to the screen width, so the list reads at the
   same physical size whatever the face resolution (512x512 media -> ~27px text). */
body.mini .page{display:none}
.mini-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-size:max(13px,5.2vw)}
.mini-top{display:flex;align-items:center;gap:.6em;padding:.7em .9em .45em}
.mini-top strong{font-family:var(--display);font-weight:400;font-size:1.3em;letter-spacing:.06em}
.mini-dot{width:.6em;height:.6em;border-radius:50%;background:var(--line3)}.mini-dot.ok{background:var(--ok);box-shadow:0 0 .6em var(--ok)}
.mini-count{margin-left:auto;font-size:.75em;letter-spacing:.14em;font-weight:700;color:var(--ok);text-transform:uppercase}
.mini-tabs{display:flex;gap:.3em;padding:0 .9em .55em}
.mini-tabs button{flex:1;background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:.55em;padding:.55em .3em;font-size:.72em;letter-spacing:.12em;font-weight:700}
.mini-tabs button.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mini-search{margin:0 .9em .55em;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:.55em;padding:.5em .7em;font-size:.9em;outline:none}
.mini-list{flex:1;overflow-y:auto;padding:0 .9em .9em;display:flex;flex-direction:column;gap:.35em;scrollbar-width:none}
.mini-list::-webkit-scrollbar{display:none}
.mini-row{display:flex;align-items:center;gap:.55em;padding:.5em .5em .5em .75em;border:1px solid var(--line);border-radius:.7em;background:var(--panel2)}
.mini-row.on{border-color:var(--okLine)}
.mini-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.mini-name span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-name small{font-size:.7em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-tag{font-size:.6em;letter-spacing:.14em;font-weight:700;color:var(--ok)}.mini-tag.part{color:var(--warn)}
.mini-btn{flex:0 0 auto;min-width:4em;background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:.55em;padding:.5em .6em;font-size:.72em;letter-spacing:.12em;font-weight:700}
.mini-btn.off{background:transparent;color:var(--bad);border-color:var(--badLine)}
.mini-empty{margin:1.2em .3em;color:var(--dim);font-size:.85em;text-align:center}
body.mini .operation-card{width:84vw;padding:5vw 4vw;gap:3vw}
body.mini .operation-text strong{font-size:5vw}body.mini .operation-text small{font-size:3.8vw}
body.mini .operation-fx{width:34vw;height:34vw;margin:-3vw 0 -2vw}
body.mini .lc-mark{width:15vw;height:15vw;font-size:3.6vw}
body.mini .toast{bottom:3vw;font-size:3.8vw;padding:2vw 3.5vw}

.privacy-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--lilacLine);border-radius:14px;background:var(--panel2);font-size:12px;color:var(--muted)}
.privacy-card strong{color:var(--ink);font-size:13px}.privacy-card p{margin:0;line-height:1.5}.privacy-card a,.legal a,.offline a,.empty a{color:var(--lilac)}.privacy-card .smallbtn{align-self:flex-start}
.legal{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.legal .linkbtn{font-size:12px;letter-spacing:0;text-transform:none}
.privacy{max-width:760px;gap:14px}.privacy h2{margin:14px 0 0;font-size:15px}.privacy p,.privacy li{color:var(--muted);font-size:14px;line-height:1.65}.privacy ul{margin:0;padding-left:20px}.privacy strong{color:var(--ink)}
.mini-tabs button{font-size:.66em}

.adv-hello{margin:0;padding:12px 14px;border:1px solid var(--lilacLine);border-radius:12px;background:var(--panel2);color:var(--ink);font-size:13px}
.adv-form input[readonly]{opacity:.75}

/* Setup guide (/setup): three.js stage + step list. */
.setup{max-width:1240px;gap:22px}
.setup-head{display:flex;flex-direction:column;gap:12px;max-width:760px}
.setup-head .lead strong{color:var(--ink)}
.setup-chapters{display:flex;flex-wrap:wrap;gap:6px}
.setup-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.setup-stage{position:relative;aspect-ratio:16/11;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--panel) 0%,var(--bg) 75%)}
.setup-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.setup-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.setup-bar i{display:block;height:100%;width:0;background:var(--lilac)}
.setup-key{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(var(--panelRgb),.9);border:1px solid var(--lilacLine);color:var(--muted);font-size:14px;animation:lcrise .3s ease;white-space:nowrap}
.setup kbd{display:inline-block;min-width:1.9em;padding:3px 8px;border:1px solid var(--line3);border-bottom-width:3px;border-radius:7px;background:var(--panel2);color:var(--ink);font:700 12px Manrope,sans-serif;text-align:center;letter-spacing:.04em}
.setup-key kbd{font-size:15px;padding:6px 12px}
.setup-side{display:flex;flex-direction:column;gap:16px}
.setup-caption{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--lilacLine);border-radius:16px;background:var(--panel2);min-height:190px}
.setup-caption h2{margin:0;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.setup-caption p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.setup-caption b{color:var(--ink)}
.setup-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.setup-controls .smallbtn{padding:10px 8px}
.setup-controls .smallbtn:hover:not(:disabled){border-color:var(--line3)}
.setup-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.setup-steps button{width:100%;display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font-size:13px;text-align:left}
.setup-steps button:hover{background:var(--panel);color:var(--ink)}
.setup-steps .n{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);font-size:11px;font-weight:700}
.setup-steps li.on button{border-color:var(--line2);background:var(--panel);color:var(--ink)}
.setup-steps li.on .n{background:var(--lilac);border-color:var(--lilac);color:var(--bg)}
.setup-steps li.done .n{border-color:var(--okLine);color:var(--ok)}
.setup-next{border:1px solid var(--lilac);background:transparent;color:var(--lilac);border-radius:999px;padding:12px 16px;font-size:11px;letter-spacing:.14em;font-weight:700}
.setup-next:hover{background:var(--lilac);color:var(--bg)}
.setup-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.setup-grid{grid-template-columns:1fr}.setup-caption{min-height:0}.setup-notes{grid-template-columns:1fr}}
@media(max-width:560px){.setup-stage{aspect-ratio:4/4.2;border-radius:14px}.setup-caption h2{font-size:24px}}
.setup-sub{position:absolute;left:50%;bottom:22px;transform:translate(-50%,6px);max-width:calc(100% - 32px);padding:9px 16px;border-radius:12px;background:rgba(8,7,9,.82);color:#f4efea;font-size:clamp(13px,1.7vw,16px);font-weight:600;line-height:1.35;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-wrap:balance}
.setup-sub.on{opacity:1;transform:translate(-50%,0)}

/* First-run wizard (empty wardrobe): a timeline; the big COLLECTION title and tools hide while it shows. */
.first-run #search,.first-run .brandrow,.first-run #cats,.first-run #catTools,.first-run .titleside,.first-run .titlerow,.first-run #slotBar{display:none}
.wizard{display:flex;flex-direction:column;gap:22px}
.wizard-head{display:flex;flex-direction:column;gap:10px}
.wizard ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wizard li{position:relative;display:flex;gap:16px;align-items:flex-start;padding:0 0 22px 0}
.wizard li::before{content:'';position:absolute;left:13px;top:30px;bottom:0;width:1px;background:var(--line2)}
.wizard li:last-child::before{display:none}
.wizard li>div{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:4px;flex:1}
.wizard li strong{font-size:15px;line-height:1.3}
.wizard li p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;text-wrap:pretty}
.wizard li p b{color:var(--ink)}
.wizard-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.wizard-actions a{text-decoration:none}
.wizard .mark{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);background:var(--bg);font-size:12px;font-weight:700;color:var(--muted);position:relative;z-index:1}
.wizard li.ok{padding-bottom:14px}.wizard li.ok strong{font-size:13px;color:var(--muted);font-weight:600}.wizard li.ok>div{padding-top:5px}
.wizard li.ok .mark{border-color:var(--ok);color:var(--ok)}
.wizard li.bad strong{font-family:var(--display);font-weight:400;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.wizard li.bad .mark{background:var(--lilac);border-color:var(--lilac);color:var(--bg)}
.wizard li.wait .mark{border-top-color:var(--lilac);animation:lcspin 1s linear infinite}
.wizard li.todo{opacity:.45}
.wizard-example{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.wizard-tree{margin:0;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);white-space:pre;overflow-x:auto}
@media(max-width:560px){.wizard{gap:16px}.wizard li.bad strong{font-size:21px}.wizard li p{font-size:12px}.wizard-tree{font-size:11px}}
.setup-top{display:flex;align-items:center;gap:8px}.setup-top .smallbtn{text-decoration:none;color:var(--ink)}
.helpbtn{text-decoration:none;font-weight:700;font-size:14px}

/* ↻ re-reading #RLV: a lilac glow wave over the covers (the cards stay as they are). */
@keyframes lcwave{0%,100%{box-shadow:0 0 0 0 transparent;transform:none}40%{box-shadow:0 0 0 2px var(--lilac),0 0 34px rgba(201,184,214,.55);transform:translateY(-3px)}}
body.scanning .grid .tile{pointer-events:none}
body.scanning .grid .tile .cover{animation:lcwave 1.1s ease-in-out infinite;animation-delay:calc(var(--i,0)*90ms)}
body.scanning .wizard{opacity:.6;transition:opacity .3s}
/* ...and the whole screen goes soft and cannot be tapped until it is done, with a note saying why */
.main>.screen{transition:filter .25s,opacity .25s}
body.scanning .main>.screen{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none}
.scan-veil{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 24px;border:1px solid var(--lilacLine);border-radius:16px;background:rgba(var(--bgRgb),.92);box-shadow:0 12px 40px rgba(0,0,0,.45);text-align:center;pointer-events:none}
.scan-veil[hidden]{display:none}
.scan-veil strong{font-size:14px;letter-spacing:.04em}
.scan-veil small{color:var(--muted);font-size:12px}
.scan-veil .scan-spin svg.ic{width:26px;height:26px;margin:0;color:var(--lilac);animation:scanspin 1s linear infinite}
@keyframes scanspin{to{transform:rotate(360deg)}}

/* Help (/help): the demo wardrobe screen in a stage, plus the questions list. */
.help-topics{display:flex;flex-wrap:wrap;gap:6px}
.help-stage{aspect-ratio:16/12;perspective:1800px}
.help-dust{position:absolute;inset:0;width:100%;height:100%}
.help-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.help-screen{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px var(--lilacLine),0 0 60px rgba(201,184,214,.12);background:var(--bg)}
.help-screen iframe{display:block;border:0;width:100%;height:100%;pointer-events:none}
.help-overlay{position:absolute;inset:0;pointer-events:none}
.help-cursor{position:absolute;left:0;top:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));will-change:transform}
.help-hi{position:absolute;border:2px solid #c9b8d6;border-radius:12px;box-shadow:0 0 0 4px rgba(201,184,214,.18),0 0 24px rgba(201,184,214,.45);opacity:0;transition:opacity .25s,left .25s,top .25s,width .25s,height .25s}
.help-hi.on{opacity:1;animation:helppulse 1.2s ease-in-out infinite}
@keyframes helppulse{50%{box-shadow:0 0 0 7px rgba(201,184,214,.1),0 0 30px rgba(201,184,214,.6)}}
.help-ripple{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #c9b8d6;opacity:0}
.help-ripple.go{animation:helpripple .55s ease-out}
@keyframes helpripple{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}
.help-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(var(--bgRgb),.82);color:var(--muted);font-size:13px;z-index:3}
.help-veil[hidden]{display:none}
.faq{display:flex;flex-direction:column;gap:8px;max-width:860px}
.faq-group{margin:18px 0 4px;font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;letter-spacing:.01em}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:0 16px}
.faq details[open]{border-color:var(--lilacLine)}
.faq details.glow{animation:faqglow 2.6s ease-out}
@keyframes faqglow{0%,35%{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac),0 0 18px rgba(201,184,214,.55),0 0 42px rgba(201,184,214,.25)}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.faq details.glow{animation:none;border-color:var(--lilac)}}
.faq summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--lilac);font-weight:700}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.65}
.faq details p b{color:var(--ink)}.faq a{color:var(--lilac)}
.faq-watch{margin:0 0 14px}
/* a look's share link */
.look-share{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:14px}
.look-share .note{margin:0}
.look-share-row{display:flex;gap:6px;width:100%}
.look-share-row .field{flex:1;min-width:0;font-size:12px;padding:8px 12px}
.look-share .smallbtn svg.ic,.look-share .linkbtn svg.ic{margin-right:4px}
.help-search{max-width:640px}
.help-results{display:flex;flex-direction:column;gap:8px;max-width:860px}
.help-results[hidden]{display:none}
.help-hit{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;color:var(--ink);cursor:pointer;font:inherit}
.help-hit:hover{border-color:var(--lilacLine)}
.help-hit strong{font-size:14px;font-weight:600}
.help-hit span{color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:900px){.help-stage{aspect-ratio:4/5}}

/* Versions: new HUD card and the "screen updated" reload dialog. */
.update-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--lilac);border-radius:14px;background:var(--panel2);font-size:12px;color:var(--muted);animation:lcrise .5s ease}
.update-card strong{color:var(--ink);font-size:14px}.update-card p{margin:0;line-height:1.55}.update-card b{color:var(--ink)}.update-card .smallbtn{align-self:flex-start}
.reload-card{align-items:center!important;text-align:center!important}
.reload-card .lc-mark{border-top-color:var(--ok)}

/* Product page (/ for visitors without a HUD login). */
.land-nav{display:flex;align-items:center;gap:18px}
.land-nav a{color:var(--muted);text-decoration:none;font-size:10px;letter-spacing:.2em;font-weight:700}
.land-nav a:hover{color:var(--ink)}
.land{max-width:1180px;gap:72px}
.land-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-top:clamp(8px,4vh,40px)}
.land-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
body.landing{overflow-x:clip}
.land-copy,.land-demo{position:relative;z-index:1}
.land-copy{display:flex;flex-direction:column;gap:18px}
.land-copy .lead{font-size:16px}.land-copy .lead b{color:var(--ink)}
.land-cta{display:flex;flex-wrap:wrap;gap:10px}
.land-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;border:1px solid var(--line3);color:var(--ink);text-decoration:none;font-size:11px;letter-spacing:.16em;font-weight:700;white-space:nowrap}
.land-btn:hover{border-color:var(--ink)}
.land-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.land-btn.primary:hover{background:var(--lilac);border-color:var(--lilac)}
.land-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}
.land-ticks li::before{content:'✓';color:var(--ok);font-weight:700;margin-right:10px}
.land-demo{display:flex;flex-direction:column;gap:10px;max-width:400px;width:100%;justify-self:center}
.land-device{position:relative;width:100%;border-radius:22px;overflow:hidden;background:var(--bg);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px var(--lilacLine),0 0 70px rgba(201,184,214,.14)}
.land-device iframe{position:absolute;left:0;top:0;width:480px;height:800px;border:0;transform-origin:0 0}
.land-demo-bar{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--muted)}
.land-demo-bar .smallbtn{margin-left:auto}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:helppulse 1.4s ease-in-out infinite}
.land-section{display:flex;flex-direction:column;gap:16px}
.land-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.land-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.land-card:hover{border-color:var(--lilacLine)}
.land-card .ic{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--lilacLine);border-radius:12px;background:rgba(201,184,214,.06);color:var(--lilac)}
.land-card .ic svg{width:22px;height:22px;stroke-width:1.6}
.land-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.01em}
.land-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.land-card b{color:var(--ink)}.land-card a{color:var(--lilac)}
.land-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.land-steps li{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.land-steps .n{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--lilac);color:var(--bg);font-weight:700}
.land-steps li>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.land-steps h3{margin:0;font-size:16px}.land-steps p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;flex:1}
.land-brands{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--lilacLine);border-radius:20px;background:var(--panel2)}
.land-brands>div{display:flex;flex-direction:column;gap:10px;max-width:640px}
.land-foot{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.land-foot nav{display:flex;flex-wrap:wrap;gap:18px}.land-foot a{color:var(--muted);text-decoration:none;font-size:13px}.land-foot a:hover{color:var(--ink)}
@media(max-width:900px){.land-hero{grid-template-columns:1fr}.land-steps{grid-template-columns:1fr}.land-brands{flex-direction:column;align-items:flex-start}}
@media(max-width:620px){.land-nav a{display:none}.land{gap:52px}}

/* Slots: "more slots" dialog. */
.slot-offer{display:flex;flex-direction:column;gap:8px}
.slot-pack{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.slot-pack strong{font-size:13px;letter-spacing:.06em}.slot-pack span{grid-column:1;font-size:12px;color:var(--muted)}
.slot-pack b{grid-column:2;grid-row:1/3;font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink)}
.slot-pack.premium{border-color:var(--lilac);background:linear-gradient(135deg,var(--panel),var(--panel2))}
.slot-pack.premium strong{color:var(--lilac)}
.adm-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.adm-row .field{flex:1 1 160px;min-height:40px;padding:8px 12px}.adm-row .adm-label{flex:1 1 160px}
.adm-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink);padding-bottom:10px}
.cover.addcover{cursor:pointer}.cover.addcover:hover{border-color:var(--lilacLine)}
.addcover-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--lilac);opacity:.8;pointer-events:none}
.cover.addcover:hover .addcover-hint{opacity:1}

/* Help: "What do you need help with?" cards. */
.help-choose{display:flex;flex-direction:column;gap:16px}
.help-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.help-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.help-card:hover{border-color:var(--lilac);background:var(--panel)}
.help-card .ic{font-size:24px;line-height:1}
.help-card strong{font-size:14px;line-height:1.35}
.help-card span:last-child{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--lilac);text-transform:uppercase}
.help-card.fix span:last-child{color:var(--muted);letter-spacing:.06em;text-transform:none;font-weight:500;font-size:12px}
.help-cards.small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
#allTopics{align-self:flex-start}
@media(max-width:520px){.help-cards,.help-cards.small{grid-template-columns:1fr 1fr}.help-card{padding:12px}.help-card strong{font-size:13px}}
.help-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:18px 34px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);font:700 14px Manrope,sans-serif;letter-spacing:.2em;box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 8px rgba(201,184,214,.18);cursor:pointer}
.help-start:hover{background:var(--lilac)}
.help-start[hidden]{display:none}

/* Help: a topic opens as text; the film is optional. */
.help-answer{display:flex;flex-direction:column;gap:14px;max-width:760px}
.help-answer #answerBack{align-self:flex-start}
.help-answer .lead b{color:var(--ink)}
.help-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.help-steps li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.help-steps .n{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--lilac);color:var(--bg);font-size:12px;font-weight:700}
.help-steps strong{font-size:14px}.help-steps p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.6}.help-steps p b{color:var(--ink)}
.help-answer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.slotbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--dim)}
.slot-use b{color:var(--ink);letter-spacing:.06em}.slot-use.near b{color:var(--warn)}.slot-use.full b{color:var(--bad)}
.slotbar .linkbtn{margin-left:auto;color:var(--lilac)}

/* Admin SLOTS: free allowance and the packs table. */
.slot-free{display:flex;flex-wrap:wrap;gap:12px}
.slot-free label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);flex:0 1 130px}
.slot-free .field{min-height:0;height:38px;padding:6px 10px}
.slot-table{display:flex;flex-direction:column;gap:6px}
.slot-th,.slot-tr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 130px 90px;gap:10px;align-items:center}
.slot-th{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--dim);padding:0 2px}
.slot-tr{padding:8px 0;border-top:1px solid var(--line)}
.slot-tr .field{min-height:0;height:36px;padding:6px 10px}
.slot-gives{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.slot-gives .field{width:80px;flex:none}
.slot-sale{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
@media(max-width:700px){.slot-th{display:none}.slot-tr{grid-template-columns:1fr 1fr}}

/* Locked products (over the product slots): card stays, dimmed, with an UNLOCK button. */
.tile.locked .cover{filter:grayscale(.7) brightness(.55)}
.tile.locked h3,.tile.locked .meta{opacity:.6}
.lock-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:rgba(8,7,9,.8);color:#f4efea;font-size:10px;letter-spacing:.18em;font-weight:700;white-space:nowrap}
.slot-use small{margin-left:4px;color:var(--bad);letter-spacing:.08em}

/* Help, "buy a pack" film: the store in Second Life with the terminal's dialogs, drawn like the viewer's. */
.sl-scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#8fb6d8 0%,#c9d8e6 48%,#6f6a64 48.2%,#4e4a45 100%);font-family:Arial,Helvetica,sans-serif}
.sl-scene[hidden]{display:none}
.sl-kiosk{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:170px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 18px 20px rgba(0,0,0,.45))}
.sl-kiosk-top{width:120px;height:22px;border-radius:8px 8px 0 0;background:#2b2830}
.sl-kiosk-screen{width:170px;height:250px;background:linear-gradient(160deg,#3a2a48,#15121a);border:10px solid #2b2830;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#efe9e4}
.sl-kiosk-screen b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:.06em}
.sl-kiosk-screen small{font-size:9px;letter-spacing:.3em;color:#c9b8d6}
.sl-kiosk-base{width:200px;height:40px;border-radius:4px;background:#3a3640}
/* the terminal's screen, as its real texture (1:2) */
.sl-kiosk .sl-kiosk-screen{width:150px;height:300px;box-sizing:content-box;padding:12px 10px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;background:radial-gradient(ellipse at 50% 0%,#221f24,#0b0a0c 70%);color:#efe9e4;text-align:left}
.tk-brand{display:flex;align-items:baseline;gap:5px}
.tk-brand b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:17px;letter-spacing:.02em}
.tk-brand small{font-size:5px;letter-spacing:.3em;color:#8a8190}
.tk-head{font-family:Anton,Impact,sans-serif;font-size:21px;line-height:.92;text-transform:uppercase;margin-bottom:4px}
.tk-head span{color:#c9b8d6}
.tk-row{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #2a262c;border-radius:6px;background:#141216}
.tk-row.on{border-color:#c9b8d6}
.tk-row i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid #3a353c;display:grid;place-items:center;font-style:normal;font-family:Anton,Impact,sans-serif;font-size:9px;color:#c9b8d6}
.tk-row.on i{background:#c9b8d6;border-color:#c9b8d6;color:#111}
.tk-row div{display:flex;flex-direction:column;min-width:0}
.tk-row strong{font-size:8px;font-weight:700;letter-spacing:.04em}
.tk-row small{font-size:5.5px;letter-spacing:0;color:#9b909c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-touch{margin-top:auto;padding:6px;border:1px dashed #3a353c;border-radius:6px;font-size:6.5px;font-weight:700;letter-spacing:.06em}
.sl-dialog{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:410px;padding:12px 12px 10px;border-radius:6px;background:rgba(74,146,232,.94);color:#fff;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sl-dialog[hidden]{display:none}
.sl-head{font-size:12px;opacity:.95;margin-bottom:8px}
.sl-text{white-space:pre-line;line-height:1.35;margin-bottom:10px}
.sl-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sl-buttons button,.sl-pay button{height:28px;border-radius:5px;border:1px solid #1d3f73;background:linear-gradient(#5a88c6,#35609c);color:#fff;font:12px Arial,sans-serif;white-space:nowrap;overflow:hidden}
.sl-buttons button.blank{visibility:hidden}
.sl-ignore{margin:10px 0 0 auto;width:62px;text-align:center;padding:5px 0;border-radius:5px;background:linear-gradient(#5a88c6,#35609c);font-size:12px}
.sl-pay{top:140px;width:300px}
.sl-paygrid{display:flex;justify-content:center;margin-bottom:12px}.sl-paygrid button{width:120px;height:34px;font-size:14px}.sl-paygrid button.on{background:linear-gradient(#8fd9ad,#3f9c68)}
.sl-payrow{display:flex;justify-content:flex-end;gap:8px}.sl-payrow button{width:80px}
/* Firestorm's pie menu (right-click on an object) */
.sl-pie{position:absolute;left:50%;top:44%;width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(38,38,40,.9) 0 60%,rgba(24,24,26,.92) 61% 100%);box-shadow:0 0 0 7px rgba(20,20,22,.85),0 10px 30px rgba(0,0,0,.5)}
.sl-pie[hidden]{display:none}
.sl-pie-hub{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:#101012}
.sl-pie button{position:absolute;transform:translate(-50%,-50%);padding:4px 6px;border:0;border-radius:4px;background:transparent;color:#e6e6e6;font:12px Arial,sans-serif;white-space:nowrap}
.sl-pie button.on{background:#b0612c;color:#fff}
/* Firestorm's Pay Resident window (dark) */
.sl-pay{top:150px;width:260px;padding:0 0 10px;border-radius:4px;background:#2c2c2e;border:1px solid #111;color:#ddd;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.sl-win-bar{display:flex;justify-content:space-between;padding:6px 10px;background:#3a3a3d;font-size:12px;color:#eee;border-bottom:1px solid #111}
.sl-pay-who,.sl-pay-obj{display:flex;align-items:center;gap:6px;padding:8px 12px 0;font-size:12px}
.sl-pay-who b{font-weight:400;color:#a8d86e}
.sl-pay-via{padding:8px 12px 0;font-size:12px;color:#bbb}
.sl-av{width:18px;height:14px;border-radius:2px;background:linear-gradient(135deg,#ddd,#888)}
.sl-cube{width:14px;height:14px;border-radius:2px;background:linear-gradient(135deg,#f0c060,#a8742a)}
.sl-pay .sl-paygrid{justify-content:flex-start;padding:10px 12px 0;margin:0 0 14px}
.sl-pay .sl-paygrid button{width:84px;height:24px;font-size:12px;border:1px solid #111;border-radius:3px;background:linear-gradient(#4a4a4e,#353538);color:#eee}
.sl-pay .sl-paygrid button.on{background:linear-gradient(#6d6d72,#4a4a4e)}
.sl-pay .sl-payrow{padding:0 10px}.sl-pay .sl-payrow button{width:90px;height:24px;border:1px solid #111;border-radius:3px;background:linear-gradient(#5a4038,#3c2c27);color:#eee;font-size:12px}
.sl-chat{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:3px}
.sl-chat div{padding:5px 8px;border-radius:4px;background:rgba(0,0,0,.55);color:#e8f5ec;font-size:12px;line-height:1.35}
.sl-chat b{color:#9fe0b8;font-weight:400}
.adm-tiles.income .adm-tile{border-color:var(--lilacLine)}.adm-tiles.income .adm-tile-value{color:var(--lilac)}
.slot-how{color:var(--lilac);font-weight:700;white-space:nowrap}

/* Advertise: a small animated wardrobe showing where the sponsored card appears. */
.adv-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:22px;align-items:center;margin-top:10px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
@media (max-width:760px){.adv-where{grid-template-columns:1fr}}
.adv-where-steps{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.adv-where-steps li{padding:10px 12px;border-radius:10px;border:1px solid transparent;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);opacity:.55;transition:opacity .4s,border-color .4s,background .4s}
.adv-where-steps li strong{color:var(--ink)}
.adv-where-steps li.on{opacity:1;border-color:var(--line);background:var(--bg)}
.adv-hud{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.25);font-size:10px}
.adv-hud-top{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 8px;letter-spacing:.2em;color:var(--ink)}
.adv-hud-top span{color:var(--muted);letter-spacing:.1em}
.adv-hud-chips{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.adv-hud-chips span{padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);letter-spacing:.12em;font-size:8.5px}
.adv-hud-chips span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.adv-hud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.adv-tile{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel2);display:flex;flex-direction:column}
.adv-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.adv-tile i{font-style:normal;padding:5px 6px 7px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-tile small{padding:5px 6px 0;color:var(--lilac);letter-spacing:.14em;font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-tile.ad i{padding-top:1px}
.adv-ad-img{position:relative}
.adv-ad-img em{position:absolute;left:5px;top:5px;font-style:normal;font-size:7px;letter-spacing:.14em;padding:2px 6px;border-radius:999px;background:var(--ink);color:var(--bg)}
.adv-ad-btns{display:flex;gap:4px;padding:0 6px 7px}
.adv-ad-btns span{flex:1;text-align:center;padding:4px 0;border-radius:6px;border:1px solid var(--line);font-size:6.5px;letter-spacing:.1em;color:var(--ink);transition:background .2s,color .2s,transform .15s}
.adv-ad-btns span.press{background:var(--ink);color:var(--bg);transform:scale(.94)}
.adv-tile.ad{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,box-shadow .5s,border-color .5s}
.adv-tile.ad.hidden{opacity:0;transform:scale(.8)}
.adv-tile.ad.glow{border-color:var(--lilac);box-shadow:0 0 0 2px var(--lilac),0 0 26px var(--lilac)}
.adv-hud-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px);opacity:0;padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:9.5px;white-space:nowrap;transition:opacity .3s,transform .3s}
.adv-hud-toast.on{opacity:1;transform:translate(-50%,0)}
.adv-cursor{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
@media (prefers-reduced-motion:reduce){.adv-tile.ad,.adv-cursor,.adv-hud-toast{transition:none}}

/* Looks: small cards (two to a row on the HUD, more on wide screens); the open one takes the full width. */
.looklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
@media (max-width:520px){.looklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.looklist>.empty{grid-column:1/-1}
.look{padding:8px;gap:8px;border-radius:12px;min-width:0}
.look.open{grid-column:1/-1;padding:12px}
.look-head{gap:6px}
.look-head h3{font-size:15px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal;min-width:0}
.look.open .look-head h3{font-size:20px;white-space:normal;overflow-wrap:anywhere}
.look-more{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;line-height:1;cursor:pointer}
.look-more:hover{border-color:var(--ink)}
.look-media{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--panel);cursor:pointer}
.look-media>img{width:100%;height:100%;object-fit:cover;display:block}
.look-mosaic{display:grid;width:100%;height:100%;gap:2px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.look-mosaic.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.look-mosaic.n2{grid-template-rows:1fr}
.look-mosaic.n3>.thumb:first-child{grid-row:1/3}
.look-mosaic .thumb{width:auto;height:auto;border-radius:0;background-size:cover;background-position:center;position:relative}
.look-plus{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,7,9,.6);color:#f4efea;font-weight:700;font-size:14px}
.look-state{position:absolute;left:6px;top:6px;font-size:8.5px;padding:3px 7px;background:var(--bg)}
.look .btn{padding:8px 10px;font-size:10px}
.look.open .btn{padding:11px 14px;font-size:11px}
.looklist{grid-auto-flow:row dense}
.look.open .look-media{aspect-ratio:auto;height:170px}

/* WEAR (takes the others off) and + ADD (on top) side by side */
.wear-row{display:flex;gap:6px}
.wear-row .btn{flex:1;min-width:0}
.wear-row .btn.add{flex:0 0 auto;background:transparent;color:var(--ink);border:1px solid var(--line2)}
.wear-row .btn.add:hover:not(:disabled){border-color:var(--ink)}
.mini-btn.mini-add{margin-right:4px;min-width:0;padding-left:.7em;padding-right:.7em;background:transparent;color:var(--ink);border:1px solid var(--line2)}

/* Site menu (☰) on every page, phones included */
.site-menu{position:relative}
.site-menu-btn{font-size:14px;color:var(--ink)}
.site-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;display:flex;flex-direction:column;padding:6px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:30}
.site-menu-panel[hidden]{display:none}
.site-menu-panel a{padding:11px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600}
.site-menu-panel a:hover{background:var(--panel2)}
.site-menu-panel a.on{color:var(--lilac)}
.site-lang{position:relative}
.site-lang-btn{font-size:11px;font-weight:800;letter-spacing:.08em;width:auto;min-width:36px;padding:0 10px}
.site-lang-panel{min-width:150px}
@media(min-width:621px){.land-nav .site-menu{display:none}}
/* Help: a bar that stays under the header while a question is open; the other questions under it */
.help-bar{position:sticky;top:var(--topH,62px);z-index:4;display:flex;align-items:center;gap:12px;padding:10px 0;margin:0 0 6px;background:rgba(var(--bgRgb),.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.help-bar[hidden]{display:none}
.help-bar span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.help-others-wrap{display:flex;flex-direction:column;gap:10px;margin-top:22px}
#chooser:not([hidden])~.help-others-wrap{display:none}
.help-others{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.help-other{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.help-other:hover{border-color:var(--line3)}
.help-other.on{border-color:var(--lilac)}
.help-other .ic{font-size:16px}
#stage,.help-answer{scroll-margin-top:calc(var(--topH,62px) + 56px)}
.faq details,.faq-group{scroll-margin-top:calc(var(--topH,62px) + 16px)}

/* The setup film on its own (?embed=rlv, inside the HUD's first-run screen) */
html.embed header.top,html.embed .setup-head,html.embed .setup-chapters,html.embed .setup-side,html.embed .setup-notes{display:none}
html.embed .main{padding:0;max-width:none}
html.embed .setup-grid{display:block;margin:0}
html.embed .setup-stage{border-radius:0;border:0}
html.embed body{overflow:hidden}
/* ... and its frame in the wizard */
.wizard-film{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin-top:22px}
.wizard-film iframe{width:100%;aspect-ratio:16/11;border:0;border-radius:10px;background:var(--panel);display:block}
.wizard-film .smallbtn{align-self:flex-start}
.wizard-body{display:flex;flex-direction:column;gap:22px}

/* the film's steps under it, the playing one open */
.wizard-film-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.wizard-film-steps button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.wizard-film-steps .n{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);font-size:11px;font-weight:700}
.wizard-film-steps strong{font-size:13px;font-weight:600;line-height:1.4}
.wizard-film-steps p{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.wizard-film-steps p b,.wizard-film-steps p kbd{color:var(--ink)}
.wizard-film-steps li.on button{border-color:var(--lilacLine);background:var(--panel);color:var(--ink)}
.wizard-film-steps li.on .n{background:var(--lilac);border-color:var(--lilac);color:var(--bg)}
.wizard-film-steps li.done .n{border-color:var(--ok);color:var(--ok)}
.wizard .wizard-film-steps li{padding:0;display:block}.wizard .wizard-film-steps li::before{display:none}.wizard .wizard-film-steps li>button>div{display:flex;flex-direction:column;min-width:0}

/* Advertise: the ad's progress after SUBMIT (pay → review → live), updated live */
.adv-track{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.adv-track[hidden]{display:none}
#result{scroll-margin-top:calc(var(--topH,62px) + 12px)}
.adv-track li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);opacity:.5}
.adv-track li>i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.adv-track li div{display:flex;flex-direction:column;gap:2px}
.adv-track li strong{font-size:13px;color:var(--ink)}.adv-track li span{font-size:12px;color:var(--muted)}
.adv-track li.on{opacity:1;border-color:var(--lilacLine)}
.adv-track li.on>i{border-color:var(--line2);border-top-color:var(--lilac);animation:lcspin 1s linear infinite}
.adv-track li.done{opacity:1;border-color:var(--okLine)}
.adv-track li.done>i{border-color:var(--ok);color:var(--ok)}.adv-track li.done>i::after{content:'✓'}
/* advertise: a live ad's time left, as a ring that empties */
.adv-status-card>.adv-ring{position:relative;display:block;flex:0 0 auto;width:150px;height:150px;margin:0 20px 0 auto;align-self:center}
@media(max-width:560px){.adv-status-card{flex-wrap:wrap}.adv-status-card img{width:120px}.adv-status-card>.adv-ring{width:110px;height:110px;margin-right:0}}
.adv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.adv-ring .adv-ring3d{position:absolute;inset:-9%;width:118%;height:118%}
.adv-ring svg[style*="hidden"]{position:absolute;inset:0}
.adv-ring circle{fill:none;stroke-width:4}
.adv-ring .track{stroke:var(--line2)}
.adv-ring .bar{stroke:var(--lilac);stroke-linecap:round;animation:ringBreathe 3.2s ease-in-out infinite}
.adv-ring .dot{fill:#fff;stroke:var(--lilac);stroke-width:1.6;animation:ringPulse 1.6s ease-in-out infinite}
.adv-ring.low .bar{stroke:var(--warn,#e0b25a)}.adv-ring.low .dot{stroke:var(--warn,#e0b25a)}
@keyframes ringBreathe{0%,100%{filter:drop-shadow(0 0 1px rgba(201,184,214,.35))}50%{filter:drop-shadow(0 0 5px rgba(201,184,214,.85))}}
@keyframes ringPulse{0%,100%{opacity:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.7))}50%{opacity:.55;filter:drop-shadow(0 0 7px rgba(201,184,214,1))}}
@media(prefers-reduced-motion:reduce){.adv-ring .bar,.adv-ring .dot{animation:none}}
.adv-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.adv-ring-mid strong{font-family:var(--display);font-weight:400;font-size:42px;color:var(--ink)}
.adv-ring-mid small{font-size:13px;letter-spacing:.04em;color:var(--muted);margin-top:2px}
@media(max-width:560px){.adv-ring-mid strong{font-size:30px}.adv-ring-mid small{font-size:11px}}
/* admin: a rejected ad's refund */
.adm-refund{font-weight:600}.adm-refund.done{color:var(--ok)}.adm-refund.failed,.adm-refund.held{color:var(--bad)}
/* narration on/off under the film controls */
.sound-btn{align-self:flex-start;margin-top:2px}

/* Toasts: a small card top right, sliding in; the bar under the text shows how long it stays */
.toast,.toast.go{left:auto;right:14px;top:calc(var(--topH,58px) + 10px);bottom:auto;transform:none;width:max-content;max-width:min(320px,calc(100vw - 28px));
 text-align:left;border-radius:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line2);padding:12px 16px 14px 18px;
 font-size:12px;font-weight:600;line-height:1.45;box-shadow:0 18px 44px rgba(0,0,0,.5);overflow:hidden;animation:toastIn .38s cubic-bezier(.2,.8,.2,1)}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lilac)}
.toast::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lilac);opacity:.55;transform-origin:left}
.toast.go::after{animation:toastTime var(--toastMs,3000ms) linear forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes toastTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
:root[data-theme=light] .toast{box-shadow:0 14px 34px rgba(26,21,28,.16)}
@media(max-width:560px){.toast,.toast.go{right:10px;top:calc(var(--topH,52px) + 8px)}}
body.mini .toast,body.mini .toast.go{top:2vw;right:2vw;bottom:auto;font-size:3.6vw;padding:2.2vw 3vw 2.6vw 3.6vw;max-width:80vw}
@media(prefers-reduced-motion:reduce){.toast,.toast.go{animation:none}.toast.go::after{animation:none}}

/* A look's window (⋯ on its card) */
.look-dialog{gap:12px;max-height:calc(100vh - 40px);overflow-y:auto}
.look-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.look-dialog-head strong{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.look-dialog .look-media{cursor:default;max-height:220px;aspect-ratio:auto;height:200px}
.look-pieces{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.look-pieces li{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.look-pieces .thumb{flex:0 0 auto;width:44px;height:33px;border-radius:6px;background:var(--panel) center/cover}
.look-pieces li>div{display:flex;flex-direction:column;min-width:0}
.look-pieces li span{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-pieces li small{font-size:11px;color:var(--muted)}
.look-pieces li.missing{opacity:.5}.look-pieces li.missing span{text-decoration:line-through}
.look-dialog .btn{padding:11px 14px;font-size:11px}
.look-dialog .look-tools{justify-content:center}
/* Looks are tall (1:2): a full-body photo, or the pieces stacked */
.looklist .look-media{aspect-ratio:1/2}
.look-mosaic,.look-mosaic.n2,.look-mosaic.n3{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
.look-mosaic.n1{grid-template-rows:1fr}.look-mosaic.n2{grid-template-rows:1fr 1fr}
.look-mosaic.n3>.thumb:first-child{grid-row:auto}
.operation-card.look-dialog{width:min(440px,calc(100vw - 36px));max-width:none}
/* three tall cards to a row on the HUD screen, more on wide screens */
.looklist{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
@media (max-width:520px){.looklist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.looklist .look{padding:6px;gap:6px;border-radius:10px}
.looklist .look-head h3{font-size:13px}
.looklist .look-more{width:22px;height:22px;font-size:12px}
.looklist .look .btn{padding:7px 4px;font-size:9px;min-height:30px}
.looklist .look-state{left:4px;top:4px;font-size:7.5px;padding:2px 5px}
.look-dialog .look-pieces .thumb{width:38px;height:29px}
.look-dialog-main{display:flex;gap:12px;align-items:flex-start}
.look-dialog .look-media{flex:0 0 132px;width:132px;height:264px;max-height:none;aspect-ratio:1/2}
.look-dialog-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.look-photo-tip{margin:0;font-size:11px;line-height:1.5;text-align:center}.look-photo-tip b{color:var(--ink)}

/* 💬 feedback window on the HUD screen (and room for its button in the header) */
@media(max-width:560px){.top-right{gap:5px}.top-right .themebtn{width:30px;height:30px;font-size:13px}}
.feedback-card textarea{resize:vertical;min-height:110px;font:inherit;font-size:14px;line-height:1.5}
.feedback-card #feedbackCount{align-self:flex-end;margin-top:-6px}
/* admin: feedback list */
.adm-fb{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.adm-fb.new{border-color:var(--lilacLine)}
.adm-fb-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.adm-fb-kind{font-size:10px;letter-spacing:.12em;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--ink)}
.adm-fb p{margin:0;white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--ink)}
.adm-fb-actions{display:flex;gap:14px}
.adm-fbs{display:flex;flex-direction:column;gap:10px}
.adm-news-form{margin-bottom:16px}.adm-news-form textarea{font-family:inherit;resize:vertical}.adm-news-form .adm-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.adm-news-form #newsSend{margin-left:auto}

/* 💬 the wearer's own feedback and the team's answers */
#feedbackBtn{position:relative}
.fb-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 0 2px var(--bg)}
.fb-dot[hidden]{display:none}
.feedback-card{max-height:calc(100vh - 40px);overflow-y:auto}
.feedback-mine{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.feedback-mine[hidden]{display:none}
.feedback-list{display:flex;flex-direction:column;gap:8px}
.fb-item{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.fb-item.unread{border-color:var(--lilacLine)}
#newsBtn{position:relative}
.news-title{font-size:14px;font-weight:700;color:var(--ink)}
.news-text{margin:0;font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.fb-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.fb-state{font-size:9px;letter-spacing:.14em;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid var(--line2)}
.fb-state.done{color:var(--ok);border-color:var(--okLine)}.fb-state.read{color:var(--lilac)}
.fb-text{margin:0;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fb-reply{padding:8px 10px;border-left:2px solid var(--lilac);background:var(--panel);border-radius:0 8px 8px 0}
.fb-reply strong{font-size:10px;letter-spacing:.14em;color:var(--lilac)}
.fb-reply p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
/* admin: answering */
.adm-fb-reply{display:flex;flex-direction:column;gap:6px}
.adm-fb-reply textarea{min-height:60px;font:inherit;font-size:13px;resize:vertical}
.adm-fb-answer{padding:8px 10px;border-left:2px solid var(--lilac);background:var(--panel);font-size:13px;white-space:pre-wrap}
/* feedback as a short conversation */
.adm-fb{gap:12px;padding:16px}
.adm-fb-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.adm-fb-who{display:flex;align-items:center;gap:10px;flex:1 1 240px;min-width:0}
.adm-fb-who>div:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-fb-who small{font-size:11px;color:var(--dim)}
.adm-fb-name{font-size:14px!important;font-weight:700;color:var(--ink)!important;letter-spacing:0!important;text-align:left;padding:0}
.adm-fb-tags{display:flex;gap:6px;align-items:center}
.adm-fb-kind.k-problem{color:var(--bad);border-color:var(--badLine2)}.adm-fb-kind.k-idea{color:var(--lilac);border-color:var(--lilacLine)}
.adm-badge.new{color:var(--lilac);border-color:var(--lilacLine)}
.adm-fb-head .adm-fb-actions{margin-left:auto}
.adm-fb-talk{display:flex;flex-direction:column;gap:8px}
.adm-fb-chat{margin:0 0 10px;border:1px solid var(--line2);border-radius:10px;padding:8px 12px}
.adm-fb-chat>summary{cursor:pointer;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.adm-fb-chatlog{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:420px;overflow:auto}
.adm-fb-chatrow{max-width:85%;padding:7px 11px;border-radius:10px;font-size:13px;line-height:1.45;white-space:pre-wrap;color:var(--ink);border:1px solid var(--line2);overflow-wrap:anywhere}
.adm-fb-chatrow.r-user{align-self:flex-start;background:var(--bg)}
.adm-fb-chatrow.r-bot,.adm-fb-chatrow.r-agent{align-self:flex-end;background:rgba(201,184,214,.06)}
.adm-fb-chatmark{align-self:center;font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--lilac);padding:4px 0}
.adm-fb-msg{align-self:flex-start;max-width:80%;padding:10px 14px;border-radius:4px 14px 14px 14px;background:var(--bg);border:1px solid var(--line2);font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--ink)}
.adm-fb-ans{align-self:flex-end;max-width:80%;padding:10px 14px;border-radius:14px 4px 14px 14px;background:rgba(201,184,214,.1);border:1px solid var(--lilacLine);font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--ink)}
.adm-fb-ans-head{font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--lilac);margin-bottom:4px}
.adm-fb-box{display:flex;flex-direction:column;gap:8px}.adm-fb-box[hidden]{display:none}
.adm-fb-btns{display:flex;justify-content:flex-end;gap:8px}
.adm-fb-foot{display:flex;align-items:center;justify-content:space-between}
.adm-fb-reply .smallbtn{align-self:auto}

/* WEARING: undo / lock, system layers */
.wear-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wear-tools[hidden]{display:none}
.lock-note{margin:10px 0 0;padding:10px 12px;border:1px solid var(--lilacLine);border-radius:10px;background:var(--panel2);font-size:12px;line-height:1.5;color:var(--ink)}
.lock-note[hidden]{display:none}
.layer-box{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.layer-box[hidden]{display:none}
.layer-row{display:flex;flex-wrap:wrap;gap:8px}
.layer-box .note{margin:0;font-size:11px}
/* UNDO after a change: a bar above the tabs */
.undo-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:29;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 14px 34px rgba(0,0,0,.45);font-size:12px;font-weight:600;color:var(--ink);animation:lcrise .3s ease}
.undo-bar[hidden]{display:none}
.undo-bar button{border:0;border-radius:999px;padding:7px 14px;background:var(--lilac);color:#141116;font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer}
@media(max-width:560px){.undo-bar{bottom:64px}}
body.mini .undo-bar{bottom:3vw;font-size:3.4vw}

/* Help: the start-here film, above the topics */
.help-begin{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--lilac);border-radius:18px;background:var(--panel2);color:var(--ink);text-decoration:none;margin-bottom:8px}
.help-begin:hover{background:var(--panel)}
.help-begin .ic{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--lilac);color:var(--bg);font-size:18px}
.help-begin .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.help-begin strong{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.01em;text-transform:uppercase}
.help-begin .txt span{color:var(--muted);font-size:13px;line-height:1.5}
.help-begin .go{margin-left:auto;flex:0 0 auto;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--lilac)}
@media(max-width:560px){.help-begin{flex-wrap:wrap}.help-begin .go{margin-left:64px}}

.setup-caption .why{display:inline-block;margin-right:2px;color:var(--lilac);font-weight:700;letter-spacing:.04em}

/* Landing: the in-world recording */
.land-video{display:block;width:100%;max-width:960px;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:18px;background:#000}
.land-lead{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:640px}

/* The way back to the wardrobe (help, setup and privacy opened from the HUD): the one filled button on the page, so it is found at once */
.setup-top .smallbtn.backbtn{background:var(--lilac);border-color:var(--lilac);color:#141016;font-weight:800;letter-spacing:.1em;padding:9px 14px;box-shadow:0 4px 18px rgba(201,184,214,.28);animation:backglow 1.6s ease-in-out 3}
.setup-top .smallbtn.backbtn:hover{filter:brightness(1.08)}
@keyframes backglow{0%,100%{box-shadow:0 4px 18px rgba(201,184,214,.28)}50%{box-shadow:0 0 0 6px rgba(201,184,214,.25),0 4px 22px rgba(201,184,214,.5)}}
@media(max-width:560px){.top:has(#backBtn:not([hidden])) .brandsub{display:none}}
@media(prefers-reduced-motion:reduce){.setup-top .smallbtn.backbtn{animation:none}}

/* Line icons (icons.js) sit in the text like a letter */
svg.ic{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.themebtn svg.ic{width:16px;height:16px;vertical-align:middle}

/* Bottom tabs: a line icon before the name */
.tabs .tab svg.ic{width:15px;height:15px;vertical-align:-3px;opacity:.85}
.tabs .tab.selected svg.ic{opacity:1}
@media(max-width:380px){.tabs .tab svg.ic{display:none}}

/* HUD icons: search fields carry a magnifier; icon-only buttons centre their icon; a favourite star is filled */
.searchbox{position:relative;display:block}
.searchbox:has(input[hidden]){display:none}
.searchbox>svg.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);pointer-events:none}
.searchbox>input{padding-left:40px;padding-right:40px;width:100%}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center}
.search-clear:hover{color:var(--ink,inherit);background:rgba(127,127,127,.15)}
.search-clear[hidden]{display:none}
.searchbox.floating{position:fixed;z-index:4;padding:8px 0}
.searchbox.floating::before{content:"";position:absolute;inset:0 -100vw;z-index:-1;background:rgba(var(--bgRgb),.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.totop{position:fixed;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:6;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line3);background:rgba(var(--panelRgb),.92);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.totop[hidden]{display:none}
.totop:hover{border-color:var(--lilac)}
.totop svg.ic{width:18px;height:18px;margin:0}
@media(max-width:560px){.totop{bottom:calc(66px + env(safe-area-inset-bottom));width:36px;height:36px}}
.search-clear svg.ic{width:16px;height:16px;margin:0}
.coveredit svg.ic,.fav svg.ic,.look-more svg.ic,.iconbtn svg.ic,.x svg.ic,.helpbtn svg.ic{width:15px;height:15px;vertical-align:middle}
.iconbtn svg.ic{width:18px;height:18px}
.fav.on svg.ic{fill:currentColor}
.cat svg.ic,.smallbtn svg.ic,.btn svg.ic,.linkbtn svg.ic,.removeall svg.ic,#undoBtn svg.ic{width:14px;height:14px;vertical-align:-2px}
#brandBtn svg.ic:last-child{width:12px;height:12px;margin-left:2px}
.mini-add svg.ic{width:14px;height:14px;vertical-align:middle}

/* Site icons: the logo links home; buttons and step titles carry a line icon */
a.brandline{text-decoration:none;color:inherit}
.land-btn svg.ic,.setup-controls svg.ic,.help-start svg.ic,.backbtn svg.ic{width:15px;height:15px;vertical-align:-3px}
.adv-steps strong svg.ic,.adv-where-steps strong svg.ic{width:16px;height:16px;vertical-align:-3px;margin-right:4px;color:var(--lilac)}
.edit-label svg.ic{width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--lilac)}
.adv-ad-btns svg.ic{width:9px;height:9px;vertical-align:-1px}
.site-menu-btn svg.ic{width:16px;height:16px;vertical-align:middle}

/* Icon + words in a flex button: the space between them is not drawn there, so keep a gap */
.land-btn{gap:.6em}
/* One even space between an icon and its words, everywhere; icon-only buttons stay centred */
svg.ic{margin-right:.35em}
.fav svg.ic,.coveredit svg.ic,.look-more svg.ic,.iconbtn svg.ic,.x svg.ic,.themebtn svg.ic,.mini-add svg.ic,.searchbox>svg.ic,
.land-card .ic svg,.help-card .ic svg.ic,.help-begin .ic svg.ic,#selFav svg.ic,.land-btn svg.ic,.tabs .tab svg.ic,.connect-hint-ic svg.ic{margin-right:0}
#nextBtn svg.ic,#brandBtn svg.ic:last-child{margin-right:0;margin-left:.35em}

/* Setup: part tabs, the next-part button and the note cards carry icons */
.setup-chapters .cat svg.ic{width:13px;height:13px;vertical-align:-2px}
.setup-next svg.ic{width:14px;height:14px;vertical-align:-3px}
.setup-next svg.ic.after{margin:0 0 0 .35em}
.privacy-card strong svg.ic{width:15px;height:15px;vertical-align:-3px;color:var(--lilac)}

/* Advertiser report (advertise?me=, and a code check) */
.adv-report{flex-direction:column;align-items:stretch;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.adv-mine-list .adv-report{border-bottom:1px solid var(--line);padding-bottom:18px}
.adv-report-head{display:flex;gap:16px;align-items:center}
.adv-report-head img{width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;flex:0 0 auto}
.adv-report-title{display:flex;flex-direction:column;gap:5px;min-width:0}
.adv-report-title strong{font-size:18px;color:var(--ink)}
.adv-report-title small{color:var(--dim);font-size:12px}
.adv-report-head>.adv-ring{margin-left:auto}
.adv-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--lilacLine);color:var(--lilac);font-size:11px;font-weight:700;letter-spacing:.06em}
.adv-chip svg.ic{width:13px;height:13px;margin:0}
.adv-chip.active{border-color:var(--okLine);color:var(--ok)}
.adv-chip.rejected,.adv-chip.deleted{border-color:var(--badLine2);color:var(--bad)}
.adv-chip.awaiting_payment{border-color:var(--warnLine);color:var(--warn)}
.adv-dates{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:12px}
.adv-dates svg.ic{width:14px;height:14px;vertical-align:-3px;color:var(--lilac)}
.adv-pay,.adv-note{margin:0;color:var(--muted);font-size:13px}
.adv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adv-kpi{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px;cursor:default}
.adv-kpi-top{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.adv-kpi-top svg.ic{width:14px;height:14px;margin:0;color:var(--lilac)}
.adv-kpi strong{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.adv-chart{display:flex;flex-direction:column;gap:8px}
.adv-chart-head{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.adv-chart-head svg.ic{width:14px;height:14px;margin:0;color:var(--lilac)}
.adv-bars{height:120px;display:flex;align-items:flex-end;gap:2px;padding:6px 0;border-bottom:1px solid var(--line2)}
.adv-bar{position:relative;flex:1 1 0;height:100%;display:flex;align-items:flex-end;cursor:default}
.adv-bar i{display:block;width:100%;background:var(--lilacLine);border-radius:4px 4px 0 0;transition:background .2s}
.adv-bar.best i{background:var(--lilac)}
.adv-bar:hover i{background:var(--ink)}
.adv-bar b{position:absolute;left:50%;width:8px;height:8px;margin:0 0 4px -4px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--panel2)}
.adv-axis{display:flex;justify-content:space-between;color:var(--dim);font-size:11px}
.adv-chart-key{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px}
.adv-chart-key .k-view{width:10px;height:10px;border-radius:2px;background:var(--lilacLine)}
.adv-chart-key .k-click{width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:10px}
.adv-best{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.adv-best svg.ic{width:14px;height:14px;margin:0;color:var(--warn)}
@media(max-width:620px){.adv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.adv-report-head{flex-wrap:wrap}.adv-report-head img{width:120px}.adv-report-head>.adv-ring{margin:0 auto}}
.adv-status-card.adv-report>.adv-report-head{flex-direction:row;gap:16px}
.adv-status-card.adv-report>.adv-dates{flex-direction:row;gap:8px 18px}
.adv-status-card.adv-report>.adv-kpis{display:grid;gap:10px}
.adv-status-card.adv-report>.adv-chart{gap:8px}
.adv-report-head>.adv-ring{position:relative;display:block;flex:0 0 auto;width:130px;height:130px;margin-left:auto}
@media(max-width:620px){.adv-report-head>.adv-ring{margin:0 auto}}

.adv-bars,.adv-axis{max-width:100%}

/* Landing: which viewers work */
.land-need{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.land-need svg.ic{width:16px;height:16px;margin:2px 0 0;color:var(--lilac);flex:0 0 auto}
.land-need a{color:var(--lilac)}
.land-req{margin:8px 0 16px;padding:20px 22px;border:1px solid var(--warnLine);border-radius:16px;background:var(--panel2);display:flex;flex-direction:column;gap:12px}
.land-req-head{display:flex;align-items:center;gap:10px;font-size:16px}
.land-req-head svg.ic{width:20px;height:20px;margin:0;color:var(--warn)}
.land-req p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.land-req-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.land-req-cols>div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.land-req-cols>div>b{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.land-req-cols svg.ic{width:16px;height:16px;margin:0}
.land-req-cols .ok>b{color:var(--ok)}.land-req-cols .no>b{color:var(--bad)}
.land-req .fine{font-size:12px;color:var(--dim)}
@media(max-width:700px){.land-req-cols{grid-template-columns:1fr}}
.land-req .land-fs{align-self:flex-start;margin-top:4px}
.adm-more{align-self:center}
#userMore{display:flex;justify-content:center;margin:12px 0}
#userMore:empty{display:none}
#userTiles{margin-bottom:6px}
.adm-users td.zero{color:var(--faint)}
.adm-users td.adm-worn{color:var(--ok);font-weight:700}
.adm-users td.adm-oldhud{color:var(--warn)}
.adm-trash{margin-top:16px}
.adm-trash summary{cursor:pointer;list-style:none}.adm-trash summary::-webkit-details-marker{display:none}
.adm-trash summary strong::before{content:'▸ ';color:var(--dim)}.adm-trash[open] summary strong::before{content:'▾ '}
.adm-trash[open]>.adm-events{margin-top:12px}

/* Admin sign-in */
.adm-login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.adm-login-card{width:min(380px,100%);display:flex;flex-direction:column;gap:14px;padding:28px 26px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.adm-login-brand{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.adm-login-brand .brand{font-size:28px}
.adm-login-card h1{margin:0;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.02em;text-transform:uppercase}
.adm-login-card .field{height:42px;min-height:0;padding:8px 12px;font-size:15px}
.adm-login-card .adm-check{padding:0;font-weight:600;letter-spacing:0;font-size:12px;color:var(--muted)}
.adm-login-card .smallbtn{height:42px;justify-content:center}
.adm-login-err{margin:0;padding:10px 12px;border-radius:10px;border:1px solid var(--badLine2);color:var(--bad);font-size:13px}
.adm-login-err[hidden]{display:none}
.adm-login-back{align-self:center;color:var(--dim);font-size:12px;text-decoration:none}.adm-login-back:hover{color:var(--ink)}

/* Landing: the two editions */
.land-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.land-plan{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel2)}
.land-plan.best{border-color:var(--lilacLine);box-shadow:0 0 0 1px var(--lilacLine) inset}
.land-plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.land-plan-head strong{font-size:14px;letter-spacing:.14em}
.land-price{font-family:var(--display);font-size:34px;line-height:1;color:var(--ink)}
.land-plan.best .land-price{color:var(--lilac)}
.land-plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px;flex:1}
.land-plan li::before{content:'✓';color:var(--ok);font-weight:700;margin-right:10px}
.land-plan .land-btn{align-self:flex-start}
.land-plan-note{margin:12px 0 0;color:var(--dim);font-size:13px}
@media(max-width:700px){.land-plans{grid-template-columns:1fr}}
.land-plan .land-link{color:var(--dim);font-size:12px;text-decoration:underline;margin-top:-6px}
.adm-sales td.adm-worn{color:var(--ok);font-weight:700}.adm-sales td.adm-oldhud{color:var(--warn)}
.adm-addbuyer{margin-top:12px}.adm-addbuyer .field{height:38px;min-height:0;padding:6px 10px;flex:1 1 180px}.adm-addbuyer #buyerGross{flex:0 0 110px}
.adm-ed.full{border-color:var(--okLine);color:var(--ok)}.adm-ed.old{opacity:.6}

/* hidden folders and the 'hide' action */
.hidden-box{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hidden-list{width:100%;display:flex;flex-direction:column;gap:6px}.hidden-list[hidden]{display:none}
.hidden-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.edit-hide{align-self:flex-start;color:var(--muted)}
.root-note{margin:18px 0 0;text-align:center;color:var(--dim);font-size:12px}

/* Marketplace cover picker */
.mp-card{width:min(560px,100%)}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:52vh;overflow:auto;padding:2px}
.mp-grid.busy{opacity:.6;pointer-events:none}
.mp-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.mp-pick{display:flex;flex-direction:column;gap:3px;text-align:left;background:transparent;border:1px solid var(--line2);border-radius:10px;padding:6px;color:var(--ink);min-width:0}
.mp-pick:hover,.mp-item.picked .mp-pick{border-color:var(--lilac)}
.mp-pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--line)}
.mp-title{font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-sub{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-more{align-self:flex-start;font-size:9px}
.mp-back{grid-column:1/-1;justify-self:start}
.edit-source{margin:0;font-size:11px;color:var(--dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.edit-source svg{width:13px;height:13px}
.edit-source a{color:var(--lilac)}
#coverNote .linkbtn{display:inline;padding:0}

/* a cover being found on the Marketplace, and its arrival */
.cover.finding::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(201,184,214,.16) 50%,transparent 70%);background-size:250% 100%;animation:lcshimmer 1.6s linear infinite}
.cover.finding.now{border-color:var(--lilacLine)}
.cover.finding.now::after{background-image:linear-gradient(105deg,transparent 25%,rgba(201,184,214,.3) 50%,transparent 75%);animation-duration:1.1s}
.cover.finding .addcover-hint{display:flex;align-items:center;justify-content:center;gap:7px;opacity:.65}
.cover.finding.now .addcover-hint{opacity:1}
.cover.finding .addcover-hint::before{content:'';width:9px;height:9px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lcspin .8s linear infinite}
@keyframes lcshimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.cover img.arrived{animation:lcarrive .9s cubic-bezier(.2,.7,.2,1)}
@keyframes lcarrive{from{opacity:0;transform:scale(1.08);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.cover.finding::after,.cover.finding .addcover-hint::before,.cover img.arrived{animation:none}}
.cover.finding .addcover-hint{left:40px;right:40px;white-space:nowrap}

/* WEARING: the objects worn with a product */
.pieces-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:2px 0;color:var(--muted)}
.pieces-btn svg{width:12px;height:12px}
.pieces{list-style:none;margin:4px 0 0;padding:8px 10px;border-left:2px solid var(--line2);display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}

/* FOLDERS list: sub-folders indented */
.pick.depth1{padding-left:28px}.pick.depth2{padding-left:44px}.pick.depth3{padding-left:60px}

/* ✎ popup: Marketplace suggestions for a product without a cover */
.edit-suggest{display:flex;flex-direction:column;gap:8px}
.edit-suggest .note{margin:0}
.mp-grid.mp-suggest{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:8px}
.mp-suggest .mp-pick{padding:4px}
.mp-suggest .mp-title{font-size:10px}
.operation-card.dialog>*{flex-shrink:0}

/* admin: worn pieces, cover source badges */
.adm-pieces{list-style:none;margin:6px 0 0;padding:0 0 0 10px;border-left:2px solid var(--line2);display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.adm-src{position:absolute;right:6px;bottom:6px;font-size:8px;letter-spacing:.14em;font-weight:700;padding:3px 6px;border-radius:999px;background:var(--bg);color:var(--muted);border:1px solid var(--line2)}
.adm-src.auto,.adm-src.picked{color:var(--lilac);border-color:var(--lilacLine)}

/* profile picture (top right) and the settings menu */
.mebtn{overflow:hidden;padding:0}
.mebtn.has-pic{border-color:var(--lilacLine)}
.mebtn img{width:100%;height:100%;object-fit:cover}
.set-card{width:min(440px,100%)}
.set-head{display:flex;align-items:center;gap:12px}
.set-pic{width:52px;height:52px;flex:0 0 auto;border-radius:999px;overflow:hidden;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line2);font-family:var(--display);font-size:22px;color:var(--lilac)}
.set-pic img{width:100%;height:100%;object-fit:cover}
.set-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.set-who strong{font-size:16px;overflow-wrap:anywhere}
.set-who small{font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.set-row span{display:flex;flex-direction:column;gap:3px;min-width:0}
.set-row b{font-size:13px;font-weight:600}
.set-row small{font-size:11px;color:var(--dim);line-height:1.35}
.switch{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:40px;height:22px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;transition:background .2s;margin:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .2s}
.switch:checked{background:var(--lilac)}
.switch:checked::after{transform:translateX(18px);background:var(--bg)}
.switch:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
.set-notes{display:flex;flex-direction:column;gap:6px}
.set-rel{border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.set-rel summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;font-size:12px;list-style:none}
.set-rel summary::-webkit-details-marker{display:none}
.set-rel summary small{color:var(--dim);font-size:10px}
.set-rel ul{margin:8px 0 2px;padding-left:16px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);line-height:1.4}
.set-links{margin:0;font-size:12px;color:var(--dim)}
.set-links a{color:var(--lilac)}
.set-delete{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
.set-delete svg{width:13px;height:13px}

/* WEARING: pieces open their product's Marketplace listing */
.piece-link{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;display:inline-flex;align-items:center;gap:6px;cursor:pointer;overflow-wrap:anywhere}
.piece-link svg{width:11px;height:11px;flex:0 0 auto;opacity:.5}
.piece-link:hover{color:var(--lilac)}.piece-link:hover svg{opacity:1}
.piece-mp{display:inline-flex;align-items:center;gap:5px;font-size:9px;padding:4px 0 0;color:var(--lilac)}
.piece-mp svg{width:12px;height:12px}

.pick.danger{color:var(--bad)}

/* review request */
.review-card{width:min(380px,100%);text-align:center;align-items:center}
.review-card .note{margin:0}
.review-card .btn{width:100%}
.review-card .dialog-actions{width:100%}
.review-stars{display:flex;gap:6px;color:var(--lilac)}
.review-stars svg{width:22px;height:22px;fill:currentColor}
.operation-card.dialog.review-card{align-items:center;text-align:center}
.editpreview.finding{position:relative}.editpreview.finding::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(201,184,214,.2) 50%,transparent 70%);background-size:250% 100%;animation:lcshimmer 1.1s linear infinite}

/* collection: the product's Marketplace listing, bottom left of the cover */
.covermp{position:absolute;left:8px;bottom:8px;width:32px;height:32px;border-radius:9px;background:rgba(var(--bgRgb),.8);border:1px solid var(--line2);color:var(--muted);display:grid;place-items:center}
.covermp:hover{color:var(--lilac);border-color:var(--lilacLine)}
.covermp svg.ic{width:15px;height:15px}
@media(max-width:560px){.covermp{width:26px;height:26px;left:6px;bottom:6px;border-radius:7px}.covermp svg.ic{width:13px;height:13px}}
.cover.addcover .covermp~.addcover-hint,.cover .covermp~.addcover-hint{left:40px;right:40px}

/* admin brand report */
.adm-report{width:min(620px,100%)}
.adm-report .adm-li-txt a{color:var(--ink)}
.adm-report-text{min-height:180px;resize:vertical;font-size:12px;line-height:1.5;white-space:pre-wrap}

/* admin brands: merged spellings, tap to fix */
.adm-brand-name{cursor:pointer}
.adm-aka{display:block;font-weight:400;font-size:10px;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}

.worn.also-on .worn-name{color:var(--muted);font-size:12px}

/* WEARING: × takes off a single piece */
.pieces li{display:flex;align-items:center;gap:8px;justify-content:space-between}
.piece-x{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);background:transparent;color:var(--bad);display:grid;place-items:center;padding:0}
.piece-x svg{width:11px;height:11px}
.piece-x:disabled{opacity:.4}

/* body-fit / size variant chip on a card */
.fit-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 8px;border-radius:999px;border:1px solid var(--lilacLine);background:transparent;color:var(--lilac);font-size:9px;font-weight:700;letter-spacing:.12em}
.fit-chip svg{width:11px;height:11px}
.set-row .smallbtn{flex:0 0 auto}
button.set-row{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:left}
.set-val{flex:0 0 auto;color:var(--lilac);font-size:12px;font-weight:700;letter-spacing:.06em}

/* ---- product page, in the style of the Marketplace pictures: a three.js layer (land3d.js) of stardust and glows behind
   everything, huge Anton headlines, the live demo in a lit 3D device, glassy cards that rise in as they scroll into view */
.land-3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
body.landing.has-3d .page{position:relative;z-index:1}
body.landing.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.landing.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.has-3d .land-dust{display:none}
body.landing .land-hero h1.display{font-size:clamp(52px,7.4vw,112px);line-height:.92;text-transform:uppercase;letter-spacing:.005em}
body.landing .land-hero h1 .accent,body.landing .land-smart h2 .accent{color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
body.landing .land .display.sm{font-size:clamp(40px,5.2vw,76px);line-height:.95;text-transform:uppercase}
body.landing .land-device{border-radius:30px;border:10px solid #1b171f;background:#0f0d11;
 box-shadow:0 0 0 1px #3a333f,0 50px 110px rgba(0,0,0,.6),0 0 90px rgba(201,184,214,.28),inset 0 0 0 1px rgba(255,255,255,.04);
 transform:perspective(1400px) rotateY(-10deg) rotateX(2deg);transition:transform .2s ease-out;will-change:transform}
:root[data-theme=light] body.landing .land-device{border-color:#2a2430}
body.landing .land-demo{perspective:1400px}
/* Smart wear: the old piece goes, the new one comes on, the rest stays */
.land-smart{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding:clamp(40px,8vh,90px) 0 20px}
.land-smart h2.display{font-size:clamp(56px,8vw,120px);line-height:.92;text-transform:uppercase;margin:0}
.land-smart .land-lead b{color:var(--ink)}
.smart-row{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);margin-top:18px;flex-wrap:wrap}
.sc{position:relative;margin:0;width:clamp(120px,15vw,190px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#141217;border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.5);display:flex;flex-direction:column}
.sc img{width:100%;flex:1;min-height:0;object-fit:cover;display:block}
.sc figcaption{height:36px;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.18em;background:#efe9e4;color:#0b0a0c}
.sc.on{width:clamp(140px,18vw,224px);border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.4),0 24px 64px rgba(201,184,214,.32)}
.sc.on figcaption,.sc.stay figcaption{background:#1f1b22;color:#8fd9ad}
.sc.off{opacity:.55;transform:rotate(-4deg)}
.sc-chip{position:absolute;left:10px;top:10px;font-size:10px;font-weight:800;letter-spacing:.16em;border-radius:999px;padding:4px 10px;background:#0b0a0c;color:#8fd9ad;border:1px solid #2e5a41}
.sc-chip.off{color:#f0a1ad;border-color:#5a3540}
.smart-arrow{color:var(--lilac);display:grid;place-items:center}
.smart-note{font-size:14px;color:var(--muted)}
/* glassy cards over the stars */
body.has-3d .land-card,body.has-3d .land-plan,body.has-3d .land-req,body.has-3d .land-steps li{background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-theme=light] body.has-3d .land-card,:root[data-theme=light] body.has-3d .land-plan,:root[data-theme=light] body.has-3d .land-req,:root[data-theme=light] body.has-3d .land-steps li{background:rgba(255,255,255,.72)}
body.landing .land-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
body.landing .land-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 32px rgba(201,184,214,.16)}
body.landing .land-price{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1}
body.landing .land-plan.best{border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.3),0 18px 50px rgba(201,184,214,.22)}
/* rising in: sections and the Smart wear cards, one after another */
body.has-3d .land-section,body.has-3d .land-smart{opacity:0;transform:translateY(46px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
body.has-3d .land-section.in,body.has-3d .land-smart.in{opacity:1;transform:none}
body.has-3d .land-smart .smart-row>*{opacity:0;transform:translateY(30px) scale(.96);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.has-3d .land-smart.in .smart-row>*{opacity:1;transform:none}
body.has-3d .land-smart.in .sc.off{opacity:.55;transform:rotate(-4deg)}
body.has-3d .land-smart.in .smart-row>:nth-child(2){transition-delay:.25s}
body.has-3d .land-smart.in .smart-row>:nth-child(3){transition-delay:.5s}
body.has-3d .land-smart.in .smart-row>:nth-child(4){transition-delay:.75s}
body.has-3d .land-smart.in .smart-row>:nth-child(5){transition-delay:.9s}
body.has-3d .land-grid .land-card{opacity:0;transform:translateY(24px)}
body.has-3d .land-section.in .land-grid .land-card{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){body.has-3d .land-section,body.has-3d .land-smart,body.has-3d .land-smart .smart-row>*,body.has-3d .land-grid .land-card{opacity:1;transform:none;transition:none}}
@media(max-width:620px){.smart-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.smart-arrow{display:none}.sc,.sc.on{width:auto}}

/* ---- help page, in the same style (land3d.js draws the stars behind it) */
body.help-page.has-3d .page{position:relative;z-index:1}
body.help-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.help-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.help-page .setup-head h1.display{font-size:clamp(48px,6.6vw,104px);line-height:.92;text-transform:uppercase}
body.help-page .setup-head h1 .accent{color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
body.help-page .setup-head .lead{max-width:760px}
body.help-page #chooseTitle,body.help-page .faq-group,body.help-page .help-others-wrap h2{font-size:clamp(32px,3.8vw,54px);line-height:.98;text-transform:uppercase}
body.help-page .help-begin{padding:24px 26px;border-color:#cdbfd9;background:linear-gradient(135deg,rgba(52,41,60,.92),rgba(24,20,28,.92));box-shadow:0 0 0 1px rgba(201,184,214,.3),0 20px 60px rgba(201,184,214,.22);transition:transform .25s ease,box-shadow .25s ease}
body.help-page .help-begin:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(201,184,214,.45),0 26px 70px rgba(201,184,214,.3)}
body.help-page .help-begin .ic{width:58px;height:58px;font-size:22px;box-shadow:0 0 30px rgba(201,184,214,.55)}
body.help-page .help-begin strong{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.01em;text-transform:uppercase}
body.help-page .help-search input{height:58px;font-size:17px;border-radius:999px;padding-left:52px;border-color:#4a444c;background:rgba(20,18,23,.8);box-shadow:0 0 0 1px rgba(201,184,214,.12),0 12px 40px rgba(0,0,0,.35)}
body.help-page .help-search input:focus{border-color:var(--lilac);box-shadow:0 0 0 3px rgba(201,184,214,.25),0 0 40px rgba(201,184,214,.25)}
body.help-page .help-search>svg.ic{left:20px;width:20px;height:20px}
body.help-page .help-card,body.help-page .faq details,body.help-page .help-hit,body.help-page .help-other{background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-theme=light] body.help-page .help-card,:root[data-theme=light] body.help-page .faq details,:root[data-theme=light] body.help-page .help-hit,:root[data-theme=light] body.help-page .help-other{background:rgba(255,255,255,.75)}
body.help-page .help-card{border-radius:20px;padding:20px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
body.help-page .help-card:hover{transform:translateY(-4px);border-color:var(--lilacLine);box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 32px rgba(201,184,214,.16)}
body.help-page .help-card .ic{font-size:26px}
body.help-page .help-card strong{font-size:15px}
body.help-page .faq details{border-radius:18px}
body.help-page .faq details[open]{border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.2),0 16px 44px rgba(201,184,214,.14)}
body.help-page .faq summary{font-size:15px;padding:18px 0}
/* the topic cards rise in one after another */
@keyframes helpRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.help-page #topics .help-card,body.help-page .help-cards.small .help-card{animation:helpRise .6s cubic-bezier(.2,.7,.2,1) both}
body.help-page #topics .help-card:nth-child(2){animation-delay:.05s}body.help-page #topics .help-card:nth-child(3){animation-delay:.1s}
body.help-page #topics .help-card:nth-child(4){animation-delay:.15s}body.help-page #topics .help-card:nth-child(5){animation-delay:.2s}
body.help-page #topics .help-card:nth-child(6){animation-delay:.25s}body.help-page #topics .help-card:nth-child(7){animation-delay:.3s}
body.help-page #topics .help-card:nth-child(8){animation-delay:.35s}body.help-page #topics .help-card:nth-child(n+9){animation-delay:.4s}
@media(prefers-reduced-motion:reduce){body.help-page #topics .help-card,body.help-page .help-cards.small .help-card{animation:none}}

/* ---- setup guide, in the same style */
body.setup-guide.has-3d .page{position:relative;z-index:1}
body.setup-guide.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.setup-guide.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.setup-guide .setup-head{max-width:980px}
body.setup-guide .setup-head h1.display{font-size:clamp(52px,7vw,112px);line-height:.92;text-transform:uppercase}
body.setup-guide .setup-head h1 .accent{color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
body.setup-guide .setup-chapters{gap:8px}
body.setup-guide .setup-chapters .cat{padding:12px 18px;font-size:11px;border-radius:999px;background:rgba(20,18,23,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.setup-guide .setup-chapters .cat.selected{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:0 0 0 1px rgba(201,184,214,.3),0 0 30px rgba(201,184,214,.35)}
body.setup-guide .setup-stage{border:10px solid #1b171f;border-radius:28px;box-shadow:0 0 0 1px #3a333f,0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(201,184,214,.25)}
:root[data-theme=light] body.setup-guide .setup-stage{border-color:#2a2430}
body.setup-guide .setup-caption,body.setup-guide .setup-steps li,body.setup-guide .setup-notes .privacy-card{background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-theme=light] body.setup-guide .setup-caption,:root[data-theme=light] body.setup-guide .setup-steps li,:root[data-theme=light] body.setup-guide .setup-notes .privacy-card{background:rgba(255,255,255,.75)}
body.setup-guide .setup-caption{padding:22px;border:1px solid #cdbfd9;border-radius:22px;box-shadow:0 0 0 1px rgba(201,184,214,.2),0 18px 50px rgba(201,184,214,.16)}
body.setup-guide #stepTitle{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
body.setup-guide .setup-controls .smallbtn{border-radius:999px;background:rgba(20,18,23,.7)}
body.setup-guide #playBtn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body.setup-guide .setup-next{border-radius:999px;box-shadow:0 0 30px rgba(201,184,214,.35)}
body.setup-guide .setup-notes .privacy-card{border-radius:20px}

/* ---- privacy page, in the same style: each part is a glassy card */
body.privacy-page.has-3d .page{position:relative;z-index:1}
body.privacy-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.privacy-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.privacy-page .privacy{max-width:900px}
body.privacy-page .privacy h1.display{font-size:clamp(52px,7vw,108px);line-height:.92;text-transform:uppercase}
body.privacy-page .privacy .lead{font-size:17px;max-width:760px}
.pv-card{padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-theme=light] .pv-card{background:rgba(255,255,255,.75)}
.pv-card h2{margin:0 0 10px!important;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px)!important;line-height:1;text-transform:uppercase;letter-spacing:.01em;padding-left:14px;border-left:4px solid var(--lilac)}
.pv-card ul{list-style:none;padding-left:0!important;display:flex;flex-direction:column;gap:10px}
.pv-card li{position:relative;padding-left:28px}
.pv-card li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--lilac);border-bottom:2.5px solid var(--lilac);transform:rotate(-45deg)}
.pv-card p:last-child,.pv-card ul:last-child{margin-bottom:0}
body.has-3d .pv-card{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.has-3d .pv-card.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){body.has-3d .pv-card{opacity:1;transform:none;transition:none}}

/* ---- advertise page, in the same style */
body.adv-page.has-3d .page{position:relative;z-index:1}
body.adv-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.adv-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.adv-page .adv-main{max-width:1100px}
body.adv-page .adv-hero h1.display{font-size:clamp(56px,8vw,124px);line-height:.9;text-transform:uppercase}
body.adv-page .adv-hero h1 .accent,body.adv-page #resultTitle .accent{color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
body.adv-page .adv-hero .lead{font-size:17px;max-width:760px}
body.adv-page .adv-steps{gap:14px}
body.adv-page .adv-steps li{padding:22px;border-radius:20px;font-size:14px;background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.adv-page .adv-steps li::before{font-size:44px;line-height:1;text-shadow:0 0 24px rgba(201,184,214,.5)}
body.adv-page .adv-steps strong{font-size:15px}
body.adv-page .adv-where{padding:26px;border-radius:24px;background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:30px}
body.adv-page .adv-hud{border:10px solid #1b171f;border-radius:26px;padding:12px;box-shadow:0 0 0 1px #3a333f,0 40px 90px rgba(0,0,0,.55),0 0 70px rgba(201,184,214,.25);transform:perspective(1400px) rotateY(-10deg) rotateX(2deg);transition:transform .2s ease-out;will-change:transform}
body.adv-page .adv-form,body.adv-page .adv-status,body.adv-page .adv-mine{border-radius:24px;padding:28px;background:rgba(20,18,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-theme=light] body.adv-page .adv-steps li,:root[data-theme=light] body.adv-page .adv-where,:root[data-theme=light] body.adv-page .adv-form,:root[data-theme=light] body.adv-page .adv-status,:root[data-theme=light] body.adv-page .adv-mine{background:rgba(255,255,255,.75)}
body.adv-page .adv-form>.edit-label{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.01em;color:var(--ink);text-transform:uppercase;margin-top:6px}
body.adv-page .adv-form>.edit-label svg.ic{width:22px;height:22px;color:var(--lilac);vertical-align:-3px}
body.adv-page .adv-package{padding:18px;border-radius:18px;background:rgba(15,13,17,.8);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body.adv-page .adv-package:hover{transform:translateY(-3px)}
body.adv-page .adv-package.selected{border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.35),0 14px 40px rgba(201,184,214,.25)}
body.adv-page .adv-package b,body.adv-page .adv-package strong{font-size:15px}
body.adv-page #submit{border-radius:999px;padding:16px 28px;font-size:14px;box-shadow:0 0 34px rgba(201,184,214,.3)}
body.adv-page .adv-result{border-radius:24px;padding:30px;background:linear-gradient(135deg,rgba(52,41,60,.92),rgba(24,20,28,.92));border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.3),0 22px 60px rgba(201,184,214,.25)}
body.adv-page #resultTitle{font-size:clamp(40px,5vw,72px);text-transform:uppercase}
body.adv-page #statusForm input{border-radius:999px;height:52px;font-size:16px;letter-spacing:.2em;text-transform:uppercase}
body.adv-page .adv-package .adv-price{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.05;letter-spacing:.01em}
body.adv-page .adv-package.selected .adv-price{color:var(--lilac);text-shadow:0 0 24px rgba(201,184,214,.4)}
body.adv-page .adv-kiosk{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #cdbfd9;border-radius:999px;padding:12px 22px;color:var(--ink);box-shadow:0 0 24px rgba(201,184,214,.25)}
body.adv-page .adv-kiosk:hover{background:var(--ink);color:var(--bg)}

/* ---- admin sign-in, in the same style: a big headline beside a glassy card */
body.adm-login-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#241b2a 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.adm-login-page.has-3d{background:radial-gradient(90% 70% at 80% 0%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.adm-login-page .adm-login{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,120px);max-width:1200px;margin:0 auto}
.adm-login-hero{flex:1 1 0;min-width:0;max-width:600px}
.adm-login-kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--lilac);margin-bottom:14px}
.adm-login-big{font-family:var(--display);font-size:clamp(64px,9vw,150px);line-height:.88;letter-spacing:.005em;color:var(--ink)}
.adm-login-big .accent,.adm-login-card h1 .accent{display:block;color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
.adm-login-card h1 .accent{display:inline}
.adm-login-hero p{margin:22px 0 0;max-width:440px;color:var(--muted);font-size:16px;line-height:1.55}
body.adm-login-page .adm-login-card{flex:0 0 auto;width:min(400px,100%);padding:32px 30px;gap:16px;border-radius:24px;border-color:#cdbfd9;background:rgba(20,18,23,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(201,184,214,.2),0 30px 90px rgba(0,0,0,.5),0 0 70px rgba(201,184,214,.18)}
:root[data-theme=light] body.adm-login-page .adm-login-card{background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(138,112,168,.2),0 24px 70px rgba(80,60,100,.18)}
body.adm-login-page .adm-login-card h1{font-size:44px;line-height:1}
body.adm-login-page .adm-login-card .field{height:46px;border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease}
body.adm-login-page .adm-login-card .field:focus{border-color:#cdbfd9;box-shadow:0 0 0 3px rgba(201,184,214,.22);outline:none}
body.adm-login-page .adm-login-card .smallbtn{height:48px;border-radius:999px;font-size:14px;letter-spacing:.12em;box-shadow:0 0 30px rgba(201,184,214,.35)}
body.has-3d .adm-login-hero,body.has-3d .adm-login-card{animation:admIn .8s cubic-bezier(.2,.7,.2,1) both}
body.has-3d .adm-login-card{animation-delay:.12s}
@keyframes admIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.has-3d .adm-login-hero,body.has-3d .adm-login-card{animation:none}}
@media(max-width:860px){
  body.adm-login-page .adm-login{flex-direction:column;justify-content:center;gap:26px}
  .adm-login-hero{flex:none;text-align:center;max-width:none}
  .adm-login-big{font-size:clamp(54px,17vw,84px)}
  .adm-login-big .accent{display:inline}
  .adm-login-hero p{display:none}
}

/* ---- the HUD screen, in the same style: stardust behind, glassy bars and cards, lilac glows */
body.hud-3d{--glass:rgba(20,18,23,.66);--glassHi:rgba(28,24,32,.78);--glow:rgba(201,184,214,.35)}
:root[data-theme=light] body.hud-3d{--glass:rgba(255,255,255,.72);--glassHi:rgba(255,255,255,.86);--glow:rgba(138,112,168,.28)}
body.hud-3d.has-3d{background:radial-gradient(120% 60% at 90% -10%,#2a1f31 0%,var(--bg) 62%) fixed,var(--bg)}
:root[data-theme=light] body.hud-3d.has-3d{background:radial-gradient(120% 60% at 90% -10%,#efe6f5 0%,var(--bg) 62%) fixed,var(--bg)}
body.hud-3d.has-3d .page{position:relative;z-index:1}
/* top bar and tab bar: glass with a lilac edge */
body.hud-3d .top{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:rgba(201,184,214,.14)}
body.hud-3d .brand{text-shadow:0 0 22px var(--glow)}
body.hud-3d .status{background:var(--glass);box-shadow:inset 0 0 0 1px rgba(201,184,214,.06)}
body.hud-3d .tabs{background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-top-color:rgba(201,184,214,.14)}
body.hud-3d .tab{border-radius:999px;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
body.hud-3d .tab.selected{background:linear-gradient(180deg,rgba(201,184,214,.2),rgba(201,184,214,.08));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(201,184,214,.35),0 0 24px rgba(201,184,214,.22)}
body.hud-3d .tab.selected svg.ic{color:var(--lilac);filter:drop-shadow(0 0 6px var(--glow))}
body.hud-3d .iconbtn{border-radius:999px;background:var(--glass)}
body.hud-3d .badge{box-shadow:0 0 12px var(--glow)}
/* headings: big Anton with a lilac glow */
body.hud-3d .screen .display.sm{text-shadow:0 0 34px var(--glow)}
body.hud-3d .screen .display.sm::first-letter{color:var(--lilac)}
/* search, chips and small buttons: glass pills */
body.hud-3d .searchbox .field,body.hud-3d .field{background:var(--glass);border-color:rgba(201,184,214,.14);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s ease,box-shadow .2s ease}
body.hud-3d textarea.field{border-radius:14px}
body.hud-3d .field:focus{border-color:#cdbfd9;box-shadow:0 0 0 3px rgba(201,184,214,.18)}
body.hud-3d .smallbtn:not(.primary){background:var(--glass)}
body.hud-3d .smallbtn.primary{box-shadow:0 0 22px var(--glow)}
body.hud-3d .seg{background:var(--glass)}
body.hud-3d .cat{background:var(--glass)}
body.hud-3d .seg .cat{background:transparent}
body.hud-3d .cat.selected,body.hud-3d .seg .cat.selected{background:var(--ink);box-shadow:0 0 18px var(--glow)}
body.hud-3d .offline,body.hud-3d .update-card,body.hud-3d .privacy-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* product cards: rounder, glassy, lifting towards the pointer; worn ones glow green */
body.hud-3d .cover{border-radius:18px;border-color:rgba(201,184,214,.12);background-color:var(--panel2);box-shadow:0 14px 34px rgba(0,0,0,.35);transition:transform .25s ease-out,border-color .25s ease,box-shadow .25s ease;will-change:transform}
:root[data-theme=light] body.hud-3d .cover{box-shadow:0 12px 30px rgba(80,60,100,.14)}
body.hud-3d .cover:hover{border-color:#cdbfd9;box-shadow:0 0 0 1px rgba(201,184,214,.25),0 18px 44px rgba(0,0,0,.45),0 0 34px rgba(201,184,214,.2)}
body.hud-3d .tile.on .cover{border-color:var(--ok);box-shadow:0 0 0 1px rgba(143,217,173,.25),0 14px 34px rgba(0,0,0,.35),0 0 30px rgba(143,217,173,.2)}
body.hud-3d .chip:not(.new):not(.ad){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(var(--bgRgb),.72)}
body.hud-3d .chip.new,body.hud-3d .chip.ad{box-shadow:0 0 14px var(--glow)}
body.hud-3d .fav,body.hud-3d .coveredit{border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.hud-3d .btn{border-radius:999px;transition:box-shadow .2s ease,transform .15s ease,background .2s ease}
body.hud-3d .btn:not(.remove):not(.hud):not(:disabled):hover{box-shadow:0 0 26px var(--glow)}
body.hud-3d .btn:active:not(:disabled){transform:scale(.97)}
body.hud-3d .btn.remove,body.hud-3d .btn.hud{background:var(--glass)}
body.hud-3d .tile{animation:hudIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes hudIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* looks and the wearing list */
body.hud-3d .look{background:var(--glass);border-color:rgba(201,184,214,.12);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .25s ease-out,border-color .25s ease,box-shadow .25s ease;will-change:transform}
body.hud-3d .look:hover{border-color:#cdbfd9;box-shadow:0 0 30px rgba(201,184,214,.18)}
body.hud-3d .wornlist{background:var(--glass);border-color:rgba(201,184,214,.12);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.hud-3d .worn{border-bottom-color:rgba(201,184,214,.08)}
body.hud-3d .thumb{border-radius:10px}
body.hud-3d .x,body.hud-3d .removeall{border-radius:999px;background:var(--glass)}
/* connect screen */
body.hud-3d .connect .display{text-shadow:0 0 34px var(--glow)}
body.hud-3d .connect-live,body.hud-3d .connect-steps li{background:var(--glass);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.hud-3d .connect-live{box-shadow:0 0 30px rgba(201,184,214,.14)}
/* dialogs, the busy card, the select bar, toast */
body.hud-3d .operation-overlay{background:rgba(var(--bgRgb),.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.hud-3d .operation-card{background:var(--glassHi);border-color:#cdbfd9;border-radius:24px;box-shadow:0 0 0 1px rgba(201,184,214,.2),0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(201,184,214,.18)}
body.hud-3d .operation-card>strong{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
body.hud-3d .lc-mark{box-shadow:0 0 30px var(--glow)}
body.hud-3d .operation-overlay.success .lc-mark{box-shadow:0 0 36px rgba(143,217,173,.45)}
body.hud-3d .selbar{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top-color:rgba(201,184,214,.14)}
body.hud-3d .toast{box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px var(--glow)}
@media(prefers-reduced-motion:reduce){body.hud-3d .tile{animation:none}body.hud-3d .cover,body.hud-3d .look{transition:none}}
body.hud-3d .searchbox>svg.ic,body.hud-3d .searchbox>.search-clear{z-index:1}
body.hud-3d .searchbox.floating::before{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(201,184,214,.14)}
/* buttons with an icon: icon and capitals centred on one line (the icon used to sit on the baseline, the text looked low) */
:is(.smallbtn,.btn,.cat,.removeall,.linkbtn):has(>svg.ic){display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}
:is(.smallbtn,.btn,.cat,.removeall,.linkbtn):has(>svg.ic)>svg.ic{vertical-align:0;margin:0}
/* the count bubble: the digit sits exactly in the middle of the circle */
.badge{display:inline-block;height:18px;line-height:19px;text-align:center;box-sizing:border-box}

/* ---- the HUD's window buttons on the screen (HUD 2.22: one object, no button prims) */
.win-btns{display:flex;align-items:center;gap:inherit;padding-left:8px;margin-left:2px;border-left:1px solid var(--line2)}
.win-btns[hidden],.mini-win[hidden]{display:none}
.winclose:hover{color:var(--bad)!important;border-color:var(--badLine2)!important}
@media(max-width:560px){body.has-win .brandsub{display:none}}
.mini-win{display:flex;gap:.35em;margin-left:.5em}
.mini-win button{width:2.1em;height:2.1em;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted)}
.mini-win button svg.ic{width:1.05em;height:1.05em;margin:0;vertical-align:0}
.mini-win button:hover{color:var(--ink)}

/* ---- the mini screen in the same style: stardust behind, glass rows and pills */
body.hud-3d.has-3d .mini-app{z-index:1;background:transparent}
body.hud-3d .mini-top strong{text-shadow:0 0 18px var(--glow)}
body.hud-3d .mini-tabs button{border-radius:999px;background:var(--glass);transition:background .2s ease,box-shadow .2s ease}
body.hud-3d .mini-tabs button.selected{background:var(--ink);box-shadow:0 0 16px var(--glow)}
body.hud-3d .mini-search{border-radius:999px;background:var(--glass);border-color:rgba(201,184,214,.14)}
body.hud-3d .mini-row{background:var(--glass);border-color:rgba(201,184,214,.12);border-radius:1em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.hud-3d .mini-row.on{border-color:var(--ok);box-shadow:0 0 16px rgba(143,217,173,.18)}
body.hud-3d .mini-btn{border-radius:999px;box-shadow:0 0 12px var(--glow)}
body.hud-3d .mini-btn.off,body.hud-3d .mini-btn.mini-add{box-shadow:none;background:var(--glass)}
body.hud-3d .mini-win button{background:var(--glass)}
.land-section[hidden]{display:none!important}

/* ---- admin panel, in the same style: stardust behind, glass bars/cards/tables, lilac glows */
body.adm-app{--glass:rgba(20,18,23,.7);--glassHi:rgba(28,24,32,.86);--glow:rgba(201,184,214,.35);--edge:rgba(201,184,214,.14)}
:root[data-theme=light] body.adm-app{--glass:rgba(255,255,255,.74);--glassHi:rgba(255,255,255,.9);--glow:rgba(138,112,168,.28);--edge:rgba(138,112,168,.2)}
body.adm-app.has-3d{background:radial-gradient(90% 60% at 85% -5%,#2a1f31 0%,var(--bg) 60%) fixed,var(--bg)}
:root[data-theme=light] body.adm-app.has-3d{background:radial-gradient(90% 60% at 85% -5%,#efe6f5 0%,var(--bg) 60%) fixed,var(--bg)}
body.adm-app.has-3d .page{position:relative;z-index:1}
body.adm-app .top{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--edge)}
body.adm-app .brand{text-shadow:0 0 22px var(--glow)}
/* section tabs: pills, the open one lilac with a glow */
body.adm-app .adm-tabs .tab{border-radius:999px;background:var(--glass);border:1px solid var(--edge);transition:background .2s ease,box-shadow .2s ease,color .2s ease}
body.adm-app .adm-tabs .tab:hover{color:var(--ink)}
body.adm-app .adm-tabs .tab.selected{background:linear-gradient(180deg,rgba(201,184,214,.26),rgba(201,184,214,.1));color:var(--ink);border-color:rgba(201,184,214,.45);box-shadow:0 0 24px rgba(201,184,214,.22)}
body.adm-app .badge{box-shadow:0 0 12px var(--glow)}
/* tiles: glass, the number big with a glow */
body.adm-app .adm-tile{background:var(--glass);border-color:var(--edge);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body.adm-app .adm-tile:hover{transform:translateY(-2px);border-color:#cdbfd9;box-shadow:0 0 26px rgba(201,184,214,.16)}
body.adm-app .adm-tile-value{font-size:38px;text-shadow:0 0 24px var(--glow)}
body.adm-app .adm-tiles.income .adm-tile{border-color:rgba(201,184,214,.4);box-shadow:0 0 30px rgba(201,184,214,.12)}
body.adm-app .adm-tiles.income .adm-tile-value{text-shadow:0 0 28px rgba(201,184,214,.55)}
/* cards, boxes, tables, feedback: glass panels */
body.adm-app :is(.adm-card,.adm-box,.adm-table-wrap,.adm-fb,.adm-stat,.adm-pkg){background:var(--glass);border-color:var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.adm-app :is(.adm-card,.adm-box,.adm-table-wrap,.adm-fb){border-radius:20px}
body.adm-app :is(.adm-card-head,.adm-box-head,.adm-card figcaption)>strong{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
body.adm-app .adm-table th{color:var(--lilac);opacity:.8}
body.adm-app .adm-table td{border-bottom-color:rgba(201,184,214,.08)}
body.adm-app .adm-table tr.clickable:hover td{background:rgba(201,184,214,.07)}
body.adm-app .adm-event{border-bottom-color:rgba(201,184,214,.08)}
/* controls: pills and glass fields */
body.adm-app .smallbtn:not(.primary){background:var(--glass)}
body.adm-app .smallbtn{border-radius:999px}
body.adm-app .smallbtn.primary{box-shadow:0 0 22px var(--glow)}
body.adm-app .field{background:var(--glass);border-color:var(--edge);border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease}
body.adm-app .field:focus{border-color:#cdbfd9;box-shadow:0 0 0 3px rgba(201,184,214,.18)}
body.adm-app .cat{background:var(--glass)}
body.adm-app .cat.selected{background:var(--ink);box-shadow:0 0 16px var(--glow)}
/* dialogs and toast */
body.adm-app .operation-overlay{background:rgba(var(--bgRgb),.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.adm-app .operation-card{background:var(--glassHi);border-color:#cdbfd9;border-radius:24px;box-shadow:0 0 0 1px rgba(201,184,214,.2),0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(201,184,214,.16)}
body.adm-app .toast{box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px var(--glow)}
body.adm-app .adm-view:not([hidden]){animation:admIn .45s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){body.adm-app .adm-view:not([hidden]){animation:none}body.adm-app .adm-tile{transition:none}}

/* WEARING: take off by area */
.area-row{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.area-row .edit-label{margin-right:2px}
.area-row .smallbtn{display:inline-flex;align-items:center;gap:6px;line-height:1}
.area-row .tabcount{opacity:.7}

/* ---- "Let someone dress you": the owner's links, and the guest's view */
.guest-box[hidden]{display:none}
.guest-box .note{margin:0 0 8px;font-size:12px;line-height:1.5}
.guest-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.guest-row{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.guest-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.guest-txt b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guest-txt small{font-size:11px;color:var(--dim)}
.guest-new{display:flex;gap:6px}.guest-new .field{flex:1;min-width:0;min-height:0;height:38px;padding:6px 12px;font-size:14px}
#guestMade{margin-top:8px}
.guest-bar{display:flex;align-items:center;gap:8px;margin:10px clamp(16px,4vw,40px) 0;padding:10px 14px;border-radius:14px;border:1px solid #cdbfd9;background:rgba(201,184,214,.12);font-size:13px;font-weight:700;box-shadow:0 0 24px rgba(201,184,214,.18)}
.guest-bar[hidden]{display:none}.guest-bar svg.ic{color:var(--lilac);margin:0}.guest-bar small{color:var(--muted);font-weight:500;margin-left:auto}
/* a guest dresses; the owner's own tools are not theirs */
body.guest :is(#meBtn,#feedbackBtn,#newsBtn,#winBtns,#helpBtn,#selectBtn,#saveLook,#privacyCard,#hudUpdate,#catTools,.coveredit,.fav,.look-more,.cat.newchip,#wearTools .smallbtn:not(.area-row .smallbtn),#layerBox,#hiddenBox,#rootNote,#coverNote,.slot-row){display:none!important}
body.guest :is(#smartBtn,#bodyBtn,#bodyNote,#refresh,#slotBar,.cat.add,.cat.more,.addcover-hint,.piece-x+.piece-x){display:none!important}
body.guest .cover{pointer-events:none}
body.guest .offline a{display:none}
body.guest .actions .btn.hud{display:none!important}

/* the Dress Me: asking to connect (a bar on the screen), and its settings */
.dm-ask{flex-wrap:wrap}.dm-ask small{margin-left:0!important;flex:1 1 100%;order:3}.dm-ask .smallbtn{margin-left:auto}.dm-ask .smallbtn+.smallbtn{margin-left:0}
.dm-label{margin-top:14px}
.dm-box{display:flex;flex-direction:column;gap:6px}.dm-box .note{margin:0;font-size:12px;line-height:1.5}
.dm-box .linkbtn{align-self:flex-start;margin-top:4px}
body.guest .dm-ask{display:none!important}

/* ---- admin LINKS: tracked links, one card each */
.lk-make .field{max-width:360px}
.lk-urls{display:flex;flex-direction:column;gap:8px}
.lk-url{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.lk-url-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lk-url-txt b{font-size:13px}.lk-url-txt code{font-size:12px;color:var(--lilac);overflow-wrap:anywhere}.lk-url-txt small{font-size:11px;color:var(--dim)}
.lk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.lk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lk-head strong{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.lk-head small{color:var(--dim);font-size:11px;white-space:nowrap}
.lk-big{display:flex;align-items:flex-end;gap:18px}
.lk-num{display:flex;flex-direction:column;gap:2px}.lk-num b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--lilac);text-shadow:0 0 24px rgba(201,184,214,.4)}
.lk-num small{font-size:9px;letter-spacing:.18em;color:var(--dim);font-weight:700}
.lk-bars{flex:1;height:46px;display:flex;align-items:flex-end;gap:3px;min-width:120px}
.lk-bars i{flex:1;background:var(--lilac);border-radius:3px 3px 0 0;opacity:.85}.lk-bars i.zero{opacity:.18}
.lk-flow{display:flex;flex-direction:column;gap:6px}
.lk-flow .edit-label{margin-top:6px}
.lk-step{display:flex;align-items:baseline;gap:10px;font-size:13px}.lk-step b{min-width:38px;text-align:right;font-size:16px}
.lk-links summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--lilac)}
.lk-links[open] summary{margin-bottom:8px}.lk-links .lk-url{margin-top:6px}

/* the HUD's window buttons: bigger and lilac-edged, easy to find (a wearer made the HUD small and could not find the way back) */
.win-btns .winbtn{width:38px!important;height:38px!important;border:1.5px solid rgba(201,184,214,.55);color:var(--ink);background:rgba(201,184,214,.1)}
.win-btns .winbtn svg.ic{width:20px;height:20px}
.win-btns .winbtn:hover{border-color:var(--lilac);box-shadow:0 0 16px rgba(201,184,214,.4)}
.win-btns{gap:6px}
@media(max-width:560px){body.has-win #statusText{display:none}body.has-win .status{padding:7px}body.has-win .top-right{gap:4px}}
.mini-win .mini-big{width:auto;border-radius:999px;padding:0 .8em;gap:.35em;display:flex;align-items:center;font-size:.72em;font-weight:800;letter-spacing:.12em;color:var(--bg);background:var(--ink)!important;border-color:var(--ink);box-shadow:0 0 14px rgba(201,184,214,.45)}
.mini-win .mini-big svg.ic{width:1.3em;height:1.3em}
.pick-head{margin:10px 2px 2px;text-transform:uppercase}.pick-head:first-child{margin-top:0}
.pick-note{margin:0 0 10px;padding:10px 12px;border:1px solid var(--warnLine);border-radius:12px;background:var(--warnBg);color:var(--warn);font-size:12px;line-height:1.5}
.mini-win .mini-big{white-space:nowrap;flex:0 0 auto}.mini-count{white-space:nowrap}
.mini-win .mini-big{letter-spacing:.06em;padding:0 .65em}.mini-top{gap:.45em}

/* help: "my HUD got small" - the callout at the top and the drawing of the buttons */
.help-stuck{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;border-radius:18px;border:1.5px solid #cdbfd9;background:rgba(201,184,214,.12);color:var(--ink);text-decoration:none;box-shadow:0 0 30px rgba(201,184,214,.18)}
.help-stuck .ic{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lilac);color:#15111a;font-size:22px;font-weight:700}
.help-stuck .txt{flex:1;display:flex;flex-direction:column;gap:2px}.help-stuck strong{font-size:16px}.help-stuck .txt span{color:var(--muted);font-size:13px}
.help-stuck .go{font-size:22px;color:var(--lilac)}.help-stuck:hover{border-color:var(--lilac);box-shadow:0 0 36px rgba(201,184,214,.3)}
.tb-demo{display:flex;align-items:center;gap:8px;max-width:420px;margin:6px 0 10px;padding:10px 14px;border-radius:14px;background:#141217;border:1px solid var(--line2)}
.tb-logo{font-family:var(--display);font-size:20px;letter-spacing:.04em;color:#efe9e4}.tb-sp{flex:1}
.tb-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(201,184,214,.55);background:rgba(201,184,214,.1);color:#efe9e4}
.tb-btn svg.ic{width:18px;height:18px;margin:0}
.tb-btn.hi{border-color:#efe9e4;box-shadow:0 0 0 3px rgba(201,184,214,.35),0 0 18px rgba(201,184,214,.6);animation:tbpulse 1.6s ease-in-out infinite}
@keyframes tbpulse{50%{box-shadow:0 0 0 6px rgba(201,184,214,.15),0 0 24px rgba(201,184,214,.7)}}
@media(prefers-reduced-motion:reduce){.tb-btn.hi{animation:none}}
.tb-mini .tb-pill{margin-left:auto;padding:7px 12px;border-radius:999px;background:#efe9e4;color:#0b0a0c;font-size:11px;font-weight:800;letter-spacing:.08em;box-shadow:0 0 14px rgba(201,184,214,.5)}
.tb-arrow{color:var(--lilac);font-size:12px;font-weight:700;white-space:nowrap}
.tb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-2px 0 10px;font-size:12px;color:var(--muted)}
.tb-legend b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--lilac);color:#15111a;font-size:11px;margin-right:4px}

/* settings: backup */
.bk-box[hidden]{display:none}
.bk-box .note{margin:0 0 8px;font-size:12px;line-height:1.5}
.bk-btns{display:flex;flex-wrap:wrap;gap:6px}
.bk-btns .smallbtn{display:inline-flex;align-items:center;gap:6px}
.bk-link{margin-top:8px}.bk-link .note{margin:0 0 6px}

/* ---- the collection as a compact list: a small picture, the name, the buttons - one row each */
.view-btn{padding:7px 10px;display:inline-flex;align-items:center}.view-btn svg.ic{width:15px;height:15px;margin:0}
#grid.list{grid-template-columns:1fr;gap:6px}
#grid.list .tile{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);animation:none}
body.hud-3d #grid.list .tile{background:var(--glass);border-color:rgba(201,184,214,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#grid.list .tile.on{border-color:var(--ok);box-shadow:0 0 14px rgba(143,217,173,.15)}
#grid.list .cover{width:64px;aspect-ratio:4/3;border-radius:9px;box-shadow:none;transform:none!important}
#grid.list .cover :is(.chips,.fav,.coveredit,.addcover-hint){display:none}
#grid.list .cover-ph{font-size:8px;letter-spacing:.1em}
#grid.list .tile-info{gap:1px}
#grid.list .tile h3{font-size:13px;min-height:0;-webkit-line-clamp:1;line-clamp:1}
#grid.list .brand-eyebrow{font-size:8px}
#grid.list .meta{font-size:8px;letter-spacing:.12em}
#grid.list .actions{display:flex;flex-direction:column;gap:4px;min-width:0}
#grid.list .tile:not(.sponsored) .actions>.btn.hud,#grid.list .actions>:not(.wear-row):not(.btn){display:none}
#grid.list .wear-row{display:flex;gap:4px}
#grid.list .actions .btn{min-height:30px;padding:5px 12px;font-size:9px;letter-spacing:.1em;white-space:nowrap}
#grid.list .tile.sponsored .cover .chips{display:flex;top:2px;left:2px;transform:scale(.62);transform-origin:top left}   /* a sponsored row still says so */
#grid.list .lock-badge{font-size:7px;letter-spacing:.08em;gap:2px;padding:2px 4px}#grid.list .lock-badge svg.ic{width:9px;height:9px}

/* ---- more pictures of a product: ‹ › on the card, and the strip in its ✎ */
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);background:rgba(11,10,12,.55);color:#efe9e4;opacity:0;transition:opacity .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.gal-btn svg.ic{width:16px;height:16px;margin:0}.gal-prev{left:6px}.gal-next{right:6px}
.cover.has-gal:hover .gal-btn,.cover.has-gal:focus-within .gal-btn{opacity:1}
@media(hover:none){.gal-btn{opacity:.85}}
.gal-count{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:rgba(11,10,12,.65);color:#efe9e4;font-size:9px;font-weight:800;letter-spacing:.12em;z-index:2}
#grid.list .gal-btn,#grid.list .gal-count{display:none}
.edit-gallery{display:flex;flex-direction:column;gap:6px}.edit-gallery[hidden]{display:none}
.gal-strip{display:flex;flex-wrap:wrap;gap:6px}.gal-strip .note{margin:0;font-size:11px}
.gal-thumb{position:relative;width:88px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line2)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-mini{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;padding:0;display:grid;place-items:center;border:0;background:rgba(11,10,12,.7);color:#efe9e4}
.gal-mini svg.ic{width:12px;height:12px;margin:0}.gal-mini{left:3px}.gal-mini.gal-x{left:auto;right:3px;color:#f0a1ad}
.gal-add{display:flex;gap:6px;flex-wrap:wrap}

/* ---- a product's note: the field in ✎, and one line on the card */
.edit-note{min-height:56px;resize:vertical;font-size:13px;line-height:1.45;padding:10px 12px;font-family:inherit}
.note-count{font-size:10px;color:var(--dim);letter-spacing:.08em}
.tile-note{margin:2px 0 0;display:flex;gap:5px;align-items:flex-start;font-size:11px;line-height:1.4;color:var(--dim);font-style:italic;overflow:hidden}
.tile-note svg.ic{width:12px;height:12px;flex:none;margin:2px 0 0;opacity:.8}
.tile-note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.tile-note svg.ic{display:inline;vertical-align:-2px;margin-right:4px}
#grid.list .tile-note{-webkit-line-clamp:1;line-clamp:1;font-size:10px;margin:0}

/* ---- saved filters: a row of chips under the filter buttons */
.saved-row{display:flex;flex-wrap:wrap;gap:6px}.saved-row[hidden]{display:none}
.saved-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;max-width:100%}
.saved-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-chip svg.ic{width:13px;height:13px;margin:0;flex:none}
.saved-chip:hover{color:var(--ink);border-color:var(--line3)}
.saved-chip.selected{background:var(--lilac);border-color:var(--lilac);color:var(--bg)}
.saved-chip.saved-add{border-style:dashed;color:var(--lilac)}
.saved-x{display:inline-grid;place-items:center;width:18px;height:18px;margin:-2px -5px -2px 2px;border-radius:50%;background:rgba(0,0,0,.18)}
.saved-x svg.ic{width:11px;height:11px}

/* a look's WEAR with + ADD beside it (wear it on top) */
.look-row{display:flex;gap:6px}.look-row>.btn:first-child{flex:1}
.look-row .btn.add{flex:none;display:inline-flex;align-items:center;gap:4px;padding-inline:12px}
.look-row .btn.add svg.ic{width:13px;height:13px;margin:0}

/* ---- "goes with": a row of small covers, tap one to add it on top */
.goes-box{display:flex;flex-direction:column;gap:6px}.goes-box[hidden]{display:none}
#wearGoes{margin:0 0 12px}
.goes-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.goes-item{flex:0 0 92px;display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.goes-item:disabled{opacity:.5;cursor:default}
.goes-thumb{position:relative;display:grid;place-items:center;width:92px;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line2);background:repeating-linear-gradient(135deg,var(--stripe1) 0 8px,var(--stripe2) 8px 16px) center/cover;background-size:cover;overflow:hidden;transition:border-color .2s,transform .2s}
.goes-item:not(:disabled):hover .goes-thumb{border-color:var(--lilac);transform:translateY(-2px)}
.goes-ph{font-size:8px;letter-spacing:.2em;color:var(--ph);font-weight:800}
.goes-plus{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,12,.7);color:#efe9e4}
.goes-plus svg.ic{width:12px;height:12px;margin:0}
.goes-name{font-size:10px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* ---- ✨ AI stylist in SUGGESTIONS */
.ai-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border-color:var(--lilacLine);color:var(--lilac)}
.ai-btn .tabcount{opacity:.75}
.ai-label{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--lilac);margin-top:4px}
.ai-strip .goes-item{flex-basis:110px}.ai-strip .goes-thumb{width:110px}
.ai-why{font-size:9.5px;line-height:1.35;color:var(--lilac);font-style:italic}

/* the Second Life screen cannot scroll sideways: suggestions wrap into rows */
.goes-strip{flex-wrap:wrap;overflow:visible}
.goes-item{flex:0 0 calc((100% - 16px)/3)}.goes-thumb{width:100%}
.ai-strip .goes-item{flex-basis:calc((100% - 16px)/3)}.ai-strip .goes-thumb{width:100%}
#wearGoes .goes-item{flex-basis:calc((100% - 24px)/4)}
.ai-how{margin:0;font-size:10.5px;line-height:1.45;color:var(--dim)}

/* ✎: WEAR IT above the suggestions; a suggestion already on shows ✓ */
.goes-main{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.goes-main svg.ic{width:15px;height:15px;margin:0}
.goes-item.on{opacity:1}.goes-item.on .goes-thumb{border-color:var(--ok)}.goes-item.on .goes-plus{background:var(--ok);color:#0b0a0c}

.ai-more{border-style:dashed}

/* ---- ✨ on a card (top left) and its window */
.ai-fab{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;padding:0;font-size:15px;line-height:1;
 background:rgba(var(--bgRgb),.75);border:1px solid var(--lilacLine);cursor:pointer;z-index:2;transition:transform .2s,border-color .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ai-fab:hover{transform:scale(1.08);border-color:var(--lilac)}
.cover.has-ai .chips{left:48px}
@media(max-width:560px){.ai-fab{width:26px;height:26px;top:6px;left:6px;font-size:12px;border-radius:7px}.cover.has-ai .chips{left:38px}}
#grid.list .ai-fab{display:none}#grid.list .cover.has-ai .chips{left:2px}
.ai-dialog{gap:12px}
.ai-head{display:flex;gap:12px;align-items:center}
.ai-cover{width:96px;flex:none;aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center}
.ai-kicker{font-size:9px;letter-spacing:.18em;font-weight:800;color:var(--lilac);margin-bottom:3px}
#aiTitle{font-size:15px;line-height:1.3}
#aiBox .ai-btn{align-self:stretch;justify-content:center;padding:10px 12px}
.ai-tip{margin:0;font-size:10.5px;line-height:1.45;color:var(--dim);border-left:2px solid var(--lilacLine);padding-left:8px}
.ai-tip.few{color:var(--warn);border-left-color:var(--warn)}

/* ---- themes (unlocked with AI ideas): the dark screen's colours; day mode keeps its own and takes the accent */
:root[data-skin=gold]{--lilac:#e0bd72;--focus:#b8924a;--lilacLine:#5a4a2a;--bg:#0c0a07;--panel:#15120c;--panel2:#110e09;--line:#221d14;--line2:#332b1e;--stripe1:#17130c;--stripe2:#120f09;--bgRgb:12,10,7;--panelRgb:21,18,12}
:root[data-skin=rose]{--lilac:#f2a7c3;--focus:#c97c9b;--lilacLine:#5c3445;--bg:#0e090c;--panel:#170f14;--panel2:#130c10;--line:#24171e;--line2:#36222c;--stripe1:#19111a;--stripe2:#130c12;--bgRgb:14,9,12;--panelRgb:23,15,20}
:root[data-skin=gothic]{--lilac:#d0485a;--focus:#9e2f3e;--lilacLine:#4e1c24;--bg:#070606;--panel:#100c0c;--panel2:#0c0909;--line:#1d1515;--line2:#2c1e1f;--stripe1:#130e0e;--stripe2:#0d0909;--bgRgb:7,6,6;--panelRgb:16,12,12}
:root[data-skin=neon]{--lilac:#47e8ff;--focus:#2ab3c9;--lilacLine:#17505c;--bg:#05060d;--panel:#0b0d18;--panel2:#080a13;--line:#151a2c;--line2:#1f2742;--stripe1:#0c0f1c;--stripe2:#080a14;--bgRgb:5,6,13;--panelRgb:11,13,24}
:root[data-theme=light][data-skin]{--bg:#f5f1ee;--panel:#ffffff;--panel2:#faf7f5;--line:#e6dfe3;--line2:#d6ccd3;--stripe1:#efe9ec;--stripe2:#f6f1f3;--bgRgb:245,241,238;--panelRgb:255,255,255}
:root[data-theme=light][data-skin=gold]{--lilac:#9a7021;--focus:#9a7021}:root[data-theme=light][data-skin=rose]{--lilac:#b34a73;--focus:#b34a73}
:root[data-theme=light][data-skin=gothic]{--lilac:#9e2233;--focus:#9e2233}:root[data-theme=light][data-skin=neon]{--lilac:#0a8fa6;--focus:#0a8fa6}
:root[data-skin] body{background:var(--bg)}
:root[data-skin=gold] body.hud-3d{--glow:rgba(224,189,114,.32)}:root[data-skin=rose] body.hud-3d{--glow:rgba(242,167,195,.32)}
:root[data-skin=gothic] body.hud-3d{--glow:rgba(208,72,90,.3)}:root[data-skin=neon] body.hud-3d{--glow:rgba(71,232,255,.3)}
/* ✨ CREATE A LOOK */
.occ-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.occ{justify-content:center;padding:10px 8px;font-size:11px;letter-spacing:.06em}
.ai-actions{display:flex;gap:6px;flex-wrap:wrap}.ai-actions>*{flex:1;justify-content:center}
#aiLookBtn{display:inline-flex;align-items:center;gap:6px}#aiLookBtn[hidden]{display:none}

/* a look's piece: × takes it out of the look */
.look-pieces li>div{flex:1}
.piece-x{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer}
.piece-x:hover{color:var(--bad);border-color:var(--badLine2)}.piece-x svg.ic{width:13px;height:13px;margin:0}.piece-x[hidden]{display:none}

/* ---- the home screen (HANGER as a phone) and the ✨ AI Photo Studio */
.home-screen{position:fixed;inset:0;z-index:40;overflow-y:auto;background:radial-gradient(120% 80% at 80% 0%,rgba(201,184,214,.18),transparent 60%),var(--bg);color:var(--ink);padding:14px 16px 24px;display:flex;flex-direction:column;gap:14px}
.home-screen[hidden]{display:none}
.home-top{display:flex;align-items:center;gap:10px}
.home-top .brand{font-family:var(--display);font-size:24px;letter-spacing:.04em}
.home-credits{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--lilac);border:1px solid var(--lilacLine);border-radius:999px;padding:5px 10px}
.home-close,.home-back{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:16px;display:grid;place-items:center;padding:0;cursor:pointer}
.home-back{font-size:24px;line-height:1}
.home-hello{font-family:var(--display);font-size:34px;line-height:1.05;margin-top:6px}
.home-apps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-app{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px;border-radius:20px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;min-height:128px}
.home-app:not(:disabled):hover{transform:translateY(-2px);border-color:var(--lilac);box-shadow:0 0 22px var(--glow,rgba(201,184,214,.3))}
.home-app .home-ic{font-size:34px;line-height:1;margin-bottom:8px}
.home-app b{font-size:14px;font-weight:800;letter-spacing:.04em}
.home-app small{font-size:11px;color:var(--dim)}
.home-app.studio{border-color:var(--lilacLine);background:linear-gradient(145deg,rgba(201,184,214,.16),var(--panel) 70%)}
.home-app.soon{opacity:.45;cursor:default}
.home-foot{margin:0;font-size:11px;color:var(--dim);text-align:center}
body.hud-3d .home-screen{background:radial-gradient(120% 80% at 80% 0%,rgba(201,184,214,.16),transparent 60%),rgba(var(--bgRgb),.96)}
.brandline .brand{cursor:pointer}
.studio-title{font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--lilac)}
.studio-body{display:flex;flex-direction:column;gap:10px}
.studio-pick{height:190px;border-radius:18px;border:2px dashed var(--lilacLine);background:var(--panel) center/contain no-repeat;color:var(--lilac);font-size:13px;font-weight:800;letter-spacing:.14em;cursor:pointer;display:grid;place-items:end center;padding-bottom:12px}
.studio-pick.has{border-style:solid}.studio-pick.has span{background:rgba(11,10,12,.75);color:#efe9e4;padding:6px 12px;border-radius:999px}
.studio-styles{display:flex;flex-wrap:wrap;gap:6px}
.studio-style{padding:8px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer}
.studio-style.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.studio-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.studio-item{position:relative;aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line2);background:var(--panel) center/cover;cursor:pointer;padding:0}
.studio-item span{position:absolute;left:6px;bottom:6px;font-size:9px;font-weight:800;letter-spacing:.08em;background:rgba(11,10,12,.72);color:#efe9e4;padding:3px 7px;border-radius:999px}
.studio-view img{width:100%;max-height:52vh;object-fit:contain;border-radius:14px;background:#000}
.studio-view .note{margin:0;font-size:11px}
.home-screen,body.hud-3d .home-screen{background:radial-gradient(120% 80% at 80% 0%,rgba(201,184,214,.16),transparent 60%),var(--bg)}
#studioView{z-index:60}

/* ---- HANGER as a phone: wallpaper, status bar, clock widget, app icons, dock, home bar */
.phone{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;padding:10px 18px 14px;color:#fff;overflow:hidden;
 background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.55),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(122,90,160,.55),transparent 60%),linear-gradient(170deg,#241b2c 0%,#141018 55%,#0b0a0e 100%)}
.phone[hidden]{display:none}
.phone::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
 background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.4px 1.4px at 40% 44%,#e9dbff,transparent),radial-gradient(1px 1px at 88% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 76%,#e9dbff,transparent),radial-gradient(1px 1px at 60% 86%,#fff,transparent),radial-gradient(1px 1px at 92% 30%,#fff,transparent),radial-gradient(1px 1px at 6% 52%,#fff,transparent)}
:root[data-skin=gold] .phone{background:radial-gradient(90% 55% at 85% 8%,rgba(224,189,114,.5),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(150,110,40,.5),transparent 60%),linear-gradient(170deg,#2a2114 0%,#15110a 55%,#0c0a07 100%)}
:root[data-skin=rose] .phone{background:radial-gradient(90% 55% at 85% 8%,rgba(242,167,195,.55),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(170,70,110,.5),transparent 60%),linear-gradient(170deg,#2c1822 0%,#170e13 55%,#0e090c 100%)}
:root[data-skin=gothic] .phone{background:radial-gradient(90% 55% at 85% 8%,rgba(208,72,90,.45),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(90,20,30,.6),transparent 60%),linear-gradient(170deg,#1c0f11 0%,#0e0909 55%,#070606 100%)}
:root[data-skin=neon] .phone{background:radial-gradient(90% 55% at 85% 8%,rgba(71,232,255,.45),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(190,60,220,.45),transparent 60%),linear-gradient(170deg,#0d1226 0%,#080a15 55%,#05060d 100%)}
:root[data-theme=light] .phone{background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.9),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(244,169,198,.6),transparent 60%),linear-gradient(170deg,#f3e9f4 0%,#e7dcea 55%,#d9cde0 100%);color:#1a151c}
:root[data-theme=light] .phone::before{opacity:0}
.ph-status{position:relative;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;letter-spacing:.02em;height:26px}
.ph-right{display:flex;align-items:center;gap:10px}
.ph-credits{font-size:12px;font-weight:800}
.ph-net{width:9px;height:9px;border-radius:50%;background:#8a8390}.ph-net.on{background:#8fd9ad;box-shadow:0 0 8px #8fd9ad}
.ph-batt{width:24px;height:12px;border:1.6px solid currentColor;border-radius:3px;position:relative;opacity:.9}
.ph-batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.ph-batt i{position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:1px}
.ph-widget{position:relative;text-align:center;margin:22px 0 26px}
.ph-clock{font-family:var(--display);font-size:78px;line-height:1;letter-spacing:.01em;text-shadow:0 4px 30px rgba(201,184,214,.45)}
.ph-date{font-size:15px;font-weight:700;margin-top:6px;opacity:.9;text-transform:capitalize}
.ph-hello{font-size:13px;margin-top:4px;opacity:.7}
.ph-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;align-content:start;flex:1}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:0;color:inherit;cursor:pointer;min-width:0}
.ph-ic{position:relative;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s}
.ph-ic svg.ic{width:30px;height:30px;margin:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.ph-app:active .ph-ic,.ph-app:hover .ph-ic{transform:scale(.94)}
.ph-name{font-size:11.5px;font-weight:600;text-align:center;line-height:1.2;max-width:76px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
:root[data-theme=light] .ph-name{text-shadow:none}
.ph-app.soon .ph-ic{opacity:.45}.ph-app.soon .ph-name{opacity:.55}
.ph-new{position:absolute;top:-6px;right:-8px;background:#ff5a7a;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.06em;padding:2px 5px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ph-dock{position:relative;display:flex;justify-content:space-around;padding:12px 10px;margin:10px 0 12px;border-radius:28px;background:rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14)}
:root[data-theme=light] .ph-dock{background:rgba(255,255,255,.5)}
.ph-dock .ph-ic{width:58px;height:58px;border-radius:16px}
.ph-homebar{position:relative;align-self:center;width:140px;height:18px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.ph-homebar i{width:134px;height:5px;border-radius:999px;background:currentColor;opacity:.75}
.ph-open svg.ic{width:18px;height:18px}
body.phone-on{overflow:hidden}
/* the studio app gets the phone's home bar too */
.studio .home-top{padding-top:2px}
#studioDialog::after{content:"";position:fixed;left:50%;bottom:8px;transform:translateX(-50%);width:134px;height:5px;border-radius:999px;background:var(--ink);opacity:.6;pointer-events:none}

/* windows opened from the phone show on top of it; the studio too */
body.phone-on .operation-overlay{z-index:50}
#studioDialog{z-index:50}#studioView{z-index:60}
body.phone-on .toast,body.phone-on .undo-bar{z-index:70}

/* the home indicator: a thin bar at the bottom edge; swipe up from it for the home screen */
.ph-indicator{position:fixed;left:50%;bottom:4px;transform:translateX(-50%);width:120px;height:5px;border-radius:999px;background:var(--ink);opacity:.45;z-index:25;pointer-events:none;transition:transform .15s,opacity .15s}
.ph-indicator[hidden]{display:none}
.ph-indicator.pull{transform:translateX(-50%) translateY(-6px) scaleX(1.15);opacity:.9}
body.phone-on .ph-indicator{display:none}
.phone.rise{animation:phRise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes phRise{from{transform:translateY(38%) scale(.94);opacity:.3;border-radius:34px}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.phone.rise{animation:none}}

/* Help inside the screen */
.help-app{z-index:55;padding:10px 0 0;gap:8px}.help-app .home-top{padding:0 14px}
#helpFrame{flex:1;width:100%;border:0;background:var(--bg);border-radius:14px 14px 0 0}

/* the phone's app icons: pictures, clipped to the rounded square */
.ph-ic.pic{overflow:hidden}.ph-ic.pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;pointer-events:none}
.ph-ic.pic .ph-new{z-index:1}
.ph-ic.pic{overflow:visible}.ph-ic.pic img{border-radius:inherit}

/* room under the tab bar for the home indicator */
body.has-phone .tabs{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
body.has-phone .ph-indicator{bottom:7px}

/* no text selection on the phone, nor while swiping up */
.phone,.phone *,body.swiping,body.swiping *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.phone img{-webkit-user-drag:none}

/* the phone's wallpapers (Settings ▸ Wallpaper; Auto follows the theme) */
#homeDialog[data-wall=aurora]{background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.55),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(122,90,160,.55),transparent 60%),linear-gradient(170deg,#241b2c 0%,#141018 55%,#0b0a0e 100%);color:#fff}
#homeDialog[data-wall=gold]{background:radial-gradient(90% 55% at 85% 8%,rgba(224,189,114,.5),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(150,110,40,.5),transparent 60%),linear-gradient(170deg,#2a2114 0%,#15110a 55%,#0c0a07 100%);color:#fff}
#homeDialog[data-wall=rose]{background:radial-gradient(90% 55% at 85% 8%,rgba(242,167,195,.55),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(170,70,110,.5),transparent 60%),linear-gradient(170deg,#2c1822 0%,#170e13 55%,#0e090c 100%);color:#fff}
#homeDialog[data-wall=gothic]{background:radial-gradient(90% 55% at 85% 8%,rgba(208,72,90,.45),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(90,20,30,.6),transparent 60%),linear-gradient(170deg,#1c0f11 0%,#0e0909 55%,#070606 100%);color:#fff}
#homeDialog[data-wall=neon]{background:radial-gradient(90% 55% at 85% 8%,rgba(71,232,255,.45),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(190,60,220,.45),transparent 60%),linear-gradient(170deg,#0d1226 0%,#080a15 55%,#05060d 100%);color:#fff}
#homeDialog[data-wall=day]{background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.9),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(244,169,198,.6),transparent 60%),linear-gradient(170deg,#f3e9f4 0%,#e7dcea 55%,#d9cde0 100%);color:#1a151c}
#homeDialog[data-wall=day]::before{opacity:0}
#homeDialog:not([data-wall=auto]):not([data-wall=day]) .ph-dock{background:rgba(255,255,255,.14)}
.ph-dock[hidden]{display:none}
.ph-grid{grid-template-columns:repeat(4,1fr)}
/* the phone's Settings */
.ph-set{z-index:52}.ph-set-body{display:flex;flex-direction:column;gap:12px}
.ph-walls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ph-wall{aspect-ratio:9/16;border-radius:14px;border:2px solid transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:6px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}
.ph-wall span{background:rgba(0,0,0,.45);padding:3px 7px;border-radius:999px}
.ph-wall.selected{border-color:var(--lilac);box-shadow:0 0 16px var(--glow,rgba(201,184,214,.4))}
.ph-wall[data-wall=auto]{background:linear-gradient(135deg,#241b2c 50%,#f3e9f4 50%)}
.ph-wall[data-wall=aurora]{background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.7),transparent 60%),linear-gradient(170deg,#241b2c,#0b0a0e)}
.ph-wall[data-wall=gold]{background:radial-gradient(90% 55% at 85% 8%,rgba(224,189,114,.7),transparent 60%),linear-gradient(170deg,#2a2114,#0c0a07)}
.ph-wall[data-wall=rose]{background:radial-gradient(90% 55% at 85% 8%,rgba(242,167,195,.7),transparent 60%),linear-gradient(170deg,#2c1822,#0e090c)}
.ph-wall[data-wall=gothic]{background:radial-gradient(90% 55% at 85% 8%,rgba(208,72,90,.6),transparent 60%),linear-gradient(170deg,#1c0f11,#070606)}
.ph-wall[data-wall=neon]{background:radial-gradient(90% 55% at 85% 8%,rgba(71,232,255,.6),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(190,60,220,.5),transparent 60%),linear-gradient(170deg,#0d1226,#05060d)}
.ph-wall[data-wall=day]{background:radial-gradient(90% 55% at 85% 8%,rgba(201,184,214,.95),transparent 60%),linear-gradient(170deg,#f3e9f4,#d9cde0);color:#1a151c}
.ph-seg{display:flex;gap:6px}
.ph-segb{flex:1;padding:10px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.06em;cursor:pointer}
.ph-segb.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* the HUD's own window buttons (size, small, take off) stay on top of the phone and its screens */
#winBtns.ph-floating:not([hidden]){position:fixed;top:50%;right:-72px;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;padding:10px 8px;border-left:0;border-radius:999px;background:rgba(var(--bgRgb),.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:right .25s cubic-bezier(.2,.8,.2,1)}
#winBtns.ph-floating.open{right:12px}
.ph-winhandle{position:fixed;right:0;top:50%;transform:translateY(-50%);width:22px;height:90px;z-index:79;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.ph-winhandle[hidden]{display:none}
.ph-winhandle i{width:5px;height:64px;border-radius:999px;background:var(--ink);opacity:.45;transition:opacity .15s,transform .15s}
.ph-winhandle:hover i{opacity:.85;transform:scaleY(1.08)}
body:has(#winBtns.open) .ph-winhandle{opacity:0;pointer-events:none}
.ph-winhandle i{background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.35);opacity:.8}

/* the wallpapers (public/apps/wall-*.webp) */
#homeDialog[data-wall=aurora]{background:#0b0a0e url(/apps/wall-aurora.webp) center/cover no-repeat}
.ph-wall[data-wall=aurora]{background:#0b0a0e url(/apps/wall-aurora.webp) center/cover no-repeat}
#homeDialog[data-wall=gold]{background:#0b0a0e url(/apps/wall-gold.webp) center/cover no-repeat}
.ph-wall[data-wall=gold]{background:#0b0a0e url(/apps/wall-gold.webp) center/cover no-repeat}
#homeDialog[data-wall=rose]{background:#0b0a0e url(/apps/wall-rose.webp) center/cover no-repeat}
.ph-wall[data-wall=rose]{background:#0b0a0e url(/apps/wall-rose.webp) center/cover no-repeat}
#homeDialog[data-wall=gothic]{background:#0b0a0e url(/apps/wall-gothic.webp) center/cover no-repeat}
.ph-wall[data-wall=gothic]{background:#0b0a0e url(/apps/wall-gothic.webp) center/cover no-repeat}
#homeDialog[data-wall=neon]{background:#0b0a0e url(/apps/wall-neon.webp) center/cover no-repeat}
.ph-wall[data-wall=neon]{background:#0b0a0e url(/apps/wall-neon.webp) center/cover no-repeat}
#homeDialog[data-wall=day]{background:#0b0a0e url(/apps/wall-day.webp) center/cover no-repeat}
.ph-wall[data-wall=day]{background:#0b0a0e url(/apps/wall-day.webp) center/cover no-repeat}
#homeDialog[data-wall]::before{opacity:0}
#homeDialog[data-wall]:not([data-wall=day]){color:#fff}
#homeDialog[data-wall=day]{color:#1a151c}
#homeDialog[data-wall]:not([data-wall=day]) .ph-clock,#homeDialog[data-wall]:not([data-wall=day]) .ph-date,#homeDialog[data-wall]:not([data-wall=day]) .ph-hello,#homeDialog[data-wall]:not([data-wall=day]) .ph-status{text-shadow:0 2px 12px rgba(0,0,0,.55)}
#homeDialog[data-wall=day] .ph-name{text-shadow:0 1px 6px rgba(255,255,255,.8)}
.ph-wall[data-wall=auto]{background:linear-gradient(135deg,rgba(0,0,0,0) 49.5%,rgba(255,255,255,.9) 50%),#0b0a0e url(/apps/wall-aurora.webp) center/cover}

/* ---- ✨ AI Studio, the app */
.st2{background:#0b0a0e url(/apps/wall-aurora.webp) center/cover no-repeat;color:#fff}
.st2::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(11,10,14,.55),rgba(11,10,14,.88) 45%,rgba(11,10,14,.96));pointer-events:none}
.st2>*{position:relative}
.st2 .home-back{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.st2 .home-credits{color:#ffe7a3;border-color:rgba(255,231,163,.4);background:rgba(0,0,0,.25)}
.st-head{display:flex;flex-direction:column;line-height:1.1}.st-head b{font-family:var(--display);font-size:26px;letter-spacing:.02em;background:linear-gradient(90deg,#ffe7a3,#f4a9c6,#c9b8d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-head small{font-size:11px;opacity:.7;letter-spacing:.06em}
.st2 .studio-body{gap:12px;padding-bottom:28px}
.st-stage{position:relative;aspect-ratio:3/4;max-height:52vh;width:100%;margin:0 auto;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.st-pick{position:absolute;inset:12px;border-radius:18px;border:2px dashed rgba(255,255,255,.28);background:radial-gradient(70% 50% at 50% 40%,rgba(201,184,214,.18),transparent);
 color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:16px;text-align:center}
.st-pick[hidden]{display:none}
.st-pick-ic{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd98a,#c46bd6 55%,#5a3fb0);box-shadow:0 10px 30px rgba(196,107,214,.45)}
.st-pick-ic svg.ic{width:34px;height:34px;margin:0}
.st-pick b{font-size:17px;font-weight:800;letter-spacing:.02em}.st-pick small{font-size:12px;opacity:.7;max-width:240px}
.st-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-change{position:absolute;top:12px;right:12px;padding:7px 14px;border-radius:999px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;backdrop-filter:blur(8px);cursor:pointer}
.st-change[hidden]{display:none}
.st-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:22px;background:rgba(11,10,14,.35)}
.st-busy[hidden]{display:none}
.st-busy b{position:relative;font-size:14px;font-weight:800;letter-spacing:.04em;background:rgba(0,0,0,.55);padding:9px 16px;border-radius:999px;backdrop-filter:blur(8px)}
.st-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,231,163,.35) 45%,rgba(244,169,198,.45) 50%,rgba(201,184,214,.35) 55%,transparent 70%);background-size:250% 100%;animation:stShine 1.8s linear infinite;mix-blend-mode:screen}
@keyframes stShine{from{background-position:120% 0}to{background-position:-120% 0}}
.st-spark{position:absolute;left:50%;top:42%;width:90px;height:90px;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 6%,rgba(255,231,163,.9) 12%,rgba(244,169,198,.4) 30%,transparent 62%);border-radius:50%;animation:stPulse 1.4s ease-in-out infinite}
@keyframes stPulse{0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
.st-label{font-size:10px;font-weight:800;letter-spacing:.22em;opacity:.7;margin-top:4px}
.st-styles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-style{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;min-width:0;transition:border-color .15s,background .15s,transform .15s}
.st-style:hover{background:rgba(255,255,255,.1)}
.st-style.selected{border-color:#ffe7a3;background:rgba(255,231,163,.1);box-shadow:0 0 0 1px rgba(255,231,163,.4),0 8px 24px rgba(0,0,0,.35)}
.st-style-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.st-style-ic svg.ic{width:20px;height:20px;margin:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.st-style-t{display:flex;flex-direction:column;min-width:0}.st-style-t b{font-size:13px;font-weight:800}.st-style-t small{font-size:10.5px;opacity:.7;line-height:1.3}
.st-check{position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:#ffe7a3;color:#1a151c;font-size:11px;font-weight:800;display:grid;place-items:center}
.st-go{position:relative;height:54px;border-radius:999px;border:0;cursor:pointer;color:#1a151c;font-size:15px;font-weight:800;letter-spacing:.1em;overflow:hidden;
 background:linear-gradient(90deg,#ffe7a3,#f4a9c6,#c9b8d6,#ffe7a3);background-size:300% 100%;animation:stGo 6s linear infinite;box-shadow:0 10px 30px rgba(244,169,198,.35)}
@keyframes stGo{from{background-position:0 0}to{background-position:300% 0}}
.st-go:disabled{cursor:default;animation:none;background:rgba(255,255,255,.14);color:rgba(255,255,255,.6);box-shadow:none}
.st-tip{margin:0;font-size:11px;line-height:1.5;opacity:.65}
.st-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-item{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);padding:0;cursor:pointer;background:rgba(255,255,255,.06)}
.st-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.st-item:hover img{transform:scale(1.05)}
.st-item span{position:absolute;left:6px;bottom:6px;font-size:9px;font-weight:800;letter-spacing:.06em;background:rgba(0,0,0,.6);color:#fff;padding:3px 7px;border-radius:999px}
.st-empty{grid-column:1/-1;margin:0;font-size:12px;opacity:.6;text-align:center;padding:18px;border:1px dashed rgba(255,255,255,.2);border-radius:14px}
/* the result, full screen */
.st-view{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:12px;padding:12px 16px 20px;background:#07060a;color:#fff;overflow-y:auto}
.st-view[hidden]{display:none}
.st-view-top{display:flex;align-items:center;gap:10px}.st-view .home-back{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.st-view-img{position:relative;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.st-view-img img{display:block;width:100%;max-height:60vh;object-fit:contain}
.st-view-img #studioViewOrig{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.st-tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.16em;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:999px}
.st-view-actions{display:flex;gap:8px}.st-btn{flex:1;padding:12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;cursor:pointer}
.st-btn[hidden]{display:none}.st-btn.on{background:#ffe7a3;color:#1a151c;border-color:#ffe7a3}
.st-view .field{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.st-note{margin:0;font-size:11px;opacity:.6}.st-del{align-self:center}
body.has-win .st-view .st-view-top{padding-right:0}
/* studio, compact: a small photo area and slimmer style buttons */
.st-stage{aspect-ratio:auto;height:150px;max-height:none;border-radius:20px}
.st-stage.has{height:34vh;aspect-ratio:3/4;width:auto;max-width:100%}
.st-pick{inset:8px;flex-direction:row;gap:12px;text-align:left;border-radius:14px}
.st-pick-ic{width:48px;height:48px;border-radius:14px;flex:none}.st-pick-ic svg.ic{width:24px;height:24px}
.st-pick b{font-size:15px;display:block}.st-pick small{display:block;max-width:200px}
.st-styles{gap:6px}
.st-style{padding:6px 8px;gap:8px;border-radius:12px}
.st-style-ic{width:30px;height:30px;border-radius:9px}.st-style-ic svg.ic{width:15px;height:15px}
.st-style-t b{font-size:12px}.st-style-t small{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-check{top:50%;transform:translateY(-50%);right:8px;width:16px;height:16px;font-size:10px}
.st-style.selected .st-style-t{padding-right:18px}
.st-go{height:48px}
.st-stage{height:112px}
.st-pick{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-content:center;padding:10px 16px}
.st-pick-ic{grid-row:1/3}.st-pick b{align-self:end}.st-pick small{align-self:start;max-width:none}
/* the back button: a drawn chevron (the ‹ glyph sat off centre in its circle) */
.home-back{font-size:0}
.home-back::before{content:"";width:9px;height:9px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;border-radius:1px;position:absolute;left:50%;top:50%;transform:translate(-24%,-50%) rotate(45deg)}
.home-back{position:relative}
/* icon-only round buttons: the icon exactly in the middle */
.fav,.coveredit{display:grid;place-items:center;padding:0}.fav svg.ic,.coveredit svg.ic{display:block;margin:0}
/* Anton only for headlines; small bold text in Manrope */
.cover-ph{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.14em}
.slot-pack b,.lc-mark{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:0}
.mini-top strong{font-family:Manrope,sans-serif;font-weight:800;font-size:1.1em;letter-spacing:.08em}
.st-head b{text-transform:uppercase;font-size:24px;letter-spacing:.03em}
/* studio: model cards, the style dropdown, the words */
.st-models{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-model{position:relative;display:flex;align-items:center;gap:8px;text-align:left;padding:6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;min-width:0}
.st-model:hover{background:rgba(255,255,255,.1)}
.st-model.selected{border-color:#ffe7a3;background:rgba(255,231,163,.1);box-shadow:0 0 0 1px rgba(255,231,163,.4)}
.st-model-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.st-model .st-style-t{flex:1}
.st-model-cost{flex:none;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(255,231,163,.14);color:#ffe7a3}
.st-model-cost::before{content:"✨ "}
.st-select{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 36px 8px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);cursor:pointer}
.st-select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-70%) rotate(45deg);opacity:.7;pointer-events:none}
.st-select .st-style-ic{grid-row:1/3;width:34px;height:34px}
.st-select select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:#fff;font:800 14px Manrope,sans-serif;padding:0;cursor:pointer;outline:none;width:100%}
.st-select select option{background:#17151a;color:#fff}
.st-select:focus-within{border-color:#ffe7a3}
.st-select-sub{font-size:10.5px;opacity:.65}
.st-words{position:relative}
.st-words textarea{width:100%;box-sizing:border-box;resize:none;padding:10px 12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 12.5px/1.4 Manrope,sans-serif;outline:none}
.st-words textarea:focus{border-color:#ffe7a3}
.st-words textarea::placeholder{color:rgba(255,255,255,.45)}
.st-words-n{position:absolute;right:12px;bottom:6px;font-size:9.5px;opacity:.45}
/* the style dropdown: our own list (the browser's one looked out of place) */
.st-dd{position:relative}
.st-select{width:100%;text-align:left;color:#fff;font:inherit}
.st-select b{font-size:14px;font-weight:800;align-self:end}.st-select-sub{align-self:start}
.st-select.open{border-color:#ffe7a3;background:rgba(255,231,163,.08)}
.st-select.open::after{transform:translateY(-20%) rotate(225deg)}
.st-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;max-height:340px;overflow-y:auto;
 background:rgba(24,21,28,.97);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.6);backdrop-filter:blur(14px);animation:stDD .14s ease-out}
.st-dd-list[hidden]{display:none}
@keyframes stDD{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.st-dd-item{position:relative;display:flex;align-items:center;gap:10px;padding:7px 34px 7px 7px;border:0;border-radius:11px;background:transparent;color:#fff;text-align:left;cursor:pointer;font:inherit}
.st-dd-item:hover{background:rgba(255,255,255,.07)}
.st-dd-item.selected{background:rgba(255,231,163,.1)}
.st-dd-item .st-style-ic{width:32px;height:32px}
.st-dd-item .st-check{right:10px}
/* ✕ on the style: turns it off (then only the words are used) */
.st-dd-off{position:absolute;right:38px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:800;cursor:pointer;display:grid;place-items:center;padding:0}
.st-dd-off:hover{background:rgba(255,255,255,.22)}
.st-dd-off[hidden]{display:none}
.st-select:not(.none){padding-right:70px}
.st-select.none b{opacity:.75}
.st-dd{z-index:10}
/* what a refusal costs with the picked model */
.st-refuse{margin:-2px 0 0;font-size:11px;line-height:1.4;padding:7px 10px;border-radius:10px;background:rgba(143,217,173,.08);color:#a9e6c2}
.st-refuse.warn{background:rgba(255,190,110,.1);color:#ffc98a;border:1px solid rgba(255,190,110,.25)}
/* which model made the picture: bottom right */
.st-item .st-item-model{position:absolute;right:6px;bottom:6px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.02em;background:rgba(0,0,0,.6);color:#ffe7a3;padding:3px 7px;border-radius:999px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-item span{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-model-tag{position:absolute;right:10px;bottom:10px;font-size:10px;font-weight:800;letter-spacing:.04em;background:rgba(0,0,0,.6);color:#ffe7a3;padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.st-model-tag:empty{display:none}
/* style name top-left, model bottom-right: they no longer overlap */
.st-item span{left:6px;top:6px;bottom:auto;max-width:calc(100% - 12px)}
.st-item .st-item-model{max-width:calc(100% - 12px)}
/* open in a web browser: the HUD's code box, the browser's code form, the "HUD off" lock */
.web-code-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.web-code{display:flex;flex-direction:column;gap:2px}
.web-code b{font:800 26px/1 Manrope,sans-serif;letter-spacing:.14em;color:var(--ink)}
.web-code small{font-size:11px;color:var(--muted)}
.web-login{max-width:520px;margin:6vh auto 0;text-align:left}
.web-form{display:flex;gap:10px;margin-top:18px}
.web-form .field{flex:1;font:800 24px Manrope,sans-serif;letter-spacing:.2em;text-align:center;padding:12px}
.web-note{margin-top:14px}
#hudOff{text-align:center}#hudOff .lc-mark{margin:0 auto 18px}#hudOff .linkbtn{margin-top:18px}
/* a product's tags: its own, a find-or-add box, the most used (ALL TAGS for the rest) */
.tag-edit{display:flex;flex-direction:column;gap:8px}
.tag-find{position:relative}
.tag-find svg.ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim);pointer-events:none}
.tag-find .field{padding-left:34px;width:100%;box-sizing:border-box}
.tag-none{font-size:12px;color:var(--dim)}
.cat.more{border-style:dashed;color:var(--lilac)}
.tag-sugg .cat:not(.add):not(.more){opacity:.85}
/* the web-browser code dialog */
.web-card{max-width:420px;text-align:left}
.web-big{display:flex;align-items:center;gap:14px;margin-top:6px}
.web-big b{font:800 38px/1 Manrope,sans-serif;letter-spacing:.12em;color:var(--ink)}
.web-left{color:var(--muted);font-size:11.5px}
.web-ways{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;margin-top:6px}
.web-qr{width:140px;height:140px;border-radius:12px;background:#fff;padding:6px;box-sizing:border-box}
.web-qr:empty{background:rgba(255,255,255,.06)}
.web-qr svg{display:block;width:100%;height:100%}
.web-how b{font-size:12.5px}.web-how p{margin:2px 0 10px;font-size:12px;color:var(--muted);line-height:1.4}.web-how p b{color:var(--ink)}
@media(max-width:380px){.web-ways{grid-template-columns:1fr}.web-qr{margin:0 auto}}
/* HANGER on your phone: the top-bar pill and the dialog, QR first */
.phonebtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--lilacLine);background:linear-gradient(135deg,rgba(201,184,214,.22),rgba(201,184,214,.06));color:var(--ink);font:800 10.5px Manrope,sans-serif;letter-spacing:.14em;cursor:pointer;box-shadow:0 0 18px rgba(201,184,214,.18)}
.phonebtn svg.ic{width:15px;height:15px;margin:0}
.phonebtn:hover{background:rgba(201,184,214,.28)}
.phonebtn[hidden]{display:none}
@media(max-width:520px){.phonebtn span{display:none}.phonebtn{padding:0 9px}}
.web-card{text-align:center}
.web-eyebrow{display:inline-flex;align-items:center;gap:6px;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--lilac)}
.web-eyebrow svg.ic{width:13px;height:13px;margin:0}
.web-card #webDTitle{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.02em;text-transform:uppercase}
.web-sub{margin:4px auto 6px;max-width:320px}
.web-card .web-qr{width:200px;height:200px;margin:4px auto 0;padding:8px;box-shadow:0 0 0 6px rgba(201,184,214,.14),0 18px 40px rgba(0,0,0,.45)}
.web-or{display:flex;align-items:center;gap:10px;margin:10px 0 2px;color:var(--dim);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.web-or::before,.web-or::after{content:"";flex:1;height:1px;background:var(--line2)}
.web-pc{margin:0;font-size:12px;color:var(--muted)}.web-pc b{color:var(--ink)}
.web-card .web-big{justify-content:center}
.web-card .web-big b{font-size:28px}
/* a web browser (a phone): no HUD window buttons, and everything fits a 360-430 px screen */
body.web #winBtns,body.web .ph-winhandle{display:none!important}
@media(max-width:520px){
 .top{padding:10px 12px;gap:8px}
 .brandsub{display:none}
 body.web #statusText{display:none}body.web .status{padding:7px}
 .top-right{gap:4px;min-width:0}
 .top-right .themebtn{width:30px;height:30px}
 .titlerow{flex-wrap:wrap;gap:8px}
 .titleside{flex-wrap:wrap;margin-left:auto;justify-content:flex-end;gap:6px;min-width:0}
 .tabs{padding-left:8px;padding-right:8px}
 .tabs-inner{gap:3px}
 .tab{min-width:0;padding:9px 4px;gap:5px;letter-spacing:.06em;font-size:9.5px}
 .tab .count,.tab .n{font-size:9px}
}
.phonebtn{margin-right:6px}@media(max-width:560px){.phonebtn{margin-right:5px}}
/* narrow screens (phones, the 480-wide HUD): the row wraps - it slid sideways before, and on the HUD (no swipe) SMART
   WEAR was cut off at the edge */
@media(max-width:520px){
 .brandrow>*{flex:0 0 auto}
}
/* landing: HANGER on your phone */
.land-phone{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(40px,8vh,90px) 0}
.land-phone h2.display{font-size:clamp(46px,6.4vw,96px);line-height:.94;text-transform:uppercase;margin:6px 0 14px}
body.landing .land-phone h2 .accent{color:var(--lilac);text-shadow:0 0 42px rgba(201,184,214,.45)}
.land-phone .land-lead b{color:var(--ink)}
.land-phone-steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.land-phone-steps li{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--muted)}.land-phone-steps b{color:var(--ink)}
.land-phone-steps li>span{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:400 18px var(--display);color:var(--bg);background:var(--lilac);box-shadow:0 0 22px rgba(201,184,214,.45)}
.land-phone-safe{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;padding:12px 14px;border:1px solid var(--lilacLine);border-radius:14px;background:rgba(201,184,214,.06);font-size:13px;color:var(--muted);line-height:1.5}
.land-phone-safe svg.ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--lilac)}.land-phone-safe b{color:var(--ink)}
.land-phone-art{position:relative;height:clamp(460px,58vw,640px)}
.phone-frame{position:absolute;right:8%;top:0;width:clamp(210px,21vw,290px);aspect-ratio:390/844;border-radius:38px;padding:9px;background:linear-gradient(145deg,#2a2530,#0c0a0e);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(201,184,214,.18);transform:rotate(4deg)}
.phone-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:30px}
.phone-frame::before{content:"";position:absolute;top:16px;left:50%;width:70px;height:18px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:1}
.phone-frame.back{right:40%;top:12%;transform:rotate(-7deg) scale(.88);opacity:.75;filter:saturate(.8)}
.land-card.hot{border-color:var(--lilacLine);background:linear-gradient(160deg,rgba(201,184,214,.12),rgba(201,184,214,.03))}
@media(max-width:820px){.land-phone{grid-template-columns:1fr}.land-phone-art{height:clamp(420px,120vw,560px)}.phone-frame{right:8%;width:clamp(190px,50vw,260px)}.phone-frame.back{right:auto;left:4%}}
.help-stuck.help-phone-news .ic svg.ic{width:20px;height:20px;margin:0}
/* landing: the 3D phone scene (phone3d.js) replaces the two flat phones */
.land-phone-art canvas.phone3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.land-phone-art.has-3d .phone-frame{display:none}
/* CATEGORIES: a toggle; closed until tapped */
.catlabel.cattoggle{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:10px;letter-spacing:.18em;font-weight:800;cursor:pointer;margin-right:0}
.catlabel.cattoggle .n{color:var(--faint);letter-spacing:0}
.catlabel.cattoggle svg.ic{width:13px;height:13px;margin:0;transition:transform .2s}
.catlabel.cattoggle.open{color:var(--ink);border-color:var(--line3)}.catlabel.cattoggle.open svg.ic{transform:rotate(180deg)}
/* a model that is coming soon */
.st-model.soon{opacity:.5;cursor:default}.st-model.soon:hover{background:rgba(255,255,255,.06)}
.st-model-soon{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.14em;padding:3px 8px;border-radius:999px;border:1px dashed rgba(255,255,255,.35);color:#fff}
.adm-sort{margin-left:auto}
/* 3 or 4 cards a row (the standard is 2): smaller type, WEAR / + / HUD as compact buttons */
.cols-btn{display:inline-flex;align-items:center;gap:4px}.cols-btn .n{font-size:11px;font-weight:800}.cols-btn svg.ic{margin:0}
.cols-btn[hidden]{display:none}
#grid.cols-3:not(.list){grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#grid.cols-4:not(.list){grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#grid.cols-3:not(.list) .tile,#grid.cols-4:not(.list) .tile{gap:6px}
#grid.cols-3:not(.list) .tile h3{font-size:12.5px}#grid.cols-4:not(.list) .tile h3{font-size:11px;line-height:1.2}
#grid.cols-3:not(.list) .brand-eyebrow,#grid.cols-4:not(.list) .brand-eyebrow{font-size:8px;letter-spacing:.14em}
#grid.cols-3:not(.list) .meta,#grid.cols-4:not(.list) .meta{font-size:8.5px;letter-spacing:.08em}
#grid.cols-4:not(.list) .meta{display:none}
#grid.cols-3:not(.list) .btn,#grid.cols-4:not(.list) .btn{min-height:32px;padding:6px 8px;font-size:10px;letter-spacing:.1em}
#grid.cols-3:not(.list) .btn.add,#grid.cols-4:not(.list) .btn.add,#grid.cols-3:not(.list) .btn.hud,#grid.cols-4:not(.list) .btn.hud{font-size:0;gap:0;padding:6px}
#grid.cols-3:not(.list) .btn.add svg.ic,#grid.cols-4:not(.list) .btn.add svg.ic,#grid.cols-3:not(.list) .btn.hud svg.ic,#grid.cols-4:not(.list) .btn.hud svg.ic{width:14px;height:14px;margin:0}
#grid.cols-3:not(.list) .wear-row,#grid.cols-4:not(.list) .wear-row{gap:5px}
#grid.cols-3:not(.list) .actions,#grid.cols-4:not(.list) .actions{grid-template-columns:1fr auto;align-items:center}
#grid.cols-3:not(.list) .coveredit,#grid.cols-3:not(.list) .fav,#grid.cols-4:not(.list) .coveredit,#grid.cols-4:not(.list) .fav{width:22px;height:22px}
#grid.cols-4:not(.list) .chip{font-size:7px;padding:2px 5px}
#grid.cols-4:not(.list) .actions{grid-template-columns:1fr}#grid.cols-4:not(.list) .btn.hud{min-height:26px;padding:4px}#grid.cols-4:not(.list) .btn{padding:6px 5px;letter-spacing:.06em}
@media(max-width:560px){#found.all{display:none}}
/* HANGER Assistant: the orb at the bottom right and its chat */
.hx-launch{position:fixed;right:18px;bottom:18px;z-index:80;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(201,184,214,.25),rgba(20,16,24,.85) 70%);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 30px rgba(201,184,214,.35);cursor:pointer;transition:transform .2s}
.hx-launch:hover{transform:scale(1.07)}
.hx-orb{width:64px;height:64px;display:block;border-radius:50%}
.hx-orb.flat{background:radial-gradient(circle at 40% 35%,#f1e6fa,#c9b8d6 45%,#6b4f86)}
.hx-badge{position:absolute;top:4px;right:4px;width:13px;height:13px;border-radius:50%;background:#8fd9ad;box-shadow:0 0 0 2px #0b0a0c,0 0 10px #8fd9ad;display:none}
.hx-launch.new .hx-badge{display:block;animation:phLive 1.4s ease-in-out infinite}
.hx-tip{position:absolute;right:74px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 12px;border-radius:12px;background:rgba(20,17,23,.92);border:1px solid rgba(201,184,214,.3);color:#efe9e4;font:700 12px Manrope,sans-serif;opacity:0;pointer-events:none;transition:opacity .5s}
.hx-launch:hover .hx-tip,.hx-launch.tip .hx-tip{opacity:1}.hx-launch.open .hx-tip{display:none}
.hx-panel{position:fixed;right:18px;bottom:94px;z-index:81;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
 background:rgba(18,15,21,.96);border:1px solid rgba(201,184,214,.28);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(201,184,214,.18);backdrop-filter:blur(16px);color:#efe9e4;font-family:Manrope,sans-serif;animation:hxIn .22s ease-out}
.hx-panel[hidden]{display:none}
@keyframes hxIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.hx-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(201,184,214,.16),transparent)}
.hx-head b{display:block;font-size:14px;letter-spacing:.04em}.hx-head small{display:block;font-size:11px;color:#a69ba8}
.hx-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9b8d6 50%,#6b4f86);box-shadow:0 0 12px rgba(201,184,214,.8)}
.hx-panel.human .hx-dot{background:#8fd9ad;box-shadow:0 0 12px #8fd9ad}
.hx-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#efe9e4;font-size:20px;line-height:1;cursor:pointer}
.hx-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.hx-m{max-width:86%;padding:9px 12px;border-radius:16px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.hx-m.bot{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:5px}
.hx-m.agent{align-self:flex-start;background:rgba(143,217,173,.12);border:1px solid rgba(143,217,173,.3);border-bottom-left-radius:5px}
.hx-m.user{align-self:flex-end;background:#c9b8d6;color:#15111a;border-bottom-right-radius:5px}
.hx-m a{color:#e6d6f2;text-decoration:underline}.hx-m.user a{color:#15111a}
.hx-who{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#8fd9ad;margin-bottom:3px;text-transform:uppercase}
.hx-m.typing{display:flex;gap:4px;padding:12px 14px}.hx-m.typing i{width:7px;height:7px;border-radius:50%;background:#c9b8d6;animation:hxDot 1s infinite}
.hx-m.typing i:nth-child(2){animation-delay:.15s}.hx-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes hxDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.hx-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}.hx-quick[hidden]{display:none}
.hx-q{padding:7px 11px;border-radius:999px;border:1px solid rgba(201,184,214,.35);background:rgba(201,184,214,.08);color:#efe9e4;font:700 12px Manrope,sans-serif;cursor:pointer}
.hx-q:hover{background:rgba(201,184,214,.18)}
.hx-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.hx-form textarea{flex:1;resize:none;max-height:120px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#efe9e4;font:500 13.5px/1.4 Manrope,sans-serif;outline:none}
.hx-form textarea:focus{border-color:#c9b8d6}
.hx-form button{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#c9b8d6;color:#15111a;font-size:16px;cursor:pointer}
@media(max-width:520px){.hx-panel{right:0;left:0;bottom:0;width:100%;height:100%;max-height:none;border-radius:0}.hx-launch{right:14px;bottom:14px;width:56px;height:56px}.hx-orb{width:56px;height:56px}
 body.hx-on .hx-launch{display:none}}
.hx-end{margin-left:auto;padding:6px 10px;border-radius:999px;border:1px solid rgba(240,161,173,.4);background:transparent;color:#f0a1ad;font:800 10px Manrope,sans-serif;letter-spacing:.12em;cursor:pointer}
.hx-end[hidden]{display:none}.hx-end:not([hidden])+.hx-x{margin-left:6px}
.hx-m.note{align-self:center;max-width:92%;background:transparent;color:#a69ba8;font-size:11.5px;text-align:center;padding:4px 8px}
.hx-form.off{opacity:.5}
.hx-t{white-space:pre-line}

/* the AI can be wrong: a quiet note under every AI stylist answer */
.ai-warn{margin:10px 0 0;font:500 11.5px/1.45 Manrope,sans-serif;color:var(--muted,#9a93a0);opacity:.85}

/* admin: feedback from HANGER Assistant - the visitor's own words under the Turkish summary */
.adm-fb-orig{margin-top:6px;padding-left:10px;border-left:2px solid var(--line2);color:var(--muted);font-size:12px;line-height:1.5}

/* HANGER Assistant on the HUD screen: the whole screen, opened from 💬 */
.hx-panel.hx-embed{right:0;left:0;top:0;bottom:0;width:100%;height:100%;max-height:none;border-radius:0;z-index:95}
/* the problem or idea the AI wrote up, waiting for the visitor's OK */
.hx-draft{align-self:stretch;margin:4px 0;padding:12px 14px;border:1px solid rgba(201,184,214,.45);border-radius:14px;background:rgba(201,184,214,.08)}
.hx-draft-k{display:block;margin-bottom:6px;font:800 10.5px/1 Manrope,sans-serif;letter-spacing:.12em;color:#c9b8d6}
.hx-draft .hx-t{font:500 13.5px/1.5 Manrope,sans-serif;color:#efe9e4;white-space:pre-wrap}
.hx-draft-b{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.hx-draft-b button{padding:9px 14px;border-radius:999px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.08em;cursor:pointer}
.hx-send{border:0;background:#c9b8d6;color:#15111a}.hx-drop{border:1px solid rgba(255,255,255,.2);background:transparent;color:#efe9e4}
.hx-draft-b button:disabled{opacity:.5;cursor:default}

/* admin: the ticket's conversation */
.adm-fb-seen{display:block;margin-top:6px;color:var(--dim);font-size:11px}

/* ---- SUPPORT TICKET (/t/<ticket>): the team's answer to a problem or an idea, over a three.js night of dust */
.ticket-page{background:var(--bg)}
.tk-scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.tk-wrap{position:relative;z-index:1}
.tk-main{max-width:720px;margin:0 auto;padding:8px 16px 60px}
.tk-hero{display:flex;align-items:center;gap:18px;margin:10px 0 22px}
.tk-ring{flex:none;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(201,184,214,.14),transparent 70%)}
.tk-ring canvas{width:120px;height:120px;display:block}
.tk-ring.flat{background:radial-gradient(circle,var(--lilac) 0 22%,transparent 23% 58%,var(--lilacLine) 59% 64%,transparent 65%)}
.tk-title{font-size:clamp(32px,7vw,54px);margin:6px 0}
.tk-meta{margin:0;color:var(--muted);font-size:13px}
.tk-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tk-steps li{position:relative;padding:12px 10px 10px;border:1px solid var(--line2);border-radius:14px;background:rgba(var(--panelRgb),.72);backdrop-filter:blur(6px);transition:border-color .4s,background .4s}
.tk-steps li i{display:block;width:10px;height:10px;border-radius:50%;background:var(--line3);margin-bottom:8px;transition:background .4s,box-shadow .4s}
.tk-steps li b{display:block;font:800 11px/1.2 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.tk-steps li small{display:block;margin-top:4px;color:var(--dim);font-size:11px;line-height:1.35}
.tk-steps li.done i{background:var(--lilac)}
.tk-steps li.now{border-color:var(--lilac)}
.tk-steps li.now i{background:var(--lilac);box-shadow:0 0 0 0 rgba(201,184,214,.6);animation:tkPulse 1.8s ease-out infinite}
@keyframes tkPulse{to{box-shadow:0 0 0 10px rgba(201,184,214,0)}}
@media(prefers-reduced-motion:reduce){.tk-steps li.now i{animation:none}}
.tk-wait{margin:0 0 16px;padding:12px 14px;border-radius:14px;border:1px dashed var(--lilacLine);color:var(--muted);font-size:13px;line-height:1.55;background:rgba(var(--panelRgb),.6)}
.tk-thread{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.tk-msg{max-width:88%;padding:12px 14px;border-radius:16px;border:1px solid var(--line2);background:rgba(var(--panelRgb),.82);backdrop-filter:blur(6px);animation:tkIn .45s ease both}
.tk-msg.you{align-self:flex-end;border-color:var(--lilacLine)}
.tk-msg.team{align-self:flex-start;border-color:var(--lilac);box-shadow:0 0 24px rgba(201,184,214,.12)}
.tk-who{font:800 10.5px/1 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);margin-right:8px}
.tk-msg time{font-size:11px;color:var(--dim)}
.tk-t{margin-top:6px;color:var(--ink);font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.tk-t a{color:var(--lilac)}
@keyframes tkIn{from{opacity:0;transform:translateY(8px)}}
.tk-form{padding:14px;border:1px solid var(--line2);border-radius:16px;background:rgba(var(--panelRgb),.82);backdrop-filter:blur(6px)}
.tk-label{display:block;margin-bottom:8px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tk-form textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:80px}
.tk-form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.tk-err{color:var(--bad);font-size:12px}
.tk-note{margin:18px 0 0;color:var(--dim);font-size:12px;line-height:1.5}
.tk-note a{color:var(--lilac)}
.tk-missing{padding:40px 0;text-align:center}.tk-missing p{color:var(--muted)}
@media(max-width:560px){.tk-hero{gap:12px}.tk-ring,.tk-ring canvas{width:88px;height:88px}.tk-steps{grid-template-columns:1fr 1fr}.tk-msg{max-width:100%}}

/* ---- admin CHATS: HANGER Assistant's conversations - a list on the left, the whole conversation on the right */
.badge.live{background:#8fd9ad;color:#0b0a0c}
.adm-chats{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;height:calc(100vh - 230px);min-height:520px}
.chat-side{display:flex;flex-direction:column;gap:10px;min-height:0}
.chat-tools{display:flex;gap:8px}.chat-tools .field{flex:1;min-width:0}.chat-src{flex:0 0 46%!important}
.chat-kinds .cat{padding:7px 10px;font-size:9.5px}
.chat-stats{display:flex;gap:14px;flex-wrap:wrap;padding:2px 2px 0;color:var(--dim);font-size:11px}.chat-stats b{color:var(--ink);font-size:13px}
.chat-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.chat-row{text-align:left;width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.chat-row:hover{border-color:var(--line3);transform:translateX(2px)}
.chat-row.on{border-color:var(--lilac);background:linear-gradient(135deg,rgba(201,184,214,.1),var(--panel) 60%);box-shadow:inset 3px 0 0 var(--lilac)}
.chat-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chat-row-top b{font:800 13.5px/1.2 Manrope,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-top time{flex:none;color:var(--dim);font-size:11px}
.chat-first{margin:5px 0 7px;color:var(--muted);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-tags{display:flex;flex-wrap:wrap;gap:4px}
.chat-tag{padding:3px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font:800 9px/1 Manrope,sans-serif;letter-spacing:.1em}
.chat-tag.hud{border-color:var(--lilacLine);color:var(--lilac)}
/* an answer to a notice IM not opened yet */
.chat-tag.new{border-color:var(--lilac);color:var(--ink);background:rgba(201,184,214,.18);box-shadow:0 0 12px rgba(201,184,214,.35)}.chat-row.unread{border-color:rgba(201,184,214,.55)!important;box-shadow:0 0 18px rgba(201,184,214,.18)}.chat-row.unread .chat-first{color:var(--ink);font-weight:700}.chat-tag.you{border-color:var(--okLine);color:var(--ok)}
.chat-tag.tk{border-color:var(--warnLine);color:var(--warn)}.chat-tag.bad{border-color:var(--badLine2);color:var(--bad)}
.chat-count{display:block;margin-top:7px;color:var(--faint);font-size:10.5px}
.chat-view{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line2);border-radius:18px;background:var(--panel2);overflow:hidden}
.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--muted);padding:40px}
.chat-empty b{color:var(--ink);font:800 15px Manrope,sans-serif}.chat-empty span{max-width:300px;font-size:12.5px;line-height:1.5}
.chat-empty-orb{width:64px;height:64px;margin-bottom:10px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f4ecfa,#c9b8d6 40%,#6b4f86 75%,transparent 76%);box-shadow:0 0 40px rgba(201,184,214,.35);animation:chatOrb 4s ease-in-out infinite}
@keyframes chatOrb{50%{transform:scale(1.06) translateY(-3px);box-shadow:0 0 60px rgba(201,184,214,.5)}}
@media(prefers-reduced-motion:reduce){.chat-empty-orb{animation:none}}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line2);background:var(--panel);display:flex;flex-direction:column;gap:10px}
.chat-who{display:flex;align-items:center;gap:10px}.chat-name{font:800 16px Manrope,sans-serif}
.chat-live{padding:4px 8px;border-radius:999px;background:rgba(143,217,173,.14);color:var(--ok);font:800 9.5px/1 Manrope,sans-serif;letter-spacing:.12em;animation:phLive 1.4s ease-in-out infinite}
.chat-meta{color:var(--dim);font-size:11.5px}
.chat-facts{display:flex;flex-wrap:wrap;gap:6px}
.chat-facts span{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border:1px solid var(--line2);border-radius:10px;min-width:70px}
.chat-facts small{color:var(--dim);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}.chat-facts b{font-size:13px}
.chat-tickets{display:flex;flex-direction:column;gap:6px}
.chat-ticket{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px dashed var(--warnLine);border-radius:10px;color:var(--ink);text-decoration:none;font-size:12px}
.chat-ticket:hover{border-style:solid}
.chat-log{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:10px}
.chat-day{align-self:center;margin:6px 0;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);color:var(--dim);font:700 10px/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.chat-note{align-self:center;max-width:80%;text-align:center;color:var(--dim);font-size:11.5px;font-style:italic}
.chat-b{max-width:78%;padding:10px 13px;border-radius:16px;border:1px solid var(--line2);background:var(--panel);animation:tkIn .3s ease both}
.chat-b.user{align-self:flex-end;background:rgba(201,184,214,.14);border-color:var(--lilacLine);border-bottom-right-radius:5px}
.chat-b.bot{align-self:flex-start;border-bottom-left-radius:5px}
.chat-b.agent{align-self:flex-start;border-color:var(--okLine);background:rgba(143,217,173,.07);border-bottom-left-radius:5px}
.chat-b-top{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.chat-b-top b{font:800 10px/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chat-b.user .chat-b-top b{color:var(--lilac)}.chat-b.agent .chat-b-top b{color:var(--ok)}
.chat-b-top time{color:var(--faint);font-size:10.5px}
.chat-b-t{font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
@media(max-width:860px){.adm-chats{grid-template-columns:1fr;height:auto}.chat-list{max-height:46vh}.chat-view{min-height:70vh}}
/* a soft blink for "live" things (the assistant's new-answer dot, LIVE NOW in CHATS) */
@keyframes phLive{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.chat-live,.hx-launch.new .hx-badge{animation:none}}
.tk-meta{font:500 13px/1.4 Manrope,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.tk-form textarea{font:500 14px/1.5 Manrope,sans-serif;color:var(--ink)}
.chat-name{font:800 16px/1.2 Manrope,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)}
/* the mini screen's top row never pushes the close button out (long labels in other languages) */
.mini-top strong,.mini-win,.mini-win button{flex:none}.mini-count{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---- pictures in HANGER Assistant and tickets: paperclip, paste, drop */
.hx-att,.tk-att{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:#cfc6d6;cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.hx-att:hover,.tk-att:hover{color:#efe9e4;border-color:#c9b8d6;transform:rotate(-12deg)}
.tk-att{border-color:var(--line2);color:var(--muted)}.tk-att:hover{color:var(--ink);border-color:var(--lilac)}
.hx-panel.img-drag,.tk-form.img-drag{outline:2px dashed #c9b8d6;outline-offset:-8px}
.hx-panel.img-drag::after{content:"";position:absolute;inset:0;background:rgba(201,184,214,.08);pointer-events:none}
.hx-pend{display:flex;align-items:center;gap:10px;margin:0 12px;padding:8px 10px;border:1px solid rgba(201,184,214,.35);border-radius:14px;background:rgba(201,184,214,.07)}
.hx-pend[hidden]{display:none}
.hx-pend-th{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06)}
.hx-pend-th img{width:100%;height:100%;object-fit:cover;display:block}
.hx-pend-th.busy,.tk-pic.busy{background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(201,184,214,.25) 50%,rgba(255,255,255,.04) 70%);background-size:300% 100%;animation:imgLoad 1.1s linear infinite}
@keyframes imgLoad{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.hx-pend-th.busy,.tk-pic.busy{animation:none}}
.hx-pend-t{flex:1;color:#cfc6d6;font:500 12px/1.35 Manrope,sans-serif}.hx-pend-err{flex:1;color:#f0a1ad;font:600 12px/1.35 Manrope,sans-serif}
.hx-pend-x{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#efe9e4;cursor:pointer;font-size:15px;line-height:1}
.hx-img{display:block;margin:2px 0 6px;border-radius:12px;overflow:hidden;max-width:220px;border:1px solid rgba(255,255,255,.12)}
.hx-img img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.hx-m.user .hx-img{margin-left:auto}
.tk-pics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tk-pics[hidden]{display:none}
.tk-pic{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--panel)}
.tk-pic img{width:100%;height:100%;object-fit:cover;display:block}
.tk-pic button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:13px;line-height:1}
.tk-form-row .tk-err{flex:1}
.tk-imgs,.adm-pics{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tk-imgs a,.adm-pics a{display:block;width:120px;height:90px;border-radius:10px;overflow:hidden;border:1px solid var(--line2)}
.tk-imgs img,.adm-pics img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tk-imgs a:hover img,.adm-pics a:hover img{transform:scale(1.05)}

/* ---- the owner's LIVE chat page (/live/<chat>): phone first, the whole screen, answer at the bottom */
.live-page{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,sans-serif}
.lv{display:flex;flex-direction:column;height:100dvh;max-width:760px;margin:0 auto}
.lv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line2);background:var(--panel)}
.lv-who{display:flex;align-items:center;gap:10px;min-width:0}.lv-who b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-who small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.lv-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--line3)}
.lv-dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(143,217,173,.6);animation:tkPulse 1.6s ease-out infinite}.lv-dot.bot{background:var(--lilac)}.lv-dot.off{background:var(--line3)}
.lv-icon{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);font:800 14px Manrope,sans-serif;cursor:pointer}
.lv-info{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line2);background:var(--panel2)}.lv-info[hidden]{display:none}
.lv-info span{display:flex;flex-direction:column;padding:6px 9px;border:1px solid var(--line2);border-radius:10px}.lv-info small{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.lv-info b{font-size:13px}
.lv-prof,.lv-tk{display:block;width:100%;color:var(--lilac);font-size:12.5px;text-decoration:none;padding:4px 2px}
.lv-bar{padding:8px 14px;text-align:center;color:var(--warn);font-size:12.5px;background:var(--warnBg);border-bottom:1px solid var(--warnLine)}.lv-bar[hidden]{display:none}
.lv-log{flex:1;overflow-y:auto;padding:14px 12px 18px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.lv-note{align-self:center;max-width:88%;text-align:center;color:var(--dim);font-size:11.5px;font-style:italic;margin:4px 0}
.lv-m{max-width:86%;padding:9px 12px;border-radius:16px;border:1px solid var(--line2);background:var(--panel);animation:tkIn .25s ease both}
.lv-m.user{align-self:flex-start;border-color:var(--lilacLine);background:rgba(201,184,214,.12);border-bottom-left-radius:5px}
.lv-m.bot{align-self:flex-start;opacity:.82;border-bottom-left-radius:5px}
.lv-m.agent{align-self:flex-end;border-color:var(--okLine);background:rgba(143,217,173,.1);border-bottom-right-radius:5px}
.lv-m-top{display:flex;gap:8px;align-items:baseline;margin-bottom:3px}.lv-m-top b{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lv-m.user .lv-m-top b{color:var(--lilac)}.lv-m.agent .lv-m-top b{color:var(--ok)}.lv-m-top time{color:var(--faint);font-size:10.5px}
.lv-t{font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.lv-t a{color:var(--lilac)}
.lv-sub{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line2);color:var(--dim);font-size:12.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.lv-img{display:block;margin:4px 0 6px;border-radius:12px;overflow:hidden;max-width:260px;border:1px solid var(--line2)}.lv-img img{display:block;width:100%;height:auto}
.lv-join{padding:12px 14px;border-top:1px solid var(--line2);background:var(--panel2);text-align:center}.lv-join[hidden]{display:none}
.lv-join p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.45}
.lv-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line2);background:var(--panel)}.lv-form[hidden]{display:none}
.lv-form textarea{flex:1;resize:none;max-height:140px;padding:11px 14px;border-radius:18px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);font:500 16px/1.4 Manrope,sans-serif;outline:none}
.lv-form textarea:focus{border-color:var(--lilac)}
.lv-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--lilac);color:#15111a;font-size:17px;cursor:pointer}
.lv-acts{display:flex;gap:6px;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:var(--panel)}
.lv-btn{flex:1;padding:10px 8px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:800 11.5px/1 Manrope,sans-serif;cursor:pointer}
.lv-btn.primary{flex:none;padding:12px 22px;background:var(--lilac);color:#15111a;border-color:var(--lilac);letter-spacing:.08em}
.lv-btn.bad{color:var(--bad);border-color:var(--badLine2)}.lv-btn:disabled{opacity:.4}
.chat-golive{margin-left:auto;text-decoration:none}

.lv-tr{display:flex;align-items:center;gap:8px;padding:8px 14px 0;color:var(--muted);font:600 12px Manrope,sans-serif;background:var(--panel);border-top:1px solid var(--line2);cursor:pointer}.lv-tr[hidden]{display:none}
.lv-tr input{width:16px;height:16px;accent-color:var(--lilac)}.lv-tr input:disabled+span{color:var(--dim)}
.lv-tr+.lv-form{border-top:0}

/* RENAME in a product's window: the name, a small RENAME, and the #RLV folder's own name under a renamed one */
.edit-titlerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.edit-rename{flex:none;width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--lilac);background:rgba(201,184,214,.12);color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.edit-rename:hover{background:var(--lilac);color:var(--bg);transform:rotate(-8deg)}
.edit-rename svg.ic{width:15px;height:15px;margin:0;vertical-align:0}
.edit-titlerow{align-items:center}
.edit-folder{margin:2px 0 0;font-size:11px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.edit-folder[hidden]{display:none}
.edit-folder .linkbtn{font-size:10px;letter-spacing:.1em}

/* the card's name with a small pencil at its right end: rename straight from the collection */
.tile-name{display:flex;align-items:center;gap:6px;min-width:0}.tile-name h3{flex:1;min-width:0}
.tile-rename{flex:none;width:24px;height:24px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;opacity:.75;transition:opacity .2s,color .2s,border-color .2s}
.tile-rename:hover,.tile-rename:focus-visible{opacity:1;color:var(--ink);border-color:var(--lilac)}
.tile-rename svg.ic{width:12px;height:12px;margin:0;vertical-align:0}

/* admin CHATS: the HANGER Assistant bot card */
.bot-card{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel)}
.bot-head{display:flex;align-items:center;gap:12px}.bot-head b{display:block;font:800 14px Manrope,sans-serif}.bot-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.bot-acts{margin-left:auto;display:flex;gap:6px}
.bot-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--line3)}.bot-dot.on{background:var(--ok);animation:tkPulse 1.6s ease-out infinite}.bot-dot.wait{background:var(--warn)}
.bot-pass{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}.bot-pass label{display:block;font:800 10.5px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.bot-pass-row{display:flex;gap:8px}.bot-pass-row .field{flex:1;max-width:380px}.bot-pass small{display:block;margin-top:6px;color:var(--dim);font-size:11.5px}

.bot-inv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);font-size:13px}
.bot-inv label{display:flex;gap:8px;align-items:center;cursor:pointer}.bot-inv input{accent-color:var(--lilac);width:16px;height:16px}.bot-inv small{color:var(--dim);font-size:11.5px}
@media(max-width:700px){.bot-inv{grid-template-columns:1fr}}

/* landing: "send me the free DEMO" - a username, and a three.js gift box that opens when it is on its way */
.demo-req{display:flex;gap:16px;align-items:center;margin-top:14px;padding:16px 18px;border:1px solid var(--lilacLine);border-radius:20px;background:linear-gradient(135deg,rgba(201,184,214,.1),rgba(var(--panelRgb),.85) 60%);animation:tkIn .35s ease both}
.demo-req[hidden]{display:none}
.demo-req-box{flex:none;width:96px;height:96px}
.demo-req-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.demo-req-body b{font:800 15px Manrope,sans-serif}.demo-req-body small{color:var(--muted);font-size:12.5px}
.demo-req-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.demo-req-row .field{flex:1;min-width:200px}
.demo-req-msg{margin:2px 0 0;font-size:13px;line-height:1.45;min-height:1em}.demo-req-msg.ok{color:var(--ok)}.demo-req-msg.bad{color:var(--bad)}.demo-req-msg.wait{color:var(--muted)}
.demo-req-mp{font-size:12px;color:var(--dim)}.demo-req-mp:hover{color:var(--lilac)}
@media(max-width:560px){.demo-req{flex-direction:column;align-items:stretch}.demo-req-box{align-self:center}}
.hx-form[hidden]{display:none}
.hx-namecard{margin:6px 0 4px;padding:14px;border-radius:16px;border:1px solid rgba(201,184,214,.45);background:linear-gradient(160deg,rgba(201,184,214,.12),rgba(255,255,255,.03));box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hx-namecard label{display:block;font:700 12px/1.2 Inter,Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#c9b8d6;margin-bottom:8px}
.hx-namecard div{display:flex;gap:8px}
.hx-namecard input{flex:1;min-width:0;min-height:42px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:#f3ede6;font:500 15px Inter,Manrope,sans-serif;outline:none}
.hx-namecard input:focus{border-color:#c9b8d6;box-shadow:0 0 0 3px rgba(201,184,214,.2)}
.hx-namecard button{min-height:42px;padding:0 14px;border:0;border-radius:12px;background:#c9b8d6;color:#15111a;font:700 13px Inter,Manrope,sans-serif;cursor:pointer;white-space:nowrap}
.hx-namecard button:disabled{opacity:.6}
.hx-name-err{display:block;margin-top:8px;color:#f0a1ad;font-size:12.5px;line-height:1.4}
.chat-tag.lc{border-color:#7a5a2e;color:#d8b98a;font-family:Anton,Impact,sans-serif;letter-spacing:.04em}.chat-tag.hg{border-color:var(--lilacLine);color:var(--lilac)}
.adm-tabs .xtab{display:flex;align-items:center;flex:0 0 auto;padding:10px 16px;min-height:40px;border-radius:999px;background:var(--glass);border:1px solid rgba(216,185,138,.35);color:#d8b98a;font-size:11px;font-weight:700;letter-spacing:.14em;text-decoration:none}.adm-tabs .xtab:hover{background:rgba(216,185,138,.12)}

/* LECASTLE pages inside the admin (their own address, in a frame that grows with them) */
.lc-frame{display:block;width:100%;height:600px;border:0;background:transparent}

/* skeletons: soft shimmering placeholders while the admin's data loads */
.skel{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(201,184,214,.07) 25%,rgba(201,184,214,.17) 37%,rgba(201,184,214,.07) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-tile{gap:10px!important;min-height:104px}.skel-num{height:34px;width:55%}.skel-line{height:10px;width:85%}.skel-line.short{width:50%}
.skel-bars{display:flex;align-items:flex-end;gap:4px;height:100%;min-height:120px;padding-top:10px}.skel-bars i{flex:1;border-radius:4px 4px 0 0}
.skel-chip{display:inline-block;width:110px;height:28px;border-radius:999px;margin:4px}
.skel-row td{padding:14px}.skel-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px}.skel-card.big{min-height:160px}
.skel-frame{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.skel-frame .skel-card{grid-column:1/-1}
.lc-frame.loading{height:0!important}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* admin tabs in two groups (HANGER / LECASTLE) with icons */
body.adm-app .adm-tabs{flex-direction:column;flex-wrap:nowrap;gap:8px}.adm-tg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.adm-tgl{flex:0 0 96px;font:400 14px/1 Anton,Impact,sans-serif;letter-spacing:.06em;color:var(--ink);opacity:.85}.adm-tg.lc .adm-tgl{color:#d8b98a;opacity:1}.adm-tabs .tab{display:inline-flex;align-items:center;gap:8px}.adm-tabs .tab svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.adm-tabs .tab.selected svg{opacity:1}body.adm-app .adm-tg.lc .tab.selected{background:linear-gradient(180deg,rgba(216,185,138,.24),rgba(216,185,138,.08));border-color:rgba(216,185,138,.5);box-shadow:0 0 24px rgba(216,185,138,.2)}body.adm-app .adm-tg.lc .tab:hover svg{color:#d8b98a}@media(max-width:700px){.adm-tgl{flex-basis:100%;margin:4px 0 2px}}
/* overview tiles: they fill the row (no empty columns at the end), the value stays on one line */
body.adm-app .adm-tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}body.adm-app .adm-tile-value{white-space:nowrap;font-size:clamp(28px,2.4vw,40px)}body.adm-app .adm-tile{min-width:0}body.adm-app .adm-tile-hint{line-height:1.45}

/* end chat: the first tap asks */
.hx-end.arm{background:rgba(240,161,173,.16);border-color:#f0a1ad;letter-spacing:.06em}

/* admin chats: a customer, a demo user, a newcomer */
.chat-tag.cust{border-color:rgba(120,200,150,.55);color:#8fd6a8}.chat-tag.demo{border-color:var(--warnLine);color:var(--warn)}.chat-tag.newc{color:var(--muted)}

/* admin sales: delivered / reminded under "not worn yet" */
.adm-deliv{display:block;margin-top:3px;font-size:11px;color:var(--muted);font-weight:500}

/* a product with several HUDs: one button each, the worn ones lit */
.hud-parts{display:flex;flex-wrap:wrap;gap:5px}
.hud-parts .btn.hud-part{flex:1 1 auto;min-width:0}
.hud-parts .btn.hud-part.on{background:rgba(201,184,214,.16);border-color:var(--lilac);color:var(--ink)}

/* the small screen as one HANGER button: tap it for the big screen */
.mini-logo{position:fixed;inset:0;z-index:50;display:grid;place-items:center;margin:0;padding:0;border:0;background:#0b0a0c;cursor:pointer}
.mini-logo[hidden]{display:none}
.mini-logo img{width:100%;height:100%;object-fit:contain;display:block;user-select:none}
.mini-logo:hover img,.mini-logo:active img{filter:brightness(1.15)}

/* admin: the sections in a side menu (HANGER, LECASTLE, each in small groups); on the phone a menu button opens it */
body.adm-app .adm-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);width:100%;max-width:1800px;margin:0 auto;padding:0 clamp(16px,3vw,32px);flex:1}
body.adm-app .adm-shell .adm-main{max-width:none;margin:0;padding-left:0;padding-right:0;min-width:0}
body.adm-app .adm-shell .adm-tabs{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto;flex-direction:column;flex-wrap:nowrap;gap:12px;margin:24px 0 16px;padding:14px 8px;max-width:none;background:var(--glass);border:1px solid var(--edge);border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);scrollbar-width:thin}
body.adm-app .adm-shell .adm-tg{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap}
body.adm-app .adm-shell .adm-tgl{flex:none;padding:0 12px 6px;font:400 17px/1 Anton,Impact,sans-serif;letter-spacing:.06em;color:#cdbfd9;opacity:1}
body.adm-app .adm-shell .adm-tg.lc .adm-tgl{color:#d8b98a}
body.adm-app .adm-shell .adm-tg+.adm-tg{padding-top:12px;border-top:1px solid var(--edge)}
body.adm-app .adm-sub{padding:9px 12px 3px;font:700 10px/1 Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.45}
body.adm-app .adm-shell .adm-tabs .tab{width:100%;justify-content:flex-start;min-height:32px;padding:6px 12px;border-radius:9px;background:transparent;border:0;box-shadow:none;font:600 13px/1.2 Manrope,sans-serif;letter-spacing:.01em;text-transform:none;position:relative;color:var(--ink);opacity:.78}
body.adm-app .adm-shell .adm-tabs .tab:hover{background:rgba(201,184,214,.08);opacity:1}
body.adm-app .adm-shell .adm-tabs .tab.selected{background:rgba(201,184,214,.14);opacity:1;box-shadow:none;border:0}
body.adm-app .adm-shell .adm-tabs .tab.selected::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:#cdbfd9}
body.adm-app .adm-shell .adm-tg.lc .tab:hover{background:rgba(216,185,138,.08)}
body.adm-app .adm-shell .adm-tg.lc .tab.selected{background:rgba(216,185,138,.14);box-shadow:none;border:0}
body.adm-app .adm-shell .adm-tg.lc .tab.selected::before{background:#d8b98a}
body.adm-app .adm-shell .adm-tabs .tab .badge{margin-left:auto}
:root[data-theme=light] body.adm-app .adm-shell .adm-tgl{color:#7a5f99}:root[data-theme=light] body.adm-app .adm-shell .adm-tg.lc .adm-tgl{color:#9a7440}:root[data-theme=light] body.adm-app .adm-shell .adm-tabs .tab.selected::before{background:#8a70a8}:root[data-theme=light] body.adm-app .adm-shell .adm-tg.lc .tab.selected::before{background:#b08a52}

/* Admin navigation: bounded left column, searchable groups, mobile drawer. */
body.adm-app .adm-shell{grid-template-columns:248px minmax(0,1fr);align-items:start;min-width:0}
body.adm-app .adm-shell .adm-main{grid-column:2;width:100%;min-width:0}
body.adm-app .adm-shell .adm-tabs{grid-column:1;grid-row:1;min-width:0;width:100%;position:sticky;top:80px;height:calc(100dvh - 100px);max-height:calc(100dvh - 100px);margin:20px 0;padding:0;gap:0;overflow:hidden;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.1)}
.adm-navtools{padding:16px 12px 12px;border-bottom:1px solid var(--edge);flex:none}
.adm-navtitle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 12px;font:700 10px Manrope,sans-serif;letter-spacing:.16em;color:var(--muted)}
#admNavClose{display:none;align-items:center;justify-content:center;font:400 24px/1 Manrope,sans-serif;width:32px;height:32px;border:0;background:transparent;border-radius:8px}
.adm-navsearch{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:40px;border:1px solid var(--edge);background:var(--panel2);border-radius:10px}
.adm-navsearch:focus-within{border-color:var(--lilac)}
.adm-navsearch svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.7}
.adm-navsearch input{color:var(--ink);min-width:0;width:100%;border:0;outline:none;background:none;font:500 12px Manrope,sans-serif;padding:10px 0}
#admNavClear{flex:none;width:24px;height:28px;border:0;border-radius:6px;background:transparent;font-size:20px;color:var(--muted)}
.adm-navlist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line3) transparent;padding:8px}
body.adm-app .adm-shell details.adm-tg{display:block;padding:4px 0;border:0;margin:0}
body.adm-app .adm-shell details.adm-tg+.adm-tg{padding-top:6px;margin-top:6px;border-top:1px solid var(--edge)}
body.adm-app .adm-shell summary.adm-tgl{display:flex;align-items:center;gap:8px;list-style:none;padding:12px 10px;margin:0;cursor:pointer;font-size:17px;border-radius:9px}
body.adm-app .adm-shell summary.adm-tgl:hover{background:rgba(201,184,214,.06)}
.adm-grouplabel{flex:1;min-width:0}
#admNav summary::-webkit-details-marker{display:none}
#admNav summary::marker{content:''}
#admNav summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.6;transform:rotate(-90deg);transition:transform .15s}
#admNav details[open]>summary svg{transform:none}
body.adm-app .adm-shell .adm-sub{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;font:700 10px/1.2 Manrope,sans-serif;letter-spacing:.12em;opacity:.7;cursor:pointer;list-style:none}
body.adm-app .adm-shell .adm-tabs .tab{min-height:36px;padding:8px 12px;white-space:normal;text-align:left;margin:2px 0}
body.adm-app .adm-shell .adm-tabs .tab>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.adm-navcount{font:700 10px Manrope,sans-serif;border-radius:6px;background:rgba(201,184,214,.15);padding:3px 6px;color:var(--ink)}
.adm-group-current>.adm-tgl .adm-grouplabel::after{content:'';display:inline-block;vertical-align:middle;width:5px;height:5px;margin-left:9px;background:currentColor;border-radius:50%}
.adm-navempty{padding:16px 10px;font-size:12px;color:var(--muted)}
.adm-navfoot{display:flex;align-items:center;gap:7px;flex:none;padding:12px 14px;border-top:1px solid var(--edge);font:600 9px Manrope,sans-serif;letter-spacing:.08em;color:var(--dim)}
.adm-navfoot kbd{font:inherit;margin-left:auto;border:1px solid var(--edge);padding:3px 5px;border-radius:4px;letter-spacing:0}
#admNav :is(button,summary):focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}
.adm-navshade{display:none}
@media(min-width:1001px){.adm-navbtn{display:none}}
@media(max-width:1000px){
 body.adm-app .adm-shell{display:block;padding:0;width:100%;max-width:none}
 body.adm-app .adm-shell .adm-main{padding-left:14px;padding-right:14px}
 body.adm-app .top{flex-wrap:wrap;min-width:0}
 body.adm-app .adm-head-right{gap:8px;flex-wrap:wrap;margin-left:auto}
 body.adm-app #updated{display:none}
 .adm-navbtn{display:flex;align-items:center;gap:10px;min-width:0;margin:12px 14px 0;padding:12px 14px;border:1px solid var(--edge);border-radius:12px;background:var(--glass);color:var(--ink);font:600 13px Manrope,sans-serif;text-align:left}
 .adm-navbtn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
 #admNavCur{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.adm-app .adm-shell .adm-tabs{display:none;position:fixed;inset:12px auto 12px 12px;width:min(320px,calc(100vw - 32px));height:calc(100dvh - 24px);max-height:none;margin:0;z-index:31;background:var(--panel);box-shadow:0 0 60px rgba(0,0,0,.4)}
 body.navopen.adm-app .adm-shell .adm-tabs{display:flex}
 body.navopen.adm-app{overflow:hidden}
 .adm-navshade:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:30}
 #admNavClose{display:flex}
 #admNav .adm-tgl{flex-basis:auto}
 #admNav .tab{min-height:40px}
 .adm-navfoot kbd{display:none}
}
@media(prefers-reduced-motion:reduce){#admNav summary svg{transition:none}}

/* TELL A FRIEND: the new owner's "who told you about HANGER?" card */
.ref-ask{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--lilacLine);background:var(--panel2);border-radius:12px;font-size:12px;line-height:1.5}
.ref-ask .ref-title{color:var(--lilac);font-size:13px}
.ref-ask .ref-text{margin:0;color:var(--muted)}
.ref-ask .ref-row{display:flex;gap:8px}
.ref-ask .ref-row .field{flex:1;min-width:0}
.ref-ask>button{justify-self:start}

/* the folder warning's SHOW ME HOW, and the help picture of a full folder split in two (q-full) */
#scanCut .scan-msg{display:block}
/* folded to one line: what is wrong, and a chevron that opens the explanation */
#scanCut{padding-top:9px;padding-bottom:9px}
#scanCut .scan-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
#scanCut .scan-head:focus-visible{outline:2px solid var(--warn);outline-offset:3px;border-radius:6px}
#scanCut .scan-head span{flex:1;min-width:0}
#scanCut .scan-head svg{flex:0 0 auto}
#scanCut .scan-head svg:last-child{transition:transform .2s}
#scanCut.open .scan-head svg:last-child{transform:rotate(180deg)}
#scanCut .scan-more{margin-top:8px}
#scanCut .scan-more[hidden]{display:none}
#scanCut .scan-help{margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.fold-demo{display:flex;align-items:center;gap:14px;margin:12px 0 6px;flex-wrap:wrap}
.fd-box{flex:1;min-width:140px;max-width:220px;padding:10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);display:grid;gap:5px;font-size:11px}
.fd-box b{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--ink)}
.fd-box u{text-decoration:none;color:var(--lilac);margin-top:4px}
.fd-box i{display:block;height:6px;border-radius:3px;background:var(--line3)}
.fd-one .fd-cut{background:transparent;box-shadow:inset 0 0 0 1px var(--bad);opacity:.85;animation:fdCut 6s infinite}
.fd-bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:2px}
.fd-bar s{display:block;height:100%;width:100%;background:var(--bad);animation:fdFill 6s infinite}
.fd-two .fd-bar s{width:45%;background:var(--ok);animation:none}
.fd-two{animation:fdTwo 6s infinite}
.fd-arrow{color:var(--lilac);font-size:20px}
.fd-cap{font-size:12px;color:var(--muted)}
@keyframes fdFill{0%{width:10%;background:var(--warn)}45%{width:100%;background:var(--warn)}50%,100%{width:100%;background:var(--bad)}}
@keyframes fdCut{0%,45%{background:var(--line3);box-shadow:none;opacity:1}55%,100%{background:transparent;box-shadow:inset 0 0 0 1px var(--bad);opacity:.85}}
@keyframes fdTwo{0%,50%{opacity:.2}65%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fold-demo *{animation:none!important}}
/* admin: the copy buttons next to avatar names and UUIDs (public/lc-copy.js) - here, as the panel's CSP blocks inline styles */
button.lc-cp.lc-cp{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:0;min-height:0;margin:0 0 0 4px;padding:0;border:0;border-radius:5px;background:none;box-shadow:none;color:inherit;opacity:.4;cursor:pointer;vertical-align:-3px;flex:0 0 auto;transform:none}
button.lc-cp.lc-cp:hover{opacity:1;background:rgba(127,127,127,.2)}button.lc-cp.lc-cp.ok{opacity:1;color:#8fd9ad}button.lc-cp.ok svg{display:none}button.lc-cp.ok::after{content:"\2713";font-size:12px;font-weight:700}button.lc-cp svg{width:12px;height:12px;display:block}
/* TEXT SIZE: room under the content for the taller bottom bar */
.main{padding-bottom:calc(120px * var(--tz,1))}
@media(max-width:560px){.main{padding-bottom:calc(92px * var(--tz,1))}}
/* bigger Text size: the bottom tabs put the icon above the word, and COLLECTION's count (also on ALL) is left out - it ran
   out of the tab on the 480-wide HUD */
html.tz-big #tabs .tab{flex-direction:column;gap:3px;letter-spacing:.06em;padding:7px 4px;min-height:0}
html.tz-big #tabs .tabcount{display:none}
html.tz-big #tabs .tab{position:relative}html.tz-big #tabs .tab .badge{position:absolute;top:2px;left:calc(50% + 8px)}
/* ---- a computer's browser, 1100 px or wider (body.desk; .side-on while the wardrobe shows): edit mode with a sidebar;
   no bottom bar, no category chips (the sidebar has the screens, views, categories and brands) */
.side{position:fixed;z-index:4;top:var(--topH,64px);left:0;bottom:0;width:260px;overflow-y:auto;padding:20px 14px 22px 16px;border-right:1px solid var(--line);background:rgba(var(--bgRgb),.72);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:20px;scrollbar-width:thin}
.side[hidden]{display:none}
body.side-on .main{max-width:none;width:auto;margin:0 0 0 260px;padding:28px clamp(24px,3vw,44px) 64px}
body.desk #tabs,body.desk #views,body.desk #cats,body.desk #brandBtn,body.desk #colsBtn{display:none!important}
body.desk .selbar{left:260px;bottom:16px;border-radius:14px;margin:0 16px}
body.desk #grid:not(.list){grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.side-nav,.side-sec{display:flex;flex-direction:column;gap:1px}
.side-h{font-size:9px;letter-spacing:.18em;color:var(--dim);font-weight:800;margin:0 10px 6px}
.side-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.side-item:hover{background:var(--line);color:var(--ink)}
.side-item.on{background:var(--line);color:var(--ink);border-color:var(--line2)}
.side-nav .side-item{font-size:11px;letter-spacing:.14em;font-weight:700;padding:11px 10px}
.side-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}
.side-item .n{color:var(--dim);font-size:10.5px;font-weight:700}
body.dragging .side-item.drop{border-style:dashed;border-color:var(--line3)}
.side-item.drop.over{border-style:solid;border-color:var(--lilac);background:rgba(201,184,214,.14);color:var(--ink)}
.side-add{all:unset;box-sizing:border-box;cursor:pointer;margin:8px 10px 0;font-size:9.5px;letter-spacing:.16em;font-weight:800;color:var(--dim);display:flex;align-items:center;gap:6px}
.side-add:hover,.side-add:focus-visible{color:var(--ink)}
.side-tip{margin:0 10px;font-size:11px;line-height:1.55;color:var(--faint)}
.side-hud{margin-top:auto;border:1px solid var(--line2);border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.side-hud.off{border-color:var(--lilacLine)}
.side-hud b{display:block;color:var(--ink);font-size:10px;letter-spacing:.16em;margin-bottom:2px}
.side-hud .side-add{margin:8px 0 0}
.side-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);margin-top:4px}
.side-hud.on .side-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(143,217,173,.15)}
body.desk .tile[draggable=true] .tile-info{cursor:grab}
.tile.drop-cover .cover{outline:2px dashed var(--lilac);outline-offset:-6px}
.tile.uploading .cover{opacity:.5}
.drag-ghost{position:fixed;top:-80px;left:-400px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bg);font:700 12px Manrope,sans-serif;letter-spacing:.06em}
/* edit mode (the full HANGER's browser with the HUD off): a calm note, not a warning */
.web-edit{padding:12px 14px;border:1px solid var(--lilacLine);border-radius:12px;color:var(--muted);font-size:12px;line-height:1.55;margin:0}
.web-edit b{color:var(--ink)}
.web-edit[hidden]{display:none}
/* edit mode leaves out what needs the HUD: WEAR, + ADD, product HUDs, REMOVE ALL, the outfit lock, READ #RLV AGAIN */
body.web.hud-off .tile .actions,body.web.hud-off #removeAll,body.web.hud-off #wearTools,body.web.hud-off #wearGoes,body.web.hud-off #refresh{display:none!important}
.status.editing{--c:var(--lilac)}
/* HANGER DEMO's browser with the HUD off: what the full HANGER does here, and where to get it */
.hudoff-full{display:flex;flex-direction:column;align-items:center;gap:12px}
.hudoff-full[hidden],#hudOffBuy[hidden]{display:none}
#hudOffBuy{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
/* HANGER DEMO's 7-day trial of the edit mode: TRY IT and GET THE FULL HANGER side by side; days left in the edit note */
.hudoff-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#hudOffTrial[hidden]{display:none}
.web-trial{display:block;margin-top:6px;color:var(--lilac);font-weight:600}
.web-trial[hidden]{display:none}
.web-trial .linkbtn{margin-left:6px}
.side-trial{margin-top:8px;color:var(--lilac);font-weight:600}
/* the PHONE window: the address opens the page; the signed-in browsers, a row each (device, active now or last used)
   with its own sign-out ✕ */
.web-pc b{cursor:pointer;text-decoration:underline;text-decoration-color:var(--lilac);text-underline-offset:3px}
.web-pc b:hover,.web-pc b:focus-visible{color:var(--lilac);outline:none}
.web-sess-list{display:flex;flex-direction:column;gap:6px;margin-top:2px;text-align:left}
.web-sess-list[hidden]{display:none}
.web-sess-h{font-size:9px;letter-spacing:.18em;font-weight:800;color:var(--dim);margin:2px 2px 0}
.web-sess{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.02)}
.web-sess-dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--faint)}
.web-sess.live .web-sess-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(143,217,173,.15)}
.web-sess-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.web-sess-t b{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-sess-t small{font-size:10.5px;color:var(--dim)}
.web-sess.live .web-sess-t small{color:var(--ok)}
.web-sess-x{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer}
.web-sess-x:hover,.web-sess-x:focus-visible{color:var(--bad);border-color:var(--badLine2)}
.web-sess-x svg.ic{width:14px;height:14px;margin:0}
.web-sess-all{align-self:center;margin-top:2px}
/* a computer's browser: the windows are wider (they were made for the 480 px HUD); the product window has two columns */
body.desk .operation-card.dialog{width:min(calc(480px * var(--tz,1)),92vw)}
body.desk .operation-card.dialog.set-card,body.desk .operation-card.dialog.feedback-card,body.desk .operation-card.dialog.ai-dialog,body.desk #tagDialog .operation-card.dialog{width:min(calc(600px * var(--tz,1)),92vw)}
body.desk .operation-card.dialog.look-dialog{width:min(calc(640px * var(--tz,1)),92vw)}
body.desk .operation-card.dialog.mp-card{width:min(calc(900px * var(--tz,1)),94vw)}
body.desk .mp-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));max-height:62vh}
body.desk .operation-card.dialog.web-card{width:min(calc(420px * var(--tz,1)),92vw)}
body.desk #tagDialog .catpick{max-height:56vh}
body.desk #editForm.split{width:min(calc(980px * var(--tz,1)),94vw)}
.edit-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.edit-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.edit-col>*{flex-shrink:0}
.lcw-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.lcw-bal{display:flex;flex-direction:column;gap:8px;min-width:140px}
.lcw-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lcw-amt{display:flex;align-items:center;gap:4px;padding:0 6px 0 14px;border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
.lcw-amt:focus-within{border-color:var(--focus)}
.lcw-amt span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em}
.lcw-amt input{width:96px;padding:8px 6px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield}
.lcw-amt input::-webkit-outer-spin-button,.lcw-amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lcw-act .smallbtn:disabled{opacity:.4;cursor:default}

/* Shared admin presentation: sales and web prices use the native overview's tokens. */
html body.adm-app :is(.sv-app,.wp-app){--sv-accent:var(--lilac);--sv-muted:var(--muted);--sv-border:var(--edge);--sv-panel:var(--glass);--wp-panel:var(--glass);--wp-edge:var(--edge);--wp-muted:var(--muted);--wp-accent:var(--lilac);--wp-ink:var(--ink);--wp-field:var(--glass);color:var(--ink);font-family:Manrope,Helvetica,sans-serif}
html body.adm-app :is(.sv-app,.wp-app) h1{font:400 32px/1.1 var(--display);letter-spacing:.01em;color:var(--ink)}
html body.adm-app :is(.sv-app,.wp-app) h2{font:400 20px/1.2 var(--display)!important;letter-spacing:.03em!important;color:var(--ink)!important;text-transform:uppercase}
html body.adm-app :is(.sv-head,.wp-heading){margin:0 0 18px;gap:16px}
html body.adm-app :is(.sv-head,.wp-heading)>div>p:last-child{font-size:13px;color:var(--muted)}
html body.adm-app :is(.sv-eyebrow,.wp-eyebrow){color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.2em}
html body.adm-app :is(.sv-quick,.sv-metrics,.wp-stats){gap:12px;margin-bottom:18px}
html body.adm-app :is(.sv-quick>a,.sv-metric,.wp-stat){display:flex;flex-direction:column;gap:4px;align-items:stretch;min-width:0;padding:16px;border:1px solid var(--edge);border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;text-align:left;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;text-decoration:none}
html body.adm-app :is(.sv-quick>a,.sv-metric,.wp-stat):hover{transform:translateY(-2px);border-color:#cdbfd9;box-shadow:0 0 26px rgba(201,184,214,.16);text-decoration:none}
html body.adm-app :is(.sv-quick>a>span,.sv-metric>span,.wp-stat>span){order:2;font-size:10px;line-height:1.55;letter-spacing:.2em;color:var(--muted);font-weight:700;text-transform:uppercase;margin:0}
html body.adm-app :is(.sv-quick>a>b,.sv-metric>strong,.wp-stat>strong){order:1;font:400 var(--adm-metric-size,clamp(28px,2.4vw,40px))/1 var(--display);letter-spacing:.02em;white-space:nowrap;color:var(--ink);text-shadow:0 0 24px var(--glow);margin:0}
html body.adm-app :is(.sv-quick>a>small,.sv-metric>small,.wp-stat>small){order:3;font-size:11px;line-height:1.45;color:var(--dim);margin:0}
html body.adm-app :is(.sv-card,.wp-catalog,.wp-policy,.wp-draft){border-color:var(--edge);border-radius:20px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html body.adm-app :is(.sv-card,.wp-policy,.wp-draft){padding:16px;margin-bottom:18px}
html body.adm-app :is(.sv-card-title,.wp-section-head){gap:12px}
html body.adm-app .wp-section-head{padding:16px}
html body.adm-app .wp-toolbar{padding-left:16px;padding-right:16px}
html body.adm-app :is(.sv-button,.wp-button){border-radius:999px;font:700 10px/1.4 Manrope,sans-serif;letter-spacing:.14em;padding:8px 13px;min-height:36px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
html body.adm-app :is(.sv-button,.wp-button:not(.wp-ghost)){background:var(--ink);border-color:var(--ink);color:var(--bg)!important;box-shadow:0 0 22px var(--glow)}
html body.adm-app .wp-button.wp-ghost{background:var(--glass);color:var(--ink);border-color:var(--edge)}
html body.adm-app :is(.sv-search-row,.wp-search,.sv-filters input,.sv-filters select,.wp-app select,.wp-percent input){background:var(--glass);border-color:var(--edge);border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease}
html body.adm-app :is(.sv-search-row,.wp-search):focus-within,html body.adm-app :is(.sv-filters input,.sv-filters select,.wp-app select,.wp-percent input):focus{border-color:#cdbfd9;box-shadow:0 0 0 3px rgba(201,184,214,.18)}
html body.adm-app :is(.sv-tabs a,.wp-filter){border-radius:999px;text-decoration:none;font-size:11px;font-weight:700;color:var(--muted)}
html body.adm-app .sv-tabs{border:0;gap:6px;margin-bottom:18px}
html body.adm-app .sv-tabs a{padding:8px 13px;border:1px solid var(--edge);background:var(--glass)}
html body.adm-app .sv-tabs [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html body.adm-app .sv-tabs a:hover{text-decoration:none}
html body.adm-app .wp-filter[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html body.adm-app :is(.sv-table,.wp-table){font-family:Manrope,Helvetica,sans-serif;font-size:13px;color:var(--ink)}
html body.adm-app :is(.sv-table,.wp-table) th{font:700 9px/1.4 Manrope,sans-serif!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--lilac)!important;opacity:.8!important}
html body.adm-app :is(.sv-table,.wp-table) td{font-size:13px}
html body.adm-app :is(.sv-table,.wp-table) tbody tr:hover{background:rgba(201,184,214,.07)}
html body.adm-app :is(.sv-product,.wp-product a){color:var(--ink)!important}
html body.adm-app .sv-lifetime .sv-metric:last-child strong{font-size:clamp(24px,2.1vw,32px);white-space:normal}
@media(min-width:701px){html body.adm-app :is(.sv-table,.wp-table) th{padding:12px 14px!important}html body.adm-app :is(.sv-table,.wp-table) td{padding:10px 14px!important}}
@media(max-width:700px){html body.adm-app :is(.sv-app,.wp-app) h1{font-size:28px}html body.adm-app :is(.sv-quick>a,.sv-metric,.wp-stat){padding:16px}html body.adm-app :is(.sv-quick>a>b,.sv-metric>strong,.wp-stat>strong){white-space:normal;overflow-wrap:anywhere}html body.adm-app .wp-section-head{padding:16px}}
@media(prefers-reduced-motion:reduce){html body.adm-app :is(.adm-tile,.sv-quick>a,.sv-metric,.wp-stat,.sv-button,.wp-button){transition:none}html body.adm-app :is(.adm-tile,.sv-quick>a,.sv-metric,.wp-stat):hover{transform:none}}

html.embed body.adm-app main:has(.sv-app,.wp-app){padding-top:0}

/* LECASTLE management: shared headings and overview. */
.lc-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:6px 0 24px}.lc-heading h1{font:400 32px/1.1 var(--display,Anton);letter-spacing:.01em;margin:0;color:var(--ink)}.lc-heading p:not(.lc-kicker){font-size:13px;color:var(--muted);margin:10px 0 0}.lc-kicker{margin:0 0 10px;font:700 10px/1.3 Manrope,sans-serif;letter-spacing:.18em;color:var(--lilac);text-transform:uppercase}.lc-caption{font-size:12px;color:var(--muted)}.lc-income{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.lc-income-link{cursor:pointer}.lc-income-link:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}.lc-operations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}.lc-operation{position:relative;text-align:left;padding:20px;font:inherit;cursor:pointer;color:var(--ink);margin:0;min-width:0}.lc-operation>strong{display:block;margin:14px 0 8px;font-size:17px;font-weight:600}.lc-operation>small{display:block;font-size:11px;color:var(--muted)}.lc-operation-arrow{position:absolute;right:18px;top:15px;color:var(--lilac)}
body.adm-app .lc-wallet{padding:24px;margin-bottom:0}.lc-wallet-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.lc-wallet-head h2{font:400 23px/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0}.lc-wallet-head .lc-kicker{font-size:9px;margin-bottom:7px}.lc-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;border:1px solid var(--edge);border-radius:999px;padding:7px 11px;color:var(--muted)}.lc-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.lc-status[data-state=on]{color:var(--ok)}.lc-status[data-state=off]{color:var(--bad)}.lc-wallet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:32px}.lc-wallet-balance>.adm-tile-value{font-size:clamp(40px,4vw,64px);margin:12px 0;color:var(--ink)}.lc-wallet-balance>p{margin:0;font-size:12px;color:var(--muted)}.lc-wallet-last{max-width:430px;border-top:1px solid var(--edge);padding-top:15px;margin-top:22px;color:var(--muted);font-size:11px;line-height:1.8}.lc-wallet-transfer{border-left:1px solid var(--edge);padding-left:30px}.lc-wallet-recipient{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 22px;font-size:12px;color:var(--muted)}.lc-wallet-recipient strong{color:var(--ink);font-weight:600}.lc-wallet-input{display:flex;align-items:center;gap:10px;border:1px solid var(--edge);border-radius:12px;padding:7px 8px 7px 14px;margin-top:8px;background:var(--glass)}.lc-wallet-input:focus-within{border-color:var(--lilac)}.lc-wallet-input>span{font-size:13px;color:var(--muted)}.lc-wallet-input input{width:100%;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:500 18px/1.4 Manrope,sans-serif;padding:6px 0;box-shadow:none!important}.lc-wallet-input input::-webkit-inner-spin-button,.lc-wallet-input input::-webkit-outer-spin-button{-webkit-appearance:none}.lc-wallet-input .smallbtn{flex:none;letter-spacing:0;text-transform:none;padding:8px 10px;font-size:11px}.lc-wallet-buttons{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.lc-wallet-buttons>.primary{flex:1;min-height:42px;text-transform:none;letter-spacing:.02em;font-size:12px}.lc-wallet-msg{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.8;min-height:20px}.lc-wallet button:disabled{opacity:.4;cursor:default}.lc-wallet [hidden]{display:none!important}
@media(max-width:1050px){.lc-operations{grid-template-columns:repeat(2,minmax(0,1fr))}.lc-wallet-grid{grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:20px}.lc-wallet-transfer{padding-left:20px}}
@media(max-width:700px){.lc-heading{align-items:flex-start;gap:12px}.lc-heading h1{font-size:29px}.lc-heading p:not(.lc-kicker){font-size:12px}.lc-heading>.smallbtn{font-size:10px;letter-spacing:0;white-space:nowrap}.lc-income{grid-template-columns:repeat(2,minmax(0,1fr))!important}.lc-operations{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lc-operation{padding:16px}.lc-operation>strong{font-size:14px;line-height:1.5}.lc-operation>small{line-height:1.6}body.adm-app .lc-wallet{padding:18px}.lc-wallet-grid{grid-template-columns:minmax(0,1fr);gap:24px}.lc-wallet-transfer{border-left:0;border-top:1px solid var(--edge);padding:20px 0 0}.lc-wallet-head{margin-bottom:20px;align-items:flex-start}.lc-wallet-head h2{font-size:21px}.lc-status{font-size:10px;padding:6px 8px;white-space:nowrap}.lc-wallet-balance>.adm-tile-value{font-size:48px}.lc-wallet-last{margin-top:16px}.lc-wallet-recipient{margin-bottom:18px}}

/* A browser can leave the wardrobe without losing its paired session. HUD navigation stays in the app. */
.brandline>a.brand{color:inherit;text-decoration:none}
body.web #brandSub{display:none}
.site-home{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-home[hidden]{display:none}
.site-home .ic{width:14px;height:14px;margin:0}
.site-home:hover{color:var(--ink);border-color:var(--line3)}
.site-home:focus-visible,.brandline>a.brand:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.land-nav a.land-wardrobe{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--ink);letter-spacing:.03em}
@media(max-width:620px){.land-nav{gap:8px}.land-nav a.land-wardrobe{padding:7px 9px;font-size:9px}}
@media(max-width:520px){.site-home{padding:7px}.site-home span{display:none}body.web .brandline{gap:7px}}

/* HUD controls must fit the usable media width, including its vertical scrollbar. */
body.has-win .top{flex-wrap:wrap}
body.has-win .top .top-right{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
body.has-win .top .win-btns{flex:0 0 auto;margin-left:auto;max-width:100%}
.worn-hud{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.worn-hud .btn{font-size:10px;padding:6px 10px;min-height:0}
/* WHEN IT COMES OFF (2026-11-11): the area rows and the product list to choose from */
.off-dialog .look-pieces li>div{flex:1}.off-dialog .look-pieces .smallbtn{flex:0 0 auto}
.off-list{max-height:min(46vh,320px);overflow-y:auto}.off-list li.pick{cursor:pointer}.off-list li.pick:hover,.off-list li.pick:focus-visible{border-color:var(--ink)}
.off-list li.on{border-color:var(--ok)}.off-list .off-none{justify-content:center;color:var(--muted);font-size:12px}
.off-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:12px;color:var(--muted)}.off-switch .smallbtn{flex:0 0 auto}
.off-paused-list{opacity:.55}.smallbtn.off-paused{color:var(--muted)}
/* the "updates in progress" notice under the top bar (2026-11-11, temporary) */
.test-bar{display:flex;align-items:center;gap:8px;padding:7px clamp(16px,4vw,40px);background:var(--panel2);border-bottom:1px solid var(--line);color:var(--warn);font-size:11px;font-weight:600;line-height:1.35}
.test-bar .i,.test-bar svg{flex:0 0 auto;width:14px;height:14px}
/* why the buttons wait (2026-11-11): Second Life is still putting the last change on */
.load-bar{display:flex;align-items:center;gap:8px;padding:7px clamp(16px,4vw,40px);background:var(--panel2);border-bottom:1px solid var(--line);color:var(--lilac);font-size:11px;font-weight:600;line-height:1.35}
.load-bar[hidden]{display:none}.load-bar svg,.load-bar .i{flex:0 0 auto;width:14px;height:14px;animation:loadPulse 1.2s ease-in-out infinite}
@keyframes loadPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.load-bar svg,.load-bar .i{animation:none}}