:root{--accent:#6f5cff;--accent-soft:#eeeaff;--accent-dark:#4836da;--ink:#172136;--muted:#6f7b91;--canvas:#f4f6fb;--card:#fff;--line:#e4e8f0;--success:#20ad72;--warning:#f49a35;--danger:#ee5d71;--sidebar:#10182b;--sidebar-muted:#93a0b8;--shadow:0 24px 70px rgba(31,42,69,.13)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#eef1f7}
body{margin:0;color:var(--ink);background:radial-gradient(circle at 15% 5%,rgba(111,92,255,.08),transparent 28%),#eef1f7;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body[data-theme=forest]{--accent:#5b52e8;--accent-soft:#efedff;--accent-dark:#3c35b8;--sidebar:#10182b}
body[data-theme=midnight]{--accent:#8257ee;--accent-soft:#f0eaff;--accent-dark:#5e32cb;--sidebar:#111127}
body[data-theme=sunset]{--accent:#e85648;--accent-soft:#fff0ec;--accent-dark:#bc3b31;--sidebar:#2b1820}
button,input,select{font:inherit}
button,a{touch-action:manipulation}
a{text-decoration:none;color:inherit}
.preview-builder{position:sticky;top:0;z-index:30;min-height:76px;padding:12px max(20px,calc((100% - 1500px)/2));display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.94);border-bottom:1px solid #dce1ea;backdrop-filter:blur(16px)}
.builder-brand{display:flex;align-items:center;gap:10px;min-width:215px}.builder-brand>a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent);color:white;font-weight:900;box-shadow:4px 4px 0 var(--accent-soft)}.builder-brand span{display:grid;gap:2px}.builder-brand b{font-size:13px}.builder-brand small{font-size:9px;color:var(--muted)}
.builder-form{display:flex;align-items:end;gap:9px;flex:1}.builder-form label{display:grid;gap:4px;min-width:160px;max-width:245px;flex:1}.builder-form label span{font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.builder-form input{height:38px;border:1px solid #cfd5e0;border-radius:8px;padding:0 11px;outline:none;background:white;color:var(--ink)}.builder-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.builder-form>button{height:38px;border:0;border-radius:8px;padding:0 14px;background:var(--ink);color:#fff;font-size:10px;font-weight:800;cursor:pointer}
.builder-actions{display:flex;align-items:center;gap:14px}.theme-switcher{display:flex;align-items:center;gap:6px}.theme-switcher button{width:25px;height:25px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #cfd5e0;padding:3px;background:white;cursor:pointer}.theme-switcher button.active{box-shadow:0 0 0 2px var(--ink)}.theme-switcher i{display:block;width:100%;height:100%;border-radius:50%}.theme-switcher button:nth-child(1) i{background:linear-gradient(135deg,#10182b 50%,#5b52e8 50%)}.theme-switcher button:nth-child(2) i{background:linear-gradient(135deg,#111127 50%,#8257ee 50%)}.theme-switcher button:nth-child(3) i{background:linear-gradient(135deg,#2b1820 50%,#e85648 50%)}.use-design{padding:11px 14px;border-radius:8px;background:var(--accent);color:white;font-size:10px;font-weight:900;white-space:nowrap}
.preview-stage{width:min(1500px,calc(100% - 34px));margin:22px auto 46px}.preview-topline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:12px;color:var(--muted);font-size:10px}.preview-topline>div:first-child{display:flex;align-items:center;gap:6px}.preview-topline b{color:var(--ink)}.live-dot{width:8px;height:8px;border-radius:50%;background:#23b373;box-shadow:0 0 0 5px rgba(35,179,115,.12)}.preview-plan{justify-self:end;border:1px solid #cfd5e0;background:white;border-radius:999px;padding:6px 9px;font-weight:800}.preview-tabs{display:flex;background:#dfe3ec;border-radius:9px;padding:3px}.preview-tabs button{border:0;border-radius:7px;background:transparent;padding:8px 15px;color:#5f6b80;font-size:10px;font-weight:900;cursor:pointer}.preview-tabs button.active{background:white;color:var(--ink);box-shadow:0 3px 12px rgba(21,31,54,.09)}
.browser-frame{overflow:hidden;border:1px solid #ccd3df;border-radius:14px;background:var(--canvas);box-shadow:var(--shadow)}.browser-bar{height:48px;background:#fff;display:grid;grid-template-columns:120px minmax(200px,520px) 1fr;align-items:center;gap:16px;padding:0 18px;border-bottom:1px solid var(--line)}.browser-dots{display:flex;gap:6px}.browser-dots i{width:9px;height:9px;border-radius:50%;background:#ff6a67}.browser-dots i:nth-child(2){background:#f6be4f}.browser-dots i:nth-child(3){background:#56c876}.address-bar{height:30px;display:flex;align-items:center;gap:7px;background:#f1f3f7;border-radius:7px;padding:0 12px;color:#728097;font-size:10px}.browser-live{justify-self:end;color:#21a86e;font-size:8px;font-weight:900;letter-spacing:.12em}
.panel-app{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:820px;background:var(--canvas)}
.panel-sidebar,.admin-sidebar{background:var(--sidebar);color:#fff;padding:22px 15px;display:flex;flex-direction:column}.panel-logo{display:flex;align-items:center;gap:10px;padding:0 7px 28px}.panel-logo>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--accent);font-size:11px;font-weight:900}.panel-logo>b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-logo b i{display:block;font-style:normal}.panel-logo b small{display:block;color:var(--sidebar-muted);font-size:7px;letter-spacing:.15em;margin-top:3px}
.panel-sidebar nav,.admin-sidebar nav{display:grid;gap:4px}.panel-sidebar nav a,.admin-sidebar nav a{display:flex;align-items:center;gap:10px;border-radius:8px;padding:11px;color:var(--sidebar-muted);font-size:10px;font-weight:700}.panel-sidebar nav a:hover,.admin-sidebar nav a:hover{background:rgba(255,255,255,.05);color:#fff}.panel-sidebar nav a.active,.admin-sidebar nav a.active{background:var(--accent);color:#fff}.panel-sidebar nav a span,.admin-sidebar nav a span{width:19px;text-align:center;font-size:14px}.admin-sidebar nav a>b{margin-left:auto;padding:3px 6px;border-radius:20px;background:rgba(255,255,255,.1);font-size:7px}.sidebar-help{margin-top:auto;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);display:grid;gap:5px}.sidebar-help small{color:#91a0b7;font-size:7px;letter-spacing:.1em}.sidebar-help strong{font-size:11px}.sidebar-help button{margin-top:7px;border:0;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;padding:8px;font-size:8px;cursor:pointer}.sidebar-user{display:flex;align-items:center;gap:9px;border-top:1px solid rgba(255,255,255,.08);margin-top:14px;padding:16px 5px 0}.sidebar-user>span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#27324a;font-size:8px;font-weight:900}.sidebar-user div{display:grid;gap:2px;min-width:0}.sidebar-user b{font-size:9px}.sidebar-user small{font-size:7px;color:var(--sidebar-muted)}.sidebar-user i{margin-left:auto;color:var(--sidebar-muted)}
.panel-workspace,.admin-workspace{min-width:0}.panel-topbar,.admin-topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:white;border-bottom:1px solid var(--line)}.mobile-menu{display:none}.top-search{display:flex;align-items:center;gap:8px;width:min(360px,45%);height:35px;padding:0 12px;border-radius:8px;background:#f4f6f9;color:#8792a4;font-size:9px}.top-actions{display:flex;align-items:center;gap:8px}.top-actions button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:white;color:#718096;cursor:pointer}.top-actions strong{padding:9px 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);font-size:10px}.workspace-content,.admin-content{padding:27px}.welcome-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.welcome-row small,.admin-card-head small,.admin-topbar small{color:var(--accent);font-size:7px;font-weight:900;letter-spacing:.15em}.welcome-row h1,.admin-heading h1{font-size:28px;letter-spacing:-.04em;margin:6px 0}.welcome-row p,.admin-heading p{margin:0;color:var(--muted);font-size:10px}.status-pill{display:flex;align-items:center;gap:7px;border:1px solid #dfe5ed;border-radius:999px;background:white;padding:8px 11px;color:var(--muted);font-size:8px}.status-pill span{width:7px;height:7px;border-radius:50%;background:var(--success)}
.customer-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:17px}.customer-stats article,.admin-stats article{display:flex;align-items:center;gap:13px;background:white;border:1px solid var(--line);border-radius:11px;padding:17px}.stat-icon,.admin-stats article>span{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;font-size:16px;font-weight:800}.purple{background:#eeeaff;color:#6b54e7}.green{background:#e4f7ef;color:#199b68}.orange{background:#fff0e3;color:#e87921}.blue{background:#e6f1ff;color:#3b7bd9}.customer-stats article div,.admin-stats article div{display:grid;gap:3px}.customer-stats small,.admin-stats small{color:#8a95a6;font-size:7px;font-weight:900;letter-spacing:.09em}.customer-stats strong,.admin-stats strong{font-size:18px}.customer-stats em,.admin-stats em{font-style:normal;color:var(--success);font-size:7px}
.order-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);gap:16px}.order-card,.news-card,.chart-card,.quick-card,.recent-card{background:white;border:1px solid var(--line);border-radius:12px;padding:20px}.card-title,.admin-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.card-title>div,.admin-card-head>div{display:grid;gap:4px}.card-title span,.admin-card-head small{font-size:7px;color:var(--accent);font-weight:900;letter-spacing:.13em}.card-title h2,.admin-card-head h2{font-size:15px;margin:0}.card-title>button,.admin-card-head>button{border:0;background:transparent;color:var(--accent);font-size:8px;font-weight:900;cursor:pointer}.card-title>b{padding:4px 7px;border-radius:20px;background:var(--accent-soft);color:var(--accent-dark);font-size:7px}.demo-order-form{display:grid;gap:14px}.demo-order-form label{display:grid;gap:7px}.demo-order-form label>span{font-size:8px;color:#566276;font-weight:800}.demo-order-form select,.demo-order-form input{width:100%;height:39px;border:1px solid #d7dce5;border-radius:7px;background:white;padding:0 11px;color:#354158;font-size:9px;outline:none}.demo-order-form select:focus,.demo-order-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.platform-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.platform-row button{border:1px solid #dce1e9;background:#fff;border-radius:7px;padding:9px 5px;color:#7b8799;font-size:8px;cursor:pointer}.platform-row button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:900}.service-note{display:flex;flex-wrap:wrap;gap:6px}.service-note b,.service-note span{padding:4px 6px;border-radius:4px;background:#edf8f4;color:#25855f;font-size:7px}.service-note span{background:#f2f3f7;color:#697489}.two-fields{display:grid;grid-template-columns:1.6fr .6fr;gap:10px}.order-total{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:8px;background:#f6f7fa}.order-total span{display:grid;gap:3px;font-size:9px;font-weight:800}.order-total small{font-size:7px;font-weight:400;color:var(--muted)}.order-total strong{font-size:20px;color:var(--accent)}.place-order{height:42px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 9px 20px rgba(111,92,255,.18)}
.customer-side{display:grid;gap:14px;align-content:start}.news-card article{display:flex;gap:9px;padding:11px 0;border-top:1px solid var(--line)}.news-card article>i{width:7px;height:7px;border-radius:50%;margin-top:3px;background:var(--success);flex:0 0 7px}.news-card article>i.amber-dot{background:var(--warning)}.news-card article>i.blue-dot{background:#4b8ce8}.news-card article div{display:grid;gap:3px}.news-card article strong{font-size:9px}.news-card article p{font-size:8px;color:var(--muted);margin:0;line-height:1.4}.news-card article small{font-size:6px;color:#a1a9b7}.support-banner{display:flex;gap:13px;padding:17px;border-radius:12px;background:linear-gradient(135deg,var(--sidebar),#26314d);color:#fff}.support-banner>span{width:42px;height:42px;border-radius:12px;background:var(--accent);display:grid;place-items:center;font-size:10px;font-weight:900}.support-banner div{display:grid;gap:4px}.support-banner small{font-size:6px;letter-spacing:.12em;color:#9da9bc}.support-banner h3{font-size:13px;margin:0}.support-banner p{font-size:8px;color:#b2bbca;margin:0}.support-banner button{justify-self:start;border:0;background:transparent;color:#fff;padding:5px 0 0;font-size:7px;font-weight:900;cursor:pointer}
.admin-sidebar{padding-bottom:18px}.admin-nav-label{margin:21px 11px 7px;color:#657189;font-size:6px;font-weight:900;letter-spacing:.14em}.view-store{margin-top:auto;border:1px solid rgba(255,255,255,.13);border-radius:8px;padding:11px;text-align:center;color:#fff;font-size:8px;font-weight:900}.admin-topbar>div{display:grid;gap:4px}.admin-topbar>div:first-child strong{font-size:11px}.admin-topbar>div:last-child{display:flex;align-items:center;gap:8px}.admin-topbar button{border:1px solid var(--line);border-radius:7px;background:white;padding:8px 10px;color:#637087;font-size:8px;cursor:pointer}.admin-topbar button b{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;margin-left:3px;background:var(--danger);color:white;font-size:6px}.admin-topbar>div:last-child>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:#fff;font-size:8px;font-weight:900}.admin-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-heading>div:last-child{display:flex;gap:8px}.ghost-action,.solid-action{height:34px;border-radius:7px;padding:0 12px;font-size:8px;font-weight:900;cursor:pointer}.ghost-action{border:1px solid #d4dae4;background:white;color:#5b677a}.solid-action{border:0;background:var(--accent);color:#fff}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:15px}.admin-stats article{justify-content:space-between}.admin-stats article div{min-width:0}.admin-main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr);gap:15px;margin-bottom:15px}.chart-card,.quick-card{min-height:285px}.admin-card-head select{border:1px solid var(--line);border-radius:7px;background:white;padding:7px 9px;color:var(--muted);font-size:8px}.chart-summary{display:flex;align-items:baseline;gap:8px}.chart-summary strong{font-size:21px}.chart-summary span{font-size:7px;color:var(--success)}.css-chart{height:156px;margin:23px 5px 0;display:flex;align-items:end;gap:13px;border-bottom:1px solid #dfe4ec;background:repeating-linear-gradient(to bottom,transparent 0,transparent 38px,#eef1f5 39px)}.css-chart i{position:relative;flex:1;max-width:42px;border-radius:6px 6px 0 0;background:linear-gradient(to top,var(--accent),#9c8cff);box-shadow:inset 0 -8px 16px rgba(44,31,157,.16)}.css-chart i:nth-child(2n){opacity:.68}.css-chart b{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-style:normal;color:#8993a4;font-size:6px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-grid button{min-height:92px;border:1px solid var(--line);border-radius:9px;background:#fafbfc;display:grid;justify-items:start;align-content:center;gap:4px;padding:12px;text-align:left;color:var(--ink);cursor:pointer}.quick-grid button:hover{border-color:var(--accent);background:var(--accent-soft)}.quick-grid button span{font-size:16px;color:var(--accent)}.quick-grid button b{font-size:8px}.quick-grid button small{font-size:6px;color:var(--muted)}.recent-card{padding-bottom:10px}.orders-table{overflow:auto}.order-row{min-width:760px;display:grid;grid-template-columns:.65fr 1fr 1.8fr .8fr .7fr .8fr;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line);font-size:8px;color:#5f6b7f}.order-row b,.order-row strong{color:var(--ink)}.order-row em{font-style:normal;color:var(--success);font-weight:800}.order-head{border-top:0;padding-top:0;color:#929aaa;font-size:6px;font-weight:900;letter-spacing:.08em}.status{justify-self:start;padding:5px 7px;border-radius:20px;font-style:normal;font-size:6px;font-weight:900}.status.processing{background:#fff1df;color:#b56a17}.status.complete{background:#e4f7ef;color:#16885c}.status.pending{background:#eeeaff;color:#634dde}
.preview-disclaimer{text-align:center;color:#808b9c;font-size:9px;margin:13px 0 0}.preview-toast{position:fixed;right:22px;bottom:22px;z-index:40;max-width:340px;padding:13px 16px;border-radius:9px;background:var(--ink);color:#fff;font-size:9px;font-weight:700;box-shadow:0 16px 35px rgba(12,22,44,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.preview-toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.preview-builder{flex-wrap:wrap}.builder-brand{min-width:190px}.builder-form{order:3;flex-basis:100%}.preview-stage{width:min(1500px,calc(100% - 20px))}.panel-app{grid-template-columns:76px minmax(0,1fr)}.panel-sidebar,.admin-sidebar{padding-left:10px;padding-right:10px}.panel-logo{justify-content:center;padding-left:0;padding-right:0}.panel-logo>b,.panel-sidebar nav a:not(.active){font-size:0}.panel-sidebar nav a,.admin-sidebar nav a{justify-content:center}.panel-sidebar nav a{font-size:0}.panel-sidebar nav a span,.admin-sidebar nav a span{font-size:15px}.admin-sidebar nav a{font-size:0}.admin-sidebar nav a>b,.sidebar-help,.sidebar-user div,.sidebar-user i,.admin-nav-label{display:none}.sidebar-user{justify-content:center}.view-store{font-size:0}.view-store:after{content:'↗';font-size:15px}.admin-stats{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.preview-topline{grid-template-columns:1fr auto}.preview-tabs{grid-column:1/-1;grid-row:2;margin-top:10px;justify-content:center}.preview-plan{grid-column:2}.panel-app{grid-template-columns:1fr}.panel-sidebar,.admin-sidebar{display:none}.workspace-content,.admin-content{padding:18px}.mobile-menu{display:block;border:0;background:transparent}.top-search{display:none}.customer-stats,.admin-stats{grid-template-columns:1fr 1fr}.order-layout,.admin-main-grid{grid-template-columns:1fr}.chart-card,.quick-card{min-height:auto}.browser-bar{grid-template-columns:70px 1fr}.browser-live{display:none}.admin-heading{align-items:flex-start;flex-direction:column}.platform-row{grid-template-columns:1fr 1fr}.customer-side{grid-template-columns:1fr 1fr}.preview-builder{position:relative}.builder-actions{margin-left:auto}}
@media(max-width:580px){.preview-builder{padding:12px}.builder-brand{min-width:0}.builder-brand small{display:none}.use-design{font-size:0}.use-design:after{content:'Use →';font-size:9px}.builder-form{display:grid;grid-template-columns:1fr 1fr}.builder-form>button{grid-column:1/-1}.preview-stage{width:100%;margin-top:0}.preview-topline{padding:10px}.browser-frame{border-radius:0;border-left:0;border-right:0}.browser-bar{height:42px}.address-bar{min-width:0}.workspace-content,.admin-content{padding:13px}.welcome-row{align-items:flex-start}.welcome-row h1,.admin-heading h1{font-size:23px}.status-pill{display:none}.customer-stats,.admin-stats{grid-template-columns:1fr}.customer-stats article:nth-child(3){display:none}.two-fields,.customer-side{grid-template-columns:1fr}.order-card,.news-card,.chart-card,.quick-card,.recent-card{padding:15px}.top-actions button{display:none}.preview-disclaimer{padding:0 14px}.css-chart{gap:7px}.preview-toast{right:12px;left:12px;bottom:12px}.admin-heading>div:last-child{width:100%}.admin-heading button{flex:1}}