/* Layout: logo-plate masthead (Commission left, Government right), green nav bar, green hero with search, then light content bands. Admin lives in the same shell. */
:root{
  --bg:#f4f8fd; --surface:#ffffff; --surface2:#e8f0fa; --fg:#0f2340; --muted:#546782; --line:#d6e2f1;
  --brand:#1673c9; --brand-ink:#ffffff; --brand-soft:#dcebfb;
  --accent:#ff8a1f; --accent-ink:#2a1400;
  --purple:#7b2d9b; --teal:#16a0a8; --yellow:#ffc928; --red:#e0202c;
  --blue:#1673c9; --focus:#1673c9;
  --danger:#c9202b; --danger-soft:#fde5e6; --ok:#13794a; --ok-soft:#d8f1e4; --warn:#8a5200; --warn-soft:#fdecd0;
  --nav-bg:#e9f3fd; --nav-fg:#0f2340; --nav-chip:rgba(15,35,64,.06); --nav-chip-line:rgba(15,35,64,.22); --nav-line:rgba(15,35,64,.12);
  --hero-bg:linear-gradient(135deg,#d6eafd 0%,#eaf4ff 55%,#f4e9fb 100%); --hero-fg:#0f2340; --hero-line:rgba(15,35,64,.16); --hero-ghost:rgba(15,35,64,.4); --hero-kicker:#7b2d9b; --hero-num:#1673c9; --dot:rgba(22,115,201,.14); --sos-bg:#c9202b; --plate:#ffffff;
  --join-bg:linear-gradient(120deg,#7a4cc0 0%,#2183d6 100%);
  --shadow:0 1px 2px rgba(15,35,64,.06),0 10px 28px rgba(15,35,64,.08);
  --f-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0a1424; --surface:#111f36; --surface2:#182a47; --fg:#e6eefb; --muted:#9db0cc; --line:#25395b;
  --brand:#5aa9f2; --brand-ink:#04142a; --brand-soft:#14304f; --accent:#ff8a1f; --accent-ink:#2a1400;
  --purple:#b46fd6; --teal:#3cc4cb; --yellow:#ffc928; --red:#ff6b73;
  --blue:#5aa9f2; --focus:#8cc3f7;
  --danger:#ff8f95; --danger-soft:#3d1a1e; --ok:#62d79b; --ok-soft:#14352a; --warn:#f2b660; --warn-soft:#3a2a0e;
  --nav-bg:#0b2447; --nav-fg:#ffffff; --nav-chip:rgba(255,255,255,.12); --nav-chip-line:rgba(255,255,255,.3); --nav-line:rgba(255,255,255,.14);
  --hero-bg:linear-gradient(135deg,#081b3a 0%,#124a8f 100%); --hero-fg:#ffffff; --hero-line:var(--hero-line); --hero-ghost:rgba(255,255,255,.55); --hero-kicker:#ffc928; --hero-num:#ffc928; --dot:rgba(255,255,255,.09); --sos-bg:#b3202b; --plate:#ffffff;
  --join-bg:linear-gradient(120deg,#3b1659 0%,#124a8f 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a1424; --surface:#111f36; --surface2:#182a47; --fg:#e6eefb; --muted:#9db0cc; --line:#25395b;
  --brand:#5aa9f2; --brand-ink:#04142a; --brand-soft:#14304f; --accent:#ff8a1f; --accent-ink:#2a1400;
  --purple:#b46fd6; --teal:#3cc4cb; --yellow:#ffc928; --red:#ff6b73;
  --blue:#5aa9f2; --focus:#8cc3f7;
  --danger:#ff8f95; --danger-soft:#3d1a1e; --ok:#62d79b; --ok-soft:#14352a; --warn:#f2b660; --warn-soft:#3a2a0e;
  --nav-bg:#0b2447; --nav-fg:#ffffff; --nav-chip:rgba(255,255,255,.12); --nav-chip-line:rgba(255,255,255,.3); --nav-line:rgba(255,255,255,.14);
  --hero-bg:linear-gradient(135deg,#081b3a 0%,#124a8f 100%); --hero-fg:#ffffff; --hero-line:var(--hero-line); --hero-ghost:rgba(255,255,255,.55); --hero-kicker:#ffc928; --hero-num:#ffc928; --dot:rgba(255,255,255,.09); --sos-bg:#b3202b; --plate:#ffffff;
  --join-bg:linear-gradient(120deg,#3b1659 0%,#124a8f 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35); color-scheme:dark}
html[dir="rtl"]{--f-body:"Noto Naskh Arabic","Public Sans",system-ui,sans-serif;--f-display:"Noto Naskh Arabic","Bricolage Grotesque",system-ui,sans-serif}
html[dir="rtl"] *{letter-spacing:0!important}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
html[dir="rtl"] body{line-height:1.9}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--nav-bg);z-index:60}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance;font-weight:700}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{line-height:1.5}
p{margin:0}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}

/* helpline 1121 */
.sos{background:var(--sos-bg);color:#fff}
.sosrow{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;padding-block:8px;text-align:center}
.sosq{font-weight:700;font-size:15px}
.sosname{font-size:14px;opacity:.92}
.sosnum{display:inline-flex;gap:8px;align-items:center;background:#fff;color:var(--sos-bg);border-radius:99px;padding:3px 16px;font-weight:800;font-size:18px;text-decoration:none}
.qcard.primary{grid-column:1 / -1;border:2px solid var(--danger);background:var(--danger-soft);grid-template-columns:auto 1fr auto;align-items:center;gap:6px 24px;padding:20px 24px}
.qcard.primary .n{font-size:clamp(48px,9vw,76px)}
.qcard.primary b{font-size:20px}
.qcard.primary .tag,.feature .tag{display:inline-block;background:var(--sos-bg);color:#fff;border-radius:6px;font-size:12px;font-weight:700;padding:2px 10px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.qcard.primary .go{background:var(--sos-bg);color:#fff;border-radius:12px;padding:14px 26px;font-weight:800;font-size:18px;text-align:center}
@media (max-width:640px){.qcard.primary{grid-template-columns:1fr}}
.feature{display:grid;grid-template-columns:auto 1fr auto;gap:8px 28px;align-items:center;background:var(--danger-soft);border:2px solid var(--danger);border-radius:18px;padding:22px 26px;margin-bottom:22px}
.feature .n{font-family:var(--f-display);font-size:clamp(56px,10vw,92px);font-weight:700;line-height:1;color:var(--danger)}
.feature h2{font-size:clamp(20px,3vw,26px);margin:6px 0 4px}
.feature .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.feature{grid-template-columns:1fr}}
.erow.primary{border:2px solid var(--danger);background:var(--danger-soft)}
.erow.primary .sr-n{background:var(--sos-bg);color:#fff}
/* masthead */
.top{background:var(--surface);border-bottom:0;position:relative}
.top::after{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--purple) 0 20%,var(--blue) 20% 40%,var(--teal) 40% 60%,var(--yellow) 60% 78%,var(--accent) 78% 90%,var(--red) 90%)}
.topgrid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding-block:14px}
.plate{background:var(--plate);border-radius:14px;padding:6px;display:grid;place-items:center;border:1px solid var(--line)}
.plate img{height:76px;width:auto;display:block}
.brandtext{text-align:center;min-width:0}
.brandtext .k{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.brandtext .t{font-family:var(--f-display);font-size:clamp(19px,3.4vw,32px);font-weight:700;line-height:1.15;margin-top:2px;text-wrap:balance}
html[dir="rtl"] .brandtext .t{line-height:1.5}
.navband{background:var(--nav-bg);border-bottom:1px solid var(--nav-line);position:sticky;top:env(safe-area-inset-top,0px);z-index:50}
.navrow{display:flex;align-items:center;gap:10px;min-height:52px;flex-wrap:wrap}
.links{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex:1;flex-wrap:wrap}
.links a{display:block;color:var(--nav-fg);text-decoration:none;padding:12px 12px;font-weight:600;font-size:14.5px;opacity:.88;border-bottom:3px solid transparent}
.links a:hover{opacity:1}
.links a[aria-current="page"]{opacity:1;border-bottom-color:var(--accent)}
.links a.cta{background:var(--accent);color:var(--accent-ink);opacity:1;border-radius:8px;margin-inline:6px;padding:8px 14px;border-bottom:0}
.langsel{display:flex;align-items:center;gap:6px;color:var(--nav-fg);font-size:13px;margin-inline-start:auto}
.langsel select{background:var(--nav-chip);color:var(--nav-fg);border:1px solid var(--nav-chip-line);border-radius:8px;padding:6px 8px;font-weight:600}
.langsel option{color:#10241b;background:#fff}
.burger{display:none;background:var(--nav-chip);border:1px solid var(--nav-chip-line);color:var(--nav-fg);border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
@media (max-width:1000px){
  .burger{display:inline-block}
  .links{display:none;flex-basis:100%;order:3;flex-direction:column;padding-bottom:10px}
  .links.open{display:flex}
  .links a{padding:12px 6px;border-bottom:1px solid var(--nav-line)}
  .links a.cta{margin:8px 0 0;text-align:center}
}
@media (max-width:560px){.plate img{height:52px}.topgrid{gap:8px}.brandtext .k{display:none}}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-fg);position:relative;overflow:hidden}
.hero .dots{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.5px,transparent 1.5px);background-size:26px 26px;pointer-events:none}
.hero-in{position:relative;padding-block:56px 36px;display:grid;gap:22px;align-content:center}
.herogrid{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}
.herovis{position:relative;aspect-ratio:1;max-width:380px;width:100%;justify-self:center}
.herovis .core{position:absolute;inset:14%;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.herovis .core img{width:82%;height:auto}
.herovis .bl{position:absolute;border-radius:50%}
@media (max-width:900px){.herogrid{grid-template-columns:1fr}.herovis{display:none}}
.kicker{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--hero-kicker)}
.hero h1{font-size:clamp(30px,5.4vw,54px);max-width:18ch}
html[dir="rtl"] .hero h1{max-width:none}
.lead{font-size:clamp(16px,2vw,19px);max-width:62ch;opacity:.92}
.hsearch{display:flex;gap:8px;max-width:640px;background:var(--surface);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hsearch input{flex:1;min-width:0;border:0;background:transparent;padding:10px 12px;color:var(--fg);font-size:16px}
.hsearch input:focus-visible{outline:none}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hero-line)}
.stat{padding:18px 8px 22px;display:grid;gap:2px}
.stat+.stat{border-inline-start:1px solid var(--hero-line);padding-inline-start:20px}
.stat b{font-family:var(--f-display);font-size:34px;color:var(--hero-num);line-height:1.1}
.stat span{font-size:14px;opacity:.9}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-inline-start:0;padding-inline-start:8px}.stat:nth-child(n+3){border-top:1px solid var(--hero-line)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;text-decoration:none;background:var(--brand);color:var(--brand-ink);font-size:15px;line-height:1.3}
.btn:hover{filter:brightness(1.08)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.btn.line{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:8px}
.btn.block{width:100%;padding:14px;font-size:17px}
.hero .btn.ghost{color:var(--hero-fg);border-color:var(--hero-ghost)}
.hero .btn.sos{background:var(--sos-bg);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(201,32,43,.35)}

/* sections */
.sec{padding-block:44px}
.sec.alt{background:var(--surface);border-block:1px solid var(--line)}
.sechead{display:grid;gap:8px;margin-bottom:24px}
.sechead h2{font-size:clamp(24px,3.4vw,34px)}
.sechead p{color:var(--muted);max-width:68ch}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:24px}}
.prose p+p{margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:6px}
.step h3{font-size:19px}.step p{color:var(--muted);font-size:15px}
.step .ic{width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:800}
.steps .step:nth-child(2) .ic{background:var(--purple);color:#fff}.steps .step:nth-child(3) .ic{background:var(--teal);color:#06232a}
.step{border-top:4px solid var(--brand)}.steps .step:nth-child(2){border-top-color:var(--purple)}.steps .step:nth-child(3){border-top-color:var(--teal)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.quick{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.quick{grid-template-columns:1fr}}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:6px;text-decoration:none;color:var(--fg)}
.qcard .n{font-family:var(--f-display);font-size:38px;font-weight:700;color:var(--danger);line-height:1}
.qcard small{color:var(--muted);font-size:14px}
.join{background:var(--join-bg);color:#fff;border-radius:18px;padding:28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.join h2{font-size:26px;margin-bottom:6px}.join p{max-width:60ch;opacity:.92}

/* emergency */
.elist{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.erow{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center}
.erow .sr-n{width:34px;height:34px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.erow .nm{font-weight:600}
.erow .nums{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.erow .big{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--danger)}
.erow.off{opacity:.62}
.erow .adm{grid-column:2 / -1;display:flex;gap:6px;flex-wrap:wrap;padding-top:4px;border-top:1px dashed var(--line)}
@media (max-width:560px){.erow{grid-template-columns:30px 1fr}.erow .nums{grid-column:2;justify-content:flex-start}}
.note{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:12px 16px;font-weight:600;margin-bottom:18px}

/* cards & filters */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media (max-width:980px){.filters{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.filters{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.filters{grid-template-columns:1fr}}
.filters label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;align-content:start;text-align:start;cursor:pointer;min-width:0;box-shadow:var(--shadow)}
.card:hover{border-color:var(--brand)}
.card .hd{display:flex;gap:12px;align-items:center;min-width:0}
.avatar{width:54px;height:54px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:20px;flex:none;overflow:hidden;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:contain;background:#fff}
.card h3{font-size:18px;overflow-wrap:anywhere}
.meta{color:var(--muted);font-size:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.chip.g{background:var(--surface2);color:var(--muted)}
.card:nth-child(4n+2) .chip:not(.g){background:color-mix(in srgb,var(--purple) 16%,transparent);color:color-mix(in srgb,var(--purple) 75%,var(--fg))}.card:nth-child(4n+3) .chip:not(.g){background:color-mix(in srgb,var(--teal) 18%,transparent);color:color-mix(in srgb,var(--teal) 55%,var(--fg))}.card:nth-child(4n) .chip:not(.g){background:color-mix(in srgb,var(--accent) 20%,transparent);color:#b25a00}
.badge{font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px;background:var(--surface2);color:var(--muted)}
.badge.pending{background:var(--warn-soft);color:var(--warn)}.badge.approved{background:var(--ok-soft);color:var(--ok)}.badge.rejected{background:var(--danger-soft);color:var(--danger)}.badge.sample{background:var(--surface2);color:var(--muted);border:1px dashed var(--line)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:32px;text-align:center;color:var(--muted)}

/* forms */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.panel+.panel{margin-top:16px}
.panel>h2{font-size:19px;padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-family:var(--f-display)}
.panel>h2 i{width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.panel .body{padding:20px;display:grid;gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field>label,.legend{font-weight:600;font-size:14.5px}
.req{color:var(--danger);margin-inline-start:2px}
.hint{color:var(--danger);font-weight:500;font-size:12px;margin-inline-start:6px}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=number],input[type=search],select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--fg);min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
.has-err input,.has-err select,.has-err textarea{border-color:var(--danger)}
.err{color:var(--danger);font-size:13px;font-weight:600;min-height:0}
.err:empty{display:none}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px}
@media (max-width:700px){.checks{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.checks{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:9px;font-size:15px;cursor:pointer;padding:4px 0}
.check input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.cols2{grid-template-columns:1fr}}
.drop{border:2px dashed var(--line);border-radius:12px;width:160px;height:120px;display:grid;place-items:center;text-align:center;cursor:pointer;font-weight:600;font-size:14px;padding:8px;overflow:hidden;background:var(--bg)}
.drop:hover{border-color:var(--brand)}
.drop img{max-width:100%;max-height:100%;object-fit:contain}
.submit{margin-top:16px}
.ok{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:36px;text-align:center;display:grid;gap:12px;justify-items:center;box-shadow:var(--shadow)}
.ok .tick{width:60px;height:60px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:30px;font-weight:800}
.narrow{max-width:760px;margin-inline:auto}
.login{max-width:420px;margin-inline:auto}

/* admin */
.adminwrap{direction:ltr;text-align:left}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.tile b{font-family:var(--f-display);font-size:30px;display:block;line-height:1.1}
.tile span{color:var(--muted);font-size:13.5px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.tab em{font-style:normal;background:var(--surface2);border-radius:99px;padding:1px 8px;font-size:12px;margin-inline-start:4px}
.arow{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-bottom:10px}
.arow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.arow{grid-template-columns:auto 1fr}.arow .acts{grid-column:1 / -1;justify-content:flex-start}}
.admhead{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}

/* modal + toast */
.ov{position:fixed;inset:0;background:rgba(5,15,10,.6);z-index:100;display:grid;place-items:center;padding:16px;overflow:auto}
.modal{background:var(--surface);color:var(--fg);border-radius:18px;max-width:640px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.4);position:relative}
.modal .mh{display:flex;gap:14px;align-items:center;padding:20px 20px 12px;padding-inline-end:56px}
.modal .mb{padding:4px 20px 20px;display:grid;gap:16px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.xbtn{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:18px;line-height:1}
.dl{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;font-size:15px}
.dl dt{color:var(--muted);font-weight:600}.dl dd{margin:0;overflow-wrap:anywhere}
@media (max-width:480px){.dl{grid-template-columns:1fr}.dl dt{margin-top:6px}}
.h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.toast{position:fixed;inset-inline:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:200;pointer-events:none}
.toast span{background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;font-size:14.5px;box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* footer */
.foot{border-top:5px solid var(--accent);background:var(--nav-bg);color:var(--nav-fg);margin-top:20px}
.foot .wrap{padding-block:28px;display:grid;gap:10px;font-size:14px}
.foot a{color:var(--nav-fg)}
.foot .fl{display:flex;gap:16px;flex-wrap:wrap}
.foot .dis{opacity:.85;max-width:80ch}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- server-rendered additions ---- */
html{padding:0}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
.flash{margin:0 0 16px;padding:12px 16px;border-radius:12px;font-weight:600}
.flash.ok{background:var(--ok-soft);color:var(--ok)}.flash.err{background:var(--danger-soft);color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tabs a.tab{text-decoration:none;display:inline-block}
form.inline{display:inline}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.pager a,.pager span{min-width:38px;text-align:center;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;font-weight:600}
.pager .cur{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
a.card{text-decoration:none;color:inherit}
.backlink{display:inline-block;margin-bottom:14px;font-weight:600}
.detail{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.detail .panel .body{gap:14px}
.logo-lg{width:96px;height:96px;border-radius:16px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;font-family:var(--f-display);font-size:30px;font-weight:700;color:var(--brand)}
.logo-lg img{width:100%;height:100%;object-fit:contain}
.adminwrap .field label{font-weight:600}
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th,table.t td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.admnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.admnav a{padding:8px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--fg);font-size:14px}
.admnav a.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
textarea{font-family:inherit}
.photo-preview{max-width:160px;max-height:120px;object-fit:contain}