*{box-sizing:border-box;margin:0;padding:0}body{color:#2d3436;background:#f5f6fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{min-height:100vh;display:flex}.sidebar{color:#fff;background:#714b67;flex-shrink:0;width:220px;padding:20px 0}.sidebar h2{border-bottom:1px solid #fff3;margin-bottom:10px;padding:0 20px 15px;font-size:16px}.sidebar a{color:#fffc;align-items:center;gap:10px;padding:10px 20px;font-size:14px;text-decoration:none;transition:background .2s;display:flex}.sidebar a svg{flex-shrink:0}.sidebar a:hover,.sidebar a.active{color:#fff;background:#ffffff26}.main-content{flex:1;padding:24px 32px;overflow-y:auto}.topbar{background:#fff;border-bottom:1px solid #eee;flex-shrink:0;align-items:center;height:52px;padding:0 24px;display:flex}.user-menu{position:relative}.user-menu-btn{cursor:pointer;color:#2d3436;background:0 0;border:1px solid #eee;border-radius:8px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;transition:background .15s;display:flex}.user-menu-btn:hover{background:#f8f9fa}.user-avatar{border-radius:50%;width:26px;height:26px}.user-menu-email{text-overflow:ellipsis;white-space:nowrap;max-width:180px;overflow:hidden}.user-dropdown{z-index:50;background:#fff;border-radius:8px;min-width:220px;margin-top:6px;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 4px 16px #0000001f}.user-dropdown-header{border-bottom:1px solid #eee;padding:12px 16px}.user-dropdown-item{text-align:left;color:#d63031;cursor:pointer;background:0 0;border:none;width:100%;padding:10px 16px;font-size:14px;display:block}.user-dropdown-item:hover{background:#f8f9fa}.page-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.page-header h1{font-size:22px;font-weight:600}.btn{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:opacity .2s}.btn:hover{opacity:.85}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:#714b67}.btn-danger{color:#fff;background:#d63031}.btn-secondary{color:#fff;background:#636e72}.btn-success{color:#fff;background:#00b894}.btn-sm{padding:5px 10px;font-size:12px}.card{background:#fff;border-radius:8px;margin-bottom:16px;padding:20px;box-shadow:0 1px 4px #00000014}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid #eee;padding:10px 12px;font-size:14px}th{color:#636e72;text-transform:uppercase;font-size:12px;font-weight:600}.modal-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:10px;min-width:400px;max-width:600px;max-height:90vh;padding:24px;overflow-y:auto;box-shadow:0 4px 20px #00000026}.form-group{margin-bottom:14px}.form-group label{color:#636e72;margin-bottom:4px;font-size:13px;font-weight:500;display:block}.form-group input,.form-group select{border:1px solid #ddd;border-radius:6px;width:100%;padding:8px 10px;font-size:14px}.search-bar{gap:8px;margin-bottom:20px;display:flex}.search-bar input{border:1px solid #ddd;border-radius:8px;outline:none;flex:1;padding:10px 16px;font-size:15px;transition:border-color .2s}.search-bar input:focus{border-color:#714b67}.product-thumb{object-fit:contain;background:#f8f9fa;border-radius:4px;width:40px;height:40px}.product-image-lg{object-fit:contain;background:#f8f9fa;border:1px solid #eee;border-radius:8px;width:200px;height:200px}.product-header{gap:24px;margin-bottom:20px;display:flex}.product-fields{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.field-label{color:#636e72;text-transform:uppercase;font-size:12px;font-weight:600}.field-value{margin-top:2px;font-size:15px}.pagination{color:#636e72;justify-content:center;align-items:center;gap:8px;margin-top:16px;font-size:14px;display:flex}.login-page{background:linear-gradient(135deg,#714b67,#875a7b);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{text-align:center;background:#fff;border-radius:16px;width:90%;max-width:400px;padding:40px;box-shadow:0 8px 32px #00000026}.login-card h1{margin-bottom:8px;font-size:24px}.login-card p{color:#636e72;margin-bottom:24px;font-size:14px}.google-btn{cursor:pointer;color:#2d3436;background:#fff;border:2px solid #ddd;border-radius:8px;align-items:center;gap:10px;padding:12px 24px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.google-btn:hover{border-color:#714b67;box-shadow:0 2px 8px #714b6733}.toast{color:#fff;z-index:200;border-radius:8px;padding:12px 20px;font-size:14px;animation:.3s fadeIn;position:fixed;bottom:20px;right:20px}.toast-error{background:#d63031}.toast-success{background:#00b894}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spinner{border:3px solid #dfe6e9;border-top-color:#714b67;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.qty-edit{align-items:center;gap:6px;display:flex}.qty-edit input{border:1px solid #ddd;border-radius:4px;width:80px;padding:4px 8px;font-size:14px}tr.clickable{cursor:pointer}tr.clickable:hover{background:#f8f9fa}.menu-toggle{color:#714b67;cursor:pointer;background:0 0;border:none;padding:4px;display:none}.sidebar-overlay{display:none}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (width<=768px){.app{flex-direction:column}.sidebar{z-index:100;width:260px;height:100vh;padding-top:16px;transition:left .25s;position:fixed;top:0;left:-260px}.sidebar.open{left:0}.sidebar-overlay{z-index:99;background:#0006;display:none;position:fixed;inset:0}.sidebar-overlay.open,.menu-toggle{display:block}.topbar{padding:0 12px}.user-menu-email{display:none}.main-content{padding:16px 12px}.page-header{flex-direction:column;align-items:flex-start;gap:10px}.page-header h1{font-size:18px}.search-bar{flex-direction:column}.search-bar input{font-size:16px}.card{padding:14px}table{min-width:600px}th,td{white-space:nowrap;padding:8px;font-size:13px}.product-header{flex-direction:column;align-items:center}.product-image-lg{width:150px;height:150px}.product-fields{grid-template-columns:repeat(2,1fr);gap:10px}.qty-edit{flex-wrap:wrap}.login-card{padding:24px 20px}.pagination{flex-wrap:wrap}.toast{text-align:center;bottom:12px;left:12px;right:12px}}@media (width<=400px){.product-fields{grid-template-columns:1fr}.product-image-lg{width:120px;height:120px}}.home-page{max-width:960px;margin:0 auto;padding:32px 24px}.home-title{color:#2d3436;margin-bottom:8px;font-size:28px;font-weight:700}.home-subtitle{color:#636e72;margin-bottom:32px;font-size:15px}.home-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;display:grid}.home-card{text-align:center;cursor:pointer;background:#fff;border:1px solid #dfe6e9;border-radius:12px;flex-direction:column;align-items:center;gap:12px;padding:28px 20px 24px;transition:box-shadow .15s,transform .15s;display:flex}.home-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.home-card-icon{border-radius:16px;justify-content:center;align-items:center;width:80px;height:80px;display:flex}.home-card-title{color:#2d3436;font-size:15px;font-weight:600}.home-card-desc{color:#636e72;font-size:13px;line-height:1.4}@media (width<=768px){.home-page{padding:20px 16px}.home-title{font-size:22px}.home-grid{grid-template-columns:repeat(2,1fr);gap:12px}.home-card{gap:8px;padding:18px 12px 16px}.home-card-icon{border-radius:12px;width:56px;height:56px}.home-card-icon svg{width:32px;height:32px}.home-card-title{font-size:13px}.home-card-desc{font-size:11px}}@media (width<=400px){.home-grid{grid-template-columns:repeat(2,1fr);gap:10px}.home-card{padding:14px 8px 12px}.home-card-icon{width:48px;height:48px}.home-card-icon svg{width:28px;height:28px}}