:root{--bg:#f4f7fb;--card:#fff;--ink:#172033;--muted:#667085;--brand:#6c5ce7;--danger:#d64545}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px system-ui,sans-serif}header{height:62px;background:#171b2d;color:#fff;display:flex;align-items:center;gap:16px;padding:0 22px;position:sticky;top:0;z-index:3}header strong{font-size:20px}header span{margin-left:auto;color:#d9d8ff}button,a{cursor:pointer}header button{background:none;color:#fff;border:0;font-size:25px}aside{position:fixed;top:62px;bottom:0;width:230px;background:#202640;padding:20px 12px;transition:.2s;z-index:2}aside a{display:block;color:#e9ebff;padding:13px 14px;text-decoration:none;border-radius:10px;margin-bottom:5px}aside a:hover{background:#343b63}main{margin-left:230px;padding:28px;max-width:1200px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.card{background:var(--card);padding:20px;border-radius:16px;box-shadow:0 5px 22px #19204010;margin-bottom:18px}h1{margin-top:0}label{display:block;margin:12px 0 5px;color:var(--muted)}input,select{width:100%;padding:11px;border:1px solid #d8deeb;border-radius:9px;font:inherit}button.primary{background:var(--brand);color:#fff;border:0;padding:11px 18px;border-radius:9px;font-weight:700;margin-top:15px}.muted{color:var(--muted)}.error{color:var(--danger)}.success{color:#188b52}.product{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #e6eaf1;padding:14px 0}.price{font-weight:700;color:#b55700}table{width:100%;border-collapse:collapse}td,th{text-align:left;border-bottom:1px solid #e6eaf1;padding:10px}@media(max-width:700px){aside{transform:translateX(-100%)}aside.open{transform:none}main{margin-left:0;padding:18px}.product{align-items:flex-start;flex-direction:column}}