:root {
  --primary: #ff2d55;
  --secondary: #ff6b00;
  --grad: linear-gradient(135deg, #ff2d55 0%, #ff6b00 100%);
  --gold: #ffd700;
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e9ecef;
  --text: #1c1e21;
  --muted: #8e8e93;
  --placeholder: #b0b0b0;
  --line: rgba(28, 30, 33, 0.08);
  --border: #e6e6e6;
  --ok: #34c759;
  --ok-bg: #e8fff3;
  --ok-text: #0d6a3c;
  --err-bg: #ffe8ee;
  --err-text: #9b1c38;
  --rose: #ff2d55;
  --topbar: rgba(255, 255, 255, 0.88);
  --dock: rgba(255, 255, 255, 0.94);
  --dock-border: rgba(255, 255, 255, 0.7);
  --shell-shadow: 0 0 50px rgba(0, 0, 0, 0.06);
  --shadow: 0 18px 40px rgba(255, 45, 85, 0.12);
  --card-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
  --radius: 28px;
  --nav-h: 90px;
  --font: "Poppins", system-ui, sans-serif;
  --serif: "Poppins", system-ui, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f13;
  --surface: #17181d;
  --surface-2: #1f2026;
  --surface-3: #26272e;
  --text: #f2f3f6;
  --muted: #9aa0a6;
  --placeholder: #6d7078;
  --line: rgba(255, 255, 255, 0.10);
  --border: #2c2d34;
  --ok: #34c759;
  --ok-bg: #0f2b1d;
  --ok-text: #62e6a2;
  --err-bg: #3a1620;
  --err-text: #ff9fb1;
  --topbar: rgba(23, 24, 29, 0.88);
  --dock: rgba(23, 24, 29, 0.96);
  --dock-border: rgba(255, 255, 255, 0.08);
  --shell-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --card-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::-webkit-scrollbar { display: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  background: var(--surface);
  box-shadow: var(--shell-shadow);
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--topbar);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
}
.brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(255, 45, 85, 0.22);
}
.lang { display: flex; gap: 8px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.lang a.active { color: var(--primary); }
.icon-btn {
  width: 40px; height: 40px;
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }

.page { padding: 8px 18px calc(var(--nav-h) + 18px); animation: rise .4s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(90%, 400px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 6px;
  border-radius: 30px;
  background: var(--dock);
  border: 1px solid var(--dock-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.dock a {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--muted);
  position: relative;
  border-radius: 16px;
  font-size: 1.25rem;
}
.dock a.active { color: var(--primary); transform: translateY(-2px); }
.dock .gold { color: #ffd700 !important; }
.badge-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; background: var(--primary);
  border-radius: 50%; display: none;
}

h1, h2, .serif { font-weight: 800; }
.kicker {
  color: var(--primary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.lead { color: var(--muted); line-height: 1.55; }

.flash {
  margin: 0 18px 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--ok-bg); color: var(--ok-text); font-size: 0.88rem;
}
.flash.error { background: var(--err-bg); color: var(--err-text); }
.flash.info { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

.field {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  outline: none;
  margin-bottom: 12px;
  font-size: 1rem;
}
.field:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.08); }
.field::placeholder { color: var(--placeholder); }

.btn {
  width: 100%; border: 0; cursor: pointer; border-radius: 14px;
  padding: 15px 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:active { transform: scale(0.98); }
.btn-gold, .btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 45, 85, 0.28);
}
.btn-ghost {
  background: var(--surface); border: 1.5px dashed var(--primary); color: var(--primary);
}
.btn-dark { background: #1c1c1e; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }

.landing {
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 20px 36px;
  overflow: hidden;
}
.landing-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #ff2d55 0%, #ff6b00 100%);
}
.landing-inner { position: relative; z-index: 2; }
.landing .brand-mark {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.landing h1 {
  margin: 0 0 6px; text-align: center; color: #ff2d55; font-size: 2rem; font-weight: 800;
}
.landing .lead { text-align: center; margin: 0 0 8px; }
.glass {
  margin-top: 8px;
  padding: 26px 22px 22px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--surface-3); padding: 5px; border-radius: 14px; margin-bottom: 18px;
}
.tabs button {
  border: 0; background: transparent; padding: 10px; border-radius: 10px;
  color: var(--muted); cursor: pointer; font-weight: 700;
}
.tabs button.on { background: var(--surface); color: var(--primary); }
.hint { text-align: center; color: var(--placeholder); font-size: 0.75rem; margin-top: 12px; }
.linkish { display: block; text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 14px; }

.swipe-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.swipe-head h2 { margin: 0; font-size: 1.7rem; }
.pill {
  font-size: 0.75rem; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-weight: 600;
}
.pill-danger { background: var(--err-bg); color: var(--err-text); font-weight: 700; }
.stack { position: relative; height: 58vh; min-height: 420px; max-height: 620px; }
.card {
  position: absolute; inset: 0; border-radius: 30px; overflow: hidden;
  background: var(--surface-3); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  touch-action: none; user-select: none;
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.card .veil {
  position: absolute; inset: auto 0 0; padding: 80px 20px 22px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); color: #fff;
}
.card .name { font-size: 1.8rem; margin: 0; font-weight: 800; }
.card .meta { font-size: 0.88rem; margin-top: 4px; display: flex; gap: 10px; opacity: 0.9; flex-wrap: wrap; }
.stamp {
  position: absolute; top: 28px; font-weight: 800; letter-spacing: 0.16em;
  font-size: 1.3rem; padding: 8px 14px; border: 4px solid; border-radius: 12px;
  opacity: 0; transform: rotate(-18deg);
}
.stamp.like { left: 22px; color: #34c759; border-color: #34c759; }
.stamp.nope { right: 22px; color: #ff2d55; border-color: #ff2d55; }
.actions { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 18px; }
.round {
  width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--surface);
  color: var(--muted); font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}
.round.heart { width: 74px; height: 74px; color: #ff2d55; }
.round.super { color: #007aff; }
.empty {
  height: 58vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 10px;
}
.radar {
  width: 140px; height: 140px; border-radius: 50%;
  display: grid; place-items: center; position: relative; margin-bottom: 10px;
}
.radar::before, .radar::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(255, 45, 85, 0.25); border-radius: 50%;
  animation: pulse 2.8s infinite;
}
.radar::after { inset: 28px; animation-delay: 0.8s; }
@keyframes pulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}

.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--card-shadow);
}
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.row h4 { margin: 0; font-size: 1rem; }
.row p { margin: 3px 0 0; color: var(--muted); font-size: 0.82rem; }
.online { width: 10px; height: 10px; background: var(--ok); border-radius: 50%; display: inline-block; }
.fans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fan { height: 150px; border-radius: 20px; overflow: hidden; position: relative; background: var(--surface-2); }
.fan img { width: 100%; height: 100%; object-fit: cover; }
.fan.locked img { filter: blur(14px) brightness(0.8); }
.fan span {
  position: absolute; inset: auto 0 0; padding: 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff; font-size: 0.78rem; text-align: center;
}

.hero-profile {
  height: 230px; border-radius: 0 0 36px 36px;
  background: var(--grad);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 18px; margin: -8px -18px 18px; color: #fff;
}
.hero-profile img {
  width: 96px; height: 96px; border-radius: 28px; object-fit: cover; border: 4px solid var(--surface);
}
.hero-profile h2 { margin: 10px 0 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photos {
  display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; height: 220px; margin-bottom: 16px;
}
.slot {
  border-radius: 22px; background: var(--surface-3) center/cover no-repeat;
  border: 3px solid var(--surface); position: relative; overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.slot:first-child { grid-row: 1 / 3; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }

.chat-screen {
  position: fixed; inset: 0; max-width: 480px; margin: 0 auto;
  background: var(--bg); display: flex; flex-direction: column; z-index: 80;
}
.chat-head {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 10px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 5px 18px rgba(0, 0, 0, .04);
}
.chat-back { flex: 0 0 auto; }
.chat-person { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--text); text-decoration: none; }
.chat-head img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 15px; object-fit: cover; }
.chat-person-copy { min-width: 0; }
.chat-person-copy strong, .chat-person-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-copy strong { font-size: .82rem; }
.chat-person-copy small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.chat-person-copy small i { margin-right: 4px; color: var(--muted); font-size: .46rem; }
.chat-person-copy small i.is-online { color: var(--ok); }
.chat-person-copy small i.is-away { color: var(--muted); }
.chat-head-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.chat-head-actions .icon-btn { width: 35px; height: 35px; }
.chat-menu-toggle.is-active, .chat-head-actions .icon-btn:hover { color: var(--primary); }
.chat-menu { position: absolute; z-index: 20; top: 63px; right: 14px; display: grid; min-width: 218px; padding: 6px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 13px 30px rgba(0, 0, 0, .16); }
.chat-menu[hidden] { display: none; }
.chat-menu a, .chat-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border: 0; border-radius: 10px; color: var(--text); background: transparent; font: inherit; font-size: .67rem; text-align: left; text-decoration: none; cursor: pointer; }
.chat-menu a:hover, .chat-menu button:hover { background: var(--surface-2); }
.chat-menu a i, .chat-menu button i { width: 16px; color: var(--muted); text-align: center; }
.chat-menu .is-danger { color: #d9304f; }
.chat-menu .is-danger i { color: #d9304f; }
.chat-menu button:disabled { opacity: .55; cursor: wait; }
.thread { flex: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 76%; padding: 11px 14px; border-radius: 20px; font-size: 0.95rem; line-height: 1.4; }
.me { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.them { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.time { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 4px; text-align: right; }
.chat-empty-state { display: grid; justify-items: center; gap: 7px; margin: auto; padding: 26px; color: var(--muted); text-align: center; }
.chat-empty-state span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: 1.1rem; }
.chat-empty-state strong { color: var(--text); font-size: .83rem; }
.chat-empty-state small { font-size: .65rem; }
.chat-locked-state { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 16px 12px 25px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface); font-size: .7rem; }
.chat-locked-state i { color: var(--gold); }
.composer {
  display: flex; gap: 8px; padding: 10px 12px 24px; background: var(--surface); border-top: 1px solid var(--line);
}
.composer input {
  flex: 1; border: 0; background: var(--surface-3); border-radius: 999px; padding: 14px 16px; outline: none; font-size: 16px;
}
.composer button {
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer;
}

.panel-soft {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  color: var(--text);
}
.card-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 20px; margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  font-size: .61rem;
}
.site-footer-brand { flex: 0 0 auto; font-weight: 700; }
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--primary); }
.legal-page { max-width: 760px; margin: 0 auto; padding-bottom: 10px; }
.legal-page h1 { margin: 3px 0 8px; font-size: clamp(1.65rem, 6vw, 2.25rem); letter-spacing: -.045em; }
.legal-intro { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.legal-meta { margin: 9px 0 16px; color: var(--placeholder); font-size: .62rem; }
.legal-card { margin: 0 0 11px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); }
.legal-card h2 { margin: 0 0 7px; font-size: .86rem; letter-spacing: -.01em; }
.legal-card p, .legal-card li { color: var(--muted); font-size: .68rem; line-height: 1.62; }
.legal-card p { margin: 0 0 9px; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card ul { margin: 0; padding-left: 18px; }
.legal-card li + li { margin-top: 6px; }
.legal-card strong { color: var(--text); }
.legal-link { color: var(--primary); font-weight: 700; }
.gold-panel { background: #1a1a1a; color: #fff; border: 0; }
.gold-panel .lead { color: rgba(255, 255, 255, 0.7); }
/* Gold cards stay dark, but their controls must remain readable in light mode. */
.gold-panel .field {
  color: var(--text);
  background: var(--surface);
}
.gold-panel .field option {
  color: var(--text);
  background: var(--surface);
}
.gold-panel .field:disabled {
  color: var(--muted);
  opacity: 1;
  -webkit-text-fill-color: var(--muted);
}
.gold-panel .field:disabled::placeholder {
  color: var(--muted);
  opacity: 1;
}
.price { font-size: 2.2rem; font-weight: 800; margin: 8px 0; }
.features { list-style: none; padding: 0; margin: 0 0 16px; }
.features li { margin: 8px 0; }
#map { height: 62vh; border-radius: 24px; }
.pub-photo {
  height: 52vh; min-height: 360px; border-radius: 0 0 40px 40px;
  background: var(--surface-3) center/cover no-repeat; margin: -8px -18px 0; position: relative;
}
.thumbs { display: flex; justify-content: center; gap: 8px; margin-top: -28px; position: relative; z-index: 3; }
.thumbs b { width: 58px; height: 58px; border-radius: 16px; border: 3px solid var(--surface); background: center/cover; cursor: pointer; }
.info-card {
  margin-top: 18px; background: var(--surface); border-radius: 28px; padding: 22px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 0.85rem; }
.chips span { background: var(--surface-2); padding: 6px 12px; border-radius: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.mini { background: var(--surface-2); border: 0; border-radius: 10px; padding: 6px 8px; cursor: pointer; }

.hide-dock .dock, .hide-dock .topbar { display: none; }
.hide-dock .page { padding: 0; min-height: 100dvh; }
.hide-dock .flash { margin: 12px 16px; position: relative; z-index: 5; }

.complete-bar { width: 160px; height: 6px; background: rgba(255, 255, 255, 0.25); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.complete-bar i { display: block; height: 100%; background: #fff; border-radius: 99px; }

/* -------------------------------------------------------------------------
   Administration workspace
   ------------------------------------------------------------------------- */
.admin-body { background: var(--bg); }
.admin-body .shell { max-width: 1440px; background: var(--bg); box-shadow: none; }
.admin-body .topbar { border-bottom: 1px solid var(--line); }
.admin-body .page { padding: 28px clamp(22px, 4vw, 64px) 52px; animation: none; }
.admin-body .flash { max-width: 1240px; margin-left: auto; margin-right: auto; }
.admin-layout { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-sidebar { position: sticky; top: 82px; min-height: calc(100dvh - 134px); padding: 20px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.admin-sidebar-brand { display: flex; gap: 11px; align-items: center; padding: 4px 8px 22px; border-bottom: 1px solid var(--line); }
.admin-sidebar-brand strong { display: block; font-size: 1rem; letter-spacing: .02em; }
.admin-sidebar-brand small { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.admin-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad); box-shadow: 0 8px 18px rgba(255, 45, 85, .2); }
.admin-sidebar-nav { display: grid; gap: 5px; padding-top: 18px; }
.admin-nav-link { display: flex; align-items: center; gap: 11px; padding: 12px 11px; border-radius: 13px; color: var(--muted); font-size: .83rem; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.admin-nav-link i { width: 20px; text-align: center; font-size: .95rem; }
.admin-nav-link b { margin-left: auto; min-width: 22px; padding: 3px 6px; border-radius: 99px; background: var(--err-bg); color: var(--err-text); font-size: .68rem; text-align: center; }
.admin-nav-link:hover { color: var(--text); background: var(--surface-2); transform: translateX(2px); }
.admin-nav-link.active { color: var(--primary); background: rgba(255, 45, 85, .09); }
.admin-sidebar-footer { display: flex; align-items: center; gap: 8px; margin: auto 8px 12px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.admin-online-dot { width: 8px; height: 8px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 199, 89, .12); }
.admin-back-link { display: flex; gap: 8px; align-items: center; padding: 10px 8px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.admin-back-link:hover { color: var(--primary); }
.admin-main { min-width: 0; }
.admin-page-head { min-height: 82px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.admin-page-head h1 { margin: 3px 0 4px; font-size: clamp(1.65rem, 3vw, 2.15rem); letter-spacing: -.03em; }
.admin-eyebrow, .admin-card-kicker { margin: 0; color: var(--primary); text-transform: uppercase; letter-spacing: .13em; font-size: .63rem; font-weight: 800; }
.admin-eyebrow { display: flex; align-items: center; gap: 8px; }
.admin-subtitle { margin: 0; color: var(--muted); font-size: .84rem; }
.admin-profile-chip { display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); white-space: nowrap; }
.admin-profile-chip strong, .admin-profile-chip small { display: block; }
.admin-profile-chip strong { font-size: .78rem; }
.admin-profile-chip small { color: var(--muted); font-size: .66rem; margin-top: 2px; }
.admin-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.admin-mobile-tabs { display: none; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.admin-kpi-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-kpi { min-height: 118px; display: flex; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-kpi-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; font-size: .95rem; }
.admin-kpi span, .admin-kpi small { display: block; color: var(--muted); font-size: .7rem; }
.admin-kpi strong { display: block; margin: 4px 0 2px; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.04em; }
.admin-kpi small em { color: var(--ok); font-style: normal; font-weight: 800; }
.admin-kpi-primary { border-top: 3px solid var(--primary); }
.admin-kpi-primary .admin-kpi-icon { color: var(--primary); background: rgba(255, 45, 85, .1); }
.admin-kpi-success { border-top: 3px solid var(--ok); }
.admin-kpi-success .admin-kpi-icon { color: var(--ok); background: rgba(52, 199, 89, .1); }
.admin-kpi-gold { border-top: 3px solid #e5b900; }
.admin-kpi-gold .admin-kpi-icon { color: #b88a00; background: rgba(255, 215, 0, .17); }
.admin-kpi-danger { border-top: 3px solid #e53e3e; }
.admin-kpi-danger .admin-kpi-icon { color: #e53e3e; background: var(--err-bg); }
.admin-kpi-warning { border-top: 3px solid #dd8b00; }
.admin-kpi-warning .admin-kpi-icon { color: #c17a00; background: rgba(255, 179, 0, .13); }
.admin-kpi-blue { border-top: 3px solid #3182ce; }
.admin-kpi-blue .admin-kpi-icon { color: #3182ce; background: rgba(49, 130, 206, .11); }
.admin-kpi-neutral { border-top: 3px solid var(--muted); }
.admin-kpi-neutral .admin-kpi-icon { color: var(--muted); background: var(--surface-2); }
.admin-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.admin-content-grid-wide { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); }
.admin-card { min-width: 0; padding: 21px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.admin-card h2, .admin-section-heading h2 { margin: 4px 0 0; font-size: 1.04rem; letter-spacing: -.02em; }
.admin-card h3 { margin: 0; font-size: 1rem; }
.admin-chart-wrap { height: 245px; position: relative; }
.admin-text-link, .admin-soft-link, .admin-icon-link { color: var(--primary); font-size: .73rem; font-weight: 700; }
.admin-text-link i { margin-left: 4px; font-size: .65rem; }
.admin-icon-link { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); }
.admin-health-pill, .admin-live-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-text); background: var(--ok-bg); border-radius: 99px; padding: 6px 9px; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.admin-health-list { display: grid; gap: 4px; margin-bottom: 17px; }
.admin-health-list div { display: flex; align-items: center; gap: 9px; padding: 8px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .77rem; }
.admin-health-list div:last-child { border-bottom: 0; }
.admin-health-list i { width: 19px; color: var(--primary); text-align: center; }
.admin-health-list strong { margin-left: auto; color: var(--text); }
.admin-soft-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); }
.admin-soft-link:hover { background: rgba(255, 45, 85, .08); }
.admin-user-list { display: grid; gap: 5px; }
.admin-user-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; }
.admin-user-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-avatar-large { width: 54px; height: 54px; border-radius: 16px; }
.admin-user-main { min-width: 0; flex: 1; }
.admin-user-main strong, .admin-user-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-main strong { font-size: .8rem; }
.admin-user-main small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.admin-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 8px; border-radius: 99px; font-size: .61rem; font-weight: 800; white-space: nowrap; }
.admin-badge-admin { color: #fff; background: #6b46c1; }
.admin-badge-danger { color: var(--err-text); background: var(--err-bg); }
.admin-badge-warning { color: #9a6500; background: rgba(255, 179, 0, .15); }
.admin-badge-gold { color: #8a6500; background: rgba(255, 215, 0, .22); }
.admin-badge-neutral { color: var(--muted); background: var(--surface-2); }
.admin-badge-success { color: var(--ok-text); background: var(--ok-bg); }
.admin-report-mini { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-report-mini:last-child { border-bottom: 0; }
.admin-report-mini > div:nth-child(2) { min-width: 0; flex: 1; }
.admin-report-mini strong, .admin-report-mini small { display: block; }
.admin-report-mini strong { font-size: .79rem; }
.admin-report-mini small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.admin-report-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #e53e3e; background: var(--err-bg); font-size: .75rem; }
.admin-insight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.admin-insight-strip > div { min-width: 0; padding: 15px; background: var(--surface); }
.admin-insight-strip i { display: block; margin-bottom: 9px; color: var(--primary); }
.admin-insight-strip span, .admin-insight-strip strong { display: block; }
.admin-insight-strip span { color: var(--muted); font-size: .68rem; }
.admin-insight-strip strong { margin-top: 4px; font-size: 1rem; }
.admin-insight-strip strong small { color: var(--muted); font-size: .65rem; font-weight: 500; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 12px 0 14px; }
.admin-muted-label { color: var(--muted); font-size: .7rem; }
.admin-filter-card { padding: 14px; }
.admin-filter-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.admin-search { min-width: 230px; flex: 1; height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); color: var(--muted); }
.admin-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255, 45, 85, .08); }
.admin-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: .8rem; }
.admin-search button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: #fff; background: var(--primary); cursor: pointer; }
.admin-select { display: grid; gap: 5px; min-width: 145px; }
.admin-select span { color: var(--muted); font-size: .65rem; font-weight: 700; }
.admin-select select { height: 38px; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .74rem; outline: none; }
.admin-select select:focus { border-color: var(--primary); }
.admin-reset-link { padding: 10px 2px; color: var(--primary); font-size: .72rem; font-weight: 700; }
.admin-export-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 11px; border-radius: 10px; color: var(--ok-text); background: var(--ok-bg); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.admin-export-link:hover { filter: brightness(.97); }
.admin-activity-actor input { height: 38px; width: 120px; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; outline: none; background: var(--surface); font-size: .74rem; }
.admin-activity-actor input:focus { border-color: var(--primary); }
.admin-table-card { padding: 0; overflow: hidden; }
.admin-table-scroll { overflow-x: auto; }
.admin-table { min-width: 820px; font-size: .76rem; }
.admin-table th { padding: 15px 14px 11px; color: var(--muted); border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .08em; font-size: .61rem; font-weight: 800; }
.admin-table td { padding: 13px 14px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table-user { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.admin-table-user strong, .admin-table-user small, .admin-table-sub { display: block; }
.admin-user-link { color: inherit; }
.admin-user-link:hover strong { color: var(--primary); }
.admin-table-user small, .admin-table-sub { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.admin-profile-completion { display: block; width: 82px; height: 5px; overflow: hidden; margin-bottom: 5px; border-radius: 99px; background: var(--surface-3); }
.admin-profile-completion i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.admin-table td > small { color: var(--muted); font-size: .67rem; }
.admin-table-actions { width: 260px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions form { margin: 0; }
.admin-action-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; color: var(--text); background: var(--surface-2); cursor: pointer; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.admin-action-button:hover { transform: translateY(-1px); filter: brightness(.98); }
.admin-action-gold { color: #8a6500; background: rgba(255, 215, 0, .18); }
.admin-action-blue { color: #2465a6; background: rgba(49, 130, 206, .12); }
.admin-action-muted { color: var(--muted); }
.admin-action-success { color: var(--ok-text); background: var(--ok-bg); }
.admin-action-danger { color: var(--err-text); background: var(--err-bg); }
.admin-action-outline { color: var(--primary); border-color: rgba(255, 45, 85, .3); background: transparent; }
.admin-actions-compact { flex-wrap: nowrap; }
.admin-actions-compact .admin-action-button { width: 31px; height: 31px; justify-content: center; padding: 0; }
.admin-actions-compact .admin-action-button span { display: none; }
.admin-pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px; color: var(--muted); border-top: 1px solid var(--line); font-size: .7rem; }
.admin-pagination > div { display: flex; align-items: center; gap: 8px; }
.admin-pagination a, .admin-pagination b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: .72rem; }
.admin-pagination b { color: #fff; background: var(--primary); }
.admin-pagination a.disabled { opacity: .35; pointer-events: none; }
.admin-moderation-card { padding: 0; overflow: hidden; }
.admin-moderation-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 21px; border-bottom: 1px solid var(--line); }
.admin-moderation-user { display: flex; align-items: center; gap: 13px; min-width: 0; }
.admin-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-name-line h3 { font-size: 1rem; }
.admin-moderation-user p, .admin-moderation-user small { display: block; margin: 4px 0 0; color: var(--muted); font-size: .7rem; }
.admin-priority { color: #a56c00; background: rgba(255, 179, 0, .13); padding: 7px 9px; border-radius: 9px; font-size: .63rem; font-weight: 800; white-space: nowrap; }
.admin-moderation-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(200px, 1fr); gap: 20px; padding: 18px 21px; }
.admin-moderation-photos { display: flex; gap: 9px; flex-wrap: wrap; align-content: start; }
.admin-moderation-photo, .admin-no-photo { position: relative; width: 104px; height: 104px; overflow: hidden; border-radius: 15px; background: var(--surface-2); }
.admin-moderation-photo img { width: 100%; height: 100%; object-fit: cover; }
.admin-moderation-photo form { position: absolute; right: 7px; bottom: 7px; }
.admin-moderation-photo button { width: 27px; height: 27px; border: 0; border-radius: 8px; color: #fff; background: rgba(0, 0, 0, .7); cursor: pointer; }
.admin-no-photo { display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); font-size: .68rem; }
.admin-no-photo i { font-size: 1.2rem; }
.admin-reasons > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-reasons ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.admin-reasons li { display: flex; justify-content: space-between; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .72rem; }
.admin-reasons li small { color: var(--muted); text-align: right; font-size: .63rem; }
.admin-moderation-actions { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 21px 20px; }
.admin-moderation-actions > .admin-actions { flex: 1; }
.admin-moderation-actions > form { margin: 0; }
.admin-recent-reports { padding: 0; }
.admin-recent-reports .admin-card-head { padding: 21px 21px 0; }
.admin-reason-tag, .admin-product-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); font-size: .65rem; }
.admin-product-tag.is-gold { color: #8a6500; background: rgba(255, 215, 0, .18); }
.admin-product-tag.is-blue { color: #2465a6; background: rgba(49, 130, 206, .12); }
.admin-notice { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid; border-radius: 16px; }
.admin-notice > i { margin-top: 2px; }
.admin-notice p { flex: 1; margin: 0; font-size: .75rem; line-height: 1.5; }
.admin-notice p span { color: var(--muted); }
.admin-notice a { color: var(--primary); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.admin-notice-info { color: #2465a6; border-color: rgba(49, 130, 206, .2); background: rgba(49, 130, 206, .07); }
.admin-notice-warning { color: #9a6500; border-color: rgba(255, 179, 0, .24); background: rgba(255, 179, 0, .09); }
.admin-empty { display: grid; justify-items: center; gap: 5px; padding: 22px 12px; color: var(--muted); text-align: center; }
.admin-empty i { color: var(--primary); font-size: 1.2rem; }
.admin-empty p { margin: 0; font-size: .75rem; }
.admin-empty-large { padding: 52px 20px; }
.admin-empty-large i { font-size: 2.4rem; }
.admin-empty-large h3 { margin: 5px 0 0; }
.admin-empty-large p { max-width: 360px; }
.admin-card-symbol { color: var(--primary); font-size: 1.1rem; }
.admin-suggestion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-suggestion-grid > div { padding: 15px; border-radius: 15px; background: var(--surface-2); }
.admin-suggestion-grid i { color: var(--primary); font-size: 1.05rem; }
.admin-suggestion-grid h3 { margin: 11px 0 5px; font-size: .8rem; }
.admin-suggestion-grid p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.admin-online-indicator { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); }
.admin-system-list { display: grid; gap: 2px; }
.admin-system-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.admin-system-row:last-child { border-bottom: 0; }
.admin-system-row > div { flex: 1; min-width: 0; }
.admin-system-row strong, .admin-system-row small { display: block; }
.admin-system-row strong { font-size: .78rem; }
.admin-system-row small { margin-top: 3px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.admin-system-row > b { color: var(--text); font-size: .68rem; }
.admin-system-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; font-size: .72rem; }
.admin-system-icon.is-ok { color: var(--ok-text); background: var(--ok-bg); }
.admin-system-icon.is-warning { color: #9a6500; background: rgba(255, 179, 0, .14); }
.admin-security-card { background: linear-gradient(145deg, var(--surface), rgba(255, 45, 85, .04)); }
.admin-check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.admin-check-list li { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: .74rem; }
.admin-check-list i { color: var(--ok); }
.admin-system-summary { display: flex; align-items: center; gap: 17px; }
.admin-system-summary-icon { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: 1.2rem; }
.admin-system-summary h2 { margin-top: 5px; }
.admin-system-summary p { margin: 7px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.admin-activity-table { min-width: 980px; }
.admin-activity-table code { display: block; margin-top: 4px; color: var(--muted); font-size: .64rem; }
.admin-activity-details { max-width: 220px; color: var(--muted); font-size: .68rem; }
.admin-activity-category { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: var(--primary); background: rgba(255, 45, 85, .09); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-activity-category.is-chat { color: #3182ce; background: rgba(49, 130, 206, .11); }
.admin-activity-category.is-admin, .admin-activity-category.is-moderation { color: #9a6500; background: rgba(255, 179, 0, .13); }
.admin-activity-category.is-payment { color: var(--ok-text); background: var(--ok-bg); }
.admin-control-card form { display: grid; gap: 3px; }
.admin-setting-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.admin-setting-row:last-of-type { border-bottom: 0; }
.admin-setting-row > span:nth-child(2) { min-width: 0; flex: 1; }
.admin-setting-row strong, .admin-setting-row small { display: block; }
.admin-setting-row strong { font-size: .75rem; }
.admin-setting-row small { margin-top: 3px; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.admin-setting-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: .68rem; }
.admin-setting-row.is-danger .admin-setting-icon { color: #9a6500; background: rgba(255, 179, 0, .15); }
.admin-setting-row input { width: 38px; height: 21px; flex: 0 0 auto; appearance: none; border-radius: 99px; outline: 0; background: var(--surface-3); cursor: pointer; transition: background .2s; }
.admin-setting-row input::after { content: ""; display: block; width: 17px; height: 17px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.admin-setting-row input:checked { background: var(--primary); }
.admin-setting-row input:checked::after { transform: translateX(17px); }
.admin-control-submit { width: 100%; margin-top: 12px; }
.admin-retention-copy { margin: 0 0 17px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.admin-control-links { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-control-links form { margin: 0; }
.admin-control-links .admin-soft-link { border: 0; font: inherit; cursor: pointer; }
.admin-danger-link { color: var(--err-text); background: var(--err-bg); }

@media (max-width: 1080px) {
  .admin-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 19px; }
  .admin-sidebar { padding-left: 10px; padding-right: 10px; }
  .admin-nav-link { font-size: .76rem; }
  .admin-kpi { padding: 14px; gap: 9px; }
  .admin-kpi strong { font-size: 1.35rem; }
  .admin-kpi span { font-size: .65rem; }
}
@media (max-width: 900px) {
  .admin-body .page { padding: 20px 18px 38px; }
  .admin-layout { display: block; }
  .admin-sidebar { display: none; }
  .admin-mobile-tabs { display: flex; gap: 7px; margin: 0 0 20px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
  .admin-mobile-tabs a { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 11px; border-radius: 10px; color: var(--muted); font-size: .7rem; font-weight: 700; }
  .admin-mobile-tabs a.active { color: var(--primary); background: rgba(255, 45, 85, .09); }
  .admin-mobile-tabs i { font-size: .78rem; }
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-kpi-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-body .topbar { padding-left: 14px; padding-right: 14px; }
  .admin-body .page { padding: 17px 12px 30px; }
  .admin-page-head { margin-bottom: 15px; }
  .admin-profile-chip { padding-right: 8px; }
  .admin-profile-chip > span:last-child { display: none; }
  .admin-content-grid, .admin-content-grid-wide { grid-template-columns: 1fr; gap: 0; }
  .admin-kpi-grid-small { grid-template-columns: 1fr; }
  .admin-kpi { min-height: 102px; }
  .admin-card { padding: 16px; border-radius: 18px; }
  .admin-card-head { margin-bottom: 14px; }
  .admin-chart-wrap { height: 210px; }
  .admin-insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-insight-strip > div { padding: 13px; }
  .admin-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .admin-filter-form { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-search { grid-column: 1 / -1; min-width: 0; }
  .admin-select { min-width: 0; }
  .admin-reset-link { grid-column: 1 / -1; }
  .admin-export-link { grid-column: 1 / -1; justify-content: center; }
  .admin-moderation-head { padding: 16px; flex-direction: column; gap: 11px; }
  .admin-moderation-body { grid-template-columns: 1fr; padding: 16px; gap: 15px; }
  .admin-moderation-actions { padding: 0 16px 16px; }
  .admin-moderation-actions > .admin-actions { min-width: 100%; }
  .admin-action-button { padding: 8px 9px; }
  .admin-suggestion-grid { grid-template-columns: 1fr; }
  .admin-notice { flex-wrap: wrap; }
  .admin-notice a { margin-left: 25px; }
  .admin-system-summary { align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Profile editor & public profile
   ------------------------------------------------------------------------- */
.profile-editor { max-width: 680px; margin: 0 auto; }
.profile-editor-hero { position: relative; overflow: hidden; margin: 0 -2px 14px; border: 1px solid var(--line); border-radius: 27px; background: var(--surface); box-shadow: var(--card-shadow); }
.profile-editor-cover { position: relative; height: 140px; overflow: hidden; background: linear-gradient(125deg, #ff2d55, #ff6b00 60%, #ffd166); }
.profile-editor-cover::before, .profile-editor-cover::after, .profile-editor-cover span { content: ""; position: absolute; display: block; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.profile-editor-cover::before { width: 220px; height: 220px; top: -135px; right: 8%; }
.profile-editor-cover::after { width: 170px; height: 170px; bottom: -115px; left: 12%; }
.profile-editor-cover span:nth-child(1) { width: 80px; height: 80px; top: 23px; left: 43%; background: rgba(255, 255, 255, .10); }
.profile-editor-cover span:nth-child(2) { width: 24px; height: 24px; top: 33px; right: 20%; background: rgba(255, 255, 255, .26); }
.profile-editor-cover span:nth-child(3) { width: 48px; height: 48px; bottom: 20px; right: 8%; background: rgba(255, 255, 255, .12); }
.profile-editor-hero-content { position: relative; display: flex; align-items: flex-end; gap: 13px; padding: 0 19px 17px; }
.profile-editor-avatar-wrap { position: relative; flex: 0 0 auto; margin-top: -51px; }
.profile-editor-avatar { width: 103px; height: 103px; object-fit: cover; border: 5px solid var(--surface); border-radius: 29px; background: var(--surface-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.profile-status-dot { position: absolute; right: 1px; bottom: 7px; width: 17px; height: 17px; border: 4px solid var(--surface); border-radius: 50%; background: var(--ok); }
.profile-status-dot.is-away { background: var(--muted); }
.profile-editor-identity { min-width: 0; flex: 1; padding-bottom: 2px; }
.profile-eyebrow { margin: 0 0 3px; color: var(--primary); text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; font-weight: 800; }
.profile-editor-identity h1 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 1.32rem; letter-spacing: -.03em; }
.profile-editor-identity p:last-child { overflow: hidden; margin: 4px 0 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.profile-editor-identity p:last-child i { margin-right: 3px; color: var(--primary); }
.profile-separator { margin: 0 3px; color: var(--border); }
.profile-preview-link { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 9px 10px; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .08); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.profile-preview-link:hover { background: rgba(255, 45, 85, .14); }
.profile-completion-row { padding: 0 19px 18px; }
.profile-completion-row > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: var(--muted); font-size: .67rem; }
.profile-completion-row strong { color: var(--text); font-size: .72rem; }
.profile-completion-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.profile-completion-track i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.profile-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.profile-stat-grid > div { min-width: 0; padding: 12px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; box-shadow: var(--card-shadow); }
.profile-stat-grid i, .profile-stat-grid strong, .profile-stat-grid span { display: block; }
.profile-stat-grid i { margin-bottom: 6px; color: var(--primary); font-size: .74rem; }
.profile-stat-grid strong { font-size: .98rem; line-height: 1.1; }
.profile-stat-grid span { overflow: hidden; margin-top: 4px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.profile-editor-form { display: grid; gap: 14px; }
.profile-form-card, .profile-visibility-card { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.profile-section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 19px; }
.profile-section-number { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: .67rem; font-weight: 800; }
.profile-card-kicker { margin: 0 0 4px; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; font-size: .61rem; font-weight: 800; }
.profile-section-head h2 { margin: 0; font-size: 1.02rem; letter-spacing: -.02em; }
.profile-section-head p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.profile-counter { margin-left: auto; padding: 6px 9px; border-radius: 99px; color: var(--muted); background: var(--surface-2); font-size: .67rem; font-weight: 800; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.profile-field-label { display: block; min-width: 0; margin-bottom: 12px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.profile-field-label > span:first-child { display: block; margin: 0 0 6px; }
.profile-field-label .field { margin: 0; }
.profile-field-full { grid-column: 1 / -1; }
.profile-input-icon { position: relative; display: block; }
.profile-input-icon > i { position: absolute; top: 16px; left: 15px; z-index: 1; color: var(--primary); font-size: .8rem; }
.profile-input-icon .field { padding-left: 38px; }
.profile-bio-field { resize: vertical; min-height: 112px; line-height: 1.5; }
.profile-character-count { display: block; margin-top: 5px; color: var(--muted); text-align: right; font-size: .62rem; font-weight: 500; }
.profile-photo-grid { display: grid; grid-template-columns: 1.36fr 1fr; grid-template-rows: 112px 112px; gap: 9px; }
.profile-photo-slot { position: relative; overflow: hidden; border: 1px dashed var(--border); border-radius: 17px; background: var(--surface-2) center/cover no-repeat; }
.profile-photo-slot.is-main { grid-row: 1 / 3; }
.profile-photo-slot.has-photo { border-style: solid; }
.profile-photo-shade { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .66)); opacity: 0; transition: opacity .2s; }
.profile-photo-slot.has-photo .profile-photo-shade { opacity: 1; }
.profile-main-badge { position: absolute; top: 9px; left: 9px; z-index: 2; padding: 5px 7px; border-radius: 8px; color: #725500; background: rgba(255, 235, 161, .94); font-size: .59rem; font-weight: 800; }
.profile-photo-input { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); cursor: pointer; font-size: .65rem; font-weight: 800; text-align: center; }
.profile-photo-input i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.profile-photo-slot.has-photo .profile-photo-input { top: auto; right: auto; bottom: 7px; left: 8px; display: flex; align-items: center; gap: 6px; color: #fff; }
.profile-photo-slot.has-photo .profile-photo-input i { width: auto; height: auto; color: #fff; background: transparent; }
.profile-photo-input input { display: none; }
.profile-photo-remove { position: absolute; z-index: 3; top: 8px; right: 8px; width: 29px; height: 29px; border: 0; border-radius: 9px; color: #fff; background: rgba(0, 0, 0, .52); cursor: pointer; }
.profile-photo-remove:hover { background: #e53e3e; }
.profile-form-note { display: flex; gap: 7px; align-items: center; margin: 11px 0 0; color: var(--muted); font-size: .64rem; }
.profile-form-note i { color: var(--primary); }
.profile-visibility-card { display: flex; align-items: center; gap: 12px; }
.profile-visibility-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.profile-visibility-copy { min-width: 0; flex: 1; }
.profile-visibility-copy h2 { margin: 0; font-size: .88rem; }
.profile-visibility-copy p { margin: 4px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.profile-switch { position: relative; width: 45px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.profile-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.profile-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); transition: background .2s; }
.profile-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .18); transition: transform .2s; }
.profile-switch input:checked + span { background: var(--primary); }
.profile-switch input:checked + span::after { transform: translateX(19px); }
.profile-switch input:focus-visible + span { outline: 3px solid rgba(255, 45, 85, .2); }
.profile-form-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.profile-form-actions .btn { margin: 0; }
.profile-save-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -3px 0 2px; color: var(--muted); font-size: .64rem; }
.profile-save-hint i { color: var(--ok); }
.profile-shortcuts { display: grid; gap: 9px; margin-top: 17px; }
.profile-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--surface); box-shadow: var(--card-shadow); }
.profile-shortcut > span { display: grid; grid-template-columns: 28px 1fr; column-gap: 9px; align-items: center; min-width: 0; }
.profile-shortcut > span > i { grid-row: 1 / 3; color: var(--primary); }
.profile-shortcut strong, .profile-shortcut small { display: block; }
.profile-shortcut strong { font-size: .78rem; }
.profile-shortcut small { margin-top: 2px; color: var(--muted); font-size: .65rem; }
.profile-shortcut > i { color: var(--muted); font-size: .72rem; }
.profile-shortcut-gold { color: #fff; border-color: transparent; background: linear-gradient(135deg, #27221a, #171717); }
.profile-shortcut-gold small, .profile-shortcut-gold > i { color: rgba(255, 255, 255, .64); }
.profile-shortcut-gold > span > i { color: #ffd700; }
.profile-logout-form { margin: 15px 0 0; text-align: center; }
.profile-logout-form button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .7rem; }
.profile-logout-form button:hover { color: var(--primary); }
.profile-danger-card { margin-top: 18px; padding: 15px; border: 1px solid rgba(217, 48, 79, .2); border-radius: 18px; background: var(--err-bg); }
.profile-danger-card > div:first-child { display: flex; align-items: flex-start; gap: 10px; }
.profile-danger-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--err-text); background: rgba(217, 48, 79, .12); font-size: .7rem; }
.profile-danger-card h2 { margin: 0; color: var(--err-text); font-size: .82rem; }
.profile-danger-card p { margin: 4px 0 0; color: var(--muted); font-size: .63rem; line-height: 1.45; }
.profile-danger-card form { display: grid; gap: 8px; margin-top: 13px; }
.profile-danger-card label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .6rem; }
.profile-danger-card .field { margin: 0; background: var(--surface); }
.btn-danger { border: 0; color: #fff; background: #d9304f; box-shadow: 0 8px 16px rgba(217, 48, 79, .18); }
.btn-danger:hover { color: #fff; background: #b92441; }

.blocked-page { max-width: 620px; margin: 0 auto; }
.blocked-header { display: flex; align-items: center; gap: 12px; padding: 5px 2px 15px; }
.blocked-header > div { min-width: 0; }
.blocked-header h1 { margin: 1px 0 3px; font-size: 1.45rem; letter-spacing: -.04em; }
.blocked-header p:last-child { overflow: hidden; margin: 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.blocked-privacy { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; padding: 11px 12px; border: 1px solid rgba(52, 199, 89, .15); border-radius: 14px; color: var(--ok-text); background: var(--ok-bg); font-size: .63rem; line-height: 1.4; }
.blocked-privacy i { flex: 0 0 auto; font-size: .75rem; }
.blocked-list { display: grid; gap: 9px; }
.blocked-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.blocked-card > img { width: 45px; height: 45px; flex: 0 0 auto; object-fit: cover; border-radius: 14px; }
.blocked-card > div { min-width: 0; flex: 1; }
.blocked-card strong, .blocked-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blocked-card strong { font-size: .76rem; }
.blocked-card small { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.blocked-card form { flex: 0 0 auto; }
.blocked-card .btn { width: auto; padding: 8px 9px; font-size: .6rem; }
.blocked-empty { display: grid; justify-items: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: 20px; text-align: center; }
.blocked-empty > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.blocked-empty h2 { margin: 12px 0 4px; font-size: .85rem; }
.blocked-empty p { margin: 0; color: var(--muted); font-size: .64rem; }

.maintenance-page { display: grid; justify-items: center; max-width: 470px; margin: 16vh auto 0; padding: 30px 20px; text-align: center; }
.maintenance-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 21px; color: #fff; background: var(--grad); box-shadow: var(--shadow); font-size: 1.3rem; }
.maintenance-page .kicker { margin: 19px 0 5px; }
.maintenance-page h1 { margin: 0; font-size: 1.4rem; }
.maintenance-page .lead { max-width: 360px; margin: 10px 0 20px; font-size: .76rem; line-height: 1.55; }
.maintenance-page .btn { width: auto; }

.public-profile { margin: -8px -18px 0; }
.public-profile-hero { position: relative; height: min(67vh, 570px); min-height: 420px; overflow: hidden; background: var(--surface-3) center/cover no-repeat; color: #fff; }
.public-profile-hero.is-empty { background: var(--grad); }
.public-profile-hero.is-empty::before { content: ""; position: absolute; top: 35%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .28); border-radius: 32px; background: url("../logo.png") center/58px no-repeat; opacity: .8; }
.public-hero-backdrop { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 13, .42), transparent 33%, rgba(8, 9, 13, .82) 100%); }
.public-hero-toolbar { position: absolute; z-index: 2; top: 15px; right: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; }
.public-hero-tools { display: flex; align-items: center; gap: 8px; }
.public-icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 13px; color: #fff; background: rgba(0, 0, 0, .32); backdrop-filter: blur(10px); cursor: pointer; }
.public-icon-button:hover { background: rgba(0, 0, 0, .52); }
.public-gold-badge { display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px; border: 1px solid rgba(255, 225, 153, .42); border-radius: 12px; color: #33270f; background: linear-gradient(135deg, #ffefbd, #d4af77); box-shadow: 0 5px 14px rgba(0, 0, 0, .16); font-size: .64rem; font-weight: 800; }
.public-hero-bottom { position: absolute; z-index: 2; right: 20px; bottom: 24px; left: 20px; }
.public-hero-status { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 9px; border-radius: 99px; color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .28); backdrop-filter: blur(8px); font-size: .65rem; font-weight: 700; }
.public-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 199, 89, .2); }
.public-status-dot.is-away { background: #c7c7cc; box-shadow: none; }
.public-hero-bottom h1 { margin: 0; color: #fff; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.05; letter-spacing: -.045em; }
.public-hero-bottom p { margin: 8px 0 0; color: rgba(255, 255, 255, .82); font-size: .8rem; }
.public-hero-bottom p i { margin-right: 4px; }
.public-photo-count { position: absolute; z-index: 2; right: 17px; bottom: 23px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 9px; color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .3); font-size: .65rem; }
.public-thumbs { position: relative; z-index: 3; display: flex; gap: 8px; justify-content: center; margin: -25px 18px 0; }
.public-thumb { width: 62px; height: 62px; padding: 0; border: 3px solid var(--surface); border-radius: 16px; background: var(--surface-3) center/cover no-repeat; box-shadow: 0 6px 15px rgba(0, 0, 0, .14); cursor: pointer; opacity: .72; transition: transform .2s, opacity .2s; }
.public-thumb:hover, .public-thumb.active { transform: translateY(-3px); opacity: 1; }
.public-thumb.active { border-color: var(--primary); }
.public-profile-content { position: relative; z-index: 2; margin-top: 13px; padding: 21px 20px 34px; border-radius: 27px 27px 0 0; background: var(--surface); box-shadow: 0 -8px 27px rgba(0, 0, 0, .05); }
.public-profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.public-profile-heading h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.04em; }
.public-online-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ok-text); font-size: .66rem; font-weight: 800; }
.public-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.public-chip-list span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; color: var(--muted); background: var(--surface-2); font-size: .68rem; }
.public-chip-list i { color: var(--primary); }
.public-profile-actions { display: grid; gap: 10px; margin-top: 20px; }
.public-profile-actions .btn { margin: 0; }
.public-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.public-secondary-actions .btn { padding: 12px 10px; font-size: .76rem; }
.public-locked-action { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--surface-2); }
.public-locked-action > i { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: .75rem; }
.public-locked-action strong, .public-locked-action small { display: block; }
.public-locked-action strong { color: var(--text); font-size: .75rem; }
.public-locked-action small { margin-top: 3px; font-size: .65rem; line-height: 1.4; }
.public-info-section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.public-section-title { display: flex; align-items: center; gap: 10px; }
.public-section-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.public-section-title p { margin: 0 0 2px; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; font-weight: 800; }
.public-section-title h3 { margin: 0; font-size: .96rem; }
.public-bio { margin: 14px 0 0; color: var(--text); font-size: .85rem; line-height: 1.7; white-space: pre-line; }
.public-bio.is-muted { color: var(--muted); font-style: italic; }
.public-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.public-detail-grid > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px; border-radius: 12px; background: var(--surface-2); }
.public-detail-grid > div > i { width: 18px; color: var(--primary); text-align: center; font-size: .78rem; }
.public-detail-grid span, .public-detail-grid strong { display: block; min-width: 0; }
.public-detail-grid span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.public-detail-grid strong { overflow: hidden; margin-top: 2px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.public-privacy-note { display: flex; gap: 9px; align-items: flex-start; padding: 12px; margin-top: 22px; border-radius: 13px; color: var(--muted); background: var(--surface-2); font-size: .65rem; line-height: 1.45; }
.public-privacy-note i { margin-top: 2px; color: var(--ok); }
.public-privacy-note p { margin: 0; }

@media (max-width: 640px) {
  .profile-editor-hero { margin-right: -6px; margin-left: -6px; border-radius: 22px; }
  .profile-editor-hero-content { padding-right: 14px; padding-left: 14px; }
  .profile-completion-row { padding-right: 14px; padding-left: 14px; }
  .profile-editor-avatar { width: 86px; height: 86px; border-radius: 24px; }
  .profile-editor-avatar-wrap { margin-top: -43px; }
  .profile-preview-link span { display: none; }
  .profile-preview-link { width: 35px; height: 35px; justify-content: center; padding: 0; border-radius: 10px; }
  .profile-form-card, .profile-visibility-card { padding: 16px; border-radius: 18px; }
  .profile-section-head { gap: 9px; }
  .profile-photo-grid { grid-template-rows: 100px 100px; }
  .profile-form-actions { grid-template-columns: 1fr; }
  .public-profile { margin-right: -18px; margin-left: -18px; }
  .public-profile-hero { min-height: 420px; }
  .public-profile-content { padding-right: 17px; padding-left: 17px; }
}

/* -------------------------------------------------------------------------
   Croisée Or / premium page
   ------------------------------------------------------------------------- */
.premium-page { max-width: 760px; margin: 0 auto; }
.premium-hero { position: relative; min-height: 315px; overflow: hidden; padding: 28px 22px 21px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 90% 0%, rgba(255, 224, 132, .22), transparent 34%), linear-gradient(135deg, #17130d 0%, #2a2114 52%, #6e4e1e 135%); box-shadow: 0 20px 42px rgba(87, 57, 10, .2); }
.premium-hero.is-member { background: radial-gradient(circle at 88% 4%, rgba(255, 240, 175, .3), transparent 36%), linear-gradient(135deg, #17130d 0%, #40301a 55%, #b38332 150%); }
.premium-orbit { position: absolute; border: 1px solid rgba(255, 235, 166, .2); border-radius: 50%; pointer-events: none; }
.premium-orbit-one { width: 290px; height: 290px; top: -175px; right: -92px; }
.premium-orbit-two { width: 195px; height: 195px; top: -130px; right: -42px; border-color: rgba(255, 235, 166, .14); }
.premium-spark { position: absolute; color: rgba(255, 226, 139, .68); font-size: 1.15rem; }
.premium-spark-one { top: 72px; right: 31%; }
.premium-spark-two { top: 137px; right: 12%; font-size: .85rem; }
.premium-hero-copy { position: relative; z-index: 1; max-width: 410px; }
.premium-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255, 235, 166, .28); border-radius: 99px; color: #ffe4a2; background: rgba(255, 226, 139, .1); text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; font-weight: 800; }
.premium-hero h1 { margin: 20px 0 10px; color: #fff; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.02; letter-spacing: -.055em; }
.premium-hero h1 em { color: #ffe4a2; font-style: normal; }
.premium-hero-copy > p { max-width: 350px; margin: 0; color: rgba(255, 255, 255, .68); font-size: .78rem; line-height: 1.6; }
.premium-status-card { position: relative; z-index: 1; margin-top: 25px; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 17px; background: rgba(10, 9, 7, .34); backdrop-filter: blur(13px); }
.premium-status-head { display: flex; align-items: center; gap: 9px; }
.premium-status-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff0b5; background: rgba(255, 215, 0, .16); }
.premium-status-head small, .premium-status-head strong { display: block; }
.premium-status-head small { color: rgba(255, 255, 255, .56); font-size: .61rem; }
.premium-status-head strong { margin-top: 2px; color: #fff; font-size: .78rem; }
.premium-status-badge { margin-left: auto; padding: 5px 8px; border-radius: 99px; color: #4e3707; background: #ffe49a; font-size: .58rem; font-weight: 900; }
.premium-status-badge.is-free { color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .12); }
.premium-status-detail { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 11px; margin-top: 11px; border-top: 1px solid rgba(255, 255, 255, .12); }
.premium-status-detail span, .premium-status-detail strong { display: block; }
.premium-status-detail span { color: rgba(255, 255, 255, .5); font-size: .61rem; }
.premium-status-detail > div:first-child strong { margin-top: 3px; color: #ffe8a8; font-size: .75rem; }
.premium-days { text-align: right; }
.premium-days strong { color: #fff; font-size: 1.25rem; line-height: 1; }
.premium-days span { margin-top: 3px; }
.premium-benefits, .premium-offers { margin-top: 26px; }
.premium-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.premium-section-heading h2 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -.03em; }
.premium-section-heading > span { color: var(--muted); font-size: .66rem; text-align: right; }
.premium-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.premium-benefit-grid article { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--card-shadow); }
.premium-benefit-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #a87a12; background: rgba(255, 215, 0, .16); font-size: .78rem; }
.premium-benefit-grid h3 { margin: 11px 0 5px; font-size: .77rem; }
.premium-benefit-grid p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.premium-offer-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 12px; align-items: stretch; }
.premium-offer { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.premium-offer-main { border: 2px solid rgba(206, 158, 54, .6); background: linear-gradient(145deg, var(--surface), rgba(255, 215, 0, .07)); }
.premium-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.premium-offer-label { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; color: #7e5a08; background: rgba(255, 215, 0, .2); text-transform: uppercase; letter-spacing: .06em; font-size: .58rem; font-weight: 900; }
.premium-offer-label.is-blue { color: #2465a6; background: rgba(49, 130, 206, .11); }
.premium-offer-period { color: var(--muted); font-size: .63rem; }
.premium-offer h3 { margin: 18px 0 3px; font-size: 1.17rem; }
.premium-offer-tagline { margin: 0; color: var(--muted); font-size: .71rem; }
.premium-price { display: flex; align-items: center; gap: 7px; margin: 17px 0 16px; color: var(--text); }
.premium-price > strong { font-size: 3.05rem; line-height: .85; letter-spacing: -.08em; }
.premium-price sup, .premium-pack-price sup { top: -.85em; position: relative; font-size: .42em; letter-spacing: -.03em; }
.premium-price > span { color: var(--muted); font-size: .78rem; line-height: 1.1; }
.premium-price small { font-size: .62rem; }
.premium-feature-list { display: grid; gap: 9px; margin: 0 0 19px; padding: 0; list-style: none; }
.premium-feature-list li { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: .71rem; }
.premium-feature-list i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #b88a19; font-size: .52rem; }
.premium-offer-button { color: #33270f; background: linear-gradient(135deg, #ffe9a4, #d3a844); box-shadow: 0 10px 19px rgba(185, 132, 23, .2); }
.premium-offer-button:hover { filter: brightness(1.04); }
.premium-active-box { display: flex; align-items: center; gap: 8px; padding: 11px; border-radius: 12px; color: var(--ok-text); background: var(--ok-bg); }
.premium-active-box > i { font-size: 1rem; }
.premium-active-box strong, .premium-active-box small { display: block; }
.premium-active-box strong { font-size: .72rem; }
.premium-active-box small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.premium-demo-note { display: flex; align-items: center; gap: 5px; margin: 9px 0 0; color: var(--muted); font-size: .6rem; }
.premium-demo-note i { color: var(--primary); }
.premium-unavailable { display: flex; align-items: center; gap: 7px; padding: 10px; border-radius: 11px; color: var(--muted); background: var(--surface-2); font-size: .65rem; }
.premium-pack { }
.premium-pack-number { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 11px; }
.premium-pack-number strong { color: #2465a6; font-size: 2.55rem; letter-spacing: -.07em; line-height: .9; }
.premium-pack-number span { color: var(--muted); font-size: .68rem; }
.premium-pack-price { display: flex; align-items: baseline; gap: 7px; }
.premium-pack-price strong { font-size: 1.55rem; letter-spacing: -.05em; }
.premium-pack-price span { color: var(--muted); font-size: .65rem; }
.premium-pack-description { min-height: 58px; margin: 13px 0 18px; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.premium-pack-button { padding: 13px 14px; font-size: .76rem; box-shadow: none; }
.premium-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 0 4px; margin-top: 22px; border-top: 1px solid var(--line); }
.premium-trust > div { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.premium-trust > div > i { color: var(--primary); font-size: .75rem; }
.premium-trust strong, .premium-trust small { display: block; }
.premium-trust strong { font-size: .62rem; }
.premium-trust small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
.premium-footer-note { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 15px 0 0; color: var(--muted); font-size: .62rem; text-align: center; }
.premium-footer-note i { color: var(--primary); }

@media (max-width: 640px) {
  .premium-page { margin-right: -2px; margin-left: -2px; }
  .premium-hero { padding: 24px 17px 17px; border-radius: 22px; }
  .premium-hero h1 { margin-top: 17px; }
  .premium-benefits, .premium-offers { margin-top: 22px; }
  .premium-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .premium-section-heading > span { text-align: left; }
  .premium-offer-grid { grid-template-columns: 1fr; }
  .premium-offer { padding: 17px; }
  .premium-pack-description { min-height: auto; }
  .premium-trust { gap: 6px; }
  .premium-trust > div { display: block; text-align: center; }
  .premium-trust > div > i { display: block; margin-bottom: 5px; }
}

/* -------------------------------------------------------------------------
   Encounters / inbox
   ------------------------------------------------------------------------- */
.encounters-page { max-width: 680px; margin: 0 auto; }
.encounters-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 142px; overflow: hidden; padding: 22px 20px; border-radius: 25px; color: #fff; background: radial-gradient(circle at 95% 0%, rgba(255, 255, 255, .2), transparent 36%), linear-gradient(135deg, #ff2d55, #c72972 56%, #6d45bb); box-shadow: 0 18px 36px rgba(255, 45, 85, .2); }
.encounters-hero::before, .encounters-hero::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; pointer-events: none; }
.encounters-hero::before { width: 180px; height: 180px; top: -115px; right: -50px; }
.encounters-hero::after { width: 115px; height: 115px; bottom: -78px; left: 35%; }
.encounters-hero > div { position: relative; z-index: 1; }
.encounters-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: rgba(255, 255, 255, .78); text-transform: uppercase; letter-spacing: .13em; font-size: .61rem; font-weight: 800; }
.encounters-hero h1 { margin: 0; color: #fff; font-size: 2rem; line-height: 1; letter-spacing: -.045em; }
.encounters-hero p:last-child { margin: 8px 0 0; color: rgba(255, 255, 255, .76); font-size: .72rem; }
.encounters-discover { position: relative; z-index: 1; width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .24); border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .13); backdrop-filter: blur(8px); font-size: 1.05rem; }
.encounters-discover:hover { background: rgba(255, 255, 255, .22); }
.encounters-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 17px; }
.encounters-summary > div { min-width: 0; padding: 12px 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; box-shadow: var(--card-shadow); }
.encounters-summary-icon { width: 28px; height: 28px; display: grid; place-items: center; margin: 0 auto 6px; border-radius: 9px; font-size: .7rem; }
.encounters-summary-icon.is-pink { color: var(--primary); background: rgba(255, 45, 85, .1); }
.encounters-summary-icon.is-blue { color: #3182ce; background: rgba(49, 130, 206, .11); }
.encounters-summary-icon.is-gold { color: #a87a12; background: rgba(255, 215, 0, .16); }
.encounters-summary strong, .encounters-summary small { display: block; }
.encounters-summary strong { font-size: 1.05rem; line-height: 1.1; }
.encounters-summary small { overflow: hidden; margin-top: 4px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.encounters-toolbar { margin-bottom: 22px; }
.encounters-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.encounters-tabs a { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1 0 auto; padding: 9px 9px; border-radius: 10px; color: var(--muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.encounters-tabs a.active { color: var(--primary); background: var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, .05); }
.encounters-tabs b { min-width: 17px; padding: 2px 4px; border-radius: 99px; color: inherit; background: var(--surface-2); font-size: .57rem; text-align: center; }
.encounters-tabs a.active b { color: #fff; background: var(--primary); }
.encounters-tools-row { display: flex; gap: 8px; margin-top: 10px; }
.encounters-search { min-width: 0; height: 42px; display: flex; align-items: center; flex: 1; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface); }
.encounters-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255, 45, 85, .07); }
.encounters-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .76rem; }
.encounters-search button { display: none; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-2); cursor: pointer; }
.encounters-search button.is-visible { display: grid; place-items: center; }
.encounters-filter { height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface); }
.encounters-filter i { font-size: .67rem; }
.encounters-filter select { max-width: 86px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .68rem; font-weight: 700; }
.encounters-section { margin-bottom: 25px; }
.encounters-section-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.encounters-section-head p { margin: 0 0 3px; color: var(--primary); text-transform: uppercase; letter-spacing: .11em; font-size: .59rem; font-weight: 800; }
.encounters-section-head h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.03em; }
.encounters-section-head > span { color: var(--muted); font-size: .65rem; }
.encounters-list { display: grid; gap: 8px; }
.encounter-card { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); transition: transform .2s, border-color .2s, box-shadow .2s; }
.encounter-card:hover { transform: translateY(-2px); border-color: rgba(255, 45, 85, .22); box-shadow: 0 10px 22px rgba(255, 45, 85, .08); }
.encounter-card[hidden], .like-card[hidden] { display: none; }
.encounter-avatar-wrap { position: relative; flex: 0 0 auto; }
.encounter-avatar { width: 56px; height: 56px; object-fit: cover; border-radius: 18px; background: var(--surface-2); }
.encounter-online { position: absolute; right: -1px; bottom: 1px; width: 13px; height: 13px; border: 3px solid var(--surface); border-radius: 50%; background: var(--ok); }
.encounter-online.is-away { background: var(--muted); }
.encounter-card-copy { min-width: 0; flex: 1; }
.encounter-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.encounter-card-title strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.encounter-card-title time { flex: 0 0 auto; color: var(--muted); font-size: .62rem; }
.encounter-card-copy p { overflow: hidden; margin: 4px 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.encounter-card-copy > small { color: var(--muted); font-size: .61rem; }
.encounter-card-copy > small i { margin-right: 3px; color: var(--primary); }
.encounter-unread { min-width: 20px; padding: 4px 5px; border-radius: 99px; color: #fff; background: var(--primary); font-size: .58rem; font-weight: 800; text-align: center; }
.encounter-arrow { margin-left: 1px; color: var(--muted); font-size: .68rem; }
.encounters-likes-section { padding-top: 2px; }
.likes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.like-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--card-shadow); transition: transform .2s, box-shadow .2s; }
.like-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 45, 85, .09); }
.like-card-photo { position: relative; height: 137px; overflow: hidden; background: var(--surface-2); }
.like-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.like-card.is-locked .like-card-photo img { filter: blur(13px) saturate(.75); transform: scale(1.1); }
.like-card-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(transparent 25%, rgba(0, 0, 0, .5)); }
.like-card-overlay i { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 11px; background: rgba(0, 0, 0, .36); font-size: .8rem; }
.like-card-content { padding: 10px 11px 12px; }
.like-card-content strong, .like-card-content small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-card-content strong { font-size: .76rem; }
.like-card-content small { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.likes-unlock-cta { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 12px; border: 1px solid rgba(206, 158, 54, .34); border-radius: 14px; color: #8a6500; background: rgba(255, 215, 0, .11); font-size: .68rem; font-weight: 800; }
.likes-unlock-cta span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 215, 0, .2); }
.likes-unlock-cta strong { flex: 1; }
.likes-unlock-cta > i { font-size: .65rem; }
.encounter-empty { display: grid; justify-items: center; padding: 27px 15px; border: 1px dashed var(--border); border-radius: 18px; background: var(--surface); text-align: center; }
.encounter-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: 1.1rem; }
.encounter-empty h3 { margin: 11px 0 4px; font-size: .86rem; }
.encounter-empty p { max-width: 300px; margin: 0 0 14px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.encounter-empty .btn { width: auto; padding: 11px 13px; font-size: .7rem; }
.encounter-empty-compact { padding: 21px 15px; }
.encounter-empty-compact h3 { margin-bottom: 3px; }
.encounter-empty-compact p { margin-bottom: 0; }
.encounter-filter-empty { display: none; margin: 8px 0 0; padding: 12px; border-radius: 12px; color: var(--muted); background: var(--surface-2); font-size: .68rem; text-align: center; }
.encounter-filter-empty.is-visible { display: block; }
.encounters-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: .61rem; text-align: center; }
.encounters-privacy i { color: var(--ok); }

@media (max-width: 640px) {
  .encounters-hero { min-height: 132px; padding: 20px 16px; border-radius: 22px; }
  .encounters-hero h1 { font-size: 1.8rem; }
  .encounters-summary { gap: 6px; }
  .encounters-summary > div { padding-right: 4px; padding-left: 4px; }
  .encounters-tools-row { gap: 6px; }
  .encounters-filter { padding-right: 7px; padding-left: 7px; }
  .encounters-filter select { max-width: 72px; }
  .like-card-photo { height: 124px; }
  .encounters-privacy { align-items: flex-start; line-height: 1.4; }
}

/* -------------------------------------------------------------------------
   Preferences / discovery filters
   ------------------------------------------------------------------------- */
.preferences-page { max-width: 680px; margin: 0 auto; }
.preferences-hero { position: relative; display: flex; align-items: center; gap: 12px; min-height: 116px; overflow: hidden; padding: 20px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .2), transparent 35%), linear-gradient(135deg, #ff2d55, #7b45b6); box-shadow: 0 17px 34px rgba(255, 45, 85, .17); }
.preferences-hero::after { content: ""; position: absolute; right: -53px; bottom: -104px; width: 210px; height: 210px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.preferences-hero > div { position: relative; z-index: 1; min-width: 0; }
.preferences-hero-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(255, 255, 255, .14); font-size: 1rem; }
.preferences-eyebrow { margin: 0 0 4px; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .14em; font-size: .59rem; font-weight: 800; }
.preferences-hero h1 { margin: 0; color: #fff; font-size: 1.55rem; letter-spacing: -.04em; }
.preferences-hero p:last-child { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: .69rem; }
.preferences-plan { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 7px 8px; border-radius: 99px; color: rgba(255, 255, 255, .82); background: rgba(0, 0, 0, .18); font-size: .59rem; font-weight: 800; white-space: nowrap; }
.preferences-plan.is-gold { color: #5c4206; background: #ffe59e; }
.preferences-summary { display: flex; align-items: center; gap: 11px; margin: 14px 0 17px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--card-shadow); }
.preferences-summary-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.preferences-summary-copy { min-width: 0; flex: 1; }
.preferences-summary-copy > span, .preferences-summary-copy > small { display: block; }
.preferences-summary-copy > span { color: var(--muted); font-size: .62rem; }
.preferences-summary-copy strong { display: block; margin-top: 3px; font-size: .83rem; }
.preferences-summary-copy strong b { font-weight: 800; }
.preferences-summary-copy em { color: var(--primary); font-style: normal; }
.preferences-summary-copy small { overflow: hidden; margin-top: 3px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.preferences-summary-link { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: var(--surface-2); font-size: .68rem; }
.preferences-form { display: grid; gap: 14px; }
.preferences-card { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.preferences-section-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.preferences-section-number { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--primary); background: rgba(255, 45, 85, .1); font-size: .66rem; font-weight: 800; }
.preferences-section-number.is-gold { color: #ffe39a; background: rgba(255, 215, 0, .16); }
.preferences-section-head > div { min-width: 0; flex: 1; }
.preferences-section-head p { margin: 0 0 4px; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; font-weight: 800; }
.preferences-section-head h2 { margin: 0; font-size: 1.02rem; letter-spacing: -.025em; }
.preferences-section-head small { display: block; margin-top: 4px; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.preferences-unlock-badge, .preferences-lock-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 6px 8px; border-radius: 99px; color: var(--ok-text); background: var(--ok-bg); font-size: .59rem; font-weight: 800; white-space: nowrap; }
.preferences-unlock-badge.is-gold { color: #6f510b; background: #ffe59e; }
.preferences-lock-badge { color: #ffe39a; background: rgba(255, 215, 0, .14); }
.preferences-control-block, .preferences-age-block { padding: 14px; border-radius: 15px; background: var(--surface-2); }
.preferences-age-block { margin-top: 10px; }
.preferences-label-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.preferences-label-line label { color: var(--text); font-size: .74rem; font-weight: 800; }
.preferences-label-line output { color: var(--primary); font-size: .72rem; font-weight: 800; }
.preferences-range { width: 100%; height: 6px; display: block; margin: 0; appearance: none; border-radius: 99px; outline: none; background: linear-gradient(to right, var(--primary) 0 var(--range-progress, 25%), var(--surface-3) var(--range-progress, 25%) 100%); cursor: pointer; }
.preferences-range::-webkit-slider-thumb { width: 20px; height: 20px; appearance: none; border: 4px solid var(--surface); border-radius: 50%; background: var(--primary); box-shadow: 0 2px 7px rgba(255, 45, 85, .3); }
.preferences-range::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid var(--surface); border-radius: 50%; background: var(--primary); box-shadow: 0 2px 7px rgba(255, 45, 85, .3); }
.preferences-range-scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: .58rem; }
.preferences-helper { display: flex; gap: 6px; align-items: center; margin: 11px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.preferences-helper i { color: var(--primary); }
.preferences-age-fields { display: flex; align-items: end; gap: 10px; }
.preferences-age-fields label { min-width: 0; flex: 1; color: var(--muted); font-size: .62rem; font-weight: 700; }
.preferences-age-fields .field { margin: 5px 0 0; background: var(--surface); }
.preferences-age-separator { padding-bottom: 14px; color: var(--muted); font-size: .7rem; }
.preferences-presets { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 15px; }
.preferences-presets > span { color: var(--muted); font-size: .63rem; font-weight: 700; }
.preferences-presets > div { display: flex; gap: 5px; }
.preferences-presets button { padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: .61rem; font-weight: 700; }
.preferences-presets button:hover, .preferences-presets button.active { border-color: rgba(255, 45, 85, .35); color: var(--primary); background: rgba(255, 45, 85, .07); }
.preferences-gold-card { overflow: hidden; color: #fff; border-color: transparent; background: linear-gradient(145deg, #1c1a17, #131313); }
.preferences-gold-card .preferences-section-head h2 { color: #fff; }
.preferences-gold-card .preferences-section-head small { color: rgba(255, 255, 255, .58); }
.preferences-gold-card .preferences-section-head p { color: #ffe39a; }
.preferences-gold-fields { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 11px; }
.preferences-gold-fields.is-blurred { opacity: .84; filter: blur(1px); }
.preferences-field-label { display: block; min-width: 0; margin-bottom: 11px; color: rgba(255, 255, 255, .72); font-size: .65rem; font-weight: 700; }
.preferences-field-label > span { display: block; margin-bottom: 5px; }
.preferences-gold-card .field { margin: 0; color: #202124; background: #fff; border-color: rgba(255, 255, 255, .26); }
.preferences-gold-card .field option { color: #202124; background: #fff; }
.preferences-gold-card .field:disabled { opacity: 1; color: #6d6d72; -webkit-text-fill-color: #6d6d72; }
.preferences-field-full { grid-column: 1 / -1; }
.preferences-lock-overlay { position: absolute; z-index: 3; inset: 84px 0 0; display: grid; place-items: center; align-content: center; gap: 5px; padding: 18px; border-radius: 0 0 22px 22px; color: #fff; background: rgba(8, 8, 9, .64); backdrop-filter: blur(7px); text-align: center; }
.preferences-lock-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 12px; color: #ffe39a; background: rgba(255, 215, 0, .16); }
.preferences-lock-overlay strong { font-size: .79rem; }
.preferences-lock-overlay small { max-width: 250px; color: rgba(255, 255, 255, .63); font-size: .64rem; line-height: 1.45; }
.preferences-lock-overlay b { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 7px 9px; border-radius: 9px; color: #33270f; background: #ffe49a; font-size: .63rem; }
.preferences-lock-overlay:hover { background: rgba(8, 8, 9, .73); }
.preferences-tip-card { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border: 1px solid rgba(255, 45, 85, .14); border-radius: 18px; background: linear-gradient(135deg, rgba(255, 45, 85, .06), var(--surface)); }
.preferences-tip-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.preferences-tip-card p { margin: 0 0 3px; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; font-weight: 800; }
.preferences-tip-card h2 { margin: 0; font-size: .83rem; }
.preferences-tip-card small { display: block; margin-top: 5px; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.preferences-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.preferences-actions .btn { margin: 0; }
.preferences-save-note { display: flex; justify-content: center; align-items: center; gap: 6px; margin: -2px 0 0; color: var(--muted); font-size: .62rem; text-align: center; }
.preferences-save-note i { color: var(--ok); }

@media (max-width: 640px) {
  .preferences-hero { padding: 18px 15px; border-radius: 22px; }
  .preferences-hero-icon { width: 39px; height: 39px; }
  .preferences-plan { align-self: center; padding: 6px; font-size: 0; }
  .preferences-plan i { font-size: .75rem; }
  .preferences-summary { padding: 11px; }
  .preferences-card { padding: 16px; border-radius: 18px; }
  .preferences-section-head { gap: 9px; }
  .preferences-section-head > .preferences-unlock-badge, .preferences-lock-badge { font-size: 0; padding: 7px; }
  .preferences-section-head > .preferences-unlock-badge i, .preferences-lock-badge i { font-size: .68rem; }
  .preferences-presets { align-items: flex-start; flex-direction: column; }
  .preferences-presets > div { width: 100%; }
  .preferences-presets button { flex: 1; }
  .preferences-lock-overlay { top: 82px; border-radius: 0 0 18px 18px; }
}

/* -------------------------------------------------------------------------
   Discovery / swipe deck
   ------------------------------------------------------------------------- */
.discovery-page { max-width: 680px; margin: 0 auto; }
.discovery-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 126px; overflow: hidden; padding: 20px; border-radius: 25px; color: #fff; background: radial-gradient(circle at 91% -10%, rgba(255, 255, 255, .22), transparent 36%), linear-gradient(135deg, #ff2d55, #d72b73 55%, #5144b7); box-shadow: 0 18px 36px rgba(255, 45, 85, .18); }
.discovery-hero::before, .discovery-hero::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; pointer-events: none; }
.discovery-hero::before { width: 190px; height: 190px; top: -124px; right: -52px; }
.discovery-hero::after { width: 115px; height: 115px; right: 31%; bottom: -82px; }
.discovery-hero-copy { position: relative; z-index: 1; min-width: 0; }
.discovery-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: rgba(255, 255, 255, .77); text-transform: uppercase; letter-spacing: .13em; font-size: .6rem; font-weight: 800; }
.discovery-hero h1 { margin: 0; color: #fff; font-size: 1.9rem; line-height: 1; letter-spacing: -.05em; }
.discovery-hero-copy > p:last-child { margin: 8px 0 0; color: rgba(255, 255, 255, .77); font-size: .7rem; }
.discovery-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; align-self: flex-start; }
.discovery-bottom-filter { display: flex; align-items: center; gap: 8px; margin: 15px 0 12px; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--card-shadow); }
.discovery-bottom-filter-title { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 0 4px; color: var(--primary); font-size: .63rem; font-weight: 800; }
.discovery-bottom-filter-options { display: flex; gap: 3px; min-width: 0; flex: 1; overflow-x: auto; padding: 2px; border-radius: 10px; background: var(--surface-2); }
.discovery-bottom-filter-options a { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 7px 8px; border-radius: 8px; color: var(--muted); font-size: .61rem; font-weight: 800; white-space: nowrap; }
.discovery-bottom-filter-options a i { font-size: .5rem; }
.discovery-bottom-filter-options a:nth-child(2) i { color: var(--ok); }
.discovery-bottom-filter-options a:nth-child(3) i { color: var(--primary); }
.discovery-bottom-filter-options a.active { color: var(--primary); background: var(--surface); box-shadow: 0 2px 5px rgba(0, 0, 0, .05); }
.discovery-bottom-filter-adjust { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--muted); background: var(--surface-2); font-size: .62rem; }
.discovery-bottom-filter-adjust:hover { color: var(--primary); }
.discovery-preferences { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .23); border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .13); backdrop-filter: blur(8px); font-size: .8rem; }
.discovery-preferences:hover { background: rgba(255, 255, 255, .23); }
.discovery-gold-badge, .discovery-quota-badge { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 10px; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.discovery-gold-badge { color: #554008; background: #ffe39a; }
.discovery-quota-badge { color: #fff; background: rgba(0, 0, 0, .21); }
.discovery-quota-badge strong { font-size: .82rem; }
.discovery-quota-badge small { color: rgba(255, 255, 255, .76); font-size: .58rem; }
.discovery-toolbar { margin: 15px 0 12px; }
.discovery-modes { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
.discovery-modes a { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto; padding: 9px 11px; border-radius: 10px; color: var(--muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.discovery-modes a i { font-size: .62rem; }
.discovery-modes a:nth-child(2) i { color: var(--ok); }
.discovery-modes a:nth-child(3) i { color: var(--primary); }
.discovery-modes a.active { color: var(--primary); background: var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, .05); }
.discovery-modes b { min-width: 17px; padding: 2px 4px; border-radius: 99px; color: inherit; background: var(--surface-2); font-size: .56rem; text-align: center; }
.discovery-modes a.active b { color: #fff; background: var(--primary); }
.discovery-result-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px 0; color: var(--muted); font-size: .64rem; }
.discovery-result-line a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-weight: 800; }
.discovery-deck-wrap { margin-top: 8px; }
.discovery-deck-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 3px 8px; color: var(--muted); font-size: .61rem; }
.discovery-deck-label span:first-child { color: var(--primary); font-weight: 800; }
.discovery-deck-label i { margin-right: 3px; }
.discovery-stack { position: relative; height: min(58vh, 560px); min-height: 400px; max-height: 560px; overflow: hidden; border-radius: 29px; }
.discovery-card { position: absolute; inset: 0; overflow: hidden; border-radius: 29px; background: var(--surface-3); box-shadow: 0 16px 36px rgba(0, 0, 0, .15); touch-action: none; user-select: none; will-change: transform, opacity; backface-visibility: hidden; transition: opacity .2s ease, transform .2s ease; }
.discovery-card.is-top { opacity: 1; }
.discovery-card.is-behind { opacity: .82; transform: scale(.975); }
.discovery-card.is-leaving { pointer-events: none; }
.discovery-card.is-pending { cursor: wait; }
.discovery-card-photo { position: absolute; inset: 0; }
.discovery-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 31%, rgba(0, 0, 0, .75) 100%); }
.discovery-card-photo > img { width: 100%; height: 100%; object-fit: cover; }
.discovery-card-top { position: absolute; z-index: 1; top: 15px; right: 15px; left: 15px; display: flex; align-items: center; justify-content: space-between; }
.discovery-card-index { padding: 7px 9px; border-radius: 9px; color: rgba(255, 255, 255, .88); background: rgba(0, 0, 0, .28); backdrop-filter: blur(7px); font-size: .62rem; font-weight: 800; }
.discovery-online-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(20, 108, 54, .7); backdrop-filter: blur(7px); font-size: .61rem; font-weight: 800; }
.discovery-online-pill i { color: #7ff0a7; font-size: .43rem; }
.discovery-profile-link { position: absolute; z-index: 2; top: 62px; right: 15px; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; color: #fff; background: rgba(0, 0, 0, .29); backdrop-filter: blur(7px); font-size: .72rem; }
.discovery-profile-link:hover { background: rgba(0, 0, 0, .53); }
.discovery-card .stamp { z-index: 4; top: 75px; padding: 8px 12px; font-size: 1.05rem; }
.discovery-card .stamp.like { left: 20px; }
.discovery-card .stamp.nope { right: 20px; }
.discovery-card-veil { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 100px 20px 21px; color: #fff; }
.discovery-card-name { display: inline-block; color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.045em; }
.discovery-card-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.discovery-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: .78rem; }
.discovery-card-meta span { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .88); }
.discovery-card-meta i { color: rgba(255, 255, 255, .72); font-size: .68rem; }
.discovery-member-tag { padding: 4px 7px; border-radius: 7px; color: #3f2e04 !important; background: #ffe39a; font-size: .62rem; font-weight: 800; }
.discovery-member-tag i { color: #80600a; }
.discovery-card-note { margin: 10px 0 0; color: rgba(255, 255, 255, .67); font-size: .65rem; }
.discovery-actions { display: flex; justify-content: center; align-items: center; gap: 13px; margin: 17px 0 13px; }
.discovery-round { position: relative; width: 55px; height: 55px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface); box-shadow: 0 8px 19px rgba(0, 0, 0, .1); cursor: pointer; font-size: 1.05rem; transition: transform .2s, box-shadow .2s; }
.discovery-round:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(0, 0, 0, .14); }
.discovery-round:active { transform: scale(.94); }
.discovery-round.discovery-pass { color: #e53e3e; }
.discovery-round.discovery-undo { color: #8e8e93; }
.discovery-round.discovery-undo.is-locked { color: var(--muted); background: var(--surface-2); font-size: .82rem; }
.discovery-round.discovery-like { width: 70px; height: 70px; color: #fff; background: var(--grad); box-shadow: 0 11px 23px rgba(255, 45, 85, .28); font-size: 1.35rem; }
.discovery-round.discovery-like:hover { box-shadow: 0 14px 27px rgba(255, 45, 85, .36); }
.discovery-round.discovery-super { color: #3182ce; }
.discovery-round.discovery-super b { position: absolute; right: -2px; bottom: -1px; min-width: 18px; padding: 3px 4px; border: 2px solid var(--surface); border-radius: 99px; color: #fff; background: #3182ce; font-size: .55rem; }
.discovery-quota { padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--card-shadow); }
.discovery-quota-copy { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .66rem; }
.discovery-quota-copy i { margin-right: 4px; color: var(--primary); }
.discovery-quota-copy strong { color: var(--text); font-size: .72rem; }
.discovery-quota-track { height: 6px; overflow: hidden; margin: 8px 0 6px; border-radius: 99px; background: var(--surface-3); }
.discovery-quota-track i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.discovery-quota > small { color: var(--muted); font-size: .6rem; }
.discovery-gold-note { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border: 1px solid rgba(206, 158, 54, .3); border-radius: 14px; color: #8a6500; background: rgba(255, 215, 0, .1); font-size: .66rem; }
.discovery-gold-note i { color: #bd8f19; }
.discovery-gold-note span { flex: 1; }
.discovery-gold-note a { color: var(--primary); font-weight: 800; }
.discovery-empty { position: relative; display: grid; justify-items: center; min-height: 500px; overflow: hidden; padding: 75px 19px 35px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); text-align: center; box-shadow: var(--card-shadow); }
.discovery-empty-orbit { width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 26px; border: 1px solid rgba(255, 45, 85, .19); border-radius: 50%; box-shadow: 0 0 0 23px rgba(255, 45, 85, .035), 0 0 0 47px rgba(255, 45, 85, .025); }
.discovery-empty-orbit img { width: 68px; height: 68px; object-fit: cover; border: 4px solid var(--surface); border-radius: 23px; box-shadow: 0 8px 20px rgba(255, 45, 85, .18); }
.discovery-empty-icon { position: absolute; top: 33px; right: calc(50% - 69px); width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--primary); box-shadow: 0 5px 12px rgba(255, 45, 85, .25); font-size: .72rem; }
.discovery-empty h2 { margin: 0 0 6px; font-size: 1.18rem; }
.discovery-empty p { max-width: 330px; margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.discovery-empty-actions { display: flex; gap: 8px; width: 100%; justify-content: center; margin-top: 20px; }
.discovery-empty-actions .btn { width: auto; padding: 12px 14px; font-size: .7rem; }
.discovery-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px 0 0; color: var(--muted); font-size: .61rem; text-align: center; }
.discovery-privacy i { color: var(--ok); }

@media (max-width: 640px) {
  .discovery-hero { min-height: 120px; padding: 18px 15px; border-radius: 22px; }
  .discovery-hero h1 { font-size: 1.76rem; }
  .discovery-hero-actions { gap: 5px; }
  .discovery-quota-badge { padding-right: 7px; padding-left: 7px; }
  .discovery-stack { height: min(52vh, 430px); min-height: 360px; max-height: 430px; }
  .discovery-card-veil { padding-right: 16px; padding-bottom: 18px; padding-left: 16px; }
  .discovery-card-name { font-size: 1.65rem; }
  .discovery-actions { gap: 9px; }
  .discovery-round { width: 51px; height: 51px; }
  .discovery-round.discovery-like { width: 65px; height: 65px; }
  .discovery-empty { min-height: 460px; }
  .discovery-empty-actions { flex-direction: column; align-items: stretch; }
  .discovery-empty-actions .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   Crossings map
   ------------------------------------------------------------------------- */
.map-page { max-width: 760px; margin: 0 auto; }
.map-hero { position: relative; display: flex; align-items: center; gap: 12px; min-height: 112px; overflow: hidden; padding: 19px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 94% 0%, rgba(255, 255, 255, .2), transparent 35%), linear-gradient(135deg, #ff2d55, #7b45b6 70%, #3d54b8); box-shadow: 0 17px 34px rgba(255, 45, 85, .16); }
.map-hero::after { content: ""; position: absolute; right: -48px; bottom: -104px; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 50%; }
.map-hero-icon { position: relative; z-index: 1; width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .24); border-radius: 14px; background: rgba(255, 255, 255, .13); font-size: 1rem; }
.map-hero > div:nth-child(2) { position: relative; z-index: 1; min-width: 0; flex: 1; }
.map-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: rgba(255, 255, 255, .74); text-transform: uppercase; letter-spacing: .13em; font-size: .58rem; font-weight: 800; }
.map-hero h1 { margin: 0; color: #fff; font-size: 1.5rem; letter-spacing: -.04em; }
.map-hero p:last-child { overflow: hidden; margin: 4px 0 0; color: rgba(255, 255, 255, .76); text-overflow: ellipsis; white-space: nowrap; font-size: .67rem; }
.map-count-badge { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 53px; padding: 8px 7px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(0, 0, 0, .17); }
.map-count-badge strong { font-size: 1.05rem; line-height: 1; }
.map-count-badge small { margin-top: 4px; color: rgba(255, 255, 255, .72); font-size: .52rem; text-align: center; }
.map-status-bar { display: flex; align-items: center; gap: 9px; margin: 13px 0; padding: 11px 12px; border: 1px solid rgba(52, 199, 89, .15); border-radius: 15px; background: var(--ok-bg); }
.map-status-bar.is-warning { border-color: rgba(255, 179, 0, .2); background: rgba(255, 179, 0, .1); }
.map-status-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--ok-text); background: rgba(52, 199, 89, .12); font-size: .7rem; }
.map-status-bar.is-warning .map-status-icon { color: #9a6500; background: rgba(255, 179, 0, .16); }
.map-status-bar p { min-width: 0; flex: 1; margin: 0; }
.map-status-bar strong, .map-status-bar small { display: block; }
.map-status-bar strong { color: var(--ok-text); font-size: .69rem; }
.map-status-bar.is-warning strong { color: #936000; }
.map-status-bar small { overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.map-status-action { display: inline-flex; align-items: center; gap: 5px; padding: 7px 8px; border: 0; border-radius: 9px; color: #8a6500; background: rgba(255, 179, 0, .17); cursor: pointer; font-size: .63rem; font-weight: 800; white-space: nowrap; }
.map-status-action i { font-size: .56rem; }
.map-frame { position: relative; height: min(70vh, 680px); min-height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: var(--surface-3); box-shadow: 0 16px 34px rgba(0, 0, 0, .1); isolation: isolate; }
.map-canvas { width: 100%; height: 100%; min-height: 500px; z-index: 1; }
.map-control-stack { position: absolute; z-index: 500; top: 15px; right: 15px; display: grid; gap: 7px; }
.map-floating-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .78); border-radius: 12px; color: #36343a; background: rgba(255, 255, 255, .9); box-shadow: 0 5px 15px rgba(0, 0, 0, .12); cursor: pointer; backdrop-filter: blur(8px); }
.map-floating-button:hover { color: var(--primary); background: #fff; }
.map-floating-button.is-loading i { animation: mapSpin .8s linear infinite; }
@keyframes mapSpin { to { transform: rotate(360deg); } }
.map-legend { position: absolute; z-index: 500; right: 15px; bottom: 15px; left: 15px; display: flex; gap: 11px; width: fit-content; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 11px; color: #37343a; background: rgba(255, 255, 255, .9); box-shadow: 0 5px 15px rgba(0, 0, 0, .1); font-size: .61rem; backdrop-filter: blur(8px); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend-dot { width: 8px; height: 8px; display: inline-block; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.map-legend-dot.is-you { background: var(--primary); }
.map-legend-dot.is-crossing { background: #3182ce; }
.map-empty-overlay { position: absolute; z-index: 450; top: 50%; left: 50%; display: grid; justify-items: center; gap: 6px; width: min(78%, 290px); padding: 19px 16px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .7); border-radius: 19px; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 28px rgba(0, 0, 0, .13); text-align: center; backdrop-filter: blur(12px); }
.map-empty-overlay > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: rgba(255, 45, 85, .1); }
.map-empty-overlay strong { font-size: .8rem; }
.map-empty-overlay small { color: var(--muted); font-size: .64rem; line-height: 1.45; }
.map-empty-overlay a { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--primary); font-size: .65rem; font-weight: 800; }
.custom-cluster-icon { display: flex; align-items: center; justify-content: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff2d55, #ff6b00); box-shadow: 0 6px 16px rgba(255, 45, 85, .4); font-weight: 800; }
.custom-cluster-icon > div { display: grid; place-items: center; width: 100%; height: 100%; }
.map-user-marker { width: 28px; height: 28px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #ff2d55, #ff6b00); box-shadow: 0 0 0 4px rgba(255, 45, 85, .22), 0 0 14px rgba(255, 45, 85, .7); }
.map-you-popup { display: flex; align-items: center; gap: 6px; padding: 4px; color: #25232a; font-size: .75rem; }
.map-you-popup i { color: #ff2d55; }
.map-popup-card { display: grid; justify-items: center; gap: 5px; min-width: 125px; padding: 5px 4px 4px; color: #15151a; }
.map-popup-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.map-popup-card strong { max-width: 150px; overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.map-popup-card a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 9px; color: #fff; background: var(--grad); font-size: .64rem; font-weight: 700; }
.map-popup-card a i { font-size: .55rem; }
.map-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.map-insight-grid article { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--card-shadow); }
.map-insight-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: .65rem; }
.map-insight-icon.is-pink { color: var(--primary); background: rgba(255, 45, 85, .1); }
.map-insight-icon.is-blue { color: #3182ce; background: rgba(49, 130, 206, .11); }
.map-insight-icon.is-gold { color: #a87a12; background: rgba(255, 215, 0, .16); }
.map-insight-grid strong, .map-insight-grid small { display: block; }
.map-insight-grid strong { font-size: .8rem; }
.map-insight-grid small { overflow: hidden; margin-top: 2px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; }
.map-footer-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: .61rem; text-align: center; }
.map-footer-note i { color: var(--ok); }

@media (max-width: 640px) {
  .map-hero { padding: 17px 14px; border-radius: 22px; }
  .map-hero-icon { width: 39px; height: 39px; }
  .map-count-badge { min-width: 48px; }
  .map-frame { height: min(72vh, 620px); min-height: 465px; border-radius: 21px; }
  .map-canvas { min-height: 465px; }
  .map-status-bar { align-items: flex-start; }
  .map-status-action { align-self: center; }
  .map-insight-grid { gap: 6px; }
  .map-insight-grid article { display: block; padding: 10px 6px; text-align: center; }
  .map-insight-icon { margin: 0 auto 5px; }
  .map-insight-grid small { font-size: .55rem; }
  .map-footer-note { align-items: flex-start; line-height: 1.4; }
}