/* ==========================================================================
   DEPTH — bespoke cinematic components
   Hand-written where Tailwind utilities alone can't express the effect
   cleanly (layered atmosphere, scroll reveals, drawers, command palette).
   ========================================================================== */

/* ---------- Nav ---------- */
/* NOTE: deliberately a plain media query here rather than Tailwind's
   `hidden`/`sm:` utilities — those live in a CSS cascade layer, and our
   custom .btn-depth classes are unlayered (see tailwind-input.css for why),
   so an unlayered display:inline-flex would always beat a layered
   display:none regardless of breakpoint. Keeping this rule unlayered too
   (same file "weight class" as main.css/tailwind-input.css) makes normal
   source-order/specificity rules apply instead. */
@media (max-width: 639px) {
  .nav-discord-btn { display: none; }
}
.depth-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 22px 0;
  transition: padding 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.depth-nav.is-scrolled {
  padding: 14px 0;
  background: rgb(5 5 6 / 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgb(255 255 255 / 0.08);
}
.depth-nav-link {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-mist);
  transition: color 0.2s ease;
}
.depth-nav-link:hover, .depth-nav-link.active { color: var(--color-paper); }
.depth-nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-signal), var(--color-current));
  border-radius: 2px;
}

/* ---------- Hero ---------- */
/* Colored atmospheric header for individual store category pages
   (VIP/Character/Gang Pack/Accessories/etc.) — a radial glow in that
   category's accent color behind the header, so each page reads as its
   own "world" instead of a plain title-on-black page. Lighter-weight
   than the homepage's full .depth-hero (no grain/lines/scroll-cue), this
   is a header treatment, not a full-viewport hero moment. */
.category-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 0 60px;
  text-align: center;
}
.category-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px 380px at 50% 0%, var(--hero-accent-glow, rgb(99 102 241 / 0.28)), transparent 70%);
}
.category-hero-icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  background: rgb(255 255 255 / 0.06);
  border: 1.5px solid var(--hero-accent, rgb(255 255 255 / 0.16));
  box-shadow: 0 0 30px -8px var(--hero-accent-glow, transparent);
  font-size: 1.4rem;
}

/* Bordered/glowing product card, reused across the category pages —
   same visual language as the store tiles (colored border + top accent
   bar + colored hover glow) so a plain card grid never comes back. */
.product-card {
  position: relative;
  background: var(--color-bg-card);
  border: 1.5px solid var(--card-accent, var(--color-border));
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 16px 32px -20px var(--card-accent, transparent);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--card-accent-bright, var(--card-accent));
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 24px 45px -16px var(--card-accent-glow, transparent);
}
.product-card-bar {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--card-accent, #6366f1), transparent);
  margin: -28px -28px 22px;
}

.depth-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.depth-hero-bg {
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 22% 18%, rgb(99 102 241 / 0.22), transparent 60%),
    radial-gradient(55% 45% at 82% 8%, rgb(236 72 153 / 0.14), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgb(34 211 238 / 0.10), transparent 65%),
    linear-gradient(180deg, #050506 0%, #0a0a0d 55%, #050506 100%);
  animation: depth-drift 24s ease-in-out infinite alternate;
}
@keyframes depth-drift {
  0% { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
.depth-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(5 5 6 / 0.85) 100%);
  pointer-events: none;
}
.depth-hero-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.025) 0px, rgb(255 255 255 / 0.025) 1px, transparent 1px, transparent 64px);
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}

.depth-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(3.2rem, 9vw, 8rem);
}
.depth-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--color-mist);
}

/* Live status pill, woven into the hero rather than a stat card */
.depth-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  backdrop-filter: blur(12px);
}
.depth-status-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 3px rgb(52 211 153 / 0.18), 0 0 10px rgb(52 211 153 / 0.6);
  animation: depth-pulse 2s ease-in-out infinite;
}
.depth-status-dot.offline {
  background: var(--color-smoke);
  box-shadow: none;
  animation: none;
}
@keyframes depth-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Lifestyle / story cards ---------- */
.story-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 40px 32px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgb(255 255 255 / 0.08);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.story-card:hover { transform: translateY(-6px); border-color: rgb(255 255 255 / 0.22); }
.story-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--story-gradient, linear-gradient(160deg, #16171b, #0b0c0f));
  transition: transform 0.6s ease;
  z-index: -2;
}
.story-card:hover::before { transform: scale(1.06); }
.story-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgb(5 5 6 / 0.75) 100%);
  z-index: -1;
}
.story-card-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-mist);
  margin-bottom: 8px;
}
.story-card h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin-bottom: 10px;
}

