/* Layout: atelier console — fixed sidebar rail + workspace; orange swoosh as the recurring motion motif */
:root{
  --bg:#f6f3f0; --surface:#ffffff; --surface-2:#f0ebe6; --line:#e4dcd4;
  --fg:#16120f; --muted:#6f655d; --orange:#ff6600; --orange-2:#ff8a3d; --orange-soft:#fff0e5;
  --ink:#0f0c0a; --ink-fg:#f5efe9;
  --good:#1f8a4c; --good-soft:#e5f4ea; --warn:#b7791f; --warn-soft:#fbf1dd; --bad:#c2372b; --bad-soft:#fbe7e4;
  --shadow:0 10px 30px -12px rgba(40,20,5,.18);
  --f-display:"Bodoni Moda", "Didot", Georgia, serif;
  --f-body:"Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e0b09; --surface:#17120f; --surface-2:#201914; --line:#2e251f;
  --fg:#f3ece6; --muted:#a69a90; --orange:#ff7417; --orange-2:#ff9a52; --orange-soft:#2c1709;
  --ink:#050403; --ink-fg:#f5efe9;
  --good:#46c37b; --good-soft:#12261a; --warn:#e0a84a; --warn-soft:#2a2010; --bad:#ef6b5e; --bad-soft:#2d1411;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0b09; --surface:#17120f; --surface-2:#201914; --line:#2e251f;
  --fg:#f3ece6; --muted:#a69a90; --orange:#ff7417; --orange-2:#ff9a52; --orange-soft:#2c1709;
  --ink:#050403; --ink-fg:#f5efe9;
  --good:#46c37b; --good-soft:#12261a; --warn:#e0a84a; --warn-soft:#2a2010; --bad:#ef6b5e; --bad-soft:#2d1411;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6); color-scheme:dark}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5;overflow-x:hidden}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.logo-l{display:block}.logo-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-l{display:none}:root:not([data-theme="light"]) .logo-d{display:block}}
:root[data-theme="dark"] .logo-l{display:none}:root[data-theme="dark"] .logo-d{display:block}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:opacity .7s ease, visibility .7s}
#splash.gone{opacity:0;visibility:hidden}
.splash-inner{display:grid;justify-items:center;gap:18px;color:var(--ink-fg);text-align:center;padding:0 16px}
.splash-inner img{width:150px;animation:pop 1.1s cubic-bezier(.2,.9,.3,1.3) both}
.splash-inner h1{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(28px,6vw,48px);margin:0;letter-spacing:.01em;animation:rise .9s .5s both}
.splash-inner p{margin:0;letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:#ffb27a;animation:rise .9s .8s both}
.tape{width:min(320px,70vw);height:22px;border-radius:3px;background:repeating-linear-gradient(90deg,#ff6600 0 1px,transparent 1px 8px),linear-gradient(#ffd23f,#ffc107);background-size:auto 9px,auto;background-repeat:repeat-x;position:relative;overflow:hidden;animation:unroll 1.4s .6s cubic-bezier(.6,0,.2,1) both;transform-origin:left}
.tape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#16120f 0 1px,transparent 1px 40px);background-size:auto 14px;background-repeat:repeat-x}
@keyframes pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes unroll{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;align-items:start}
.side{position:sticky;top:0;height:100vh;background:var(--ink);color:var(--ink-fg);display:flex;flex-direction:column;padding:18px 12px;padding-left:max(12px,env(safe-area-inset-left,0px));gap:14px;overflow:hidden;overflow:clip}
.side::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:38px solid var(--orange);border-color:var(--orange) transparent transparent transparent;right:-250px;bottom:-200px;transform:rotate(-30deg);opacity:.16;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(330deg)}}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;border-bottom:1px solid #2a221c}
.brand img{width:44px}
.brand b{font-family:var(--f-display);font-style:italic;font-size:20px;font-weight:700;line-height:1}
.brand small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#ffb27a;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin;position:relative;z-index:1}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:#cfc4ba;font-weight:600;font-size:13.5px;position:relative;transition:background .2s,color .2s}
.nav button svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.nav button:hover{background:#1d1713;color:#fff}
.nav button.on{background:linear-gradient(90deg,var(--orange),#ff8a3d);color:#140a03}
.nav button .ct{margin-left:auto;font-size:11px;font-family:var(--f-mono);background:#2a221c;color:#ffb27a;border-radius:20px;padding:0 7px}
.nav button.on .ct{background:#140a03;color:#ffb27a}
.nav .grp{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7c6f65;padding:12px 10px 4px}
.role{margin-top:auto;position:relative;z-index:1;background:#1a1410;border:1px solid #2a221c;border-radius:12px;padding:10px}
.role label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8b7d72}
.role select{width:100%;margin-top:4px;background:#0e0b09;border:1px solid #33291f;border-radius:8px;padding:7px;color:#f5efe9}

.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;padding-block:14px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--surface)}
.top h2{margin:0;font-family:var(--f-display);font-size:26px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.top h2 i{color:var(--orange);font-weight:500}
.top .sub{color:var(--muted);font-size:12.5px}
.top .sp{flex:1}
.search{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;min-width:0}
.search input{border:0;background:transparent;outline:0;width:160px;min-width:0}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;position:relative}
.iconbtn svg{width:18px;height:18px;stroke:var(--fg);fill:none;stroke-width:1.7}
.dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--surface);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px transparent,0 0 0 2px var(--surface)}}
.menu-btn{display:none}
.view{flex:1;padding-block:22px 40px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px))}
.view>*{animation:viewin .45s cubic-bezier(.2,.8,.2,1) both}
.view>*:nth-child(2){animation-delay:.05s}.view>*:nth-child(3){animation-delay:.1s}.view>*:nth-child(4){animation-delay:.15s}
@keyframes viewin{from{transform:translateY(10px);opacity:.001}to{transform:none;opacity:1}}

