:root{
--bg:#f3f7fb;--panel:#fff;--ink:#142033;--muted:#718096;--line:#e1e9f2;--nav:#08182b;
--blue:#1688ff;--green:#16b96f;--orange:#ff861c;--purple:#7a45ed;--pink:#ef3f7d;--red:#f35d67;
--shadow:0 6px 20px rgba(28,61,95,.075);--radius:14px}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef5fb 0,#f7faff 220px,#f3f7fb 100%);min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}.muted,.hint,small{color:var(--muted)}.view{display:none}.view.active{display:block}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:linear-gradient(180deg,#0b1d32,#071426);color:#dce7f3;z-index:50;padding:18px 10px 18px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px}.brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#268aff,#0969e9);display:grid;place-items:center;color:#fff;font-size:21px;box-shadow:0 7px 18px rgba(16,117,255,.35)}
.brand b{font-size:16px;color:#fff;display:block;letter-spacing:-.02em}.brand small{font-size:10px;color:#9fb0c5;display:block;margin-top:3px}
.side-nav{display:flex;flex-direction:column;gap:5px;border-top:1px solid rgba(255,255,255,.06);padding-top:14px}.side-nav .nav-btn{border:0;background:transparent;color:#c8d3df;display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;border-radius:10px;padding:10px 9px}.side-nav .nav-btn span{font-size:17px;text-align:center;color:#c4d4e5}.side-nav .nav-btn small{font-size:13px;color:inherit}.side-nav .nav-btn.active{background:linear-gradient(135deg,#137cf6,#0668e9);color:#fff;box-shadow:0 8px 18px rgba(0,103,233,.25)}.side-nav .nav-btn.active span{color:#fff}
.side-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:14px 8px 0}.owner{display:flex;align-items:center;gap:9px}.avatar{width:36px;height:36px;border-radius:50%;background:#e5edf6;color:#25364c;display:grid;place-items:center;font-weight:800}.owner b{font-size:12px;color:#fff;display:block}.owner small{font-size:10px;color:#9aaec4}.backup-link{margin-top:14px;border:0;background:transparent;color:#c7d5e4;padding:8px 0;display:flex;gap:10px;align-items:center}
.topbar{position:fixed;left:240px;right:0;top:0;height:74px;z-index:40;padding:12px 24px;display:flex;align-items:center;gap:18px;background:rgba(245,249,253,.95);backdrop-filter:blur(14px);border-bottom:1px solid #e6edf5}.top-search{height:44px;max-width:515px;flex:1;background:white;border:1px solid #dfe8f1;border-radius:10px;display:flex;align-items:center;padding:0 14px;box-shadow:0 3px 10px rgba(29,58,94,.04)}.top-search span{font-size:23px;color:#4d6d91;margin-right:9px}.top-search input{border:0;outline:none;width:100%;font-size:13px;color:#41546b}.top-actions{margin-left:auto;display:flex;align-items:center;gap:20px}.top-icon{border:0;background:transparent;position:relative;font-size:20px;color:#153252;padding:5px}.top-icon i{position:absolute;right:0;top:0;width:15px;height:15px;border-radius:50%;background:#f0343f;color:#fff;font-size:8px;font-style:normal;display:grid;place-items:center}.clock{display:flex;align-items:center;gap:9px;border-left:1px solid #dbe4ee;padding-left:18px}.clock>span{font-size:20px}.clock small{display:block;font-size:10px}.clock b{display:block;font-size:13px;margin-top:2px}.icon-btn{display:none}
.app-shell{margin-left:240px;padding:94px 18px 34px;max-width:1540px}.panel{background:rgba(255,255,255,.98);border:1px solid #dfe8f1;border-radius:var(--radius);box-shadow:var(--shadow)}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}.panel-title h2{font-size:16px;margin:0;letter-spacing:-.025em}.link-btn{border:0;background:transparent;color:#0879ff;font-weight:650;font-size:11px}
.mobile-brand{display:none}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.kpi{height:107px;border-radius:13px;color:#fff;padding:17px 18px;display:flex;align-items:center;gap:15px;box-shadow:0 9px 24px rgba(30,64,175,.13);overflow:hidden;position:relative}.kpi:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-35px;bottom:-48px;background:rgba(255,255,255,.11)}.kpi.blue{background:linear-gradient(135deg,#279aff,#0c73ef)}.kpi.green{background:linear-gradient(135deg,#2ac87c,#09a85c)}.kpi.orange{background:linear-gradient(135deg,#ffa333,#ff7014)}.kpi.purple{background:linear-gradient(135deg,#9b5cf5,#7037e8)}.kpi-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:25px;border:1px solid rgba(255,255,255,.12)}.kpi span{font-size:12px;display:block}.kpi strong{font-size:25px;display:block;line-height:1.05;margin:3px 0 6px;letter-spacing:-.035em}.kpi small{color:#fff;font-size:9.5px}
.dashboard-grid{display:grid;grid-template-columns:1.14fr 1.16fr .82fr;gap:12px;margin-bottom:14px}.quick-panel,.chart-panel,.status-panel{min-height:240px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:0 14px 14px}.quick-card{height:80px;border:0;color:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 6px 14px rgba(22,67,121,.11)}.quick-card span{font-size:27px;line-height:1}.quick-card b{font-size:11px}.q-blue{background:linear-gradient(145deg,#168dff,#0873e8)}.q-green{background:linear-gradient(145deg,#21c77c,#07a85f)}.q-orange{background:linear-gradient(145deg,#ff9c33,#ff6e13)}.q-purple{background:linear-gradient(145deg,#995cf4,#7136e9)}.q-pink{background:linear-gradient(145deg,#f0558d,#e92e70)}.q-gray{background:linear-gradient(145deg,#8195ad,#5f7188)}
.bar-chart{height:184px;display:flex;align-items:end;gap:9px;padding:20px 16px 28px;border-top:1px solid #f0f3f7;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf2f7 40px)}.bar-col{flex:1;min-width:22px;display:flex;height:100%;align-items:end;justify-content:center;position:relative}.bar{width:70%;max-width:34px;background:linear-gradient(180deg,#329dff,#1483ee);border-radius:4px 4px 0 0;min-height:5px;box-shadow:0 3px 7px rgba(25,129,238,.15)}.bar-col small{position:absolute;bottom:-21px;font-size:8px;color:#718096}
.status-wrap{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:4px;padding:11px 13px 18px}.donut{width:132px;height:132px;border-radius:50%;margin:auto;display:grid;place-items:center;background:conic-gradient(#2196f3 0 60%,#ff9a21 60% 75%,#ff5e55 75% 100%);position:relative}.donut:after{content:"";width:82px;height:82px;background:white;border-radius:50%;position:absolute}.donut>div{z-index:1;text-align:center}.donut strong{display:block;font-size:20px}.donut small{font-size:8px;color:#68768a}.legend{display:flex;flex-direction:column;gap:12px}.legend div{display:grid;grid-template-columns:10px 1fr auto;gap:5px;align-items:center;font-size:9px}.dot{width:7px;height:7px;border-radius:50%}.blue-dot{background:#2196f3}.orange-dot{background:#ff9a21}.red-dot{background:#ff5e55}
.featured-panel{margin-bottom:14px}.featured-products{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 12px 12px}.product-card{border:1px solid #dfe7ef;border-radius:10px;background:white;overflow:hidden;min-width:0}.product-card .product-image{height:112px;background:#f8fafc;display:grid;place-items:center;overflow:hidden}.product-card .product-image img{width:100%;height:100%;object-fit:contain}.product-placeholder{font-size:37px;color:#7790aa}.product-card-body{padding:9px 10px}.product-card h3{font-size:12px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-code{font-size:9px;color:#718096}.product-prices{font-size:9px;line-height:1.7;margin-top:6px}.product-prices b{float:right;font-size:10px}.product-profit{color:#00a75a;font-weight:700}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:700}.badge.stock{background:#d9f7e6;color:#087e48}.badge.reserved{background:#fff0d7;color:#e56d00}.badge.sold{background:#fde0e5;color:#d93449}
.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compact-list{padding:0 14px 12px}.compact-row{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;padding:8px 0;border-top:1px solid #edf2f7}.compact-row:first-child{border-top:0}.compact-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;background:#dff2ff;color:#0c74ca}.compact-main b{font-size:10px;display:block}.compact-main small{font-size:9px}.compact-right{text-align:right}.compact-right b{font-size:10px;display:block}.compact-right small{font-size:8px}
.page-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.page-head h1{margin:0;font-size:26px;letter-spacing:-.035em}.page-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.toolbar{padding:12px;display:grid;grid-template-columns:1fr 180px;gap:10px;margin-bottom:13px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:18px 2px 10px}.section-head h2{font-size:16px;margin:0}.section-head small{font-size:10px}.list{display:flex;flex-direction:column;gap:8px}.item{display:grid;grid-template-columns:65px 1fr auto;gap:12px;align-items:center;background:white;border:1px solid #dfe7ef;border-radius:11px;padding:9px 11px;box-shadow:0 3px 10px rgba(23,58,95,.04)}.item.no-thumb{grid-template-columns:1fr auto}.thumb{width:65px;height:65px;border-radius:8px;background:#f4f7fa;object-fit:contain}.thumb.placeholder{display:grid;place-items:center;font-size:27px}.item-title{font-size:12px;font-weight:750}.item-meta{font-size:9.5px;color:#718096;line-height:1.55;margin-top:3px}.price{font-size:11px;font-weight:800;text-align:right}.profit{font-size:9px;color:#00a15b;margin-top:3px}.empty{padding:28px;text-align:center;color:#718096;background:white;border:1px dashed #ccd8e5;border-radius:12px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}.stat-card{background:#fff;border:1px solid #dfe7ef;border-radius:12px;padding:16px;box-shadow:var(--shadow)}.stat-card span{display:block;font-size:10px;color:#718096}.stat-card strong{font-size:20px;margin-top:5px;display:block}
input,select,textarea{width:100%;border:1px solid #d3deea;border-radius:9px;background:#fff;padding:10px 11px;outline:0;color:#26384e}input:focus,select:focus,textarea:focus{border-color:#3b99ff;box-shadow:0 0 0 3px rgba(30,136,255,.09)}.primary,.secondary,.danger,.icon-btn{border:0;border-radius:9px;padding:10px 14px;font-weight:700}.primary{background:linear-gradient(135deg,#1789ff,#0873ea);color:#fff}.secondary{background:#fff;border:1px solid #d0dce8;color:#26384e}.danger{background:#fff1f2;color:#c72a39;border:1px solid #ffd2d7}.full{width:100%;display:block;text-align:center}
.modal{border:0;padding:0;background:transparent;width:min(690px,calc(100% - 20px));max-height:92vh}.modal::backdrop{background:rgba(4,16,32,.58);backdrop-filter:blur(3px)}.modal-card{background:#fff;border-radius:16px;padding:17px;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(5,25,47,.25)}.modal-card label{display:block;font-size:11px;font-weight:700;margin:10px 0}.modal-card label input,.modal-card label select,.modal-card label textarea{margin-top:5px}.modal-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-17px;background:#fff;padding:3px 0 10px;z-index:2;border-bottom:1px solid #eef2f6}.modal-head h3{margin:0;font-size:16px}.close-btn{border:0;background:#f1f4f8;width:34px;height:34px;border-radius:50%;font-size:20px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.image-preview{width:100%;max-height:250px;object-fit:contain;border-radius:12px;margin-top:8px}.profit-preview{background:#eafaf2;color:#087c4c;padding:10px;border-radius:9px;font-size:11px;font-weight:800;margin-top:10px}.detail-image{width:100%;max-height:300px;object-fit:contain;background:#f7f9fb;border-radius:10px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.detail-field{border:1px solid #e4ebf3;border-radius:9px;padding:9px;background:#fbfcfe}.detail-field small{display:block;font-size:9px}.detail-field b{font-size:11px}.barcode{background:white;padding:10px;border:1px solid #e4ebf3;border-radius:10px;text-align:center}.action-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.scanner-card{height:370px;background:#081727;border-radius:18px;overflow:hidden;position:relative;display:grid;place-items:center}.scanner-card video{width:100%;height:100%;object-fit:cover;display:none}.scanner-placeholder{color:#fff;text-align:center;font-size:46px}.scanner-placeholder small{color:#bdd0e5;font-size:11px}.button-row{display:flex;gap:10px;margin-top:12px}.button-row>*{flex:1}.manual-scan{display:grid;grid-template-columns:1fr auto;gap:10px}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.backup-card{background:white;border:1px solid #dfe7ef;border-radius:12px;padding:16px;box-shadow:var(--shadow)}.backup-card p{font-size:11px;color:#718096;line-height:1.5}.backup-icon{font-size:30px}.file-label{cursor:pointer}.toast{position:fixed;z-index:200;left:50%;bottom:28px;transform:translate(-50%,20px);background:#08192d;color:#fff;padding:10px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;font-size:11px}.toast.show{opacity:1;transform:translate(-50%,0)}
.bottom-nav{display:none}

@media(max-width:1050px){
.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.status-panel{grid-column:1/-1}.status-wrap{grid-template-columns:190px 1fr}.featured-products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
body{background:#f8fbff;padding-bottom:72px}.sidebar,.topbar{display:none}.app-shell{margin-left:0;padding:0 10px 82px;max-width:none}.mobile-brand{display:block;padding-top:max(10px,env(safe-area-inset-top))}.mobile-brand-row{height:52px;display:grid;grid-template-columns:42px 1fr 36px;align-items:center;gap:8px;padding:0 3px}.mobile-brand-row .brand-logo{width:37px;height:37px;border-radius:10px}.mobile-brand-row b{font-size:15px;display:block}.mobile-brand-row small{font-size:8px;display:block}.mobile-hero{height:132px;border-radius:14px;background:linear-gradient(135deg,#136ed9,#85b9e9);color:#fff;margin:6px 0 12px;padding:20px 16px;display:flex;justify-content:space-between;overflow:hidden;position:relative}.mobile-hero:after{content:"";position:absolute;right:-28px;top:-18px;width:135px;height:135px;border-radius:50%;background:rgba(0,0,0,.10)}.mobile-hero h2{font-size:20px;line-height:1.2;margin:0}.mobile-hero p{font-size:8px;margin-top:8px}.hero-camera{font-size:64px;align-self:center;z-index:1;color:rgba(0,0,0,.68)}
.kpi-grid{display:none}.dashboard-grid{display:block}.quick-panel{background:transparent;border:0;box-shadow:none;min-height:0}.quick-panel .panel-title{display:none}.quick-grid{grid-template-columns:repeat(2,1fr);padding:0;gap:9px}.quick-card{height:88px;border-radius:13px}.quick-card span{font-size:27px}.quick-card b{font-size:11px}.chart-panel{margin-top:12px;min-height:210px}.chart-panel .panel-title{padding-bottom:2px}.bar-chart{height:155px}.status-panel{display:none}
.featured-panel{margin-top:12px}.featured-products{display:flex;overflow-x:auto;gap:7px;padding:0 8px 10px;scrollbar-width:none}.product-card{min-width:113px;width:113px}.product-card .product-image{height:78px}.product-card-body{padding:7px}.product-card h3{font-size:9px}.product-prices{display:none}.lower-grid{display:none}
.page-head{padding:14px 2px 0;align-items:center}.page-head h1{font-size:21px}.page-head p{font-size:10px}.toolbar{grid-template-columns:1fr 125px;padding:8px}.list{gap:7px}.item{grid-template-columns:58px 1fr auto;padding:8px}.thumb{width:58px;height:58px}.price{font-size:10px}.settings-grid{grid-template-columns:1fr}.two-col,.detail-grid{grid-template-columns:1fr}
.bottom-nav{position:fixed;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;background:rgba(255,255,255,.97);border-top:1px solid #dfe8f1;padding:5px 4px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(25,56,90,.07)}.bottom-nav .nav-btn{border:0;background:transparent;color:#70829a;min-height:48px;padding:4px}.bottom-nav .nav-btn span{display:block;font-size:17px}.bottom-nav .nav-btn small{font-size:8px;display:block;color:inherit;margin-top:2px}.bottom-nav .nav-btn.active{color:#0b7ef3}.bottom-nav .add-center{width:46px;height:46px;border-radius:50%;background:#0b7ef3;color:#fff;justify-self:center;align-self:center;transform:translateY(-11px);box-shadow:0 6px 14px rgba(11,126,243,.28)}.bottom-nav .add-center span{font-size:28px}
}
@media(max-width:420px){.mobile-hero{height:124px}.mobile-hero h2{font-size:18px}.quick-card{height:80px}.featured-panel .panel-title h2,.chart-panel .panel-title h2{font-size:14px}.product-card{min-width:106px;width:106px}}