/* ---------- Store category tiles — big visual cards, not icon rows ---------- */
.store-tile {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  padding: 30px;
  min-height: 300px;
  border: 1.5px solid var(--tile-accent, rgb(255 255 255 / 0.08));
  /* Resting elevation is already layered — a tight dark contact shadow
     plus a wider soft one, not a single flat drop-shadow — so the card
     reads as sitting above the page even before any interaction. */
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 2px 6px rgb(0 0 0 / 0.5),
    0 20px 40px -20px var(--tile-accent, transparent);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}
/* JS (public/js/tilt.js) drives the live rotateX/rotateY/translateZ per
   mouse position via inline style — the transition above is what makes
   that feel smooth rather than snapping. Falls back to just the shadow
   change below with no tilt at all if JS is off or prefers-reduced-motion. */
.store-tile:hover {
  border-color: var(--tile-accent-bright, rgb(255 255 255 / 0.4));
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 10px 20px rgb(0 0 0 / 0.55),
    0 34px 60px -16px var(--tile-accent-glow, rgb(255 255 255 / 0.3));
}
.store-tile::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--tile-gradient, linear-gradient(160deg, #16171b, #0b0c0f));
  transition: transform 0.6s ease;
  z-index: -3;
}
.store-tile:hover::before { transform: scale(1.06); }
.store-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 10%, rgb(5 5 6 / 0.8) 100%);
  z-index: -1;
}
/* Layering for the tilt: the accent bar and icon sit further "forward"
   in Z-space than the text, so tilting the card creates real parallax
   between them instead of everything moving as one flat plane. */
.store-tile-accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--tile-accent, #6366f1), transparent);
  z-index: 2;
  transform: translateZ(35px);
}
.store-tile-icon-bg {
  position: absolute;
  top: -12%; right: -8%;
  font-size: 11rem;
  opacity: 0.14;
  transform: translateZ(60px) rotate(-10deg);
  pointer-events: none;
  z-index: -2;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
}
.store-tile:hover .store-tile-icon-bg { transform: translateZ(80px) rotate(-6deg) scale(1.08); opacity: 0.22; }
.store-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  transform: translateZ(25px);
}
.store-tile-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.5);
}
.store-tile-price {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
  border: 1px solid rgb(255 255 255 / 0.16);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.store-tile-body {
  position: relative;
  margin-top: 130px;
  transform: translateZ(25px);
}
.store-tile h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0 0 8px;
}
.store-tile p { margin: 0 0 16px; font-size: 0.92rem; }
.store-tile-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700;
  color: var(--color-paper);
}
.store-tile-cta i { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.store-tile:hover .store-tile-cta i { transform: translateX(5px); }
@media (max-width: 640px) {
  .store-tile { min-height: 240px; }
  .store-tile-body { margin-top: 80px; }
  .store-tile-icon-bg { font-size: 8rem; }
}

/* ---------- Editorial store hub tiles ---------- */
.hub-tile {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: linear-gradient(160deg, var(--color-graphite), var(--color-ink));
  padding: 32px 28px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  /* Top-aligned, not space-between — with only an icon + text block as
     flex children, space-between stretched the gap between them based on
     how long each card's description happened to be, so 1-line and
     2-line cards sat at different heights across the same grid row. */
  justify-content: flex-start;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease;
}
.hub-tile > i { margin-bottom: 18px; }
.hub-tile:hover { transform: translateY(-5px); border-color: rgb(255 255 255 / 0.2); }
.hub-tile-glow {
  position: absolute; top: -30%; right: -20%;
  width: 260px; height: 260px; border-radius: 999px;
  background: var(--tile-glow, radial-gradient(circle, rgb(99 102 241 / 0.35), transparent 70%));
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- Store menu — editorial list, not a card grid ---------- */
.store-menu { border-top: 1px solid rgb(255 255 255 / 0.08); }
.store-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 8px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  overflow: hidden;
  transition: padding-left 0.35s cubic-bezier(0.22,1,0.36,1);
}
.store-menu-row::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--row-glow, rgb(99 102 241 / 0.10)), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.store-menu-row:hover { padding-left: 22px; }
.store-menu-row:hover::before { opacity: 1; }
.store-menu-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-smoke);
  width: 34px;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.store-menu-row:hover .store-menu-num { color: var(--color-current); }
