:root{
  --bg:#eef3f1; --surface:#fff; --surface-2:#f6f9f8;
  --ink:#10201d; --ink-2:#4a5b57; --ink-3:#7f8f8b;
  --line:#e3ebe8; --line-strong:#d3ddd9;
  --brand:#0f766e; --brand-ink:#0b5f59; --brand-tint:#e7f3f1;
  --ok:#137a4b; --ok-bg:#e7f4ec; --warn:#8a5a12; --warn-bg:#fbf0d8;
  --danger:#b42318; --danger-bg:#fdece9; --focus:#0f766e;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(16,32,29,.04),0 12px 32px rgba(16,32,29,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
body[dir="rtl"]{direction:rtl}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.muted{color:var(--ink-2)} .mono{font-family:var(--mono)}

/* ---- app chrome ---- */
.app{min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#f8fbfa,#f2f7f5)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 22px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:inherit}
.mark{width:38px;height:38px;border-radius:9px;background:var(--brand);color:#fff;font-weight:800;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(15,118,110,.28);flex:0 0 auto}
.brand__t{font-weight:800;font-size:15px}
.brand__s{font-size:11px;color:var(--ink-3);font-weight:600}
.topnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topnav a{font-size:13.5px;font-weight:650;color:var(--ink-2);text-decoration:none;
  padding:8px 12px;border-radius:8px}
.topnav a:hover{background:var(--surface-2);color:var(--ink)}
.topnav a.on{color:var(--brand);background:var(--brand-tint)}

/* user + lang menus */
.menu{position:relative}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);cursor:pointer;font:inherit}
.userchip:hover{border-color:var(--line-strong)}
.userchip .nm{font-size:13px;font-weight:700}
.av{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex:0 0 auto}
.av--sm{width:30px;height:30px;font-size:12px}
.av--lg{width:62px;height:62px;font-size:22px}
.caret{color:var(--ink-3);font-size:11px}
.pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:210px;z-index:30;display:none}
body[dir="rtl"] .pop{right:auto;left:0}
.menu.open .pop{display:block}
.pop a,.pop button{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--ink);font:inherit;
  font-size:13.5px;border:0;background:transparent;cursor:pointer}
.pop a:hover,.pop button:hover{background:var(--surface-2)}
.pop .sep{height:1px;background:var(--line);margin:6px 4px}
.pop--lang{max-height:340px;overflow-y:auto;min-width:200px}
.pop--lang a.on{color:var(--brand);font-weight:700}
.langbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:7px 11px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink-2)}
.langbtn:hover{border-color:var(--line-strong);color:var(--ink)}

/* ---- content ---- */
.content{flex:1}
.pad{padding:30px 26px;max-width:960px;width:100%;margin:0 auto}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.h1{font-size:28px;margin-top:8px}
.lead{color:var(--ink-2);margin:6px 0 0;max-width:62ch}
.status{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 11px;border:1px solid #b7e4dc;
  border-radius:999px;background:#eefbf8;color:#0b5f59;font-size:12.5px;font-weight:700}
.status i{width:8px;height:8px;border-radius:50%;background:#14b8a6;box-shadow:0 0 0 4px rgba(20,184,166,.16)}

/* landing cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);text-decoration:none;color:inherit;transition:.15s;align-items:flex-start}
.card:hover{border-color:var(--brand);box-shadow:0 10px 26px rgba(16,32,29,.07);transform:translateY(-1px)}
.ic{width:40px;height:40px;border-radius:9px;background:var(--brand-tint);color:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;font-size:19px}
.card h3{font-size:15.5px}
.card p{margin:3px 0 0;color:var(--ink-2);font-size:13.5px}
.card .go{margin-inline-start:auto;color:var(--ink-3);align-self:center;font-size:18px}
.badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-tint);border-radius:6px;padding:2px 7px;margin-inline-start:8px;
  vertical-align:middle}
.devlink{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--ink-3);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.devlink a{color:var(--ink-2);text-decoration:none;font-weight:600}
.devlink a:hover{color:var(--brand)}

/* ---- centered auth pages (login/setup) ---- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:44px 20px;
  background:linear-gradient(135deg,#f8fafc 0%,#edf7f5 46%,#f7f4ec 100%)}
.authcard{width:min(100%,432px);background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:30px}
.authcard--wide{width:min(100%,560px)}
.authbrand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.authcard h1{font-size:23px} .authcard .sub{color:var(--ink-2);font-size:14px;margin:2px 0 18px}
.authtop{display:flex;justify-content:flex-end;margin-bottom:-8px}

/* forms */
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:700;color:#33413d}
.in{height:44px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-2);
  padding:0 12px;font:inherit;color:var(--ink);outline:none;width:100%;transition:.14s}
.in:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,118,110,.13)}
.in[readonly]{color:var(--ink-2);background:var(--surface-2)}
select.in{padding:0 10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.row2{grid-template-columns:1fr}}
.btn{height:44px;border-radius:9px;border:1px solid transparent;font:inherit;font-weight:750;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--brand);color:#fff;transition:.14s;text-decoration:none}
.btn:hover{background:var(--brand-ink);box-shadow:0 12px 26px rgba(15,118,110,.24)}
.btn--ghost{background:var(--surface);color:#17231f;border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--surface-2);box-shadow:none}
.btn--sm{height:36px;font-size:13.5px;width:auto;padding:0 15px}
.btn--danger{background:transparent;color:var(--danger);border-color:transparent}
.btn--danger:hover{background:var(--danger-bg);box-shadow:none}
.gbadge{width:20px;height:20px;border-radius:50%;background:#eef4ff;color:#2563eb;display:grid;
  place-items:center;font-weight:900;font-size:12px}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin:16px 0}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.alert{border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:600;line-height:1.45}
