:root { --bg:#f4f4f6; --card:#fff; --text:#1b1b1f; --muted:#6b6b75; --line:#e3e3e8; --accent:#0f5bd8;
  --ok:#1e7a3c; --ok-bg:#e6f4ea; --warn:#8a5a00; --warn-bg:#fff4dc; --bad:#b3261e; --bad-bg:#fdecea; --gray-bg:#eeeef2; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif; font-size:16px; line-height:1.5; }
.banner { background:#3b1d6e; color:#fff; text-align:center; padding:8px 16px; font-size:.85rem; font-weight:600; }
.top { padding:16px 16px 4px; } .top h1 { margin:0; font-size:1.3rem; } .sub { margin:4px 0 0; color:var(--muted); font-size:.85rem; }
main { padding:8px 16px 32px; max-width:680px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
label { display:block; font-weight:600; margin:6px 0; }
input, textarea { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; }
textarea { text-align:left; resize:vertical; }
button.primary { width:100%; margin-top:10px; padding:12px; font:inherit; font-weight:700; background:var(--accent); color:#fff; border:0; border-radius:10px; cursor:pointer; }
button.primary:disabled { opacity:.45; cursor:not-allowed; }
.status { margin:8px 0 0; min-height:1.2em; font-size:.9rem; }
.status.error { color:var(--bad); background:var(--bad-bg); padding:8px; border-radius:8px; }
.status.ok { color:var(--ok); }
.notice { background:var(--warn-bg); font-size:.88rem; }
.items { list-style:none; margin:0; padding:0; }
.item { display:grid; grid-template-columns:80px 1fr; gap:12px; }
.item img, .noimg { width:80px; height:106px; object-fit:cover; border-radius:8px; background:var(--line); }
.item h2 { font-size:.9rem; margin:0 0 4px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta { font-size:.82rem; color:var(--muted); margin:2px 0; word-break:break-word; }
.badge { display:inline-block; font-size:.78rem; padding:2px 10px; border-radius:999px; font-weight:700; margin:4px 0; }
.badge.verified { background:var(--ok-bg); color:var(--ok); } .badge.unavailable { background:var(--gray-bg); color:#444; }
.badge.stale { background:var(--warn-bg); color:var(--warn); } .badge.error { background:var(--bad-bg); color:var(--bad); }
.badge.pending { background:var(--gray-bg); color:var(--muted); }
.price { font-weight:700; } .reason { font-size:.78rem; color:var(--muted); }
.qty { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.stepper { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.stepper button { width:40px; height:38px; border:0; background:#f0f0f3; font-size:1.2rem; cursor:pointer; }
.stepper input { width:52px; height:38px; border:0; border-radius:0; text-align:center; font-weight:700; padding:0; }
.summary .row { display:flex; justify-content:space-between; gap:8px; padding:4px 0; }
.muted { color:var(--muted); font-size:.82rem; }
.diag summary { cursor:pointer; font-weight:700; }
.diag table { width:100%; border-collapse:collapse; font-size:.75rem; margin-top:8px; }
.diag th, .diag td { border-bottom:1px solid var(--line); padding:4px; text-align:start; vertical-align:top; }
.diag .scroll { overflow-x:auto; }
bdi { unicode-bidi:isolate; }
.badge.qty_needs_verification, .badge.price_needs_verification { background:var(--warn-bg); color:var(--warn); }
.badge.limit_exceeded { background:var(--bad-bg); color:var(--bad); }