/* ============================================================
   Enhancements: 3D hero canvas, scroll progress, case-study
   modals, and the ⌘K command palette.
   All colors use the site's existing theme tokens so every
   theme (deep-space, monochrome-pro, emerald-aurora, solar-amber)
   is supported automatically.
   ============================================================ */

/* ---- 3D hero canvas ---- */
#hero3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out-expo, ease);
}
#hero3d.ready { opacity: 0.9; }

/* ---- Scroll reading progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2000;
  background: var(--accent-gradient, linear-gradient(90deg, #58a6ff, #ec4899));
  box-shadow: 0 0 12px var(--border-glow, rgba(88,166,255,0.4));
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---- "View case study" trigger button ---- */
.cs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  font-family: var(--font-main, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  background: var(--glass-bg, rgba(20,20,20,0.6));
  border: 1px solid var(--border-color, rgba(255,255,255,0.15));
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring, ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.cs-trigger:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary, #58a6ff);
  box-shadow: 0 8px 24px -8px var(--accent-glow, rgba(88,166,255,0.3));
}
.cs-trigger span:last-child { transition: transform 0.3s var(--ease-spring, ease); }
.cs-trigger:hover span:last-child { transform: translateX(4px); }

/* ---- Shared overlay (modals + palette) ---- */
.cs-overlay, .cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  opacity: 0;
  visibility: hidden;
  background: rgba(2, 4, 8, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s var(--ease-out-expo, ease), visibility 0.35s;
}
.cs-overlay.open, .cmdk-overlay.open { opacity: 1; visibility: visible; }