.alert--err{border:1px solid #ffd0cc;background:var(--danger-bg);color:var(--danger)}
.alert--ok{border:1px solid #b7e4c9;background:var(--ok-bg);color:var(--ok)}
.alert--info{border:1px solid #cfe6e1;background:var(--brand-tint);color:#0b5f59}
.authfoot{margin-top:18px;text-align:center;font-size:13px;color:var(--ink-2)}
.authfoot a{color:var(--brand);font-weight:700;text-decoration:none}

/* ---- profile ---- */
.pcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:20px;margin-top:18px}
.pcard h3{font-size:15px} .pcard .h-sub{color:var(--ink-2);font-size:13px;margin:2px 0 16px}
.avrow{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.verified{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-size:12.5px;font-weight:700}
.unverified{display:inline-flex;align-items:center;gap:5px;color:var(--warn);font-size:12.5px;font-weight:700}
.idbox{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:12.5px;
  color:var(--ink-2);flex-wrap:wrap}
.copy{border:1px solid var(--line-strong);background:#fff;border-radius:7px;padding:5px 10px;font-size:11.5px;
  font-weight:700;color:var(--ink-2);cursor:pointer;font-family:var(--font)}
.copy:hover{color:var(--brand);border-color:var(--brand)}
.caption{color:var(--ink-3);font-size:12px;margin-top:8px}

/* ---- error page ---- */
.errwrap{min-height:100vh;display:grid;place-items:center;padding:44px 20px;text-align:center}
.errcard{max-width:440px}
.errcode{font-size:56px;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.errcard h1{font-size:22px;margin:6px 0 8px}

/* ---- admin console ---- */
.console{display:grid;grid-template-columns:216px 1fr;flex:1;min-height:0}
@media(max-width:760px){.console{grid-template-columns:1fr}.side{display:none}}
.side{border-right:1px solid var(--line);background:var(--surface);padding:18px 14px}
.side h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;padding:0 8px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;
  color:var(--ink-2);font-weight:650;font-size:13.5px;margin-bottom:2px}
.side a:hover{background:var(--surface-2);color:var(--ink)}
.side a.on{background:var(--brand-tint);color:var(--brand)}
.side a .ct{margin-inline-start:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cmain{padding:24px 24px;min-width:0}
.chead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.chead h1{font-size:20px} .chead .cnt{color:var(--ink-3);font-size:13px;margin-top:3px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.search{position:relative;flex:1;min-width:200px}
.search input{height:38px;width:100%;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);
  padding:0 12px 0 34px;font:inherit;outline:none}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.search svg{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.sel{height:38px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:0 12px;font:inherit;color:var(--ink-2)}
.tablewrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tscroll{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;min-width:640px}
table.t thead th{text-align:start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:800;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
table.t tbody td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--surface-2)}
table.t a.rowlink{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
table.t a.rowlink:hover .nm{color:var(--brand)}
.u .nm{font-weight:700} .u .em{color:var(--ink-3);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%}
.pill--ok{color:var(--ok);background:var(--ok-bg)} .pill--ok i{background:var(--ok)}
.pill--warn{color:var(--warn);background:var(--warn-bg)} .pill--warn i{background:var(--warn)}
.pill--dan{color:var(--danger);background:var(--danger-bg)} .pill--dan i{background:var(--danger)}
.pill--mut{color:var(--ink-2);background:var(--surface-2)} .pill--mut i{background:var(--ink-3)}
.rolechip{font-size:11.5px;font-weight:700;color:#33413d;background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:6px;padding:2px 8px;display:inline-block;margin:1px}
.rolechip.sa{color:var(--brand);background:var(--brand-tint);border-color:#cfe6e1}
.num{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.cards-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.stat{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px 18px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em}
.stat .k{color:var(--ink-3);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.textarea{min-height:88px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-2);
  padding:10px 12px;font:inherit;font-family:var(--mono);font-size:12.5px;color:var(--ink);outline:none;width:100%;resize:vertical}
.textarea:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,118,110,.13)}
.checkline{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2);margin-top:2px}
.rolepick{display:flex;gap:8px;flex-wrap:wrap}
.rolepick label{display:flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;padding:6px 11px;
  border:1px solid var(--line-strong);border-radius:8px;background:#fff;cursor:pointer}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:12px}
.back:hover{color:var(--brand)}
.secretbox{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--brand-tint);
  border:1px solid #cfe6e1;border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:13px;color:#0b5f59;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}