@font-face{font-family:'Hafs';src:url('/fonts/hafs.otf') format('opentype');font-display:swap}
:root{--teal:#173836;--teal2:#2B5F5C;--plum:#3E2340;--gold:#EDD391;--page:#F4EEE3;--cream:#FAF6EE;--ink:#173836;--mute:#6b7a78;--red:#9b2c2c;--amber:#8a5a00;--green:#1f6b3a;--line:#d9d0bf}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;font-size:15px;line-height:1.4}
a{color:var(--teal2)}
.ar{font-family:'Hafs',serif;direction:rtl}
.top{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--teal);color:var(--cream);flex-wrap:wrap}
.top .brand{font-weight:600;letter-spacing:.02em}.top .brand span{opacity:.7;font-weight:400}
.top a{color:var(--gold);text-decoration:none;margin-right:6px}.top a.cur{text-decoration:underline}
.top select,.top input,.top button{font:inherit;font-size:14px;padding:5px 8px;border-radius:8px;border:1px solid #2b5f5c;background:#fff;color:var(--ink)}
.top .sp{flex:1}
button.b{font:inherit;font-size:15px;padding:9px 16px;border-radius:20px;border:1px solid var(--teal);background:var(--cream);color:var(--teal);cursor:pointer}
button.b.pri{background:var(--teal);color:var(--cream)}button.b.rec{background:var(--red);border-color:var(--red);color:#fff}
button.b:disabled{opacity:.4;cursor:default}button.b.sm{padding:4px 10px;font-size:13px}
.card{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px}
.gate{position:fixed;inset:0;background:var(--page);display:flex;align-items:center;justify-content:center;z-index:50}
.gate-card{background:var(--cream);padding:28px;border-radius:14px;border:1px solid var(--line);width:min(420px,90vw)}
.gate-card input{width:100%;font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);margin:8px 0}.gate-card button{font:inherit;padding:9px 16px;border-radius:20px;border:0;background:var(--teal);color:var(--cream)}
.gate-msg{color:var(--red);margin-top:8px;font-size:14px}
.v-good{color:var(--green)}.v-check{color:var(--amber)}.v-redo{color:var(--red)}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;background:#e7e0d1;color:var(--teal)}
.tag.good{background:#d8eadf;color:var(--green)}.tag.check{background:#f4e6c3;color:var(--amber)}.tag.redo{background:#f0d4d4;color:var(--red)}
kbd{font:12px ui-monospace,monospace;background:#e7e0d1;padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
.muted{color:var(--mute);font-size:13px}
table.t{border-collapse:collapse;font-size:13px}table.t th,table.t td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}table.t th{background:#ebe3d2;position:sticky;top:0}
input[type=range]{accent-color:var(--teal)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}