:root{--g:#0080a2;--r:#f59331;--gd:#00657f;--bg:#f6f7f4;--card:#fff;--tx:#4a4a4a;--mut:#5d6a63;--bd:#d9dfda}
@media (prefers-color-scheme:dark){:root{--bg:#121714;--card:#1b231e;--tx:#e8eee9;--mut:#9aa8a0;--bd:#2f3b34}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 "Open Sans","Tajawal","Segoe UI",Tahoma,Arial,sans-serif}
header{background:#fff;color:var(--g);padding:10px 16px;border-bottom:4px solid var(--r);box-shadow:0 2px 8px rgba(0,0,0,.08)}header img{height:64px;width:auto;display:block}.brand{display:flex;align-items:center;gap:14px}h1,h2,h3{font-family:"Roboto Slab","Tajawal",serif;color:var(--g)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
header .wrap{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
header h1{margin:0;font-size:1.2rem}header p{margin:2px 0 0;color:var(--tx);font-size:.9rem}
button,.btn{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:9px 16px;background:var(--g);color:#fff;text-decoration:none;display:inline-block}
button.sec,.btn.sec{background:transparent;color:inherit;border:1px solid var(--bd)}
header button{background:var(--g)}button:hover,.btn:hover{background:var(--gd)}
button.danger{background:#c0392b}button:disabled{opacity:.5;cursor:wait}
main{padding:20px 0 48px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:20px;margin-bottom:16px}
.banner{padding:12px 16px;border-radius:10px;margin-bottom:16px;background:#fff3e3;color:#7a4300;border:1px solid var(--r)}
.banner.closed{background:#fde5e5;color:#7a1414;border-color:#e8a0a0}
label{display:block;font-weight:600;margin:14px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--g);outline-offset:1px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:600px){.row{grid-template-columns:1fr}}
.hint{color:var(--mut);font-size:.85rem;margin-top:2px}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.cats{grid-template-columns:1fr}}
.cat{border:2px solid var(--bd);border-radius:10px;padding:12px;cursor:pointer;text-align:center;font-weight:600}
.cat input{display:none}.cat.on{border-color:var(--g);background:rgba(0,128,162,.1)}
.cat span{display:block;font-size:2rem}
.err{color:#c0392b;margin-top:10px;min-height:1.4em}
.ok{text-align:center}.ok .ref{font-size:1.8rem;font-weight:700;letter-spacing:2px;color:var(--g)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:8px 6px;border-bottom:1px solid var(--bd);text-align:start;vertical-align:top}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tabs button.on{background:var(--g);color:#fff}
.win{background:#fff4c2;color:#5a4500;padding:1px 8px;border-radius:99px;font-size:.8rem}
.scorebox{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center}
iframe{width:100%;height:60vh;border:1px solid var(--bd);border-radius:8px}
.tag{font-size:.8rem;background:var(--bg);border:1px solid var(--bd);padding:1px 8px;border-radius:99px}
.hidden{display:none}

@media(prefers-color-scheme:dark){header{background:#1b231e}header img{background:#fff;border-radius:6px;padding:2px}}