.store-menu-icon {
  width: 46px; height: 46px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  flex-shrink: 0;
  font-size: 1.05rem;
}
.store-menu-body { flex: 1; min-width: 0; }
.store-menu-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.store-menu-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-mist);
}
.store-menu-meta {
  display: flex; align-items: center; gap: 18px;
  flex-shrink: 0;
}
.store-menu-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-paper);
  white-space: nowrap;
}
.store-menu-arrow {
  color: var(--color-smoke);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
}
.store-menu-row:hover .store-menu-arrow { transform: translateX(6px); color: var(--color-current); }
@media (max-width: 640px) {
  .store-menu-row { gap: 16px; padding: 20px 4px; }
  .store-menu-body h3 { font-size: 1.05rem; }
  .store-menu-price { display: none; }
}

/* ---------- Cart drawer ---------- */
.cart-backdrop {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.6);
  z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-charcoal);
  border-left: 1px solid rgb(255 255 255 / 0.08);
  z-index: 91;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.cart-drawer.open { transform: translateX(0); }
@media (max-width: 640px) {
  .cart-drawer { width: 100vw; top: auto; height: 82vh; border-radius: 20px 20px 0 0; border-left: none; border-top: 1px solid rgb(255 255 255 / 0.08); transform: translateY(100%); }
  .cart-drawer.open { transform: translateY(0); }
}
.cart-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.cart-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 55;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--color-paper); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
  cursor: pointer;
}
.cart-fab-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--color-ember); color: #fff;
  width: 20px; height: 20px; border-radius: 999px;
  font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
}
.cart-fab.bump { animation: cart-fab-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cart-fab-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-fab.bump { animation: none; }
}

/* ---------- Command palette (search) ---------- */
.cmdk-backdrop {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.65);
  z-index: 95; display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
}
.cmdk-backdrop.open { display: flex; }
.cmdk-panel {
  width: 100%; max-width: 560px;
  background: var(--color-charcoal);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.7);
}
.cmdk-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgb(255 255 255 / 0.08);
  padding: 18px 20px; font-size: 1rem; color: var(--color-paper);
}
.cmdk-input:focus { outline: none; }
.cmdk-results { max-height: 360px; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 10px; cursor: pointer; font-size: 0.9rem;
}
.cmdk-item:hover, .cmdk-item.active { background: rgb(255 255 255 / 0.06); }
.cmdk-empty { padding: 30px 20px; text-align: center; color: var(--color-smoke); font-size: 0.88rem; }

/* ---------- Sticky mobile purchase CTA ---------- */
.sticky-buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgb(5 5 6 / 0.92); backdrop-filter: blur(14px);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding: 12px 16px; display: none;
}
@media (max-width: 760px) { .sticky-buy-bar.show { display: flex; gap: 12px; align-items: center; } }

/* ---------- Skeleton loader ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-ash) 0%, var(--color-ash-light) 50%, var(--color-ash) 100%);
  background-size: 200% 100%;
  animation: skeleton-sheen 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Donate amount picker (/donate) ---------- */
.amount-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 20px;
}
.amount-pill {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.03);
  color: var(--color-paper);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.amount-pill:hover { border-color: rgb(236 72 153 / 0.5); }
.amount-pill.is-active {
  background: var(--color-ember);
  border-color: var(--color-ember);
  color: #1a0a12;
}
.amount-custom-row {
  display: none;
  align-items: center;
  gap: 10px;
  margin: -8px 0 20px;
}
.amount-custom-row.show { display: flex; }
.amount-custom-row span { color: var(--color-mist); font-weight: 600; }
.amount-custom-row input {
  width: 140px;
  background: rgb(255 255 255 / 0.04);
  border: 1.5px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--color-paper);
  font-size: 0.95rem;
}
.amount-custom-row input:focus { outline: none; border-color: var(--color-ember); }
.no-perks-note {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--color-mist);
}
.no-perks-note a { color: var(--color-current); }

