/* ════════════════════════════════════════════════════════════════════
   SafarCircle — UI Refresh 2026
   Layered on top of app.css. Re-skins tokens, chrome, cards, nav,
   buttons, splash, profile, circles, messages and adds template
   pickers (circles/meetups) plus Digital Passport components — all
   without touching existing markup or JS logic.
   ════════════════════════════════════════════════════════════════════ */

/* ─── New design tokens ─── */
:root {
  /* Deep navy + gold palette extracted from product mockups */
  --bg:           #0A1330;
  --bg-2:         #0E1A40;
  --surface:      #131F47;
  --card:         #1A2755;
  --card-2:       #213168;
  --border:       rgba(212,168,83,0.18);
  --border-soft:  rgba(255,255,255,0.06);
  --text:         #F5F1E4;
  --text-dim:     #E5DFC8;
  --muted:        #97A0BC;
  --primary:      #D6336C;   /* warm pink CTA */
  --primary-lt:   #E85D8A;
  --primary-dk:   #B32050;
  --gold:         #D4A853;
  --gold-lt:      #E6BE6E;
  --gold-dk:      #B58A3E;
  --accent:       #6FB495;
  --danger:       #E26A6A;
  --success:      #6FB495;

  --radius:       18px;
  --radius-lg:    22px;
  --radius-sm:    12px;
  --radius-pill:  999px;

  --shadow-sm:    0 2px 10px rgba(0,0,0,0.25);
  --shadow:       0 10px 30px rgba(0,0,0,0.35);
  --shadow-lg:    0 20px 50px rgba(0,0,0,0.45);
  --shadow-gold:  0 6px 24px rgba(212,168,83,0.25);

  --serif: 'Amiri', 'Cormorant Garamond', Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ─── Base ─── */
html, body {
  font-family: var(--sans);
  background: radial-gradient(120% 80% at 50% 0%, #15235A 0%, var(--bg) 55%, #060C20 100%);
  color: var(--text);
  letter-spacing: -0.005em;
}
body { background-attachment: fixed; }

.screen { background: transparent; }
#screen-app { background: var(--bg); }

h1, h2, h3, .splash-title, .top-logo,
.profile-name, .pp-greeting, .feed-title {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* ─── SPLASH — cream + navy hero (matches mockup 9) ─── */
#screen-splash .splash-bg {
  background:
    radial-gradient(140% 90% at 20% 0%, rgba(255,255,255,0.85) 0%, rgba(245,239,227,0.92) 40%, #F5EFE3 100%);
}
#screen-splash .splash-title { color: #1B3054; font-size: 3rem; }
#screen-splash .splash-title .gold,
#screen-splash .splash-title b { color: var(--gold-dk); }
#screen-splash .splash-sub { color: #4F5A75; }
#screen-splash .arabic-sub { color: #6E5A2C; }
#screen-splash .onboarding {
  background: linear-gradient(to top, #F5EFE3 65%, rgba(245,239,227,0.0));
  padding: 1.75rem 1.5rem 2.5rem;
}
#screen-splash .onboarding p { color: #2A3550; font-size: 1.02rem; line-height: 1.5; }
#screen-splash .onboarding-dots .dot { background: rgba(27,48,84,0.2); }
#screen-splash .onboarding-dots .dot.active { background: var(--gold-dk); }

/* Splash logo: render bigger interlocking-rings feel */
#screen-splash .sc-logo-splash { width: min(38vw, 130px); filter: drop-shadow(0 6px 18px rgba(184,135,46,0.35)); }

/* ─── AUTH screens — soft navy ─── */
#screen-login, #screen-register, #screen-forgot-password {
  background: radial-gradient(120% 80% at 50% 0%, #1A2A60 0%, var(--bg) 60%, #050B1F 100%);
}
.auth-body h2 { font-family: var(--serif); font-size: 2rem; }
.form input, .form select, .form textarea, .field input, .field select, .field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.98rem;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.form input:focus, .form select:focus, .form textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(212,168,83,0.06);
  box-shadow: 0 0 0 3px rgba(212,168,83,0.15);
}
.field label, .form label { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }

/* ─── BUTTONS ─── */
.btn-primary, .btn-gold, .btn-gold-sm {
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 60%, var(--gold-dk) 100%);
  color: #1B2349;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-gold);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}
.btn-primary:hover, .btn-gold:hover, .btn-gold-sm:hover {
  transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 10px 28px rgba(212,168,83,0.35);
}
.btn-primary:active, .btn-gold:active { transform: translateY(0); }
.btn-gold-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.btn-terracotta {
  background: linear-gradient(180deg, var(--primary-lt) 0%, var(--primary) 60%, var(--primary-dk) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.4rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(214,51,108,0.35);
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.btn-terracotta:hover { transform: translateY(-1px); filter: brightness(1.05); }

.btn-outline, .btn-outline-sm {
  background: transparent;
  border: 1.5px solid rgba(212,168,83,0.45);
  color: var(--gold-lt);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.25rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.btn-outline:hover { background: rgba(212,168,83,0.08); border-color: var(--gold); color: var(--gold); }
.btn-outline-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.2rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--text); }

.btn-full { width: 100%; }

/* ─── TOP BAR — full override (beats app.css !important blocks) ─── */
.top-bar,
#screen-app > .top-bar,
.top-bar.sticky-top {
  background: linear-gradient(180deg, rgba(8,16,42,0.97) 0%, rgba(10,19,48,0.90) 100%) !important;
  backdrop-filter: saturate(1.8) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
  border-bottom: 1px solid rgba(212,168,83,0.12) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,0.45) !important;
  padding: var(--safe-top) 1rem 0 !important;
  height: calc(var(--top-h) + var(--safe-top)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 55 !important;
  flex-shrink: 0 !important;
}

/* Wordmark: Safar (light) + Circle (gold) — serif, larger */
.top-logo {
  font-family: var(--serif) !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--text) !important;
  line-height: 1 !important;
}
.top-logo .gold,
.top-logo > span {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Page title (centred, appears when navigating sub-pages) */
.top-title {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-size: 1.1rem !important;
}

/* Icon buttons in the header */
.btn-icon { color: rgba(240,244,255,0.7); transition: color .15s ease; }
.btn-icon:hover { color: var(--gold); }

/* Avatar bubble in top-right */
#screen-app .top-bar .avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  overflow: hidden;
  background: linear-gradient(135deg, #213168, #0F1A42);
}

/* ─── BOTTOM NAV — gold-on-navy, pill highlight (mockups) ─── */
.bottom-nav {
  background: linear-gradient(180deg, rgba(15,25,60,0.92) 0%, rgba(8,15,38,0.98) 100%);
  backdrop-filter: saturate(1.6) blur(20px);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border-top: 1px solid var(--border-soft);
  padding-bottom: var(--safe-bottom);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--nav-total-h);
}
.bottom-nav .nav-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  width: 56px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .12s ease;
  position: relative;
}
.bottom-nav .nav-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.bottom-nav .nav-btn:hover { color: var(--text-dim); }
.bottom-nav .nav-btn.active {
  color: var(--gold);
  background: rgba(212,168,83,0.12);
}
.bottom-nav .nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.bottom-nav .nav-btn-explore { width: 56px; height: 44px; }
.bottom-nav .nav-explore-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border-radius: var(--radius-sm);
}
.bottom-nav .nav-btn-explore.active .nav-explore-inner {
  background: rgba(212,168,83,0.18);
}

