:root{--bg: #f0fdf4;--panel: #ecfdf5;--card: #ffffff;--muted: #6b7280;--text: #065f46;--text-weak: #047857;--brand: #34d399;--brand-2: #10b981;--border: #d1fae5;--danger: #ef4444;--success: #16a34a;--radius: 16px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);--shadow-md: 0 6px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .1);--tap: .96}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 800px at 10% -10%,#bbf7d0,var(--bg)),radial-gradient(1200px 800px at 110% 0%,#86efac,var(--bg));color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1100px;margin:0 auto;padding:20px clamp(16px,3vw,28px)}.panel{margin-top:16px;padding:clamp(16px,2.6vw,28px);background:linear-gradient(180deg,#ffffff80,#ffffff59);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm)}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:var(--radius);background:linear-gradient(180deg,#fff9,#fff6);border:1px solid var(--border);box-shadow:var(--shadow-sm);position:sticky;top:12px;z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.brand{display:flex;align-items:center;gap:12px}.brand .logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 180deg,var(--brand),var(--brand-2));box-shadow:0 6px 20px #10b98140}.brand h1{margin:0;font-size:1.25rem;letter-spacing:.2px}.tabs{display:flex;gap:6px;padding:6px;background:#e9fbef;border-radius:12px;border:1px solid #c9f6da}.tab{appearance:none;border:0;padding:10px 14px;border-radius:10px;color:#0f5132;background:transparent;cursor:pointer;transition:transform .08s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.tab:hover{background:#10b98114}.tab:active{transform:scale(var(--tap))}.tab.active{background:linear-gradient(180deg,#dff7ea,#d3f3e2);color:#065f46;box-shadow:inset 0 0 0 1px #c2efd7}.h2{font-size:1.2rem;color:#065f46;margin:0 0 8px}.h3{color:#0b8a63;letter-spacing:.2px;margin:18px 0 10px}a{color:#0ea5e9;text-decoration:none}a:hover{text-decoration:underline}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.card{padding:14px 16px;background:linear-gradient(180deg,#fff,#fbfefb);border:1px solid #d9f6e6;border-radius:14px;box-shadow:0 6px 18px #10b98114;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#10b98159}.product-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:all .2s ease}.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.product-card .img-wrapper{position:relative;width:100%;height:160px;overflow:hidden;border-radius:10px}.product-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.product-card:hover img{transform:scale(1.05)}.status-pill{position:absolute;top:8px;left:8px;font-size:.75rem;padding:4px 8px;color:#fff;border-radius:6px;background:var(--success);box-shadow:0 2px 6px #0000001f}.status-pill.unavailable{background:var(--danger)}.product-info{margin-top:10px;flex-grow:1}.product-info .name{font-weight:600;font-size:1.05rem;margin-bottom:2px}.product-info .price{color:var(--text-weak);font-weight:500}.product-info .sku{font-size:.8rem;color:var(--muted);margin-top:4px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.btn{appearance:none;border:0;cursor:pointer;border-radius:12px;padding:10px 14px;font-weight:600;color:#fff;background:linear-gradient(180deg,#34d399,#10b981);box-shadow:0 8px 18px #10b98138;transition:transform .08s ease,box-shadow .18s ease,filter .18s ease}.btn:hover{filter:brightness(1.05);box-shadow:var(--shadow-md)}.btn:active{transform:scale(var(--tap))}.btn:disabled{opacity:.45;filter:grayscale(.2) saturate(.9);box-shadow:none;cursor:not-allowed}.btn.secondary{color:#065f46;background:linear-gradient(180deg,#e7f9ee,#ddf6e7);border:1px solid #c9f6da;box-shadow:none}.btn.small{padding:6px 10px;font-size:.85rem}.btn.success{background:linear-gradient(180deg,#16a34a,#15803d);color:#fff}.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff}dialog{border:none;border-radius:16px;padding:0;background:transparent}dialog::backdrop{background:#00000040;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal{background:var(--card);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow-lg);max-width:600px;width:100%;margin:auto}.row{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width: 640px){.row-2{grid-template-columns:1fr 1fr}}@media (min-width: 840px){.row-3{grid-template-columns:1fr 1fr 1fr}}.input,select{width:100%;height:40px;background:#f5fdf7;color:var(--text);border:1px solid #bfeeda;border-radius:10px;padding:8px 10px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.input:focus,select:focus{border-color:#10b9818c;box-shadow:0 0 0 3px #10b9812e}.pop{animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(.98);opacity:.7}to{transform:scale(1);opacity:1}}.error{border-left:3px solid var(--danger);color:var(--danger)}