/* ---- Case-study modal ---- */
.cs-overlay { align-items: center; justify-content: center; padding: 24px; }
.cs-dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px clamp(24px, 4vw, 48px) 24px;
  background: var(--bg-secondary, #0b0e14);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 20px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7);
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.45s var(--ease-spring, ease), opacity 0.45s ease;
}
.cs-overlay.open .cs-dialog { transform: translateY(0) scale(1); opacity: 1; }
.cs-dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-gradient, linear-gradient(90deg,#58a6ff,#ec4899));
  border-radius: 20px 20px 0 0;
}
.cs-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  color: var(--text-secondary, #8b949e);
  background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.cs-close:hover { color: var(--text-primary,#fff); border-color: var(--accent-primary,#58a6ff); transform: rotate(90deg); }
.cs-title {
  font-family: var(--font-main, sans-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  margin: 0;
  background: var(--accent-gradient, linear-gradient(90deg,#58a6ff,#ec4899));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-subtitle { color: var(--accent-primary, #58a6ff); font-weight: 600; margin: 4px 0 0; font-size: 1rem; }
.cs-desc { color: var(--text-secondary, #8b949e); line-height: 1.7; margin: 20px 0; font-size: 1.02rem; }
.cs-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; }
.cs-feature {
  padding: 14px 16px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.cs-feature h5 { margin: 0 0 4px; font-size: 0.95rem; color: var(--text-primary,#fff); font-weight: 700; }
.cs-feature p { margin: 0; font-size: 0.85rem; color: var(--text-secondary,#8b949e); line-height: 1.5; }
.cs-images { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.cs-images img { max-height: 320px; border-radius: 12px; border: 1px solid var(--border-color, rgba(255,255,255,0.1)); }
.cs-tags { margin-top: 8px; }
.cs-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.cs-prev, .cs-next {
  padding: 8px 16px; font-family: var(--font-main, sans-serif); font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary,#fff); background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 8px; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.cs-prev:hover, .cs-next:hover { border-color: var(--accent-primary,#58a6ff); transform: translateY(-1px); }
.cs-counter { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--text-muted, #4b535d); }

/* ---- Command palette (⌘K) ---- */
.cmdk-overlay { align-items: flex-start; justify-content: center; padding-top: 14vh; }
.cmdk {
  width: min(620px, 92vw);
  background: var(--glass-bg, rgba(11,14,22,0.92));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  backdrop-filter: blur(var(--glass-blur, 20px));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 16px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7);
  overflow: hidden;
  transform: translateY(-16px) scale(0.98);
  opacity: 0;
  transition: transform 0.35s var(--ease-spring, ease), opacity 0.35s ease;
}
.cmdk-overlay.open .cmdk { transform: translateY(0) scale(1); opacity: 1; }
.cmdk-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08)); }
.cmdk-input-wrap svg { width: 18px; height: 18px; flex: none; color: var(--text-muted, #4b535d); }
.cmdk-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary, #fff); font-family: var(--font-main, sans-serif); font-size: 1.05rem;
}
.cmdk-input::placeholder { color: var(--text-muted, #4b535d); }
.cmdk-hint { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--text-muted,#4b535d); border: 1px solid var(--border-color,rgba(255,255,255,0.12)); border-radius: 6px; padding: 2px 6px; }
.cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 46vh; overflow-y: auto; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  color: var(--text-secondary, #8b949e);
}
.cmdk-item.active { background: var(--accent-glow, rgba(88,166,255,0.12)); color: var(--text-primary, #fff); }
.cmdk-ic { width: 22px; text-align: center; font-size: 0.95rem; opacity: 0.9; }
.cmdk-label { flex: 1; font-size: 0.95rem; }
.cmdk-kbd { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--text-muted, #4b535d); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--text-muted,#4b535d); font-size: 0.9rem; }
.cmdk-foot {
  display: flex; gap: 18px; padding: 10px 16px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
  font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--text-muted, #4b535d);
}

/* ---- Command palette floating button ---- */
.cmdk-fab {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 1500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-mono, monospace); font-size: 0.8rem; font-weight: 600;
  color: var(--text-primary, #fff);
  background: var(--glass-bg, rgba(11,14,22,0.85));
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px));
  backdrop-filter: blur(var(--glass-blur, 20px));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
  transition: transform 0.3s var(--ease-spring, ease), border-color 0.3s ease;
}
.cmdk-fab:hover { transform: translateY(-2px); border-color: var(--accent-primary, #58a6ff); }
.cmdk-fab-key { background: var(--accent-glow, rgba(88,166,255,0.15)); padding: 2px 7px; border-radius: 6px; }

@media (max-width: 600px) {
  .cmdk-fab { left: 16px; bottom: 16px; padding: 8px 11px; }
  .cs-dialog { padding: 36px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #hero3d, .scroll-progress, .cs-dialog, .cmdk, .cs-trigger, .cmdk-fab { transition: none; }
}

/* ============================================================
   Key Projects — professional upgrade: hide stray labels,
   intro line, category filter bar, numbered project meta.
   ============================================================ */

/* Hide leftover unstyled marker text ("Project 1: …", "Screen 1: …") */
#projects .projects-list > span,
#projects .iphone-screen > span { display: none !important; }

.projects-intro {
  max-width: 660px;
  margin: 20px auto 0;
  text-align: center;
  color: var(--text-secondary, #8b949e);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Filter bar */
.proj-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 90px;
}
.proj-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-main, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  background: var(--glass-bg, rgba(20, 20, 20, 0.6));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s var(--ease-out-expo, ease), border-color 0.3s ease,
    transform 0.3s var(--ease-spring, ease), background 0.3s ease;
}
.proj-filter-chip:hover {
  color: var(--text-primary, #fff);
  border-color: var(--accent-primary, #58a6ff);
  transform: translateY(-2px);
}
.proj-filter-chip.active {
  color: #fff;
  background: var(--accent-gradient, linear-gradient(135deg, #58a6ff, #ec4899));
  border-color: transparent;
}
.proj-filter-count { font-family: var(--font-mono, monospace); font-size: 0.7rem; opacity: 0.65; }
.proj-filter-chip.active .proj-filter-count { opacity: 0.9; }

/* Numbered eyebrow + category pills above each project title */
.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.project-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-primary, #58a6ff);
  direction: ltr;
  unicode-bidi: isolate;
}
.project-cat-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.project-cat {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--chip, var(--accent-primary, #58a6ff));
  background: var(--accent-glow, rgba(88, 166, 255, 0.12));
  background: color-mix(in srgb, var(--chip, var(--accent-primary)) 16%, transparent);
  border: 1px solid var(--border-glow, rgba(88, 166, 255, 0.25));
  border: 1px solid color-mix(in srgb, var(--chip, var(--accent-primary)) 38%, transparent);
}

/* Filtering show/hide with a gentle fade-in */
.project-row.proj-hide { display: none !important; }
.project-row.proj-anim { animation: projFadeIn 0.5s var(--ease-out-expo, ease) both; }
@keyframes projFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proj-filter-chip, .project-row.proj-anim { transition: none; animation: none; }
}

/* ============================================================
   Cosmic scroll decorations — distant planets + a black hole,
   parallaxing behind sections (a journey from the solar system
   out to the edge). Ported aesthetics from the Space app.
   ============================================================ */
.cosmic {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1;
  max-width: 58vw;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out-expo, ease);
  will-change: transform;
}
.cosmic.in { opacity: var(--cosmic-op, 0.5); }

/* Distant lit world */
.cosmic-planet {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset -14px -12px 48px 6px rgba(0, 0, 0, 0.78); /* terminator / limb shadow for depth */
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
  mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 74%);
}

/* Black hole — glowing accretion disk, dark event horizon, spinning Doppler arc */
.cosmic-blackhole {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,170,90,0) 0%,
    rgba(255,170,90,0) 26%,
    rgba(255,238,205,0.92) 36%,
    rgba(255,150,60,0.82) 45%,
    rgba(255,95,45,0.30) 60%,
    rgba(255,95,45,0.06) 72%,
    rgba(255,95,45,0) 82%);
  filter: drop-shadow(0 0 55px rgba(255,140,60,0.4));
}
.cosmic-blackhole::before {  /* event horizon */
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.9);
}
.cosmic-blackhole::after {   /* rotating hot-spot / Doppler beaming, masked to the disk band */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg,
    rgba(255,250,235,0) 60deg,
    rgba(255,250,235,0.7) 130deg,
    rgba(255,210,160,0.15) 175deg,
    rgba(255,255,255,0) 230deg,
    rgba(255,255,255,0) 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 37%, #000 53%, transparent 68%);
  mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 37%, #000 53%, transparent 68%);
  animation: cosmic-spin 16s linear infinite;
}
@keyframes cosmic-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cosmic { transition: none; }
  .cosmic-blackhole::after { animation: none; }
}

/* ============================================================
   COSMIC DECOR — expansion: nebula "space-photo" layers, a small
   near moon, a distant-body haze modifier, and a THREADED ringed
   Saturn (ring on ::before/::after so its tilt survives move()
   overwriting the parent transform every scroll frame).
   ============================================================ */

/* ---- Deep-space photo layer ----
   Own class so it escapes .cosmic's aspect-ratio:1 / max-width:58vw
   lock. Width/height come inline from the DECOR w/h keys.
   mix-blend-mode:screen makes the mostly-black photo add ONLY its
   bright clouds over the near-black sections, so it can never darken
   text. A radial mask dissolves all four edges (no hard rectangle),
   and the @supports fallback (plain low opacity) still looks fine. */
.cosmic-nebula {
  aspect-ratio: auto;            /* override .cosmic's 1:1 */
  max-width: none;               /* allow wide coverage / off-edge bleed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;        /* black pixels drop out, clouds glow */
  filter: saturate(0.85) contrast(1.05);
  -webkit-mask: radial-gradient(ellipse 62% 62% at 50% 50%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 80%);
          mask: radial-gradient(ellipse 62% 62% at 50% 50%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 80%);
}
/* Deepest field behind the black hole — taller, centered, dissolving
   well before the contact form/edges so it cradles the disk only. */
.cosmic-nebula-deep {
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 4%, rgba(0,0,0,0.55) 42%, transparent 72%);
          mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 4%, rgba(0,0,0,0.55) 42%, transparent 72%);
}
/* Fallback for engines without screen blend: lean on mask + low op
   alone (still a soft faint field, no ugly rectangle). */
@supports not (mix-blend-mode: screen) {
  .cosmic-nebula { opacity: calc(var(--cosmic-op, 0.11) * 0.85); }
}

/* ---- Small near "moon" accent ---- */
.cosmic-moon {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset -6px -5px 18px 2px rgba(0,0,0,0.8);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 73%);
          mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 73%);
}

/* ---- Distant body: dimmed + a hair of haze so far Neptune reads
   deeper in the frame than Uranus. ---- */
.cosmic-distant {
  box-shadow: inset -6px -5px 18px 2px rgba(0,0,0,0.7);
  filter: blur(0.3px) brightness(0.9);   /* atmospheric distance */
}

/* ---- Saturn (SHOWPIECE) — threaded ringed planet ----
   Ring = a foreshortened CIRCULAR BORDER on TWO pseudo-elements whose
   transforms are INDEPENDENT of the move()-overwritten parent transform:
     ::before = full ring BEHIND the globe -> z-index:-1 (top arc + side ansae show)
     ::after  = FRONT lower arc            -> z-index: 1 (crosses the near lit limb)
   Both share rotateX(68deg) near-edge-on tilt + a small Z roll. The parent
   (.cosmic, position:absolute + z-index:0) forms a stacking context, so the
   negative/positive z-index pseudos resolve against the parent's own painted
   disk. NOTE: the body uses border-radius (NOT mask) — a mask would also clip
   the ring pseudos and erase the ansae. ---- */
.cosmic-saturn {
  border-radius: 50%;            /* hard circular limb. MUST NOT use mask here — a mask
                                    clips the ::before/::after ring pseudos too, erasing
                                    the ansae. border-radius + overflow:visible lets the
                                    ring extend past the globe. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset -12px -10px 40px 5px rgba(0,0,0,0.78);
  overflow: visible;             /* let the ring ansae extend past the disk */
}
/* Ring = a foreshortened CIRCULAR BORDER (not the 1024x62 saturn_ring.png strip,
   which renders as a flat bar in 2D). rotateX tilts the circle into an ellipse.
   Transforms live on the pseudos so they survive move() overwriting the parent. */
.cosmic-saturn::before,
.cosmic-saturn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 235%;                   /* ring ellipse ~2.35x the planet; ansae reach past the limb */
  height: 235%;
  box-sizing: border-box;
  border: 16px solid rgba(226, 210, 181, 0.6);   /* the warm ring band */
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-18deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.cosmic-saturn::before {         /* BACK: full ring behind the globe (top arc + side ansae show) */
  z-index: -1;
}
.cosmic-saturn::after {          /* FRONT: lower arc only, crossing over the planet's near limb */
  -webkit-mask: linear-gradient(180deg, transparent 0 50%, #000 50%);
          mask: linear-gradient(180deg, transparent 0 50%, #000 50%);
  z-index: 1;
}

/* ---- Reduced motion ----
   Parallax already disabled in JS (existing `if (reduce) return;`).
   No new keyframe animations added, so nebula / moon / Saturn / distant
   all show statically. Keep transitions instant for consistency. ---- */
@media (prefers-reduced-motion: reduce) {
  .cosmic-nebula,
  .cosmic-moon,
  .cosmic-saturn,
  .cosmic-distant { transition: none; }
}

/* ---- Per-project actions row (store pills + JS-injected cs-trigger share one line) ---- */
.project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.project-actions .cs-trigger { margin-top: 0; }

/* ===== SHARED STORE-PILL COMPONENT (rows + modal + More Apps) ===== */
.store-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 8px;
  padding-inline: 14px 16px;
  text-decoration: none;
  color: var(--text-primary, #fff);
  background: var(--glass-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.10));
  border-radius: var(--r-pill, 999px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  line-height: 1.05;
  transition: transform 0.3s var(--ease-out-expo, ease),
              border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.store-pill:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary, #4FE3FF);
  background: color-mix(in srgb, var(--accent-primary, #4FE3FF) 10%, var(--glass-bg, rgba(255,255,255,0.05)));
  box-shadow: 0 10px 28px -10px var(--accent-glow, rgba(79,227,255,0.18));
}
.store-pill:focus-visible {
  outline: 2px solid var(--accent-primary, #4FE3FF);
  outline-offset: 3px;
  border-color: var(--accent-primary, #4FE3FF);
}
.store-pill-glyph { flex: 0 0 auto; display: block; }
.store-pill--apple .store-pill-glyph { color: var(--text-primary, #fff); }
.store-pill-text { display: flex; flex-direction: column; text-align: start; }
.store-pill-eyebrow {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary, rgba(255,255,255,0.7));
}
.store-pill-name {
  font-family: var(--font-main, sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

/* ---- Modal store block ---- */
.cs-store { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 480px) {
  .project-actions .store-pill { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .store-pill { transition: border-color 0.3s ease, background 0.3s ease; }
  .store-pill:hover { transform: none; }
}

/* ---- More Apps section ---- */
.more-apps { width: 100%; margin-block-start: 56px; }
.more-apps-header { text-align: center; max-inline-size: 620px; margin-inline: auto; margin-block-end: 28px; }
.more-apps-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: 0.2px; }
.more-apps-sub { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.more-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.more-app-card { display: block; text-decoration: none; border-radius: var(--r-tile, 16px); color: inherit; }
.more-app-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px 18px; text-align: center; }
.more-app-glyph { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 0 14px var(--accent-glow)); }
.more-app-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }

.store-pill--compact { gap: 7px; padding-block: 6px; padding-inline: 12px 14px; margin-block-start: 4px; }
.store-pill--compact .store-pill-name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2px; }

.more-app-card:hover .store-pill,
.more-app-card:focus-visible .store-pill {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 10px 28px -10px var(--accent-glow);
}
.more-app-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

@media (max-width: 560px) {
  .more-apps-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .more-app-inner { padding: 18px 10px 16px; }
  .more-app-name { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .more-app-card:hover .store-pill,
  .more-app-card:focus-visible .store-pill { transform: none; }
}