/* ─── PANEL / Page scaffolds ─── */
.app-main { background: transparent; }
.panel { background: transparent; }
.panel-scroll { padding: 1.1rem 1rem calc(var(--nav-total-h) + 1.2rem); }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0.25rem 0 1rem;
}
.section-head h2 { font-family: var(--serif); font-size: 1.7rem; color: var(--text); }

/* ─── CARDS — soft glassy navy with gold trim ─── */
.card, .card-list > *, .meetup-card, .place-card, .circle-card,
.trip-card, .companion-card, .friend-card, .notif-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover, .card-list > *:hover, .meetup-card:hover,
.place-card:hover, .circle-card:hover, .trip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,168,83,0.3);
  box-shadow: var(--shadow);
}

/* ─── Filter pills / chips ─── */
.filter-row, .map-filters, .filter-tags, .sc-chip-row {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.25rem 0.1rem 0.6rem;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar,
.map-filters::-webkit-scrollbar,
.filter-tags::-webkit-scrollbar,
.sc-chip-row::-webkit-scrollbar { display: none; }

.pill, .filter-pill, .sc-chip, .tag-btn, .admin-tab {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
}
.pill:hover, .filter-pill:hover, .sc-chip:hover, .tag-btn:hover {
  background: rgba(212,168,83,0.1);
  border-color: rgba(212,168,83,0.35);
  color: var(--text);
}
.pill.active, .filter-pill.active, .sc-chip.active, .tag-btn.active, .admin-tab.active {
  background: linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 100%);
  color: #1B2349;
  border-color: var(--gold-dk);
  box-shadow: var(--shadow-gold);
}
.filter-pill-ai {
  background: linear-gradient(135deg, rgba(212,168,83,0.18), rgba(201,117,96,0.18));
  border-color: rgba(212,168,83,0.4);
  color: var(--gold-lt);
}

