/* Branded shell. Original app card styles remain in their respective pages. */
html { background:#071635; scroll-behavior:smooth; }
body { color:#f7fbff; margin:0; background:transparent!important; min-height:100vh; overflow-x:hidden; }
body::before { content:""; position:fixed; z-index:-5; pointer-events:none; inset:0; background:radial-gradient(ellipse 75% 60% at 0% 14%,rgba(15,139,216,.52),transparent 70%), radial-gradient(ellipse 72% 70% at 100% 78%,rgba(111,55,215,.46),transparent 72%), radial-gradient(ellipse 50% 55% at 65% 32%,rgba(0,191,207,.19),transparent 78%), linear-gradient(149deg,#04132b 0%,#082556 44%,#101451 75%,#071333 100%); }
body::after { content:""; position:fixed; inset:0;z-index:-4; pointer-events:none; background: radial-gradient(ellipse at 10% 90%,rgba(0,172,214,.22),transparent 45%); }
:lang(ar), [lang="ar"], [dir="rtl"] { font-family:'Almarai',sans-serif; }
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] .aata-shell, html[lang="ar"] .aata-shell * { font-family:'Almarai',sans-serif!important; }
.aata-shell { box-sizing:border-box; position:relative; isolation:isolate; width:min(1220px,100%); margin-inline:auto; padding:14px clamp(12px,3vw,30px) 100px; }
.aata-top {z-index:40;position:sticky;top:10px;display:flex;align-items:center;gap:14px;min-height:73px;padding:10px 16px;margin-bottom:clamp(12px,2vw,22px);border:1px solid rgba(207,233,255,.25);border-radius:23px;background:linear-gradient(125deg,rgba(28,79,154,.64),rgba(16,41,99,.72));box-shadow:0 16px 48px rgba(0,7,24,.24),inset 0 1px rgba(255,255,255,.24);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);}
.aata-brand {display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0;flex:1}.aata-brand img{width:44px;height:46px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,212,255,.16));flex:none}.aata-brand strong{font-size:clamp(11px,1.6vw,15px);font-weight:800;display:block;line-height:1.6}.aata-brand small{font-size:11px;color:#b9d8f3;display:block;margin-top:1px;line-height:1.5;}
.aata-nav{display:flex;align-items:center;gap:4px}.aata-nav a,.aata-language{font-size:12px;line-height:1.5;color:#d2e7ff;text-decoration:none;font-weight:700;white-space:nowrap;padding:10px 13px;border-radius:13px;transition:background .2s,border-color .2s;color:#eaf6ff;border:1px solid transparent}.aata-nav a[aria-current="page"],.aata-nav a:hover,.aata-language:hover{background:linear-gradient(110deg,rgba(29,187,230,.27),rgba(107,84,235,.24));border-color:rgba(182,234,255,.36)}.aata-language {border:1px solid rgba(188,220,253,.26);background:rgba(255,255,255,.08);padding-inline:12px}
.aata-hero{border-radius:30px;position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;justify-content:space-between;padding:clamp(24px,4vw,42px);min-height:160px;background:linear-gradient(115deg,rgba(5,75,130,.57),rgba(25,36,116,.57) 63%,rgba(91,53,188,.4));border:1px solid rgba(170,232,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.17)}.aata-hero:before{content:"";position:absolute;inset:auto -50px -130px; height:180px;transform:rotate(-8deg);border:2px solid rgba(16,208,255,.45);border-radius:50%;box-shadow:0 0 70px 18px rgba(4,180,223,.14);pointer-events:none}.aata-hero h1{font-size:clamp(20px,3.1vw,38px);line-height:1.6;margin:5px 0 3px;font-weight:800}.aata-hero p{font-size:clamp(12px,1.5vw,16px);color:#bfebff;margin:0}.aata-hero .eyebrow{color:#70f3ec;font-size:11px;font-weight:700;letter-spacing:.04em}.aata-hero img{height:120px;width:120px;object-fit:contain;flex:none;filter:drop-shadow(0 0 30px rgba(45,206,255,.32));}
.aata-main{max-width:1100px;margin:18px auto 0}.aata-main > .body-app > div:first-child { margin-inline:auto; } .body-app { isolation:isolate; }
.aata-main--wide{max-width:1120px}.aata-main--narrow{max-width:980px}
.aata-footnote{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:rgba(211,230,255,.66);padding:25px 0 10px}.aata-footnote p{margin:0}
.aata-mobile-nav{display:none}.aata-live-action{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(112deg,#097fb4,#3158b7);color:#fff!important;text-decoration:none;padding:11px 17px;border-radius:14px;border:1px solid rgba(166,227,255,.4);font-size:12px;font-weight:800;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}.aata-live-action:hover{filter:brightness(1.18)}
.aata-note{border:1px solid rgba(123,218,246,.32);border-radius:17px;color:#d9f3ff;background:linear-gradient(112deg,rgba(12,95,137,.40),rgba(37,47,121,.46));padding:14px 17px;font-size:12px;line-height:1.9;margin:12px auto 18px;max-width:1000px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.aata-note p{margin:0;flex:1;min-width:170px}.aata-app-content{max-width:1100px;margin:0 auto}.aata-app-content .liquid-glass-container{max-width:100%;}
.aata-page-head{margin:24px 0 4px;display:flex;align-items:center;justify-content:space-between;gap:10px}.aata-page-head h2{font-size:clamp(17px,2vw,22px);font-weight:800;margin:0;color:#fff}.aata-page-head p{color:#bcd7ef;font-size:12px;margin:3px 0 0}
.aata-quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}.aata-quicklinks a{display:flex;gap:12px;align-items:center;justify-content:space-between;color:white;text-decoration:none;border:1px solid rgba(221,238,255,.26);border-radius:22px;padding:20px;background:linear-gradient(120deg,rgba(26,112,165,.34),rgba(80,50,173,.32));box-shadow:inset 0 1px rgba(255,255,255,.15);backdrop-filter:blur(14px)}.aata-quicklinks a:hover{transform:translateY(-2px);background:rgba(29,123,206,.40)}.aata-quicklinks svg{width:27px;height:27px;flex:none;stroke:#83efff;stroke-width:1.7}.aata-quicklinks .q-label{font-weight:800;font-size:14px}.aata-quicklinks small{display:block;color:#c6dbef;font-size:11px;margin-top:4px}
.aata-stats-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:175px;gap:11px;border:1px dashed rgba(182,232,251,.28);border-radius:22px;color:#c5e0f2;background:rgba(7,25,65,.22);font-size:12px;padding:14px}.aata-stats-empty svg{width:35px;height:35px;stroke:#68deff}.aata-stats-empty a{color:#7ee4ff;font-weight:700}.aata-room-unverified{font-size:11px;color:#b8e6ff;text-align:center;padding:6px 4px 0}.aata-room-unverified a{color:#71e8f9;text-decoration:underline}
/* Original source uses viewport-sized host; remove fixed heights in integrated pages */
.aata-app-content > .body-app { width:100%;min-height:0!important;padding:0!important;display:block!important;overflow:visible!important;background:transparent!important; }
.aata-app-content .liquid-glass-container { margin-inline:auto; }
body .modal-overlay, body #details-modal, body #loader { z-index:1000; }
@media(max-width:980px){.aata-nav{display:none}.aata-top{min-height:62px;top:8px}.aata-hero img{height:94px;width:94px}.aata-quicklinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.aata-shell{padding:9px 9px 105px}.aata-top{padding:8px 11px;min-height:61px;border-radius:18px;gap:8px;margin-bottom:11px}.aata-brand img{height:36px;width:36px}.aata-brand strong{font-size:11px}.aata-brand small{font-size:9px}.aata-hero{min-height:0;padding:23px 16px;border-radius:23px}.aata-hero img{height:70px;width:70px}.aata-hero h1{font-size:19px}.aata-hero p{font-size:11px}.aata-main{margin-top:10px}.aata-quicklinks{gap:9px}.aata-quicklinks a{padding:16px 12px;border-radius:18px;min-height:88px}.aata-quicklinks .q-label{font-size:12px}.aata-quicklinks svg{width:23px;height:23px}.aata-mobile-nav{position:fixed;z-index:95;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));bottom:11px;left:8px;right:8px;min-height:70px;border-radius:23px;background:linear-gradient(110deg,rgba(13,68,135,.94),rgba(35,31,110,.96));border:1px solid rgba(175,225,255,.41);box-shadow:0 12px 42px rgba(2,10,43,.54),inset 0 1px rgba(255,255,255,.2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.aata-mobile-nav a{display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center;text-decoration:none;color:#d7e7fa;font-size:9px;text-align:center;line-height:1.4;font-weight:700;padding:7px 2px;border-radius:17px}.aata-mobile-nav a[aria-current="page"]{background:rgba(57,189,235,.16);color:white}.aata-mobile-nav svg{width:21px;height:21px;stroke-width:1.9}.aata-app-content .liquid-glass-container{border-radius:25px!important}.aata-note{font-size:11px;padding:11px;margin:11px 0 14px}.aata-live-action{font-size:11px;padding:9px 12px}.aata-stats-empty{height:130px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ===== iOS liquid-glass refinement + fixes (AATA) ===== */
.aata-top{ z-index:60; overflow:hidden;
  background:linear-gradient(125deg,rgba(255,255,255,.17),rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 48px rgba(0,7,24,.3) !important; }
.aata-top::before{ content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.16),transparent); }
.aata-hero{ overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 22px 60px rgba(0,8,30,.3) !important;
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%); }
.aata-hero::after{ content:"";position:absolute;inset:0 0 auto 0;height:44%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.17),transparent); }

/* Home service cards -> real glass tiles */
.aata-quicklinks{ grid-template-columns:repeat(3,1fr) !important; gap:15px !important; }
.aata-quicklinks a{ position:relative; overflow:hidden; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:14px !important; min-height:154px; padding:22px !important; border-radius:26px !important;
  border:1px solid rgba(255,255,255,.26) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 16px 40px rgba(0,8,30,.24) !important;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%); }
.aata-quicklinks a::before{ content:"";position:absolute;top:-60%;left:-30%;width:180%;height:150%;pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.2),transparent 60%);transform:rotate(8deg); }
.aata-quicklinks a:hover{ transform:translateY(-4px); border-color:rgba(190,240,255,.55) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09)) !important; }
.aata-quicklinks svg{ width:54px !important; height:54px !important; padding:13px; box-sizing:border-box; border-radius:17px;
  border:1px solid rgba(255,255,255,.35); stroke:#8af0ff !important;
  background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.aata-quicklinks .q-label{ font-size:16px !important; }
.aata-quicklinks small{ font-size:12px !important; }

/* Un-trap the app popups so they sit ABOVE the top bar, and fade the bars while a popup is open */
.body-app{ isolation:auto !important; }
body #details-modal, body .modal-overlay{ z-index:1200 !important; }
body.modal-open .aata-top, body.modal-open .aata-mobile-nav{ opacity:0 !important; pointer-events:none; transition:opacity .25s ease; }

/* Statistics: make the pagination dots visible (Tailwind utility classes aren't all compiled) */
#charts-pagination{ align-items:center; }
#charts-pagination button{ height:8px; width:8px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.5); cursor:pointer; transition:width .3s ease, background .3s ease; }
#charts-pagination button.bg-white{ background:#fff; width:24px; }

/* Statistics: top & bottom panels share the same width (scoped to the stats wrapper) */
.aata-app-content .body-app > .max-w-5xl{ width:100%; max-width:980px; margin-inline:auto; }

/* Home cards on phones: one tidy column, icon beside text */
@media(max-width:900px){ .aata-quicklinks{ grid-template-columns:1fr !important; gap:12px !important; }
  .aata-quicklinks a{ flex-direction:row; align-items:center; min-height:0; gap:15px !important; }
  .aata-quicklinks svg{ width:48px !important; height:48px !important; padding:11px; } }

/* ===== Statistics equal-width fix + nice per-project loading ===== */
/* The stats TOP panel is a flex box; auto margins shrank it. Force both panels full width. */
.aata-app-content .liquid-glass-container{ width:100% !important; margin-inline:0 !important; }

/* Scoped loading cover (sits over the app area only, not the nav/hero) */
.aata-app-content .body-app{ position:relative; }
.aata-load{ position:absolute; inset:0; z-index:45; display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(70px,16vh,200px); border-radius:28px; transition:opacity .5s ease;
  background:radial-gradient(ellipse at 50% 35%,rgba(14,32,70,.5),rgba(6,16,40,.86));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.aata-load.hide{ opacity:0; pointer-events:none; }
.aata-load .box{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 36px; border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 20px 50px rgba(0,8,30,.4);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.aata-load .ring{ width:50px; height:50px; border-radius:50%; border:4px solid rgba(255,255,255,.15);
  border-top-color:#7ff0ff; border-right-color:#8aa8ff; animation:aataspin .8s linear infinite; }
.aata-load p{ color:#dcecff; font-size:13px; font-weight:800; margin:0; }
@keyframes aataspin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .aata-load .ring{ animation-duration:1.6s; } }

/* Hide the stats app's own unstyled native loader (its utility classes aren't compiled) — our .aata-load replaces it */
.aata-app-content #loader{ display:none !important; }