@font-face{font-family:'Tajawal';font-weight:400;font-display:swap;src:url(/fonts/tajawal/files/tajawal-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:'Tajawal';font-weight:500;font-display:swap;src:url(/fonts/tajawal/files/tajawal-arabic-500-normal.woff2) format('woff2')}
@font-face{font-family:'Tajawal';font-weight:700;font-display:swap;src:url(/fonts/tajawal/files/tajawal-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:'Tajawal';font-weight:800;font-display:swap;src:url(/fonts/tajawal/files/tajawal-arabic-800-normal.woff2) format('woff2')}

:root{
  --brand:#5f978f; --brand-d:#467a73; --brand-l:#dcece8;
  --accent:#d38a5a; --accent-l:#f8e6d9;
  --sand:#e9dcc9; --bg:#f6f4f0; --card:#fff; --ink:#2f3432; --muted:#6c7471; --line:#e4e0d9;
  --danger:#c4534a; --ok:#3f9a6b;
  --r:14px; --shadow:0 2px 10px rgba(30,40,38,.07); --shadow-l:0 12px 40px rgba(30,40,38,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6}
a{color:var(--brand-d)}
img{max-width:100%}
input,textarea,select,button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}

.container{width:min(1180px,100% - 32px);margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;border:1px solid transparent;border-radius:10px;padding:.6em 1.15em;font-weight:700;cursor:pointer;text-decoration:none;background:var(--card);color:var(--ink);border-color:var(--line);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand-d)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d);color:#fff}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{filter:brightness(.95);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--brand-l)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);background:#fbeceb}
.btn.sm{padding:.35em .7em;font-size:.88em;border-radius:8px}
.btn.lg{padding:.8em 1.6em;font-size:1.08em}
.btn.icon{padding:.4em;width:2.2em;height:2.2em}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:700;font-size:.92em}
.input,textarea.input,select.input{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:.62em .85em;outline:none;transition:.15s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
textarea.input{resize:vertical;min-height:2.6em}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:.35em;font-size:.82em;font-weight:700;padding:.2em .7em;border-radius:99px;background:var(--brand-l);color:var(--brand-d)}
.badge.warn{background:var(--accent-l);color:#9b5a2e}
.badge.bad{background:#fbeceb;color:var(--danger)}

/* شريط علوي */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .container{display:flex;align-items:center;gap:12px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35em;text-decoration:none;color:var(--ink)}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font-size:.8em}
.spacer{flex:1}

/* نوافذ */
.modal-bg{position:fixed;inset:0;background:rgba(20,28,26,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-l);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px}
.modal h3{font-size:1.25em}
.modal-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:18px}

/* إشعارات */
#toasts{position:fixed;bottom:18px;left:18px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--ink);color:#fff;padding:.7em 1.1em;border-radius:10px;box-shadow:var(--shadow-l);animation:tin .2s;max-width:340px}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

.theme-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.theme-opt{border:2px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;text-align:center;font-size:.88em;font-weight:700;background:#fff}
.theme-opt.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.theme-sw{display:flex;height:26px;border-radius:7px;overflow:hidden;margin-bottom:6px}
.theme-sw span{flex:1}

.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.spinner.dark{border-color:rgba(0,0,0,.12);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

.empty-state{text-align:center;padding:56px 20px}
.empty-state .big{font-size:3em;margin-bottom:6px}

@media (max-width:480px){.logo{font-size:1.08em;gap:8px}.logo-mark{width:30px;height:30px}}