:root{
  --navy:#0E2A47; --navy-2:#173B61; --teal:#0F7C7A; --teal-soft:#E3F2F1;
  --gold:#C9A24A; --gold-soft:#F7EFD9; --ink:#15212E; --muted:#5E6B78;
  --line:#DCE3EA; --paper:#F3F6F9; --card:#FFFFFF; --danger:#B3261E; --danger-soft:#FBE9E7;
  --warn:#8A5A00; --warn-soft:#FFF3D6;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px}
h1,h2,h3{font-family:'Reem Kufi','Tajawal',sans-serif;line-height:1.3;margin:0;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn{border:0;border-radius:var(--r-sm);padding:.7rem 1.3rem;font-weight:700;cursor:pointer;background:var(--teal);color:#fff;transition:background .15s}
.btn:hover{background:#0b6664}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy);background:#fff}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.sm{padding:.35rem .75rem;font-size:.88rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:700;font-size:.92rem}
.field label .req{color:var(--danger);margin-inline-start:.2rem}
.field .hint{font-size:.8rem;color:var(--muted)}
.input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.65rem .8rem;background:#fff}
.input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.input.invalid{border-color:var(--danger)}
.err{color:var(--danger);font-size:.82rem;min-height:1em}
.tag{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.tag.ok{background:var(--teal-soft);color:var(--teal)}
.tag.wait{background:var(--warn-soft);color:var(--warn)}
.tag.off{background:var(--danger-soft);color:var(--danger)}
.tag.info{background:#E7EEF6;color:var(--navy)}
.toast{position:fixed;bottom:1.2rem;inset-inline:0;margin:auto;width:max-content;max-width:92vw;background:var(--navy);color:#fff;padding:.75rem 1.2rem;border-radius:var(--r-md);box-shadow:0 8px 24px rgba(14,42,71,.25);z-index:99;transform:translateY(20px);opacity:0;visibility:hidden;transition:transform .25s,opacity .25s,visibility .25s}
.toast.show{transform:none;opacity:1;visibility:visible}
.toast.bad{background:var(--danger)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hidden{display:none!important}
.brandbar{display:flex;align-items:center;gap:.75rem;min-width:0}
.brandbar img{height:48px;width:auto;max-width:160px;object-fit:contain}
.brandbar .names{min-width:0}
.brandbar .org{font-weight:700;font-size:1rem;line-height:1.3}
.brandbar .plat{font-size:.85rem;opacity:.8}