@font-face{font-family:Inter;src:local('Inter');font-display:swap}
:root{color-scheme:dark;--surface:#111319;--surface-container-low:#191b22;--surface-container:#1e1f26;--surface-container-high:#282a30;--on-surface:#e2e2eb;--primary:#ffdaa8;--primary-container:#f3ba63;--secondary:#d0bcff;--tertiary:#6cf9bb;--error:#ffb4ab;--canvas:#0f1117;--card:#171923;--layer:#232736;--gold:#f3ba63;--gold-hover:#e2a03f;--violet:#8b5cf6;--green:#10b981;--text:#f8fafc;--muted:#94a3b8;--border:rgba(255,255,255,.08);--font:Inter,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;--mono:'JetBrains Mono','Cascadia Code',Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.65 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;object-fit:cover}
button,select{color:inherit}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3{letter-spacing:-.02em;line-height:1.5}
h1{font-size:32px}
h2{font-size:22px}
h3{font-size:18px}
p{line-height:1.8}
svg{flex-shrink:0;vertical-align:middle}
button svg,a svg{pointer-events:none}
::selection{background:#8b5cf64d}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
input,select,textarea{min-width:0;background:#10121a;border:1px solid #343744;border-radius:8px;color:var(--text);padding:10px 13px}
input::placeholder,textarea::placeholder{color:#7c8498}
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
input[type=range]{accent-color:var(--gold)}
input[type=color]{padding:3px}
select{cursor:pointer}
dialog{color:var(--text);background:var(--card);border:1px solid rgba(243,186,99,.3);border-radius:16px;padding:28px;box-shadow:0 12px 40px -10px #f3ba6326;max-width:calc(100vw - 32px);max-height:90dvh}
dialog::backdrop{background:#080a11bc;backdrop-filter:blur(8px)}
dialog h2{margin-bottom:16px}
dialog p{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-50px;left:20px;z-index:100;background:var(--gold);color:var(--canvas);padding:10px 18px}
.skip-link:focus{top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:999px;padding:10px 20px;border:1px solid var(--border);background:var(--layer);color:var(--text);font-weight:600;line-height:1.5;transition:background .18s,transform .18s}
.btn:hover{background:#303443}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(110deg,#f3ba63,#e2a03f);color:#17130d;border:0}
.btn-primary:hover{background:var(--gold)}
.btn-ai{background:var(--violet);color:#fff;border:0;box-shadow:0 4px 24px #8b5cf628}
.btn-ai:hover{background:#986cf8}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn-ghost:hover{background:#ffffff08;color:var(--text)}
.card{background:rgba(23,25,35,.75);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(16px)}
.muted{color:var(--muted)}
.eyebrow{font:11px/1.5 var(--mono);letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11px;line-height:1.5;background:#ffffff09;color:var(--muted)}
.badge-gold{background:#f3ba6310;color:var(--gold)}
.badge-green{background:#10b98115;color:#6cf9bb}
.badge-violet{background:#8b5cf617;color:#c4abff}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 20px}
.section-heading h2{margin:0}
.empty-state{text-align:center;padding:68px 24px;color:var(--muted)}
.empty-state h2{color:var(--text);margin:12px 0}
.empty-state .btn{margin-top:14px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field>span,.field>label{color:var(--muted);font-size:13px}
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#12141c;border-right:1px solid var(--border);padding:31px 20px 20px;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:650;letter-spacing:1.4px;line-height:1.45}
.brand-mark{position:relative;display:grid;place-items:center;height:42px;width:42px;border:1px solid #f3ba6345;border-radius:12px;font-family:Georgia,serif;font-size:28px;font-weight:500;color:var(--gold);background:linear-gradient(135deg,#f3ba6310,#f3ba6300)}
.brand-mark>span{position:absolute;right:5px;top:2px;font-size:13px}
.brand small{display:block;font:7px/1.8 var(--mono);letter-spacing:1.7px;color:#858794;margin-top:4px}
.nav-section-label{font-size:10px;letter-spacing:2px;color:#737b8d;margin:42px 14px 14px}
.primary-nav{display:grid;gap:7px}
.nav-item{display:flex;align-items:center;gap:12px;color:#8f98ac;min-height:48px;padding:12px 15px;border-radius:10px;font-size:13px;transition:.2s}
.nav-item:hover{background:#ffffff05;color:#fff}
.nav-item.active{color:var(--gold);background:linear-gradient(100deg,#f3ba631b,#f3ba6309);border:1px solid #f3ba6315}
.nav-new{font:8px var(--mono);letter-spacing:.05em;margin-left:auto;padding:3px 4px;color:var(--gold);background:#f3ba6319;border-radius:4px}
.sidebar-ai{margin-top:35px;background:radial-gradient(ellipse at top left,#8b5cf61b,transparent 80%),#191b26;border:1px solid #8b5cf622;padding:20px;border-radius:12px}
.ai-icon{display:grid;place-items:center;color:#b99afc;width:38px;height:38px;background:#8b5cf61a;border-radius:10px;margin-bottom:12px}
.sidebar-ai strong{font-size:13px;display:block;font-weight:500}
.sidebar-ai p{font-size:11px;color:#8d96a9;margin:7px 0 16px}
.sidebar-ai>span:last-child{color:#c4abff;font-size:11px;display:flex;justify-content:space-between;align-items:center}
.sidebar-bottom{margin-top:auto;padding-top:26px}
.sidebar-store{padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;color:var(--gold)}
.sidebar-store strong{display:block;font-size:11px;font-weight:500;color:#c9cbd4}
.sidebar-store small{display:flex;align-items:center;gap:6px;font-size:10px;color:#818d98;margin-top:4px}
.status-dot,.demo-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4bdaa4;flex-shrink:0}
.status-dot.inactive{background:#f6ae67}
.reset-demo{display:flex;align-items:center;gap:7px;padding:18px 0 10px;border:0;background:none;color:#778092;font-size:10px}
.version-label{font:7px/1.5 var(--mono);letter-spacing:1px;color:#4c5669}
.workspace{margin-left:240px;min-height:100dvh;display:flex;flex-direction:column}
.topbar{height:80px;padding:0 40px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border);background:#0f1117ed}
.breadcrumb{display:flex;gap:13px;align-items:center;font-size:11px;white-space:nowrap}
.breadcrumb>span{color:#606c80}
.breadcrumb strong{font-weight:500;color:#bdc2cf}
.role-switch{margin-left:auto;display:flex;background:#181a23;padding:4px;border:1px solid var(--border);border-radius:8px;gap:3px}
.role-switch a{padding:5px 12px;border-radius:5px;font-size:11px;color:#8b95a6;white-space:nowrap}
.role-switch a.selected{background:#303039;color:#ead0a7}
.store-select{display:flex;align-items:center;gap:7px;color:#8d97aa;font-size:11px}
.store-select select{background:none;border:0;padding:5px 0;max-width:152px;color:#c7cbd6;font-size:11px}
.store-select option{background:#171923}
.top-avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid #f3ba632f;background:#f3ba630c;overflow:hidden}
.top-avatar img{width:100%;height:100%}
.main-content{width:100%;max-width:1600px;padding:35px 40px 44px;flex:1;margin:0 auto;outline:none}
.page-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-top:1px solid var(--border);gap:20px;color:#627086;font-size:9px}
.page-footer>span:first-child{font:9px var(--mono);letter-spacing:1.3px}
.page-footer>span:nth-child(2){display:flex;align-items:center;gap:7px}
.page-footer button{border:0;background:none;color:#8490a0;font-size:10px;padding:0}
.demo-dot{background:var(--gold)}
.mobile-brand,.mobile-nav{display:none}
.boot-message{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:5px;color:var(--gold)}
.boot-message span{font-size:12px;color:var(--muted);letter-spacing:1px;margin-top:16px}
#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#292d3d;color:#fff;box-shadow:0 8px 32px #0008;border:1px solid #ffffff1f;padding:12px 24px;border-radius:10px;z-index:1000;max-width:calc(100vw - 32px);opacity:0;transition:.2s;pointer-events:none}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.about-dialog{width:500px}
.about-dialog h2{margin:14px 0}
.about-dialog p{font-size:13px}
.about-dialog .btn-primary{margin-top:10px}
.about-close{float:right;padding:6px;min-height:32px;border:0}
.recovery{max-width:640px;margin:20vh auto;padding:32px}
.recovery h1{font-size:24px}
@media(min-width:1700px){.main-content{padding-top:46px}
.topbar{padding-inline:60px}
}
@media(max-width:1200px){.topbar{padding:0 24px;gap:16px}
.breadcrumb{display:none}
.main-content{padding:28px 24px}
.page-footer{padding:20px 24px}
.role-switch{margin-left:0;margin-right:auto}
.store-select select{max-width:125px}
.sidebar{width:220px;padding-inline:16px}
.workspace{margin-left:220px}
}
@media(max-width:850px){.sidebar{width:190px;padding-inline:12px}
.brand{font-size:12px;gap:8px}
.brand small{font-size:6px}
.workspace{margin-left:190px}
.store-select{display:none}
.sidebar-ai{padding:15px}
.main-content{padding:25px 20px}
.page-footer{flex-wrap:wrap;gap:10px}
.page-footer>span:nth-child(2){order:3;width:100%}
}
@media(max-width:650px){.sidebar{display:none}
.workspace{margin-left:0;padding-bottom:72px}
.topbar{height:66px;padding:0 16px;gap:12px;position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
.mobile-brand{display:block;font:28px Georgia,serif;color:var(--gold);position:relative;width:29px;flex-shrink:0}
.mobile-brand span{font-size:12px;position:absolute;top:-2px;right:0}
.role-switch{gap:0;padding:3px;margin-left:auto;margin-right:0}
.role-switch a{padding:5px 10px;font-size:10px}
.top-avatar{width:30px;height:30px}
.main-content{padding:24px 16px 30px}
.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;align-items:center;justify-content:space-around;padding:8px 8px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:#131620f5;backdrop-filter:blur(16px)}
.mobile-nav .nav-item{flex:1;flex-direction:column;gap:3px;font-size:10px;padding:5px 2px;min-height:47px;border:0;background:transparent}
.mobile-nav .nav-item.active{color:var(--gold)}
.mobile-nav .nav-new{display:none}
.mobile-nav svg{height:19px;width:19px}
.page-footer{padding:16px;font-size:8px}
.page-footer>span:nth-child(2){line-height:1.8;font-size:9px}
h1{font-size:28px}
#toast{bottom:90px}
.section-heading{margin-top:24px}
dialog{padding:22px}
.btn{min-height:44px}
.recovery{margin:30px 16px;padding:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Customer pages keep the same phone layout, including on desktop previews. */
body[data-role="customer"]{background:#090b10;--customer-nav-height:calc(66px + env(safe-area-inset-bottom,0px))}
.customer-app{width:100%;max-width:480px;min-height:100dvh;margin:0 auto;background:var(--canvas);box-shadow:0 0 0 1px var(--border)}
.customer-workspace{min-height:100dvh;padding-bottom:var(--customer-nav-height)}
.customer-app .main-content{padding:16px 14px 26px;max-width:none}
.customer-topbar{position:sticky;top:0;z-index:20;height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 0 16px;border-bottom:1px solid var(--border);background:#0f1117f2;backdrop-filter:blur(16px)}
.customer-store-home{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;font-size:15px;font-weight:600}
.customer-store-home>svg{color:var(--gold)}
.customer-store-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-menu-button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:0;background:transparent;color:var(--muted);border-radius:10px}
.customer-menu-button:hover{background:#ffffff08;color:var(--text)}
.customer-bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:var(--customer-nav-height);z-index:30;display:flex;align-items:stretch;justify-content:space-around;padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));background:#131620f5;backdrop-filter:blur(16px);border-top:1px solid var(--border)}
.customer-bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:12px;min-height:50px;padding:4px;background:none;border:0;border-radius:8px}
.customer-bottom-nav .nav-item.active{color:var(--gold)}
.customer-bottom-nav .nav-item svg{width:20px;height:20px}
.customer-menu-dialog{width:min(400px,calc(100vw - 32px));padding:20px;border-radius:16px}
.customer-menu-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.customer-menu-heading h2{font-size:20px;margin:0}
.customer-menu-dialog .field{font-size:12px;color:var(--muted)}
.customer-menu-dialog select{min-height:44px;width:100%;font-size:14px}
.customer-menu-links{display:grid}
.customer-menu-links>a,.customer-menu-links>button{display:flex;align-items:center;gap:12px;background:none;border:0;border-top:1px solid var(--border);padding:14px 4px;min-height:50px;text-align:left;font-size:14px;color:var(--text)}
.customer-menu-links svg{color:var(--muted)}
.customer-menu-links>a>svg:last-child,.customer-menu-links>button>svg:last-child:not(:first-child){margin-left:auto}
body[data-role="customer"] #toast{bottom:calc(var(--customer-nav-height) + 14px);font-size:13px;width:max-content;max-width:min(440px,calc(100vw - 32px))}