*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#f6f8fb;color:#172033;font-size:14px}button,input,select{font:inherit}.app{display:flex;min-height:100vh}.sidebar{width:258px;background:#fff;border-right:1px solid #e8ecf2;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:10}.brand{height:76px;display:flex;align-items:center;padding:0 22px;gap:11px;border-bottom:1px solid #f0f2f5}.brand-mark{width:35px;height:35px;border-radius:10px;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}.brand strong{display:block;font-size:17px;letter-spacing:-.5px}.brand strong span{color:#2563eb}.brand small{font-size:9px;color:#98a1b2;letter-spacing:1.2px;text-transform:uppercase}.sidebar nav{padding:22px 12px;flex:1}.nav-section{font-size:10px;font-weight:700;color:#a0a8b8;letter-spacing:1px;padding:0 12px 9px;margin-top:12px}.nav-section:first-child{margin-top:0}.nav-item{height:43px;display:flex;align-items:center;gap:12px;padding:0 12px;color:#667085;text-decoration:none;border-radius:9px;margin:3px 0;font-weight:500}.nav-item svg{width:18px;height:18px}.nav-item b{margin-left:auto;font-size:10px;background:#edf3ff;color:#2563eb;padding:3px 7px;border-radius:20px}.nav-item:hover{background:#f6f8fc;color:#172033}.nav-item.active{background:#edf4ff;color:#2563eb;font-weight:600}.sidebar-bottom{padding:14px 12px;border-top:1px solid #eef1f5}.help-card{display:flex;align-items:center;gap:10px;background:#f7f9fc;border-radius:10px;padding:11px;margin-bottom:10px}.help-card svg{width:18px;color:#2563eb}.help-card strong,.help-card small,.user-mini strong,.user-mini small{display:block}.help-card strong{font-size:11px}.help-card small{font-size:10px;color:#8b94a5;margin-top:2px}.user-mini{display:flex;align-items:center;gap:9px;padding:7px}.user-mini svg{margin-left:auto;width:17px;color:#98a1b2}.avatar{width:34px;height:34px;border-radius:50%;background:#e8efff;color:#2563eb;display:grid;place-items:center;font-weight:700;font-size:11px}.user-mini strong{font-size:11px}.user-mini small{font-size:9px;color:#929aaa;margin-top:2px}.main{margin-left:258px;width:calc(100% - 258px)}.topbar{height:76px;background:#fff;border-bottom:1px solid #e8ecf2;display:flex;align-items:center;padding:0 30px;gap:20px;position:sticky;top:0;z-index:5}.icon-btn{border:0;background:transparent;color:#697386;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer}.icon-btn:hover{background:#f4f6f9}.icon-btn svg{width:19px}.search{height:39px;width:min(480px,50vw);background:#f7f8fa;border:1px solid #edf0f4;border-radius:9px;display:flex;align-items:center;padding:0 11px;gap:9px;color:#98a1b2}.search svg{width:17px}.search input{border:0;outline:0;background:transparent;flex:1;font-size:12px}.search kbd{font-size:10px;border:1px solid #e1e5ea;background:#fff;padding:3px 6px;border-radius:5px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:5px}.notification{position:relative}.notification em{position:absolute;width:6px;height:6px;background:#ef4444;border-radius:50%;right:7px;top:7px;border:1px solid #fff}.profile{display:flex;align-items:center;gap:9px;margin-left:8px;padding-left:14px;border-left:1px solid #edf0f4}.profile-text strong,.profile-text small{display:block}.profile-text strong{font-size:11px}.profile-text small{font-size:9px;color:#8b94a5;margin-top:2px}.profile>svg{width:14px;color:#98a1b2}.content{padding:30px;max-width:1600px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:11px;color:#98a1b2;margin-bottom:5px}.page-head h1{margin:0;font-size:25px;letter-spacing:-.7px}.page-head p{margin:5px 0 0;color:#7b8494;font-size:12px}.primary{border:0;background:#2563eb;color:#fff;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 5px 12px #2563eb20}.primary svg{width:16px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.kpi{background:#fff;border:1px solid #e8ecf2;border-radius:12px;padding:18px;display:flex;gap:14px;align-items:center}.kpi-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none}.kpi-icon svg{width:19px}.blue{background:#edf4ff;color:#2563eb}.purple{background:#f2edff;color:#7c3aed}.green{background:#eaf9f0;color:#16a34a}.orange{background:#fff5e8;color:#ea8a00}.kpi span{display:block;color:#7d8798;font-size:10px;margin-bottom:5px}.kpi strong{font-size:20px;letter-spacing:-.4px;display:block}.kpi small{display:block;color:#8f98a8;font-size:9px;margin-top:5px}.kpi small label{color:#a1a8b5;margin-left:2px}.up{color:#16a34a!important}.warn{color:#d97706!important}.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-bottom:18px}.card{background:#fff;border:1px solid #e8ecf2;border-radius:12px;padding:18px;min-width:0}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.card-head h3{margin:0;font-size:13px}.card-head span{display:block;color:#929aaa;font-size:10px;margin-top:4px}.card-head select,.ghost{border:1px solid #e5e9ef;background:#fff;color:#6b7484;border-radius:7px;padding:7px 9px;font-size:10px;outline:none}.ghost{display:flex;align-items:center;gap:5px}.ghost svg{width:12px}.chart-wrap{height:250px}.bottom-grid{grid-template-columns:1.35fr 1fr}.link-btn{border:0;background:none;color:#2563eb;font-size:10px;font-weight:600;cursor:pointer}table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:#9aa2b1;font-weight:600;padding:9px;border-bottom:1px solid #eef1f5}td{padding:12px 9px;border-bottom:1px solid #f1f3f6;color:#5e6879;white-space:nowrap}td strong{color:#283347;font-size:10px}.badge{padding:4px 7px;border-radius:20px;font-size:9px;font-weight:600}.success{background:#eaf8ef;color:#15803d}.pending{background:#fff5df;color:#b76a00}.stock-list{display:flex;flex-direction:column}.stock-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f0f2f5}.stock-row:last-child{border-bottom:0}.product-img{width:34px;height:34px;border-radius:8px;background:#f1f4f8;color:#64748b;display:grid;place-items:center;font-size:9px;font-weight:700}.product-info{flex:1}.product-info strong,.product-info small{display:block}.product-info strong{font-size:10px;color:#303b4e}.product-info small{font-size:9px;color:#9aa2b1;margin-top:3px}.stock-value{font-size:10px;font-weight:700;color:#64748b}.danger-text{color:#dc2626}.warn-text{color:#d97706}.toast{position:fixed;right:25px;bottom:25px;background:#172033;color:#fff;padding:11px 15px;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:11px;transform:translateY(100px);opacity:0;transition:.25s;z-index:30}.toast.show{transform:translateY(0);opacity:1}.toast svg{width:16px;color:#4ade80}@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,1fr)}.grid-2,.bottom-grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s;box-shadow:8px 0 30px #0002}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.topbar{padding:0 15px}.search{display:none}.profile-text,.profile>svg{display:none}.content{padding:20px 15px}.page-head{align-items:flex-start;gap:15px}.page-head h1{font-size:22px}.kpis{grid-template-columns:1fr}.chart-wrap{height:220px}.table-scroll{overflow:auto}.primary{padding:9px 11px}.brand{height:70px}}
body.dark{background:#111827;color:#e5e7eb}body.dark .sidebar,body.dark .topbar,body.dark .card,body.dark .kpi{background:#182130;border-color:#293447}body.dark .nav-item{color:#9ca7b8}body.dark .nav-item.active{background:#213558;color:#76a7ff}body.dark .search,body.dark .help-card,body.dark .card-head select,body.dark .ghost{background:#202b3b;border-color:#303d51;color:#aab4c3}body.dark td{color:#aab4c3;border-color:#293447}body.dark th{border-color:#293447}body.dark .product-info strong,body.dark td strong,body.dark .kpi strong{color:#eef2f7}body.dark .brand,body.dark .topbar{border-color:#293447}body.dark .sidebar-bottom{border-color:#293447}
.profile-wrap{position:relative}
.profile{cursor:pointer}
.profile-menu{display:none;position:absolute;right:0;top:52px;min-width:190px;background:#fff;border:1px solid #e8ecf2;border-radius:12px;padding:8px;box-shadow:0 12px 32px #17203318;z-index:20}
.profile-menu.open{display:block}
.profile-menu form{margin:0}
.profile-menu button,.profile-menu a{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;color:#5e6879;font-size:12px;cursor:pointer;text-decoration:none;text-align:left}
.profile-menu button:hover,.profile-menu a:hover{background:#f6f8fc;color:#172033}
.profile-menu svg{width:15px}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#dbe7ff 0%,#f6f8fb 42%);padding:24px}
.login-card{width:min(420px,100%);background:#fff;border:1px solid #e8ecf2;border-radius:18px;padding:36px 32px;box-shadow:0 18px 50px #17203312}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.login-card h1{margin:0 0 6px;font-size:24px;letter-spacing:-.6px}
.login-card p.lead{margin:0 0 24px;color:#7b8494;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:7px;color:#334155}
.field input{width:100%;height:44px;border:1px solid #e5e9ef;border-radius:10px;padding:0 12px;background:#fbfcfe;outline:none}
.field input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb14;background:#fff}
.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:#667085;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.password-toggle:hover{background:#f4f6f9;color:#172033}
.password-toggle svg{width:18px;height:18px}
.field-error{color:#dc2626;font-size:11px;margin-top:6px}
.alert{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:16px}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px;font-size:12px;color:#667085}
.login-row label{display:flex;align-items:center;gap:7px;cursor:pointer}
.login-page .primary{width:100%;justify-content:center;height:44px;font-size:13px}
.login-foot{margin-top:18px;text-align:center;color:#8b94a5;font-size:11px}
.workspace{min-height:420px;display:grid;place-items:center;text-align:center;color:#98a1b2;padding:60px 20px}
.workspace-icon{margin:auto;width:54px;height:54px;border-radius:14px;background:#edf4ff;color:#2563eb;display:grid;place-items:center}
.workspace h3{color:#334155;margin:15px 0 5px}
.workspace p{font-size:11px;margin:0}
.brand{height:auto;min-height:76px;padding:12px 16px}
.brand-logo{height:54px;width:auto;max-width:100%;display:block;object-fit:contain}
.login-brand{justify-content:center;margin-bottom:24px}
.login-logo{height:120px;width:auto;max-width:100%;display:block;margin:0 auto;object-fit:contain}
body.dark .brand-logo,body.dark .login-logo{filter:brightness(0) invert(1)}
body.dark .login-card,body.dark .profile-menu{background:#182130;border-color:#293447}
body.dark .field input{background:#202b3b;border-color:#303d51;color:#e5e7eb}
body.dark .profile-menu button,body.dark .profile-menu a{color:#aab4c3}
a.primary{text-decoration:none}
.field select{width:100%;height:44px;border:1px solid #e5e9ef;border-radius:10px;padding:0 12px;background:#fbfcfe;outline:none}
.field select:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb14;background:#fff}
.field-hint{display:block;margin-top:6px;color:#8b94a5;font-size:11px}
.form-card{max-width:920px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:8px}
.ghost-link{color:#667085;text-decoration:none;font-size:12px;font-weight:600}
.ghost-link:hover{color:#172033}
.image-upload{display:flex;align-items:center;gap:14px}
.image-preview{width:72px;height:72px;border-radius:12px;border:1px solid #e8ecf2;background:#f7f8fa;overflow:hidden;display:grid;place-items:center;color:#98a1b2;font-size:10px;flex:none}
.image-preview img,.product-thumb{width:100%;height:100%;object-fit:cover}
.store-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.store-price-card{border:1px solid #e8ecf2;border-radius:12px;padding:12px;background:#fbfcfe}
.store-price-card strong,.store-price-card small{display:block}
.store-price-card strong{font-size:12px;color:#172033}
.store-price-card small{color:#8b94a5;font-size:10px;margin:3px 0 8px}
.store-price-card input{width:100%;height:38px;border:1px solid #e5e9ef;border-radius:8px;padding:0 10px;background:#fff}
.data-table{font-size:12px}
.data-table th{font-size:11px}
.data-table td{padding:14px 9px;white-space:normal}
.product-cell{display:flex;align-items:center;gap:10px}
.product-cell strong{display:block;font-size:12px}
.product-cell small{display:block;color:#8b94a5;font-size:10px;margin-top:3px}
.product-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.product-thumb.placeholder{background:#edf4ff;color:#2563eb;display:grid;place-items:center;font-size:10px;font-weight:700}
.nest-mark{color:#98a1b2;font-size:12px}
.muted{color:#98a1b2}
.price-chips{display:flex;flex-wrap:wrap;gap:6px}
.price-chip{background:#f4f7fb;border-radius:20px;padding:4px 8px;font-size:10px;color:#334155}
.price-chip em{font-style:normal;color:#8b94a5;margin-right:5px}
.row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.row-actions form{margin:0}
.list-btn{height:30px;padding:0 10px;font-size:11px;font-weight:600;border-radius:7px;display:inline-flex;align-items:center;gap:5px;text-decoration:none;border:1px solid #e5e9ef;background:#fff;color:#334155;cursor:pointer;white-space:nowrap}
.list-btn:hover{background:#f4f6f9;color:#172033}
.list-btn.success{background:#16a34a;border-color:#16a34a;color:#fff}
.list-btn.success:hover{background:#15803d;color:#fff}
.list-btn.danger{background:#dc2626;border-color:#dc2626;color:#fff}
.list-btn.danger:hover{background:#b91c1c;color:#fff}
.list-btn svg{width:13px;height:13px}
body.dark .list-btn{background:#202b3b;border-color:#303d51;color:#d5deea}
body.dark .list-btn:hover{background:#213044;color:#e5e7eb}
.icon-action{width:30px;height:30px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;color:#667085;cursor:pointer;text-decoration:none}
.icon-action:hover{background:#f4f6f9;color:#172033}
.icon-action.danger:hover{background:#fef2f2;color:#dc2626}
.icon-action svg{width:15px;height:15px}
.empty-note{background:#f7f8fa;border:1px dashed #e5e9ef;border-radius:10px;padding:12px;color:#8b94a5;font-size:12px}
.empty-note a{color:#2563eb;font-weight:600;text-decoration:none}
.hub-price-block{margin-bottom:14px}
.hub-price-block h4{margin:0 0 10px;font-size:12px;color:#334155}
body.dark .hub-price-block h4{color:#d5deea}
body.dark .field select,body.dark .store-price-card,body.dark .store-price-card input,body.dark .image-preview{background:#202b3b;border-color:#303d51;color:#e5e7eb}
body.dark .store-price-card strong,body.dark .product-cell strong{color:#eef2f7}
body.dark .price-chip{background:#213044;color:#d5deea}
body.dark .icon-action:hover{background:#213044;color:#e5e7eb}
.table-link{text-decoration:none;color:inherit}
.meta-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.meta-row span{display:block;color:#8b94a5;font-size:10px;margin-bottom:4px}
.meta-row strong{font-size:13px}
.stepper{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.step{font-size:11px;padding:6px 10px;border-radius:20px;background:#f4f6f9;color:#8b94a5}
.step.current{background:#fff5df;color:#b76a00}
.step.done{background:#eaf8ef;color:#15803d}
.badge.info{background:#edf4ff;color:#2563eb}
.badge.danger{background:#fef2f2;color:#b91c1c}
.item-product,.item-qty{width:100%;height:38px;border:1px solid #e5e9ef;border-radius:8px;padding:0 10px;background:#fff}
.item-qty{width:120px}
.grand-total{font-size:13px;display:flex;align-items:center}
.grand-total strong{font-size:18px;margin-left:8px}
.review-log{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.review-log small{color:#8b94a5}
.btn-approve,.btn-reject{border:0;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:600;cursor:pointer;color:#fff}
.btn-approve{background:#16a34a}
.btn-reject{background:#dc2626}
body.dark .item-product,body.dark .item-qty{background:#202b3b;border-color:#303d51;color:#e5e7eb}
.item-stock{display:block;margin-top:4px;font-size:10px}
.perm-table th,.perm-table td{text-align:center;vertical-align:middle}
.perm-table th:first-child,.perm-table td:first-child{text-align:left}
.perm-table input[type=checkbox]{width:16px;height:16px}
@media(min-width:761px){
    .sidebar,.main{transition:transform .25s ease,margin-left .25s ease,width .25s ease}
    body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
    body.sidebar-collapsed .main{margin-left:0;width:100%}
}