:root{
  --brand:#6d28d9; --brand-ink:#fff;
  --bg:#f6f7fb; --card:#fff; --text:#11151c; --muted:#6b7280; --line:#e6e8ee;
  --radius:16px; --shadow:0 1px 3px rgba(16,24,40,.08),0 8px 24px rgba(16,24,40,.06);
  --maxw:600px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Naskh Arabic","Segoe UI Arabic",sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px 24px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;max-width:var(--maxw);margin:0 auto}
.logo{font-weight:800;letter-spacing:.5px;font-size:18px}
.logo b{color:var(--brand)}
.langtoggle{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.navright{display:flex;align-items:center;gap:10px}
.navlink{font-size:14px;color:var(--brand);font-weight:600;white-space:nowrap}
.hero{padding:22px 16px 6px;text-align:center;max-width:var(--maxw);margin:0 auto}
.hero h1{font-size:25px;margin:.2em 0;line-height:1.25}
.hero p{color:var(--muted);margin:.2em 0 .6em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:12px 0}
.bizcard{display:flex;gap:12px;align-items:center;cursor:pointer}
.bizcard .dot{width:46px;height:46px;border-radius:12px;flex:0 0 auto}
.bizcard h3{margin:0;font-size:16px}
.bizcard small{color:var(--muted)}
.btn{display:block;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:13px 16px;font-size:15px;cursor:pointer;width:100%;text-align:center;font-family:inherit}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:transparent;font-weight:700}
.btn:disabled{opacity:.5;cursor:not-allowed}
.list .item{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;cursor:pointer;background:var(--card)}
.list .item.sel{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 28%,transparent)}
.item .price{color:var(--muted);font-size:14px;white-space:nowrap}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
input,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:15px;background:var(--card);color:var(--text);font-family:inherit}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin-top:6px}
.slot{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:11px 6px;text-align:center;cursor:pointer;font-size:14px}
.slot.sel{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.muted{color:var(--muted)}
.banner{background:linear-gradient(135deg,var(--brand),#9333ea);color:#fff;border-radius:var(--radius);padding:18px;margin:12px 0;box-shadow:var(--shadow)}
.banner h3{margin:.1em 0}
.pill{display:inline-block;background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;margin-bottom:6px}
.center{text-align:center}
.step-title{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:18px 0 6px}
.ok{color:#047857}
.err{color:#b91c1c}
footer{padding:22px 16px;text-align:center;color:var(--muted);font-size:12px}
img.qr{width:180px;height:180px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:6px}
.summary{display:flex;gap:10px;margin-top:4px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.statnum{font-size:22px;font-weight:800;color:var(--brand)}
.statlbl{font-size:12px;color:var(--muted)}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.badge{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;background:#eef2ff;color:#3743a3;white-space:nowrap}
.badge.green{background:#ecfdf5;color:#047857}
.badge.blue{background:#eff6ff;color:#1d4ed8}
.badge.amber{background:#fffbeb;color:#b45309}
.badge.red{background:#fef2f2;color:#b91c1c}
.actions{display:flex;gap:8px;margin-top:10px}
.act{flex:1;text-align:center;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;background:var(--card)}
.act.wa{background:#25d366;color:#fff;border-color:transparent}
.noterow{display:flex;gap:8px;margin-top:10px}
.noteinput{flex:1;padding:9px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--card);color:var(--text)}
.noteinput.saved{border-color:#047857;background:#ecfdf5}
.linkbtn{margin-top:10px;background:none;border:none;color:#b91c1c;font-size:13px;cursor:pointer;padding:4px 0;text-decoration:underline;font-family:inherit}
[dir=rtl] .bizcard{flex-direction:row-reverse;text-align:right}
[dir=rtl] .list .item{flex-direction:row-reverse}