:root{--bg:#f4f1ea;--fg:#1c2230;--card:#fffdf8;--ac:#1f4e79;--mut:#6a7280;--err:#a52e27;--bd:#e2dccf}
@media(prefers-color-scheme:dark){:root{--bg:#14171d;--fg:#e9e7e0;--card:#1b1f27;--ac:#86b6e8;--mut:#9aa1ad;--err:#f08c84;--bd:#2d333e}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.65 "IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;min-height:100vh;padding:24px max(16px,env(safe-area-inset-left)) 24px}
.box{max-width:430px;margin:6vh auto;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:26px}
.box.wide{max-width:960px}h1{margin:0 0 4px;font-size:22px;color:var(--ac)}p.s{margin:0 0 18px;color:var(--mut);font-size:13px}
label{display:block;margin:12px 0 4px;font-size:13px;color:var(--mut)}input,select{width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
button{margin-top:16px;padding:10px 16px;border:0;border-radius:8px;background:var(--ac);color:var(--bg);font:inherit;font-weight:600;cursor:pointer}button.l{background:transparent;color:var(--ac);border:1px solid var(--bd);margin:0;padding:5px 9px;font-size:12px}
.err{color:var(--err);min-height:1.4em;margin-top:10px;font-size:13px}.ok{color:#1b7f3b;margin-top:10px;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:7px;border-bottom:1px solid var(--bd);text-align:start}.tw{overflow-x:auto}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}code{background:var(--bg);padding:2px 6px;border-radius:5px;direction:ltr;display:inline-block;word-break:break-all}
a{color:var(--ac)}
.tnav{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:-24px calc(-1 * max(16px,env(safe-area-inset-left))) 0;padding:8px max(16px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--bd);font-size:13px}
.tnav a,.tnav button{display:inline-block;margin:0;padding:5px 12px;border:1px solid var(--bd);border-radius:999px;background:var(--card);color:var(--fg);text-decoration:none;font:inherit;font-size:13px;font-weight:400;cursor:pointer}
.tnav a:hover,.tnav button:hover{border-color:var(--ac)}.tnav a.on{background:var(--fg);color:var(--bg)}
.tnav .sp{flex:1}.tnav .u{border:0;background:none;padding:5px 4px;text-decoration:underline;text-underline-offset:3px}.tnav .u.on{background:none;color:var(--ac);font-weight:600}
td select{min-width:120px;width:auto}td input{min-width:130px}