@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap");
:root{
  --red:#FA3225; --red-d:#D9241A; --red-50:#FFE1D9;
  --ink:#141010; --ink-2:#4A3C33; --muted:#7A675B;
  --line:#E8D7B7; --surface:#F1E2C3; --bg:#F8EFDC; --white:#FFF8EA;
  --checker:repeating-conic-gradient(var(--red) 0 25%,var(--bg) 0 50%) 0 0/12px 12px;
  --green:#1F8A4C; --amber:#B86E00;
  /* old names kept so every page keeps working */
  --ketchup:var(--red); --mustard:var(--surface); --bun:var(--surface); --cream:var(--bg); --paper:var(--white);
  --radius:14px; --shadow:0 1px 2px rgba(28,23,22,.04),0 4px 16px rgba(28,23,22,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:"Vazirmatn",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}

/* header used by the inner pages */
.top{position:sticky;top:0;z-index:20;background:rgba(248,239,220,.95);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;margin-bottom:12px}
.top::after{content:"";position:absolute;inset-inline:0;bottom:-12px;height:12px;background:var(--checker)}
.top .brand{font-weight:800;font-size:1.05rem;text-decoration:none;display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.top .brand img{width:38px;height:38px;border-radius:50%}
.chip{display:inline-flex;align-items:center;background:var(--red-50);color:var(--red-d);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.85rem}
.wrap{max-width:760px;margin:0 auto;padding:24px 16px 120px}
h1,h2,h3.display{font-weight:800;letter-spacing:-.01em}
h2{font-size:1.3rem;margin:28px 0 12px;line-height:1.35}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;font-size:.95rem;border:1px solid var(--line);border-radius:12px;padding:10px 18px;background:var(--paper);color:var(--ink);transition:background .15s,border-color .15s,transform .1s;min-height:44px}
.btn:hover{border-color:var(--line);background:var(--surface)}
.btn:active{transform:scale(.98)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.yellow{background:var(--surface);border-color:var(--surface)}
.btn.yellow:hover{background:#EAD6AE}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn[disabled]{opacity:.5;pointer-events:none}
.muted{color:var(--muted)}
.price{font-weight:700;font-size:.95rem}
.qty{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:999px;padding:3px}
.qty button{width:32px;height:32px;border-radius:50%;border:0;background:var(--paper);font-weight:700;font-size:1.1rem;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.qty button:hover{color:var(--red)}
.qty span{min-width:18px;text-align:center;font-weight:700}
.bar{position:fixed;inset-inline:12px;bottom:12px;z-index:30;background:var(--ink);color:#fff;border-radius:16px;padding:10px 10px 10px 12px;padding-inline-start:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 10px 30px rgba(28,23,22,.25);max-width:736px;margin:0 auto}
.bar .btn{background:var(--red);border-color:var(--red);color:#fff}
.bar span{font-weight:600}
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px;font-weight:600;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(28,23,22,.45);display:none;align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet .panel{background:var(--bg);width:100%;max-width:760px;max-height:88vh;overflow:auto;border-radius:20px 20px 0 0;padding:20px 18px 26px}
textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--red);outline-offset:0;border-color:transparent}

/* ---------- management panels ---------- */
.panel-wrap{max-width:1200px;margin:0 auto;padding:26px 16px 60px}
.login{max-width:380px;margin:50px auto;text-align:center}
.login input,.field input,.field select,.field textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--surface)}
.login input{font-size:1.2rem;text-align:center;margin:14px 0}
.err{color:var(--red);font-weight:700}
.link{background:none;border:0;text-decoration:underline;font-weight:600;color:inherit;padding:0}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;background:var(--surface);padding:4px;border-radius:12px;width:fit-content;max-width:100%}
.tabs button{border:0;border-radius:9px;background:transparent;padding:7px 16px;font-weight:600;color:var(--ink-2)}
.tabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ranges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ranges button{border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:5px 14px;font-weight:600}
.ranges button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ranges input{font:inherit;border:1px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--bg)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpi .l{font-size:.85rem;color:var(--muted);font-weight:600}
.kpi .v{font-size:1.55rem;font-weight:800;line-height:1.3}
.kpi .s{font-size:.8rem;color:var(--muted)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.chart h3{font-size:1rem;font-weight:700;margin-bottom:10px}
.vbars{display:flex;align-items:flex-end;gap:2px;height:170px;border-bottom:1px solid var(--line);direction:ltr;position:relative}
.vbars .b{flex:1;position:relative;height:100%;display:flex;align-items:flex-end;cursor:default}
.vbars .b span{display:block;width:100%;background:var(--red);border-radius:4px 4px 0 0;min-height:1px}
.vbars .b:hover span{filter:brightness(.85)}
.vbars .b[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.78rem;padding:4px 8px;border-radius:8px;white-space:nowrap;z-index:5;direction:rtl}
.vlabels{display:flex;gap:2px;direction:ltr;font-size:.72rem;color:var(--muted);margin-top:4px}
.vlabels span{flex:1;text-align:center;overflow:hidden;white-space:nowrap}
.hbars{display:grid;gap:7px}
.hb{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:8px;align-items:center;font-size:.9rem}
.hb .t{height:12px;background:var(--surface);border-radius:4px;overflow:hidden}
.hb .t span{display:block;height:100%;background:var(--red);border-radius:0 4px 4px 0}
.hb .n{font-weight:700;min-width:42px;text-align:left}
.empty{color:var(--muted);padding:14px 0}
table.data{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.9rem}
table.data th,table.data td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data th{background:var(--surface);font-weight:700;color:var(--ink-2)}
.scroll{overflow-x:auto}
.pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:700;background:var(--surface)}
.pill.new{color:var(--amber);background:#FDF3E2}.pill.done{color:#1F6FB2;background:#E8F1FA}.pill.paid{color:var(--green);background:#E6F4EC}.pill.cancelled{color:var(--muted);text-decoration:line-through}
.grid-orders{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ocard .head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px;gap:8px}
.ocard .tbl{font-size:1.4rem;font-weight:800}
.ocard .tbl small{font-size:.85rem;font-weight:500;color:var(--muted)}
.ocard .ln{padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.ocard .ln ol{margin:4px 22px 0 0;font-size:.92rem;list-style:persian}
.ocard .note{background:#FFF6DA;border-radius:8px;padding:6px 10px;margin-top:8px;font-weight:600}
.ocard .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ocard .acts .btn{flex:1;padding:8px 10px}
.ocard.cancelled,.ocard.paid{opacity:.6}
.toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tog{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:600}
.tog.off{background:var(--surface);color:var(--muted)}
.switch{position:relative;width:44px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:#D6CFCA;border-radius:999px;transition:.15s}
.switch i::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{right:21px}
.field{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.row-edit{display:grid;grid-template-columns:52px 1.3fr 2fr 110px 120px 70px 40px;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:8px}
.row-edit input,.row-edit select{width:100%;font:inherit;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--surface)}
.row-edit .x{border:0;background:none;font-size:1.2rem}
@media (max-width:820px){.row-edit{grid-template-columns:52px 1fr 1fr;}.row-edit .desc{grid-column:1/-1}}
.savebar{position:sticky;bottom:0;background:var(--bg);padding:12px 0;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:16px}
.row-edit>*,.tog>*{min-width:0}
.tog input:not([type=checkbox]){min-width:0;width:100%}

/* ---------- shared bits ---------- */
.checker{height:12px;background:var(--checker)}
.site-foot{text-align:center;margin-top:48px;font-size:.9rem}
.site-foot::before{content:"";display:block;height:12px;background:var(--checker);margin:0 -16px 24px}
.site-foot .mascot{display:none}
.site-foot .en{font-weight:800;color:var(--ink);font-size:1rem}
.site-foot p{color:var(--muted);font-size:.9rem;margin-top:4px}
.btn.snapp{background:var(--bg)}
.bar[hidden],.chip[hidden]{display:none}
.site-foot a[dir=ltr]{white-space:nowrap;display:inline-block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}