:root{
  --paper:#E4EAE1;
  --card:#FBF9F2;
  --ink:#16281F;
  --ink-soft:#425048;
  --teal:#0F6B5C;
  --teal-dark:#0B5347;
  --gold:#E8A93B;
  --pink:#C43F73;
  --line: rgba(22,40,31,0.16);
  --danger:#B23B2E;
  --radius: 4px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', Arial, sans-serif; font-size:15px; line-height:1.55;
}
h1,h2,h3,.display{ font-family:'Bricolage Grotesque', Georgia, serif; font-weight:700; letter-spacing:-0.01em; margin:0 0 6px; }
a{ color:var(--teal-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
.num{ font-variant-numeric: tabular-nums; }
img{ max-width:100%; display:block; }

header.top{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.top-inner{ max-width:1100px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-size:22px; }
.wordmark .dot{ color:var(--gold); }
.wordmark a{ color:inherit; text-decoration:none; }
nav.tabs{ display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; }
nav.tabs a{ padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
nav.tabs a.active{ background:var(--ink); color:var(--paper); }
.cart-link{ border:1px solid var(--ink); background:var(--ink); color:var(--paper) !important; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; }

main{ max-width:1100px; margin:0 auto; padding:28px 20px 80px; }

.hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:end; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:40px; line-height:1.05; }
.hero p{ color:var(--ink-soft); max-width:46ch; margin-top:12px; }
@media (max-width:760px){ .hero{ grid-template-columns:1fr; } .hero h1{ font-size:30px; } }

.receipt{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.receipt-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.receipt-row:last-child{ border-bottom:none; font-weight:700; }
.receipt-row.plain{ font-weight:400; }
.receipt-label{ color:var(--ink-soft); }

.store-bar{ display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.tile{ height:130px; display:flex; align-items:center; justify-content:center; position:relative; font-family:'Bricolage Grotesque'; font-weight:800; font-size:52px; color:rgba(255,255,255,0.92); background-size:cover; background-position:center; }
.tile::after{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 14px); }
.card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-cat{ font-size:11.5px; color:var(--ink-soft); }
.card-name{ font-weight:600; font-size:14.5px; line-height:1.3; }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price{ font-weight:700; font-size:17px; }

.btn{ display:inline-block; border:none; border-radius:var(--radius); padding:9px 14px; font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit; }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); color:#fff; text-decoration:none; }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-sm{ padding:6px 10px; font-size:12.5px; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

.stock-out{ font-size:12px; color:var(--danger); font-weight:600; }

.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:5px; max-width:420px; }
.field label{ font-size:13px; font-weight:600; }
.field .hint{ font-size:11.5px; color:var(--ink-soft); }
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=file],select,textarea{
  font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink); width:100%;
}
label.checkbox{ display:flex; align-items:center; gap:8px; font-weight:500; }

.section-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:22px; }
.section-box h3{ font-size:17px; margin-bottom:14px; }
.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.stat .label{ font-size:12px; color:var(--ink-soft); }
.stat .value{ font-family:'Bricolage Grotesque'; font-size:26px; font-weight:700; margin-top:4px; }
.stat .value.pink{ color:var(--pink); }
.stat .value.gold{ color:#a06e0f; }

table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
th{ font-size:11.5px; color:var(--ink-soft); font-weight:600; background:rgba(22,40,31,0.03); }
tr:last-child td{ border-bottom:none; }
table input[type=number]{ width:100px; }

.badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-pending{ background:#F1E3C0; color:#7A5A0A; }
.badge-info{ background:#D9E6E2; color:var(--teal-dark); }
.badge-shipped{ background:#DCE3F5; color:#2C4A9E; }
.badge-ok{ background:#DCEFD9; color:#256D2A; }
.badge-bad{ background:#F4D9D5; color:var(--danger); }

.link-box{ display:flex; align-items:center; gap:10px; background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius); padding:10px 12px; font-size:13.5px; flex-wrap:wrap; }

.notice{ padding:11px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13.5px; font-weight:600; }
.notice-ok{ background:#DCEFD9; color:#256D2A; }
.notice-bad{ background:#F4D9D5; color:var(--danger); }
.notice-info{ background:#D9E6E2; color:var(--teal-dark); }

.empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
.empty .display{ font-size:20px; color:var(--ink); margin-bottom:6px; }

.gate{ max-width:380px; margin:60px auto; text-align:center; }
.gate .display{ font-size:24px; margin-bottom:6px; }
.gate p{ color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }
.gate .field{ max-width:100%; text-align:left; }

.foot-note{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft); }

.subtabs{ display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px; width:fit-content; margin-bottom:20px; flex-wrap:wrap; }
.subtabs a{ padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
.subtabs a.active{ background:var(--ink); color:var(--paper); }

@media (max-width:640px){
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  tr{ border-bottom:1px solid var(--line); padding:10px 0; }
  td{ border:none; padding:3px 12px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
  td::before{ content:attr(data-label); font-weight:600; color:var(--ink-soft); font-size:11.5px; }
}