:root { --fg:#1b1f23; --muted:#5b6470; --line:#dfe3e8; --bg:#f7f8fa; --card:#fff; --accent:#0b7a5b; --warn:#9a5b00; --bad:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header h1 { font-size:16px; margin:0; }
main { max-width: 880px; margin: 20px auto; padding: 0 16px; display:grid; gap:16px; }
section { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
section h2 { font-size:15px; margin:0 0 10px; }
label { display:block; margin:8px 0 4px; color:var(--muted); font-size:13px; }
input[type=email], input[type=password], input[type=url], input[type=text] { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; }
input[readonly] { background:#f2f4f7; font-family: ui-monospace, monospace; font-size:13px; }
button { font:inherit; padding:7px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; margin: 6px 6px 0 0; }
button.secondary { background:#fff; color:var(--accent); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.muted { color:var(--muted); font-size:13px; }
.warn { color:var(--warn); background:#fff7e6; border:1px solid #f5d9a8; padding:8px 10px; border-radius:6px; font-size:13px; }
.bad { color:var(--bad); }
.ok { color:var(--accent); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.qr { width: 264px; height: 264px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.code { font: 600 22px ui-monospace, monospace; letter-spacing:2px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:start; padding:6px 4px; border-bottom:1px solid var(--line); }
.narrow { max-width:420px; margin:40px auto; }
pre { background:#f2f4f7; padding:10px; border-radius:6px; overflow:auto; font-size:12px; white-space:pre-wrap; }