/* ─── MAP overlay ─── */
.map-overlay-top {
  padding: calc(var(--safe-top) + 0.75rem) 0.75rem 0.5rem;
}
.map-search {
  background: rgba(15,25,60,0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.map-search input { background: transparent; border: none; color: var(--text); width: 100%; }
.map-search input::placeholder { color: var(--muted); }
.search-icon { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; }

.map-fab {
  background: linear-gradient(180deg, var(--primary-lt), var(--primary) 60%, var(--primary-dk));
  color: #fff;
  border: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(201,117,96,0.45);
}
.map-fab.fab-secondary {
  background: rgba(15,25,60,0.92);
  color: var(--gold);
  border: 1px solid rgba(212,168,83,0.3);
}

/* ─── FEED / Post cards (Caravan Feed style mockup 10/13) ─── */
.feed-greeting {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--text);
  margin: 0.2rem 0 0.1rem;
}
.feed-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--text);
  margin: 0.1rem 0 1rem;
}
.feed-post-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.feed-post-hero {
  position: relative; aspect-ratio: 4 / 3;
  background: #0E1A40 center/cover no-repeat;
}
.feed-post-hero .pin-tag {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: rgba(201,117,96,0.92);
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.3rem;
  backdrop-filter: blur(6px);
}
.feed-post-body { padding: 0.9rem 1rem 1.1rem; }
.feed-post-body h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--text); margin-bottom: 0.3rem; }
.feed-post-meta { color: var(--muted); font-size: 0.85rem; }
.feed-post-tag {
  display: inline-block;
  background: rgba(212,168,83,0.14);
  color: var(--gold-lt);
  border: 1px solid rgba(212,168,83,0.28);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  margin: 0.4rem 0.3rem 0 0;
}

/* ─── CIRCLES grid (mockup 14) ─── */
#circlesList { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (min-width: 540px) { #circlesList { grid-template-columns: repeat(3, 1fr); } }
.circle-card-v2 {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.circle-card-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.circle-card-v2 .cc-bg {
  position: absolute; inset: 0;
  background: #15235A center/cover no-repeat;
}
.circle-card-v2 .cc-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,19,48,0.05) 30%, rgba(10,19,48,0.85) 100%);
}
.circle-card-v2 .cc-info {
  position: absolute; inset: auto 0 0 0;
  padding: 0.85rem 0.95rem 0.9rem;
  z-index: 2;
}
.circle-card-v2 .cc-name {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 700; color: #fff;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.circle-card-v2 .cc-meta {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
}

