:root{
  --bg:#071226;
  --card:#0b1a33;
  --muted:#9fb3d9;
  --border:rgba(255,255,255,.10);

  /* ✅ مهم لـ app.js (showMsg) */
  --ok:#2cc476;
  --bad:#ff5252;

  /* ✅ ألوان أزرار واضحة */
  --primary:#5b5df0;
  --secondary:rgba(255,255,255,.10);
  --danger:#ff5252;
  --ghost:rgba(255,255,255,.06);

  --text:#e8f0ff;
  --textStrong:#ffffff;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Tahoma,Arial;
  background:linear-gradient(180deg,#071226 0%,#0b1a33 100%);
  color:var(--text);
}

/* ===== Header ===== */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  gap:18px;
  flex-wrap:nowrap;
}

.brand{
  flex:1 1 auto;
  text-align:center;
  display:flex;
  justify-content:center;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.title{
  font-size:28px;
  font-weight:900;
  letter-spacing:.4px;
}

.subtitle{
  font-size:17px;
  color:var(--muted);
  line-height:1.9;
  max-width:720px;
  margin-top:8px;
}

/* ===== Pills / Links ===== */
.pill{
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
}

.adminLink{
  display:inline-block;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#cfe1ff;
  text-decoration:none;
  background:rgba(255,255,255,.04);
}

/* ===== Grid / Cards ===== */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:30px 20px;
}

.card{
  background:var(--card);
  padding:20px;
  border-radius:16px;
  border:1px solid var(--border);
}

.card h2{
  margin-top:0;
  font-size:16px;
  font-weight:800;
}

.row{ margin-bottom:14px; }

label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-weight:700;
}

.req{ color: var(--danger); font-weight:900; }

/* ===== Inputs ===== */
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0c1426;
  color:var(--textStrong);
  outline:none;
}

input::placeholder, textarea::placeholder{ color: rgba(232,240,255,.55); }

input:focus,select:focus,textarea:focus{
  border-color: rgba(91,93,240,.6);
  box-shadow: 0 0 0 3px rgba(91,93,240,.18);
}

.inline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.inline > *{ flex: 1 1 auto; min-width: 160px; }

/* ===== Buttons (الأهم) ===== */
button{
  font-family:inherit;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  border:1px solid var(--border);
  cursor:pointer;
  color:var(--textStrong);
  background:rgba(255,255,255,.06);
  transition: filter .15s ease, transform .08s ease, opacity .15s ease;
}

button:hover{ filter: brightness(1.08); }
button:active{ transform: translateY(1px); }

button.primary{
  background: var(--primary) !important;
  border-color: rgba(91,93,240,.65) !important;
  color: #fff !important;
}

button.secondary{
  background: var(--secondary) !important;
  border-color: rgba(255,255,255,.16) !important;
  color:#eaf2ff !important;
}

button.danger{
  background: rgba(255,82,82,.92) !important;
  border-color: rgba(255,82,82,.55) !important;
  color:#fff !important;
}

button.ghost{
  background: var(--ghost) !important;
  border-color: rgba(255,255,255,.14) !important;
  color:#eaf2ff !important;
}

/* ✅ حل مشكلة “أزرار فاتحة والخط غير مقروء” على الموبايل */
button:disabled{
  opacity: .65;                 /* يوضح أنها غير فعّالة */
  cursor: not-allowed;
  filter: none;
  color: rgba(255,255,255,.92) !important; /* يبقى النص مقروء */
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ===== Messages ===== */
.msg{
  margin-top:10px;
  white-space:pre-wrap;
  line-height:1.7;
  color: var(--muted);
}

/* ===== Team / Footer ===== */
.team{
  padding:40px 20px;
  text-align:center;
}

.team-card{
  background:var(--card);
  padding:30px;
  border-radius:20px;
  border:1px solid var(--border);
}

.team-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:20px;
}

.team-img{
  width:100%;
  max-width:600px;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.foot{
  text-align:center;
  padding:20px;
  color:var(--muted);
  border-top:1px solid var(--border);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr; padding:18px 14px; gap:14px; }

  .top{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    padding:14px 14px;
  }

  .brand{ width:100%; }
  .top-actions{ width:100%; justify-content:center; flex-wrap:wrap; }

  .title{ font-size:24px; }
  .subtitle{ font-size:15px; max-width:100%; }

  /* على الموبايل: خلي الأزرار مريحة للمس */
  button{ width:100%; }
  .inline > *{ min-width: 100%; }
}
/* =========================
   UI Polish (Safe Overrides)
   ========================= */

