@font-face{font-family:'Schibsted Grotesk';src:url('fonts/SchibstedGrotesk.ttf') format('truetype');font-weight:400 900}
@font-face{font-family:'Archivo';src:url('fonts/Archivo.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%}

:root{
    --accent:rgb(239,68,68); --accent-rgb:239,68,68; --accent-2:rgb(244,135,135); --ink:#fff;
    --win:rgba(15,16,20,.95); --well:rgba(255,255,255,.035); --well2:rgba(255,255,255,.06); --hair:rgba(255,255,255,.07);
    --text:#f2f3f5; --text-2:#d6d9de; --muted:#9097a1; --faint:#6b717b;
    --red:248,113,113; --amber:251,191,36; --green:74,222,128;
    --font:'Schibsted Grotesk',system-ui,sans-serif;
    --hud:'Archivo','Arial Narrow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:transparent;overflow:hidden;font-family:var(--font);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;user-select:none}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select{font-family:inherit;user-select:text}
.ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}

/* windows */
.glass,.shell{position:relative;overflow:hidden;border-radius:22px;background:var(--win);box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.04)}
.glass::before,.shell::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px 360px at 0 0,rgba(var(--accent-rgb),.15),transparent 70%)}
.glass>*,.shell>*{position:relative;z-index:1}

.mk{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%,rgba(0,0,0,.25)),var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),.35),inset 0 1px 0 rgba(255,255,255,.35)}
.mk .ico{width:22px;height:22px}

