:root{
  --bg:#0e0f10; --card:#141519; --muted:#8d94a1; --text:#e9ecf1; --brand:#b3ff5a;
  --accent:#6cf; --border:#23262d;
}
:root.light{
  --bg:#f7f8fa; --card:#ffffff; --muted:#5b6573; --text:#101216; --brand:#1b1f23;
  --accent:#0066cc; --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Roboto;
  background:var(--bg); color:var(--text); line-height:1.65;
}
.container{width:min(1100px,92%); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg), transparent 10%) 0%, transparent 100%); border-bottom:1px solid var(--border)}
.header-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem .4rem}
.brand{display:flex; align-items:center; gap:.8rem}
.logo{width:40px; height:40px}
.brand-text h1{font-size:1.25rem; margin:.1rem 0 0 0}
.brand-text small{color:var(--muted)}
.header-actions{display:flex; align-items:center; gap:.6rem}
.search{position:relative; display:flex; align-items:center}
.search input{width:min(50vw,420px); padding:.7rem .9rem; border-radius:14px; background:var(--card); color:var(--text);
  border:1px solid var(--border); outline:none}
.kbd{position:absolute; left:.5rem; color:var(--muted); font-size:.9rem}
.button{background:var(--accent); color:white; border:none; border-radius:12px; padding:.6rem 1rem; text-decoration:none}
.button.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.tabs{display:flex; gap:.5rem; padding:1rem .4rem; flex-wrap:wrap}
.tab-btn{padding:.5rem .9rem; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer}
.tab-btn[aria-selected="true"]{background:var(--accent); color:white; border-color:transparent}
.menu-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:1rem; padding:1rem .4rem 3rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1rem; display:flex; flex-direction:column; gap:.5rem}
.card .title{font-weight:700; font-size:1.05rem}
.card .price{margin-top:auto; color:var(--brand); font-weight:800; letter-spacing:.5px}
.badge{font-size:.75rem; color:var(--muted)}
hr{border:none; border-top:1px dashed var(--border); margin:.4rem 0}
.site-footer{position:sticky; bottom:0; background:linear-gradient(0deg, color-mix(in oklab, var(--bg), transparent 10%) 0%, transparent 100%); border-top:1px solid var(--border)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .4rem}
.footer-inner code{background:var(--card); border:1px solid var(--border); padding:.1rem .4rem; border-radius:8px}
@media (max-width:640px){ .brand-text h1{font-size:1.05rem} .search input{width:62vw}}
.print-only{display:none}
@media print{
  :root{--bg:#fff; --card:#fff; --text:#000; --border:#ddd}
  .site-header, .site-footer, #tabs, #printBtn{display:none}
  .container{width:100%}
  .menu-grid{grid-template-columns: repeat(3, 1fr)}
  .card{break-inside:avoid}
  .print-only{display:block}
}