/* app.js يعتمد على --ok و --bad */
:root{
  --ok:#2cc476;
  --bad:#ff5252;

  --primary:#5b5df0;
  --danger:#ff5252;

  --btn-bg: rgba(255,255,255,.08);
  --btn-bg-2: rgba(255,255,255,.12);
  --btn-border: rgba(255,255,255,.16);
}

/* أزرار <button> */
button{
  background: var(--btn-bg);
  color:#fff;
  border:1px solid var(--btn-border);
}

/* أزرار الواجهة عندك تستخدم هذه الكلاسات */
button.primary{
  background: var(--primary) !important;
  border-color: rgba(91,93,240,.65) !important;
  color:#fff !important;
}
button.secondary{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color:#fff !important;
}
button.danger{
  background: rgba(255,82,82,.92) !important;
  border-color: rgba(255,82,82,.55) !important;
  color:#fff !important;
}
button.ghost{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color:#fff !important;
}

/* مهم جداً: لا نخلي الزر disabled يخفي النص */
button:disabled{
  opacity:.70;
  cursor:not-allowed;
  background: var(--btn-bg-2) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* أزرار لوحة المدير غالباً <a class="btn"> */
a.btn, .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background: var(--btn-bg);
  border:1px solid var(--btn-border);
  color:#fff !important;
}

/* ========= Hero image full-width on mobile ========= */
.hero-image img{
  width:100%;
  display:block;
  border-radius:18px;
}

/* على الهاتف: تمتد لأقصى يمين/يسار */
@media (max-width: 700px){
  .hero{ padding:0 !important; }
  .hero-image{ margin:0; }
  .hero-image img{
    width:100vw;
    max-width:100vw;
    border-radius:0;
  }
}
/* ===== Progress Bar ===== */

.progress-wrapper{
  margin-top:20px;
  position:relative;
}

.progress-line{
  position:absolute;
  top:22px;
  right:0;
  left:0;
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:4px;
}

.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#5b5df0,#2cc476);
  border-radius:4px;
  transition:width .4s ease;
}

