:root{font-family:system-ui,"Segoe UI",sans-serif;background:#f8fafb;color:#193244;--navy:#132a3e;--gold:#b5945a;--border:#dce5e9}
*{box-sizing:border-box;min-width:0}body,html{margin:0;width:100%;overflow-wrap:anywhere}main{max-width:950px;margin:auto;padding:18px}
header{background:var(--navy);color:white;padding:26px;border-radius:18px}header p{color:#e6eef4;line-height:1.6}
h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:10px 0}h2{font-size:1.4rem}
.brand{font-weight:750;color:#dfc999;font-size:.75rem;letter-spacing:.13em}
.subnote{padding:9px;border:1px solid #a58e69;border-radius:8px;display:inline-block;font-size:.85rem}
.notice{border-left:4px solid var(--gold);background:#fcf6e9;padding:16px;border-radius:10px;line-height:1.6;margin:18px 0}
nav{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}nav button{flex:1 1 160px}
button,input,select{font:inherit;padding:11px;background:white;color:var(--navy);border:1px solid #b1bfc9;border-radius:10px}
button{font-weight:700;cursor:pointer}button.primary,nav button[aria-selected=true]{background:var(--navy);color:white;border-color:var(--navy)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card{background:white;border:1px solid var(--border);border-radius:15px;padding:20px}
.card p{line-height:1.6}.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.fields.narrow{grid-template-columns:minmax(0,1fr) auto}
label{font-weight:650}label input,label select{display:block;margin-top:5px;width:100%}
.status{min-height:22px;color:#1b5573;font-weight:650}.verse{border:1px solid var(--border);padding:13px;border-radius:11px}
.ref{font-size:.87rem;color:#526676;font-weight:700}.arabic{font-family:"Segoe UI",serif;font-size:clamp(1.4rem,3vw,2rem);line-height:2.2;text-align:right;direction:rtl}
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tile{border:1px solid var(--border);padding:12px;border-radius:10px}
[hidden]{display:none!important}details{background:white;border:1px solid var(--border);border-radius:12px;margin-top:20px;padding:14px}
details summary{font-weight:700;cursor:pointer}details pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.84rem;line-height:1.5}
a{color:#075b7d}footer{font-size:.86rem;color:#607281;line-height:1.65;margin:23px 0}
@media(max-width:650px){main{padding:10px}.card{padding:14px}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields button{grid-column:1/-1}.items{grid-template-columns:minmax(0,1fr)}}
@media(max-width:340px){.fields,.fields.narrow{grid-template-columns:minmax(0,1fr)}.fields button{grid-column:auto}}
.locale-picker{display:flex;align-items:center;gap:9px;max-width:340px;margin:14px 0;color:white;font-size:.95rem}
.locale-picker span{white-space:nowrap;flex:0 0 auto}
.locale-picker select{flex:1 1 auto;min-width:100px;width:100%;background:#fff;color:var(--navy)}
html[dir="rtl"] .notice{border-left:0;border-right:4px solid var(--gold)}
html[dir="rtl"] .arabic{text-align:right;direction:rtl}
html[dir="rtl"] input[type="number"]{direction:ltr;text-align:center}
@media(max-width:340px){.locale-picker{flex-wrap:wrap}}