/* ─── DIGITAL PASSPORT (profile, mockups 7/12) ─── */
.passport-hero {
  background: linear-gradient(160deg, var(--surface-alt, #F0EAE2) 0%, var(--surface, #FAF7F2) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem 1.2rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}
[data-theme="dark"] .passport-hero {
  background: linear-gradient(160deg, #1A2755 0%, #0F1A42 100%);
}
.passport-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 10% 0%, rgba(212,168,83,0.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(201,117,96,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.passport-name {
  font-family: var(--serif); font-size: 1.6rem; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
}
.passport-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-top: 1rem;
  background: rgba(212,168,83,0.14);
  border: 1px solid rgba(212,168,83,0.3);
  border-radius: var(--radius);
  padding: 0.8rem;
  position: relative; z-index: 2;
}
.passport-stat { text-align: center; }
.passport-stat .ps-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.passport-stat .ps-val { font-family: var(--serif); font-size: 1.55rem; color: var(--gold-lt); font-weight: 700; }
.passport-stamps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem; margin-top: 1rem;
}
.passport-stamp {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--surface-alt, #E8D8CC) 0%, var(--surface, #FAF7F2) 100%);
  border: 2px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem;
  box-shadow: inset 0 0 14px rgba(212,168,83,0.18), 0 4px 16px rgba(0,0,0,0.12);
}
[data-theme="dark"] .passport-stamp {
  background: radial-gradient(circle at 30% 30%, #213168 0%, #0F1A42 100%);
  color: var(--gold-lt);
  box-shadow: inset 0 0 14px rgba(212,168,83,0.18), 0 4px 16px rgba(0,0,0,0.35);
}
.passport-stamp .ps-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.15rem; }
.passport-stamp.locked { opacity: 0.35; filter: grayscale(0.6); }

/* ─── CHAT (mockup 4) ─── */
.chat-panel { background: var(--bg); }
.chat-bubble, .msg-bubble, .chat-msg {
  max-width: 78%;
  padding: 0.7rem 0.95rem;
  border-radius: 20px;
  font-size: 0.95rem;
  line-height: 1.35;
  margin: 0.25rem 0;
  word-wrap: break-word;
}
.chat-msg.from-me, .msg-bubble.mine, .chat-bubble.outgoing {
  background: linear-gradient(180deg, #FAF6EC 0%, #F0E9D6 100%);
  color: #1B2349;
  margin-left: auto;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.chat-msg.from-them, .msg-bubble.theirs, .chat-bubble.incoming {
  background: #1F2C5C;
  color: var(--text);
  margin-right: auto;
  border-bottom-left-radius: 6px;
  border: 1px solid var(--border-soft);
}
.chat-input-wrap, .chat-composer, .msg-composer {
  background: rgba(10,19,48,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft);
  padding: 0.6rem 0.8rem calc(var(--safe-bottom) + 0.6rem);
}
.chat-input, .msg-composer input, .msg-composer textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1rem;
}
.chat-input::placeholder, .msg-composer input::placeholder { color: var(--muted); font-style: italic; }

/* ─── Modal overlay ─── */
.modal-overlay {
  background: rgba(5,10,28,0.78);
  backdrop-filter: blur(8px);
}
.modal-box {
  background: linear-gradient(180deg, #1A2755 0%, #131F47 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.modal-box h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--text); }

/* ─── Template picker (added by app-refresh.js to Create Circle/Meetup) ─── */
.tpl-picker-wrap {
  margin: 0.5rem 0 1rem;
}
.tpl-picker-label {
  font-size: 0.85rem; color: var(--text-dim);
  font-weight: 600; margin-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.tpl-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--card);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.tpl-tile .tpl-bg { position: absolute; inset: 0; }
.tpl-tile .tpl-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff; font-size: 0.72rem; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.tpl-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tpl-tile.selected {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.tpl-tile.selected::after {
  content: '✓';
  position: absolute; top: 0.35rem; right: 0.35rem;
  width: 22px; height: 22px;
  background: var(--gold);
  color: #1B2349;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}

/* Decorative SVG / gradient backgrounds for templates (no network) */
.tpl-bg-mosque    { background: radial-gradient(circle at 50% 75%, #D6336C 0%, #4A2040 50%, #1A1242 100%); }
.tpl-bg-mosque::before { content:''; position:absolute; inset:0; background:
   radial-gradient(8px 22px at 50% 55%, #F5EFE3 0%, transparent 60%),
   radial-gradient(20px 30px at 35% 65%, #F5EFE3 0%, transparent 60%),
   radial-gradient(20px 30px at 65% 65%, #F5EFE3 0%, transparent 60%); opacity:0.18; }
.tpl-bg-desert    { background: linear-gradient(180deg, #F2C078 0%, #E07A5F 55%, #5B2040 100%); }
.tpl-bg-ocean     { background: linear-gradient(180deg, #6FB8C6 0%, #3E7D9D 50%, #122E4F 100%); }
.tpl-bg-mountain  { background: linear-gradient(180deg, #B7D3D8 0%, #5D7F8A 50%, #2A3550 100%); }
.tpl-bg-bazaar    { background: linear-gradient(135deg, #D4A853 0%, #D6336C 50%, #5B2040 100%); }
.tpl-bg-city      { background: linear-gradient(180deg, #2A3858 0%, #1A2755 70%, #0A1330 100%); }
.tpl-bg-forest    { background: linear-gradient(180deg, #88B07A 0%, #3E6B4E 50%, #163524 100%); }
.tpl-bg-night     { background: radial-gradient(circle at 80% 25%, #F5EFE3 0%, transparent 8%),
                                radial-gradient(circle at 30% 35%, #F5EFE3 0%, transparent 4%),
                                linear-gradient(180deg, #0F1A42 0%, #050B1F 100%); }
.tpl-bg-souk      { background: linear-gradient(135deg, #D9A55E 0%, #A8553C 50%, #4A1D2E 100%); }
.tpl-bg-pilgrim   { background: linear-gradient(180deg, #1B2349 0%, #0E1A40 100%); position:relative; }
.tpl-bg-pilgrim::before { content:''; position:absolute; inset:0; background:
   radial-gradient(60% 50% at 50% 70%, rgba(212,168,83,0.4) 0%, transparent 70%); }
.tpl-bg-tea       { background: linear-gradient(180deg, #C68A65 0%, #6B3E2F 60%, #2A1B16 100%); }
.tpl-bg-coffee    { background: linear-gradient(180deg, #8E5D3B 0%, #4F2E1C 100%); }

.tpl-bg { position: relative; }
.tpl-bg::before, .tpl-bg::after { pointer-events: none; }

/* Hidden preview hero (added near tpl-picker by JS) */
.tpl-preview-hero {
  height: 110px;
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  overflow: hidden;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-soft);
}

/* Friendly create card override */
.friendly-create-card, .create-quick-card {
  background: linear-gradient(160deg, rgba(212,168,83,0.10) 0%, rgba(201,117,96,0.06) 100%) !important;
  border: 1px solid rgba(212,168,83,0.28) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.1rem !important;
  color: var(--text);
}
.friendly-create-title { font-family: var(--serif); color: var(--text); font-size: 1.15rem; }
.friendly-create-sub { color: var(--text-dim); font-size: 0.9rem; }
.create-choice-label { color: var(--text-dim); font-size: 0.85rem; }

/* Skeletons */
.skeleton-list { display: flex; flex-direction: column; gap: 0.75rem; }
.skeleton-list::before, .skeleton-list::after {
  content: ''; display: block;
  height: 110px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: scShimmer 1.4s linear infinite;
}
@keyframes scShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Notification badge */
.notif-badge {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}

/* Profile page subtle polish */
#panel-profile .profile-settings-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-soft);
  color: var(--gold);
}
#panel-profile .profile-settings-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#panel-profile .profile-settings-menu button { color: var(--text); }
#panel-profile .profile-settings-menu button:hover { background: rgba(212,168,83,0.1); }

/* Top-bar safe spacing */
.app-main { padding-top: 0; }

/* Hide form labels that the existing wizard expects but look noisy on dark — keep accessible */
.field small.text-muted { color: var(--muted); }

/* Light theme override (only when explicitly enabled) */
html[data-theme="light"] {
  --bg: #F5EFE3;
  --surface: #FBF7EC;
  --card: #FFFFFF;
  --text: #1B2349;
  --text-dim: #2A3550;
  --muted: #6B7A90;
  --border-soft: rgba(27,48,84,0.08);
  --border: rgba(184,135,46,0.3);
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,0.92);
}
html[data-theme="light"] .top-bar,
html[data-theme="light"] #screen-app > .top-bar {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .top-logo { color: #1B2349 !important; }
html[data-theme="light"] .top-logo .gold,
html[data-theme="light"] .top-logo > span { color: var(--gold-dk) !important; }
html[data-theme="light"] .btn-icon { color: #4F5A75; }