/* ==========================================================================
   Donation Foundation — "Azure" design system (v9 white & blue)
   Donor site = airy white + royal blue. Admin = navy command-center look.
   rem-based fluid sizing: crisp from phones up to 4K / 8K screens.
   ========================================================================== */
:root{
  --bg:#f4f7fe;--surface:#fff;--ink:#0a1a3f;--ink-2:#34466d;--muted:#667593;
  --line:#e3eaf6;--line-2:#cfdaee;--blue:#1d56e8;--blue-2:#1238b0;--sky:#3aa7ff;--ice:#eaf1ff;--navy:#0a1a3f;--navy-2:#0f2a66;
  --ok:#0e9f6e;--warn:#d97706;--danger:#e11d48;
  --r:1.3rem;--r-sm:.85rem;
  --shadow:0 1.3rem 2.8rem -1.5rem rgba(16,45,120,.30),0 .1rem .3rem rgba(16,45,120,.06);
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-display:"Sora","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg);color-scheme:light}
@media(min-width:1920px){html{font-size:19px}}
@media(min-width:2560px){html{font-size:25px}}
@media(min-width:3440px){html{font-size:31px}}
@media(min-width:3840px){html{font-size:36px}}
@media(min-width:5120px){html{font-size:48px}}
body{margin:0;font-family:var(--f-body);font-size:1rem;line-height:1.65;color:var(--ink);background:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
html[lang=ur] body{font-family:"Noto Nastaliq Urdu","Plus Jakarta Sans",system-ui,sans-serif;line-height:2.1}
body.no-scroll{overflow:hidden}
/* Atmosphere: soft sky glow + faint blueprint grid */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(62rem 34rem at 8% -10%,rgba(58,167,255,.24),transparent 62%),radial-gradient(52rem 32rem at 100% 0%,rgba(29,86,232,.13),transparent 60%),linear-gradient(180deg,#fff 0,var(--bg) 44rem)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(29,86,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,86,232,.05) 1px,transparent 1px);background-size:3.2rem 3.2rem;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
main{flex:1}
img{max-width:100%}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-2)}
::selection{background:rgba(58,167,255,.3)}
:focus-visible{outline:.16rem solid var(--sky);outline-offset:.2rem;border-radius:.4rem}
.wrap{width:100%;max-width:76rem;margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.muted{color:var(--muted)}
.ico{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0 0 .6em;color:var(--ink)}
html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3{font-family:"Noto Nastaliq Urdu",serif;line-height:1.9}
h2{font-size:clamp(1.6rem,2.3vw + .6rem,2.4rem)}
.section>.wrap>h2::after,main>.wrap>h2::after{content:"";display:block;width:3.2rem;height:.26rem;margin-top:.7rem;border-radius:9px;background:linear-gradient(90deg,var(--blue),var(--sky))}
h3{font-size:clamp(1.1rem,1vw + .8rem,1.4rem)}
p{margin:0 0 1em}
strong{font-weight:700;color:var(--ink)}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.84);backdrop-filter:saturate(1.6) blur(1rem);-webkit-backdrop-filter:saturate(1.6) blur(1rem);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.topbar.scrolled{box-shadow:0 .9rem 2rem -1.2rem rgba(16,45,120,.4)}
.topbar .wrap{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.1rem);min-height:4.4rem}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;min-width:0}
.brand:hover{color:var(--ink)}
.brand-mark{width:2.55rem;height:2.55rem;border-radius:.85rem;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,var(--sky),var(--blue) 55%,var(--blue-2));box-shadow:0 .6rem 1.3rem -.5rem rgba(29,86,232,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.brand-mark .ico{width:1.3rem;height:1.3rem;stroke-width:2.1}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.brand small{display:block;font-family:var(--f-body);font-size:.6rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-top:-.1rem}
.burger{width:2.9rem;height:2.9rem;border-radius:.9rem;border:1px solid var(--line-2);background:#fff;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.32rem;padding:0;cursor:pointer;flex:none;box-shadow:0 .4rem 1rem -.6rem rgba(16,45,120,.5);transition:background .25s,border-color .25s,transform .25s var(--ease)}
.burger i{display:block;height:.15rem;width:1.3rem;border-radius:9px;background:var(--ink);transition:width .3s var(--ease),background .25s}
.burger i:nth-child(2){width:.85rem}
.burger:hover{background:var(--ice);border-color:var(--blue)}
.burger:hover i{background:var(--blue)}.burger:hover i:nth-child(2){width:1.3rem}
.burger:active{transform:scale(.94)}
.lang-sw{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:.18rem;background:#fff;font-size:.78rem;font-weight:700}
.lang-sw a{color:var(--muted);padding:.28rem .7rem;border-radius:999px}
.lang-sw a.on{background:var(--blue);color:#fff}
.profile-wrap{position:relative}
.profile-btn{display:flex;align-items:center;gap:.4rem;height:2.9rem;padding:0 .8rem 0 .5rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;font:600 .85rem var(--f-body);transition:border-color .25s,background .25s}
.profile-btn:hover{border-color:var(--blue);background:var(--ice)}
.avatar{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--sky),var(--blue));color:#fff}
.avatar .ico{width:1.1rem;height:1.1rem;stroke-width:2}
.profile-menu{position:absolute;right:0;top:calc(100% + .7rem);min-width:15.5rem;padding:.5rem;border-radius:1rem;background:#fff;border:1px solid var(--line);box-shadow:0 1.6rem 3rem -1rem rgba(16,45,120,.4);opacity:0;visibility:hidden;transform:translateY(-.4rem) scale(.98);transform-origin:top right;transition:all .25s var(--ease);z-index:80}
.profile-menu.open{opacity:1;visibility:visible;transform:none}
.profile-menu a{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:.7rem;color:var(--ink-2);font-weight:600;font-size:.92rem}
.profile-menu a:hover{background:var(--ice);color:var(--blue)}
.profile-menu .ico{color:var(--blue);width:1.1rem;height:1.1rem}

/* ---------- Drawer (3-line menu panel — user & admin) ---------- */
.drawer-overlay{position:fixed;inset:0;z-index:90;background:rgba(10,26,63,.5);backdrop-filter:blur(.3rem);-webkit-backdrop-filter:blur(.3rem);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.drawer-overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;left:0;top:0;bottom:0;z-index:100;width:min(24.5rem,90vw);display:flex;flex-direction:column;background:#fff;box-shadow:2rem 0 4rem -1rem rgba(10,26,63,.5);transform:translateX(-102%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.drawer-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.3rem;color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue) 60%,var(--sky));overflow:hidden}
.drawer-head::after{content:"";position:absolute;right:-3rem;top:-4rem;width:11rem;height:11rem;border-radius:50%;background:rgba(255,255,255,.12)}
.drawer-head .brand{color:#fff;position:relative;z-index:1}.drawer-head .brand small{color:#cfe4ff}
.drawer-head .brand-mark{background:#fff;color:var(--blue);box-shadow:none}
.drawer-close{position:relative;z-index:1;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .4s var(--ease),background .25s}
.drawer-close:hover{transform:rotate(90deg);background:#fff;color:var(--blue)}
.drawer-nav{flex:1;overflow-y:auto;padding:.7rem .9rem 1rem;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.drawer-label{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);padding:1rem .8rem .4rem}
.drawer-nav a{position:relative;display:flex;align-items:center;gap:.85rem;padding:.6rem .8rem;margin:.12rem 0;border-radius:.9rem;color:var(--ink-2);font-weight:600;font-size:.95rem;opacity:0;transform:translateX(-.8rem);transition:background .25s,color .25s,transform .25s var(--ease)}
.drawer.open .drawer-nav a{animation:navIn .55s var(--ease) forwards;animation-delay:calc(var(--i,0)*26ms + 120ms)}
@keyframes navIn{to{opacity:1;transform:none}}
.drawer-nav a .tile{width:2.25rem;height:2.25rem;border-radius:.7rem;display:grid;place-items:center;background:var(--ice);color:var(--blue);flex:none;transition:all .25s}
.drawer-nav a .tile .ico{width:1.1rem;height:1.1rem}
.drawer-nav a:hover{background:var(--ice);color:var(--ink);transform:translateX(.25rem)}
.drawer-nav a:hover .tile,.drawer-nav a.active .tile{background:linear-gradient(140deg,var(--sky),var(--blue));color:#fff}
.drawer-nav a.active{background:var(--ice);color:var(--blue-2);font-weight:700}
.drawer-nav a.active::before{content:"";position:absolute;left:-.9rem;top:22%;bottom:22%;width:.3rem;border-radius:0 6px 6px 0;background:var(--blue)}
.drawer-nav a.danger-link .tile{background:#ffe9ee;color:var(--danger)}
.drawer-foot{padding:1rem 1.2rem 1.3rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;background:#f8faff}
.drawer-foot .btn{width:100%}

/* ---------- Buttons ---------- */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 .93rem/1.2 var(--f-body);padding:.8rem 1.4rem;border-radius:.9rem;border:1px solid transparent;cursor:pointer;color:#fff;text-decoration:none;background:linear-gradient(135deg,#3b78ff,var(--blue) 50%,var(--blue-2));box-shadow:0 .8rem 1.5rem -.8rem rgba(29,86,232,.85),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .25s var(--ease),box-shadow .25s,filter .25s,background .25s}
.btn:hover{color:#fff;transform:translateY(-.1rem);filter:brightness(1.07);box-shadow:0 1.1rem 1.9rem -.9rem rgba(29,86,232,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.outline{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:0 .3rem .8rem -.6rem rgba(16,45,120,.4)}
.btn.outline:hover{color:var(--blue);border-color:var(--blue);background:var(--ice)}
.btn.gold{background:linear-gradient(135deg,var(--navy-2),var(--navy));box-shadow:0 .8rem 1.5rem -.8rem rgba(10,26,63,.9)}
.btn.danger,.btn[name="reject"],.btn[name^="delete"]{background:#fff1f4;color:#be123c;border-color:#fbc9d5;box-shadow:none}
.btn.danger:hover,.btn[name="reject"]:hover,.btn[name^="delete"]:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn[name="reject"]{background:#fff7e8;color:#a85a05;border-color:#f6d7a0}
.btn[name="reject"]:hover{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn.preset{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:none;padding:.55rem 1.1rem;border-radius:999px;margin:.2rem .4rem .2rem 0}
.btn.preset:hover{border-color:var(--blue);color:var(--blue);background:var(--ice)}
td .btn,.card-head .btn{padding:.5rem .95rem;font-size:.8rem;border-radius:.65rem}
td form{margin:0}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem 1rem;border-radius:999px;font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-2);background:#fff;border:1px solid var(--line-2);box-shadow:0 .4rem 1rem -.7rem rgba(16,45,120,.6)}
.pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--sky);box-shadow:0 0 0 .2rem rgba(58,167,255,.25);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 .5rem rgba(58,167,255,0)}}

/* ---------- Layout grids ---------- */
.section{padding:clamp(1.8rem,3.6vw,3.4rem) 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.6rem)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.8vw,1.6rem);align-items:start}
.grid>.card,.grid2>.card{height:100%}
@media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.15rem,2vw,1.6rem);box-shadow:var(--shadow);transition:border-color .3s,transform .35s var(--ease),box-shadow .3s}
.grid>.card:hover,.grid2>.card:hover{border-color:#b9cdf3;box-shadow:0 1.8rem 3.2rem -1.4rem rgba(29,86,232,.35)}
.card-head{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:0 0 1.1rem;padding-bottom:.95rem;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink)}
.card-head::before{content:"";width:.32rem;height:1.15rem;flex:none;border-radius:9px;background:linear-gradient(180deg,var(--sky),var(--blue))}
.card>p:last-child,.card>form:last-child{margin-bottom:0}
.stat{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,2.2vw + 1rem,2.9rem);line-height:1.1;letter-spacing:-.03em;margin:.2rem 0 .7rem;font-variant-numeric:tabular-nums;background:linear-gradient(120deg,var(--navy) 10%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.bar{height:.6rem;border-radius:999px;background:#e5edfb;overflow:hidden;margin:.7rem 0 .35rem}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sky),var(--blue));transition:width 1.1s var(--ease)}
.notice{display:flex;align-items:flex-start;gap:.8rem;margin:0 0 1.2rem;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--ice);border:1px solid #c6d9fb;border-left:.3rem solid var(--blue);color:var(--navy-2);font-weight:600}
.notice.warn{background:#fff7e8;border-color:#f6d7a0;border-left-color:var(--warn);color:#7a4503}
.notice.danger{background:#fff1f4;border-color:#fbc9d5;border-left-color:var(--danger);color:#9f1239}
.notice .ico{margin-top:.15rem}

/* ---------- Forms ---------- */
form label{display:block;margin:1.05rem 0 .4rem;font-size:.82rem;font-weight:700;letter-spacing:.01em;color:var(--ink-2)}
input,select,textarea{width:100%;font:500 1rem/1.4 var(--f-body);color:var(--ink);padding:.85rem 1rem;border-radius:.85rem;border:1px solid var(--line-2);background:#fff;transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder,textarea::placeholder{color:#9aa7bf}
input:hover,select:hover,textarea:hover{border-color:#a9bde3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fbfdff;box-shadow:0 0 0 .22rem rgba(29,86,232,.15)}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d56e8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.15rem}
option{background:#fff;color:var(--ink)}
textarea{min-height:7.5rem;resize:vertical}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;padding:0;accent-color:var(--blue);vertical-align:-.15rem;margin-right:.4rem}
input[type=file]{padding:.55rem}
input[type=file]::file-selector-button{margin-right:.9rem;padding:.5rem 1rem;border:0;border-radius:.6rem;font:700 .85rem var(--f-body);color:#fff;background:var(--blue);cursor:pointer}
form .btn{margin-top:1rem}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:1rem;background:#fff;margin:.4rem 0 1.1rem;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:.9rem 1.05rem;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#f3f7ff;white-space:nowrap}
table tr:last-child td{border-bottom:0}
tr:hover td{background:#f8faff}
td form[style*="flex"]{flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.b-approved,.b-active,.b-paid,.b-completed{color:#067a53;background:#e3f7ef;border-color:#b5e8d3}
.b-pending{color:#a05a06;background:#fff4de;border-color:#f6d9a1}
.b-rejected,.b-inactive,.b-closed{color:#b4123a;background:#ffe9ee;border-color:#fbc3cf}
.b-neutral{color:var(--ink-2);background:#eef3fc;border-color:var(--line-2)}
/* Mobile: tables become tidy stacked cards — no sideways scrolling */
@media(max-width:700px){
  .table-wrap{border:0;background:none;overflow:visible;margin-top:.2rem}
  table.stack,table.stack tbody{display:block;width:100%}
  table.stack tr.th-row{display:none}
  table.stack tr{display:block;background:#fff;border:1px solid var(--line);border-radius:1rem;margin-bottom:.8rem;padding:.35rem 1rem;box-shadow:0 .8rem 1.6rem -1.2rem rgba(16,45,120,.4)}
  table.stack td{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:right;border:0;border-bottom:1px dashed var(--line);padding:.65rem 0;background:none!important}
  table.stack td:last-child{border-bottom:0}
  table.stack td::before{content:attr(data-label);flex:none;text-align:left;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  table.stack td[data-label=""]{justify-content:flex-end;flex-wrap:wrap}table.stack td[data-label=""]::before{display:none}
  table.stack td form{display:flex!important;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
}

/* ---------- Hero (home) ---------- */
.hero{padding:clamp(2.4rem,6vw,6rem) 0 clamp(1.4rem,3vw,3rem)}
.hero h1{font-size:clamp(2.3rem,4.2vw + .8rem,4.8rem);font-weight:800;line-height:1.06;letter-spacing:-.035em;margin:1.1rem 0 1rem;background:linear-gradient(120deg,var(--navy) 35%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:clamp(1rem,.5vw + .9rem,1.25rem);color:var(--ink-2);max-width:40rem}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,4vw,4rem);align-items:center;text-align:left}
.hero-3d{overflow:hidden}
.scene{position:relative;perspective:1000px;min-height:16rem}
.tilt-card{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease,border-color .3s}
.scene .tilt-card{color:#fff;background:linear-gradient(150deg,#2f6bff 0%,var(--blue-2) 55%,var(--navy-2) 100%);border-radius:1.6rem;padding:clamp(1.3rem,2.2vw,2rem);box-shadow:0 2.4rem 4.4rem -1.4rem rgba(18,56,176,.65);overflow:hidden}
.scene .tilt-card::after{content:"";position:absolute;right:-4rem;top:-5rem;width:14rem;height:14rem;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.scene .tilt-card .card-head{color:#fff;border-color:rgba(255,255,255,.22)}.scene .tilt-card .card-head::before{background:#fff}
.scene .tilt-card p{color:rgba(255,255,255,.86);max-width:none}.scene .tilt-card .muted{color:rgba(255,255,255,.78)}.scene .tilt-card strong{color:#fff}
.scene .tilt-card .stat{background:none;-webkit-text-fill-color:#fff;color:#fff}
.scene .tilt-card .btn{background:#fff;color:var(--blue-2);box-shadow:0 .8rem 1.4rem -.8rem rgba(0,0,0,.6)}
.float-badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--ink);font-weight:700;font-size:.8rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);box-shadow:0 1rem 2rem -.8rem rgba(16,45,120,.5);animation:floaty 3.6s ease-in-out infinite;z-index:3}
.badge-1{top:-.9rem;right:.6rem}.badge-2{bottom:-.9rem;left:-.4rem;animation-delay:1.3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-.55rem)}}
.reveal{opacity:0;transform:translateY(1.1rem);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.scene{min-height:14rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- Page bits ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{margin:0}.gallery img{width:100%;height:12rem;object-fit:cover;border-radius:1rem;border:1px solid var(--line);transition:transform .4s var(--ease)}
.gallery img:hover{transform:scale(1.03)}.gallery figcaption{font-size:.85rem;color:var(--muted);padding:.5rem .2rem}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}}
.cert{position:relative;background:#fff;color:var(--ink);border-radius:1.2rem;padding:clamp(1.6rem,4vw,3.4rem);text-align:center;border:.3rem double var(--blue);box-shadow:var(--shadow)}
.cert::after{content:"";position:absolute;inset:.7rem;border:1px solid #c6d9fb;border-radius:.8rem;pointer-events:none}
.cert h2{font-size:clamp(1.5rem,3vw,2.5rem)}.cert h2::after{margin-inline:auto!important}
.cert p{color:var(--ink-2)}
.emergency-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem 1rem;padding:.8rem 1rem;text-align:center;font-weight:600;color:#fff;background:linear-gradient(90deg,#be123c,#e11d48 50%,#be123c)}
.emergency-banner strong{color:#fff;letter-spacing:.04em;text-transform:uppercase}
.emergency-banner .btn{margin:0;padding:.45rem 1.1rem;font-size:.82rem;background:#fff;color:#be123c;box-shadow:none}
.wa-float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:55;display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.2rem;border-radius:999px;font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,#2ee27a,#12a553);box-shadow:0 1rem 2rem -.6rem rgba(18,165,83,.7);transition:transform .3s var(--ease)}
.wa-float:hover{color:#fff;transform:translateY(-.2rem) scale(1.03)}
@media(max-width:560px){.wa-float span{display:none}.wa-float{padding:.9rem}}
.section>.wrap[style*="max-width"]{margin-inline:auto}

/* ---------- Footer (navy) ---------- */
.footer{margin-top:clamp(2rem,4vw,4rem);background:linear-gradient(180deg,var(--navy-2),var(--navy));color:#c4d3f2;text-align:left}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:clamp(1.4rem,3vw,3rem);padding:clamp(2rem,4vw,3.4rem) 0 2rem}
.footer .brand,.footer .brand:hover{color:#fff}
.footer .brand-name{max-width:none}
.footer h4{font-family:var(--f-body);font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:1rem}
.footer p{color:#9fb3dd;font-size:.93rem;max-width:26rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer ul a{color:#dbe6ff;font-weight:500;font-size:.93rem}.footer ul a:hover{color:#fff}
.footer .muted{color:#9fb3dd}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;padding:1.1rem 0 1.6rem;border-top:1px solid rgba(255,255,255,.12);color:#8ea3d0;font-size:.82rem}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.hint{font-size:.82rem;color:var(--muted);padding:.8rem 1rem;border-radius:.8rem;border:1px dashed var(--line-2);background:#fff;margin:0 0 .4rem}

/* ==========================================================================
   ADMIN — "Command Center": navy chrome, blue hero band, floating white cards
   ========================================================================== */
body.admin::before{background:radial-gradient(60rem 30rem at 100% 0,rgba(58,167,255,.14),transparent 60%),var(--bg)}
body.admin::after{display:none}
body.admin .topbar{background:linear-gradient(90deg,var(--navy),var(--navy-2));border-bottom:0;box-shadow:none}
body.admin .topbar.scrolled{box-shadow:0 .9rem 2rem -1rem rgba(10,26,63,.8)}
body.admin .topbar .brand,body.admin .topbar .brand:hover{color:#fff}body.admin .topbar .brand small{color:var(--sky)}
body.admin .topbar .brand-mark{background:linear-gradient(140deg,var(--sky),var(--blue));}
body.admin .topbar .burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);box-shadow:none}
body.admin .topbar .burger i{background:#fff}
body.admin .topbar .burger:hover{background:rgba(255,255,255,.2);border-color:#fff}
body.admin .topbar .btn.outline{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
body.admin .topbar .btn.outline:hover{background:#fff;color:var(--navy)}
body.admin .topbar .profile-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
body.admin .topbar .profile-btn:hover{background:rgba(255,255,255,.2)}
/* navy sidebar drawer */
body.admin .drawer{background:linear-gradient(180deg,#0b1d47,#081431);box-shadow:2rem 0 4rem -1rem rgba(0,0,0,.7)}
body.admin .drawer-head{background:linear-gradient(135deg,#123b98,var(--blue))}
body.admin .drawer-nav a{color:#c4d3f2}
body.admin .drawer-label{color:var(--sky)}
body.admin .drawer-nav a .tile{background:rgba(255,255,255,.08);color:#8fc4ff}
body.admin .drawer-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
body.admin .drawer-nav a:hover .tile,body.admin .drawer-nav a.active .tile{background:linear-gradient(140deg,var(--sky),var(--blue));color:#fff}
body.admin .drawer-nav a.active{background:rgba(58,167,255,.16);color:#fff}
body.admin .drawer-nav a.active::before{background:var(--sky)}
body.admin .drawer-nav a.danger-link .tile{background:rgba(225,29,72,.18);color:#ff8aa3}
body.admin .drawer-foot{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.1)}
body.admin .drawer-foot .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
/* hero band + floating content */
.admin-band{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,#123b98 58%,var(--blue) 120%);padding:clamp(1.5rem,3vw,2.6rem) 0 clamp(4.5rem,7vw,6rem)}
.admin-band::before{content:"";position:absolute;right:-6rem;top:-9rem;width:26rem;height:26rem;border-radius:50%;background:radial-gradient(circle,rgba(58,167,255,.45),transparent 70%)}
.admin-band::after{content:"";position:absolute;left:30%;bottom:-10rem;width:22rem;height:22rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%)}
.band-inner{position:relative;z-index:1;max-width:96rem;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.page-head h1{font-size:clamp(1.7rem,1.6vw + 1rem,2.5rem);margin:0;color:#fff}
.crumb{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#9cc7ff}
.crumb span{opacity:.6}
.admin-content{position:relative;z-index:2;width:100%;max-width:96rem;margin:calc(-1*clamp(2.6rem,4.6vw,3.8rem)) auto 0;padding:0 clamp(1rem,3vw,2.4rem) 3rem;flex:1}
body.admin .card{border-radius:1.05rem;border-color:#dfe8f8}
body.admin .card-head{font-family:var(--f-body);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-2)}
body.admin .card-head::before{width:.5rem;height:.5rem;border-radius:.15rem;transform:rotate(45deg)}
body.admin .card-head .btn{letter-spacing:0;text-transform:none}
.stat-card{display:flex;gap:1.1rem;align-items:flex-start;border-top:.22rem solid var(--blue)!important}
.stat-card:nth-child(2){border-top-color:var(--sky)!important}.stat-card:nth-child(3){border-top-color:var(--warn)!important}
.stat-ico{width:3.3rem;height:3.3rem;border-radius:1rem;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,var(--sky),var(--blue));box-shadow:0 .8rem 1.5rem -.6rem rgba(29,86,232,.6)}
.stat-ico.gold{background:linear-gradient(140deg,#7cc4ff,#2f7dff)}
.stat-ico.amber{background:linear-gradient(140deg,#ffc15c,#e8790c);box-shadow:0 .8rem 1.5rem -.6rem rgba(217,119,6,.55)}
.stat-ico .ico{width:1.6rem;height:1.6rem;stroke-width:2}
.stat-card .lbl{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat-card .stat{margin:.25rem 0 .45rem}.stat-card p{margin:0;font-size:.88rem}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;margin:1.4rem 0}
.quick a{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-radius:1rem;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:.92rem;box-shadow:0 .6rem 1.2rem -1rem rgba(16,45,120,.5);transition:all .3s var(--ease)}
.quick a:hover{border-color:var(--blue);transform:translateY(-.15rem);color:var(--blue)}
.quick a .ico{width:2.3rem;height:2.3rem;padding:.55rem;border-radius:.7rem;background:var(--ice);color:var(--blue)}
.alert-card{border-color:#f6d7a0!important;background:linear-gradient(180deg,#fffaf0,#fff)}
.alert-card .card-head{color:#a05a06}
.alert-row{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;color:#7a4503}
.alert-row .ico{color:var(--warn);margin-top:.2rem}
.admin-foot{padding:1.2rem clamp(1rem,3vw,2.4rem);color:var(--muted);font-size:.8rem;text-align:center}
/* admin bottom tab bar (phones) */
.bottom-nav{display:none}
@media(max-width:820px){
  body.admin{padding-bottom:4.8rem}
  body.admin .topbar .topbar-right .btn{display:none}
  .bottom-nav{display:flex;position:fixed;left:.7rem;right:.7rem;bottom:calc(.7rem + env(safe-area-inset-bottom,0px));z-index:70;padding:.35rem;border-radius:1.3rem;background:rgba(10,26,63,.96);backdrop-filter:blur(1rem);box-shadow:0 1.4rem 2.6rem -.8rem rgba(10,26,63,.85)}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .2rem;border:0;border-radius:1rem;background:none;color:#a9bde6;font:700 .64rem var(--f-body);letter-spacing:.04em;cursor:pointer}
  .bottom-nav .ico{width:1.35rem;height:1.35rem}
  .bottom-nav a.active{background:linear-gradient(140deg,var(--sky),var(--blue));color:#fff}
  .bottom-nav a:hover,.bottom-nav button:hover{color:#fff}
}

/* ---------- Admin login (split screen) ---------- */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}
.auth-aside{position:relative;overflow:hidden;color:#fff;padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(150deg,var(--navy) 0%,#123b98 60%,var(--blue) 130%)}
.auth-aside::before{content:"";position:absolute;right:-8rem;top:-8rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(58,167,255,.5),transparent 70%)}
.auth-aside .brand,.auth-aside .brand:hover{color:#fff;position:relative}
.auth-aside h1{position:relative;color:#fff;font-size:clamp(2rem,3vw + .6rem,3.6rem);margin:0 0 1rem;line-height:1.1}
.auth-aside p{position:relative;color:#c4d3f2;max-width:30rem}
.auth-points{position:relative;list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.8rem}
.auth-points li{display:flex;align-items:center;gap:.8rem;color:#e3ecff;font-weight:600}
.auth-points .ico{width:2rem;height:2rem;padding:.45rem;border-radius:.6rem;background:rgba(255,255,255,.14)}
.auth-main{display:grid;place-items:center;padding:clamp(1.5rem,4vw,3rem);background:linear-gradient(180deg,#fff,var(--bg))}
.auth-box{width:min(26rem,100%)}
.auth-box h2{font-size:2rem;margin-bottom:.3rem}.auth-box h2::after{display:none}
.auth-box .sub{color:var(--muted);margin-bottom:1.2rem}
.auth-box .btn{width:100%;padding:.95rem}
.auth-mobile-brand{display:none}
@media(max-width:860px){.auth-split{grid-template-columns:1fr}.auth-aside{display:none}.auth-mobile-brand{display:flex;justify-content:center;margin-bottom:1.6rem}}

/* ---------- Print ---------- */
@media print{
  html{background:#fff}body::before,body::after,.topbar,.footer,.drawer,.drawer-overlay,.wa-float,.emergency-banner,.btn,.admin-band,.bottom-nav,.admin-foot{display:none!important}
  body{color:#000;background:#fff}.card{box-shadow:none;border:1px solid #bbb}.admin-content{margin:0}
  .stat{-webkit-text-fill-color:#000;color:#000;background:none}.cert{box-shadow:none}
}
.drawer-head .brand-name{max-width:15rem}.topbar .brand-name{max-width:46vw}@media(max-width:820px){body.admin .topbar .brand-name{max-width:36vw}}

/* ==========================================================================
   v10 — Typography polish + fixed screen (no pinch / double-tap zoom)
   ========================================================================== */
html{overflow-x:hidden;touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
body{max-width:100vw;touch-action:pan-x pan-y;overflow-wrap:break-word;word-break:normal;font-feature-settings:"kern","liga";letter-spacing:-.003em}
input,select,textarea,button{touch-action:manipulation}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
/* reading hierarchy: headings dark navy, body text softer slate, captions muted */
.card p,.card li,.section p,.hero p{color:var(--ink-2)}
.card p strong,.section p strong{color:var(--ink)}
.card p.muted,.section p.muted,.muted{color:var(--muted)}
.section>.wrap>h2+p,.section>.wrap>h2+h3{margin-top:1.1rem}
.section>.wrap>p.muted{max-width:48rem;font-size:1.02rem;line-height:1.75;margin-bottom:1.6rem}
.card p{line-height:1.75;margin-bottom:.9em}
.card h3{margin-top:0}
.card p a:not(.btn):hover,.section>.wrap>p a:not(.btn):hover{text-decoration:underline;text-underline-offset:.2em}
/* numbers & money align cleanly */
td,th,.stat,.card strong{font-variant-numeric:tabular-nums}
td{line-height:1.5}
td .muted{font-size:.82rem}
th{line-height:1.3}
/* labels and form text: one consistent scale */
form label{font-size:.8rem;letter-spacing:.015em}
input,select,textarea{font-size:1rem}
.btn,button.btn{letter-spacing:.005em}
.card-head{line-height:1.3}
.notice{line-height:1.55;font-size:.95rem}
/* never let a long word / email / receipt no. push the screen wider */
.card,td,th,.notice,.brand-name,.footer li{overflow-wrap:anywhere}
.table-wrap td{overflow-wrap:break-word}
a,button{-webkit-user-drag:none}
img{-webkit-user-drag:none;user-select:none}
@media(max-width:560px){
  h2{font-size:1.55rem}
  .hero h1{font-size:2.15rem}
  .card{padding:1.1rem}
  .section{padding:1.6rem 0}
}
/* top bar: never crowd on small phones */
.topbar .brand{flex:1 1 auto;min-width:0}
.topbar-right{flex:none}
.topbar .btn{white-space:nowrap}
@media(max-width:640px){.topbar-right>.btn:not(.outline){display:none}.topbar .wrap{gap:.55rem}.brand-name{max-width:none}}
@media(max-width:400px){.topbar-right>.btn.outline{display:none}.lang-sw a{padding:.28rem .55rem}}