:root{--s2: 2px;--s4: 4px;--s8: 8px;--s12: 12px;--s16: 16px;--s20: 20px;--s24: 24px;--s32: 32px;--s40: 40px;--s48: 48px;--radius: 10px;--card-radius: 16px;--pill-radius: 999px;--fs-xs: 10px;--fs-sm: 12px;--fs-base: 14px;--fs-md: 16px;--fs-lg: 18px;--fs-xl: 20px;--fs-xxl: 24px;--fs-xxxl: 32px;--fs-display: 40px;--shadow-light: 0 2px 4px rgba(0, 0, 0, .06);--shadow-medium: 0 4px 8px rgba(0, 0, 0, .1);--shadow-card: 0 6px 12px rgba(0, 0, 0, .07);--shadow-dark: 0 8px 14px rgba(0, 0, 0, .18);--anim-fast: .15s;--anim-normal: .25s;--anim-slow: .4s}:root,[data-theme=light]{--primary: #0f0f10;--primary-muted: #1f1f22;--secondary: #8b7355;--accent: #d4af37;--background: #ffffff;--surface: #ffffff;--card-bg: #f6f6f7;--input-bg: #f2f2f4;--text: #0f0f10;--text-secondary: #6b6b70;--text-muted: #9b9ba1;--border: #e5e5e8;--border-strong: #d6d6da;--error: #e11d48;--success: #10b981;--warning: #f59e0b;--info: #3b82f6;--overlay: rgba(15, 15, 16, .45);--on-primary: #ffffff;--sidebar-bg: #0f0f10;--sidebar-text: rgba(255, 255, 255, .62);--sidebar-text-active: #ffffff;--sidebar-active-bg: rgba(255, 255, 255, .08);--sidebar-border: rgba(255, 255, 255, .08)}[data-theme=dark]{--primary: #ffffff;--primary-muted: #e5e5e8;--secondary: #c9a57e;--accent: #e5c158;--background: #0b0b0d;--surface: #15151a;--card-bg: #1b1b22;--input-bg: #22222a;--text: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--border: #27272f;--border-strong: #35353f;--error: #fb7185;--success: #34d399;--warning: #fbbf24;--info: #60a5fa;--overlay: rgba(0, 0, 0, .6);--on-primary: #0b0b0d;--sidebar-bg: #15151a;--sidebar-text: rgba(255, 255, 255, .55);--sidebar-text-active: #ffffff;--sidebar-active-bg: rgba(255, 255, 255, .06);--sidebar-border: rgba(255, 255, 255, .06)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--background);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--fs-base);line-height:1.45;-webkit-font-smoothing:antialiased;transition:background var(--anim-normal),color var(--anim-normal)}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--background)}.eyebrow,.overline{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary)}.h1{font-size:var(--fs-xxxl);font-weight:800;letter-spacing:-.5px;margin:0}.h2{font-size:var(--fs-xxl);font-weight:700;letter-spacing:-.3px;margin:0}.h3{font-size:var(--fs-xl);font-weight:700;margin:0}.muted{color:var(--text-secondary)}.muted-2{color:var(--text-muted)}.app-shell{display:flex;min-height:100vh}.sidebar{width:256px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar-brand{padding:var(--s24) var(--s20) var(--s20);display:flex;align-items:center;gap:var(--s12)}.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#0f0f10;display:grid;place-items:center;font-weight:800;font-size:var(--fs-xl)}.brand-name{color:#fff;font-weight:800;font-size:var(--fs-lg);letter-spacing:-.3px}.brand-sub{color:#ffffff80;font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.nav-section{padding:var(--s8) var(--s12);flex:1;overflow-y:auto}.nav-label{color:#ffffff59;font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:var(--s16) var(--s12) var(--s8)}.nav-item{display:flex;align-items:center;gap:var(--s12);padding:var(--s12);border-radius:var(--radius);color:var(--sidebar-text);font-weight:600;font-size:var(--fs-base);margin-bottom:2px;transition:background var(--anim-fast),color var(--anim-fast)}.nav-item:hover{color:#fff;background:var(--sidebar-active-bg)}.nav-item.active{color:var(--sidebar-text-active);background:var(--sidebar-active-bg)}.nav-item .nav-icon{font-size:20px;display:grid;place-items:center}.nav-badge{margin-left:auto;background:var(--accent);color:#0f0f10;font-size:var(--fs-xs);font-weight:800;padding:2px 7px;border-radius:999px}.sidebar-footer{border-top:1px solid var(--sidebar-border);padding:var(--s16)}.sidebar-user{display:flex;align-items:center;gap:var(--s12)}.avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#0f0f10;display:grid;place-items:center;font-weight:800;flex-shrink:0}.sidebar-user .name{color:#fff;font-weight:700;font-size:var(--fs-base)}.sidebar-user .email{color:#ffffff80;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);padding:var(--s20) var(--s32);border-bottom:1px solid var(--border);background:var(--background);position:sticky;top:0;z-index:20}.topbar .title-block .eyebrow{margin-bottom:4px}.topbar h1{font-size:var(--fs-xxl);font-weight:800;letter-spacing:-.4px;margin:0}.topbar .subtitle{color:var(--text-secondary);font-size:var(--fs-base);margin-top:2px}.topbar-actions{display:flex;align-items:center;gap:var(--s12)}.icon-button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--card-bg);color:var(--text);display:grid;place-items:center;font-size:20px;position:relative;transition:background var(--anim-fast),border var(--anim-fast)}.icon-button:hover{border-color:var(--border-strong)}.page{padding:var(--s32);flex:1}.page-narrow{max-width:920px}.search{display:flex;align-items:center;gap:var(--s8);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--pill-radius);padding:10px 16px;min-width:260px}.search svg{color:var(--text-secondary);font-size:18px;flex-shrink:0}.search input{border:none;outline:none;background:transparent;color:var(--text);font-size:var(--fs-base);width:100%}.search input::placeholder{color:var(--text-muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-card)}.card-pad{padding:var(--s20)}.grid{display:grid;gap:var(--s20)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}@media (max-width: 1100px){.cols-4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 720px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}.stat{display:flex;flex-direction:column;gap:var(--s12);padding:var(--s20)}.stat .stat-top{display:flex;align-items:center;justify-content:space-between}.stat .stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px}.stat .stat-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary)}.stat .stat-value{font-size:var(--fs-xxxl);font-weight:800;letter-spacing:-.8px}.trend{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-sm);font-weight:700;padding:2px 8px;border-radius:999px}.trend.up{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}.trend.down{color:var(--error);background:color-mix(in srgb,var(--error) 14%,transparent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);border:1px solid transparent;border-radius:var(--radius);padding:11px 18px;font-size:var(--fs-base);font-weight:700;white-space:nowrap;transition:opacity var(--anim-fast),background var(--anim-fast),border var(--anim-fast)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover:not(:disabled){opacity:.88}.btn-accent{background:var(--accent);color:#0f0f10}.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text)}.btn-outline:hover:not(:disabled){background:var(--card-bg)}.btn-ghost{background:var(--card-bg);color:var(--text)}.btn-ghost:hover:not(:disabled){background:var(--input-bg)}.btn-danger{background:transparent;border-color:var(--error);color:var(--error)}.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--error) 12%,transparent)}.btn-sm{padding:7px 12px;font-size:var(--fs-sm)}.btn svg{font-size:18px}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse}table.data thead th{text-align:left;font-size:var(--fs-xs);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);padding:var(--s12) var(--s16);border-bottom:1px solid var(--border);white-space:nowrap}table.data tbody td{padding:var(--s12) var(--s16);border-bottom:1px solid var(--border);font-size:var(--fs-base);vertical-align:middle}table.data tbody tr{transition:background var(--anim-fast)}table.data tbody tr:hover{background:var(--card-bg)}table.data tbody tr.clickable{cursor:pointer}.cell-strong{font-weight:700}.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--card-bg);flex-shrink:0}.cell-product{display:flex;align-items:center;gap:var(--s12)}.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.4px;padding:4px 9px;border-radius:999px;text-transform:uppercase}.dot{width:7px;height:7px;border-radius:50%}.brand-pill{font-size:var(--fs-xs);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary)}.field{margin-bottom:var(--s20)}.field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--s8);color:var(--text)}.input,.textarea,.select{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;color:var(--text);font-size:var(--fs-base);outline:none;transition:border var(--anim-fast)}.input:focus,.textarea:focus,.select:focus{border-color:var(--accent)}.textarea{resize:vertical;min-height:96px}.chip-row{display:flex;flex-wrap:wrap;gap:var(--s8)}.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--text);font-size:var(--fs-sm);font-weight:600}.chip.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:grid;place-items:center;z-index:100;padding:var(--s20);animation:fade var(--anim-fast) ease}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-dark);width:100%;max-width:440px;padding:var(--s24);animation:pop var(--anim-normal) cubic-bezier(.2,.9,.3,1.2)}.modal h3{margin:0 0 var(--s8);font-size:var(--fs-xl);font-weight:800}.modal p{margin:0 0 var(--s24);color:var(--text-secondary)}.modal-actions{display:flex;gap:var(--s12);justify-content:flex-end}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.98)}}.toast-viewport{position:fixed;bottom:28px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:200;padding:0 var(--s16)}.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--s12);background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-dark);padding:12px 14px;max-width:460px;width:100%;animation:slideUp var(--anim-normal) cubic-bezier(.2,.9,.3,1.1)}.toast .toast-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;flex-shrink:0}.toast .toast-msg{flex:1;font-weight:500}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}@media (max-width: 860px){.login-shell{grid-template-columns:1fr}.login-hero{display:none}}.login-hero{background:var(--primary);color:#fff;padding:var(--s48);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}[data-theme=light] .login-hero{background:#0f0f10}.login-hero .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%);bottom:-120px;right:-80px}.login-hero .brand-name,.login-hero h1{color:#fff}.login-form-side{display:grid;place-items:center;padding:var(--s32);background:var(--background)}.login-card{width:100%;max-width:380px}.row{display:flex;align-items:center}.gap-8{gap:var(--s8)}.gap-12{gap:var(--s12)}.gap-16{gap:var(--s16)}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.mt-8{margin-top:var(--s8)}.mt-16{margin-top:var(--s16)}.mt-24{margin-top:var(--s24)}.mb-16{margin-bottom:var(--s16)}.mb-24{margin-bottom:var(--s24)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s16)}.section-title h3{font-size:var(--fs-lg);font-weight:800}.empty{text-align:center;padding:var(--s48) var(--s16);color:var(--text-secondary)}.empty .empty-icon{font-size:44px;color:var(--text-muted);margin-bottom:var(--s12)}.chart{display:flex;align-items:flex-end;gap:var(--s12);height:200px;padding-top:var(--s16)}.chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s8)}.chart .bar{width:100%;max-width:38px;background:var(--primary);border-radius:8px 8px 0 0;transition:height var(--anim-slow);min-height:4px}.chart .bar.accent{background:var(--accent)}.chart .bar-label{font-size:var(--fs-xs);color:var(--text-secondary);font-weight:600}.switch{width:46px;height:28px;border-radius:999px;background:var(--border-strong);position:relative;transition:background var(--anim-fast);flex-shrink:0;border:none;padding:0;display:inline-block}.switch.on{background:var(--accent)}.switch .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--anim-fast);box-shadow:var(--shadow-light)}.switch.on .knob{transform:translate(18px)}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s16) 0;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:none}.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.kv:last-child{border-bottom:none}.kv .k{color:var(--text-secondary)}.kv .v{font-weight:700}