/* CLOUD+ discovery gallery: native perspective, no canvas or animation dependency. */
#apps.app-gallery {
  --gallery-bg: var(--surface-1);
  --gallery-card-frost: rgba(45, 49, 55, .97);
  --gallery-card-fallback: rgb(45, 49, 55);
  --gallery-text: var(--text-1);
  --gallery-muted: var(--text-2);
  --gallery-line: var(--border-2);
  --gallery-gold: #f5c545;
  --gallery-blue: #6aaeff;
  --gallery-dir: 1;
  position: relative;
  isolation: isolate;
  max-width: 1200px;
  width: calc(100% - 48px);
  padding: 42px 42px 30px;
  margin: 56px auto 92px;
  border: 1px solid var(--gallery-line);
  border-radius: 32px;
  color: var(--gallery-text);
  background: var(--gallery-bg);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--border-1);
  scroll-margin-top: 92px;
}
html[dir="rtl"] #apps.app-gallery { --gallery-dir: -1; }
html[data-theme="light"] #apps.app-gallery {
  --gallery-card-frost: rgba(255, 255, 255, .97);
  --gallery-card-fallback: rgb(247, 249, 252);
  --gallery-gold: #855d08;
  --gallery-blue: #205cae;
}
.gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 2; }
.gallery-intro { min-width: 0; }
.gallery-eyebrow { color: var(--gallery-gold); font-size: 10px; letter-spacing: .22em; font-weight: 700; margin: 0 0 12px; }
html[dir="rtl"] .gallery-eyebrow { letter-spacing: 0; font-size: 12px; }
#gallery-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -.045em; color: var(--gallery-text); font-weight: 800; margin: 0; text-wrap: balance; }
html[dir="rtl"] #gallery-title { letter-spacing: -.025em; }
#gallery-title span { color: var(--gallery-gold); }
.gallery-subtitle { color: var(--gallery-muted); margin: 13px 0 0; line-height: 1.65; font-size: 14px; text-wrap: pretty; }
.gallery-cta { color: var(--gallery-gold); border: 1px solid color-mix(in srgb, var(--gallery-gold) 60%, transparent); border-radius: 12px; padding: 13px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-shrink: 0; font-size: 12px; font-weight: 750; text-decoration: none; transition: background .18s, color .18s; }
.app-gallery button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.gallery-stage { position: relative; margin: 8px -30px 0; min-height: 408px; }
.gallery-floor { display: none; position: absolute; height: 170px; width: 95%; max-width: 980px; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; }
.gallery-floor::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse, #348dff29, transparent 65%); }
.gallery-floor span { position: absolute; inset: 29% 6% 7%; border: 1px solid #479afa45; border-radius: 50%; box-shadow: 0 1px 0 #6ab1ff30; }
.gallery-floor span+span { inset: 39% 17% 18%; border-top-color: transparent; border-bottom-color: #6aaeffba; box-shadow: 0 5px 16px #2487fa25; }
.gallery-cards { display: flex; gap: 18px; overflow-x: auto; padding: 32px 16px; scrollbar-width: thin; }
.gallery-card { --card-x: 0px; --card-z: 0px; --card-y: 0px; --card-angle: 0deg; position: relative; padding: 0; background: none; border: 0; color: var(--gallery-text); width: 250px; min-height: 332px; flex-shrink: 0; cursor: pointer; text-align: start; }
.gallery-card-surface { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 17px 22px 18px; height: 100%; min-height: inherit; border-radius: 25px; border: 1px solid var(--gallery-line); background: linear-gradient(155deg, #ffffff24, #ffffff04), var(--gallery-card-fallback); box-shadow: 4px 5px 0 -2px var(--border-2), var(--shadow-card), inset 0 1px 0 var(--border-3); transition: border-color .25s; }
/* A dense, static frosted layer hides overlapping artwork without darkening the outer panel.
   Keep blur below 20px and never animate the filter, including on mobile Safari. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gallery-card { border-radius: 25px; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
  .gallery-card-surface { background: linear-gradient(155deg, #ffffff24, #ffffff04), var(--gallery-card-frost); }
}
.gallery-card-top { display: flex; justify-content: space-between; color: var(--gallery-muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; }
.gallery-card-number { font-variant-numeric: tabular-nums; }
.gallery-icon { position: relative; display: grid; place-items: center; width: 166px; height: 166px; flex: 0 0 166px; align-self: center; border-radius: 35px; margin-bottom: 21px; background: linear-gradient(135deg, #2772bf, #29344c); box-shadow: 0 14px 26px #0000004d, 0 0 0 1px #ffffff24; overflow: hidden; }
.gallery-icon img, .gallery-thumb img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; object-fit: cover; }
.gallery-icon-fallback { font-size: 42px; font-weight: 800; color: #fff; line-height: 1; }
.gallery-card-name { position: relative; font-size: 20px; line-height: 1.27; font-weight: 800; letter-spacing: -.025em; min-height: 51px; overflow-wrap: anywhere; text-wrap: balance; text-align: start; }
.gallery-card-bottom { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--gallery-muted); font-size: 10px; line-height: 1.4; }
.gallery-card-bottom svg { flex-shrink: 0; color: var(--gallery-blue); }
.app-gallery.is-enhanced .gallery-stage { height: 432px; min-height: 0; touch-action: pan-y; overflow: hidden; }
.app-gallery.is-enhanced .gallery-floor { display: block; }
.app-gallery.is-enhanced .gallery-cards { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; perspective: 1150px; perspective-origin: 50% 47%; }
.app-gallery.is-enhanced .gallery-card { position: absolute; top: 49%; left: 50%; min-height: 332px; opacity: 0; z-index: 0; pointer-events: none; transform: translate(-50%, -50%) translateX(calc(var(--card-x) * var(--gallery-dir))) translateY(var(--card-y)) translateZ(var(--card-z)) rotateY(calc(var(--card-angle) * var(--gallery-dir))); transition: transform .48s cubic-bezier(.22,.8,.25,1), opacity .3s ease; }
.app-gallery.is-enhanced .gallery-card[data-position="0"] { --card-z: 65px; opacity: 1; z-index: 5; pointer-events: auto; }
.app-gallery.is-enhanced .gallery-card[data-position="-1"] { --card-x: -223px; --card-z: -60px; --card-y: 17px; --card-angle: -18deg; opacity: .82; z-index: 3; pointer-events: auto; }
.app-gallery.is-enhanced .gallery-card[data-position="1"] { --card-x: 223px; --card-z: -60px; --card-y: 17px; --card-angle: 18deg; opacity: .82; z-index: 3; pointer-events: auto; }
.app-gallery.is-enhanced .gallery-card[data-position="-2"] { --card-x: -402px; --card-z: -190px; --card-y: 34px; --card-angle: -26deg; opacity: .40; z-index: 1; pointer-events: auto; }
.app-gallery.is-enhanced .gallery-card[data-position="2"] { --card-x: 402px; --card-z: -190px; --card-y: 34px; --card-angle: 26deg; opacity: .40; z-index: 1; pointer-events: auto; }
.gallery-card[data-active="true"] .gallery-card-surface { border-color: var(--gallery-gold); box-shadow: 4px 5px 0 -2px color-mix(in srgb, var(--gallery-gold) 25%, transparent), var(--shadow-hover), inset 0 1px 0 var(--border-3); }
.gallery-card[data-active="true"] .gallery-card-top { color: var(--gallery-gold); }
.gallery-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--gallery-line); }
.gallery-library-count { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.gallery-library-count strong { color: var(--gallery-gold); font-size: 28px; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gallery-library-count span { color: var(--gallery-muted); font-size: 11px; }
.gallery-dock { display: none; gap: 9px; padding: 9px; border: 1px solid var(--gallery-line); border-radius: 17px; background: var(--surface-2); }
.gallery-thumb { width: 44px; height: 44px; position: relative; border-radius: 11px; padding: 0; border: 0; background: #284d7a; opacity: .58; box-shadow: 0 0 0 1px #ffffff14; cursor: pointer; transition: transform .2s ease, opacity .2s; }
.gallery-thumb img { border-radius: inherit; }
.gallery-thumb .gallery-icon-fallback { font-size: 18px; }
.gallery-thumb[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--gallery-blue); outline-offset: 3px; }
.gallery-navigation { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
.app-gallery.is-enhanced .gallery-dock, .app-gallery.is-enhanced .gallery-navigation { display: flex; }
.app-gallery [hidden] { display: none !important; }
.gallery-playback { display: grid; place-items: center; height: 44px; width: 44px; background: var(--surface-2); border: 1px solid var(--gallery-line); color: var(--gallery-text); border-radius: 50%; cursor: pointer; transition: background .2s, color .2s; }
.gallery-playback .gallery-pause-icon, .gallery-playback[data-playing="true"] .gallery-play-icon { display: none; }
.gallery-playback[data-playing="true"] .gallery-pause-icon { display: block; }
html[dir="rtl"] .gallery-cta svg { transform: scaleX(-1); }
.gallery-position { margin-inline-start: 5px; font-size: 11px; color: var(--gallery-muted); font-variant-numeric: tabular-nums; min-width: 45px; text-align: center; }
.gallery-empty { color: var(--gallery-muted); padding: 80px 0; text-align: center; }
.gallery-sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-gallery :is(button,a):focus-visible { outline: 3px solid var(--gallery-blue); outline-offset: 5px; }
.app-gallery.is-instant .gallery-card, .app-gallery.is-instant .gallery-card-surface { transition: none !important; }
@media (hover: hover) and (pointer: fine) {
  .gallery-cta:hover, .gallery-playback:hover { background: var(--gallery-gold); border-color: var(--gallery-gold); color: var(--bg-0); }
  .gallery-thumb:hover { opacity: 1; transform: translateY(-3px); }
}
@media (max-width: 1000px) {
  #apps.app-gallery { width: auto; margin-inline: 20px; padding: 32px 28px 26px; }
  .gallery-header { gap: 16px; }
  .gallery-footer { gap: 16px; }
  .gallery-thumb { width: 36px; height: 36px; }
  .gallery-dock { gap: 8px; padding: 8px; }
  .gallery-position { display: none; }
}
@media (max-width: 720px) {
  #apps.app-gallery { margin: 32px 12px 64px; padding: 28px 20px 23px; border-radius: 25px; }
  .gallery-header { display: block; }
  #gallery-title { font-size: clamp(29px, 6vw, 38px); max-width: 460px; }
  .gallery-eyebrow { font-size: 9px; margin-bottom: 11px; }
  .gallery-subtitle { font-size: 12px; margin-top: 10px; }
  .gallery-cta { margin-top: 17px; padding: 10px 13px; font-size: 11px; gap: 20px; }
  .gallery-stage { margin: 0 -20px; }
  .app-gallery.is-enhanced .gallery-stage { height: 364px; }
  .gallery-card { width: 218px; min-height: 294px; border-radius: 23px; }
  .app-gallery.is-enhanced .gallery-card { min-height: 294px; }
  .gallery-card-surface { padding: 15px 18px; border-radius: 23px; }
  .gallery-card-top { margin-bottom: 14px; }
  .gallery-icon { width: 140px; height: 140px; flex-basis: 140px; border-radius: 31px; margin-bottom: 17px; }
  .gallery-card-name { font-size: 18px; min-height: 46px; }
  .gallery-card-bottom { font-size: 9px; margin-top: 9px; }
  .app-gallery.is-enhanced .gallery-card[data-position="0"] { --card-z: 25px; }
  .app-gallery.is-enhanced .gallery-card[data-position="-1"] { --card-x: -166px; --card-z: -125px; --card-angle: -22deg; opacity: .62; }
  .app-gallery.is-enhanced .gallery-card[data-position="1"] { --card-x: 166px; --card-z: -125px; --card-angle: 22deg; opacity: .62; }
  .app-gallery.is-enhanced .gallery-card[data-position="-2"] { --card-x: -296px; --card-z: -230px; }
  .app-gallery.is-enhanced .gallery-card[data-position="2"] { --card-x: 296px; --card-z: -230px; }
  .gallery-floor { bottom: -4px; width: 120%; height: 132px; }
  .gallery-footer { display: grid; grid-template-columns: 1fr auto; gap: 20px 12px; padding-top: 18px; }
  .gallery-library-count strong { font-size: 25px; }
  .gallery-navigation { grid-row: 1; grid-column: 2; }
  .gallery-position { display: inline; }
  .app-gallery.is-enhanced .gallery-dock { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; padding: 10px; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .gallery-dock::-webkit-scrollbar { display: none; }
  .gallery-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; }
}
@media (max-width: 380px) {
  #apps.app-gallery { padding-inline: 16px; }
  #gallery-title { font-size: 28px; }
  .gallery-stage { margin-inline: -16px; }
  .gallery-card { width: 200px; }
  .gallery-card-name { font-size: 17px; }
  .app-gallery.is-enhanced .gallery-dock { gap: 10px; padding: 10px; }
  .gallery-navigation { gap: 6px; }
  .gallery-position { font-size: 10px; min-width: 39px; margin-inline-start: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-gallery *, .app-gallery *::before, .app-gallery *::after { animation: none !important; transition: none !important; }
  .gallery-card-surface { transform: none !important; }
}
@media print {
  #apps.app-gallery { break-inside: avoid; }
  .app-gallery.is-enhanced .gallery-cards { position: static; display: flex; flex-wrap: wrap; }
  .app-gallery.is-enhanced .gallery-card { position: static; transform: none; opacity: 1; }
  .app-gallery.is-enhanced .gallery-stage { height: auto; }
  .gallery-floor, .gallery-dock, .gallery-navigation { display: none !important; }
}