:root{--navy-950:#0b1220;--navy-900:#101a2e;--navy-800:#182641;--brand:#4f46e5;--brand-strong:#4338ca;--brand-soft:#eef2ff;--cyan:#0891b2;--success:#0f9f6e;--warning:#d97706;--danger:#dc2626;--canvas:#f4f6fa;--surface:#fff;--surface-soft:#f8fafc;--ink:#172033;--muted:#667085;--subtle:#98a2b3;--line:#e5e9f2;--shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 4px rgba(16,24,40,.03);--shadow-md:0 12px 30px rgba(15,23,42,.07);--radius:14px;--radius-lg:18px;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
html{background:var(--canvas)}body{background:var(--canvas);color:var(--ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}h1,h2,h3,.brand{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
.shell{grid-template-columns:264px minmax(0,1fr);min-height:100vh}.sidebar{width:264px;padding:26px 18px 20px;background:linear-gradient(180deg,var(--navy-950),#111c31 62%,#15233b);border:0;box-shadow:10px 0 38px rgba(15,23,42,.12);z-index:10}.brand{padding:2px 10px 27px;color:#fff;gap:13px}.brand .mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#766eff,#4f46e5);box-shadow:0 10px 25px rgba(79,70,229,.34);font-size:25px}.brand b{font-size:19px;letter-spacing:-.4px}.brand small{color:#a8b3c7;font-size:9px;letter-spacing:2.4px}.nav-label{color:#65748f;font-size:9px;letter-spacing:1.8px;padding:10px 14px 11px}.nav{gap:4px}.nav button{position:relative;min-height:44px;padding:11px 13px;border-radius:10px;color:#aebbd0;font-size:12.5px;font-weight:500;gap:12px;transition:background .16s,color .16s,transform .16s;box-shadow:none}.nav button:hover{background:rgba(255,255,255,.065);color:#fff;transform:none;filter:none}.nav button.active{background:linear-gradient(100deg,rgba(99,102,241,.30),rgba(79,70,229,.12));color:#fff;box-shadow:inset 0 0 0 1px rgba(129,140,248,.18)}.nav button.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:#818cf8;box-shadow:0 0 12px #818cf8}.icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px}.icon svg{width:19px;height:19px;stroke-width:1.8}.sidebar-foot{margin:18px 8px 0;padding:17px 14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035);color:#7e8ca5;font-size:10px;line-height:1.65}.sidebar-foot strong{color:#d5ddeb;font-size:11px;margin-bottom:3px}
.main{grid-column:2;max-width:none;padding:0 36px 44px;min-width:0;background:radial-gradient(circle at 96% 0,rgba(99,102,241,.075),transparent 25%),var(--canvas)}.topbar{height:72px;position:sticky;top:0;z-index:8;margin:0 -36px;padding:0 36px;background:rgba(244,246,250,.88);backdrop-filter:blur(16px);border-color:rgba(218,223,234,.85);color:#7d899e}.topbar>span{display:flex;align-items:center;gap:4px}.topbar>span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(15,159,110,.11);margin-right:8px}.topbar strong{color:#344054;font-weight:650}.profile{gap:10px}.profile>span{color:#667085;font-size:11px}.avatar{width:36px;height:36px;background:linear-gradient(145deg,#eef2ff,#dfe4ff);border:1px solid #d6dcff;color:#4338ca}.topbar button.ghost{color:#526078;border:1px solid transparent;border-radius:9px}.topbar button.ghost:hover{background:#fff;border-color:var(--line);filter:none}
.page-head{margin:31px 0 23px;align-items:flex-end}.page-head .eyebrow{color:#6366f1;font-size:9px;letter-spacing:1.8px}.page-head h1{font-size:29px;line-height:1.18;letter-spacing:-1.05px;margin:7px 0 5px;color:#182230}.page-head p{font-size:12px;color:#778397;margin:0}
button,.action-btn{min-height:40px;border-radius:9px;background:linear-gradient(135deg,#5b52e8,#4338ca);color:#fff;padding:10px 16px;font-size:12px;font-weight:650;box-shadow:0 6px 14px rgba(79,70,229,.17);transition:transform .15s,box-shadow .15s,filter .15s}button:hover,.action-btn:hover{transform:translateY(-1px);box-shadow:0 9px 19px rgba(79,70,229,.22);filter:none}button.secondary,.action-btn.secondary{background:#eef2ff;color:#4338ca;border:1px solid #dfe3ff;box-shadow:none}button.ghost{background:transparent;color:#667085;box-shadow:none;border:0}button.ghost:hover{background:#f2f4f7;box-shadow:none}
.stats{gap:14px;margin-bottom:20px}.stat{min-height:145px;padding:20px;border:1px solid var(--line);border-top:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;overflow:hidden}.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}.stat:after{width:105px;height:105px;right:-50px;bottom:-55px;background:color-mix(in srgb,var(--accent) 8%,transparent)}.stat label{font-size:11px;color:#667085;font-weight:550}.stat strong{font-size:25px;letter-spacing:-.7px;margin:19px 0 8px;color:#172033}.stat small{font-size:9.5px;color:#98a2b3}.stat .dot{float:right;width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent)}.stat .dot svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.grid{gap:18px;margin-bottom:20px}.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;margin-bottom:18px}.card:hover{box-shadow:0 10px 28px rgba(15,23,42,.055)}.card-head{min-height:64px;padding:18px 20px;border-color:#edf0f5}.card-head h2{font-size:14px;letter-spacing:-.2px;color:#273244}.card-head span{font-size:10px;color:#98a2b3}.card-body{padding:0 20px 20px}.chart{height:190px;padding:18px 4px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 41px,#edf0f5 42px);border-bottom:1px solid #e9edf3;gap:14px}.bar{width:66%;max-width:36px;border-radius:6px 6px 1px 1px;background:linear-gradient(180deg,#8b83f4,#4f46e5);box-shadow:0 7px 14px rgba(79,70,229,.17)}.bar-wrap:last-child .bar{background:linear-gradient(180deg,#29bfd1,#0891b2)}.bar-wrap{color:#98a2b3;font-size:9px}.chart-note{font-size:9px;color:#98a2b3}.channel{padding:11px 0;border-color:#eef1f5;color:#445069}.channel-icon{width:31px;height:31px;border-radius:9px;background:#f0f2ff;color:#5148d8}.channel small{color:#98a2b3}.channel strong{color:#344054;font-size:11px}
.table-wrap{scrollbar-width:thin;scrollbar-color:#cbd2df transparent}table{font-size:11px}th{position:sticky;top:0;z-index:1;background:#f7f8fb;color:#7f8a9d;font-size:9px;letter-spacing:.75px;padding:12px 20px;border-bottom:1px solid #e8ecf2}td{padding:15px 20px;border-color:#edf0f4;color:#596579}td strong{color:#283449}tbody tr:nth-child(even){background:#fbfcfe}tbody tr:hover{background:#f6f7ff}.badge{border-radius:999px;padding:5px 9px;background:#ecfdf3;color:#087a55;border:1px solid #d1f7e5}.badge.warn{background:#fff7ed;color:#b45309;border-color:#ffedd5}.badge.off{background:#f2f4f7;color:#667085;border-color:#e4e7ec}.notice{border:1px solid #dddfff;border-left:4px solid #6366f1;background:#f4f5ff;color:#4b5080;border-radius:10px;padding:13px 17px}
input,select,textarea,.search{border:1px solid #d9deea;border-radius:9px;background:#fff;color:#273244;padding:11px 12px;transition:border .15s,box-shadow .15s}input:hover,select:hover,textarea:hover{border-color:#bdc5d5}input:focus,select:focus,textarea:focus{border-color:#7772ec;box-shadow:0 0 0 3px rgba(99,102,241,.12)}dialog{border:0;border-radius:18px;padding:26px;box-shadow:0 35px 110px rgba(2,6,23,.32)}dialog::backdrop{background:rgba(12,19,33,.62);backdrop-filter:blur(5px)}.dialog-head{padding-bottom:17px;border-bottom:1px solid #edf0f4}.dialog-head h2{font-size:19px;color:#182230}.field{color:#596579;font-size:11px;gap:7px}.form-grid{gap:15px}.form-foot{border-color:#edf0f4}.empty{padding:54px 24px;color:#8b95a6}
.hsn-picker{margin-top:4px;padding:14px;border:1px solid #dfe3ff;border-radius:11px;background:#f7f8ff}.hsn-picker span{font-weight:700;color:#363e78}.hsn-picker select{background:#fff}.hsn-picker small{color:#77819a;line-height:1.5}.line-item label{display:flex;flex-direction:column;gap:6px;color:#667085;font-size:10px}.line-item label select,.line-item label input{height:42px}.line-item>button{align-self:end;height:42px}
.suite-tabs{gap:5px;padding:5px;margin:-3px 0 20px;border:1px solid var(--line);border-radius:11px;background:#eef1f6}.suite-tabs button{min-height:36px;border:0;border-radius:8px;background:transparent;color:#69758a;padding:8px 13px;font-size:10.5px}.suite-tabs button:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.7)}.suite-tabs button.active{background:#fff;color:#4338ca;border:0;box-shadow:0 2px 7px rgba(15,23,42,.08)}.suite-metric{border-color:var(--line);border-radius:13px;box-shadow:var(--shadow-sm)}.suite-metric strong{font-family:inherit;color:#172033}.suite-callout,.suite-loading{border-color:var(--line);border-radius:13px}.barcode-billing{background:#f7f8ff;border-color:#e1e3ff;border-radius:11px}
.design-card{border-color:#e1e6ef!important;border-radius:13px!important}.design-card:hover{border-color:#8b86ee!important}.design-card.selected{border-color:#5b52e8!important;box-shadow:0 0 0 3px #e9e9ff!important}.studio-tabs button.active{background:#4f46e5;border-color:#4f46e5}.design-gallery .design-save{border-radius:0 0 14px 14px}#toast{z-index:100;background:#172033;border:1px solid #2d3a4f;box-shadow:0 18px 45px rgba(15,23,42,.25);border-radius:10px}.loading{min-height:100vh;display:grid;place-items:center;color:#68758b;font-size:13px}.loading:before{content:"";position:absolute;width:36px;height:36px;border:3px solid #dfe3ff;border-top-color:#4f46e5;border-radius:50%;animation:ui-spin .8s linear infinite;transform:translateY(-34px)}@keyframes ui-spin{to{transform:translateY(-34px) rotate(360deg)}}
.auth{background:#f5f7fb}.auth-art{position:relative;overflow:hidden;background:linear-gradient(145deg,#0b1220 0,#172554 58%,#312e81 100%);padding:9vw 7vw}.auth-art:before,.auth-art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}.auth-art:before{width:430px;height:430px;right:-180px;top:-170px;background:rgba(99,102,241,.22)}.auth-art:after{width:280px;height:280px;left:-120px;bottom:-130px;background:rgba(8,145,178,.16)}.auth-art>*{position:relative;z-index:1}.auth-art h1{font-size:46px;letter-spacing:-2.2px;max-width:520px}.auth-art p{color:#b7c2d8}.auth-art .eyebrow{color:#a5b4fc}.auth-form{background:radial-gradient(circle at 90% 5%,rgba(99,102,241,.09),transparent 27%),#f7f8fc}.auth-form form{background:#fff;border:1px solid #e5e9f2;border-radius:18px;padding:34px;box-shadow:0 25px 70px rgba(15,23,42,.09)}.auth-form h1{color:#182230}.auth-form button{min-height:44px}
@media(max-width:1150px){.shell{grid-template-columns:226px minmax(0,1fr)}.sidebar{width:226px;padding-inline:13px}.main{padding-inline:24px}.topbar{margin-inline:-24px;padding-inline:24px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.shell{display:block;padding-bottom:72px}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:68px;padding:7px 8px;background:#101a2e;z-index:30;box-shadow:0 -10px 30px rgba(15,23,42,.2)}.brand,.nav-label,.sidebar-foot{display:none}.nav{height:100%;display:flex;flex-direction:row;gap:2px;overflow-x:auto}.nav button{min-width:68px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 4px;font-size:8px;line-height:1.05;text-align:center}.nav button.active:before{left:18px;right:18px;top:auto;bottom:0;width:auto;height:2px}.icon{height:20px}.main{padding:0 14px 25px}.topbar{height:59px;margin:0 -14px;padding:0 14px;position:sticky}.profile>span,.topbar>span{display:none}.page-head{margin:24px 0 18px;align-items:flex-start}.page-head h1{font-size:24px}.page-head .actions{max-width:45%;align-items:stretch}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{min-height:126px;padding:15px}.stat strong{font-size:20px}.grid{grid-template-columns:1fr}.card-head{padding:15px}.card-body{padding:0 15px 16px}th,td{padding:12px 14px}.suite-tabs{overflow:auto}.form-grid{grid-template-columns:1fr}dialog{padding:20px}.auth{display:block}.auth-art{padding:34px 25px;background:linear-gradient(145deg,#101a2e,#312e81)}}
@media(max-width:420px){.stats{grid-template-columns:1fr}.stat{min-height:112px}.page-head{display:block}.page-head .actions{max-width:none;margin-top:14px;flex-direction:row}.profile button{padding:8px}.nav button{min-width:64px}}@media print{.sidebar,.topbar,.ui-no-print{display:none!important}.main{padding:0!important;background:#fff!important}}