:root{--bg-main:#fff;--bg-alt:#f9fafb;--border:#e5e7eb;--text-main:#111827;--text-muted:#6b7280;--accent:#0f172a;--accent-hover:#334155;--danger:#ef4444}body{background-color:var(--bg-alt);color:var(--text-main);margin:0;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#app-layout{width:100vw;height:100vh;display:flex}#sidebar{background-color:var(--bg-main);border-right:1px solid var(--border);white-space:nowrap;flex-direction:column;width:0;padding:0;transition:width .3s,padding .3s;display:none;overflow:hidden}#sidebar.open{width:240px;padding:20px}.sidebar-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.nav-links{flex-direction:column;gap:8px;display:flex}.nav-item{color:var(--text-muted);border-radius:6px;padding:10px 12px;font-weight:500;text-decoration:none;transition:all .2s}.nav-item:hover,.nav-item.active{background-color:var(--bg-alt);color:var(--accent)}#main-container{flex-direction:column;flex:1;display:flex;overflow-y:auto}#topbar{background-color:var(--bg-main);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:15px 30px;display:flex}.topbar-left,.topbar-right{align-items:center;gap:15px;display:flex}#topbar h1{letter-spacing:-.5px;font-size:1.25rem;font-weight:700}.profile-container{position:relative}.dropdown-content{background-color:var(--bg-main);border:1px solid var(--border);z-index:100;border-radius:6px;min-width:150px;margin-top:8px;display:none;position:absolute;top:100%;right:0;box-shadow:0 4px 6px -1px #0000001a}.dropdown-content.show{display:block}.dropdown-item{text-align:left;cursor:pointer;width:100%;color:var(--danger);background:0 0;border:none;padding:10px 15px;font-weight:500}.dropdown-item:hover{background-color:var(--bg-alt)}#app-content{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:30px}.icon-btn{color:var(--text-main);cursor:pointer;background:0 0;border:none;padding:5px;font-size:1.25rem}.btn{background-color:var(--accent);color:#fff;border:1px solid var(--accent);cursor:pointer;border-radius:6px;padding:8px 16px;font-weight:500;transition:all .2s}.btn:hover{background-color:var(--accent-hover)}.btn.outline{color:var(--accent);background-color:#0000}.btn.outline:hover{background-color:var(--bg-alt)}.btn.danger{background-color:var(--danger);border-color:var(--danger)}.input{border:1px solid var(--border);background:var(--bg-main);box-sizing:border-box;border-radius:6px;width:100%;padding:10px 12px}.input:focus{outline:2px solid var(--accent);outline-offset:-1px}.card-container{flex-wrap:wrap;gap:20px;display:flex}.card{background-color:var(--bg-main);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:calc(33.333% - 20px);min-width:250px;padding:20px;display:flex;box-shadow:0 1px 3px #0000000d}.table-wrapper{background:var(--bg-main);border:1px solid var(--border);border-radius:8px;margin-top:15px;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th,td{border-bottom:1px solid var(--border);padding:12px 15px}th{background-color:var(--bg-alt);font-weight:600}@media (width<=768px){#topbar,#app-content{padding:15px}.card{flex:100%}#sidebar.open{z-index:50;height:100%;position:absolute}.auth-forms{flex-direction:column}}.auth-forms{gap:30px;display:flex}.auth-forms>div{background:var(--bg-main);border:1px solid var(--border);border-radius:8px;flex:1;padding:25px}.cart-badge{background-color:var(--danger);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;font-weight:700;display:flex;position:absolute;top:-5px;right:-8px}.cart-btn-wrapper{position:relative}.modal-backdrop{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--bg-main);border-radius:8px;min-width:300px;padding:25px;box-shadow:0 5px 15px #0000004d}.qty-control{justify-content:center;align-items:center;gap:15px;margin:20px 0;display:flex}.qty-input{text-align:center;width:50px;font-weight:700}.product-img{object-fit:cover;border-bottom:1px solid var(--border);background-color:var(--bg-alt);border-radius:8px 8px 0 0;width:calc(100% + 40px);height:200px;margin:-20px -20px 15px}.thumbnail{object-fit:cover;border:1px solid var(--border);background-color:var(--bg-alt);border-radius:6px;width:50px;height:50px}.cart-item-info{align-items:center;gap:15px;display:flex}.form-img-preview{object-fit:cover;border:1px solid var(--border);background-color:var(--bg-alt);border-radius:6px;width:80px;height:80px;display:none}.product-img{object-fit:contain;border-bottom:1px solid var(--border);background-color:var(--bg-alt);cursor:pointer;border-radius:8px 8px 0 0;width:calc(100% + 40px);height:200px;margin:-20px -20px 15px;transition:opacity .2s}.product-img:hover{opacity:.8}.modal-img-preview{object-fit:contain;border-radius:8px;max-width:90vw;max-height:80vh;margin:0 auto;display:block}