/* canadian-aboriginal */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-1.woff2) format('woff2'); unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+1400-167F, U+18B0-18F5, U+25CC, U+11AB0-11ABF;}/* cherokee */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-2.woff2) format('woff2'); unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323-0324, U+0330-0331, U+13A0-13FF, U+AB70-ABBF;}/* math */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-3.woff2) format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;}/* nushu */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-4.woff2) format('woff2'); unicode-range: U+2003, U+3000, U+3002, U+4E00, U+FE12, U+16FE1, U+1B170-1B2FB;}/* symbols */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-5.woff2) format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;}/* syriac */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-6.woff2) format('woff2'); unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C, U+061F, U+0621, U+0640, U+064B-0655, U+0660-066C, U+0670, U+0700-074F, U+0860-086A, U+1DF8, U+1DFA, U+200C-200F, U+25CC, U+2670-2671;}/* tifinagh */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-7.woff2) format('woff2'); unicode-range: U+02C7, U+0301-0302, U+0304, U+0306-0309, U+0323, U+0331, U+200C-200D, U+202E, U+25CC, U+2D30-2D7F;}/* vietnamese */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-8.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}/* latin-ext */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(/fonts/gsf-10.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Faruma';font-weight:400 700;font-display:swap;src:local('Faruma'),url(/fonts/faruma.woff2) format('woff2');unicode-range:U+0020-002F,U+0030-0039,U+003A-003F,U+060C,U+061B,U+061F,U+0660-0669,U+0780-07BF,U+200C-200F,U+FDF2}
/* Shared ASG ID token names, recoloured to the Arabiyya Rovers emblem (#027ec1 blue, #acd5e9 sky, #6b0e0b maroon) */
:root{color-scheme:light;--navy:#0b3a5c;--blue:#027ec1;--blue2:#02679e;--sky:#acd5e9;--maroon:#6b0e0b;--link:#02679e;--on-blue:#fff;
--ink:#111827;--ink2:#374151;--mut:#5f6b7a;--line:#e3e8ef;--page:#fff;--surface:#fff;--bg:#f5f8fb;--chip:#e8f4fb;--strip:#f0f0f0;--strip-ink:#374151;--side:#ffffff;--shadow:rgba(17,24,39,.12);--focus:#90c5ff}
:root[data-theme=dark]{color-scheme:dark;--navy:#081a2b;--blue:#2fa3e6;--blue2:#5cb8ee;--sky:#2b5d7a;--maroon:#e0726b;--link:#7cc6f2;
--ink:#e8eef6;--ink2:#c9d4e3;--mut:#9fb0c4;--line:#22344a;--page:#0b1522;--surface:#122033;--bg:#0e1a2a;--chip:#15304a;--strip:#070f19;--strip-ink:#c9d4e3;--side:#0f1c2d;--shadow:rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{overflow-x:clip;max-width:100%}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Google Sans Flex","Google Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
html[lang=dv] body{font-family:Faruma,"Google Sans Flex","Google Sans",system-ui,sans-serif;line-height:1.9}
a{color:var(--link)}h1,h2,h3{line-height:1.25;letter-spacing:-.01em;color:var(--ink)}h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.2em 0 .4em}h2{font-size:1.4rem;margin:1.6em 0 .5em}
.skip{position:absolute;left:12px;top:-60px;z-index:99}.skip:focus{top:12px;z-index:99;background:var(--surface);padding:8px 12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.strip{background:var(--strip);color:var(--strip-ink);font-size:12px;border-bottom:1px solid var(--line);padding:6px 16px;display:flex;gap:8px;align-items:center;position:relative;z-index:30}
.strip img{width:16px;height:16px}
.shell{display:grid;grid-template-columns:272px 1fr;min-height:calc(100vh - 31px)}
.side{background:var(--side);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;padding:20px 14px;gap:6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);padding:4px 8px 16px}
.brand img{width:44px;height:auto}.brand b{display:block;font-size:1.05rem}.brand small{color:var(--mut);font-size:.8rem}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font-weight:500}
.side nav a svg{width:20px;height:20px;flex:none}
.side nav a:hover{background:var(--chip)}.side nav a[aria-current=page]{background:var(--chip);color:var(--blue2);font-weight:650;box-shadow:inset 3px 0 0 var(--blue)}
html[dir=rtl] .side nav a[aria-current=page]{box-shadow:inset -3px 0 0 var(--blue)}
.side .sep{border-top:1px solid var(--line);margin:12px 4px}
.side .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:4px 12px}
.seg{display:flex;gap:4px;padding:0 8px 8px;flex-wrap:wrap}.seg button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:8px;padding:6px 8px;font:inherit;font-size:.82rem;cursor:pointer}
.seg button[aria-current]{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.acts{display:flex;gap:8px;padding:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:var(--on-blue);border:1px solid var(--blue);border-radius:999px;padding:10px 18px;text-decoration:none;font-weight:600;font-size:.95rem}
.btn.alt{background:transparent;color:var(--blue2);border-color:var(--line)}.acts .btn{flex:1;padding:8px 10px}
.top{display:none}
main{padding:clamp(20px,4vw,48px);max-width:1120px;width:100%}
.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:24px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.hero h1,.hero p{color:#fff}.hero .eyebrow{color:var(--sky)}.hero img{width:clamp(120px,16vw,200px);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}
.hero .btn{background:#fff;color:var(--navy);border-color:#fff}.hero .btn.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--maroon)}
html[lang=dv] .eyebrow{letter-spacing:0;text-transform:none}
.lead{font-size:1.12rem;color:var(--ink2)}.hero .lead{color:#eaf6fd}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 1px 2px var(--shadow)}
.card h3{margin:.2em 0 .4em}.card p{margin:0;color:var(--ink2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}.stats .card b{display:block;font-size:1.9rem;color:var(--blue2)}.stats .card span{color:var(--mut);font-size:.9rem}
.ph{background:#fff4c2;color:#5c4400;border-radius:6px;padding:1px 6px;font-size:.9em}
:root[data-theme=dark] .ph{background:#3d3410;color:#f5e2a0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 16px 60px;position:relative}
html[dir=rtl] .steps li{padding:16px 60px 16px 18px}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--maroon);color:#fff;display:grid;place-items:center;font-weight:700}
.src{font-size:.82rem;color:var(--mut)}
footer{border-top:1px solid var(--line);margin-top:48px;padding-top:20px;color:var(--mut);font-size:.88rem}
.scrim{display:none}
@media (max-width:767px){
 .shell{display:block}
 .top{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--side);border-bottom:1px solid var(--line);padding:10px 14px}
 .top .brand{padding:0}.top .brand img{width:34px}.mb{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
 .top .btn{margin-inline-start:auto;padding:8px 14px}
 .side{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(300px,86vw);z-index:40;transform:translateX(calc(-100% - 60px));visibility:hidden;transition:transform .25s,visibility .25s;box-shadow:0 0 40px var(--shadow)}
 html[dir=rtl] .side{transform:translateX(calc(100% + 60px))}
 body.open .side{transform:none;visibility:visible}
 body.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
 .grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.hero{grid-template-columns:1fr;text-align:center}.hero img{margin:0 auto;grid-row:1}.grid,.grid.two{grid-template-columns:1fr}.top .brand small{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Head banner: identical to ASG ID and arabiyyascouts.org */
:root{--h-strip:#f0f0f0;--h-strip-ink:#374151;--h-line:#e5e7eb;--h-bar:#14215a;--h-blue:#2f80ff}
:root[data-theme=dark]{--h-strip:#070e24;--h-strip-ink:#c9d2e6;--h-line:#22325c;--h-bar:#0a1430}
.w{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
.strip{display:block;padding:0;position:static;background:var(--h-strip);border-bottom:1px solid var(--h-line);font-size:13px;color:var(--h-strip-ink);font-family:"Google Sans Flex","Google Sans","Segoe UI",system-ui,sans-serif;line-height:1.5}.strip .w{display:flex;align-items:center;gap:8px;min-height:30px}.strip img{height:16px;width:16px}
header.bar{position:sticky;top:0;z-index:40;background:var(--h-bar);color:#fff;line-height:1.5}
.barin{display:flex;align-items:center;gap:14px;min-height:64px}
.hbrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.4px;white-space:nowrap}.hbrand img{height:36px;width:auto}.hbrand i{font-style:normal;color:#4f8fff}
.tools{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:#fff;background:none;border:0;cursor:pointer;padding:0;text-decoration:none}.ib:hover{background:rgba(255,255,255,.1)}.ib svg{width:22px;height:22px}
.hbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;background:var(--h-blue);color:#fff!important;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;margin-inline-start:4px}.hbtn:hover{background:#155dfc}
.hbtn.ghost{background:transparent;border:1px solid rgba(255,255,255,.45)}
details.prefs{position:relative}details.prefs summary{list-style:none;cursor:pointer}details.prefs summary::-webkit-details-marker{display:none}
.pdrop{position:absolute;inset-inline-end:0;top:50px;z-index:50;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px var(--shadow);width:260px;max-width:calc(100vw - 24px);padding:12px 14px}
.pdrop .ph2{margin:6px 0;font-size:13px;font-weight:700;color:var(--mut)}.pdrop .pseg{display:flex;gap:6px;margin-bottom:8px}
.pdrop .pseg button{flex:1;min-height:40px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.pdrop .pseg button[aria-current]{background:var(--h-blue);border-color:var(--h-blue);color:#fff;font-weight:700}
.pdrop [lang=dv]{font-family:'Faruma',sans-serif}
.mb.burger{display:inline-flex;width:44px;height:44px;border:0;background:none;color:#fff;border-radius:10px}
.side{top:64px;height:calc(100vh - 64px)}.side>.brand{display:none}
@media (min-width:768px){.tools .hbtn{display:none}html.sbc .tools .hbtn{display:inline-flex}}
@media (max-width:767px){.mb.burger{display:inline-flex;width:44px;height:44px;border:0;background:none;color:#fff;border-radius:10px}.side>.brand{display:flex}.side{top:0;height:auto}}
@media (max-width:600px){.w{padding:0 14px}.hbtn{display:none}.hbrand{font-size:17px}.hbrand i{display:none}.barin{gap:6px}.strip{font-size:12px}}
html[lang=dv] .strip,html[lang=dv] header.bar{font-family:'Faruma',"Google Sans Flex","Google Sans",sans-serif}
/* Retractable sidebar (desktop/tablet); phone keeps the drawer */
@media (min-width:768px) and (max-width:1040px){.shell{grid-template-columns:220px minmax(0,1fr)}}
@media (min-width:768px){html.sbc .shell{grid-template-columns:minmax(0,1fr)}html.sbc .side{display:none}html.sbc main{margin-inline:auto}}

.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.svc-list{columns:2;padding-inline-start:1.2em;margin:16px 0}@media(max-width:640px){.svc-list{columns:1}}
/* database content and admin */
.cimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:.6rem}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.gitem{margin:0}.gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}.gitem figcaption{font-size:.92rem;margin-top:.35rem}
ul.dl{list-style:none;padding:0}ul.dl li{padding:.7rem 0;border-bottom:1px solid var(--line,#dde3ea)}ul.dl a{font-weight:600}
.fsoc{display:inline-flex;gap:.5rem;vertical-align:middle}.soc svg{width:20px;height:20px;vertical-align:middle}.socrow{display:flex;flex-wrap:wrap;gap:.5rem}.socrow .btn{display:inline-flex;align-items:center;gap:.4rem}
.cform{display:grid;gap:.8rem;max-width:640px}.cform label{display:grid;gap:.3rem;font-weight:600}.cform input,.cform textarea,#adm input,#adm textarea,#adm select{font:inherit;padding:.6rem .7rem;border:1px solid var(--line,#c9d3dd);border-radius:10px;background:var(--card,#fff);color:inherit;width:100%;box-sizing:border-box}
.hp{position:absolute!important;inset-inline-start:0;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.narrow{max-width:520px;margin:2rem auto}.warn{background:#fff4c2;color:#5c4400;padding:.6rem .8rem;border-radius:10px}:root[data-theme=dark] .warn{background:#3d3410;color:#f5e2a0}
.admhead{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}.admhead h1{margin:0;flex:1 1 auto}
.atabs{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 0;margin:.4rem 0 1rem;border-bottom:1px solid var(--line,#dde3ea);scrollbar-width:thin}.atabs button{flex:0 0 auto;white-space:nowrap}
.atabs button[aria-current]{background:var(--brand,#0b3a5c);color:#fff}
.btn.sm{padding:.35rem .8rem;font-size:.9rem}.tw{overflow-x:auto}.atbl{width:100%;border-collapse:collapse}.atbl th,.atbl td{text-align:start;padding:.5rem;border-bottom:1px solid var(--line,#dde3ea);vertical-align:top}.atbl img{width:56px;height:42px;object-fit:cover;border-radius:6px}
.aform{display:grid;gap:.8rem;max-width:760px}.aform label{display:grid;gap:.3rem;font-weight:600}.aform .chk{display:flex;gap:.5rem;align-items:center;font-weight:500}.aform .chk input{width:auto}
.imgprev{max-width:220px;border-radius:8px}.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}.kpis .card b{font-size:1.6rem;display:block}
.msg{white-space:pre-wrap}.unread{font-weight:700}
@media (max-width:600px){.atbl td,.atbl th{padding:.4rem .3rem;font-size:.9rem}}
/* admin form inputs: theme-aware */
.aform input,.aform textarea,.aform select,#cform input,#cform textarea{background:var(--card,#fff);color:inherit;border:1px solid rgba(127,127,127,.35)}
[data-theme=dark] .aform input,[data-theme=dark] .aform textarea,[data-theme=dark] #cform input,[data-theme=dark] #cform textarea{background:#0b1430;color:#e6ebf5}
.aform label.chk{display:flex;gap:.5rem;align-items:center}.aform label.chk input{width:auto}
/* === Motion layer (v1): 150–300ms ease-out, transform/opacity only; off for reduced motion === */
:root{--ez:cubic-bezier(.2,.7,.2,1);--td:.26s}
@media (prefers-reduced-motion:no-preference){
/* desktop/tablet retractable sidebar: column eases, panel slides+fades (only after first paint) */
@media (min-width:768px){
 html.anim .shell{transition:grid-template-columns var(--td) var(--ez)}
 html.anim .side{transition:transform var(--td) var(--ez),opacity .2s var(--ez),visibility 0s linear 0s}
 html.sbc .shell{grid-template-columns:0px minmax(0,1fr)!important}
 html.sbc .side{display:flex!important;min-width:0;overflow:hidden;transform:translateX(-100%);opacity:0;visibility:hidden;pointer-events:none}
 html.anim.sbc .side{transition:transform var(--td) var(--ez),opacity .2s var(--ez),visibility 0s linear var(--td)}
 html[dir=rtl].sbc .side{transform:translateX(100%)}
}
/* phone drawer + fading backdrop */
@media (max-width:767px){
 .side{transition:transform var(--td) var(--ez),visibility var(--td)!important}
 .scrim,#scrim{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--td) var(--ez),visibility 0s linear var(--td)}
 body.open .scrim,body.open #scrim{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--td) var(--ez)}
}
/* dropdowns */
details.prefs[open]>:not(summary){animation:mo-dd .18s var(--ez) both;transform-origin:top right}
html[dir=rtl] details.prefs[open]>:not(summary){transform-origin:top left}
@keyframes mo-dd{from{opacity:0;transform:translateY(-6px) scale(.98)}}
/* scroll reveal */
.mo-rv{opacity:0;transform:translateY(14px)}
.mo-rv.mo-in{opacity:1;transform:none;transition:opacity .3s var(--ez),transform .3s var(--ez)}
/* hover / press */
.btn,.sbtn,.ib,button,.card,.side a{transition:transform .15s var(--ez),opacity .15s,background-color .2s,box-shadow .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active,.sbtn:active,.ib:active,button:active{transform:scale(.97)}
.card:active{transform:translateY(-1px) scale(.995)}
.side a:active{transform:scale(.98)}
main a:not(.btn):not(.card){transition:color .2s,opacity .2s}
/* images */
img.mo-img{opacity:0;transition:opacity .3s var(--ez),transform .4s var(--ez)}
img.mo-img.mo-ok{opacity:1}
#lb:not([hidden]){animation:mo-fade .22s var(--ez) both}
#lb:not([hidden]) img{animation:mo-zoom .26s var(--ez) both}
#lb img.mo-sw{animation:mo-zoom .22s var(--ez) both}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-zoom{from{opacity:0;transform:scale(.96)}}
/* admin: view swaps, tabs, status toasts */
.mo-view{animation:mo-up .24s var(--ez) both}
@keyframes mo-up{from{opacity:0;transform:translateY(8px)}}
[role=status].mo-st{animation:mo-fade .2s var(--ez) both}
#tabs button[aria-current],#side a[aria-current],#side button[aria-current]{transition:background-color .2s,color .2s}
}
@media (prefers-reduced-motion:reduce){.mo-rv,img.mo-img{opacity:1!important;transform:none!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* 2026 Rovers logo: subtle light backdrop in dark mode */
[data-theme=dark] img[src^="/img/rov26-logo"]{background:rgba(255,255,255,.88);border-radius:14px;padding:4px}

/* ASG ID mark (live from Identity) */
.idmark{display:inline-flex;vertical-align:middle;margin-inline-end:.5em;flex:none}.idmark img{width:1.25em;height:1.25em;object-fit:contain;border-radius:4px}

/* ASG group logo beside the Rovers logo in the header (light variant in dark mode) */
.asgm{display:inline-flex;align-items:center;padding-inline-end:10px;border-inline-end:1px solid rgba(255,255,255,.25)}.hbrand .asgm img{height:36px;width:36px}.asg-d{display:none}:root[data-theme=dark] .asg-l{display:none}:root[data-theme=dark] .asg-d{display:inline}@media (prefers-color-scheme:dark){:root:not([data-theme]) .asg-l{display:none}:root:not([data-theme]) .asg-d{display:inline}}@media (max-width:600px){.hbrand .asgm img{height:30px;width:30px}.hbrand>img{height:30px!important}.asgm{padding-inline-end:6px}}
/* Google Sans for all English text; Faruma for Dhivehi */
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-family:"Google Sans Flex","Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html[lang=dv] body,html[lang=dv] button,html[lang=dv] input,html[lang=dv] select,html[lang=dv] textarea,html[lang=dv] h1,html[lang=dv] h2,html[lang=dv] h3,html[lang=dv] h4,:lang(dv),.thaana{font-family:'Faruma',"Google Sans Flex",system-ui,sans-serif}
/* Brand rule: Arabiyya Rovers = maroon */
:root{--blue:#7a1410;--blue2:#5e0e0b;--link:#8a1c17;--chip:#f8eceb}
:root[data-theme=dark]{--blue:#e0726b;--blue2:#ec9590;--link:#f0a19c;--chip:#3a1a1a;--on-blue:#1a0605}
/* Dhivehi: Faruma only */
:lang(dv),[dir=rtl],html[lang=dv] body,html[lang=dv] button,html[lang=dv] input,html[lang=dv] select,html[lang=dv] textarea,html[lang=dv] .strip,html[lang=dv] header.bar,.thaana,.pdrop [lang=dv]{font-family:'Faruma',"Google Sans Flex",system-ui,sans-serif}
html[lang=dv] body{font-size:1.1em;line-height:1.8;font-weight:400}
html[lang=dv] label,html[lang=dv] .btn,html[lang=dv] button,html[lang=dv] nav a{font-weight:500}
html[lang=dv] h1,html[lang=dv] h2{font-weight:700;line-height:1.5}html[lang=dv] h3,html[lang=dv] h4,html[lang=dv] h5,html[lang=dv] h6{font-weight:600;line-height:1.5}
[dir=rtl] .ph{font-family:"Google Sans Flex",system-ui,sans-serif}
/* Rovers header = maroon (site-specific; ASG keeps navy) */
:root{--h-bar:#5a0d0a;--h-blue:#8a1c17}:root[data-theme=dark]{--h-bar:#2a0807;--h-blue:#a32a24}
header.bar .brand i,header.bar a i{color:#f4b4ae}
/* Rovers site: Rovers logo only in header */
.hbrand .asgm{display:none!important}.hbrand i{color:#f4b4ae}
.strip img.stlogo{height:18px;width:18px;border-radius:50%;flex:none}:root[data-theme=dark] .strip img.stlogo{background:#fff;padding:1px}
@media (max-width:600px){.hbrand i{display:inline!important}.hbrand{font-size:clamp(14px,4.4vw,17px);white-space:nowrap;min-width:0}.hbrand span{white-space:nowrap}}
a[href$="/search"],[data-nav=search],.searchbar,[data-i18n=nav_search]{display:none!important}