:root{
  --primary:#E9B8C6; --secondary:#9CB5A0; --ink:#2A2626; --paper:#FAF9FB; --muted:#F1EEF1;
  --card:#FFFFFF; --ring: rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:linear-gradient(180deg, var(--paper), #ffffff);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.header{position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #eee;z-index:50}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
.brand img{width:52px;height:52px;border-radius:14px;object-fit:cover;box-shadow:0 2px 6px var(--ring);border:1px solid #eee}
.menu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid #e6e3e6;background:#fff;cursor:pointer;transition:.2s box-shadow,.2s transform,.2s background}
.btn:hover{box-shadow:0 6px 18px var(--ring);transform:translateY(-1px)}
.btn.primary{background:var(--primary);border-color:var(--primary)}
.btn.ghost{background:transparent;border-color:#e9e9e9}
.badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--muted);font-size:12px}
.hero{padding:42px 0 22px}
.hero h1{font-size:30px;margin:8px 0 6px}
.hero p{opacity:.8;margin:0}
.grid{display:grid;gap:18px}
@media(min-width:720px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)}}
.card{border:1px solid #eee;border-radius:18px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;box-shadow:0 8px 24px var(--ring)}
.card .content{padding:16px}
.card h3{margin:0 0 6px;font-size:18px}
.price{font-weight:800}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{height:16px}
.footer{border-top:1px solid #eee;margin-top:32px;padding:28px 0;color:#6b6b6b;font-size:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:#222;color:#fff;padding:10px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,-6px)}
.input, textarea{width:100%;padding:12px 14px;border:1px solid #e5e5e5;border-radius:12px;background:#fff;outline:none}
.input:focus, textarea:focus{border-color:var(--secondary); box-shadow:0 0 0 4px rgba(156,181,160,.18)}
label{font-size:13px;color:#555}
.form-field{display:flex;flex-direction:column;gap:6px}
.section{padding:10px 0}
.small{font-size:12px;color:#777}
.table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px var(--ring)}
.table th,.table td{border-bottom:1px solid #f1f1f1;padding:10px 8px;text-align:left}
.table thead{background:#fafafa}
.cart-panel{position:fixed;inset:0;display:none;z-index:80}
.cart-panel.open{display:block}
.cart-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.cart-sheet{position:absolute;right:0;top:0;height:100%;width:min(520px,100%);background:#fff;border-left:1px solid #eee;display:flex;flex-direction:column}
.cart-sheet header{padding:12px 16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.cart-items{padding:12px 16px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px}
.cart-item{display:flex;gap:12px;border:1px solid #f0f0f0;border-radius:12px;padding:8px}