/* Apps pages - shared styles (complements Bootstrap 5.3.2) */
:root { --brand:#7C3AED; --brand-dark:#5B21B6; --ink:#0F172A; --muted:#64748B; --soft:#F8FAFC; --star:#f5a623; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:var(--ink); }
a { color:var(--brand); }
.btn-primary { background:var(--brand); border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }

/* star rating (half-star accurate via gradient clip) */
.stars { display:inline-block; font-size:1.05rem; line-height:1; letter-spacing:2px; }
.stars::before { content:"\2605\2605\2605\2605\2605";
  background:linear-gradient(90deg, var(--star) var(--pct,0%), #d4d4d8 var(--pct,0%));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rating-num { font-weight:700; margin-left:.4rem; }
.rating-count { color:var(--muted); font-size:.9rem; }
.rating-new { color:var(--muted); font-style:italic; }

/* hub grid */
.apps-hero { text-align:center; padding:3rem 1rem 1rem; }
.apps-hero h1 { font-weight:800; letter-spacing:-0.02em; }
.apps-hero p { color:var(--muted); max-width:620px; margin:0 auto; }
.app-card { background:#fff; border:1px solid #ececf1; border-radius:18px; padding:1.5rem; height:100%;
  text-align:center; transition:transform .25s ease, box-shadow .25s ease; margin-bottom:1.5rem; }
.app-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(124,58,237,.14); }
.app-card-link { text-decoration:none; color:inherit; display:block; }
.app-icon { border-radius:22%; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.app-card-name { font-weight:800; margin-top:1rem; margin-bottom:.1rem; font-size:1.2rem; color:var(--ink); }
.app-genre { font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--brand); font-weight:700; }
.app-card-tagline { color:var(--muted); font-size:.92rem; margin-top:.6rem; min-height:3.2em; }
.app-card-rating { min-height:1.6rem; margin:.4rem 0 1rem; }
.app-card-actions { display:flex; gap:.5rem; justify-content:center; }
.appstore-badge-link { display:inline-block; margin-top:.85rem; transition:transform .2s ease; }
.appstore-badge-link:hover { transform:translateY(-2px); }
.appstore-badge-link img { height:40px; width:auto; }
.app-hero .hero-badge { margin-top:.2rem; }
.app-hero .hero-badge img { height:48px; }

/* app detail hero */
.app-hero { background:linear-gradient(160deg,#faf7ff 0%,#f3eeff 100%); padding:3rem 1rem 2.5rem; }
.app-hero .container { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.app-hero-icon { width:140px; height:140px; border-radius:24%; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.app-hero-info { max-width:520px; }
.app-hero-info .app-genre { font-size:.78rem; }
.app-hero-info h1 { font-weight:800; letter-spacing:-0.02em; margin:.3rem 0; }
.app-hero-tagline { font-size:1.12rem; color:#334155; }
.app-hero-meta { display:flex; align-items:center; gap:1rem; margin:1rem 0 1.3rem; flex-wrap:wrap; }
.app-badge-free { background:#e9f9ee; color:#15803d; font-weight:700; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; }
.appstore-btn { display:inline-flex; align-items:center; gap:.5rem; background:#000; color:#fff; text-decoration:none;
  padding:.7rem 1.3rem; border-radius:12px; font-weight:600; transition:transform .2s ease,opacity .2s ease; }
.appstore-btn:hover { transform:translateY(-2px); color:#fff; opacity:.9; }

/* screenshots strip */
.shots { padding:2rem 0; }
.shots-track { display:flex; gap:1rem; overflow-x:auto; padding:1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.shots-track img { height:460px; border-radius:22px; border:1px solid #e5e5ec; scroll-snap-align:center; box-shadow:0 10px 26px rgba(0,0,0,.12); flex:0 0 auto; }
.shots-track::-webkit-scrollbar { height:8px; }
.shots-track::-webkit-scrollbar-thumb { background:#d6d0e6; border-radius:4px; }

/* description */
.app-desc { max-width:760px; margin:0 auto; white-space:pre-line; line-height:1.7; color:#334155; }
.section-title { text-align:center; font-weight:800; letter-spacing:-0.01em; margin-bottom:1.5rem; }

/* reviews */
.reviews { background:var(--soft); padding:3rem 0; }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; max-width:1000px; margin:0 auto; }
.review-card { background:#fff; border:1px solid #ececf1; border-radius:14px; padding:1.3rem; margin:0; }
.review-title { font-weight:700; margin:.5rem 0 .4rem; }
.review-card blockquote { margin:0; color:#475569; font-size:.95rem; line-height:1.55; }
.review-author { margin-top:.8rem; font-size:.82rem; color:var(--muted); }
.reviews-empty { text-align:center; color:var(--muted); padding:1.5rem; }
.reviews-loading { text-align:center; color:var(--muted); }

.more-apps { padding:2.5rem 1rem 1rem; text-align:center; }
.more-apps-row { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; margin-top:1.4rem; }
.more-apps-row a { text-decoration:none; color:#334155; font-size:.76rem; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:.5rem; width:84px; transition:transform .2s ease; }
.more-apps-row a:hover { transform:translateY(-5px); }
.more-apps-row img { width:66px; height:66px; border-radius:22%; box-shadow:0 6px 16px rgba(0,0,0,.14); }

.apps-footer { background:#0d0d14; color:#cbd5e1; text-align:center; padding:2rem 1rem; margin-top:3rem; }
.apps-footer a { color:#c4b5fd; text-decoration:none; }
.skip-link { position:absolute; left:-9999px; top:auto; background:var(--brand); color:#fff; padding:.75rem 1rem; border-radius:6px; font-weight:600; z-index:2000; }
.skip-link:focus { left:1rem; top:1rem; }
@media (max-width:575px){ .shots-track img{ height:380px; } .app-hero-icon{ width:110px; height:110px; } }