.kbd,.sr-hint b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:22px;padding:0 7px;font-weight:600;font-size:12px;font-style:normal;color:var(--text);background:rgba(255,255,255,.08);border-radius:7px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:13px;color:var(--text);background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;font-weight:600;white-space:nowrap;transition:background .12s,filter .12s}
.btn:hover{background:var(--well2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0)),var(--accent);box-shadow:0 10px 28px rgba(var(--accent-rgb),.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0)),var(--accent)}
.btn.ghost{background:var(--well)}
.btn.danger{color:#fca5a5}
.btn.danger:hover{background:rgba(var(--red),.14);box-shadow:inset 0 0 0 1px rgba(var(--red),.35)}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px;gap:6px;border-radius:10px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:12px;color:var(--muted);background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.icon-btn:hover{color:var(--text)}

.inp,.sr-search input,.sr-search select{width:100%;min-width:0;height:42px;padding:0 13px;border:0;border-radius:12px;color:var(--text);background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px}
.inp:focus,.sr-search input:focus,.sr-search select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--accent)}
.inp::placeholder,.sr-search input::placeholder{color:var(--faint)}
select{appearance:none;cursor:pointer;background:rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239097a1' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center!important;padding-right:30px!important}
select option{background:#1e2126;color:#f3f4f6}

.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:7px;color:#ffb4b4;background:rgba(var(--accent-rgb),.18);white-space:nowrap;text-transform:lowercase}
.badge::first-letter{text-transform:uppercase}
.badge.off{color:#c9cdd3;background:rgba(255,255,255,.07)}
.badge.warn{color:#fcd34d;background:rgba(var(--amber),.14)}

/* showroom */
#showroom{position:fixed;inset:0;display:grid;grid-template-columns:420px 1fr 440px;gap:0;padding:32px;
    background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 30%,transparent 70%,rgba(0,0,0,.45))}
.sr-left,.sr-right{display:flex;flex-direction:column;min-height:0}
.sr-brand{display:flex;align-items:center;gap:14px;padding:24px 22px 16px}
.sr-brand h1{font-family:var(--hud);font-stretch:74%;font-size:42px;font-weight:800;line-height:.92}
.sr-brand p{font-size:13.5px;color:var(--muted);margin-top:5px}
.sr-search{display:flex;gap:8px;padding:0 18px 8px}
.sr-filters{padding-bottom:14px}
.sr-filters select{flex:1}
.chip{flex:none;height:34px;padding:0 12px;border:0;border-radius:11px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap}
.chip:hover{color:var(--text)}
.chip.on{color:#fff;background:linear-gradient(90deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.chip em{font-style:normal;color:var(--faint);margin-left:6px;font-size:12px}
.chip.on em{color:#ffb4b4}
.sr-list{flex:1;overflow-y:auto;padding:4px 12px 16px 16px;display:flex;flex-direction:column;gap:3px}
.vcard{position:relative;flex:none;display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:center;padding:9px;border:0;border-radius:16px;text-align:left;background:transparent;transition:background .12s}
.vcard:hover{background:rgba(255,255,255,.04)}
.vcard.on{background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
.vthumb{width:100px;height:58px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(60px 26px at 50% 72%,rgba(var(--accent-rgb),.16),transparent),rgba(0,0,0,.25)}
.vthumb img{max-width:100%;max-height:100%;object-fit:contain}
.vthumb svg{width:32px;height:32px;stroke:#8a9099}
.vcard small{display:block;font-size:12.5px;color:var(--muted)}
.vcard b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .p{display:flex;align-items:center;font-family:var(--hud);font-stretch:84%;font-size:17px;font-weight:700;margin-top:2px}
.vcard .p .left{font-family:var(--font);font-stretch:100%;font-style:normal;margin-left:8px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;color:#fcd34d;background:rgba(var(--amber),.14)}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:30px 0}

.sr-stage{position:relative;cursor:grab}
.sr-stage:active{cursor:grabbing}
.sr-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}
.sr-hint span{display:flex;align-items:center;gap:7px;padding:8px 13px 8px 9px;border-radius:12px;background:rgba(15,16,20,.88);box-shadow:inset 0 0 0 1px var(--hair);font-size:13.5px;color:var(--muted)}

.sr-scroll{flex:1;min-height:0;overflow-y:auto}
.sr-head{position:relative;padding:28px 26px 6px}
.sr-head small,.mcard small{display:block;font-size:13.5px;color:var(--muted)}
.sr-head h2{font-family:var(--hud);font-stretch:72%;font-size:60px;font-weight:800;line-height:.9;margin:6px 48px 10px 0}
.sr-price{font-family:var(--hud);font-stretch:80%;font-size:40px;font-weight:800;color:#fff;line-height:1}
.sr-x{position:absolute;top:22px;right:24px}
.sr-sec{padding:20px 26px 4px}
.sr-sec h3,.sec-row h3{font-size:14.5px;font-weight:600;color:var(--text-2);margin-bottom:12px}
.sec-row{display:flex;justify-content:space-between;align-items:center}
.sec-row h3{margin:0}
.stats{display:flex;flex-direction:column;gap:11px}
.stat{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:12px}
.stat span{font-size:13.5px;color:var(--muted)}
.stat .bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--accent));box-shadow:0 0 10px rgba(var(--accent-rgb),.6);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.stat b{text-align:right;font-size:13.5px;font-weight:600}
.seg{display:flex;gap:2px;padding:4px;border-radius:13px;background:rgba(0,0,0,.3)}
.seg button{height:32px;padding:0 13px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500}
.seg button:hover{color:var(--text)}
.seg button.on{color:#fff;background:rgba(255,255,255,.1)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.seg.wide{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
.seg.wide button{height:36px}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:12px}
.sw-c{position:relative;aspect-ratio:1;border:0;border-radius:11px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sw-c.on{box-shadow:0 0 0 2px #15161b,0 0 0 4px #fff}
.wheel{display:flex;gap:10px;align-items:center}
.wheel input[type=color]{width:54px;height:42px;padding:0;border:0;background:none;cursor:pointer}
.wheel input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.wheel input[type=color]::-webkit-color-swatch{border:0;border-radius:10px}
.wheel .inp{width:120px}
.paint-name{font-size:13px;color:var(--muted);margin-top:10px;min-height:16px}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay button{padding:13px 15px;border:0;border-radius:15px;text-align:left;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.pay button:hover{background:var(--well2)}
.pay button span{display:block;font-size:13.5px;color:var(--muted)}
.pay button b{display:block;font-family:var(--hud);font-stretch:82%;font-size:21px;font-weight:700;margin-top:3px}
.pay button small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.pay button.on{background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.05));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.pay button.on span{color:#ffb4b4}
.pay button.short b{color:rgb(var(--red))}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.plan div{padding:10px 13px;border-radius:13px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.plan span{display:block;font-size:12.5px;color:var(--muted)}
.plan b{font-family:var(--hud);font-stretch:82%;font-size:19px;font-weight:700}
.was{color:var(--muted);font-size:.55em;margin-right:8px;text-decoration:line-through}
.coupon{display:flex;gap:8px;margin-top:12px}
.coupon .inp{text-transform:uppercase;letter-spacing:.04em}
.coupon .inp::placeholder{text-transform:none;letter-spacing:0}
.coupon .btn{height:42px}
.cp-msg{font-size:13px;color:var(--muted);margin-top:7px;min-height:16px}
.sr-note{margin:0 26px 10px;padding:11px 14px;border-radius:13px;font-size:13.5px;color:#fcd34d;background:rgba(var(--amber),.12)}
.sr-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:16px 26px 24px}
.sr-actions .btn{height:52px;font-size:15.5px;border-radius:15px}

/* popups */
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,6,8,.6);z-index:20}
.mcard{width:440px;padding:30px 28px 26px;text-align:center;animation:pop .2s ease-out}
.mcard h3{font-family:var(--hud);font-stretch:74%;font-size:40px;font-weight:800;line-height:.95;margin:8px 0 4px}
.mcard p{color:var(--muted);font-size:14px;line-height:1.6}
.mcard p b{color:var(--text);font-weight:600}
.mcard .big{font-family:var(--hud);font-stretch:80%;font-size:46px;font-weight:800;line-height:1;margin:12px 0 14px}
.mcard .row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:22px}
.mcard .row .btn{height:50px;font-size:15px;border-radius:15px}
.mcard.done .tick{width:64px;height:64px;margin:0 auto 12px;display:grid;place-items:center;border:0;border-radius:20px;color:#fff;background:linear-gradient(160deg,#4ade80,#16a34a);box-shadow:0 12px 30px rgba(var(--green),.35),inset 0 1px 0 rgba(255,255,255,.35)}
.mcard.done .tick svg{width:34px;height:34px}
.mcard.offer{width:480px}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
#offer{z-index:80}

#tdHud{position:fixed;min-width:270px;padding:14px 18px;border-radius:18px}
#tdHud[data-pos='top-left']{top:28px;left:28px}
#tdHud[data-pos='top-center']{top:28px;left:50%;transform:translateX(-50%)}
#tdHud[data-pos='top-right']{top:28px;right:28px}
#tdHud[data-pos='bottom-left']{bottom:28px;left:28px}
#tdHud[data-pos='bottom-center']{bottom:28px;left:50%;transform:translateX(-50%)}
#tdHud[data-pos='bottom-right']{bottom:28px;right:28px}
#tdHud .lbl{display:block;font-size:13.5px;color:var(--muted)}
#tdHud > b{display:block;font-family:var(--hud);font-stretch:76%;font-size:40px;font-weight:800;line-height:1;margin-top:2px;font-variant-numeric:tabular-nums}
#tdHud .bar{display:block;height:6px;border-radius:4px;margin:10px 0 10px;background:rgba(255,255,255,.08);overflow:hidden}
#tdHud .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--accent));box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}
#tdHud small{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}

/* admin and tablet */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(5,6,8,.55);z-index:50}
.shell{display:flex;border-radius:24px;animation:rise .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.shell.admin{width:1380px;height:820px;max-width:96vw;max-height:94vh}
.shell.tablet{width:1300px;height:780px;max-width:96vw;max-height:94vh}
.rail{position:relative;width:250px;flex:none;display:flex;flex-direction:column;gap:3px;padding:22px 14px;overflow-y:auto}
.rail-brand{display:flex;align-items:center;gap:12px;padding:2px 8px 18px}
.rail-brand b{display:block;font-family:var(--hud);font-stretch:78%;font-size:22px;font-weight:800;line-height:1.05}
.rail-brand small{font-size:13px;color:var(--muted)}
.rail-sep{margin:16px 12px 6px;font-size:13px;color:var(--faint)}
.rail-btn{position:relative;flex:none;display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border:0;border-radius:13px;background:transparent;color:#a8aeb7;text-align:left;font-size:15px;transition:background .12s}
.rail-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-btn .ico{color:currentColor}
.rail-btn:hover{color:#fff;background:rgba(255,255,255,.04)}
.rail-btn.on{color:#fff;background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25)}
.rail-btn.on .ico{color:#ff8a8a}
.rail-btn .dot{width:8px;height:8px;margin:0 5px;flex:none;border-radius:50%;background:rgba(255,255,255,.15)}
.rail-btn .dot.on{background:rgb(var(--green));box-shadow:0 0 8px rgba(var(--green),.7)}
.rail .inp{flex:none}
.adm-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(255,255,255,.015)}
.adm-main header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:26px 28px 12px 30px}
.adm-title{display:flex;align-items:center;gap:12px;font-family:var(--hud);font-stretch:72%;font-size:44px;font-weight:800;line-height:.95;min-width:0}
.adm-title > .ico{display:none}
.adm-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-title .badge{font-family:var(--font);font-stretch:100%;font-size:12.5px;line-height:1.3;overflow:visible;align-self:center}
.head-actions{display:flex;gap:8px;align-items:center;flex:none}
.btn.dirty{position:relative}
.btn.dirty::after{content:'';position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:#fff}
#admSave:not(.dirty){color:var(--muted);background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.subtabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 30px 10px}
.subtabs button{height:36px;padding:0 14px;border:0;border-radius:11px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted);font-size:14px}
.subtabs button:hover{color:var(--text)}
.subtabs button.on{color:#fff;background:linear-gradient(90deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.08));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.adm-body{flex:1;overflow-y:auto;padding:10px 30px 28px;display:flex;flex-direction:column;gap:12px}

.panel{position:relative;flex:none;padding:18px 20px;border-radius:18px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.sect-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sect-head h3{display:flex;align-items:center;gap:9px;font-family:var(--hud);font-stretch:80%;font-size:23px;font-weight:800;line-height:1}
.sect-head h3 .ico{color:#ff8a8a}
.note{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 12px}
.note code,.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text-2);background:rgba(0,0,0,.3);padding:2px 7px;border-radius:6px}
.code{display:block;padding:11px 13px;border-radius:12px;user-select:text}
.frow{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr);align-items:center;gap:20px;padding:12px 0;border-top:1px solid var(--hair)}
.frow:first-of-type{border-top:0}
.flab b{display:block;font-size:14.5px;font-weight:600}
.flab small{display:block;color:var(--faint);font-size:12.5px;margin-top:3px;line-height:1.45}
.flab small b{display:inline;font-size:12.5px;color:var(--text-2)}
.fctl{display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap}
.fctl > .inp{max-width:340px}
.fctl > .inp.num{max-width:150px}
.inp:disabled{opacity:.5}
.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sw{position:relative;display:inline-block;width:42px;height:25px;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0}
.sw i{position:absolute;inset:0;border-radius:13px;background:rgba(255,255,255,.12);transition:background .2s}
.sw i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#c5c9cf;transition:left .2s,background .2s}
.sw input:checked + i{background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.45)}
.sw input:checked + i::after{left:20px;background:#fff}
.color{width:46px;height:42px;padding:0;border:0;background:none;cursor:pointer}
.color::-webkit-color-swatch-wrapper{padding:3px}
.color::-webkit-color-swatch{border:0;border-radius:10px}

.loc{display:grid;grid-template-columns:210px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--hair)}
.loc:first-of-type{border-top:0}
.xyz{display:flex;gap:8px}
.xyz label{flex:1;min-width:0}
.xyz span,.lrow label span,.mini{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.btnset{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lrow{display:flex;align-items:flex-end;gap:10px;padding:12px 12px 12px 14px;margin-bottom:8px;border-radius:15px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px var(--hair)}
.lrow > label{flex:1;min-width:0}
.lrow > label.grow{flex:2}
.xbtn{flex:none;width:38px;height:42px;display:grid;place-items:center;border:0;border-radius:12px;color:var(--faint);background:transparent}
.xbtn:hover{color:#fca5a5;background:rgba(var(--red),.12)}

.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.dcard{position:relative;padding:20px;border:0;border-radius:18px;text-align:left;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);transition:background .15s,box-shadow .15s}
.dcard:hover{background:var(--well2);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35),0 0 30px rgba(var(--accent-rgb),.14)}
.dcard b{display:block;font-family:var(--hud);font-stretch:78%;font-size:28px;font-weight:800;line-height:1}
.dcard small{display:block;font-size:12.5px;color:var(--muted);margin:6px 0 16px}
.dcard .meta{display:flex;gap:5px;flex-wrap:wrap}
.dcard.new{display:grid;place-items:center;align-content:center;gap:8px;min-height:140px;color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);border:0}
.dcard.new:hover{color:#fff;background:var(--well);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.4)}
.dcard.new b{font-family:var(--font);font-stretch:100%;font-size:15px;font-weight:600}
.dcard.new small{font-size:13px;margin:0}

.catgrid{display:flex;flex-wrap:wrap;gap:6px}
.vtable{display:flex;flex-direction:column;max-height:430px;overflow-y:auto;margin-top:12px}
.vrow{position:relative;flex:none;display:grid;grid-template-columns:28px 1fr 140px 120px 130px;align-items:center;gap:12px;padding:9px 12px;border-radius:12px}
.vrow + .vrow{margin-top:2px}
.vrow.on{background:rgba(255,255,255,.04)}
.vrow b{font-size:14px;font-weight:600}
.vrow small{display:block;font-size:12px;color:var(--muted)}
.vrow .base{font-size:13px;color:var(--muted)}
.vrow .inp{height:34px;padding:0 10px;border-radius:10px}
.vrow.st{grid-template-columns:70px 1fr 60px 130px 190px 110px}
.vrow.ord{grid-template-columns:1fr 140px 150px 190px}
.vhead{display:grid;grid-template-columns:70px 1fr 60px 130px 190px 110px;gap:12px;padding:0 12px 6px;font-size:12.5px;color:var(--faint)}
.tick{position:relative;width:20px;height:20px;border:0;border-radius:6px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tick.on{background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.45)}
.tick.on::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.toolbar{display:flex;gap:8px;align-items:center}
.toolbar .inp{max-width:300px}
.gtagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.gopt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:11px;text-align:left;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);font-size:13px;color:var(--muted)}
.gopt i{width:20px;height:20px;flex:none;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gopt.on{color:#fff;background:linear-gradient(90deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.05));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4)}
.palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pal{position:relative;width:42px;height:42px;border:0;border-radius:11px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.pal:hover::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:20px}

.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.icard{padding:15px 16px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.icard > span:first-child,.kchip span{display:block;font-size:13px;color:var(--muted)}
.icard b{display:block;font-family:var(--hud);font-stretch:80%;font-size:22px;font-weight:800;margin:3px 0 9px}
.icard.none b{color:var(--faint)}
table.sales{width:100%;border-collapse:collapse}
.sales th{text-align:left;padding:0 10px 8px;font-size:12.5px;font-weight:500;color:var(--faint)}
.sales td{padding:11px 10px;font-size:13.5px;border-top:1px solid var(--hair)}
.sales td.m{color:var(--text-2)}
.kchips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kchip{flex:none;padding:16px 18px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.kchip b{display:block;margin-top:4px;font-family:var(--hud);font-stretch:80%;font-size:32px;font-weight:800;line-height:1}
.kchip.warn b{color:#fcd34d}

.cols2{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:start}
.cols2.eq{grid-template-columns:1fr 1fr}
.plist2{display:flex;flex-direction:column;gap:3px;max-height:330px;overflow-y:auto}
.prow2{position:relative;flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:14px;text-align:left;background:transparent}
.prow2:hover{background:rgba(255,255,255,.04)}
.prow2.on{background:linear-gradient(90deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
.prow2 b{font-size:14.5px;font-weight:600}
.pid{min-width:38px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.07);font-size:12.5px;font-weight:600;color:var(--text-2)}
.sellcard{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}
.sellcard small{font-size:12.5px;color:var(--muted)}
.sellcard b{display:block;font-family:var(--hud);font-stretch:80%;font-size:26px;font-weight:800;line-height:1}
.sellcard .p{font-family:var(--hud);font-stretch:82%;font-size:20px;font-weight:700;margin-top:4px}
.vthumb.big{width:150px;height:86px}
.vthumb.sm{width:72px;height:42px;border-radius:10px}
.sellbar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.banner-warn{flex:none;display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:14px;font-size:13.5px;color:#fcd34d;background:rgba(var(--amber),.12)}
.qty{font-family:var(--hud);font-stretch:80%;font-size:24px;font-weight:800}
.qty.out{color:rgb(var(--red))}
.margin{font-size:13px;font-weight:600;color:rgb(var(--green))}
.margin.neg,.neg{color:rgb(var(--red))!important}
.pos{color:rgb(var(--green))!important}
.inline2{display:flex;gap:8px;align-items:center}
.inline2 .inp{height:34px;padding:0 10px;max-width:120px;border-radius:10px}
.dot2{width:9px;height:9px;flex:none;border-radius:50%;background:rgba(255,255,255,.15)}
.dot2.on{background:var(--muted)}
.dot2.duty{background:rgb(var(--green));box-shadow:0 0 8px rgba(var(--green),.7)}
.swdot{display:inline-block;width:13px;height:13px;margin-left:6px;vertical-align:-2px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

.period{display:flex;width:max-content;margin-left:auto;gap:2px;padding:4px;border-radius:12px;background:rgba(0,0,0,.3)}
.period button{height:30px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;font-weight:500}
.period button:hover{color:var(--text)}
.period button.on{color:#fff;background:rgba(255,255,255,.1)}
.chart{position:relative}
.bars{display:block;width:100%;height:230px;overflow:visible}
.bars .gl{stroke:rgba(255,255,255,.06);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.bars .gt{fill:var(--faint);font-family:var(--font);font-size:11px}
.bars .bar path{fill:var(--accent);opacity:.6;transition:opacity .1s}
.bars .bar.hover path{opacity:1;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.6))}
.chart .tip{position:absolute;pointer-events:none;padding:8px 11px;border-radius:11px;font-size:12.5px;color:var(--text);white-space:nowrap;background:#1d1f25;box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.hb{display:grid;grid-template-columns:140px 1fr 150px;gap:12px;align-items:center;padding:7px 0}
.hb span{font-size:14px;color:#c9cdd3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbt{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.hbt i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--accent));box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}
.hb b{text-align:right;font-size:13px;font-weight:600;color:var(--text-2)}

.mcard.fin{width:600px;padding:0;text-align:left}
.fin-scroll{max-height:84vh;overflow-y:auto;padding:24px 24px 24px}
.fin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-right:4px}
.fin-head h3{text-align:left}
.fin-row{position:relative;padding:15px 16px;margin-bottom:8px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--hair)}
.fin-row.late{box-shadow:inset 0 0 0 1px rgba(var(--red),.45);background:rgba(var(--red),.06)}
.fin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fin-top b{display:block;font-family:var(--hud);font-stretch:80%;font-size:22px;font-weight:800;line-height:1}
.fin-top span{font-size:12.5px;color:var(--muted)}
.fin-top em{font-style:normal;font-family:var(--hud);font-stretch:82%;font-size:20px;font-weight:700}
.fin-bar{height:6px;border-radius:4px;margin:12px 0 8px;background:rgba(255,255,255,.08);overflow:hidden}
.fin-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--accent))}
.fin-meta{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.fin-row .btnset{justify-content:flex-start}
#finance{z-index:85}

.orderbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.orderall{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;border-radius:14px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px var(--hair)}
.offer .was{font-size:inherit;margin-right:4px}
.badge.raw{text-transform:none}.badge.raw::first-letter{text-transform:none}
.demo-car{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.demo-car.in{opacity:1;transform:none}
.demo-car.none{visibility:hidden}
.demo-car img{width:min(70%,640px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transition:transform .35s cubic-bezier(.2,.7,.2,1);-webkit-user-drag:none;user-select:none}
.demo-car i{width:min(60%,620px);height:40px;margin-top:-34px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
.demo-car small{margin-top:26px;font-size:13px;color:var(--muted);opacity:.75}