/* v5.5 City alive: modern color and compositor-friendly atmosphere */
:root{--bg:#eff9f7;--surface:#fff;--surface-soft:#e7f7f6;--brand:#087fa5;--brand-deep:#08698c;--warm:#ce8536;--ink:#163843;--muted:#56747a;--line:#b8dbdc;--glass-light:linear-gradient(145deg,#fffffff2,#f0faf8ea);--glass-shadow:0 7px 22px #1b647016}
body .ocean-atmosphere{overflow:hidden;contain:paint;background:linear-gradient(145deg,#f8fcf8,#e7f7f6 52%,#f2f8ff)}
body .ocean-atmosphere i{animation:none!important;filter:none!important;opacity:1;position:absolute;width:75vmax;height:75vmax;border-radius:50%;pointer-events:none;will-change:transform;background:radial-gradient(circle,#61d0c553 0%,#66c5ec25 38%,transparent 69%);top:-27vmax;left:-18vmax;transform:translate3d(0,0,0);animation:city-cloud-one 26s ease-in-out infinite alternate!important}
body .ocean-atmosphere i+i{width:68vmax;height:68vmax;left:auto;right:-21vmax;top:28vmax;background:radial-gradient(circle,#f2b7645e 0%,#f0b96e1a 49%,transparent 72%);animation:city-cloud-two 32s ease-in-out infinite alternate!important}
@keyframes city-cloud-one{to{transform:translate3d(6vw,5vh,0) scale(1.09)}}
@keyframes city-cloud-two{to{transform:translate3d(-7vw,-5vh,0) scale(1.11)}}
body .city-widget,body .home-lists>.section,body .home-jobs>.section,body .inner-main .service-tile{border-color:#fff;box-shadow:0 8px 24px #226b7213}
body .widget-weather{background:linear-gradient(145deg,#fffdf9,#ffe7b5)}
body .widget-air{background:linear-gradient(145deg,#fbfffd,#c9f0e3)}
body .widget-prayer{background:linear-gradient(145deg,#fcfdff,#ddeaff)}
body .capsule-shortcuts>a:nth-child(1){background:linear-gradient(140deg,#fff,#daf5f7)}
body .capsule-shortcuts>a:nth-child(2){background:linear-gradient(140deg,#fff,#fff0cb)}
body .capsule-shortcuts>a:nth-child(3){background:linear-gradient(140deg,#fff,#dff5e8)}
body .capsule-shortcuts>a:nth-child(4){background:linear-gradient(140deg,#fff,#ece8fd)}
body .app-header .brand-wordmark{display:block;width:clamp(118px,16vw,175px);height:auto;max-height:40px;object-fit:contain;object-position:right center}
body .app-header .brand-symbol{width:29px;height:29px}
body .hero-content h1.qom-wordmark{display:flex;align-items:center;justify-content:center;margin:0 auto}
body .hero-content h1.qom-wordmark img{display:block;width:clamp(245px,42vw,375px);max-height:94px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px #ffffffaf)}
body .hero-content .sky-search{border-color:#b7e2df;box-shadow:0 9px 25px #197f831f;background:#fffffff0}
body .dashboard-heading .refresh-city{border-color:#b6e0db}
body .home-lists>.section{background:#ffffffed}
body .qom-gallery-grid figure{overflow:hidden}
body .qom-gallery-grid img{object-fit:cover;aspect-ratio:4/3}
.gallery-more{display:flex;width:max-content;max-width:100%;margin:16px auto 2px;padding:9px 18px;align-items:center;gap:9px;border-radius:999px;background:#e7f6f3;border:1px solid #b7dfd7;color:#106d78;font-weight:700}
.gallery-page .page-heading h1{display:flex;align-items:center;gap:10px}.gallery-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin-top:22px}
.gallery-card{min-height:0;display:flex;flex-direction:column;text-align:right;padding:8px;background:#fff;border:1px solid #cae2dc;border-radius:22px;box-shadow:0 4px 18px #19546213;overflow:hidden}
.gallery-card img{aspect-ratio:5/4;object-fit:cover;width:100%;border-radius:15px;background:#e3eeea}.gallery-card strong{font-size:.88rem;padding:8px 7px 0}.gallery-card span{font-size:.72rem;color:var(--muted);padding:0 7px 4px}
.gallery-viewer-backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0c2338c9;padding:14px}
.gallery-viewer{max-width:min(92vw,860px);max-height:90dvh;overflow:auto;display:flex;flex-direction:column;gap:9px;background:white;border-radius:22px;padding:12px}
.gallery-viewer img{max-height:65dvh;width:100%;object-fit:contain;border-radius:14px}.gallery-viewer a{display:inline-flex;align-items:center;gap:8px;color:var(--brand)}.gallery-close{align-self:flex-start;background:#eff5f3;padding:5px 14px;border-radius:100px}
/* Limited map viewport markers are painted on canvas; no broad CSS animation needed */
.map-wrap .leaflet-interactive{transition:none!important}
@media (prefers-reduced-motion:reduce){body .ocean-atmosphere i,body .ocean-atmosphere i+i{animation:none!important;will-change:auto!important}body .hero-scene img{animation:none!important}}
html[data-motion="minimal"] body .ocean-atmosphere i,html[data-performance="optimized"] body .ocean-atmosphere i{animation:none!important;will-change:auto!important}
@media(max-width:649px){body .app-header .brand-wordmark{width:134px}body .brand{gap:6px}.gallery-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-card{border-radius:17px}}
body .ocean-atmosphere i,body .ocean-atmosphere i+i{display:block}
html[data-performance="optimized"] body .ocean-atmosphere i{display:none}

.app-header .brand span{display:none!important}.app-header .brand .brand-wordmark{display:block;width:clamp(110px,17vw,164px);height:auto}
.hero-content h1.qom-wordmark{min-height:56px}.hero-content h1.qom-wordmark img{max-height:94px}
.gallery-entry-link{display:inline-flex;align-items:center;justify-content:center;background:#e2f5ef;border:1px solid #abd9d3;border-radius:999px;color:#0d6b80;padding:10px 19px;font-weight:750;text-decoration:none;margin:14px auto}.gallery-entry-link:hover{background:#cdeee5}
.gallery-v55-page{font-family:inherit;min-height:100dvh;color:#173b45;background:linear-gradient(125deg,#effaf7,#e6f7fc 55%,#fef8ef)}.gallery-v55-shell{position:relative;max-width:1100px;margin:0 auto;padding:25px 18px 55px}.gallery-v55-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.gallery-v55-top img{width:min(210px,65vw)}.gallery-v55-top a{text-decoration:none;color:#0d7193;background:white;border-radius:999px;padding:10px 17px}.gallery-v55-hero{margin:40px 0 22px}.gallery-v55-hero h1{font-size:clamp(28px,5vw,41px);margin:0 0 9px}.gallery-v55-hero p{color:#58727a;line-height:1.9}.gallery-v55-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.gallery-v55-tabs button{font-family:inherit;cursor:pointer;border:1px solid #a6d7d5;background:#fff;border-radius:999px;padding:9px 16px;color:#164a58}.gallery-v55-tabs button[aria-pressed="true"]{color:white;background:#087fa5;border-color:#087fa5}.gallery-v55-backdrop{position:fixed;inset:0;z-index:1000;background:#091c2adc;display:none;align-items:center;justify-content:center;padding:18px}.gallery-v55-backdrop.is-open{display:flex}.gallery-v55-backdrop figure{display:grid;gap:9px;max-width:880px;max-height:92vh;background:white;border-radius:20px;padding:14px;margin:0}.gallery-v55-backdrop img{width:100%;max-height:68vh;object-fit:contain;border-radius:10px}.gallery-v55-backdrop figcaption{font-size:14px}.gallery-v55-backdrop button{align-self:start;justify-self:start;background:#eff8f7;border:0;border-radius:20px;padding:7px 16px;cursor:pointer}.gallery-v55-credit{color:#466d7d;text-decoration:none;font-size:13px}
@media(max-width:520px){.gallery-v55-shell{padding:20px 12px 40px}.gallery-v55-hero{margin-top:30px}}

/* No direct DOM mutations to React-owned brand/headings: logo via CSS pseudo-element */
.app-header .brand{display:flex;align-items:center}.app-header .brand::after{content:"";display:block;width:clamp(115px,17vw,175px);height:37px;background:url('/brand-wordmark.svg') center right / contain no-repeat} .app-header .brand span{display:none}
.hero-content h1.qom-wordmark{font-size:0!important;min-height:64px;display:flex!important;align-items:center;justify-content:center}.hero-content h1.qom-wordmark>*{display:none!important}.hero-content h1.qom-wordmark::before{content:"";display:block;width:clamp(240px,42vw,370px);height:78px;max-width:95%;background:url('/brand-wordmark.svg') center / contain no-repeat;filter:drop-shadow(0 1px 5px #fff9)}

/* Keep one inexpensive animated atmospheric layer when optimized; respect motion preferences. */
@media (prefers-reduced-motion:no-preference){html[data-motion="balanced"][data-performance="optimized"] body .ocean-atmosphere i:first-child{display:block!important;animation:city-cloud-one 32s ease-in-out infinite alternate!important;will-change:transform}html[data-motion="balanced"][data-performance="optimized"] body .ocean-atmosphere i+i{display:none!important}}