/* ---------- Connected Discord account chip (nav) ---------- */
.nav-account {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
  color: var(--color-mist);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-account:hover { border-color: rgb(255 58 82 / 0.4); color: #ff8a97; }
.nav-account img { display: block; }

/* ---------- Guides: command table + job pill groups (/guides) ---------- */
.cmd-table { width: 100%; border-collapse: collapse; }
.cmd-table td { padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); vertical-align: top; }
.cmd-table tr:last-child td { border-bottom: none; }
.cmd-table .cmd-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-current);
  font-weight: 600;
  white-space: nowrap;
  padding-right: 20px;
  font-size: 0.92rem;
}
.cmd-table .cmd-desc { color: var(--color-text-secondary); font-size: 0.92rem; }
.job-group { margin-bottom: 36px; }
.job-group:last-child { margin-bottom: 0; }
.job-group-how { color: var(--color-smoke); font-size: 0.85rem; margin: 4px 0 16px; }
.job-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.job-pill {
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: var(--color-text-secondary);
}
a.job-pill { text-decoration: none; color: var(--color-paper); border-color: rgb(34 211 238 / 0.3); }
a.job-pill:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

/* ---------- Application status badges (/apply/status) ---------- */
.badge-neutral { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); color: var(--color-mist); }
.badge-info { background: rgb(99 102 241 / 0.12); border-color: rgb(99 102 241 / 0.35); color: #a5b4fc; }
.badge-warning { background: rgb(201 168 118 / 0.14); border-color: rgb(201 168 118 / 0.4); color: var(--color-gold); }
.badge-success { background: rgb(76 175 80 / 0.14); border-color: rgb(76 175 80 / 0.4); color: #8de292; }
.badge-danger { background: rgb(255 58 82 / 0.12); border-color: rgb(255 58 82 / 0.35); color: #ff8a97; }

.app-card { margin-bottom: 16px; }
.app-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.app-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.82rem; color: var(--color-text-secondary); margin-bottom: 12px; }
.app-meta strong { color: var(--color-text); font-weight: 600; }
.app-reason { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; font-size: 0.88rem; margin-bottom: 12px; }
.app-next-step { font-size: 0.85rem; color: var(--color-text-secondary); }

/* ---------- Community photo grid (/community) ---------- */
.community-photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.community-photo { display: flex; flex-direction: column; }
.community-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: 1 1 auto; min-height: 0; }
.community-photo-body { padding: 16px 18px; }
/* Panoramas span two columns on /community; the grid collapses to 1-2 columns
   on smaller screens, so only widen where there are 3 columns to span. */
.community-grid { grid-auto-flow: dense; }
@media (min-width: 961px) {
  .community-photo.wide { grid-column: span 2; }
  .community-photo.wide img { aspect-ratio: 8 / 3; }
}

/* ==========================================================================
   NOTIFICATION CENTER — nav bell + dropdown. Reuses existing color tokens
   only (no new design tokens), same as every other nav control.
   ========================================================================== */
.notif-wrap { position: relative; }
.notif-bell {
  background: none; border: 1px solid rgb(255 255 255 / 0.12); color: var(--color-mist);
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.notif-badge {
  position: absolute; top: -4px; right: -4px; background: #ff3a52; color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 1; min-width: 16px; height: 16px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-panel {
  position: absolute; top: calc(100% + 12px); right: 0; width: 340px; max-width: calc(100vw - 32px);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease; z-index: 60;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 0.85rem;
}
.notif-mark-all { background: none; border: none; color: var(--color-secondary); font-size: 0.75rem; cursor: pointer; padding: 0; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--color-text-secondary); font-size: 0.85rem; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgb(99 102 241 / 0.06); }
.notif-item-title { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.notif-item-title .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); flex: 0 0 auto; }
.notif-item-body { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 4px; }
.notif-item-time { font-size: 0.7rem; color: var(--color-smoke); margin-top: 6px; }

.announcement-banner { background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); padding: 10px 0; font-size: 0.85rem; }
.announcement-banner[hidden] { display: none; }
.announcement-banner button {
  background: none; border: none; color: var(--color-text-secondary); font-size: 1.2rem;
  line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto;
}