:root{--bottom:66px;--line:rgba(255,255,255,.14);--glass:rgba(4,6,10,.58)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020307;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}
.stage{position:fixed;inset:0 0 var(--bottom) 0;overflow:hidden;background:radial-gradient(circle at 50% 43%,rgba(97,45,124,.23),rgba(3,5,10,.97) 60%,#020307 100%)}
.ambient{position:absolute;inset:-18%;background:radial-gradient(circle at 22% 22%,rgba(52,88,152,.17),transparent 22%),radial-gradient(circle at 79% 23%,rgba(135,54,145,.14),transparent 22%),radial-gradient(circle at 50% 90%,rgba(153,98,39,.12),transparent 30%);filter:blur(30px);transition:.35s ease}
.utilities{position:fixed;z-index:130;top:max(10px,env(safe-area-inset-top));right:10px;display:flex;gap:5px}
.utilities button,.compact-trigger button,.module-stack button,.warehouse button,#backCanvas,.business-actions button{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px)}
.utilities button{border-radius:999px;padding:8px 11px;font-size:9.5px}
.nana-layer{position:absolute;inset:0;z-index:10;pointer-events:none}
.nana-hero{position:absolute;left:50%;bottom:-1.5%;transform:translateX(-50%);height:99%;max-width:72vw;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 36px 60px rgba(0,0,0,.62))}
.brand-neutralizer{position:absolute;z-index:20;left:50%;bottom:15.4%;transform:translateX(-50%);min-width:112px;height:25px;display:grid;place-items:center;padding:0 16px;border-radius:7px;background:rgba(5,7,10,.86);backdrop-filter:blur(7px);font-size:9px;font-weight:800;letter-spacing:.18em;color:#d7dae0}
.nana-caption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:grid;text-align:center;gap:1px;padding:6px 11px;border-radius:999px;background:rgba(4,6,10,.35);backdrop-filter:blur(14px)}
.nana-caption small{font-size:7.5px;letter-spacing:.16em;color:#cac3d0}.nana-caption strong{font-size:12px}
.compact-trigger{position:absolute;z-index:45;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px}
.compact-trigger button{border-radius:999px;padding:7px 12px;font-size:9px}
.module-stack{position:absolute;z-index:60;left:50%;bottom:50px;transform:translateX(-50%);max-width:min(760px,92vw);display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:7px;border-radius:18px;background:rgba(3,5,9,.42);backdrop-filter:blur(18px)}
.module-stack[hidden]{display:none}
.module-stack button{border-radius:999px;padding:6px 10px;font-size:8.5px;white-space:nowrap}.module-stack .ico{margin-right:5px;opacity:.85}

.business-surface{position:absolute;z-index:50;inset:0;padding:clamp(72px,8vh,100px) clamp(24px,5vw,80px) 34px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:18px;background:linear-gradient(180deg,#080a0f,#05070b)}
.business-surface[hidden]{display:none}
.business-head{display:grid;gap:5px;max-width:760px}.business-head small{font-size:9px;letter-spacing:.18em;color:#9ba4b2}.business-head strong{font-size:clamp(28px,4vw,52px);font-weight:760}.business-head span{font-size:12px;color:#aeb6c2}
.business-actions{display:flex;gap:7px;flex-wrap:wrap}.business-actions button{border-radius:999px;padding:8px 12px;font-size:9px}
.business-actions button.active{background:#f4f5f7;color:#090b0f}
.business-canvas{min-height:0;border-top:1px solid var(--line);padding-top:22px;display:grid;align-content:start;gap:7px}.business-canvas strong{font-size:18px}.business-canvas span{font-size:11px;color:#9da6b4}

.warehouse{position:absolute;z-index:80;inset:7% 4% 5%;border:1px solid var(--line);border-radius:22px;background:rgba(5,7,12,.86);backdrop-filter:blur(26px);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.warehouse[hidden]{display:none}.warehouse-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line)}
.warehouse-head>div{display:grid;gap:2px}.warehouse-head small{font-size:8px;letter-spacing:.15em;color:#aeb6c3}.warehouse-head strong{font-size:15px}.warehouse-head button{border-radius:999px;padding:6px 10px;font-size:8.5px}
.warehouse-cats{display:flex;gap:5px;padding:8px 10px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.warehouse-cats::-webkit-scrollbar{display:none}
.warehouse-cats button{border-radius:999px;padding:6px 9px;font-size:8px;white-space:nowrap}.warehouse-cats button.active{background:#f5f5f8;color:#080a0f}
.warehouse-grid{overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:7px}
.asset{min-height:74px;padding:9px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);display:grid;align-content:space-between;gap:7px}
.asset small{font-size:7px;color:#98a2b1;letter-spacing:.08em}.asset strong{font-size:10px;line-height:1.2}.asset button{justify-self:start;border-radius:999px;padding:5px 8px;font-size:7.5px}

.canvas{position:absolute;z-index:100;inset:0;background:#04060a}.canvas[hidden]{display:none}.canvas iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#080a10}
#backCanvas{position:absolute;z-index:110;left:9px;top:9px;border-radius:999px;padding:7px 10px;font-size:8.5px}

.primary{position:fixed;z-index:130;left:0;right:0;bottom:0;height:var(--bottom);display:flex;gap:4px;padding:6px 8px max(6px,env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);background:rgba(3,5,9,.92);backdrop-filter:blur(24px)}
.primary::-webkit-scrollbar{display:none}.primary button{min-width:78px;flex:1 0 78px;border:0;border-radius:13px;background:transparent;color:#9ea7b6;font-size:9px;font-weight:750}.primary button.active{background:rgba(255,255,255,.10);color:#fff}

@media(max-width:820px){
 :root{--bottom:61px}
 .utilities{right:6px;top:max(6px,env(safe-area-inset-top));gap:3px}.utilities button{padding:7px 8px;font-size:8px}
 .nana-hero{height:92%;max-width:95vw}.brand-neutralizer{bottom:14%;min-width:86px;height:20px;font-size:7px}.nana-caption{bottom:8px}
 .compact-trigger{bottom:8px}.compact-trigger button{padding:6px 9px;font-size:8px}
 .module-stack{bottom:42px;max-width:95vw;padding:5px}.module-stack button{font-size:7.5px;padding:5px 8px}
 .business-surface{padding:62px 16px 22px;gap:13px}.business-head strong{font-size:30px}.business-actions{gap:5px}.business-actions button{padding:7px 9px;font-size:8px}
 .warehouse{inset:9% 2% 3%;border-radius:17px}.warehouse-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:7px}
 .primary button{min-width:67px;flex-basis:67px;font-size:8px}
}