.progress-steps{
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.step{
  text-align:center;
  flex:1;
}

.circle{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  font-weight:900;
  transition:all .3s ease;
}

.label{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}

/* الحالة المنجزة */
.step.done .circle{
  background:var(--ok);
  border-color:var(--ok);
  color:#fff;
}

/* المرحلة الحالية */
.step.active .circle{
  background:#5b5df0;
  border-color:#5b5df0;
  color:#fff;
  box-shadow:0 0 15px rgba(91,93,240,.5);
}

.step.done .label,
.step.active .label{
  color:#fff;
}
@media (max-width: 900px){
  .stats-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px){
  .stats-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ===== V2 Hero ===== */
.hero-v2{
  margin:22px 20px 18px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(16,48,92,.96),rgba(7,18,38,.98));
  display:grid;
  grid-template-columns:minmax(180px,260px) 1fr;
  gap:30px;
  align-items:center;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.hero-v2-logos{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.hero-v2-logo{object-fit:contain;background:#fff;border-radius:18px;padding:8px;border:1px solid rgba(255,255,255,.18)}
.ministry-logo{width:112px;height:112px}
.visitor-logo{width:126px;height:94px}
.hero-v2-content{text-align:right}
.hero-v2-ministry{font-size:30px;font-weight:950;color:#fff;margin-bottom:8px;line-height:1.4}
.hero-v2 h1{font-size:42px;margin:0 0 12px;color:#fff;line-height:1.35}
.hero-v2-lead{font-size:18px;line-height:2;color:#cfe1ff;max-width:920px;margin:0}
.hero-v2-features{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-v2-features span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border);font-weight:800;color:#e8f0ff}
@media(max-width:800px){
  .hero-v2{grid-template-columns:1fr;padding:22px;margin:14px 12px}
  .hero-v2-content{text-align:center}
  .hero-v2-ministry{font-size:24px}
  .hero-v2 h1{font-size:32px}
  .hero-v2-lead{font-size:16px}
  .hero-v2-features{justify-content:center}
}

/* =========================================================
   V2 PASS03 - Light official health theme
   Safe visual overrides only; no application logic changed.
   ========================================================= */
:root{
  --bg:#f4f8fb;
  --card:#ffffff;
  --muted:#60748a;
  --border:#dce7ef;
  --ok:#168a5b;
  --bad:#c93b43;
  --primary:#126a91;
  --secondary:#eef5f8;
  --danger:#c93b43;
  --ghost:#f7fafc;
  --text:#20364a;
  --textStrong:#102b3d;
  --btn-bg:#eef5f8;
  --btn-bg-2:#e5edf2;
  --btn-border:#cbdce7;
}
body{
  background:linear-gradient(180deg,#f7fbfd 0%,#eef5f8 100%);
  color:var(--text);
}
.top{
  background:#ffffff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(18,74,105,.06);
}
.title{color:#174f6b}
.subtitle{color:var(--muted)}
.pill{color:#365b70;background:#f1f7fa;border-color:#d5e4ec}
.adminLink{color:#155f82;background:#eef7fa;border-color:#c9e0ea;font-weight:800}
.adminLink:hover{background:#e3f1f6}

.hero-v2{
  background:linear-gradient(135deg,#eaf6f8 0%,#f8fcfd 52%,#edf7f2 100%);
  border-color:#d4e6eb;
  box-shadow:0 14px 38px rgba(24,83,108,.10);
}
.hero-v2-logo{background:#fff;border-color:#d8e6ec;box-shadow:0 8px 24px rgba(24,83,108,.09)}
.hero-v2-ministry{color:#0f5676}
.hero-v2 h1{color:#173e53}
.hero-v2-lead{color:#536d7e}
.hero-v2-features span{background:#fff;color:#17667a;border-color:#cfe3e8;box-shadow:0 3px 10px rgba(24,83,108,.05)}

.card{
  background:#fff;
  border-color:#dbe7ee;
  box-shadow:0 8px 24px rgba(30,75,98,.07);
}
.card h2{color:#174f6b}
label,.muted,.hint,.msg{color:var(--muted)}

input,select,textarea,
#msgTemplate{
  background:#fbfdfe !important;
  color:var(--textStrong) !important;
  border-color:#cfdfe8 !important;
}
input::placeholder,textarea::placeholder{color:#91a2ae}
input:focus,select:focus,textarea:focus{
  border-color:#54a4bd !important;
  box-shadow:0 0 0 3px rgba(49,145,173,.13) !important;
}

button{background:#eef5f8;color:#23485d;border-color:#cbdce7}
button.primary{background:#126a91 !important;border-color:#126a91 !important;color:#fff !important}
button.secondary{background:#e9f3f7 !important;border-color:#c8dfe9 !important;color:#175a78 !important}
button.ghost{background:#f7fafc !important;border-color:#d5e2e9 !important;color:#31596e !important}
button.danger{background:#c93b43 !important;border-color:#c93b43 !important;color:#fff !important}
button:disabled{background:#e7edf1 !important;color:#7c8d98 !important;border-color:#d6e0e5 !important}
a.btn,.btn{background:#eef5f8;border-color:#cbdce7;color:#23485d !important}

.stats-grid{padding:0 20px}
.stats-grid .card{border-top:4px solid #5ba7b8}
.stats-grid .card:nth-child(2){border-top-color:#4b8fb2}
.stats-grid .card:nth-child(3){border-top-color:#58a47a}
.stats-grid .card:nth-child(4){border-top-color:#7b9fb1}
.stats-grid .card > div:first-child{color:#164f6a}

.progress-wrapper{margin:24px 20px 10px}
.progress-line{background:#dbe7ed}
.progress-fill{background:linear-gradient(90deg,#267fa1,#3d9a6c)}
.circle{background:#fff;border-color:#cbdde6;color:#557184}
.label{color:#657d8d}
.step.active .circle{background:#126a91;border-color:#126a91;box-shadow:0 0 0 5px rgba(18,106,145,.10)}
.step.done .circle{background:#168a5b;border-color:#168a5b}
.step.done .label,.step.active .label{color:#174f6b}
.foot{background:#fff;color:#718592;border-top-color:#dce7ef}

/* The legacy second stepper remains functional but visually quieter. */
.stepper{opacity:.72}

@media(max-width:800px){
  .stats-grid{padding:0 12px}
  .progress-wrapper{margin-left:12px;margin-right:12px}
}

/* PASS11 responsive polish */
@media (max-width: 760px){.stats-grid{grid-template-columns:1fr 1fr!important}.hero-v2{padding:18px!important}.hero-v2-logos{gap:8px!important}.hero-v2-logo{max-width:82px!important}.grid{grid-template-columns:1fr!important}.top{align-items:flex-start!important}.top-actions{width:100%;justify-content:flex-start!important}.progress-steps .label{font-size:11px}}
@media (max-width: 460px){.stats-grid{grid-template-columns:1fr!important}.hero-v2-logos{flex-wrap:wrap}.inline{flex-direction:column;align-items:stretch!important}.inline>button,.inline>select,.inline>input{width:100%!important}}


/* ===== PASS17 FINAL visual system ===== */
:root{--bg:#f3f8fb;--card:#ffffff;--muted:#5e7483;--border:#d7e5ec;--ok:#167a55;--bad:#c93b43;--primary:#0b7595;--secondary:#e8f3f7;--danger:#c93b43;--ghost:#f7fafc;--text:#18364a;--textStrong:#102f42;}
body{background:linear-gradient(180deg,#f8fcfe 0%,#edf5f8 100%);color:var(--text);}
.card{background:#fff!important;border-color:#d8e6ed!important;box-shadow:0 8px 26px rgba(30,90,112,.055);}
.top{background:#fff;border-bottom-color:#dce8ee}.title,.card h2{color:#0d5f7a}.subtitle,label,.muted{color:#647d8d!important}
input,select,textarea{background:#fbfdfe!important;color:#17364a!important;border-color:#cbdde6!important}
input:focus,select:focus,textarea:focus{border-color:#0b7595!important;box-shadow:0 0 0 3px rgba(11,117,149,.14)!important}
.adminLink{background:#eef7fa!important;color:#0d5f7a!important;border-color:#c9dfe8!important}.pill{background:#f3f8fa;color:#45687a;border-color:#d6e5eb}
button.primary{background:#0b7595!important;border-color:#0b7595!important}button.secondary{background:#e8f3f7!important;border-color:#c9dfe8!important;color:#17485f!important}button.ghost{background:#f7fafc!important;color:#365b70!important;border-color:#d6e4eb!important}
.msg{color:#526e7e}.foot{background:#fff!important;color:#718592!important;border-top-color:#dce7ef!important}
@media(max-width:800px){.top{padding:12px 14px}.grid{padding:16px 10px;gap:12px}.card{padding:15px;border-radius:14px}}

/* =========================================================
   PASS18 FINAL — Unified, accessible Health Visitor visual system
   Visual-only overrides; application logic is unchanged.
   ========================================================= */
:root{
  --hv-navy:#123f58;
  --hv-blue:#0f6f96;
  --hv-blue-2:#1c86aa;
  --hv-green:#18845d;
  --hv-surface:#ffffff;
  --hv-soft:#f3f8fb;
  --hv-line:#d8e6ed;
  --hv-shadow:0 10px 30px rgba(25,72,95,.08);
}
body{background:linear-gradient(180deg,#f8fcfe 0%,#edf5f8 100%);min-height:100vh}
.card{border-radius:18px!important;box-shadow:var(--hv-shadow)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{box-shadow:0 14px 34px rgba(25,72,95,.11)!important;border-color:#c9dfe8!important}
.card h2{font-size:18px;letter-spacing:.1px;color:var(--hv-navy)}
button,.adminLink,.btn{transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
button:not(:disabled):hover,.adminLink:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(21,91,121,.12)}
button.primary{background:linear-gradient(135deg,var(--hv-blue),var(--hv-blue-2))!important;box-shadow:0 6px 14px rgba(15,111,150,.18)}
button.secondary{background:#edf6fa!important;color:#165d79!important}
input,select,textarea{min-height:44px;border-radius:12px!important;background:#fff!important}
label{color:#426477!important}
.top{position:relative;z-index:4}
.hero-v2{border-radius:26px!important;background:linear-gradient(135deg,#e8f6fa 0%,#fbfefe 55%,#edf8f2 100%)!important}
.stats-grid .card{min-height:110px}
.tablewrap table tr:nth-child(even) td{background:#fbfdfe}
.tablewrap table tr:hover td{background:#f2f8fb}
.msg{padding:8px 0}
@media(max-width:700px){.card{border-radius:15px!important}.hero-v2{border-radius:18px!important}.top-actions{gap:7px}.adminLink{padding:8px 10px}}

/* =========================================================
   PASS22 — Official, simplified operational UI
   Visual-only and structure-safe: existing element IDs/API hooks retained.
   ========================================================= */
body{background:#f3f7fa!important;color:#18364a!important}
.top{position:sticky;top:0;z-index:30;padding:11px 20px!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(24,72,96,.07)!important}
.brand{justify-content:flex-start!important;text-align:right!important}
.title{font-size:21px!important;color:#123f58!important}
.subtitle{font-size:13px!important;margin-top:3px!important;line-height:1.5!important}
.top-actions{gap:7px!important;flex-wrap:wrap}
.top-actions .adminLink,.top-actions button,.top-actions .pill{font-size:13px;padding:8px 10px!important}

.hero-v2{margin:18px 20px 14px!important;padding:22px 26px!important;grid-template-columns:minmax(145px,205px) 1fr!important;gap:24px!important;border-radius:20px!important;box-shadow:0 8px 26px rgba(24,83,108,.07)!important}
.hero-v2-ministry{font-size:24px!important}
.hero-v2 h1{font-size:34px!important;margin-bottom:7px!important}
.hero-v2-lead{font-size:15px!important;line-height:1.85!important}
.hero-v2-features{margin-top:12px!important}
.hero-v2-features span{font-size:12px!important;padding:7px 10px!important}
.ministry-logo{width:92px!important;height:92px!important}.visitor-logo{width:104px!important;height:78px!important}

.stats-grid{max-width:1440px;margin:14px auto 18px!important;padding:0 20px!important;gap:12px!important}
.stats-grid .card{min-height:94px!important;padding:14px!important;border-radius:16px!important;border-top:3px solid #4e9ab1!important}
.stats-grid .card>div:first-child{font-size:29px!important}

.progress-wrapper{max-width:1100px;margin:18px auto 22px!important;padding:0 20px}
.progress-line{right:45px!important;left:45px!important;top:18px!important;height:3px!important}
.circle{width:38px!important;height:38px!important;font-size:14px}
.progress-steps .label{font-size:12px!important;font-weight:800}

main.grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:16px!important;padding:0 20px 26px!important;align-items:start}
section.card{padding:20px!important;border-radius:18px!important;border:1px solid #d8e6ed!important;box-shadow:0 6px 20px rgba(29,79,101,.055)!important}
section.card:hover{transform:none!important;box-shadow:0 8px 24px rgba(29,79,101,.075)!important}
section.card h2{margin:0 0 17px!important;padding:0!important;display:flex;align-items:center;gap:9px;font-size:17px!important;color:#123f58!important}
.section-no{width:29px;height:29px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:#e8f4f8;color:#0b7595;font-size:14px;font-weight:950;flex:0 0 auto}
.section-optional{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;background:#f1f5f7;color:#708693;margin-inline-start:auto}

.row{margin-bottom:16px!important}label{font-size:13px!important;margin-bottom:6px!important}
input,select,textarea{border-radius:10px!important;min-height:42px!important;padding:9px 11px!important}
textarea{line-height:1.65!important}
button{min-height:40px;border-radius:10px!important;padding:9px 13px!important;font-size:13px}
button.primary{box-shadow:none!important}.adminLink{border-radius:10px!important}

.maintenance-tools{margin:8px 0 14px;padding:9px 11px;border:1px solid #dde8ed;border-radius:10px;background:#fafcfd;color:#60748a}
.maintenance-tools summary{cursor:pointer;font-size:12px;font-weight:800;color:#60748a}
.maintenance-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.maintenance-links a{font-size:12px;text-decoration:none;color:#0d6688;background:#eef7fa;border:1px solid #cfe2ea;padding:7px 9px;border-radius:8px}
.send-safety-note{font-size:12px;line-height:1.7;margin:8px 0 12px;padding:10px 12px;border-radius:10px;background:#f2f8f5;border:1px solid #cfe7db;color:#2b6e54}

#restoreCard{grid-column:1/-1}
#restoreCard .hint{font-size:12px!important}
#restoreCard #batchSearchResults{max-height:260px;overflow:auto}

.foot{font-size:12px!important;padding:16px!important}

@media(max-width:980px){
  main.grid{grid-template-columns:1fr!important;padding:0 12px 22px!important}
  #restoreCard{grid-column:auto}
  .hero-v2{margin:12px!important;grid-template-columns:1fr!important;padding:18px!important}
  .hero-v2-content{text-align:center!important}.hero-v2-ministry{font-size:21px!important}.hero-v2 h1{font-size:28px!important}
  .stats-grid{padding:0 12px!important}
  .progress-wrapper{padding:0 12px!important}
  .brand{justify-content:center!important;text-align:center!important;width:100%}
}
@media(max-width:560px){
  .top{padding:10px 12px!important}.title{font-size:18px!important}.subtitle{font-size:12px!important}
  .top-actions{justify-content:center!important}.top-actions>*{flex:1 1 auto;text-align:center;justify-content:center}
  .hero-v2{gap:14px!important}.hero-v2-lead{font-size:14px!important}.hero-v2-features{justify-content:center!important}
  .progress-steps .label{font-size:10px!important}.circle{width:34px!important;height:34px!important}.progress-line{top:16px!important}
  section.card{padding:15px!important}.section-optional{display:none}
}

/* PASS27 — clearer role separation and navigation */
.nav-admin-secure{background:#fff4e8!important;border-color:#e3a765!important;color:#7a4212!important;font-weight:900!important}
.nav-whatsapp{background:#ebf8f2!important;border-color:#add9c7!important;color:#176448!important;font-weight:900!important}
.workspace-shortcuts{margin:16px 0 18px;background:#fff;border:1px solid #d5e6ed;border-radius:18px;padding:16px;box-shadow:0 7px 22px rgba(18,63,88,.06)}
.workspace-shortcuts-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;color:#123f58}
.workspace-shortcuts-head span{font-size:13px;color:#688090;font-weight:500}
.role-hint{font-size:12px;padding:7px 11px;border-radius:999px;background:#f2f7f9;color:#426577;border:1px solid #d5e4ea}
.workspace-shortcuts-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px}
.workspace-shortcut{display:flex;min-height:96px;flex-direction:column;justify-content:center;gap:4px;text-decoration:none;background:#f8fbfc;border:1px solid #dce9ee;border-radius:14px;padding:13px;color:#173e52}
.workspace-shortcut span{font-size:23px}.workspace-shortcut b{font-size:15px}.workspace-shortcut small{color:#6a8290;line-height:1.55}
.workspace-shortcut:hover{background:#f0f8fa;transform:translateY(-1px)}
.workspace-shortcut.admin-shortcut{background:#fff8ef;border-color:#ecd3b5}
@media(max-width:900px){.workspace-shortcuts-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:540px){.workspace-shortcuts-grid{grid-template-columns:1fr}.top-actions{align-items:stretch}.top-actions .adminLink{justify-content:center}}

/* PASS28 Bugfix2: visually guide the user to the next operational action. */
.next-action{box-shadow:0 0 0 4px rgba(14,128,160,.18),0 8px 24px rgba(14,128,160,.18)!important;transform:translateY(-1px);animation:hvPulse 1.35s ease-in-out infinite;}
.working-action{position:relative;opacity:.92;box-shadow:0 0 0 4px rgba(14,128,160,.14)!important;}
.working-action::after{content:"";display:inline-block;width:14px;height:14px;margin-inline-start:9px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-2px;animation:hvSpin .8s linear infinite;}
@keyframes hvPulse{0%,100%{box-shadow:0 0 0 3px rgba(14,128,160,.12),0 6px 18px rgba(14,128,160,.12)}50%{box-shadow:0 0 0 7px rgba(14,128,160,.20),0 10px 28px rgba(14,128,160,.20)}}
@keyframes hvSpin{to{transform:rotate(360deg)}}