:root{--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--surface:#fff;--canvas:#f5f7fb;--nav:#101827;--primary:#635bff;--primary-dark:#5148e5;--success:#0e9f6e;--warning:#e08a00;--danger:#dc4c64;--shadow:0 10px 35px rgba(17,24,39,.07)}
*{box-sizing:border-box}html{font-size:15px}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:linear-gradient(180deg,#111a2b,#0d1422);color:#cbd5e1;display:flex;flex-direction:column;padding:24px 18px;z-index:1050}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 28px;color:white;text-decoration:none;font-size:1.35rem;font-weight:750;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:linear-gradient(135deg,#756dff,#9d69f7);box-shadow:0 7px 20px #5f57ff55}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-label{font-size:.7rem;color:#667085;letter-spacing:.12em;font-weight:700;padding:10px 13px}.side-nav a,.disabled-link{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;color:#aeb9ca;text-decoration:none;font-weight:550;transition:.18s}.side-nav a:hover,.side-nav a.active{background:#ffffff13;color:white}.side-nav a.active{box-shadow:inset 3px 0 var(--primary)}.side-nav a span,.disabled-link span{width:19px;text-align:center;font-size:1.15rem}.disabled-link{opacity:.48}.disabled-link small{margin-left:auto;font-size:.62rem}.sidebar-user{margin-top:auto;border-top:1px solid #ffffff14;padding:18px 6px 0;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#334155;color:white;font-weight:700}.sidebar-user>div:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column}.sidebar-user strong{color:white;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{font-size:.73rem;color:#77869d}.logout-btn{border:0;background:transparent;color:#8492a6;font-size:1.2rem}.main-area{margin-left:252px;width:calc(100% - 252px);min-height:100vh}.topbar{height:91px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;gap:18px}.topbar h1{font-size:1.42rem;margin:2px 0 0;font-weight:730;letter-spacing:-.025em}.eyebrow{color:var(--primary);font-size:.66rem;font-weight:800;letter-spacing:.11em}.topbar-date{margin-left:auto;color:var(--muted);font-size:.84rem}.mobile-menu{display:none;border:0;background:none;font-size:1.4rem}.content{padding:30px 34px 60px;max-width:1600px;margin:auto}.page-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:18px}.btn{border-radius:9px;font-weight:650;padding:.58rem .9rem}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.btn-soft{background:#f0efff;color:var(--primary);border:1px solid #dedcff}.panel{background:var(--surface);border:1px solid #e7e9ef;border-radius:15px;box-shadow:var(--shadow)}.panel-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}.panel-head h2{font-size:1rem;margin:0;font-weight:730}.panel-body{padding:22px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:20px}.metric{background:#fff;border:1px solid #e7e9ef;border-radius:15px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}.metric .label{font-size:.76rem;text-transform:uppercase;letter-spacing:.055em;color:var(--muted);font-weight:700}.metric .value{font-size:1.65rem;font-weight:770;letter-spacing:-.04em;margin-top:10px}.metric .hint{font-size:.74rem;color:var(--muted);margin-top:6px}.metric .icon{position:absolute;right:16px;top:17px;width:38px;height:38px;border-radius:11px;background:#f0efff;color:var(--primary);display:grid;place-items:center;font-size:1.15rem}.metric.warning .icon{background:#fff5df;color:var(--warning)}.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-bottom:20px}.chart{height:240px;display:flex;align-items:flex-end;gap:14px;padding-top:15px}.chart-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;min-width:0}.chart-bar{width:min(42px,70%);min-height:4px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#817aff,var(--primary));transition:.2s}.chart-col small{font-size:.68rem;color:var(--muted);white-space:nowrap}.table{margin:0}.table>:not(caption)>*>*{padding:.83rem .9rem;border-bottom-color:#edf0f4;vertical-align:middle}.table thead th{color:#7b8495;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;font-weight:750;background:#fafbfc;border-bottom:1px solid var(--line)}.table tbody td{font-size:.86rem}.product-cell{display:flex;align-items:center;gap:11px}.product-thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#eef1f6}.placeholder-thumb{display:grid;place-items:center;color:#aab2c0;font-weight:800}.product-cell strong{display:block}.product-cell small{color:var(--muted)}.badge-stock{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:.69rem;font-weight:700}.badge-in{background:#e7f8f1;color:#087a54}.badge-low{background:#fff5df;color:#a76500}.badge-out{background:#feecef;color:#b32740}.badge-off{background:#edf0f4;color:#667085}.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px}.search-wrap{position:relative;flex:1;max-width:540px}.search-wrap input{padding-left:39px}.search-wrap:before{content:'⌕';position:absolute;left:14px;top:7px;font-size:1.35rem;color:#8b95a5}.form-control,.form-select{border-color:#dfe3ea;border-radius:9px;padding:.62rem .76rem}.form-control:focus,.form-select:focus{border-color:#8b84ff;box-shadow:0 0 0 .2rem #635bff1c}.form-label{font-size:.78rem;font-weight:700;color:#475467}.field-hint{color:var(--muted);font-size:.73rem}.validation-summary-errors{background:#fff0f2;color:#a8283e;border:1px solid #ffd5dc;border-radius:9px;padding:11px 15px;margin-bottom:18px}.validation-summary-errors ul{margin:0}.text-danger{font-size:.75rem}.pagination .page-link{color:var(--ink);border-color:var(--line)}.pagination .active .page-link{background:var(--primary);border-color:var(--primary)}.empty-state{text-align:center;padding:55px 20px;color:var(--muted)}.empty-state b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:5px}.app-toast{position:fixed;right:25px;bottom:25px;z-index:2000;background:#162033;color:#fff;border-radius:11px;padding:13px 17px;box-shadow:0 15px 50px #0003;animation:toastIn .25s ease}.app-toast b{display:inline-grid;place-items:center;margin-right:8px;width:20px;height:20px;border-radius:50%;background:var(--success)}.app-toast.error b{background:var(--danger)}@keyframes toastIn{from{transform:translateY(15px);opacity:0}}
.detail-hero{display:grid;grid-template-columns:310px 1fr;gap:26px}.gallery-main{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;background:#f0f2f6}.thumb-row{display:flex;gap:8px;margin-top:9px}.thumb-row img{width:52px;height:52px;object-fit:cover;border-radius:8px;border:2px solid transparent}.detail-meta h2{font-size:1.65rem;font-weight:760}.stock-number{font-size:2.35rem;font-weight:780;letter-spacing:-.05em}.quick-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.image-manage{display:flex;gap:12px;flex-wrap:wrap}.image-card{position:relative;width:145px}.image-card img{width:145px;height:120px;border-radius:10px;object-fit:cover}.image-card .main-tag{position:absolute;top:7px;left:7px;background:#171d2bcc;color:#fff;border-radius:99px;padding:3px 7px;font-size:.62rem}.image-buttons{display:flex;gap:5px;margin-top:6px}.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}.login-art{background:radial-gradient(circle at 25% 20%,#6c64ff,#251d65 50%,#111827);color:white;padding:70px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.login-art:after{content:'';position:absolute;width:520px;height:520px;border:1px solid #ffffff1c;border-radius:50%;right:-150px;bottom:-160px;box-shadow:0 0 0 80px #ffffff08,0 0 0 160px #ffffff05}.login-art h1{font-size:3.2rem;line-height:1.05;letter-spacing:-.055em;max-width:580px;position:relative;z-index:1}.login-art p{color:#d5d2ff;max-width:500px;font-size:1.02rem}.login-form-wrap{display:grid;place-items:center;padding:35px}.login-form{width:min(420px,100%)}.login-form h2{font-size:2rem;font-weight:770;letter-spacing:-.04em}.login-form .brand{color:var(--ink);padding:0 0 55px}.login-form .btn{padding:.8rem}.report-filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr auto;gap:10px;align-items:end}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:19px 0}.mini-stat{padding:18px}.mini-stat small{color:var(--muted);display:block}.mini-stat strong{font-size:1.35rem}.modal-content{border:0;border-radius:15px;box-shadow:0 25px 80px #11182744}.modal-header,.modal-footer{border-color:var(--line)}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.report-filters{grid-template-columns:1fr 1fr 1fr}.detail-hero{grid-template-columns:240px 1fr}.login-art{padding:45px}.login-art h1{font-size:2.5rem}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.22s}.sidebar.open{transform:none}.main-area{margin-left:0;width:100%}.mobile-menu{display:block}.topbar{height:76px;padding:0 18px}.topbar-date{display:none}.content{padding:20px 15px 45px}.dashboard-grid{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-art{display:none}.detail-hero{grid-template-columns:1fr}.detail-hero>div:first-child{max-width:350px}.table-responsive{border-radius:12px}.report-filters{grid-template-columns:1fr 1fr}.stat-row{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.metric-grid,.stat-row,.report-filters{grid-template-columns:1fr}.metric .value{font-size:1.45rem}.toolbar{align-items:stretch;flex-direction:column}.search-wrap{max-width:none}.page-actions{justify-content:stretch}.page-actions .btn{flex:1}.login-form-wrap{padding:24px}.quick-actions .btn{flex:1}}
.nav-icon,.metric-icon{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.metric-icon{width:21px;height:21px}
.brand-logo{display:block;width:auto;height:46px;max-width:108px;object-fit:contain;mix-blend-mode:screen}.login-form .brand-logo{filter:invert(1);mix-blend-mode:multiply}
.selected-image-list{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.selected-image-list[hidden]{display:none}.selected-image-card{display:flex;align-items:center;gap:11px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:11px;background:#fafbfc}.selected-image-card img{width:62px;height:52px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:#eef1f6}.selected-image-details{display:flex;min-width:0;flex:1;flex-direction:column}.selected-image-details strong{overflow:hidden;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.selected-image-details small{color:var(--muted);font-size:.7rem}
.selected-image-placeholder{display:grid;width:62px;height:52px;flex:0 0 auto;place-items:center;border-radius:8px;background:#eef1f6;color:var(--muted);font-size:.65rem;text-align:center}