/* ---------- Primitives ---------- */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.card h3{margin:0 0 12px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:8px}
.card h3 .r{margin-left:auto;text-transform:none;letter-spacing:0}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:var(--orange);border-color:var(--orange);color:#140a03}
.btn.dark{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn.good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.btn.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill.o{background:var(--orange-soft);color:var(--orange)}
.pill.g{background:var(--good-soft);color:var(--good)}
.pill.w{background:var(--warn-soft);color:var(--warn)}
.pill.b{background:var(--bad-soft);color:var(--bad)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.nd::before{display:none}
.mono{font-family:var(--f-mono);font-size:12px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
label.f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;min-width:0}
.inp{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;min-width:0;color:var(--fg);font-weight:500}
.inp:focus{outline:2px solid var(--orange);outline-offset:-1px}
textarea.inp{resize:vertical;min-height:80px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px;background:var(--surface-2);font-weight:700;white-space:nowrap}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
tr.flash td{animation:flash 1.4s}
@keyframes flash{0%{background:var(--orange-soft)}100%{background:transparent}}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:11px;color:#140a03;flex:none}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* KPI */
.kpi{position:relative;overflow:hidden}
.kpi .v{font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kpi .d{font-size:12px;margin-top:6px}
.kpi svg.sw{position:absolute;right:-20px;bottom:-24px;width:120px;opacity:.9}
.kpi svg.sw path{fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.6s .2s ease forwards}
.kpi svg.sw path+path{stroke:var(--fg);stroke-width:3;opacity:.25;animation-delay:.4s}
@keyframes draw{to{stroke-dashoffset:0}}

/* Hero banner */
.hero{background:var(--ink);color:var(--ink-fg);border-radius:20px;padding:26px 28px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:center}
.hero h1{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.05;margin:0 0 10px;text-wrap:balance}
.hero h1 em{color:var(--orange);font-style:italic}
.hero p{color:#cbbfb4;margin:0 0 16px;max-width:52ch}
.hero .swoosh{position:absolute;inset:0;pointer-events:none}
.hero .swoosh path{fill:none;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.4s ease forwards}
.hero .btn{border-color:#3a2f27;background:#1d1713;color:#f5efe9}
.hero .btn.pri{background:var(--orange);color:#140a03;border-color:var(--orange)}
.hero-figs{display:flex;justify-content:center;gap:6px;position:relative;z-index:1}
.hero-figs svg{width:84px;height:170px;animation:float 5s ease-in-out infinite}
.hero-figs svg:nth-child(2){animation-delay:-1.6s;transform:translateY(-8px)}
.hero-figs svg:nth-child(3){animation-delay:-3.2s}
@keyframes float{50%{transform:translateY(-10px)}}

/* Journey pipeline */
.pipe{display:grid;grid-template-columns:repeat(9,minmax(120px,1fr));gap:10px;min-width:1150px;position:relative}
.pipe-wrap{overflow-x:auto;padding-bottom:6px}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:320px;display:flex;flex-direction:column;gap:8px;position:relative}
.stage-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12.5px}
.stage-h .n{width:22px;height:22px;border-radius:50%;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;font-size:11px;font-family:var(--f-mono)}
.stage-h .c{margin-left:auto;color:var(--muted);font-family:var(--f-mono);font-size:11px}
.stage .who{font-size:11px;color:var(--muted);margin-top:-4px}
.flowline{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--orange) 0 40%,transparent 40%) 0 0/24px 6px repeat-x;opacity:.6;animation:flow 1s linear infinite;margin-bottom:12px;min-width:1150px}
@keyframes flow{to{background-position:24px 0}}
.job{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;cursor:pointer;transition:transform .2s, box-shadow .2s;animation:jobin .5s cubic-bezier(.2,.9,.3,1.2) both}
.job:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.job b{display:block;font-size:12.5px}
.job .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:4px;gap:6px}
.job .bar{height:3px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.job .bar i{display:block;height:100%;background:var(--orange)}
.job.late{border-color:var(--bad)}
@keyframes jobin{from{transform:scale(.85) translateX(-20px);opacity:0}to{transform:none;opacity:1}}

/* Measurement */
.body-wrap{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--orange-soft),transparent 70%);border-radius:14px;padding:10px;position:relative}
.body-wrap svg{width:100%;max-width:280px;height:auto}
.mpt{cursor:pointer}
.mpt circle{fill:var(--orange);transition:r .2s}
.mpt.on circle{r:7}
.mpt line{stroke:var(--orange);stroke-width:2;stroke-dasharray:4 3;opacity:0;transition:opacity .3s}
.mpt.on line,.mpt:hover line{opacity:1;animation:dash .8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mgrid .inp{font-family:var(--f-mono)}
.mgrid label.on .inp{outline:2px solid var(--orange)}

/* Studio */
.studio{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:16px}
.style-list{display:flex;flex-direction:column;gap:6px;max-height:640px;overflow:auto;padding-right:4px}
.style-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left;width:100%;transition:all .2s}
.style-item svg{width:34px;height:60px;flex:none}
.style-item b{display:block;font-size:13px}
.style-item small{color:var(--muted);font-size:11px}
.style-item.on{border-color:var(--orange);background:var(--orange-soft)}
.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:3px}
.tabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:6px 10px;border-radius:8px;font-weight:700;font-size:12px;color:var(--muted)}
.tabs button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stage-3d{background:var(--ink);border-radius:20px;position:relative;overflow:hidden;min-height:560px;display:grid;place-items:center;perspective:900px}
.stage-3d::before{content:"";position:absolute;left:50%;bottom:40px;width:260px;height:44px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,102,0,.55),transparent);filter:blur(4px);animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{opacity:.5;transform:translateX(-50%) scaleX(.85)}}
.stage-3d .spot{position:absolute;top:-80px;left:50%;width:420px;height:620px;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0,transparent 160deg,rgba(255,180,120,.13) 172deg,rgba(255,180,120,.13) 188deg,transparent 200deg)}
.mannequin{position:relative;z-index:1;width:min(300px,80%);height:auto;transform-style:preserve-3d}
.mannequin.swap{animation:swapin .8s cubic-bezier(.2,.9,.3,1.1)}
@keyframes swapin{0%{transform:rotateY(-90deg) scale(.9);opacity:0;filter:blur(6px)}60%{filter:blur(0)}100%{transform:none;opacity:1}}
.mannequin.turn{animation:turn 2.4s ease-in-out}
@keyframes turn{0%{transform:rotateY(0)}50%{transform:rotateY(180deg) scaleX(.96)}100%{transform:rotateY(360deg)}}
.stage-tag{position:absolute;left:18px;top:16px;color:var(--ink-fg);z-index:2}
.stage-tag .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#ffb27a}
.stage-tag h4{margin:2px 0 0;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:28px}
.stage-ctrl{position:absolute;right:14px;top:14px;display:flex;gap:6px;z-index:2}
.stage-ctrl button{border:1px solid #3a2f27;background:#1d1713cc;color:#f5efe9;border-radius:9px;padding:6px 10px;font-size:12px;font-weight:700}
.stage-price{position:absolute;left:18px;bottom:16px;right:18px;display:flex;justify-content:space-between;align-items:flex-end;color:var(--ink-fg);z-index:2;gap:10px}
.stage-price .p{font-family:var(--f-display);font-size:26px;font-weight:700}
.sw-row{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.swatch.on{box-shadow:0 0 0 2px var(--orange);transform:scale(1.12)}
.fab{width:56px;height:56px;border-radius:12px;border:2px solid var(--line);overflow:hidden;padding:0;background:none;position:relative}
.fab.on{border-color:var(--orange)}
.fab svg{width:100%;height:100%;display:block}
.fab span{position:absolute;bottom:0;left:0;right:0;font-size:9px;font-weight:800;background:#000a;color:#fff;text-align:center;padding:1px 0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700}
.seg button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.brief{background:var(--surface-2);border-radius:12px;padding:12px;font-size:12.5px;line-height:1.6;border-left:3px solid var(--orange)}
.brief b{font-family:var(--f-display);font-style:italic;font-size:15px}

/* Kanban */
.kan{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;overflow-x:auto}
.kcol{background:var(--surface-2);border-radius:14px;padding:10px;min-height:280px;display:flex;flex-direction:column;gap:8px}
.kcol h4{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:46px 1fr;gap:10px;animation:jobin .5s both}
.kcard svg{width:46px;height:80px}
.kcard b{font-size:13px}
.kcard p{margin:4px 0;font-size:12px;color:var(--muted);line-height:1.45}

/* Chat */
.chat{display:grid;grid-template-columns:230px minmax(0,1fr);height:calc(100vh - 170px);min-height:440px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.chans{border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:2px;overflow:auto;background:var(--surface-2)}
.chans button{all:unset;cursor:pointer;padding:7px 9px;border-radius:8px;font-weight:600;font-size:13px;display:flex;gap:8px;align-items:center}
.chans button.on{background:var(--surface);color:var(--orange)}
.chans .u{margin-left:auto;background:var(--orange);color:#140a03;font-size:10px;border-radius:10px;padding:0 6px;font-weight:800}
.msgs{display:flex;flex-direction:column;min-width:0}
.mlist{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;max-width:78%;animation:jobin .35s both}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{background:var(--surface-2);border-radius:14px;padding:8px 12px;min-width:0}
.msg.me .bubble{background:var(--orange);color:#140a03}
.bubble .h{font-size:11px;font-weight:800;opacity:.75;margin-bottom:2px}
.bubble .att{margin-top:6px;font-size:11.5px;border-radius:8px;padding:4px 8px;background:#0001;display:inline-block}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.typing{font-size:12px;color:var(--muted);padding:0 16px 6px;height:18px}
.typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin:0 1px;animation:bob 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-4px)}}

/* Expense approval chain */
.chain{display:flex;align-items:center;gap:4px}
.chain span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.chain span.ok{background:var(--good);color:#fff;border-color:var(--good)}
.chain span.no{background:var(--bad);color:#fff;border-color:var(--bad)}
.chain span.now{border-color:var(--orange);color:var(--orange);animation:pulse2 1.4s infinite}
.chain em{width:10px;height:2px;background:var(--line)}
@keyframes pulse2{50%{box-shadow:0 0 0 4px var(--orange-soft)}}

/* Charts */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:10px;font-family:var(--f-body)}
.chart .grid line{stroke:var(--line)}
.bar-anim{transform-box:fill-box;transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.hbar{display:grid;grid-template-columns:110px minmax(0,1fr) 70px;gap:10px;align-items:center;font-size:12.5px}
.hbar .t{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.hbar .t i{display:block;height:100%;border-radius:6px;background:var(--orange);transform-origin:left;animation:unroll 1s cubic-bezier(.2,.8,.2,1) both}

/* Audit */
.audit-item{display:grid;grid-template-columns:120px 26px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.audit-item:first-child{border-top:0}
.audit-item .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800}

/* Calendar */
.cal{display:grid;grid-template-columns:60px repeat(6,minmax(110px,1fr));min-width:780px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cal>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:52px;padding:4px;font-size:11px;position:relative}
.cal .hd{background:var(--surface-2);font-weight:800;text-align:center;padding:8px 4px;min-height:auto}
.cal .tm{color:var(--muted);font-family:var(--f-mono);text-align:right;padding-right:6px}
.appt{border-radius:8px;padding:4px 6px;font-weight:700;font-size:11px;line-height:1.3;animation:jobin .4s both}
.appt.m{background:var(--orange-soft);color:var(--orange)}
.appt.f{background:var(--good-soft);color:var(--good)}
.appt.c{background:var(--warn-soft);color:var(--warn)}
.appt.p{background:var(--surface-2);color:var(--fg);border:1px dashed var(--muted)}

/* Modal + toast */
.modal-bg{position:fixed;inset:0;background:#0008;z-index:50;display:grid;place-items:center;padding:16px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--surface);border-radius:18px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:22px;animation:pop2 .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop2{from{transform:translateY(20px) scale(.96);opacity:0}}
.modal h3{margin:0 0 4px;font-family:var(--f-display);font-size:24px}
.toasts{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:12px;font-weight:600;font-size:13px;box-shadow:var(--shadow);animation:toast .4s cubic-bezier(.2,.9,.3,1.3);display:flex;gap:8px;align-items:center;max-width:340px}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
@keyframes toast{from{transform:translateX(30px);opacity:0}}
.ticket{border:2px dashed var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px}
.qr{width:110px;height:110px;display:grid;grid-template-columns:repeat(21,1fr);background:#fff;padding:6px;border-radius:6px}
.qr i{background:#111}
.qr b{background:transparent}

/* ---------- Guest website ---------- */
#guest{background:var(--bg)}
.gw{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.gnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);color:var(--ink-fg)}
.gnav .gw{display:flex;align-items:center;gap:18px;padding-block:12px}
.gnav img{width:46px}
.gnav .bn{font-family:var(--f-display);font-style:italic;font-size:20px;font-weight:700;line-height:1}
.gnav .bn small{display:block;font-family:var(--f-body);font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#ffb27a;font-weight:600;margin-top:3px}
.gnav nav{display:flex;gap:4px;margin-left:auto}
.gnav nav button{all:unset;cursor:pointer;padding:7px 12px;border-radius:20px;font-weight:600;font-size:13px;color:#d9cec4}
.gnav nav button:hover{background:#ffffff14;color:#fff}
.gnav .btn{border-color:#3a2f27;background:#1d1713;color:#f5efe9}
.gnav .btn.pri{background:var(--orange);border-color:var(--orange);color:#140a03}
.ghero{background:var(--ink);color:var(--ink-fg);position:relative;overflow:hidden}
.ghero .gw{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:56px 70px;position:relative;z-index:1}
.ghero h1{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,6.4vw,84px);line-height:.98;margin:14px 0 18px;letter-spacing:-.02em;text-wrap:balance}
.ghero h1 em{color:var(--orange)}
.ghero p{color:#cbbfb4;font-size:16px;max-width:46ch;margin:0 0 24px}
.ghero .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#ffb27a;font-weight:700}
.ghero .btn{padding:12px 20px;font-size:14px;border-color:#3a2f27;background:#1d1713;color:#f5efe9}
.ghero .btn.pri{background:var(--orange);color:#140a03;border-color:var(--orange)}
.ghero .sw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ghero .sw path{fill:none;stroke-linecap:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.6s .3s ease forwards}
.carousel{position:relative;height:440px;display:grid;place-items:center}
.carousel::after{content:"";position:absolute;bottom:14px;left:50%;width:240px;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,102,0,.55),transparent);animation:glow 3s ease-in-out infinite}
.carousel .fig{position:absolute;width:210px;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s,filter .9s}
.carousel .fig svg{width:100%;height:auto;display:block}
.carousel .fig.c{transform:none;opacity:1;z-index:3}
.carousel .fig.l{transform:translateX(-150px) scale(.7);opacity:.35;filter:blur(1px) grayscale(.3);z-index:2}
.carousel .fig.r{transform:translateX(150px) scale(.7);opacity:.35;filter:blur(1px) grayscale(.3);z-index:2}
.carousel .fig.h{transform:scale(.4);opacity:0}
.carousel .cap{position:absolute;bottom:-6px;left:0;right:0;text-align:center;z-index:4}
.carousel .cap b{font-family:var(--f-display);font-style:italic;font-size:22px;font-weight:500}
.carousel .cap span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffb27a}
.marquee{background:var(--orange);color:#140a03;overflow:hidden;white-space:nowrap;font-family:var(--f-display);font-style:italic;font-size:22px;padding:10px 0}
.marquee div{display:inline-block;animation:mq 30s linear infinite}
.marquee span{margin:0 26px}
@keyframes mq{to{transform:translateX(-50%)}}
.gsec{padding-block:64px}
.gsec h2{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,4vw,48px);margin:6px 0 10px;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.gsec h2 em{color:var(--orange)}
.gsec .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);font-weight:800}
.gsec .lead{color:var(--muted);max-width:60ch;margin:0 0 26px;font-size:15px}
.gsec.alt{background:var(--surface)}
.coll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;animation:jobin .5s both}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ccard .im{background:var(--ink);height:330px;display:grid;place-items:center;position:relative;overflow:hidden}
.ccard .im::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;border:18px solid var(--orange);border-color:var(--orange) transparent transparent transparent;transform:rotate(-40deg);opacity:.2;right:-90px;top:-60px;transition:transform .6s}
.ccard:hover .im::before{transform:rotate(20deg)}
.ccard .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.ccard:hover .im img{transform:scale(1.07)}
.ccard .im::before{z-index:1}
.ccard .bd{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ccard .bd b{font-size:15px}
.ccard .bd p{margin:0;color:var(--muted);font-size:12.5px;flex:1}
.ccard .bd .row{justify-content:space-between}
.tryon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.tryon .stage-3d{min-height:520px}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:st}
.step{border-top:2px solid var(--orange);padding-top:14px}
.step .n{font-family:var(--f-display);font-style:italic;font-size:40px;color:var(--orange);line-height:1}
.step b{display:block;margin:6px 0 4px;font-size:15px}
.step p{margin:0;color:var(--muted);font-size:13px}
.gform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gform .full{grid-column:1/-1}
.okbox{background:var(--good-soft);color:var(--good);border-radius:14px;padding:16px;font-weight:600;animation:pop2 .4s}
.track-steps{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:18px 0 8px}
.track-steps div{height:8px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.track-steps div.on::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;animation:unroll .5s both}
.gfoot{background:var(--ink);color:#cbbfb4;padding-block:40px}
.gfoot .gw{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.gfoot b{color:#fff}
.gfoot img{width:70px}
.sel{user-select:all}
@media (max-width:900px){.gnav nav{display:none}.ghero .gw,.tryon{grid-template-columns:minmax(0,1fr)}.coll{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:minmax(0,1fr)}.gfoot .gw{grid-template-columns:1fr}.carousel{height:380px}.carousel .fig{width:170px}.carousel .fig.l{transform:translateX(-110px) scale(.65)}.carousel .fig.r{transform:translateX(110px) scale(.65)}}
@media (max-width:520px){.coll{grid-template-columns:minmax(0,1fr)}.gform{grid-template-columns:minmax(0,1fr)}.gnav .btn.ghostm{display:none}}


/* ---------- v3: catalogue, command centre, users, profiles ---------- */
.modal.wide{max-width:900px}
.modal .card h3{font-family:var(--f-body);font-size:13px;margin:0 0 12px}
.card h3 .btn{font-family:var(--f-body);letter-spacing:0;text-transform:none;font-size:12px}
.style-item .thumb{width:40px;height:60px;object-fit:cover;object-position:top;border-radius:8px;flex:none}
.ref{position:absolute;right:14px;top:58px;width:118px;margin:0;background:#fff;padding:6px 6px 22px;border-radius:4px;box-shadow:0 14px 30px -10px #000c;transform:rotate(4deg);z-index:2;animation:drop .8s cubic-bezier(.2,.9,.3,1.3) both}
.ref img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;object-position:top;max-width:100%}
.ref figcaption{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#16120f;letter-spacing:.06em}
@keyframes drop{from{transform:translateY(-40px) rotate(-14deg);opacity:0}}
.lookgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.look{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);aspect-ratio:3/4.4;cursor:pointer;animation:jobin .55s both;max-width:100%}
.look img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.look:hover img{transform:scale(1.07)}
.look::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0b0806e6 100%);pointer-events:none}
.look .cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#f5efe9;display:flex;flex-direction:column;gap:4px}
.look .cap b{font-family:var(--f-display);font-size:22px;font-weight:500;font-style:italic;line-height:1.1}
.look .cap .row{justify-content:space-between}
.look .tag{position:absolute;top:12px;left:12px;z-index:1}
.look .hov{position:absolute;inset:auto 14px 72px 14px;z-index:1;display:flex;gap:6px;opacity:0;transform:translateY(10px);transition:all .35s}
.look:hover .hov,.look:focus-within .hov{opacity:1;transform:none}
.look .hov .btn{background:#ffffffee;color:#16120f;border:0}
.look .hov .btn.pri{background:var(--orange)}
.lb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.lb .ph{border-radius:14px;overflow:hidden;aspect-ratio:3/4.6;max-width:100%}
.lb .ph img{width:100%;height:100%;object-fit:cover;object-position:top;animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translateY(-2%)}}
.lb .mq{background:var(--ink);border-radius:14px;display:grid;place-items:center;padding:10px}
.lb .mq svg{max-height:420px;width:auto;max-width:100%}
.cmd{background:var(--ink);color:var(--ink-fg);border-radius:22px;padding:24px;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.cmd::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#ff660033,transparent 45%),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 28px);pointer-events:none}
.cmd>*{position:relative}
.cmd .live{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#ffb27a;font-weight:800}
.cmd .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#46c37b;box-shadow:0 0 0 0 #46c37b;animation:live 1.6s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px transparent}}
.cmd h1{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.6vw,44px);margin:8px 0 4px;line-height:1.05}
.cmd h1 em{color:var(--orange)}
.cmd .clock{font-family:var(--f-mono);color:#cbbfb4;font-size:13px}
.rings{display:grid;grid-template-columns:repeat(4,96px);gap:14px}
.ring{text-align:center;font-size:11px;color:#cbbfb4;font-weight:700}
.ring svg{width:96px;height:96px;display:block}
.ring .rv{stroke-linecap:round;animation:ringfill 1.6s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ringfill{to{stroke-dashoffset:var(--to)}}
.ring text{fill:#f5efe9;font-family:var(--f-display);font-size:24px;font-weight:700}
.ticker{height:228px;overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.ticker .tk{animation:tick 26s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
@keyframes tick{to{transform:translateY(-50%)}}
.ticker .ti{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;align-items:flex-start}
.funnel{display:flex;height:34px;border-radius:10px;overflow:hidden;gap:2px}
.funnel div{display:grid;place-items:center;color:#140a03;font-weight:800;font-size:12px;transform-origin:left;animation:unroll .9s both;min-width:0}
.decision{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.decision:first-child{border-top:0}
.lock{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-family:var(--f-mono);font-size:12px;background:var(--surface-2);border-radius:6px;padding:1px 7px}
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.cgrid dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cgrid dd{margin:2px 0 0;font-weight:600;word-break:break-word}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchips span{background:var(--surface-2);border-radius:8px;padding:4px 8px;font-size:12px}
.mchips b{font-family:var(--f-mono)}
.pm td:not(:first-child),.pm th:not(:first-child){text-align:center}
.pm input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}
.pm input:disabled{cursor:not-allowed}
.pm tr.grp td{background:var(--surface-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.chain span{width:auto;min-width:20px;padding:0 4px;border-radius:10px}
.denied{text-align:center;padding:60px 20px}
.denied svg{width:70px;height:70px;stroke:var(--orange);fill:none;stroke-width:1.5;animation:pop 1s both}
@media (max-width:1180px){.lookgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.cmd{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.lookgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lb{grid-template-columns:minmax(0,1fr)}.rings{grid-template-columns:repeat(2,96px)}.ref{width:84px;top:54px}}
@media (max-width:520px){.lookgrid{grid-template-columns:minmax(0,1fr)}.cgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- v4: login + POS ---------- */
#login{position:fixed;inset:0;z-index:90;background:#0b0806;display:grid;place-items:center;padding:16px;overflow:auto;animation:fade .35s}
#login::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;border:70px solid #ff6600;border-color:#ff6600 transparent transparent transparent;right:-420px;bottom:-520px;transform:rotate(-30deg);opacity:.22;animation:spin 22s linear infinite}
#login::after{content:"";position:absolute;width:700px;height:700px;border-radius:50%;border:22px solid #f5efe9;border-color:#f5efe9 transparent transparent transparent;left:-380px;top:-300px;transform:rotate(140deg);opacity:.08;animation:spin 30s linear infinite reverse}
.lg{position:relative;z-index:1;width:min(920px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:#16110e;border:1px solid #2e251f;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px #000;animation:pop2 .5s cubic-bezier(.2,.9,.3,1.2)}
.lg-l{padding:32px;color:#f5efe9;display:flex;flex-direction:column;gap:14px;background:linear-gradient(160deg,#1d1612,#0e0b09);position:relative;overflow:hidden}
.lg-l img{width:96px;animation:pop 1s both}
.lg-l h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.4vw,40px);margin:0;line-height:1.05}
.lg-l h2 em{color:#ff6600}
.lg-l p{color:#cbbfb4;margin:0;max-width:34ch}
.lg-l .figs{display:flex;gap:4px;margin-top:auto}
.lg-l .figs img{width:64px;height:110px;object-fit:cover;object-position:top;border-radius:10px;animation:jobin .6s both}
.lg-r{padding:28px;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;gap:14px}
.lg-r h3{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.who button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--fg);transition:all .2s}
.who button small{font-weight:500;color:var(--muted);font-size:10px;text-align:center;line-height:1.2}
.who button.on{border-color:var(--orange);background:var(--orange-soft);transform:translateY(-2px)}
.who button:disabled{opacity:.4}
.pin{display:flex;gap:10px;justify-content:center}
.pin i{width:14px;height:14px;border-radius:50%;border:2px solid var(--fg);transition:all .2s}
.pin i.f{background:#ff6600;border-color:#ff6600;transform:scale(1.15)}
.pin.err{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center}
.pad button{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:18px;font-weight:700;color:var(--fg);transition:transform .1s}
.pad button:active{transform:scale(.92);background:var(--orange-soft)}
.pad button.go{background:#ff6600;border-color:#ff6600}
.lg-r .hint{font-size:12px;color:var(--muted);text-align:center}
.lg-r .back{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted)}
.signout{margin-top:8px;width:100%;background:#2a1408;border:1px solid #4a2610;color:#ffb27a;border-radius:8px;padding:6px;font-weight:700;font-size:12px}
.view.quiet>*,.view.quiet .ptile,.view.quiet .pline,.view.quiet .kpi svg.sw path{animation:none}
.view.quiet .pline:last-child{animation:jobin .35s both}
.pos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.pos-cart{position:sticky;top:96px;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;max-height:calc(100vh - 110px)}
.pos-cart .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pos-lines{flex:1;overflow:auto;padding:6px 16px;min-height:120px}
.pline{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);animation:jobin .35s both}
.pline b{font-size:13px;display:block}
.pline small{color:var(--muted);font-size:11.5px}
.qty{display:flex;align-items:center;gap:2px;background:var(--surface-2);border-radius:8px}
.qty button{border:0;background:none;width:24px;height:26px;font-weight:800}
.qty span{min-width:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.pos-tot{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:6px}
.pos-tot .r2{display:flex;justify-content:space-between;font-size:13px}
.pos-tot .big{font-family:var(--f-display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.pos-tot .big.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.08);color:var(--orange)}}
.paym{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.paym button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;font-weight:700;font-size:12px}
.paym button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.charge{width:100%;justify-content:center;padding:14px;font-size:15px}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ptile{border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;transition:transform .15s,box-shadow .2s;position:relative;animation:jobin .4s both}
.ptile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ptile:active{transform:scale(.96)}
.ptile .pi{height:120px;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.ptile .pi img{width:100%;height:100%;object-fit:cover;object-position:top}
.ptile .pi svg{width:100%;height:100%}
.ptile .pi .gl{width:54px;height:54px;stroke:#ff9a52;fill:none;stroke-width:1.5}
.ptile .pb{padding:9px 10px;display:flex;flex-direction:column;gap:2px}
.ptile .pb b{font-size:12.5px;line-height:1.3}
.ptile .pb .row{justify-content:space-between;gap:4px}
.ptile .st{position:absolute;top:8px;right:8px;font-size:10.5px}
.ptile.out{opacity:.45;pointer-events:none}
.ptile .plus{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#140a03;display:grid;place-items:center;font-weight:800;opacity:0;transform:scale(.5);transition:all .2s}
.ptile:hover .plus{opacity:1;transform:none}
.scan{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.scan .inp{max-width:280px}
.receipt{background:#fffdf8;color:#16120f;font-family:var(--f-mono);font-size:12px;padding:20px 18px 26px;margin:0 auto;width:min(340px,100%);position:relative;animation:printout 1.1s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 20px 40px -20px #0008;-webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/14px 100% repeat-x}
@keyframes printout{from{clip-path:inset(0 0 100% 0);transform:translateY(-30px)}to{clip-path:inset(0 0 0 0)}}
.receipt h4{font-family:var(--f-display);font-size:20px;text-align:center;margin:6px 0 2px;font-style:italic}
.receipt .c{text-align:center}
.receipt .l{display:flex;justify-content:space-between;gap:8px}
.receipt hr{border:0;border-top:1px dashed #9c9087;margin:8px 0}
.receipt img{display:block;margin:0 auto;width:56px}
.term{display:grid;place-items:center;gap:10px;padding:20px;text-align:center}
.term .spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--orange);animation:spin .8s linear infinite}
@media (max-width:1180px){.pos{grid-template-columns:minmax(0,1fr)}.pos-cart{position:static;max-height:none}}
@media (max-width:900px){.lg{grid-template-columns:minmax(0,1fr)}.lg-l .figs{display:none}}
@media (max-width:520px){.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carousel .fig img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;object-position:top;border-radius:20px;box-shadow:0 30px 60px -20px #000;max-width:100%}
.carousel .fig{width:230px}
.job .jt{display:block;width:100%;height:84px;object-fit:cover;object-position:top;border-radius:7px;margin-bottom:6px}
.tk-vis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tk-vis img{width:100%;height:100%;max-height:360px;object-fit:cover;object-position:top;border-radius:14px}
img.gs{width:38px;height:54px;object-fit:cover;object-position:top;border-radius:8px}
.kcard .kimg{width:46px;height:80px;object-fit:cover;object-position:top;border-radius:8px}
.trk-img{width:90px;height:130px;object-fit:cover;object-position:top;border-radius:12px}

.stage-3d:has(.mannequin.photo){padding-block:92px 104px}
.mannequin.photo{width:min(270px,64%)}
.mannequin.photo img{display:block;width:100%;max-width:100%;aspect-ratio:3/5;object-fit:cover;object-position:top;border-radius:18px;box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff14}
.ref.mock{background:#1d1713;padding:6px 6px 24px;top:auto;bottom:104px;right:14px;width:104px}
.ref.mock svg{display:block;width:100%;height:auto}
.ref.mock figcaption{color:#ffb27a}
.hero-figs img{width:96px;height:176px;object-fit:cover;object-position:top;border-radius:14px;box-shadow:0 20px 40px -16px #000;animation:float 5s ease-in-out infinite}
.hero-figs img:nth-child(2){animation-delay:-1.6s}.hero-figs img:nth-child(3){animation-delay:-3.2s}
@media (max-width:900px){.hero-figs img{width:70px;height:128px}.ref.mock{width:80px}}
@media (max-width:520px){.stage-3d:has(.mannequin.photo){padding-block:96px 150px}.ref.mock{bottom:150px}}
.dstage{display:contents}
.flip{position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.2,1)}
.dstage.turned .flip{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{position:absolute;inset:0;transform:rotateY(180deg);display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 50% 35%,#3a2a1f,#120d0a 75%);box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff14;overflow:hidden}
.face.back svg{height:94%;width:auto;max-width:100%}
.dstage .when-back{display:none}.dstage.turned .when-back{display:inline}.dstage.turned .when-front{display:none}
.dstage .sidecard .when-front,.dstage .sidecard .when-back{display:block}.dstage .sidecard .when-back{display:none}.dstage.turned .sidecard .when-back{display:block}.dstage.turned .sidecard .when-front{display:none}
.sidecard{border:0;cursor:pointer;font:inherit;transition:transform .3s}
.sidecard:hover{transform:rotate(0) scale(1.05)}
.sidecard svg,.sidecard img{display:block;width:100%;height:auto;aspect-ratio:3/5;object-fit:cover;object-position:top}
.ref .cap{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#ffb27a;letter-spacing:.06em}
.sidetag{position:absolute;left:0;right:0;top:-24px;text-align:center;white-space:nowrap;z-index:2;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#ffb27a}
img[data-dress]{transition:filter .4s}
img.dressing{filter:saturate(.4) brightness(.85) blur(1px)}
img.fresh{animation:dressin .7s ease}
@keyframes dressin{from{filter:brightness(1.35) saturate(.3)}}
.view.quiet .mannequin.swap{animation:none}

.mannequin.photo{width:auto}
.dstage .face img{display:block;height:min(500px,60vh);width:auto;max-width:100%;aspect-ratio:auto;object-fit:contain;border-radius:16px;box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff14}
.dstage .face.back{background:none;box-shadow:none;display:block}
.dstage .face.back img{height:100%;margin:0 auto}
.sidecard{width:84px!important}
.sidecard img{aspect-ratio:auto!important;height:150px!important;width:100%;object-fit:cover;object-position:top;border-radius:2px}
.lb .ph img{object-fit:contain;background:var(--surface-2)}
@media (max-width:520px){.dstage .face img{height:min(420px,56vh)}.sidecard{width:66px!important}.sidecard img{height:116px!important}}
/* ---------- animated footers ---------- */
.gfoot2{background:var(--ink);color:#cbbfb4;position:relative;overflow:hidden;padding-top:0}
.gfoot2::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;border:56px solid #ff6600;border-color:#ff6600 transparent transparent transparent;right:-360px;bottom:-560px;transform:rotate(-24deg);opacity:.16;animation:spin 26s linear infinite}
.ftape{height:34px;background:linear-gradient(#ffd23f,#f4b400);overflow:hidden;position:relative;box-shadow:0 6px 16px -8px #000}
.ftape-in{display:flex;height:100%;width:max-content;animation:tape 40s linear infinite}
.ftape-in span{width:22px;flex:none;border-left:1px solid #2a1d0c;height:9px;position:relative}
.ftape-in span.mid{height:15px}.ftape-in span.big{height:22px;border-left-width:2px}
.ftape-in b{position:absolute;left:3px;top:17px;font:700 10px var(--f-mono);color:#2a1d0c}
@keyframes tape{to{transform:translateX(-50%)}}
.fstitch{display:block;width:100%;height:28px;margin-top:10px}
.fstitch path{fill:none;stroke:#ff6600;stroke-width:2;stroke-dasharray:10 8;animation:stitch 2.2s linear infinite}
@keyframes stitch{to{stroke-dashoffset:-36}}
.fneedle{position:absolute;top:44px;left:0;width:54px;height:18px;offset-path:path("M0 20 Q150 2 300 20 T600 20 T900 20 T1200 20");animation:needle 9s linear infinite}
@keyframes needle{from{left:-60px}to{left:100%}}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr .9fr 1.4fr;gap:28px;padding-block:28px 34px;position:relative;z-index:1}
.gfoot2 h5{margin:0 0 10px;color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.gfoot2 p{margin:0 0 8px;line-height:1.6}
.fmuted{color:#8f8378;font-size:12.5px}
.fbrand img{width:64px;animation:float 6s ease-in-out infinite}
.fword{font-family:var(--f-display);font-size:clamp(30px,3.6vw,44px);line-height:1;margin:10px 0 12px;color:#fff;display:flex;gap:8px;flex-wrap:wrap}
.fword em{color:#ff6600;background:linear-gradient(90deg,#ff6600,#ffb27a,#ff6600);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.fstatus{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:#1d1713;border:1px solid #2e251f;color:#f5efe9}
.fstatus::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sc,#46c37b);box-shadow:0 0 0 0 var(--sc,#46c37b);animation:live 1.6s infinite}
.fbtn{border:1px solid #3a2f27;background:#1d1713;color:#f5efe9;border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:700}
.fbtn:hover{border-color:#ff6600}
.flinks{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.flinks button{all:unset;cursor:pointer;color:#cbbfb4;font-weight:600;position:relative;padding:2px 0}
.flinks button::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:#ff6600;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.flinks button:hover{color:#fff}.flinks button:hover::after{transform:scaleX(1)}
.flinks button:focus-visible{outline:2px solid #ff6600}
.fnews .inp{background:#1d1713;border-color:#3a2f27;color:#f5efe9}
.fribbon{overflow:hidden;border-block:1px solid #2e251f;padding-block:10px;position:relative;z-index:1}
.fribbon-in{display:flex;gap:10px;width:max-content;animation:tape 36s linear infinite reverse}
.fsw{position:relative;width:76px;height:44px;border-radius:8px;overflow:hidden;flex:none;transition:transform .3s}
.fsw svg{width:100%;height:100%;display:block}
.fsw i{position:absolute;inset:auto 0 0;font-style:normal;font-size:9px;font-weight:800;color:#fff;background:#0008;text-align:center;letter-spacing:.06em}
.fribbon:hover .fribbon-in{animation-play-state:paused}
.fsw:hover{transform:translateY(-4px) rotate(-3deg)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px;font-size:12px;color:#8f8378;position:relative;z-index:1}
.fheart{display:inline-block;width:9px;height:9px;background:#ff6600;transform:rotate(45deg);margin:0 4px;position:relative;animation:beat 1.4s infinite}
.fheart::before,.fheart::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#ff6600}
.fheart::before{left:-4.5px}.fheart::after{top:-4.5px}
@keyframes beat{30%{transform:rotate(45deg) scale(1.25)}}
.ftop{display:inline-flex;align-items:center;gap:6px;border:1px solid #3a2f27;background:#1d1713;color:#f5efe9;border-radius:20px;padding:5px 12px 5px 6px;font-weight:700;font-size:12px}
.ftop svg{width:22px;height:22px}
.ftop rect{fill:#d9cec4}.ftop .spool{fill:#ff6600}.ftop .thread{stroke:#9c3f00;stroke-width:1}
.ftop:hover .spool{animation:spool .6s linear infinite}
@keyframes spool{50%{fill:#ffb27a}}
.sfoot{border-top:1px solid var(--line);background:var(--surface);padding-block:10px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);position:relative;overflow:hidden}
.sfoot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,transparent 10px 18px);background-size:36px 2px;animation:sstitch 1.2s linear infinite}
@keyframes sstitch{to{background-position:36px 0}}
.sfoot b{color:var(--fg)}
.sfoot .sp{flex:1}
.sfoot .spin2{width:14px;height:14px;border-radius:50%;border:2px solid var(--orange);border-right-color:transparent;animation:spin 1.6s linear infinite;flex:none}
@media (max-width:1180px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fbrand,.fnews{grid-column:span 3}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}.fbrand,.fnews{grid-column:auto}.fbar{justify-content:center;text-align:center}.sfoot{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
/* ---------- theme switch ---------- */
.tsw{position:relative;width:58px;height:30px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,#ffe2c7,#ffc48f);padding:0;flex:none;overflow:hidden;transition:background .5s,border-color .5s}
.tsw .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .55s cubic-bezier(.5,1.6,.4,1),background .5s;z-index:1}
.tsw svg{position:absolute;width:16px;height:16px;transition:transform .55s,opacity .35s}
.tsw .sun{fill:#ff6600;stroke:#ff6600;stroke-width:1.8;stroke-linecap:round}
.tsw .moon{fill:#f5efe9;opacity:0;transform:rotate(-90deg) scale(.4)}
.tsw i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .4s}
.tsw .st1{left:10px;top:8px}.tsw .st2{left:16px;top:18px;width:2px;height:2px}
.gnav .tsw{border-color:#3a2f27}
:root[data-theme="dark"] .tsw{background:linear-gradient(180deg,#1b2140,#0b0d1c)}
:root[data-theme="dark"] .tsw .knob{transform:translateX(28px);background:#2a2f4a}
:root[data-theme="dark"] .tsw .sun{opacity:0;transform:rotate(90deg) scale(.4)}
:root[data-theme="dark"] .tsw .moon{opacity:1;transform:none}
:root[data-theme="dark"] .tsw i{opacity:1;animation:twinkle 1.8s infinite}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tsw{background:linear-gradient(180deg,#1b2140,#0b0d1c)}:root:not([data-theme="light"]) .tsw .knob{transform:translateX(28px);background:#2a2f4a}:root:not([data-theme="light"]) .tsw .sun{opacity:0;transform:rotate(90deg) scale(.4)}:root:not([data-theme="light"]) .tsw .moon{opacity:1;transform:none}:root:not([data-theme="light"]) .tsw i{opacity:1;animation:twinkle 1.8s infinite}}
@keyframes twinkle{50%{opacity:.25}}
.tsw:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
body,.card,.top,.sfoot,.gsec,.ccard,.stage,.job,.kcol,.chat,.inp,.btn{transition:background-color .45s,color .45s,border-color .45s}
/* ---------- Atelier AI ---------- */
.toasts{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.aifab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;width:62px;height:62px;border-radius:50%;border:0;padding:0;background:conic-gradient(from var(--a,0deg),#ff6600,#ffb27a,#16120f,#ff6600);display:grid;place-items:center;box-shadow:0 14px 34px -10px #ff660099;animation:orbspin 4s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes orbspin{to{--a:360deg}}
.aifab::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a1d14,#0b0806)}
.aifab::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #ff6600;opacity:0;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.aifab svg{position:relative;width:28px;height:28px;fill:#ffb27a;animation:twk 2.4s ease-in-out infinite}
@keyframes twk{50%{transform:scale(.82) rotate(20deg);fill:#ff6600}}
.aifab .lbl{position:absolute;right:70px;white-space:nowrap;background:var(--fg);color:var(--bg);font-size:12px;font-weight:800;padding:6px 10px;border-radius:10px;opacity:0;transform:translateX(8px);transition:all .3s;pointer-events:none}
.aifab:hover .lbl{opacity:1;transform:none}
.aipanel{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:71;width:min(420px,calc(100vw - 32px));height:min(640px,calc(100vh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px -24px #000a;display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:aiin .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes aiin{from{transform:scale(.6) translateY(30px);opacity:0}}
.aihd{background:var(--ink);color:#f5efe9;padding:14px 16px 0;position:relative;overflow:hidden}
.aihd::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:26px solid #ff6600;border-color:#ff6600 transparent transparent transparent;right:-120px;top:-40px;transform:rotate(30deg);opacity:.25;animation:spin 14s linear infinite}
.aihd .row{position:relative}
.aihd b{font-family:var(--f-display);font-style:italic;font-size:22px;font-weight:500}
.aimode{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:#2c1709;color:#ffb27a;display:inline-flex;align-items:center;gap:6px}
.aimode::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:live 1.6s infinite}
.aimode.claude{background:#12261a;color:#46c37b}
.aiclose{margin-left:auto;border:1px solid #3a2f27;background:#1d1713;color:#f5efe9;border-radius:9px;width:30px;height:30px}
.aitabs{display:flex;gap:2px;margin-top:12px;position:relative}
.aitabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:9px 4px 11px;font-size:12.5px;font-weight:800;color:#a69a90;border-bottom:3px solid transparent;transition:all .25s}
.aitabs button.on{color:#fff;border-color:#ff6600}
.aibody{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.aimsg{display:flex;gap:8px;max-width:92%;animation:jobin .35s both}
.aimsg.me{align-self:flex-end;flex-direction:row-reverse}
.aimsg .bub{background:var(--surface-2);border-radius:14px;padding:9px 12px;font-size:13px;line-height:1.55;min-width:0;word-break:break-word}
.aimsg.me .bub{background:var(--orange);color:#140a03}
.aimsg .bub p{margin:0 0 6px}.aimsg .bub p:last-child{margin:0}
.aimsg .bub ul{margin:4px 0;padding-left:18px}
.aiav{width:28px;height:28px;border-radius:50%;flex:none;background:conic-gradient(#ff6600,#ffb27a,#ff6600);display:grid;place-items:center}
.aiav svg{width:15px;height:15px;fill:#140a03}
.thinking{display:inline-flex;gap:4px;align-items:center;color:var(--muted);font-size:12px}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:bob 1s infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
.aichips{display:flex;flex-wrap:wrap;gap:6px}
.aichips button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;text-align:left}
.aichips button:hover{border-color:var(--orange);color:var(--orange)}
.aicomp{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.aicomp .inp{flex:1}
.aicard{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:10px;animation:jobin .45s both}
.aicard h6{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:6px;align-items:center}
.mgridai{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mgridai div{background:var(--surface-2);border-radius:9px;padding:6px 8px;position:relative;overflow:hidden;animation:jobin .4s both}
.mgridai small{display:block;font-size:10px;color:var(--muted);font-weight:700}
.mgridai b{font-family:var(--f-mono);font-size:14px}
.mgridai em{font-style:normal;font-size:10px;color:var(--muted);margin-left:3px}
.mgridai div.key::after{content:"tape";position:absolute;top:4px;right:5px;font-size:8.5px;font-weight:800;color:var(--warn);text-transform:uppercase}
.scan{position:relative;height:150px;border-radius:12px;background:var(--ink);overflow:hidden;display:grid;place-items:center}
.scan svg{height:136px}
.scan::after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#ff6600,transparent);box-shadow:0 0 18px #ff6600;animation:scanl 1.6s ease-in-out infinite}
@keyframes scanl{0%{top:6%}50%{top:92%}100%{top:6%}}
.scan.done::after{display:none}
.reco{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line);border-radius:14px;padding:8px;animation:jobin .45s both}
.reco img{width:66px;height:110px;object-fit:cover;object-position:top;border-radius:9px}
.reco b{font-size:14px}
.reco .why{margin:4px 0 6px;padding-left:16px;font-size:11.5px;color:var(--muted)}
.match{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--orange)}
.match i{flex:1;height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden;position:relative}
.match i::after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,#ff6600,#ffb27a);border-radius:5px;transform-origin:left;animation:unroll 1s both}
.aiform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aiform .full{grid-column:1/-1}
.ai-fill{animation:aifill 1.6s ease both;outline:2px solid var(--orange)!important}
@keyframes aifill{0%{background:var(--orange-soft);transform:scale(1.04)}100%{transform:none}}
.aibtn{display:inline-flex;align-items:center;gap:6px}
.aibtn svg{width:14px;height:14px;fill:currentColor}
.ainote{font-size:11px;color:var(--muted);line-height:1.45}
@media (max-width:520px){.aipanel{right:8px;left:8px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));height:calc(100vh - 110px)}.mgridai{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Responsive */
@media (max-width:1180px){.studio{grid-template-columns:220px minmax(0,1fr)}.studio>.panel-r{grid-column:1/-1}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:250px;z-index:40;transform:translateX(-100%);transition:transform .3s}
  .side.open{transform:none;box-shadow:20px 0 60px #0008}
  .menu-btn{display:grid}
  .g3,.g21,.g12,.g2,.hero{grid-template-columns:minmax(0,1fr)}
  .studio{grid-template-columns:minmax(0,1fr)}
  .style-list{flex-direction:row;overflow-x:auto;max-height:none}
  .style-item{min-width:180px}
  .chat{grid-template-columns:minmax(0,1fr);height:auto}
  .chans{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .mlist{height:420px}
  .search{display:none}
  .top,.view{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .top h2{font-size:21px}
  .hero-figs svg{width:64px;height:130px}
}
@media (max-width:520px){.g4{grid-template-columns:minmax(0,1fr)}.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.top .sub{display:none}.audit-item{grid-template-columns:26px minmax(0,1fr)}.audit-item .ts,.audit-item .ref{grid-column:2}.ticket{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}