:root {
  --bg: #f4f8ff;
  --bg-soft: #eaf2ff;
  --glass: rgba(255, 255, 255, 0.74);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --primary: #0b73ff;
  --primary-rgb: 11, 115, 255;
  --accent: #10b981;
  --accent-rgb: 16, 185, 129;
  --cian: #12c8ff;
  --text: #0a1f3d;
  --muted: #5a6f8f;
  --border: rgba(10, 46, 95, 0.10);
  --border-strong: rgba(10, 46, 95, 0.22);
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #16a34a;
  --shadow: 0 12px 32px rgba(10, 35, 84, 0.12);
  --shadow-sm: 0 4px 16px rgba(10, 35, 84, 0.08);
  --shadow-lg: 0 20px 48px rgba(10, 35, 84, 0.16);
  --radius: 18px;
  --radius-sm: 12px;
  --space: 12px;
  --topbar-h: 40px;
  --bottom-h: 72px;
  --container: 1080px;
  --tr: 220ms cubic-bezier(.2,.8,.2,1);
  --tr-fast: 140ms cubic-bezier(.2,.8,.2,1);

  /* Backward compatibility aliases */
  --bg-card: var(--glass);
  --bg-glass: var(--glass);
  --text-2: var(--muted);
  --text-3: #7e90ab;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-sm);
  --r-lg: var(--radius);
  --r-xl: 22px;
  --r-full: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --z-nav: 70;
  --z-modal: 9900;
  --z-toast: 120;
}

.ranking-section .card {
  overflow: hidden;
}

.ranking-shell {
  display: grid;
  gap: 12px;
}

.ranking-shell-head {
  display: grid;
  gap: 8px;
}

.ranking-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ranking-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
  color: var(--muted);
}

.ranking-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.ranking-toggle {
  min-width: 148px;
  min-height: 40px;
  justify-content: center;
}

.ranking-list {
  display: grid;
  gap: 10px;
}

.ranking-section.is-expanded .ranking-list {
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.ranking-card {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(134, 158, 196, .22);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.92));
  box-shadow: 0 8px 20px rgba(8, 32, 63, .08);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ranking-card:hover,
.ranking-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .34);
  box-shadow: 0 18px 38px rgba(8, 32, 63, .12);
  outline: none;
}

.ranking-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ranking-card-badge {
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .04));
  color: var(--primary);
  font-size: .8rem;
  font-weight: 800;
}

.ranking-card-copy {
  min-width: 0;
}

.ranking-card-copy h3 {
  margin: 0;
  font-size: .8rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-card-copy p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: .62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-card-percent {
  padding: 4px 7px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.site-ranking-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ranking-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ranking-card-meta {
  display: grid;
  gap: 7px;
}

.ranking-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(134, 158, 196, .18);
  background: rgba(255,255,255,.74);
  line-height: 1;
}

.ranking-chip small {
  font-size: .54rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
}

.ranking-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ranking-chip-icon svg,
.ranking-vote-btn-short svg {
  width: 12px;
  height: 12px;
}

.ranking-chip strong {
  font-size: .66rem;
  color: var(--heading);
}

.ranking-chip--positive {
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.88));
}

.ranking-stat,
.site-ranking-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(134, 158, 196, .18);
  background: rgba(255,255,255,.72);
}

.ranking-stat--positive,
.site-ranking-metric--positive {
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.9));
}

.ranking-stat span,
.site-ranking-metric-label {
  font-size: .66rem;
  color: var(--muted);
  line-height: 1.2;
}

.ranking-stat strong,
.site-ranking-metric-value {
  font-size: .9rem;
  line-height: 1;
  color: var(--heading);
  white-space: nowrap;
}

.site-ranking-metric-value {
  font-size: 1.24rem;
}

.ranking-progress-wrap,
.site-ranking-progress {
  display: grid;
  gap: 4px;
}

.ranking-progress-head,
.site-ranking-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .6rem;
  color: var(--muted);
}

.ranking-progress,
.site-ranking-progress-bar {
  height: 5px;
}

.ranking-card-actions,
.site-ranking-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ranking-vote-btn,
.site-ranking-btn {
  min-width: 0;
  min-height: 28px;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  font-size: .68rem;
  padding: 4px 8px;
}

.ranking-vote-btn-short {
  display: none;
  align-items: center;
  justify-content: center;
}

.ranking-vote-btn--negative.is-active,
.site-ranking-btn.ranking-vote-btn--negative.is-active {
  background: linear-gradient(135deg, #e85d75, #c83d57);
  border-color: rgba(200, 61, 87, .35);
  color: #fff;
}

.site-ranking-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
}

.site-ranking-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 10px;
  align-items: start;
}

.site-ranking-copy h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.site-ranking-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: .84rem;
}

.site-ranking-actions {
  align-self: start;
  justify-self: end;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 6px;
}

.site-ranking-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 700;
  min-width: 0;
}

.site-ranking-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.site-ranking-metric {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 14px;
}

.site-ranking-metric-label {
  font-size: .73rem;
  line-height: 1.15;
}

.site-ranking-metric-value {
  font-size: 1.65rem;
  line-height: 1;
}

.site-ranking-progress {
  gap: 6px;
}

.site-ranking-progress-head {
  font-size: .72rem;
}

.site-ranking-progress-bar {
  height: 7px;
}

.site-ranking-status {
  margin-top: 0;
  padding: 9px 11px;
  font-size: .78rem;
}

.admin-layout-controls {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(134, 158, 196, .2);
  background: rgba(255,255,255,.6);
}

.admin-toggle-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-toggle-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

[data-theme="dark"] .ranking-shell.card,
:root:not([data-theme="light"]) .ranking-shell.card {
  background: linear-gradient(180deg, rgba(18, 28, 46, .88), rgba(14, 22, 38, .82));
  border-color: rgba(120, 160, 220, .18);
}

[data-theme="dark"] .ranking-search,
:root:not([data-theme="light"]) .ranking-search {
  background: rgba(255,255,255,.04);
  border-color: rgba(120, 160, 220, .18);
}

[data-theme="dark"] .ranking-search input,
:root:not([data-theme="light"]) .ranking-search input {
  color: #e6eef8;
}

[data-theme="dark"] .ranking-card,
:root:not([data-theme="light"]) .ranking-card {
  background: linear-gradient(180deg, rgba(21, 33, 54, .94), rgba(18, 28, 44, .9));
  border-color: rgba(120, 160, 220, .16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}

[data-theme="dark"] .site-ranking-card,
:root:not([data-theme="light"]) .site-ranking-card {
  background: linear-gradient(180deg, rgba(22, 34, 56, .96), rgba(16, 25, 41, .94));
  border-color: rgba(120, 160, 220, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .site-ranking-copy h3,
[data-theme="dark"] .site-ranking-metric-value,
[data-theme="dark"] .site-ranking-progress-head strong,
:root:not([data-theme="light"]) .site-ranking-copy h3,
:root:not([data-theme="light"]) .site-ranking-metric-value,
:root:not([data-theme="light"]) .site-ranking-progress-head strong {
  color: #f4f7fb;
}

[data-theme="dark"] .site-ranking-copy p,
[data-theme="dark"] .site-ranking-metric-label,
[data-theme="dark"] .site-ranking-progress-head span,
:root:not([data-theme="light"]) .site-ranking-copy p,
:root:not([data-theme="light"]) .site-ranking-metric-label,
:root:not([data-theme="light"]) .site-ranking-progress-head span {
  color: #9cb0c8;
}

[data-theme="dark"] .site-ranking-metric,
:root:not([data-theme="light"]) .site-ranking-metric {
  background: rgba(255,255,255,.06);
  border-color: rgba(120, 160, 220, .12);
}

[data-theme="dark"] .site-ranking-metric--positive,
:root:not([data-theme="light"]) .site-ranking-metric--positive {
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(255,255,255,.05));
}

[data-theme="dark"] .site-ranking-btn.btn-glass,
:root:not([data-theme="light"]) .site-ranking-btn.btn-glass {
  background: rgba(255,255,255,.06);
  border-color: rgba(120,160,220,.18);
  color: #e8eef7;
}

[data-theme="dark"] .site-ranking-btn.btn-primary,
:root:not([data-theme="light"]) .site-ranking-btn.btn-primary {
  box-shadow: 0 8px 18px rgba(11, 115, 255, .24);
}

[data-theme="dark"] .ranking-card-copy h3,
[data-theme="dark"] .ranking-stat strong,
[data-theme="dark"] .ranking-card-percent,
:root:not([data-theme="light"]) .ranking-card-copy h3,
:root:not([data-theme="light"]) .ranking-stat strong,
:root:not([data-theme="light"]) .ranking-card-percent {
  color: #f4f7fb;
}

[data-theme="dark"] .ranking-card-copy p,
[data-theme="dark"] .ranking-progress-head,
[data-theme="dark"] .ranking-stat span,
:root:not([data-theme="light"]) .ranking-card-copy p,
:root:not([data-theme="light"]) .ranking-progress-head,
:root:not([data-theme="light"]) .ranking-stat span {
  color: #9ab0c8;
}

[data-theme="dark"] .ranking-stat,
:root:not([data-theme="light"]) .ranking-stat {
  background: rgba(255,255,255,.04);
  border-color: rgba(120, 160, 220, .12);
}

[data-theme="dark"] .ranking-chip,
:root:not([data-theme="light"]) .ranking-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(120, 160, 220, .14);
}

[data-theme="dark"] .ranking-chip strong,
:root:not([data-theme="light"]) .ranking-chip strong {
  color: #f4f7fb;
}

[data-theme="dark"] .ranking-chip small,
:root:not([data-theme="light"]) .ranking-chip small {
  color: #9ab0c8;
}

[data-theme="dark"] .ranking-chip--positive,
:root:not([data-theme="light"]) .ranking-chip--positive {
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(255,255,255,.05));
}

[data-theme="dark"] .ranking-stat--positive,
:root:not([data-theme="light"]) .ranking-stat--positive {
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(255,255,255,.04));
}

@media (max-width: 720px) {
  .ranking-toolbar,
  .site-ranking-head,
  .site-ranking-actions,
  .site-ranking-metrics,
  .ranking-card-actions {
    grid-template-columns: 1fr;
  }

  .ranking-toggle {
    width: 100%;
    min-width: 0;
  }

  .site-ranking-card {
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
  }

  .site-ranking-copy h3 {
    font-size: .95rem;
  }

  .site-ranking-copy p {
    font-size: .76rem;
    line-height: 1.35;
  }

  .site-ranking-actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
    gap: 5px;
  }

  .site-ranking-btn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: .74rem;
    border-radius: 10px;
  }

  .site-ranking-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .site-ranking-metric {
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 12px;
  }

  .site-ranking-metric-label {
    font-size: .66rem;
  }

  .site-ranking-metric-value {
    font-size: 1.28rem;
  }

  .site-ranking-progress-head {
    font-size: .64rem;
  }

  .site-ranking-progress-bar {
    height: 6px;
  }

  .site-ranking-status {
    padding: 8px 10px;
    font-size: .72rem;
  }

  .ranking-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ranking-card-percent {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ranking-card {
    gap: 6px;
    padding: 8px 9px;
    border-radius: 14px;
  }

  .ranking-card-copy h3 {
    font-size: .75rem;
  }

  .ranking-card-copy p {
    font-size: .58rem;
  }

  .ranking-card-percent {
    padding: 3px 6px;
    font-size: .63rem;
  }

  .ranking-card-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }

  .ranking-card-chips {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ranking-card-chips::-webkit-scrollbar {
    display: none;
  }

  .ranking-chip {
    flex: 0 0 auto;
    gap: 4px;
    padding: 3px 6px;
  }

  .ranking-chip small {
    font-size: .5rem;
  }

  .ranking-chip strong {
    font-size: .62rem;
  }

  .ranking-card-actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: end;
    gap: 4px;
  }

  .ranking-vote-btn {
    min-height: 24px;
    padding: 2px 7px;
    font-size: .6rem;
    border-radius: 999px;
  }

  .ranking-vote-btn-label {
    display: none;
  }

  .ranking-vote-btn-short {
    display: inline;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .ranking-progress-wrap {
    gap: 3px;
  }

  .ranking-progress-head {
    font-size: .54rem;
  }

  .ranking-progress-head span:first-child {
    display: none;
  }

  .ranking-progress {
    height: 4px;
  }
}

/* ─── Dark Mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --bg-soft: #151b23;
    --glass: rgba(22, 30, 44, 0.82);
    --glass-strong: rgba(28, 38, 56, 0.92);
    --text: #e6eef8;
    --muted: #7b93b0;
    --border: rgba(120, 160, 220, 0.14);
    --border-strong: rgba(120, 160, 220, 0.26);
    --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.32);
    --text-3: #5d7a9a;
  }
}

[data-theme="dark"] {
  --bg: #0d1117;
  --bg-soft: #151b23;
  --glass: rgba(22, 30, 44, 0.82);
  --glass-strong: rgba(28, 38, 56, 0.92);
  --text: #e6eef8;
  --muted: #7b93b0;
  --border: rgba(120, 160, 220, 0.14);
  --border-strong: rgba(120, 160, 220, 0.26);
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.32);
  --text-3: #5d7a9a;
}

[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"] *) {
    background:
      radial-gradient(1200px 500px at -5% -10%, rgba(var(--primary-rgb), .10), transparent 55%),
      radial-gradient(900px 460px at 110% 18%, rgba(18, 200, 255, .08), transparent 58%),
      linear-gradient(160deg, #0d1117 0%, #10151f 52%, #0e1a16 100%);
  }
}

[data-theme="dark"] body {
  background:
    radial-gradient(1200px 500px at -5% -10%, rgba(var(--primary-rgb), .10), transparent 55%),
    radial-gradient(900px 460px at 110% 18%, rgba(18, 200, 255, .08), transparent 58%),
    linear-gradient(160deg, #0d1117 0%, #10151f 52%, #0e1a16 100%);
}

[data-theme="dark"] .card,
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .table-row,
[data-theme="dark"] .stat,
[data-theme="dark"] .suggest-item {
  background: linear-gradient(160deg, rgba(30,42,62,.88), rgba(20,30,48,.78));
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(18, 26, 42, 0.82);
  color: var(--text);
  border-color: var(--border);
}

/* ── Barra de módulos de salud ────────────────────────── */
.module-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  gap: 4px;
  padding: 6px 8px;
  width: 100%;
  max-width: 100%;
  background: rgba(248, 252, 255, .94);
  border-bottom: 1px solid rgba(10,46,95,.07);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  position: sticky;
  top: 0;
  z-index: 90;
  box-sizing: border-box;
}
.module-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 2px;
  border-radius: 14px;
  font-size: .63rem;
  font-weight: 700;
  color: #6b839e;
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-align: center;
  line-height: 1.02;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-nav a .nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
.module-nav a.active {
  color: var(--primary);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .18), rgba(var(--primary-rgb), .08));
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(11,115,255,.14);
}
.module-nav a:active { transform: scale(.97); }

[data-theme="dark"] .module-nav {
  background: rgba(13, 18, 28, 0.94);
  border-bottom-color: rgba(255,255,255,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .module-nav {
    background: rgba(13,18,28,.94);
    border-bottom-color: rgba(255,255,255,.07);
  }
}

@media (max-width: 420px) {
  .module-nav {
    gap: 2px;
    padding: 6px 4px;
  }
  .module-nav a {
    min-height: 54px;
    padding: 5px 1px;
    font-size: .59rem;
    letter-spacing: 0;
  }
  .module-nav a .nav-icon {
    width: 16px;
    height: 16px;
  }
}

/* Estilos módulos de salud */
.lab-exams { margin-top: 8px; border-top: 1px solid rgba(0,0,0,.06); padding-top: 6px; }
.lab-exam-row { display: flex; justify-content: space-between; font-size: .75rem; padding: 2px 0; }
.lab-exam-price { font-weight: 700; color: var(--primary); }
[data-theme="dark"] .lab-exams { border-top-color: rgba(255,255,255,.08); }

.health-public-card {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(25,38,60,.92), rgba(20,31,50,.96));
  border: 1px solid rgba(122,159,219,.22);
  box-shadow: 0 18px 34px rgba(4,16,35,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

.health-public-card__layout {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.health-public-card__media,
.health-public-card__media img {
  width: 88px;
  height: 88px;
  border-radius: 22px;
}

.health-public-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(221,230,244,.94));
  border: 1px solid rgba(255,255,255,.18);
  color: #f6fbff;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(7,18,34,.18);
  overflow: hidden;
}

.health-public-card__media img {
  object-fit: cover;
  display: block;
}

.health-public-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.health-public-card__title {
  margin: 0;
  color: #f4f8ff;
  font-size: clamp(1.1rem, 4vw, 1.55rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.health-public-card__meta {
  margin-top: 5px;
  color: #96acc8;
  font-size: .92rem;
  line-height: 1.32;
}

.health-public-card__address,
.health-public-card__status,
.health-public-card__desc {
  margin: 4px 0 0;
  color: #b8c6da;
  font-size: .84rem;
  line-height: 1.4;
}

.health-public-card__desc {
  color: #c8d5e7;
}

.health-public-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.health-public-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.health-public-card__actions .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 420px) {
  .health-public-card {
    padding: 14px;
    border-radius: 22px;
  }
  .health-public-card__layout {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
  }
  .health-public-card__media,
  .health-public-card__media img {
    width: 74px;
    height: 74px;
    border-radius: 18px;
  }
  .health-public-card__title {
    font-size: 1rem;
  }
  .health-public-card__meta,
  .health-public-card__address,
  .health-public-card__status,
  .health-public-card__desc {
    font-size: .79rem;
  }
  .health-public-card__actions {
    gap: 7px;
  }
}

[data-theme="dark"] .bottom-nav {
  background: rgba(13, 18, 28, 0.94);
}

[data-theme="dark"] .admin-sidebar {
  background: rgba(13, 18, 28, 0.96);
}

[data-theme="dark"] .locale-switcher {
  background: rgba(18, 26, 42, 0.88);
}

[data-theme="dark"] .hero-search-panel {
  background: linear-gradient(160deg, rgba(20,30,48,.82), rgba(14,22,38,.7));
}

[data-theme="dark"] .compare-match-row {
  background: rgba(16, 24, 40, 0.6);
  border-bottom-color: rgba(120,160,220,.08);
}
[data-theme="dark"] .compare-match-row:first-child {
  background: rgba(16,185,129,.06);
}
[data-theme="dark"] .compare-group {
  background: rgba(22, 30, 44, 0.82);
  border-color: rgba(120,160,220,.12);
}
[data-theme="dark"] .compare-group-head {
  background: linear-gradient(160deg, rgba(11,115,255,.06), rgba(22,30,44,.6));
}
[data-theme="dark"] .result-item.product-card {
  background: rgba(22, 30, 44, 0.82);
  border-color: rgba(120,160,220,.12);
}
[data-theme="dark"] .session-name { color: var(--text); }
[data-theme="dark"] .session-pill {
  background: rgba(22, 30, 44, 0.7);
  border-color: rgba(120,160,220,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .compare-match-row { background: rgba(16, 24, 40, 0.6); border-bottom-color: rgba(120,160,220,.08); }
  :root:not([data-theme="light"]) .compare-match-row:first-child { background: rgba(16,185,129,.06); }
  :root:not([data-theme="light"]) .compare-group { background: rgba(22, 30, 44, 0.82); border-color: rgba(120,160,220,.12); }
  :root:not([data-theme="light"]) .compare-group-head { background: linear-gradient(160deg, rgba(11,115,255,.06), rgba(22,30,44,.6)); }
  :root:not([data-theme="light"]) .result-item.product-card { background: rgba(22, 30, 44, 0.82); border-color: rgba(120,160,220,.12); }
  :root:not([data-theme="light"]) .search-result-name { color: var(--text); }
  :root:not([data-theme="light"]) .session-name { color: var(--text); }
  :root:not([data-theme="light"]) .session-pill { background: rgba(22, 30, 44, 0.7); border-color: rgba(120,160,220,.12); }
}

[data-theme="dark"] .social-comment {
  background: rgba(18, 28, 46, 0.68);
}

/* ─── Dark Mode: comprehensive contrast fixes ────────────── */
[data-theme="dark"] .brand-copy strong,
[data-theme="dark"] .topbar-title h1,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: #f0f6ff;
}
[data-theme="dark"] .brand-copy small {
  color: #8ba3c0;
}
[data-theme="dark"] .topbar-inner,
[data-theme="dark"] .home-page .topbar-inner {
  background: linear-gradient(155deg, rgba(18,26,42,.92), rgba(13,19,30,.88));
  border-color: rgba(120,160,220,.12);
}
[data-theme="dark"] .topbar-online-pill {
  background: linear-gradient(160deg, rgba(16,185,129,.15), rgba(22,30,44,.7));
  color: #6ee7b7;
}
[data-theme="dark"] .pill-copy strong { color: #6ee7b7; }
[data-theme="dark"] .pill.ok { color: #6ee7b7; background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); }
[data-theme="dark"] .pill.info { color: #93c5fd; background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.34); }
[data-theme="dark"] .pill.warn { color: #fbbf24; background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .pill.danger { color: #fca5a5; background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); }
[data-theme="dark"] .badge-glow {
  background: rgba(11,115,255,.15);
  color: #93c5fd;
}
[data-theme="dark"] .hero-shell {
  background: linear-gradient(160deg, rgba(22,32,52,.88), rgba(16,24,40,.78));
}
[data-theme="dark"] .hero-title { color: #f0f6ff; }
[data-theme="dark"] .hero-subtitle { color: #8ba3c0; }
[data-theme="dark"] .text-accent { color: #34d399 !important; }
[data-theme="dark"] .btn-glass,
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] a.btn-glass,
[data-theme="dark"] a.btn.ghost,
[data-theme="dark"] a.btn.btn-glass {
  background: rgba(30,42,62,.7);
  color: #e6eef8 !important;
  border-color: rgba(120,160,220,.18);
}
[data-theme="dark"] .btn-glass:hover,
[data-theme="dark"] .btn.ghost:hover {
  background: rgba(40,55,78,.8);
  border-color: rgba(120,160,220,.3);
}
[data-theme="dark"] .quick-action {
  background: rgba(22,32,52,.7);
  border-color: rgba(120,160,220,.12);
  color: #e6eef8 !important;
}
[data-theme="dark"] .hero-search-panel input {
  background: rgba(13,19,30,.8);
  color: #f0f6ff;
  border-color: rgba(120,160,220,.18);
}
[data-theme="dark"] .hero-search-panel input::placeholder { color: #5d7a9a; }
[data-theme="dark"] .section-header h2 { color: #f0f6ff; }
[data-theme="dark"] .section-subtitle { color: #8ba3c0; }
[data-theme="dark"] .compare-pharmacy-name { color: #e6eef8; }
[data-theme="dark"] .search-result-name { color: #f0f6ff; }
[data-theme="dark"] .search-result-pharmacy { color: #7b93b0; }
[data-theme="dark"] .compare-price { color: #f0f6ff; }
[data-theme="dark"] .compare-best-tag { color: #34d399; }
[data-theme="dark"] .auth-page .card,
[data-theme="dark"] .auth-page .glass {
  background: linear-gradient(160deg, rgba(22,32,52,.92), rgba(16,24,40,.85));
}
[data-theme="dark"] label { color: #c1d0e4; }
[data-theme="dark"] .meta { color: #7b93b0; }
[data-theme="dark"] p { color: #b0c4de; }
[data-theme="dark"] .status-box { background: rgba(22,30,44,.8); color: #b0c4de; border-color: rgba(120,160,220,.12); }
[data-theme="dark"] .status-box.ok { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: rgba(16,185,129,.25); }
[data-theme="dark"] .status-box.err { background: rgba(220,38,38,.1); color: #fca5a5; border-color: rgba(220,38,38,.25); }
[data-theme="dark"] fieldset { border-color: rgba(120,160,220,.15); }
[data-theme="dark"] legend { color: #c1d0e4; }
[data-theme="dark"] .hero-live-stats .pill { background: rgba(22,30,44,.7); border-color: rgba(120,160,220,.12); color: #8ba3c0; }

/* ── Dark mode: extended contrast fixes ────────────────── */
[data-theme="dark"] a { color: #60a5fa; }
/* Buttons that are links should NOT get the blue link color */
[data-theme="dark"] a.btn,
[data-theme="dark"] a.btn-glass,
[data-theme="dark"] a.btn.ghost,
[data-theme="dark"] a.btn-sm { color: #e6eef8; }
[data-theme="dark"] a:hover { color: #93c5fd; }
[data-theme="dark"] .empty-state { color: #b0c4de; background: rgba(22,30,44,.6); border-color: rgba(120,160,220,.18); }
[data-theme="dark"] .status-box.err { color: #fca5a5; }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(120,160,220,.08), rgba(120,160,220,.18), rgba(120,160,220,.08)); background-size: 240% 100%; }
[data-theme="dark"] .bottom-nav a,
[data-theme="dark"] .bottom-nav button { color: #8ba3c0; }
[data-theme="dark"] .bottom-nav a.active,
[data-theme="dark"] .bottom-nav button.active { color: #60a5fa; background: rgba(96,165,250,.12); }
[data-theme="dark"] .sidebar-nav a { color: #8ba3c0; }
[data-theme="dark"] .sidebar-nav a.active { color: #60a5fa; background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.25); }
[data-theme="dark"] .auth-page form.stack label { color: #c1d0e4; }
[data-theme="dark"] .stat .k { color: #60a5fa; }
[data-theme="dark"] .price-badge { color: #60a5fa; }
[data-theme="dark"] .swipe-tab { color: #8ba3c0; }
[data-theme="dark"] .swipe-tab.active { color: #60a5fa; }
[data-theme="dark"] .hero-mini-tag { color: #8ba3c0; background: rgba(22,30,44,.7); border-color: rgba(120,160,220,.15); }
[data-theme="dark"] .pill { color: #b0c4de; background: rgba(22,30,44,.7); border-color: rgba(120,160,220,.15); }
[data-theme="dark"] .geo-map-bar { background: rgba(18,26,42,.92); border-color: rgba(120,160,220,.12); }
[data-theme="dark"] .geo-legend-item { background: rgba(100,140,220,.08); border-color: rgba(120,160,220,.15); color: #b0c4de; }
[data-theme="dark"] .geo-legend-item--open { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: #6ee7b7; }
[data-theme="dark"] .skip-link { background: rgba(22,30,44,.95); border-color: rgba(120,160,220,.2); }
[data-theme="dark"] .session-label { color: #7b93b0; }
[data-theme="dark"] .cr-like-btn,
[data-theme="dark"] .cr-comment-toggle,
[data-theme="dark"] .cr-share-btn { color: #8ba3c0; }
[data-theme="dark"] .cr-login-hint { background: rgba(22,30,44,.92); color: #b0c4de; border-color: rgba(120,160,220,.15); }
[data-theme="dark"] .social-community-card { background: linear-gradient(160deg, rgba(30,42,62,.88), rgba(20,30,48,.78)) !important; }
[data-theme="dark"] .badge-glow { color: #93c5fd; }
[data-theme="dark"] .list-card h3 { color: #f0f6ff; }
[data-theme="dark"] .product-line h3 { color: #f0f6ff; }
[data-theme="dark"] .list-card .muted { color: #7b93b0; }
[data-theme="dark"] .act-battery-label { color: #8ba3c0; }
[data-theme="dark"] .act-battery-summary { color: #8ba3c0; }
[data-theme="dark"] .act-battery-summary strong { color: #e6eef8; }
[data-theme="dark"] .share-sheet { background: rgba(18,26,42,.96); border-color: rgba(120,160,220,.15); }
[data-theme="dark"] .share-sheet-header strong { color: #f0f6ff; }
[data-theme="dark"] .share-sheet-text { color: #e6eef8; }
[data-theme="dark"] .share-sheet-sub { color: #7b93b0; }
[data-theme="dark"] .share-channel-name { color: #b0c4de; }

/* Duplicate for prefers-color-scheme auto-dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-copy strong,
  :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4 { color: #f0f6ff; }
  :root:not([data-theme="light"]) .brand-copy small { color: #8ba3c0; }
  :root:not([data-theme="light"]) .topbar-inner,
  :root:not([data-theme="light"]) .home-page .topbar-inner { background: linear-gradient(155deg, rgba(18,26,42,.92), rgba(13,19,30,.88)); border-color: rgba(120,160,220,.12); }
  :root:not([data-theme="light"]) .topbar-online-pill { background: linear-gradient(160deg, rgba(16,185,129,.15), rgba(22,30,44,.7)); color: #6ee7b7; }
  :root:not([data-theme="light"]) .pill-copy strong { color: #6ee7b7; }
  :root:not([data-theme="light"]) .pill.ok { color: #6ee7b7; background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); }
  :root:not([data-theme="light"]) .pill.info { color: #93c5fd; background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.34); }
  :root:not([data-theme="light"]) .pill.warn { color: #fbbf24; background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); }
  :root:not([data-theme="light"]) .pill.danger { color: #fca5a5; background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); }
  :root:not([data-theme="light"]) .badge-glow { background: rgba(11,115,255,.15); color: #93c5fd; }
  :root:not([data-theme="light"]) .hero-shell { background: linear-gradient(160deg, rgba(22,32,52,.88), rgba(16,24,40,.78)); }
  :root:not([data-theme="light"]) .hero-title { color: #f0f6ff; }
  :root:not([data-theme="light"]) .hero-subtitle { color: #8ba3c0; }
  :root:not([data-theme="light"]) .text-accent { color: #34d399 !important; }
  :root:not([data-theme="light"]) .btn-glass,
  :root:not([data-theme="light"]) .btn.ghost { background: rgba(30,42,62,.7); color: var(--text); border-color: rgba(120,160,220,.18); }
  :root:not([data-theme="light"]) .quick-action { background: rgba(22,32,52,.7); border-color: rgba(120,160,220,.12); color: var(--text); }
  :root:not([data-theme="light"]) .hero-search-panel input { background: rgba(13,19,30,.8); color: #f0f6ff; border-color: rgba(120,160,220,.18); }
  :root:not([data-theme="light"]) .compare-pharmacy-name { color: #e6eef8; }
  :root:not([data-theme="light"]) .compare-price { color: #f0f6ff; }
  :root:not([data-theme="light"]) .compare-best-tag { color: #34d399; }
  :root:not([data-theme="light"]) .auth-page .card,
  :root:not([data-theme="light"]) .auth-page .glass { background: linear-gradient(160deg, rgba(22,32,52,.92), rgba(16,24,40,.85)); }
  :root:not([data-theme="light"]) label { color: #c1d0e4; }
  :root:not([data-theme="light"]) .meta { color: #7b93b0; }
  :root:not([data-theme="light"]) p { color: #b0c4de; }
  :root:not([data-theme="light"]) fieldset { border-color: rgba(120,160,220,.15); }
  :root:not([data-theme="light"]) legend { color: #c1d0e4; }
  :root:not([data-theme="light"]) a { color: #60a5fa; }
  :root:not([data-theme="light"]) a.btn,
  :root:not([data-theme="light"]) a.btn-glass,
  :root:not([data-theme="light"]) a.btn.ghost,
  :root:not([data-theme="light"]) a.btn-sm { color: #e6eef8; }
  :root:not([data-theme="light"]) .empty-state { color: #b0c4de; background: rgba(22,30,44,.6); border-color: rgba(120,160,220,.18); }
  :root:not([data-theme="light"]) .status-box.err { color: #fca5a5; }
  :root:not([data-theme="light"]) .skeleton { background: linear-gradient(90deg, rgba(120,160,220,.08), rgba(120,160,220,.18), rgba(120,160,220,.08)); background-size: 240% 100%; }
  :root:not([data-theme="light"]) .bottom-nav a,
  :root:not([data-theme="light"]) .bottom-nav button { color: #8ba3c0; }
  :root:not([data-theme="light"]) .bottom-nav a.active,
  :root:not([data-theme="light"]) .bottom-nav button.active { color: #60a5fa; background: rgba(96,165,250,.12); }
  :root:not([data-theme="light"]) .sidebar-nav a { color: #8ba3c0; }
  :root:not([data-theme="light"]) .sidebar-nav a.active { color: #60a5fa; }
  :root:not([data-theme="light"]) .auth-page form.stack label { color: #c1d0e4; }
  :root:not([data-theme="light"]) .stat .k { color: #60a5fa; }
  :root:not([data-theme="light"]) .price-badge { color: #60a5fa; }
  :root:not([data-theme="light"]) .swipe-tab { color: #8ba3c0; }
  :root:not([data-theme="light"]) .swipe-tab.active { color: #60a5fa; }
  :root:not([data-theme="light"]) .hero-mini-tag { color: #8ba3c0; background: rgba(22,30,44,.7); border-color: rgba(120,160,220,.15); }
  :root:not([data-theme="light"]) .pill { color: #b0c4de; background: rgba(22,30,44,.7); border-color: rgba(120,160,220,.15); }
  :root:not([data-theme="light"]) .geo-map-bar { background: rgba(18,26,42,.92); border-color: rgba(120,160,220,.12); }
  :root:not([data-theme="light"]) .geo-legend-item { background: rgba(100,140,220,.08); border-color: rgba(120,160,220,.15); color: #b0c4de; }
  :root:not([data-theme="light"]) .geo-legend-item--open { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: #6ee7b7; }
  :root:not([data-theme="light"]) .cr-like-btn,
  :root:not([data-theme="light"]) .cr-comment-toggle,
  :root:not([data-theme="light"]) .cr-share-btn { color: #8ba3c0; }
  :root:not([data-theme="light"]) .cr-login-hint { background: rgba(22,30,44,.92); color: #b0c4de; }
  :root:not([data-theme="light"]) .social-community-card { background: linear-gradient(160deg, rgba(30,42,62,.88), rgba(20,30,48,.78)) !important; }
  :root:not([data-theme="light"]) .badge-glow { color: #93c5fd; }
  :root:not([data-theme="light"]) .list-card h3 { color: #f0f6ff; }
  :root:not([data-theme="light"]) .product-line h3 { color: #f0f6ff; }
  :root:not([data-theme="light"]) .list-card .muted { color: #7b93b0; }
  :root:not([data-theme="light"]) .act-battery-label { color: #8ba3c0; }
  :root:not([data-theme="light"]) .act-battery-summary { color: #8ba3c0; }
  :root:not([data-theme="light"]) .act-battery-summary strong { color: #e6eef8; }
  :root:not([data-theme="light"]) .share-sheet { background: rgba(18,26,42,.96); }
  :root:not([data-theme="light"]) .share-sheet-header strong { color: #f0f6ff; }
  :root:not([data-theme="light"]) .share-sheet-text { color: #e6eef8; }
  :root:not([data-theme="light"]) .share-sheet-sub { color: #7b93b0; }
  :root:not([data-theme="light"]) .share-channel-name { color: #b0c4de; }
}

/* ─── Theme Toggle FAB ──────────────────────────────────── */
.theme-toggle-fab {
  position: fixed;
  bottom: 80px;
  right: 12px;
  z-index: 60;
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--glass-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  opacity: .85;
}
.theme-toggle-fab:hover { opacity: 1; transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.theme-toggle-fab:active { transform: scale(.95); }
.theme-toggle-fab .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-fab .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-fab .theme-icon-moon { display: block; color: #fbbf24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-fab .theme-icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle-fab .theme-icon-moon { display: block; color: #fbbf24; }
}

/* ─── Mobile button sizing adjustments ──────────────────── */
@media (max-width: 599px) {
  .btn, button, input[type="submit"] { min-height: 38px; }
  .btn { padding: 7px 12px; font-size: .84rem; border-radius: 11px; }
  .btn-sm, .btn.sm { min-height: 30px; padding: 5px 8px; font-size: .76rem; border-radius: 9px; }
  .btn-block, .btn.block { min-height: 40px; }
  .hero-cta-grid .btn { min-height: 34px; }
  .auth-page .btn-block { min-height: 42px; font-size: .88rem; }
}

/* ─── Base reset ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: "SF Pro Display", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at -5% -10%, rgba(var(--primary-rgb), .14), transparent 55%),
    radial-gradient(900px 460px at 110% 18%, rgba(18, 200, 255, .12), transparent 58%),
    linear-gradient(160deg, #f8fbff 0%, #eef5ff 52%, #f3fcf9 100%);
  overflow-x: hidden;
  transition: background var(--tr), color var(--tr);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; }
a:hover { opacity: .92; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: fixed;
  left: 14px;
  top: -56px;
  z-index: 220;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.97);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: top var(--tr);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 14px;
}

.shell-tools {
  position: fixed;
  right: 14px;
  top: max(10px, env(safe-area-inset-top));
  z-index: 70;
}

.locale-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.locale-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
}

.locale-switcher a.active {
  color: #fff;
  background: linear-gradient(145deg, var(--primary), #2d8bff);
}

:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), .4);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) var(--sp-4) calc(var(--bottom-h) + 20px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  opacity: .55;
}
.orb-a { width: 260px; height: 260px; background: rgba(var(--primary-rgb), .22); right: -80px; top: -70px; }
.orb-b { width: 220px; height: 220px; background: rgba(18, 200, 255, .2); left: -70px; bottom: 18%; }

.card,
.glass-panel,
.modal-card,
.list-card,
.table-row,
.stat,
.suggest-item {
  background: linear-gradient(160deg, rgba(255,255,255,.76), rgba(255,255,255,.5));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.5);
}

.card,
.glass-panel { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .glass {
  background: linear-gradient(160deg, rgba(30,42,62,.88), rgba(20,30,48,.78));
}

.topbar {
  position: sticky;
  top: max(4px, env(safe-area-inset-top));
  z-index: 40;
  margin-bottom: var(--sp-2);
  transition: all .2s ease;
}
.topbar-inner {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  flex-wrap: nowrap;
}
.brand {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--primary-rgb), .18), rgba(255,255,255,.85));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.brand-copy { min-width: 0; }
.brand-copy strong {
  display: block;
  font-size: clamp(1rem, 4vw, 1.22rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.brand-copy small {
  color: var(--muted);
  display: block;
  font-size: .78rem;
  margin-top: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.social-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.social-main {
  display: grid;
  gap: var(--sp-4);
}

.social-panel {
  display: grid;
  gap: var(--sp-3);
}

.social-panel-head {
  align-items: center;
}

.social-community-card,
.social-post-card {
  gap: var(--sp-3);
}
.social-post-media .cr-media-gallery,
.social-post-media .cr-post-video,
.social-post-media .cr-post-audio,
.social-post-media .cr-post-file,
.social-post-media .cr-post-link-card {
  margin-top: 8px;
}

.social-community-card.is-selected {
  border-color: rgba(var(--primary-rgb), .34);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .12), var(--shadow-sm);
}

.social-community-top,
.social-post-head,
.social-community-actions {
  justify-content: space-between;
}

.social-comments {
  gap: var(--sp-2);
}

.social-comment {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
  border: 1px solid var(--border);
}

.social-comment-form input[type="text"] {
  min-width: 220px;
}

.account-profile-form {
  gap: 16px;
}

.account-profile-shell {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.account-profile-media,
.account-profile-fields {
  display: grid;
  gap: 12px;
}

.account-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.account-avatar-preview,
.account-gallery-preview {
  display: grid;
  gap: 10px;
}

.account-avatar-preview-card,
.account-public-preview-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.88));
}

.account-avatar-preview-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.account-avatar-preview-copy,
.account-public-preview-copy {
  display: grid;
  gap: 4px;
}

.account-avatar-preview-copy strong,
.account-public-preview-copy strong {
  font-size: .96rem;
  color: var(--heading);
}

.account-avatar-preview-copy span,
.account-public-preview-copy span,
.account-public-preview-bio {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
}

.account-public-preview-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.account-public-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-gallery-item {
  position: relative;
}

.account-inline-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 800;
  border: 1px solid rgba(120, 160, 220, .2);
  flex: 0 0 auto;
}

.account-inline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-social-post-author,
.account-social-comment-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.account-social-post-copy,
.account-social-comment-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-social-author-link {
  display: inline-flex;
  justify-content: flex-start;
  color: var(--heading);
}

.account-social-author-link strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-social-avatar-button {
  padding: 0;
  border-radius: 999px;
}

[data-theme="dark"] .account-avatar-preview-card,
[data-theme="dark"] .account-public-preview-card,
:root:not([data-theme="light"]) .account-avatar-preview-card,
:root:not([data-theme="light"]) .account-public-preview-card {
  background: linear-gradient(180deg, rgba(21, 33, 54, .92), rgba(18, 28, 44, .88));
  border-color: rgba(120, 160, 220, .16);
}

@media (max-width: 860px) {
  .social-layout {
    grid-template-columns: 1fr;
  }

  .account-profile-shell {
    grid-template-columns: 1fr;
  }

  .account-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Social Hub (compact community section) ───────────────────── */
.social-hub {
  display: grid; gap: 12px;
}
.social-hub-card {
  overflow: hidden;
}
.social-hub-card--viewer {
  border: 1px solid rgba(var(--primary-rgb), .12);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .05), rgba(255,255,255,.72));
}
.social-hub-head {
  padding: 16px 16px 8px;
}
.social-hub-head h3 {
  font-size: 1rem; font-weight: 700; color: var(--heading);
}
.social-hub-head p {
  margin-top: 2px; font-size: .78rem;
}
.social-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; padding: 4px 16px 16px;
}
.social-hub-grid .social-community-card {
  padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,250,255,.9));
  transition: all .2s ease; gap: 6px;
}
.social-hub-grid .social-community-card:hover {
  border-color: rgba(var(--primary-rgb),.4);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb),.1);
  transform: translateY(-2px);
}
.social-hub-grid .social-community-card.is-selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.06), rgba(var(--primary-rgb),.02));
}
.social-hub-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .15s;
}
.social-hub-toggle:hover { background: rgba(var(--primary-rgb),.04); }
.social-hub-toggle h3 {
  font-size: .95rem; font-weight: 700; color: var(--heading); margin: 0;
}
.social-hub-toggle p { margin: 2px 0 0; }
.social-hub-chevron {
  flex-shrink: 0; color: #8a9ab5;
  transition: transform .25s ease;
}
.social-hub-toggle[aria-expanded="true"] .social-hub-chevron {
  transform: rotate(180deg);
}
.social-hub-collapsible {
  padding: 0 16px 16px;
}
.social-hub-collapsible[hidden] { display: none; }
.social-hub-toggle--viewer { align-items: center; }
.social-hub-chevron--viewer {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .12);
  border: 1px solid rgba(var(--primary-rgb), .14);
}
.social-viewer-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 16px;
}
.social-viewer-teaser--launch {
  margin: 0 16px 16px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(9,17,34,.92), rgba(23,37,64,.9));
  border: 1px solid rgba(120,150,190,.18);
  box-shadow: 0 18px 40px rgba(12,20,40,.14);
}
.social-viewer-teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.social-viewer-teaser-copy span {
  margin: 0;
  font-size: .8rem;
  color: #6b7c93;
}
.social-feed-compact {
  padding: 0 16px 16px;
}
.social-hub-form-fields {
  display: grid; gap: 10px;
}
.social-hub-form-fields label {
  font-size: .82rem; font-weight: 600;
}

.topbar-status-cluster,
.session-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
}

.topbar-online-pill {
  min-height: 24px;
  padding: 2px 8px;
  background: linear-gradient(160deg, rgba(16,185,129,.10), rgba(255,255,255,.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-size: .68rem;
  flex-shrink: 0;
}

.online-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(145deg, #2ade92, #15b66b);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  flex: 0 0 auto;
}

.pill-copy {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.pill-copy strong {
  color: #0c8b49;
  font-size: .72rem;
}

.pill-copy > span:first-child {
  display: none;
}

.session-pill {
  min-height: 24px;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(10,46,95,.08);
  background: linear-gradient(160deg, rgba(255,255,255,.84), rgba(230,246,255,.68));
  box-shadow: 0 2px 6px rgba(10,35,84,.04), inset 0 1px 0 rgba(255,255,255,.75);
  display: inline-flex;
  align-items: center;
}

.session-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.session-label {
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6f86a3;
  display: none;
}

.session-name {
  font-size: .76rem;
  line-height: 1;
  color: #0b2645;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.session-logout-btn {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  white-space: nowrap;
  font-size: .66rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
@media (max-width: 420px) {
  .session-logout-btn .logout-text { display: inline; }
  .session-logout-btn { padding: 3px 10px; min-height: 26px; }
}

.home-page .topbar-inner {
  position: relative;
  padding: 6px 10px;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255,255,255,.92), rgba(237,247,255,.72));
  box-shadow: 0 4px 14px rgba(10,35,84,.07), inset 0 1px 0 rgba(255,255,255,.85);
  min-height: 40px;
  gap: 6px;
  flex-wrap: nowrap;
}

.home-page .topbar-inner::after {
  content: "";
  position: absolute;
  inset: auto 12px -1px 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,115,255,.10), transparent);
}

.home-page .brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(11,115,255,.14), rgba(255,255,255,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(10,35,84,.06);
}
.home-page .brand-logo svg { width: 14px; height: 14px; }

.home-page .brand {
  grid-template-columns: 26px auto;
  gap: 6px;
  flex-shrink: 0;
}

.home-page .brand-copy strong {
  font-size: .82rem;
  line-height: 1;
}

.home-page .brand-copy small {
  display: none;
}

.hero-shell {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(241,248,255,.58));
  box-shadow: 0 18px 42px rgba(10,35,84,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-shell::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -54px;
  top: -60px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(18,200,255,.18), transparent 68%);
  pointer-events: none;
}

.hero-shell::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -110px;
  bottom: -120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16,185,129,.12), transparent 70%);
  pointer-events: none;
}

.hero-meta-row,
.hero-copy-block,
.hero-search-panel,
.hero-actions,
.hero-cta-grid {
  position: relative;
  z-index: 1;
}

.hero-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-live-badge {
  min-height: 34px;
  padding-inline: 14px;
}

.hero-mini-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,46,95,.12);
  background: rgba(255,255,255,.58);
  color: #6180a3;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-copy-block {
  margin-bottom: 18px;
}

.hero-title {
  font-size: clamp(2.05rem, 8vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 9ch;
}

.hero-subtitle {
  max-width: 34ch;
  font-size: 1.02rem;
  line-height: 1.35;
}

.hero-search-panel {
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.76), rgba(255,255,255,.54));
  border: 1px solid rgba(10,46,95,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}

.hero-actions {
  margin-top: 16px;
}

.hero-cta-grid {
  margin-top: 18px;
}

.home-share-app-btn {
  justify-content: center;
  width: 100%;
}

.home-share-app-btn svg {
  color: var(--accent);
}

.home-page .quick-action {
  min-height: 86px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(243,249,255,.66));
  box-shadow: 0 8px 18px rgba(10,35,84,.08), inset 0 1px 0 rgba(255,255,255,.86);
}

.home-page .quick-action svg {
  width: 20px;
  height: 20px;
}

.home-page .session-pill {
  min-width: 156px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(228,243,255,.72));
}

.home-page .session-name {
  font-size: 1rem;
}

.section { padding: var(--sp-2) 0 var(--sp-5); }
.section-header { margin-bottom: var(--sp-3); }
.section-header-spacious { margin-bottom: var(--sp-4); }
.section-subtitle { color: var(--muted); font-size: .95rem; }
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--sp-3);
}

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack.compact { gap: var(--sp-2); }
.row { display: flex; gap: var(--sp-2); align-items: end; flex-wrap: wrap; }
.row > * { min-width: 0; flex: 1 1 0; }
.row.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: var(--sp-3); }
.cards-grid { grid-template-columns: 1fr; }

.pill,
.badge,
.badge-glow {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .65);
  letter-spacing: .01em;
}
.badge-glow {
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), .08);
  border-color: rgba(var(--primary-rgb), .18);
}
.pill.ok { color: #0d6b2e; background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .22); font-weight: 700; }
.pill.info { color: #1d4ed8; background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .24); font-weight: 700; }
.pill.warn { color: #8a580a; background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .22); font-weight: 700; }
.pill.danger { color: #991b1b; background: rgba(217, 48, 37, .1); border-color: rgba(217, 48, 37, .25); font-weight: 700; }

.btn,
button,
input[type="submit"] {
  min-height: 42px;
}
.btn {
  border-radius: 12px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: .88rem;
  transition: transform var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn-primary,
.btn.primary {
  background: linear-gradient(145deg, #1889ff, #0b6aef);
  border-color: rgba(var(--primary-rgb), .7);
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), .28), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover, .btn.primary:hover {
  box-shadow: 0 8px 28px rgba(var(--primary-rgb), .35), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.btn-secondary {
  background: linear-gradient(145deg, #1ecf93, #11ab7b);
  border-color: rgba(var(--accent-rgb), .85);
  color: #fff;
}
.btn-glass,
.btn.ghost {
  background: rgba(255, 255, 255, .7);
  color: var(--text);
  border-color: var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover, .btn.ghost:hover {
  background: rgba(255, 255, 255, .88);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-danger { background: #c62828; border-color: #c62828; color: #fff; }
.btn-block,
.btn.block { width: 100%; }
.btn-sm,
.btn.sm { min-height: 34px; padding: 6px 10px; border-radius: 10px; font-size: .8rem; }

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: rgba(255, 255, 255, .8);
  padding: 10px 14px;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--border-strong);
}
textarea { min-height: 92px; resize: vertical; }
label { color: #37557f; font-size: .88rem; display: block; }
label input,
label textarea,
label select { margin-top: 5px; }
input:focus,
select:focus,
textarea:focus,
.btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2);
}

.search-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
}
.search-bar input[type="search"] {
  border-radius: 999px;
  padding-inline: 18px;
  background: rgba(255,255,255,.85);
  border-width: 1.5px;
  box-shadow: inset 0 1px 3px rgba(10,35,84,.04);
}
.search-bar input[type="search"]:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15), inset 0 1px 3px rgba(10,35,84,.04);
}
.search-bar .btn-primary {
  border-radius: 999px;
  min-width: 48px;
  padding: 0;
}

.suggest-list { display: flex; flex-direction: column; gap: 6px; }
.suggest-item {
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
  animation: fadeIn .15s ease both;
}
.suggest-item:hover {
  background: rgba(var(--primary-rgb), .06);
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(10,35,84,.08);
}
.list-card { padding: 12px; }
.table-list { display: flex; flex-direction: column; gap: 8px; }
.table-row {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.table-row .meta { color: var(--muted); font-size: .82rem; }

.product-card {
  cursor: pointer;
  transition: box-shadow var(--tr), transform var(--tr-fast), border-color var(--tr-fast);
}
@media (hover: hover) {
  .product-card:hover {
    border-color: rgba(var(--primary-rgb), .2);
    box-shadow: 0 12px 32px rgba(10,35,84,.14), inset 0 1px 0 rgba(255,255,255,.5);
    transform: translateY(-2px);
  }
}
.product-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
}
.product-img,
.logo-img,
.site-logo,
.modal-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .06), rgba(var(--primary-rgb), .12));
  box-shadow: 0 1px 4px rgba(10,35,84,.04);
}
/* Pharmacy logo in cards: bigger for better visibility */
.list-card .logo-img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  padding: 3px;
}
.cms-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.offer-prices {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 6px 0 10px;
}
.flex-1 { min-width: 0; }
.site-logo { width: 74px; height: 74px; object-fit: contain; padding: 4px; }
.site-logo.placeholder,
.logo-img:empty,
.product-img:empty,
.modal-img.placeholder { display: grid; place-items: center; }

.hero { padding: 4px 0 var(--sp-4); }
.hero-content { text-align: left; }
.hero-title { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.15; margin: 8px 0; }
.hero-subtitle { color: var(--muted); margin-bottom: 12px; }
.hero-cta { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; }
.hero-cta .btn:nth-child(1) { grid-column: 1 / -1; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.quick-action {
  min-height: 72px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  gap: 2px;
  color: #264b7d;
  font-size: .72rem;
  font-weight: 600;
}
.quick-action svg { width: 18px; height: 18px; }

.site-hero-top,
.pharmacy-hero-row { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-brand,
.pharmacy-brand { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.site-banners,
.offer-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; gap: 10px; padding-bottom: 2px; scroll-snap-type: x mandatory; }
.site-banners > *,
.offer-strip > * { scroll-snap-align: start; }
.banner-card { padding: 12px; border-radius: 14px; }

/* ── Geo Map (Leaflet) ─────────────────────────────────────────────────── */
.geo-map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
}

.geo-map-canvas {
  width: 100%;
  height: 420px;
  min-height: 300px;
  background: rgba(233,242,255,.6);
  display: block;
}

.geo-map-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}

.geo-map-status {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.3;
}

.geo-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.geo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  background: rgba(var(--primary-rgb), .06);
  border: 1px solid var(--border);
  white-space: nowrap;
  line-height: 1;
}

.geo-legend-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.geo-legend-dot--high  { background: #dc2626; box-shadow: 0 0 4px rgba(220,38,38,.4); }
.geo-legend-dot--medium { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,.4); }
.geo-legend-dot--low   { background: #6478b4; box-shadow: 0 0 4px rgba(100,120,180,.3); }
.geo-legend-dot--open  { background: #10b981; box-shadow: 0 0 4px rgba(16,185,129,.4); border: 1.5px solid #fff; }

.geo-legend-item--open {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.2);
  color: #059669;
}

@media (min-width: 480px) {
  .geo-map-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(8,32,63,.18) !important;
  font-family: inherit !important;
}
.leaflet-popup-content {
  margin: 14px 16px !important;
  min-width: 228px;
}
.leaflet-popup-tip { background: #fff !important; }

.site-map-card {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.site-map-canvas {
  height: 280px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(237,247,255,.88));
}

.site-map-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.site-map-summary strong {
  display: block;
  margin-bottom: 2px;
}

.site-map-popup {
  min-width: 210px;
  display: grid;
  gap: 10px;
  color: #0f172a;
}

.leaflet-popup-content .site-map-popup strong {
  display: block;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0f172a !important;
  text-wrap: balance;
}

.leaflet-popup-content .site-map-popup p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.4;
  color: #64748b !important;
}

.site-map-popup-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

.site-map-popup-status.is-open {
  background: rgba(16,185,129,.12);
  color: #059669;
}

.site-map-popup-status.is-closed {
  background: rgba(148,163,184,.16);
  color: #475569;
}

.site-map-popup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.leaflet-popup-content .site-map-popup-actions a {
  text-align: center;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(11,115,255,.08);
}

.leaflet-popup-content .site-map-popup-actions a:first-child {
  background: rgba(11,115,255,.12);
  color: #0b73ff;
}

.leaflet-popup-content .site-map-popup-actions a:last-child {
  background: #0b73ff;
  color: #fff;
}

.site-reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-review-pill--very-good {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .22);
  color: #047857;
}

.site-review-pill--good {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(59, 130, 246, .22);
  color: #1d4ed8;
}

.site-review-pill--bad {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .22);
  color: #b91c1c;
}

.site-review-form-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.site-review-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.site-review-form-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.site-review-form-head p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--muted);
}

.site-review-form {
  display: grid;
  gap: 12px;
}

.site-review-rating-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.site-review-rating-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.site-review-rating-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .74);
  color: var(--text);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}

.site-review-rating-option input:checked + .site-review-rating-chip {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.site-review-rating-option input:checked + .site-review-rating-chip--very-good {
  background: rgba(16, 185, 129, .14);
  border-color: rgba(16, 185, 129, .32);
  color: #047857;
}

.site-review-rating-option input:checked + .site-review-rating-chip--good {
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .3);
  color: #1d4ed8;
}

.site-review-rating-option input:checked + .site-review-rating-chip--bad {
  background: rgba(220, 38, 38, .14);
  border-color: rgba(220, 38, 38, .3);
  color: #b91c1c;
}

.site-review-textarea-label span {
  display: block;
  margin-bottom: 6px;
  color: #37557f;
  font-size: .86rem;
}

.site-review-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.site-review-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .72);
}

.site-review-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.site-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.site-review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.site-review-avatar--fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .04));
  color: var(--primary);
  font-weight: 800;
  font-size: 1rem;
}

.site-review-author-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.site-review-author-copy strong,
.site-review-reply strong {
  color: var(--text);
}

.site-review-author-copy span {
  color: var(--muted);
  font-size: .76rem;
}

.site-review-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-review-badge--very-good {
  background: rgba(16, 185, 129, .12);
  color: #047857;
}

.site-review-badge--good {
  background: rgba(59, 130, 246, .12);
  color: #1d4ed8;
}

.site-review-badge--bad {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
}

.site-review-comment,
.site-review-reply p {
  margin: 0;
  line-height: 1.55;
  color: var(--text);
}

.site-review-reply {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--primary-rgb), .06);
  border: 1px solid rgba(var(--primary-rgb), .12);
}

.site-reviews-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

[data-theme="dark"] .site-review-form-card,
[data-theme="dark"] .site-review-item,
:root:not([data-theme="light"]) .site-review-form-card,
:root:not([data-theme="light"]) .site-review-item {
  background: linear-gradient(180deg, rgba(22, 34, 56, .96), rgba(16, 25, 41, .94));
  border-color: rgba(120, 160, 220, .18);
}

[data-theme="dark"] .site-review-form-head p,
[data-theme="dark"] .site-review-author-copy span,
:root:not([data-theme="light"]) .site-review-form-head p,
:root:not([data-theme="light"]) .site-review-author-copy span {
  color: #9cb0c8;
}

[data-theme="dark"] .site-review-rating-chip,
:root:not([data-theme="light"]) .site-review-rating-chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(120,160,220,.16);
  color: #f4f7fb;
}

[data-theme="dark"] .site-review-textarea-label span,
:root:not([data-theme="light"]) .site-review-textarea-label span {
  color: #c4d3e7;
}

[data-theme="dark"] .site-review-reply,
:root:not([data-theme="light"]) .site-review-reply {
  background: rgba(var(--primary-rgb), .10);
  border-color: rgba(var(--primary-rgb), .22);
}

[data-theme="dark"] .site-map-canvas,
:root:not([data-theme="light"]) .site-map-canvas {
  background: linear-gradient(180deg, rgba(18,28,46,.96), rgba(14,22,38,.88));
  border-color: rgba(120,160,220,.16);
}

@media (max-width: 640px) {
  .site-map-canvas {
    height: 250px;
  }

  .site-map-popup-actions {
    grid-template-columns: 1fr;
  }

  .site-review-rating-grid {
    grid-template-columns: 1fr;
  }

  .site-review-item-head,
  .site-review-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Map layout (activity chart + city heat) ──────────────────────────── */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr);
  gap: 14px;
}

.map-card,
.map-city-heat-card {
  padding: 14px;
}

.map-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.pharmacy-map-canvas {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(233,242,255,.90));
  padding: 8px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(11,115,255,.25) transparent;
}
.pharmacy-map-canvas svg {
  display: block;
  max-width: none;
}

.pharmacy-map-canvas::-webkit-scrollbar { height: 4px; }
.pharmacy-map-canvas::-webkit-scrollbar-thumb { background: rgba(11,115,255,.25); border-radius: 4px; }

[data-theme="dark"] .pharmacy-map-canvas {
  background: linear-gradient(180deg, rgba(18,28,48,.97), rgba(14,22,40,.93));
}

.activity-top-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.activity-top-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(118, 153, 196, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(230,239,255,.38));
  color: var(--text);
  text-decoration: none;
}

.activity-top-rank {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 10px;
  background: rgba(11,115,255,.10);
  color: var(--primary);
  font-size: .76rem;
  font-weight: 900;
}

.activity-top-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 800;
}

.activity-top-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}

/* map-point: ahora renderizado 100% con elementos reales en JS (ver public-home.js renderMap)
   Se mantiene solo el focus-visible para accesibilidad de teclado */
.map-point:focus-visible {
  outline: 3px solid rgba(11,115,255,.38);
  outline-offset: 6px;
  border-radius: 50%;
}

.city-heat-row {
  display: grid;
  gap: 6px;
}

.city-heat-bar {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  height: 12px;
  background: rgba(8,32,63,.09);
}

.city-heat-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(11,115,255,.82), rgba(16,185,129,.74));
}

.map-legend {
  margin-top: 12px;
}

.compare-card {
  padding: 14px;
}

.compare-group {
  display: grid;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  box-shadow: 0 2px 10px rgba(8,32,63,.05);
  transition: box-shadow .2s;
  overflow: hidden;
}
.compare-group:hover {
  box-shadow: 0 4px 16px rgba(8,32,63,.08);
}

.compare-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(160deg, rgba(11,115,255,.04), rgba(241,248,255,.6));
  border-bottom: 1px solid rgba(8,32,63,.06);
}

.compare-match-list {
  display: grid;
  gap: 0;
}

.compare-match-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(8,32,63,.05);
}
.compare-match-row:last-child {
  border-bottom: none;
}
.compare-match-row:first-child {
  background: rgba(16,185,129,.04);
}

.map-embed {
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: var(--radius);
}

.empty-state,
.status-box {
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  color: #35547d;
  background: rgba(255,255,255,.56);
  padding: 12px;
  font-size: .9rem;
}
.status-box { border-style: solid; min-height: 42px; }
.status-box.ok { border-color: rgba(22, 163, 74, .45); background: rgba(22, 163, 74, .1); }
.status-box.err { border-color: rgba(217, 48, 37, .44); background: rgba(217, 48, 37, .09); color: #861d1a; }
/* Ocultar status-box vacío (sin clase ok/err) */
.status-box:not(.ok):not(.err) { border-color: transparent; background: transparent; min-height: 0; padding: 0; }
.auth-notice-box { margin-top: 12px; }
.auth-notice-bottom { margin-bottom: 12px; }
.stack-tight-top { margin-top: var(--sp-2); }
.auth-two-column-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.skeleton {
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(11,115,255,.07), rgba(11,115,255,.15), rgba(11,115,255,.07));
  background-size: 240% 100%;
  animation: shimmer 1.1s linear infinite;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: rgba(248, 252, 255, .94);
  border-top: 1px solid rgba(10,46,95,.06);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(10,35,84,.06);
}
.bottom-nav a,
.bottom-nav button {
  min-height: 52px;
  border-radius: 14px;
  color: #6b839e;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  transition: color var(--tr-fast), background var(--tr-fast);
  letter-spacing: .02em;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.bottom-nav a.active,
.bottom-nav button.active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), .1);
  font-weight: 700;
}
.bottom-nav a:active,
.bottom-nav button:active { transform: scale(.98); }
.bottom-nav .nav-icon { width: 20px; height: 20px; }

html.is-inside-app .bottom-nav,
body.is-inside-app .bottom-nav {
  display: none !important;
}

.toast-container {
  position: fixed;
  left: 10px;
  right: 10px;
  top: calc(10px + env(safe-area-inset-top));
  z-index: var(--z-toast);
  display: grid;
  gap: 8px;
}
.toast {
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow);
  font-size: .88rem;
  animation: toastIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast.ok { border-left: 4px solid var(--ok); }
.toast.err { border-left: 4px solid var(--danger); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: end;
  justify-content: center;
  padding: 0;
  background: rgba(4, 16, 34, .48);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.modal-backdrop.open { display: flex; animation: modalOverlayIn .2s ease; }
@keyframes modalOverlayIn { from { opacity: 0 } to { opacity: 1 } }
.modal-backdrop-center { align-items: center; padding: 16px; }
.modal-card {
  width: 100%;
  max-width: 760px;
  max-height: 90dvh;
  overflow: auto;
  border-radius: 22px 22px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  animation: modalSlideUp .28s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -8px 40px rgba(4,16,34,.18);
}
@keyframes modalSlideUp { from { transform: translateY(40%); opacity: .5 } to { transform: translateY(0); opacity: 1 } }
.modal-alert-card {
  max-width: 460px;
  border-radius: 24px;
  padding: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(4,16,34,.24);
}
.modal-alert-card .btn { min-width: 132px; }
.modal-backdrop-center[data-tone="err"] .modal-alert-card { border: 1px solid rgba(217,48,37,.18); }
.modal-backdrop-center[data-tone="ok"] .modal-alert-card { border: 1px solid rgba(22,163,74,.18); }
.modal-header { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center; }
.modal-header--product { grid-template-columns: minmax(132px, 184px) 1fr; align-items: start; }
.modal-header .modal-img { border-radius: 16px; box-shadow: 0 4px 16px rgba(10,35,84,.1); }
.modal-img--product {
  width: 100%;
  min-height: 132px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: rgba(245, 249, 255, .92);
}
.modal-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.modal-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.modal-desc { margin-top: 14px; line-height: 1.55; }
.modal-close {
  position: sticky; top: 0; margin-left: auto; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,35,84,.06); border: 1px solid var(--border);
  transition: background var(--tr-fast);
}
.modal-close:hover { background: rgba(10,35,84,.12); }

@media (max-width: 520px) {
  .modal-header--product {
    grid-template-columns: 1fr;
  }

  .modal-img--product {
    max-height: 220px;
  }
}

.admin-page .app-shell {
  width: 100%;
  max-width: none;
  padding: max(10px, env(safe-area-inset-top)) 10px calc(var(--bottom-h) + 24px + env(safe-area-inset-bottom));
}
.admin-layout { display: block; min-height: 100dvh; }
.admin-sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: rgba(247, 252, 255, .94);
  backdrop-filter: blur(14px);
}
.sidebar-header,
.sidebar-footer { display: none; }
.sidebar-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  overflow-x: auto;
}
.sidebar-nav a {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #4f6786;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 8px;
  font-size: .75rem;
  font-weight: 700;
  gap: 8px;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(16,185,129,.10));
  border-color: rgba(42,187,255,.28);
  color: var(--primary);
  box-shadow: inset 3px 0 0 rgba(16,185,129,.75), 0 8px 24px rgba(10,35,84,.08);
}
@media (hover: hover) {
  .sidebar-nav a:hover {
    transform: translateX(2px);
    border-color: rgba(59,130,246,.18);
    background: rgba(59,130,246,.08);
  }
}
.admin-main { padding: 2px 0 0; }
.admin-topbar {
  position: sticky;
  top: max(6px, env(safe-area-inset-top));
  z-index: 35;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 14px;
}
.topbar-title h1 { font-size: 1.12rem; }
.topbar-title p { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.admin-workspace-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 10px;
  padding: 16px;
  border-color: rgba(42, 187, 255, .22);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(16, 185, 129, .08) 48%, rgba(255, 255, 255, .78)),
    rgba(255, 255, 255, .86);
  box-shadow: 0 18px 44px rgba(10, 35, 84, .10), inset 0 1px 0 rgba(255,255,255,.7);
}
.admin-workspace-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,165,233,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.45), transparent 78%);
}
.workspace-copy,
.workspace-badges {
  position: relative;
  z-index: 1;
}
.workspace-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .26);
  background: rgba(16, 185, 129, .10);
  color: #047857;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-workspace-hero h2 {
  margin: 8px 0 4px;
  font-size: clamp(1.28rem, 2vw, 1.9rem);
  line-height: 1.08;
}
.admin-workspace-hero p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.45;
}
.workspace-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.workspace-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, .18);
  background: rgba(255,255,255,.68);
  color: #244363;
  font-size: .78rem;
  font-weight: 800;
}
[data-theme="dark"] .admin-workspace-hero,
:root:not([data-theme="light"]) .admin-workspace-hero {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, .16), rgba(16, 185, 129, .11) 48%, rgba(15, 23, 42, .84)),
    rgba(15, 23, 42, .92);
  border-color: rgba(56, 189, 248, .24);
  box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .workspace-kicker,
:root:not([data-theme="light"]) .workspace-kicker {
  color: #86efac;
  background: rgba(16,185,129,.12);
  border-color: rgba(134,239,172,.22);
}
[data-theme="dark"] .workspace-badge,
:root:not([data-theme="light"]) .workspace-badge {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(125, 211, 252, .20);
  color: #cbd5e1;
}
.admin-view-section {
  margin-bottom: 10px;
}
.admin-view-hidden {
  display: none !important;
}
.admin-view-active {
  display: block;
  animation: adminViewIn .18s ease-out both;
}
@keyframes adminViewIn {
  from { opacity: .4; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 10px; }
.stat .k { font-size: 1.12rem; font-weight: 800; color: var(--primary); }
.product-layout { display: grid; gap: 10px; }

.auth-page .app-shell { max-width: 520px; }
.auth-hub-page .app-shell { max-width: 620px; }
.auth-choice-grid,
.auth-subchoice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
  align-items: stretch;
}
.auth-panel {
  padding: clamp(16px, 3vw, 22px);
}
.user-mode-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.user-mode-panel[hidden] { display: none !important; }
.user-google-hint { margin-top: 12px; }
.auth-panel[hidden] { display: none !important; }
.google-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-page .topbar-inner {
  border-radius: 24px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(10,35,84,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.auth-page .card.glass {
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(10,35,84,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
.auth-page .status-box {
  line-height: 1.45;
}
.auth-page form.stack label {
  font-weight: 600;
  font-size: .86rem;
  color: #2d4a73;
}
.auth-page form.stack label input,
.auth-page form.stack label select {
  margin-top: 6px;
}
.auth-page .btn-primary {
  min-height: 50px;
  font-size: .95rem;
  border-radius: 16px;
  letter-spacing: .01em;
}

/* ─── Mobile keyboard: ensure focused input is visible ──── */
.auth-page,
.auth-page body,
.auth-page .app-shell,
.auth-page .section {
  overscroll-behavior-y: contain;
}
.auth-page .card.glass {
  padding-bottom: 40px;
}
@supports (height: 100dvh) {
  .auth-page form.stack input:focus,
  .auth-page form.stack select:focus,
  .auth-page form.stack textarea:focus {
    scroll-margin-bottom: 200px;
  }
}

/* ─── Optional fields toggle ────────────────────────────── */
.auth-optional-fields summary::-webkit-details-marker { display: none; }
.auth-optional-fields summary { font-size: .85rem; }
.auth-optional-fields[open] summary svg { transform: rotate(45deg); transition: transform var(--tr-fast); }

.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0% { transform: translate(-50%,-50%) scale(1); opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Animaciones de entrada ─────────────────────────────── */
.fade-in { animation: fadeIn var(--tr) both; }
.slide-up { animation: slideUp var(--tr) both; }

/* ─── Loading spinner inline ─────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btn-glass.btn-loading::after {
  border-color: rgba(var(--primary-rgb),.25);
  border-top-color: var(--primary);
}

/* ─── Offline banner ─────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #c62828;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  /* CSS animation when shown via JS (inline style overridden by display:flex below) */
  animation: offlineSlideDown .28s cubic-bezier(.2,.8,.2,1) both;
}
[data-offline="1"] .offline-banner {
  display: block !important;
}
@keyframes offlineSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ─── Dark mode toggle button ────────────────────────────── */
.dark-toggle {
  min-height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dark-toggle:active { transform: scale(.92); }
.dark-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.dark-toggle .icon-moon { display: none; }
.dark-toggle .icon-sun { display: block; }
[data-theme="dark"] .dark-toggle .icon-moon { display: block; }
[data-theme="dark"] .dark-toggle .icon-sun { display: none; }

/* ─── Password strength meter ────────────────────────────── */
.password-strength {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-top: 6px;
  transition: all var(--tr);
}
.password-strength-bar {
  height: 100%;
  border-radius: inherit;
  transition: width .35s ease, background .35s ease;
  width: 0%;
}
.strength-0 .password-strength-bar { width: 0%; }
.strength-1 .password-strength-bar { width: 25%; background: var(--danger); }
.strength-2 .password-strength-bar { width: 50%; background: var(--warn); }
.strength-3 .password-strength-bar { width: 75%; background: #f59e0b; }
.strength-4 .password-strength-bar { width: 100%; background: var(--ok); }
.password-strength-label { font-size: .74rem; margin-top: 4px; color: var(--muted); }

/* ─── Input password toggle ──────────────────────────────── */
.input-password-wrap { position: relative; }
.input-password-wrap input { padding-right: 44px; }
.input-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--muted);
  min-height: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.input-password-toggle svg { width: 18px; height: 18px; }

/* ─── Pull to refresh indicator ──────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-60px);
  z-index: 150;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
  box-shadow: var(--shadow-sm);
}
.ptr-indicator.ptr-visible {
  transform: translateX(-50%) translateY(max(16px, env(safe-area-inset-top)));
}
.ptr-indicator svg { width: 20px; height: 20px; color: var(--primary); }
.ptr-indicator.ptr-loading svg { animation: spin .7s linear infinite; }

/* ─── App download banner (Android) ─────────────────────── */
.app-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.12), rgba(var(--accent-rgb),.08));
  border: 1px solid rgba(var(--primary-rgb),.2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.app-banner.app-banner-visible { display: flex; }
.app-banner-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, var(--primary), #2d8bff); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.app-banner-icon svg { width: 20px; height: 20px; color: #fff; }
.app-banner-text { flex: 1; min-width: 0; }
.app-banner-text strong { display: block; font-size: .88rem; }
.app-banner-text small { color: var(--muted); font-size: .76rem; }
.app-banner-close { background: none; border: none; color: var(--muted); min-height: unset; padding: 4px; cursor: pointer; }

/* ─── Grid de dos columnas ───────────────────────────────── */
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) {
  .grid.two { grid-template-columns: 1fr; }
}

/* ─── Swipe tabs ─────────────────────────────────────────── */
.swipe-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.swipe-tabs::-webkit-scrollbar { display: none; }
.swipe-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--glass);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
  min-height: 38px;
}
.swipe-tab.active {
  background: linear-gradient(145deg, rgba(var(--primary-rgb),.12), rgba(var(--primary-rgb),.06));
  border-color: rgba(var(--primary-rgb),.35);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb),.1);
}

/* ─── Feature badge premium ──────────────────────────────── */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: none;
}

/* ─── Star rating display ────────────────────────────────── */
.star-rating {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
  font-size: 1rem;
}
.star-rating .star-empty { color: var(--border-strong); }

/* ─── Notification dot ───────────────────────────────────── */
.notif-dot {
  position: relative;
  display: inline-flex;
}
.notif-dot::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg);
}

/* ─── Price badge ────────────────────────────────────────── */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 800;
  color: var(--primary);
}
.price-badge .price-currency { font-size: .72em; }
.price-badge .price-original {
  font-size: .8em;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}

/* ─── Smooth scroll de secciones con offset de topbar ─────── */
[id] { scroll-margin-top: calc(var(--topbar-h) + 20px); }

/* ─── Mejor hover en tarjetas ────────────────────────────── */
.list-card, .card {
  transition: box-shadow var(--tr), transform var(--tr-fast);
}
@media (hover: hover) {
  .list-card:hover {
    box-shadow: 0 16px 36px rgba(10,35,84,.18);
    transform: translateY(-1px);
  }
}

/* ─── Mejor focus ring ───────────────────────────────────── */
:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), .5);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Auth inline row ────────────────────────────────────── */
.auth-inline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.auth-inline-grow { flex: 1; min-width: 0; }
.auth-inline-btn { white-space: nowrap; align-self: end; }

/* ─── Mejora de stats en admin ───────────────────────────── */
.stat {
  transition: box-shadow var(--tr), transform var(--tr-fast);
}
@media (hover: hover) {
  .stat:hover {
    box-shadow: 0 8px 24px rgba(10,35,84,.12);
    transform: translateY(-1px);
  }
}
.stat .label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.stat .k { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.stat .trend {
  font-size: .74rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat .trend.up { color: var(--ok); }
.stat .trend.down { color: var(--danger); }

/* ─── Better table rows ──────────────────────────────────── */
.table-row {
  transition: background var(--tr-fast);
}
@media (hover: hover) {
  .table-row:hover {
    background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(243,249,255,.82));
  }
  [data-theme="dark"] .table-row:hover {
    background: rgba(40, 55, 80, .6);
  }
}

/* ─── Meta text ──────────────────────────────────────────── */
.meta { font-size: .82rem; color: var(--muted); }

/* ─── Quick action mejorada ──────────────────────────────── */
.quick-action {
  transition: box-shadow var(--tr), transform var(--tr-fast), background var(--tr-fast);
}
@media (hover: hover) {
  .quick-action:hover {
    box-shadow: 0 10px 22px rgba(10,35,84,.14);
    transform: translateY(-2px);
    background: rgba(255,255,255,.92);
  }
}

/* ─── Responsive sidebar scrollable en mobile ────────────── */
@media (max-width: 599px) {
  .admin-page .app-shell {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .admin-sidebar {
    max-height: calc(72px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .sidebar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .sidebar-nav a {
    flex: 0 0 86px;
    min-height: 52px;
    font-size: .7rem;
    padding: 6px 4px;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }
}

@media (min-width: 600px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-cta .btn:nth-child(1) { grid-column: auto; }
  .offer-strip,
  .site-banners { grid-auto-columns: 48%; }
  .modal-backdrop { align-items: center; padding: 14px; }
  .modal-card { border-radius: 20px; }
  .modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-nav { grid-template-columns: repeat(8, minmax(120px, 1fr)); }
  .admin-workspace-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .workspace-badges { justify-content: flex-end; }
  .auth-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-subchoice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .hero-shell {
    padding: 18px 16px 18px;
    border-radius: 24px;
  }

  .hero-meta-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hero-mini-tag {
    width: 100%;
    justify-content: center;
  }

  .hero-title {
    max-width: none;
  }

  .hero-subtitle {
    max-width: none;
  }

  .home-page .quick-action {
    min-height: 80px;
  }

  .home-page .topbar-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px 8px;
    min-height: 36px;
  }

  .home-page .brand {
    flex-shrink: 0;
    min-width: 0;
  }

  .home-page .topbar-status-cluster {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  .home-page .topbar-online-pill {
    width: auto;
  }

  .pharmacy-site .topbar-inner,
  .pharmacy-public .topbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .pharmacy-site .brand,
  .pharmacy-public .brand,
  .pharmacy-site .topbar-status-cluster,
  .pharmacy-public .topbar-status-cluster {
    width: 100%;
  }

  .topbar-inner {
    align-items: center;
    gap: 6px;
  }

  .topbar-status-cluster {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .topbar-online-pill {
    width: auto;
  }

  .pill-copy {
    gap: 3px;
  }

  .session-name {
    max-width: none;
  }
}

@media (min-width: 960px) {
  .app-shell { padding-inline: 20px; }
  .site-hero-top,
  .pharmacy-hero-row { flex-direction: row; align-items: start; justify-content: space-between; }
  .admin-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; }
  .admin-sidebar {
    position: sticky;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    align-self: start;
    border-radius: 16px;
    border-bottom: 1px solid var(--border);
    padding: 10px;
  }
  .sidebar-header,
  .sidebar-footer { display: block; }
  .sidebar-nav { display: flex; flex-direction: column; overflow: visible; }
  .sidebar-nav a { justify-content: flex-start; font-size: .85rem; padding: 0 12px; }
  .admin-main { padding: 0; }
  .product-layout { grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.3fr); }
}

@media (max-width: 959px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Field error state ──────────────────────────────────── */
input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(217,48,37,.18) !important;
}

/* ─── Meta + tag ─────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb),.10);
  border: 1px solid rgba(var(--primary-rgb),.18);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 600;
}

/* ─── Progress bar ───────────────────────────────────────── */
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .4s ease;
}

/* ─── Empty state mejorado ───────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.empty-state svg {
  width: 36px;
  height: 36px;
  color: var(--muted);
  opacity: .6;
}

/* ─── Divider ────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-4) 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Visibility Panel ────────────────────────────────────────────────────── */
.visibility-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.visibility-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 16px;
  background: var(--surface-2, rgba(255,255,255,.03));
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.visibility-item:last-child { border-bottom: none; }
.visibility-item.vis-on  { background: rgba(30,123,255,.07); }
.visibility-item.vis-off { background: rgba(255,255,255,.02); opacity: .75; }
.vis-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.vis-info strong { font-size: .9rem; }
.vis-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
  color: var(--muted);
  font-size: .8rem;
  transition: color .2s;
}
.vis-toggle.active { color: var(--primary); }
.vis-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--border);
  position: relative;
  display: block;
  transition: background .2s;
  flex-shrink: 0;
}
.vis-toggle.active .vis-track { background: var(--primary); }
.vis-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.vis-toggle.active .vis-thumb { transform: translateX(20px); }
.vis-label { min-width: 40px; text-align: left; }
@media (max-width: 500px) {
  .visibility-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vis-toggle { gap: 10px; }
}

/* ── Social Community improvements ───────────────────────────────────────── */
.social-community-card.is-selected {
  border: 2px solid var(--primary);
  background: rgba(11,115,255,.07);
}
.social-community-header {
  background: rgba(11,115,255,.1);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.social-post-img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 8px 0;
}
.social-post-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.btn-like {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--muted);
  transition: all .15s;
}
.btn-like:hover, .btn-like.liked { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.08); }
.social-comment { padding: 8px 10px; background: var(--surface-2, rgba(255,255,255,.04)); border-radius: 8px; margin-bottom: 4px; }


/* ═══════════════════════════════════════════════════════════════
   COMMUNITY ROOM — full-screen overlay
   ═══════════════════════════════════════════════════════════════ */
.community-room {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: var(--bg, #f3f8ff);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.community-room.cr-open {
  transform: translateX(0);
}
/* Header */
.cr-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 10px);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(10,35,84,.08);
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  min-height: 60px;
  box-shadow: 0 2px 12px rgba(10,35,84,.04);
}
.cr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--primary, #0b73ff);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  border-radius: var(--radius, 10px);
  transition: background .15s;
  flex-shrink: 0;
}
.cr-back-btn:hover { background: rgba(11,115,255,.08); }
.cr-title-block { flex: 1; min-width: 0; }
.cr-name { margin: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-meta { margin: 0; }
.cr-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* Body */
.cr-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.cr-feed-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Individual post card */
.cr-post {
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(248,252,255,.84));
  border: 1px solid rgba(10,35,84,.08);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(8,32,63,.06), inset 0 1px 0 rgba(255,255,255,.6);
  animation: fadeIn .2s ease both;
  transition: box-shadow var(--tr-fast);
}
.cr-post:hover {
  box-shadow: 0 6px 22px rgba(8,32,63,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
.cr-post-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.cr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary, #0b73ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cr-author-info { flex: 1; min-width: 0; }
.cr-author-name { font-weight: 700; font-size: .88rem; margin: 0; }
.cr-post-time { font-size: .72rem; color: #94a3b8; }
.cr-post-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.cr-post-body { margin: 0 0 10px; font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cr-post-body a { color: var(--primary, #0b73ff); text-decoration: underline; word-break: break-all; }
.cr-post-img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(10,35,84,.04);
  display: block;
}
.cr-post-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid rgba(10,35,84,.12);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #08203f);
  font-size: .86rem;
  font-weight: 600;
  background: rgba(255,255,255,.8);
  margin-bottom: 10px;
  transition: background .15s, border-color .15s;
}
.cr-post-file:hover { background: rgba(11,115,255,.06); border-color: rgba(11,115,255,.3); }
.cr-post-file svg { flex-shrink: 0; color: var(--primary, #0b73ff); }
.cr-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(10,35,84,.07);
  margin-top: 2px;
  flex-wrap: wrap;
}
.cr-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid rgba(10,35,84,.12);
  border-radius: 999px;
  background: none;
  color: #64748b;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.cr-like-btn:hover, .cr-like-btn.liked { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.07); }
.cr-like-btn.liked svg { fill: #ef4444; }
.cr-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid rgba(10,35,84,.10);
  border-radius: 999px;
  background: none;
  color: #64748b;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.cr-comment-toggle:hover { background: rgba(10,35,84,.05); }
.cr-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1.5px solid rgba(239,68,68,.2);
  border-radius: 999px;
  background: none;
  color: #ef4444;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s;
  margin-left: auto;
}
.cr-delete-btn:hover { background: rgba(239,68,68,.08); }
/* Comments section */
.cr-comments-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(10,35,84,.10);
}
.cr-comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.cr-comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(11,115,255,.15);
  color: var(--primary, #0b73ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cr-comment-bubble {
  background: rgba(11,115,255,.06);
  border-radius: 0 10px 10px 10px;
  padding: 7px 10px;
  flex: 1;
  font-size: .83rem;
  line-height: 1.45;
}
.cr-comment-name { font-weight: 700; margin-right: 6px; font-size: .78rem; }
.cr-comment-time { font-size: .7rem; color: #94a3b8; }
.cr-comment-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.cr-comment-form input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid rgba(10,35,84,.12);
  border-radius: 999px;
  font-size: .84rem;
  background: rgba(255,255,255,.9);
  outline: none;
  transition: border-color .15s;
}
.cr-comment-form input:focus { border-color: var(--primary, #0b73ff); }
.cr-comment-form button {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
/* Composer */
.cr-composer {
  padding: 14px 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid rgba(10,35,84,.06);
  box-shadow: 0 -2px 12px rgba(10,35,84,.04);
}
.cr-post-form { display: flex; flex-direction: column; gap: 8px; }
.cr-compose-fields { display: flex; flex-direction: column; gap: 6px; }
.cr-title-input, .cr-body-input {
  border: 1.5px solid rgba(10,35,84,.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .9rem;
  background: rgba(255,255,255,.9);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.cr-title-input:focus, .cr-body-input:focus { border-color: var(--primary, #0b73ff); }
.cr-body-input { resize: vertical; min-height: 44px; }
.cr-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cr-tool-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid rgba(10,35,84,.12);
  cursor: pointer;
  color: #64748b;
  background: rgba(255,255,255,.9);
  flex-shrink: 0;
  transition: all .15s;
}
.cr-tool-btn:hover { background: rgba(11,115,255,.08); border-color: rgba(11,115,255,.3); color: var(--primary, #0b73ff); }
.cr-url-input {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border: 1.5px solid rgba(10,35,84,.12);
  border-radius: 10px;
  font-size: .83rem;
  background: rgba(255,255,255,.9);
  outline: none;
  transition: border-color .15s;
}
.cr-url-input:focus { border-color: var(--primary, #0b73ff); }
.cr-send-btn { flex-shrink: 0; }
.cr-upload-status { display: block; width: 100%; }
.cr-composer-status { display: block; }
/* Preview area for selected file */
.cr-preview-area {
  background: rgba(11,115,255,.05);
  border: 1.5px dashed rgba(11,115,255,.25);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .83rem;
}
.cr-preview-area img { max-height: 80px; border-radius: 6px; }
.cr-preview-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.cr-preview-clear:hover { background: rgba(239,68,68,.08); }
/* Login hint */
.cr-login-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  font-size: .9rem;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(10,35,84,.08);
}
.cr-login-hint[hidden] { display: none !important; }
.cr-composer[hidden] { display: none !important; }
/* Tags in posts */
.cr-post-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
/* Empty state inside room */
.cr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
}
/* .sr-only already exists in many frameworks but just in case */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY MEDIA — video, audio, gallery, avatars
   ═══════════════════════════════════════════════════════════════ */
/* Avatar with photo */
.cr-avatar img, .cr-comment-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
/* Video player */
.cr-post-video {
  width: 100%;
  max-height: 420px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #000;
  display: block;
}
/* Audio player */
.cr-post-audio {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 999px;
}
/* Media gallery grid */
.cr-media-gallery {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.cr-media-gallery.mg-1 { grid-template-columns: 1fr; }
.cr-media-gallery.mg-2 { grid-template-columns: 1fr 1fr; }
.cr-media-gallery.mg-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.cr-media-gallery.mg-3 > :first-child { grid-column: 1 / -1; }
.cr-media-gallery.mg-4 { grid-template-columns: 1fr 1fr; }
.cr-media-gallery img, .cr-media-gallery video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  min-height: 120px; max-height: 300px; cursor: pointer;
  transition: opacity .15s;
}
.cr-media-gallery img:hover, .cr-media-gallery video:hover { opacity: .9; }
/* Lightbox overlay for images */
.cr-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}
.cr-lightbox-video-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 90vh;
}
.cr-lightbox img, .cr-lightbox video {
  max-width: 95vw; max-height: 90vh; border-radius: 8px; object-fit: contain;
}
.cr-lightbox-video-play,
.cr-lightbox-video-sound {
  position: absolute;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: rgba(7, 12, 22, .72);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cr-lightbox-video-play {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  z-index: 3;
}
.cr-lightbox-video-play svg {
  width: 38px;
  height: 38px;
  margin-left: 5px;
}
.cr-lightbox-video-sound {
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  z-index: 3;
}
.cr-lightbox-video-play[hidden],
.cr-lightbox-video-sound[hidden] {
  display: none !important;
}
.cr-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; color: #fff;
  font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cr-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ── Share Sheet ───────────────────────────────────────────────── */
.share-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center;
  animation: shareOverlayIn .2s ease;
}
@keyframes shareOverlayIn { from { opacity: 0 } to { opacity: 1 } }
.share-sheet {
  background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 480px;
  padding: 0 0 env(safe-area-inset-bottom, 12px); box-shadow: 0 -4px 30px rgba(0,0,0,.15);
  animation: shareSheetSlide .25s ease;
}
@keyframes shareSheetSlide { from { transform: translateY(100%) } to { transform: translateY(0) } }
.share-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px; border-bottom: 1px solid #f0f0f0;
}
.share-sheet-header strong { font-size: 1.05rem; color: #1a1a1a; }
.share-sheet-close {
  width: 32px; height: 32px; border: none; background: #f0f0f0; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #666; transition: background .15s;
}
.share-sheet-close:hover { background: #e0e0e0; }
.share-sheet-preview {
  padding: 12px 20px; border-bottom: 1px solid #f0f0f0;
}
.share-sheet-text {
  font-size: .9rem; font-weight: 600; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-sheet-sub {
  font-size: .78rem; color: #65676b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-sheet-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 16px 12px;
}
.share-sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 16px;
}
.share-sheet-action-btn {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(120,150,190,.18);
  background: rgba(244,247,252,.94);
  color: #25364f;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 12px;
}
.share-channel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px; text-decoration: none;
  background: none; border: none; cursor: pointer; transition: background .15s;
}
.share-channel:hover { background: #f5f5f5; }
.share-channel-icon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f0f2f5;
}
.share-channel-icon svg { width: 28px; height: 28px; }
.share-channel-name {
  font-size: .72rem; font-weight: 600; color: #333; text-align: center; line-height: 1.2;
}

/* ── Activity Battery Gauge ────────────────────────────────────── */
.activity-legend {
  margin-top: 12px; padding: 16px 12px 12px;
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  border: 1px solid rgba(10,46,95,0.08);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(8,32,63,0.06);
}
.act-battery-row {
  display: flex; align-items: flex-end; justify-content: center; gap: 20px;
  padding: 0 8px;
}
.act-battery-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px;
}
@keyframes actFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.act-battery-gauge {
  display: flex; flex-direction: column; align-items: center;
}
.act-battery-cap {
  width: 14px; height: 5px; border-radius: 3px 3px 0 0;
  margin-bottom: -1px; opacity: 0.9;
}
.act-battery-shell {
  width: 32px; height: 64px;
  border: 2.5px solid rgba(10,46,95,0.15);
  border-radius: 6px;
  background: rgba(10,46,95,0.03);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 3px;
  position: relative;
  overflow: hidden;
}
.act-battery-fill {
  width: 100%; border-radius: 3px;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 4px;
}
.act-battery-count {
  font-size: 1.1rem; font-weight: 800; line-height: 1;
  margin-top: 2px;
}
.act-battery-label {
  font-size: 0.68rem; font-weight: 600; color: #5a6878;
  text-transform: uppercase; letter-spacing: 0.03em;
  text-align: center; line-height: 1.1;
}
.act-battery-summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(10,46,95,0.06);
  font-size: 0.78rem; color: #5a6878;
}
.act-battery-summary strong {
  color: #1a3a5c; font-weight: 700;
}
.act-battery-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  animation: actPulse 2s infinite;
}
.activity-legend--compact {
  padding: 10px;
  border-radius: 16px;
}
.activity-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.activity-stat-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(10,46,95,.08);
}
.activity-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.activity-stat-card strong {
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
}
.activity-stat-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.05;
  text-transform: uppercase;
}
.activity-stat-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
@keyframes actPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.3); }
}

/* ── Redes / Contact Grid ──────────────────────────────────────── */
.redes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.redes-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px; border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,255,.88));
  border: 1.5px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: all .22s cubic-bezier(.2,.8,.2,1); cursor: pointer;
  backdrop-filter: blur(8px);
}
.redes-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-color: rgba(var(--primary-rgb),.35);
}
.redes-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .2s;
}
.redes-item:hover .redes-icon { transform: scale(1.08); }
.redes-label {
  font-size: .78rem; font-weight: 700; text-align: center;
  line-height: 1.2; word-break: break-word; color: #2d4a73;
}

.schedule-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .85rem; }
.schedule-table tr { border-radius: 10px; }
.schedule-table td {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(248,250,255,.6));
  border: none;
}
.schedule-table td:first-child { font-weight: 700; color: #2d4a73; border-radius: 10px 0 0 10px; }
.schedule-table td:last-child { border-radius: 0 10px 10px 0; color: var(--muted); }
.schedule-table tr:hover td { background: rgba(var(--primary-rgb), .06); }

/* Upload preview enhancements */
.cr-preview-area video { max-height: 80px; border-radius: 6px; }
.cr-preview-area audio { max-width: 200px; height: 32px; }
.cr-preview-grid {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cr-preview-item {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(11,115,255,.05); border: 1.5px solid rgba(11,115,255,.15);
  border-radius: 8px; padding: 6px 10px; font-size: .82rem;
}
.cr-preview-item img { max-height: 60px; border-radius: 4px; }
.cr-preview-item video { max-height: 60px; border-radius: 4px; }
.cr-preview-item .cr-preview-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ef4444; color: #fff; border: none; cursor: pointer;
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* Toolbar extra buttons */
.cr-tool-btn.active { background: rgba(11,115,255,.12); border-color: rgba(11,115,255,.4); color: var(--primary, #0b73ff); }
/* Upload progress */
.cr-upload-progress {
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(10,35,84,.08); overflow: hidden; margin-top: 6px;
}
.cr-upload-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--primary, #0b73ff), var(--accent, #10b981)); border-radius: 3px;
  transition: width .25s ease;
}
.cr-upload-overlay {
  position: relative;
  padding: 12px 16px;
  background: rgba(11,115,255,.04);
  border: 1px solid rgba(11,115,255,.12);
  border-radius: 12px;
  margin-bottom: 8px;
}
.cr-upload-overlay[hidden] { display: none !important; }
.cr-upload-info {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; font-size: .84rem;
}
.cr-upload-filename {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-weight: 600;
}
.cr-upload-pct {
  font-weight: 700; color: var(--primary, #0b73ff); min-width: 40px; text-align: right;
}
.cr-upload-spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(11,115,255,.2);
  border-top-color: var(--primary, #0b73ff); border-radius: 50%;
  animation: crSpin .7s linear infinite; flex-shrink: 0;
}
@keyframes crSpin { to { transform: rotate(360deg); } }
.cr-upload-done { color: var(--ok, #16a34a); font-weight: 600; font-size: .84rem; }
.cr-upload-err { color: var(--danger, #d93025); font-weight: 600; font-size: .84rem; }

/* Global upload progress toast (for pharmacy/admin panels) */
.upload-progress-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9999; min-width: 280px; max-width: 400px;
  background: var(--glass-strong, #fff); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow);
}
.upload-progress-toast[hidden] { display: none !important; }
/* Post type indicators */
.cr-post-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; color: #64748b;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(10,35,84,.04);
}
/* Enhanced post card */
.cr-post { transition: box-shadow .2s; }
.cr-post:hover { box-shadow: 0 4px 16px rgba(8,32,63,.1); }
/* Reactions bar */
.cr-reactions {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0; font-size: .78rem; color: #94a3b8;
}
.cr-reactions strong { color: var(--text, #08203f); }
/* Share button in post */
.cr-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1.5px solid rgba(10,35,84,.10);
  border-radius: 999px; background: none; color: #64748b;
  font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.cr-share-btn:hover { background: rgba(10,35,84,.05); }
/* Composer avatar */
.cr-composer-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.cr-composer-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary, #0b73ff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0; text-transform: uppercase;
}
.cr-composer-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cr-composer-name { font-weight: 600; font-size: .88rem; }

/* ── Emoji Picker ───────────────────────────────────────────── */
.cr-emoji-picker {
  background: var(--glass-strong, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}
.cr-emoji-picker[hidden] { display: none !important; }
.cr-emoji-cats { display: flex; gap: 2px; margin-bottom: 8px; overflow-x: auto; padding-bottom: 4px; }
.cr-emoji-cat-btn {
  border: none; background: none; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; font-size: .82rem;
  white-space: nowrap; color: var(--muted);
}
.cr-emoji-cat-btn.active { background: var(--primary); color: #fff; }
.cr-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.cr-emoji-grid button {
  border: none; background: none; cursor: pointer;
  font-size: 1.35rem; padding: 4px; border-radius: 6px;
  transition: background .12s;
}
.cr-emoji-grid button:hover { background: rgba(11,115,255,.1); }

/* ── Link Preview ───────────────────────────────────────────── */
.cr-link-preview {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass, #fff);
  margin-bottom: 4px;
}
.cr-link-preview[hidden] { display: none !important; }
.cr-link-preview-img {
  width: 100%; max-height: 200px; object-fit: cover; display: block;
}
.cr-link-preview-body {
  padding: 10px 14px;
}
.cr-link-preview-site {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 2px;
}
.cr-link-preview-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
  margin: 0 0 4px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-link-preview-desc {
  font-size: .8rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.cr-link-preview-close {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.5); color: #fff;
  cursor: pointer; font-size: 1rem; display: flex;
  align-items: center; justify-content: center;
}

/* ── Post Link Preview Card (in feed) ───────────────────────── */
.cr-post-link-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass, #fff);
  cursor: pointer;
  transition: box-shadow .18s;
  margin-top: 6px;
}
.cr-post-link-card:hover { box-shadow: var(--shadow-sm); }
.cr-post-link-card img {
  width: 100%; max-height: 200px; object-fit: cover; display: block;
}
.cr-post-link-card-body {
  padding: 10px 14px;
}
.cr-post-link-card-site {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 2px;
}
.cr-post-link-card-title {
  font-size: .88rem; font-weight: 700; color: var(--text);
  margin: 0 0 2px; line-height: 1.3;
}
.cr-post-link-card-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.social-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(6, 12, 24, .72);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.social-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.social-viewer-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top, rgba(27, 67, 170, .18), transparent 28%),
    linear-gradient(180deg, rgba(248,251,255,.985), rgba(231,240,252,.99));
}
.social-viewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(120,150,190,.18);
  flex-shrink: 0;
}
.social-viewer-back {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(120,150,190,.18);
  background: rgba(255,255,255,.72);
  display: grid;
  place-items: center;
}
.social-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-viewer-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(120,150,190,.18);
  background: rgba(255,255,255,.78);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(11, 20, 40, .08);
}
.social-viewer-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-viewer-title-block strong { font-size: 1rem; }
.social-viewer-title-block span { font-size: .78rem; color: #62748e; }
.social-viewer-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.social-viewer-pane {
  height: 100%;
  overflow: auto;
  padding: 14px;
}
.social-viewer-pane[data-social-pane="recent"],
.social-viewer-pane[data-social-pane="trending"] {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 14px;
}
.social-viewer-pane[hidden] { display: none !important; }
.social-pane-appbar,
.social-messages-topbar,
.social-trending-hero,
.social-creator-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.social-pane-appbar-titles,
.social-creator-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-pane-appbar-titles strong,
.social-creator-hero-copy h3,
.social-trending-hero h3 {
  margin: 0;
  font-size: 1.08rem;
}
.social-pane-appbar-titles span,
.social-creator-hero-copy p,
.social-trending-hero p {
  margin: 0;
  color: #62748e;
  font-size: .82rem;
  line-height: 1.45;
}
.social-viewer-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 0 14px;
}
.social-viewer-searchfield {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(120,150,190,.18);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 28px rgba(4,13,28,.08);
  color: #24425f;
}
.social-viewer-searchfield input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}
.social-viewer-search-submit {
  min-width: 104px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(77,180,255,.24);
  background: linear-gradient(135deg, #0b73ff, #1f9bff);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(11,115,255,.2);
}
.social-trending-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(236, 72, 153, .12);
  color: #db2777;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.social-creator-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.social-creator-modes span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 17, 34, .82);
  color: #f8fbff;
  font-size: .76rem;
  font-weight: 700;
}
.social-trending-hero,
.social-creator-hero {
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(13,20,33,.96), rgba(24,39,68,.94)),
    linear-gradient(135deg, rgba(11,115,255,.18), rgba(236,72,153,.16));
  color: #f8fbff;
  box-shadow: 0 20px 48px rgba(12, 20, 40, .16);
}
.social-trending-hero p,
.social-creator-hero-copy p {
  color: rgba(235, 244, 255, .8);
}
.social-vertical-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.social-viewer-post {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(120,150,190,.16);
  box-shadow: 0 24px 56px rgba(15,35,80,.12);
  padding: 0;
  min-height: min(74vh, 720px);
  scroll-snap-align: start;
  transform: translateY(14px) scale(.988);
  opacity: .88;
  transition: transform .36s ease, opacity .36s ease, box-shadow .36s ease;
}
.social-viewer-post.is-in-view {
  transform: translateY(0) scale(1);
  opacity: 1;
  box-shadow: 0 28px 70px rgba(15,35,80,.18);
}
.social-viewer-post-media-shell {
  position: relative;
  min-height: inherit;
  height: 100%;
}
.social-viewer-post-media {
  min-height: inherit;
  height: 100%;
}
.social-viewer-post-media .cr-media-gallery,
.social-viewer-post-media .cr-media-item,
.social-viewer-post-media .cr-post-image,
.social-viewer-post-media .cr-post-video {
  border-radius: 0 !important;
}
.social-viewer-post-media .cr-post-video,
.social-viewer-post-media .cr-post-image {
  width: 100%;
  height: min(74vh, 720px);
  max-height: none;
  object-fit: cover;
  background: #04070d;
}
.cr-video-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(32,44,66,.96), rgba(9,14,24,.98));
}
.cr-video-wrap .cr-post-video {
  position: relative;
  z-index: 1;
}
.cr-video-loading-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.05) 8%, rgba(255,255,255,.14) 18%, rgba(255,255,255,.05) 33%),
    linear-gradient(180deg, rgba(20,29,45,.92), rgba(9,14,24,.96));
  background-size: 220% 100%, 100% 100%;
  animation: videoPosterPulse 1.35s linear infinite;
  transition: opacity .28s ease;
}
.cr-video-wrap.has-poster .cr-video-loading-mask {
  background:
    linear-gradient(180deg, rgba(6,10,18,.08), rgba(6,10,18,.42));
}
.cr-video-wrap.is-video-ready .cr-video-loading-mask {
  opacity: 0;
  pointer-events: none;
}
.cr-video-wrap:not(.is-video-ready) .cr-post-video {
  opacity: .94;
}
.cr-video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(8, 13, 24, .62);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: manipulation;
}
.cr-video-play-btn svg {
  width: 38px;
  height: 38px;
  margin-left: 5px;
}
.cr-video-play-btn[hidden] {
  display: none !important;
}
.cr-video-wrap--room {
  background: rgba(6, 10, 18, .42);
  border-radius: 14px;
}
.cr-video-wrap--room .cr-post-video {
  margin-bottom: 0;
  opacity: 1 !important;
}
.cr-video-wrap--room .cr-video-loading-mask {
  display: none;
}
.cr-video-wrap--standalone {
  overflow: hidden;
  min-height: 320px;
}
.cr-post-video-poster {
  display: block;
  width: 100%;
  min-height: 320px;
  max-height: min(72vh, 720px);
  object-fit: cover;
  background: #090f1a;
}
.cr-post-video-poster--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.92);
}
.cr-post-video-poster--fallback svg {
  width: 72px;
  height: 72px;
}
.cr-video-open-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(8, 13, 24, .56);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
  cursor: pointer;
  touch-action: manipulation;
}
.cr-video-open-btn__icon svg {
  width: 46px;
  height: 46px;
  margin-left: 5px;
}
.cr-video-expand-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(7, 12, 22, .7);
  color: #f4f8ff;
  z-index: 3;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.cr-video-expand-btn span {
  font-size: .84rem;
  font-weight: 700;
}
@keyframes videoPosterPulse {
  0% { background-position: 140% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
.social-viewer-post-media-shell.is-fit-contain .cr-post-video,
.social-viewer-post-media-shell.is-fit-contain .cr-post-image {
  object-fit: contain;
  background: #000;
}
.social-viewer-post-gradient {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(7, 12, 22, .18) 0%, rgba(7, 12, 22, .02) 26%, rgba(7, 12, 22, .55) 62%, rgba(7, 12, 22, .92) 100%);
  pointer-events: none;
}
.social-viewer-post-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px 20px;
  pointer-events: none;
}
.social-viewer-post-overlay button,
.social-viewer-post-overlay a,
.social-viewer-post-overlay input,
.social-viewer-post-overlay textarea,
.social-viewer-post-overlay label {
  pointer-events: auto;
}
.social-viewer-post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.social-viewer-author {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: none;
  color: #fff;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.social-viewer-author span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.social-viewer-author strong {
  font-size: 1.08rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.42);
}
.social-viewer-author small { color: rgba(235, 244, 255, .74); font-size: .74rem; }
.social-viewer-post-head-right {
  justify-content: flex-end;
  align-items: flex-start;
}
.social-viewer-post-copy {
  max-width: min(74%, 640px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-viewer-post-title { margin: 0; font-size: 1.08rem; color: #f8fbff; }
.social-viewer-post-body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(241, 246, 255, .96);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.social-viewer-post-placeholder {
  border: 1px dashed rgba(120,150,190,.24);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  color: #d5e3f6;
  font-size: .84rem;
  margin: 18px;
  background: rgba(11, 19, 33, .64);
}
.social-viewer-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.social-viewer-post-tags .pill {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
  color: #f8fbff;
}
.social-viewer-post-comment-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(7, 12, 22, .45);
  backdrop-filter: blur(12px);
  color: rgba(245, 249, 255, .92);
  font-size: .82rem;
}
.social-viewer-post-comment-preview span {
  color: rgba(229, 239, 251, .82);
  line-height: 1.45;
}
.social-viewer-actions-rail {
  position: absolute;
  right: 12px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.social-viewer-action-avatar {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 13, 24, .42);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
}
.social-viewer-action-btn {
  min-width: 66px;
  min-height: 66px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8, 13, 24, .42);
  color: #fff;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 800;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.social-viewer-action-btn--compact {
  min-height: 58px;
  min-width: 66px;
  gap: 3px;
  font-size: .68rem;
}
.social-viewer-action-btn:hover,
.social-viewer-action-btn:focus-visible {
  transform: translateY(-2px) scale(1.04);
}
.social-viewer-action-btn.is-active {
  background: linear-gradient(180deg, rgba(236,72,153,.92), rgba(219,39,119,.92));
  border-color: rgba(255,255,255,.24);
}
.social-viewer-action-users {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 2px;
}
.social-reaction-avatar {
  display: inline-flex;
  margin-top: -8px;
  position: relative;
  animation: socialReactionFloat 4.6s ease-in-out infinite;
}
.social-reaction-avatar:first-child {
  margin-top: 0;
}
.social-reaction-avatar:nth-child(2) { animation-delay: .35s; }
.social-reaction-avatar:nth-child(3) { animation-delay: .7s; }
.social-reaction-avatar:nth-child(4) { animation-delay: 1.05s; }
.social-reaction-avatar:nth-child(5) { animation-delay: 1.4s; }
.social-reaction-avatar:nth-child(6) { animation-delay: 1.75s; }
.social-reaction-heart-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4d8d, #db2777);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .58rem;
  font-weight: 900;
  border: 2px solid rgba(8,13,24,.84);
}
@keyframes socialReactionFloat {
  0%, 100% {
    opacity: .2;
    transform: translateY(10px) scale(.9);
  }
  18%, 55% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  82% {
    opacity: .72;
    transform: translateY(-18px) scale(1.03);
  }
}
.social-like-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 4;
}
.social-like-burst-heart {
  position: absolute;
  width: 88px;
  height: 88px;
  color: rgba(255,255,255,.96);
  filter: drop-shadow(0 12px 30px rgba(236,72,153,.38));
  animation: socialLikeBurst .82s ease forwards;
}
.social-like-burst-heart--alt {
  width: 44px;
  height: 44px;
  color: rgba(236,72,153,.94);
  animation-delay: .08s;
}
.social-viewer-post-foot {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  color: rgba(235, 244, 255, .76);
  font-size: .82rem;
  padding: 12px 16px 14px;
  background: rgba(9, 17, 34, .92);
}
.social-viewer-post-foot-left,
.social-viewer-post-foot-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.social-viewer-foot-btn {
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #f4f8ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
}
.social-viewer-foot-btn.is-active {
  background: linear-gradient(135deg, rgba(11,115,255,.22), rgba(16,185,129,.22));
  border-color: rgba(77,180,255,.36);
}
.social-viewer-comment-dock {
  padding: 14px 16px 18px;
  background: rgba(7, 14, 24, .98);
  border-top: 1px solid rgba(120,150,190,.12);
}
.social-viewer-comment-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.social-viewer-comment-usercopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-viewer-comment-usercopy strong {
  color: #f4f8ff;
}
.social-viewer-comment-usercopy span {
  color: #8ba3c0;
  font-size: .78rem;
}
.social-viewer-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}
.social-viewer-comment-form textarea {
  min-height: 54px;
  resize: vertical;
}
@keyframes socialLikeBurst {
  0% {
    opacity: 0;
    transform: scale(.2);
  }
  18% {
    opacity: 1;
    transform: scale(1.14);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-32px) scale(.84);
  }
}
.social-pane-intro { margin-bottom: 12px; }
.social-pane-intro h3 { margin: 0 0 4px; }
.social-pane-intro p { margin: 0; color: #6b7c93; font-size: .84rem; }
.social-upload-card,
.social-messages-sidebar,
.social-messages-chat,
.social-profile-card {
  border-radius: 24px;
  padding: 16px;
}
.social-viewer-upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.social-viewer-upload-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .86rem;
  font-weight: 600;
}
.social-viewer-upload-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.social-viewer-upload-tools .cr-tool-btn {
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(120,150,190,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,245,255,.92)),
    linear-gradient(135deg, rgba(11,115,255,.12), rgba(16,185,129,.10));
  color: #24425f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  text-align: center;
  box-shadow: 0 14px 28px rgba(4,13,28,.10);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.social-viewer-upload-tools .cr-tool-btn:hover,
.social-viewer-upload-tools .cr-tool-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11,115,255,.24);
  box-shadow: 0 18px 32px rgba(11,115,255,.14);
}
.social-viewer-upload-tools .cr-tool-btn svg {
  width: 18px;
  height: 18px;
}
.social-viewer-upload-tools .cr-tool-btn span {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.1;
}
.social-viewer-messages {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  min-height: 100%;
}
.social-story-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.social-story-pill {
  min-width: 84px;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.social-story-pill.is-active {
  transform: translateY(-1px);
}
.social-story-pill.is-pinned .social-story-ring {
  box-shadow: 0 16px 30px rgba(245, 158, 11, .26);
}
.social-story-pill.is-muted {
  opacity: .78;
}
.social-story-pill.has-unread .social-story-ring {
  box-shadow: 0 16px 30px rgba(var(--primary-rgb), .28);
}
.social-story-pill strong {
  font-size: .72rem;
  line-height: 1.25;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-story-copy {
  display: grid;
  gap: 2px;
}
.social-story-copy small {
  font-size: .66rem;
  color: #6b7c93;
  line-height: 1.2;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), #10b981);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .22);
}
.social-story-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  padding: 3px;
  background: linear-gradient(135deg, #22c55e, #0ea5e9, #ec4899);
  box-shadow: 0 14px 24px rgba(12, 20, 40, .14);
  position: relative;
}
.social-story-ring .avatar {
  background: var(--surface);
}
.social-story-pill--create .social-story-ring {
  background: linear-gradient(135deg, #0b73ff, #22c55e);
}
.social-people-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.social-messages-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.social-messages-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.social-messages-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-messages-filters label span {
  font-size: .72rem;
  font-weight: 700;
  color: #6b7c93;
}
.social-messages-summary-card {
  padding: 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 24px rgba(15,35,80,.05);
}
.social-messages-summary-card strong {
  font-size: 1rem;
}
.social-messages-summary-card span {
  font-size: .72rem;
  color: #6b7c93;
}
.social-messages-summary-card.is-accent {
  background: linear-gradient(135deg, rgba(11,115,255,.12), rgba(16,185,129,.10));
}
.social-draft-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: #b45309;
  font-size: .7rem;
  font-weight: 800;
}
.social-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: #b45309;
  font-size: .68rem;
  font-weight: 800;
}
.social-mute-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .16);
  color: #475569;
  font-size: .68rem;
  font-weight: 800;
}
.social-person-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.8);
  border-radius: 18px;
  padding: 10px 12px;
  text-align: left;
  position: relative;
  transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.social-person-card.is-active {
  border-color: rgba(11,115,255,.26);
  box-shadow: 0 16px 28px rgba(11,115,255,.12);
}
.social-person-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}
.social-presence-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #94a3b8;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 4px 10px rgba(15,23,42,.18);
}
.social-presence-dot.is-online {
  background: #22c55e;
}
.social-person-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.social-person-copy small { color: #6b7c93; }
.social-chat-head {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(120,150,190,.16);
}
.social-chat-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 10px 0 2px;
}
.social-chat-search {
  margin: 8px 0 0;
}
.social-messages-search--global {
  margin: 10px 0 12px;
}
.social-chat-peer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-chat-pin-btn {
  margin-left: auto;
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.82);
  color: #6b7c93;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.social-chat-pin-btn.is-active {
  border-color: rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .12);
  color: #b45309;
}
.social-chat-mute-btn {
  margin-left: auto;
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.82);
  color: #6b7c93;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.social-chat-mute-btn.is-active {
  border-color: rgba(100, 116, 139, .22);
  background: rgba(100, 116, 139, .12);
  color: #475569;
}
.social-chat-peer span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-chat-peer small { color: #6b7c93; }
.social-chat-messages {
  min-height: 280px;
  max-height: 52vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
}
.social-chat-load-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 4px;
}
.social-chat-load-more[hidden] { display: none !important; }
.social-chat-message { display: flex; }
.social-chat-message.is-own { justify-content: flex-end; }
.social-chat-bubble {
  max-width: min(84%, 520px);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(120,150,190,.14);
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(15,35,80,.06);
  position: relative;
}
.social-chat-message.is-own .social-chat-bubble {
  background: linear-gradient(135deg, rgba(11,115,255,.16), rgba(16,185,129,.14));
}
.social-chat-delete-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.social-chat-delete-btn:hover {
  color: #ef4444;
}
.social-chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,115,255,.16);
  background: rgba(11,115,255,.06);
}
.social-chat-reply-preview[hidden] { display: none !important; }
.social-chat-reply-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.social-chat-reply-preview-copy span {
  color: #6b7c93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-chat-quoted {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(120,150,190,.16);
  border-left: 3px solid rgba(11,115,255,.65);
  border-radius: 12px;
  background: rgba(8,32,63,.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.social-chat-quoted span {
  color: #6b7c93;
  font-size: .78rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.social-chat-deleted {
  font-style: italic;
  color: #6b7c93;
}
.social-chat-bubble small {
  display: block;
  margin-top: 6px;
  color: #6b7c93;
  font-size: .72rem;
}
.social-chat-message-state {
  display: inline-flex;
  margin-top: 6px;
  font-size: .7rem;
  font-weight: 700;
  color: #6b7c93;
}
.social-chat-message-state.is-read {
  color: #0b73ff;
}
.social-chat-typing {
  transition: color .18s ease;
}
.social-chat-typing.is-active {
  color: #0b73ff !important;
  font-weight: 700;
}
.social-chat-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.social-chat-media-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(11,115,255,.05);
  border: 1px solid rgba(120,150,190,.16);
  color: inherit;
  text-decoration: none;
}
.social-chat-media-card > span,
.social-chat-media-card > strong {
  font-size: .84rem;
}
.social-chat-media-card > small {
  display: block;
  margin: 0;
  color: #6b7c93;
  font-size: .72rem;
}
.social-chat-file-card {
  align-items: flex-start;
}
.social-chat-file-card svg {
  width: 18px;
  height: 18px;
}
.social-chat-image,
.social-chat-video {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 14px;
  background: #000;
}
.social-chat-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(120,150,190,.16);
}
.social-quick-replies-manager {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}
.social-inbox-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}
.social-quick-replies-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-quick-replies-head span {
  display: block;
  font-size: .75rem;
  color: #6b7c93;
  margin-top: 2px;
}
.social-quick-replies {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.social-quick-replies-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-quick-reply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-quick-reply-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-quick-reply-form label span {
  font-size: .76rem;
  font-weight: 700;
  color: #52647a;
}
.social-quick-reply-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.social-quick-reply-chip {
  min-width: 132px;
  max-width: 240px;
  border: 1px solid rgba(11,115,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(236,245,255,.95));
  border-radius: 16px;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 24px rgba(15,35,80,.06);
}
.social-quick-reply-chip strong {
  font-size: .8rem;
}
.social-quick-reply-chip span {
  font-size: .72rem;
  color: #6b7c93;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-quick-reply-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.social-quick-reply-row-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 10px 12px;
  text-align: left;
}
.social-quick-reply-row-copy strong {
  font-size: .8rem;
}
.social-quick-reply-row-copy span {
  font-size: .72rem;
  color: #6b7c93;
}
.social-quick-reply-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.social-inbox-item {
  border: 1px solid rgba(120,150,190,.16);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social-inbox-item strong {
  font-size: .82rem;
}
.social-inbox-item p {
  margin: 0;
  font-size: .76rem;
  color: #52647a;
}
.social-inbox-item small {
  color: #6b7c93;
  font-size: .7rem;
}
.btn-xs {
  min-height: 32px;
  padding: 8px 10px;
  font-size: .75rem;
}
@media (max-width: 720px) {
  .social-messages-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-messages-filters {
    grid-template-columns: 1fr;
  }
  .social-quick-reply-row {
    flex-direction: column;
  }
  .social-quick-reply-row-actions {
    flex-direction: row;
  }
}
.social-chat-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.social-chat-toolbar-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.social-chat-toolbar-tools .cr-tool-btn {
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(120,150,190,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,245,255,.92)),
    linear-gradient(135deg, rgba(11,115,255,.12), rgba(16,185,129,.10));
  color: #24425f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(4,13,28,.08);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.social-chat-toolbar-tools .cr-tool-btn:hover,
.social-chat-toolbar-tools .cr-tool-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11,115,255,.24);
  box-shadow: 0 16px 30px rgba(11,115,255,.14);
}
.social-chat-toolbar-tools .cr-tool-btn svg {
  width: 18px;
  height: 18px;
}
.social-chat-toolbar-tools .cr-tool-btn span {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.05;
}
.social-chat-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.social-chat-input-row textarea {
  flex: 1;
  min-height: 48px;
  resize: vertical;
}
.social-viewer-nav-btn {
  position: relative;
}
.social-viewer-nav-badge {
  position: absolute;
  top: 6px;
  right: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(239,68,68,.28);
}
.social-profile-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.social-profile-cover {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px;
}
.social-profile-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-profile-copy h3 { margin: 0; }
.social-profile-handle {
  font-size: .86rem;
  color: #7186a3;
  font-weight: 700;
}
.social-profile-copy p { margin: 0; color: #52647a; }
.social-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  font-size: .82rem;
  color: #52647a;
}
.social-profile-stats span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(11, 115, 255, .08);
}
.social-profile-stats small {
  color: inherit;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.social-profile-stats strong { color: var(--text); }
.social-profile-microstats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #52647a;
  font-size: .8rem;
}
.social-profile-microstats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 17, 34, .06);
}
.social-profile-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social-profile-contact span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(120,150,190,.16);
  color: inherit;
  font-size: .8rem;
}
.social-profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.social-profile-post {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(120,150,190,.16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-profile-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(9, 30, 66, .12);
  border-color: rgba(59,130,246,.24);
}
.social-profile-post img,
.social-profile-post video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: #000;
}
.social-profile-post-cover {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.2));
}
.social-profile-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-profile-post-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(10, 18, 34, .72);
  color: #fff;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .22);
}
.social-profile-post-copy {
  padding: 8px 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.social-profile-post-copy strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-profile-post-copy small { color: #6b7c93; }
.social-profile-post-fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  color: #6b7c93;
  font-size: .82rem;
  background:
    linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.08)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,.08) 8px 16px);
  gap: 8px;
  text-align: center;
  padding: 10px;
}
.social-profile-post-fallback.is-video {
  color: #eef4ff;
  background:
    linear-gradient(180deg, rgba(15,23,42,.34), rgba(15,23,42,.62)),
    radial-gradient(circle at 30% 30%, rgba(59,130,246,.34), transparent 52%);
}
.social-viewer-nav {
  flex-shrink: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(10,46,95,.06);
  background: rgba(248, 252, 255, .94);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 -4px 20px rgba(10,35,84,.06);
}
.social-viewer-nav-btn {
  min-height: 52px;
  border-radius: 14px;
  border: none;
  background: transparent;
  font-size: .7rem;
  font-weight: 600;
  color: #6b839e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  letter-spacing: .02em;
  transition: color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast);
}
.social-viewer-nav-btn.is-active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), .1);
  font-weight: 700;
}
.social-viewer-nav-btn:active { transform: scale(.98); }
.social-viewer-nav-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-viewer-nav-icon svg {
  width: 20px;
  height: 20px;
}
.social-viewer-nav-label {
  line-height: 1;
}
.social-viewer-nav-btn--plus .social-viewer-nav-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0b73ff;
  box-shadow: inset 0 0 0 1px rgba(11,115,255,.12), 0 8px 18px rgba(11,115,255,.12);
}
.social-viewer-nav-btn--plus.is-active .social-viewer-nav-icon {
  background: linear-gradient(135deg, rgba(11,115,255,.94), rgba(16,185,129,.92));
  color: #fff;
  box-shadow: 0 10px 24px rgba(11,115,255,.24);
}
.social-viewer-nav-icon--plus {
  font-size: 1.15rem;
  font-weight: 900;
}

@media (max-width: 860px) {
  .social-viewer-pane {
    padding: 12px;
  }
  .social-viewer-messages {
    grid-template-columns: 1fr;
  }
  .social-viewer-pane[data-social-pane="messages"].is-chat-open .social-story-rail,
  .social-viewer-pane[data-social-pane="messages"].is-chat-open .social-messages-sidebar {
    display: none;
  }
  .social-viewer-pane[data-social-pane="messages"].is-chat-open .social-messages-chat {
    min-height: calc(100vh - 232px);
  }
  .social-chat-messages {
    max-height: 36vh;
  }
  .social-chat-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .social-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-viewer-actions-rail {
    right: 10px;
    bottom: 96px;
  }
}

@media (max-width: 640px) {
  .social-viewer-header {
    padding: 10px 12px;
  }
  .social-viewer-searchbar {
    grid-template-columns: 1fr;
  }
  .social-viewer-search-submit {
    width: 100%;
  }
  .social-viewer-header .btn-sm {
    min-height: 38px;
    padding: 6px 10px;
  }
  .social-viewer-post {
    border-radius: 20px;
    min-height: 72vh;
  }
  .social-viewer-post-head {
    align-items: flex-start;
  }
  .social-viewer-post-head-right {
    justify-content: flex-start;
  }
  .social-viewer-comment-form {
    grid-template-columns: 1fr;
  }
  .social-profile-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .social-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .social-profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .social-viewer-post-copy {
    max-width: calc(100% - 84px);
  }
  .social-viewer-actions-rail {
    right: 8px;
    bottom: 104px;
  }
  .social-viewer-action-btn {
    min-width: 56px;
    min-height: 56px;
    border-radius: 18px;
    font-size: .68rem;
  }
  .social-viewer-action-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }
  .social-viewer-upload-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .social-chat-toolbar-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .social-viewer-nav {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .social-profile-post-copy {
    padding: 7px 8px 9px;
  }
  .social-profile-post-copy strong {
    font-size: .8rem;
  }
  .social-profile-post-copy small {
    font-size: .68rem;
  }
  .social-viewer-nav-btn {
    min-height: 44px;
    font-size: .68rem;
    border-radius: 14px;
  }
}

[data-theme="dark"] .social-viewer-shell,
:root:not([data-theme="light"]) .social-viewer-shell {
  background:
    radial-gradient(circle at top, rgba(17, 74, 178, .22), transparent 24%),
    linear-gradient(180deg, rgba(7,12,22,.985), rgba(5,10,18,.985));
}
[data-theme="dark"] .social-viewer-header,
[data-theme="dark"] .social-viewer-nav,
:root:not([data-theme="light"]) .social-viewer-header,
:root:not([data-theme="light"]) .social-viewer-nav {
  background: rgba(8,14,24,.92);
  border-color: rgba(120,150,190,.14);
}
[data-theme="dark"] .social-viewer-header-icon,
[data-theme="dark"] .social-viewer-action-btn,
[data-theme="dark"] .social-profile-stats span,
[data-theme="dark"] .social-profile-microstats span,
[data-theme="dark"] .social-story-pill strong,
:root:not([data-theme="light"]) .social-viewer-header-icon,
:root:not([data-theme="light"]) .social-viewer-action-btn,
:root:not([data-theme="light"]) .social-profile-stats span,
:root:not([data-theme="light"]) .social-profile-microstats span,
:root:not([data-theme="light"]) .social-story-pill strong {
  color: #f4f8ff;
}
[data-theme="dark"] .social-viewer-searchfield,
:root:not([data-theme="light"]) .social-viewer-searchfield {
  background: rgba(18,26,40,.9);
  border-color: rgba(120,150,190,.16);
  color: #f4f8ff;
}
[data-theme="dark"] .social-viewer-searchfield input,
:root:not([data-theme="light"]) .social-viewer-searchfield input {
  color: #f4f8ff;
}
[data-theme="dark"] .social-viewer-back,
[data-theme="dark"] .social-viewer-post,
[data-theme="dark"] .social-upload-card,
[data-theme="dark"] .social-messages-sidebar,
[data-theme="dark"] .social-messages-chat,
[data-theme="dark"] .social-messages-summary-card,
[data-theme="dark"] .social-quick-replies-manager,
[data-theme="dark"] .social-inbox-panel,
[data-theme="dark"] .social-inbox-item,
[data-theme="dark"] .social-quick-reply-row-copy,
[data-theme="dark"] .social-profile-card,
[data-theme="dark"] .social-person-card,
[data-theme="dark"] .social-profile-post,
:root:not([data-theme="light"]) .social-viewer-back,
:root:not([data-theme="light"]) .social-viewer-post,
:root:not([data-theme="light"]) .social-upload-card,
:root:not([data-theme="light"]) .social-messages-sidebar,
:root:not([data-theme="light"]) .social-messages-chat,
:root:not([data-theme="light"]) .social-messages-summary-card,
:root:not([data-theme="light"]) .social-quick-replies-manager,
:root:not([data-theme="light"]) .social-inbox-panel,
:root:not([data-theme="light"]) .social-inbox-item,
:root:not([data-theme="light"]) .social-quick-reply-row-copy,
:root:not([data-theme="light"]) .social-profile-card,
:root:not([data-theme="light"]) .social-person-card,
:root:not([data-theme="light"]) .social-profile-post {
  background: rgba(18,26,40,.9);
  border-color: rgba(120,150,190,.16);
}
[data-theme="dark"] .social-viewer-action-avatar,
:root:not([data-theme="light"]) .social-viewer-action-avatar {
  background: rgba(8,13,24,.56);
  border-color: rgba(120,150,190,.2);
}
[data-theme="dark"] .social-trending-hero,
[data-theme="dark"] .social-creator-hero,
:root:not([data-theme="light"]) .social-trending-hero,
:root:not([data-theme="light"]) .social-creator-hero {
  background: linear-gradient(135deg, rgba(8,14,24,.96), rgba(17,28,46,.94));
}
[data-theme="dark"] .social-viewer-title-block span,
[data-theme="dark"] .social-pane-intro p,
[data-theme="dark"] .social-pane-appbar-titles span,
[data-theme="dark"] .social-messages-summary-card span,
[data-theme="dark"] .social-person-copy small,
[data-theme="dark"] .social-inbox-item p,
[data-theme="dark"] .social-inbox-item small,
[data-theme="dark"] .social-chat-media-card > small,
[data-theme="dark"] .social-quick-reply-chip span,
[data-theme="dark"] .social-quick-reply-form label span,
[data-theme="dark"] .social-quick-reply-row-copy span,
[data-theme="dark"] .social-chat-peer small,
[data-theme="dark"] .social-chat-bubble small,
[data-theme="dark"] .social-viewer-post-foot,
[data-theme="dark"] .social-viewer-teaser-copy span,
[data-theme="dark"] .social-profile-copy p,
[data-theme="dark"] .social-profile-handle,
[data-theme="dark"] .social-profile-stats,
[data-theme="dark"] .social-profile-post-copy small,
:root:not([data-theme="light"]) .social-viewer-title-block span,
:root:not([data-theme="light"]) .social-pane-intro p,
:root:not([data-theme="light"]) .social-pane-appbar-titles span,
:root:not([data-theme="light"]) .social-messages-summary-card span,
:root:not([data-theme="light"]) .social-person-copy small,
:root:not([data-theme="light"]) .social-inbox-item p,
:root:not([data-theme="light"]) .social-inbox-item small,
:root:not([data-theme="light"]) .social-chat-media-card > small,
:root:not([data-theme="light"]) .social-quick-reply-chip span,
:root:not([data-theme="light"]) .social-quick-reply-form label span,
:root:not([data-theme="light"]) .social-quick-reply-row-copy span,
:root:not([data-theme="light"]) .social-chat-peer small,
:root:not([data-theme="light"]) .social-chat-bubble small,
:root:not([data-theme="light"]) .social-viewer-post-foot,
:root:not([data-theme="light"]) .social-viewer-teaser-copy span,
:root:not([data-theme="light"]) .social-profile-copy p,
:root:not([data-theme="light"]) .social-profile-handle,
:root:not([data-theme="light"]) .social-profile-stats,
:root:not([data-theme="light"]) .social-profile-post-copy small {
  color: #8ba3c0;
}
[data-theme="dark"] .social-viewer-nav-btn,
:root:not([data-theme="light"]) .social-viewer-nav-btn {
  color: #cbd8ea;
  background: transparent;
}
[data-theme="dark"] .social-viewer-nav-btn.is-active,
:root:not([data-theme="light"]) .social-viewer-nav-btn.is-active {
  color: #60a5fa;
  background: rgba(96,165,250,.12);
}
[data-theme="dark"] .social-viewer-nav-btn--plus .social-viewer-nav-icon,
:root:not([data-theme="light"]) .social-viewer-nav-btn--plus .social-viewer-nav-icon {
  background: rgba(15,24,38,.96);
  color: #8dc1ff;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.16), 0 10px 22px rgba(0,0,0,.24);
}
[data-theme="dark"] .social-viewer-nav-btn--plus.is-active .social-viewer-nav-icon,
:root:not([data-theme="light"]) .social-viewer-nav-btn--plus.is-active .social-viewer-nav-icon {
  background: linear-gradient(135deg, rgba(11,115,255,.94), rgba(16,185,129,.92));
  color: #fff;
}
[data-theme="dark"] .social-viewer-upload-tools .cr-tool-btn,
[data-theme="dark"] .social-chat-toolbar-tools .cr-tool-btn,
[data-theme="dark"] .social-chat-media-card,
[data-theme="dark"] .social-quick-reply-chip,
:root:not([data-theme="light"]) .social-viewer-upload-tools .cr-tool-btn,
:root:not([data-theme="light"]) .social-chat-toolbar-tools .cr-tool-btn,
:root:not([data-theme="light"]) .social-chat-media-card,
:root:not([data-theme="light"]) .social-quick-reply-chip {
  background:
    linear-gradient(180deg, rgba(17,26,40,.96), rgba(12,20,32,.98)),
    linear-gradient(135deg, rgba(11,115,255,.18), rgba(16,185,129,.12));
  color: #e8f1ff;
  border-color: rgba(96,165,250,.18);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
[data-theme="dark"] .social-presence-dot,
:root:not([data-theme="light"]) .social-presence-dot {
  border-color: rgba(18,26,40,.95);
}
[data-theme="dark"] .social-viewer-upload-tools .cr-tool-btn:hover,
[data-theme="dark"] .social-viewer-upload-tools .cr-tool-btn:focus-visible,
[data-theme="dark"] .social-chat-toolbar-tools .cr-tool-btn:hover,
[data-theme="dark"] .social-chat-toolbar-tools .cr-tool-btn:focus-visible,
:root:not([data-theme="light"]) .social-viewer-upload-tools .cr-tool-btn:hover,
:root:not([data-theme="light"]) .social-viewer-upload-tools .cr-tool-btn:focus-visible,
:root:not([data-theme="light"]) .social-chat-toolbar-tools .cr-tool-btn:hover,
:root:not([data-theme="light"]) .social-chat-toolbar-tools .cr-tool-btn:focus-visible {
  border-color: rgba(96,165,250,.32);
  box-shadow: 0 18px 34px rgba(11,115,255,.18);
}
[data-theme="dark"] .social-chat-bubble,
:root:not([data-theme="light"]) .social-chat-bubble {
  background: rgba(14,22,34,.96);
  border-color: rgba(120,150,190,.12);
}
[data-theme="dark"] .social-chat-message.is-own .social-chat-bubble,
:root:not([data-theme="light"]) .social-chat-message.is-own .social-chat-bubble {
  background: linear-gradient(135deg, rgba(11,115,255,.24), rgba(16,185,129,.22));
}
[data-theme="dark"] .share-sheet,
:root:not([data-theme="light"]) .share-sheet {
  background: #0f1726;
}
[data-theme="dark"] .share-sheet-header,
[data-theme="dark"] .share-sheet-preview,
:root:not([data-theme="light"]) .share-sheet-header,
:root:not([data-theme="light"]) .share-sheet-preview {
  border-bottom-color: rgba(120,160,220,.12);
}
[data-theme="dark"] .share-sheet-header strong,
[data-theme="dark"] .share-sheet-text,
[data-theme="dark"] .share-channel-name,
:root:not([data-theme="light"]) .share-sheet-header strong,
:root:not([data-theme="light"]) .share-sheet-text,
:root:not([data-theme="light"]) .share-channel-name {
  color: #f4f8ff;
}
[data-theme="dark"] .share-sheet-sub,
:root:not([data-theme="light"]) .share-sheet-sub {
  color: #9ab0c8;
}
[data-theme="dark"] .share-sheet-close,
[data-theme="dark"] .share-sheet-action-btn,
:root:not([data-theme="light"]) .share-sheet-close,
:root:not([data-theme="light"]) .share-sheet-action-btn {
  background: rgba(255,255,255,.06);
  color: #e8eef7;
  border-color: rgba(120,160,220,.16);
}
[data-theme="dark"] .share-channel:hover,
:root:not([data-theme="light"]) .share-channel:hover {
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .share-channel-icon,
:root:not([data-theme="light"]) .share-channel-icon {
  background: rgba(255,255,255,.08);
}

/* ── Auto-play video indicator ──────────────────────────────── */
.cr-post-video { position: relative; }
.cr-video-muted-badge {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH OVERLAY PANELS — full-screen slide-in
   ═══════════════════════════════════════════════════════════════ */
.auth-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  background: var(--bg, #f3f8ff) !important;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.auth-panel.auth-panel-open {
  transform: translateX(0);
}
.auth-panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10,35,84,.07);
  min-height: 56px;
}
[data-theme="dark"] .auth-panel-header {
  background: rgba(13,17,23,.92);
  border-bottom-color: rgba(255,255,255,.07);
}
.auth-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--primary, #0b73ff);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  border-radius: var(--radius, 10px);
  transition: background .15s;
  flex-shrink: 0;
}
.auth-panel-back:hover { background: rgba(11,115,255,.08); }
.auth-panel-header-title {
  font-weight: 700;
  font-size: .95rem;
  flex: 1;
  text-align: center;
  padding-right: 80px; /* offset for back btn width */
}
/* Hero strip inside overlay */
.auth-panel-hero {
  padding: 44px 24px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.auth-panel-hero-admin {
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #6366f1 100%);
}
.auth-panel-hero-pharmacy {
  background: linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%);
}
.auth-panel-hero-user {
  background: linear-gradient(135deg, #1e3a5f 0%, #0b73ff 60%, #38bdf8 100%);
}
.auth-panel-hero-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.auth-panel-hero h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.auth-panel-hero p {
  margin: 0;
  font-size: .88rem;
  color: rgba(255,255,255,.82);
  max-width: 320px;
}
/* Benefits strip (user overlay) */
.auth-panel-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  padding: 14px 20px 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted, #5a6f8f);
}
.auth-panel-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Form body area */
.auth-panel-body {
  flex: 1;
  padding: 20px 20px 48px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-panel-actions-compact {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.auth-panel-actions-compact .btn {
  min-height: 44px;
}

.auth-panel-body .status-box {
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH HERO — initial choice screen
   ═══════════════════════════════════════════════════════════════ */
.auth-hero-section {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 40px;
}
.auth-hero-inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.auth-hero-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.auth-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--primary, #0b73ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(11,115,255,.32);
}
.auth-hero-brand h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
}
.auth-hero-brand p {
  margin: 0;
  color: var(--muted, #5a6f8f);
  font-size: .9rem;
}
.auth-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.auth-choice-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  min-height: 98px;
  border-radius: 16px;
  border: 1.5px solid var(--border, rgba(10,35,84,.1));
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .17s, box-shadow .17s, border-color .17s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(8,32,63,.07);
  color: inherit;
}
[data-theme="dark"] .auth-choice-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.auth-choice-card:hover,
.auth-choice-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(11,115,255,.18);
  border-color: var(--primary, #0b73ff);
  outline: none;
}
.auth-choice-card-primary {
  border-color: var(--primary, #0b73ff);
  background: rgba(11,115,255,.06);
}
.auth-choice-card-primary:hover {
  background: rgba(11,115,255,.1);
}
.auth-choice-card-guest {
  border-color: rgba(245,158,11,.42);
  background: rgba(255,255,255,.88);
}
[data-theme="dark"] .auth-choice-card-guest {
  background: rgba(255,255,255,.06);
  border-color: rgba(245,158,11,.28);
}
.auth-choice-card-guest:hover,
.auth-choice-card-guest:focus-visible {
  border-color: #f59e0b;
  box-shadow: 0 10px 32px rgba(245,158,11,.18);
}
.auth-choice-card.is-loading {
  pointer-events: none;
  opacity: .68;
}
.guest-trial-notice {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 22, 47, .38);
  backdrop-filter: blur(12px);
}
body.guest-trial-open {
  overflow: hidden;
}
[data-theme="dark"] .guest-trial-notice {
  background: rgba(2, 8, 23, .62);
}
.guest-trial-notice[hidden] { display: none; }
.guest-trial-card {
  width: min(520px, 100%);
  display: flex;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 70px rgba(7,22,47,.22);
}
[data-theme="dark"] .guest-trial-card {
  background: rgba(18,28,46,.97);
  border-color: rgba(245,158,11,.32);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.guest-trial-notice-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f59e0b;
  background: rgba(245,158,11,.14);
}
.guest-trial-notice-body {
  min-width: 0;
  flex: 1;
}
.guest-trial-notice-body strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
  line-height: 1.25;
}
.guest-trial-notice-body p {
  margin: 0 0 8px;
  color: var(--muted, #5a6f8f);
  font-size: .9rem;
  line-height: 1.55;
}
.guest-trial-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.device-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(360px, 1.25fr);
  gap: 14px;
  align-items: start;
}
.device-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.device-insight-card,
.device-chart-card,
.device-version-bars {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(16,185,129,.07)), rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.device-insight-card strong {
  display: block;
  margin: 4px 0 2px;
  color: #0f766e;
  font-size: 1.35rem;
}
.device-insight-card span {
  color: var(--muted);
  font-size: .78rem;
}
.device-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.device-chart-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.device-donut {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#10b981 calc(var(--p) * 1%), rgba(148,163,184,.22) 0);
}
.device-donut.update {
  background: conic-gradient(#38bdf8 calc(var(--p) * 1%), rgba(148,163,184,.22) 0);
}
.device-donut span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface, #fff);
  font-size: .74rem;
  font-weight: 900;
  color: #0f766e;
}
.device-version-bars {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}
.device-version-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  background: rgba(15,23,42,.05);
  overflow: hidden;
}
.device-version-row span,
.device-version-row b {
  position: relative;
  z-index: 1;
  font-size: .76rem;
}
.device-version-row i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(14,165,233,.18), rgba(16,185,129,.14));
}
.device-realtime-status {
  margin: 4px 0 12px;
}
.device-map-panel {
  position: relative;
  min-height: 500px;
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15,23,42,.04), rgba(14,165,233,.08));
}
.device-map-panel.is-fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 9999;
  min-height: auto;
  border-radius: 18px;
  background: #eaf4f8;
  box-shadow: 0 30px 80px rgba(15,23,42,.36);
}
.device-map-panel.is-fullscreen .device-map-canvas,
.device-map-panel.is-fullscreen .device-leaflet-map {
  min-height: calc(100vh - 24px);
  height: calc(100vh - 24px);
}
.device-map-toolbar {
  position: absolute;
  z-index: 600;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  right: 12px;
  align-items: flex-start;
}
.device-map-toolbar select {
  min-height: 34px;
  width: auto;
  max-width: 190px;
  appearance: auto;
}
.device-map-canvas {
  position: relative;
  min-height: 500px;
  overflow: hidden;
}
.device-leaflet-map {
  position: absolute;
  inset: 0;
  min-height: 500px;
  z-index: 0;
  touch-action: none;
  cursor: grab;
}
.device-leaflet-map:active {
  cursor: grabbing;
}
.device-leaflet-map .leaflet-control-zoom {
  margin-top: 74px;
}
.device-map-panel.is-fullscreen .device-leaflet-map .leaflet-control-zoom {
  margin-top: 86px;
}
.device-map-legend {
  position: absolute;
  z-index: 590;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 34px rgba(15,23,42,.14);
  font-size: .74rem;
  font-weight: 800;
  color: #334155;
}
.device-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.device-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.device-map-legend .online { background: #2563eb; }
.device-map-legend .offline { background: #ef4444; }
.device-map-legend .updating { background: #22c55e; }
.device-map-legend .pending { background: #f59e0b; }
.device-leaflet-pin {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  padding: 0;
  display: block;
  appearance: none;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15,23,42,.28);
}
.device-leaflet-pin.online {
  background: #2563eb;
}
.device-leaflet-pin.offline {
  background: #ef4444;
}
.device-leaflet-pin.pending {
    background: #f59e0b;
    box-shadow: 0 0 0 6px rgba(245,158,11,.22), 0 10px 28px rgba(15,23,42,.28);
  }
  .device-leaflet-pin.updating {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34,197,94,.2), 0 10px 28px rgba(15,23,42,.28);
  }
.device-map-popup {
  display: grid;
  gap: 4px;
  min-width: 190px;
}
.device-map-popup strong {
  color: #0f172a;
}
.device-map-popup span {
  color: #475569;
  font-size: .78rem;
}
.device-map-popup code {
  font-size: .72rem;
  color: #0369a1;
}
.device-map-tiles {
  position: absolute;
  inset: 0;
  opacity: .96;
  filter: saturate(1.02) contrast(1.02);
}
.device-map-tile {
  position: absolute;
  width: 33.333%;
  height: 33.333%;
  object-fit: cover;
  transform: none;
}
.device-map-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.8);
  color: #334155;
  font-size: .62rem;
}
.device-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 1;
}
.device-map-message {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 58px;
  z-index: 590;
}
.device-map-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  background: #10b981;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(16,185,129,.35);
  cursor: pointer;
  z-index: 4;
}
.device-map-pin.pending {
    background: #f59e0b;
    box-shadow: 0 8px 22px rgba(245,158,11,.35);
  }
.device-map-pin.updating {
    background: #22c55e;
    box-shadow: 0 8px 22px rgba(34,197,94,.35);
  }
.device-map-pin.offline {
  background: #64748b;
  box-shadow: 0 8px 22px rgba(100,116,139,.35);
}
.device-map-pin.selected {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-color: #0f172a;
  z-index: 8;
}
.device-map-label {
  position: absolute;
  transform: translate(10px, -50%);
  max-width: 210px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(15,23,42,.86);
  color: #fff;
  font-size: .72rem;
  line-height: 1.25;
  pointer-events: none;
  z-index: 5;
}
.device-map-label.selected {
  background: rgba(14,116,144,.95);
  z-index: 9;
}
.device-trace-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,64,175,.92);
  color: #fff;
  border: 2px solid rgba(255,255,255,.95);
  font-size: .65rem;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(30,64,175,.25);
}
.trace-row[role="button"] {
  cursor: pointer;
}
.trace-row[role="button"]:hover {
  border-color: rgba(59,130,246,.32);
  background: rgba(59,130,246,.08);
}
.device-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.16);
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.device-row.selected {
  padding: 12px;
  border: 1px solid rgba(14,165,233,.28);
  border-radius: 12px;
  background: rgba(14,165,233,.07);
}
.device-row:last-child { border-bottom: 0; }
.device-row strong {
  display: block;
  word-break: break-word;
}
.device-user-line {
  margin: 2px 0 7px;
  color: #0f766e;
  font-size: .82rem;
  font-weight: 800;
}
.device-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.device-info-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .68rem;
  font-weight: 900;
  word-break: break-word;
}
.device-info-chip.c-model { background: rgba(14,165,233,.12); color: #0369a1; border-color: rgba(14,165,233,.20); }
.device-info-chip.c-id { background: rgba(168,85,247,.12); color: #7e22ce; border-color: rgba(168,85,247,.20); }
.device-info-chip.c-app { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.20); }
.device-info-chip.c-local { background: rgba(245,158,11,.14); color: #92400e; border-color: rgba(245,158,11,.22); }
.device-info-chip.c-ip { background: rgba(99,102,241,.12); color: #4338ca; border-color: rgba(99,102,241,.20); }
.device-info-chip.c-gps { background: rgba(244,63,94,.11); color: #be123c; border-color: rgba(244,63,94,.20); }
.device-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
}
.device-trace-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.56);
}
.device-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.device-detail-grid > div {
  padding: 10px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.device-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-bottom: 3px;
}
.device-detail-grid strong {
  font-size: .95rem;
}
.device-trace-panel .section-title.compact {
  margin-bottom: 10px;
}
.device-trace-panel h3 {
  margin: 0 0 4px;
}
.trace-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.trace-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.74);
}
.trace-number {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d4ed8;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.route-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
}
.route-tab {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.18);
  background: rgba(255,255,255,.76);
  color: #164e63;
  font-size: .78rem;
  font-weight: 900;
}
.route-tab.active {
  background: #06b6d4;
  border-color: #0891b2;
  color: #fff;
  box-shadow: 0 10px 24px rgba(6,182,212,.22);
}
.route-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.route-summary-strip > div {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(14,165,233,.16);
  background: linear-gradient(135deg, rgba(236,254,255,.92), rgba(255,255,255,.78));
}
.route-summary-strip span,
.route-summary-strip small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}
.route-summary-strip strong {
  display: block;
  margin: 3px 0;
  color: #0f172a;
  font-size: 1.12rem;
  font-weight: 950;
}
.route-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
}
.route-section-title > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.route-timeline {
  display: grid;
  gap: 8px;
}
.route-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.78);
}
.route-timeline-item::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 42px;
  bottom: -14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(#06b6d4, rgba(6,182,212,.1));
}
.route-timeline-item:last-child::before {
  display: none;
}
.route-timeline-item[role="button"] {
  cursor: pointer;
}
.route-timeline-item[role="button"]:hover {
  border-color: rgba(6,182,212,.36);
  background: rgba(236,254,255,.9);
}
.route-node {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06b6d4;
  color: #fff;
  border: 3px solid rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(6,182,212,.24);
  font-size: .62rem;
  font-weight: 950;
  text-transform: uppercase;
}
.route-timeline-item.vehicle .route-node { background: #2563eb; }
.route-timeline-item.place .route-node { background: #0f766e; }
.route-timeline-item b {
  color: var(--muted);
  font-size: .72rem;
}
.route-timeline-item code {
  display: inline-block;
  margin-top: 5px;
  color: #0e7490;
  font-size: .72rem;
}
.route-place-meta {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}
.route-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.route-place-card {
  padding: 10px;
  border: 1px solid rgba(20,184,166,.16);
  border-radius: 12px;
  background: rgba(240,253,250,.74);
}
.route-place-card strong,
.route-place-card span,
.route-place-card b {
  display: block;
}
.route-place-card span {
  margin: 3px 0;
  color: var(--muted);
  font-size: .76rem;
}
.route-place-card b {
  color: #0f766e;
  font-size: .78rem;
}
@media (max-width: 980px) {
  .device-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-dashboard-grid { grid-template-columns: 1fr; }
  .device-row { grid-template-columns: 1fr; }
  .device-row-actions { justify-content: flex-start; }
  .device-detail-grid,
  .route-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .device-insights-grid,
  .device-charts-grid,
  .device-detail-grid,
  .route-summary-strip { grid-template-columns: 1fr; }
  .device-map-panel,
  .device-map-canvas,
  .device-leaflet-map {
    min-height: 420px;
  }
  .device-map-toolbar {
    display: grid;
    grid-template-columns: 42px 42px minmax(84px, 1fr);
    gap: 6px;
  }
  .device-map-toolbar .btn,
  .device-map-toolbar select {
    min-height: 38px;
    padding: 6px 10px;
  }
  .device-map-toolbar select,
  #mobileMapFullscreen {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
  .device-map-legend {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: center;
    font-size: .72rem;
  }
  .leaflet-control-zoom {
    display: none;
  }
}
.auth-choice-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-choice-card-body { flex: 1; min-width: 0; }
.auth-choice-card-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.auth-choice-card-body span {
  font-size: .82rem;
  color: var(--muted, #5a6f8f);
}
.auth-choice-card-arrow {
  flex-shrink: 0;
  color: var(--muted, #5a6f8f);
  transition: transform .17s, color .17s;
}
.auth-choice-card:hover .auth-choice-card-arrow {
  transform: translateX(3px);
  color: var(--primary, #0b73ff);
}

/* ── Instrucción captcha ──────────────────────────────────────────────────── */
.otp-captcha-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted, #5a6f8f);
  margin: 12px 0 4px;
}

/* ── reCAPTCHA container (Firebase Phone Auth) ────────────────────────────── */
#recaptcha-container {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
  min-height: 78px; /* reserve space so layout doesn't jump */
}
#recaptcha-container iframe {
  border-radius: 8px;
}

/* Auth inline row (OTP step 2) */
.auth-inline-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.auth-inline-grow { flex: 1; min-width: 0; margin: 0; }
.auth-inline-btn  { flex-shrink: 0; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── Global: prevenir overflow horizontal en cualquier elemento ── */
.app-shell > * { min-width: 0; }
.map-layout,
.map-card,
.map-city-heat-card { min-width: 0; }

/* ── Geo map: altura reducida en mobile ──────────────────────── */
@media (max-width: 599px) {
  .geo-map-canvas { height: 300px; min-height: 220px; }
}

/* ── Auth choice cards: fallback para backdrop-filter ───────── */
@supports not (backdrop-filter: blur(1px)) {
  .auth-choice-card {
    background: rgba(255,255,255,.97);
  }
  .card,
  .glass-panel,
  .modal-card,
  .list-card,
  .table-row,
  .stat,
  .suggest-item,
  .glass {
    background: rgba(255,255,255,.96);
  }
  [data-theme="dark"] .auth-choice-card {
    background: rgba(28,38,58,.97);
  }
  [data-theme="dark"] .card,
  [data-theme="dark"] .glass-panel,
  [data-theme="dark"] .modal-card,
  [data-theme="dark"] .glass {
    background: rgba(20,30,50,.97);
  }
}

/* ── Auth choice cards: tamaño correcto en mobile ────────────── */
@media (max-width: 480px) {
  .auth-choice-card {
    padding: 14px 16px;
    gap: 12px;
    min-height: 88px;
  }
  .auth-choice-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .auth-choice-card-body strong { font-size: .95rem; }
  .auth-choice-card-body span   { font-size: .78rem; }

  .auth-hero-section { padding: 20px 12px 32px; }
  .auth-hero-inner   { gap: 20px; }
  .auth-hero-logo    { width: 60px; height: 60px; }
  .auth-hero-brand h1 { font-size: 1.25rem; }
  .guest-trial-notice {
    align-items: flex-end;
    padding: 16px;
  }
  .guest-trial-card {
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
  }
  .guest-trial-notice-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .guest-trial-notice-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Auth overlay panels: padding correcto en mobile ─────────── */
@media (max-width: 480px) {
  .auth-panel-body { padding: 16px 16px 40px; }
  .auth-panel-hero { padding: 32px 16px 26px; }
  .auth-panel-hero h2 { font-size: 1.3rem; }
  .auth-panel-hero-icon { width: 56px; height: 56px; border-radius: 18px; }
  .auth-panel-header { padding: 12px 14px; }
  .auth-panel-header-title { padding-right: 60px; font-size: .88rem; }
}

/* ── Community room: header no desborda en pantallas pequeñas ── */
@media (max-width: 420px) {
  .cr-header { padding: 10px 12px; gap: 8px; }
  .cr-back-btn { padding: 6px 8px; font-size: .82rem; }
  .cr-name { font-size: .95rem; }
  .cr-header-actions { gap: 4px; }
  .cr-header-actions .btn-sm { min-height: 38px; padding: 6px 10px; font-size: .78rem; }
  .cr-feed-wrap { padding: 12px 12px 6px; }
  .cr-composer { padding: 10px 12px; }
}

/* ── Topbar: ajuste fino para pantallas muy pequeñas ─────────── */
@media (max-width: 359px) {
  .brand-copy strong { font-size: .9rem; }
  .brand-copy small  { font-size: .68rem; }
  .session-pill { min-width: 0; padding: 8px 10px; }
  .btn { padding: 8px 12px; }
}

/* ── Cards grid en mobile: spacing ──────────────────────────── */
@media (max-width: 599px) {
  .card, .glass-panel { padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .map-card, .map-city-heat-card { padding: 12px; }
  .map-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }
  .map-card-head h3 {
    font-size: .98rem;
    line-height: 1.1;
    margin-bottom: 3px;
  }
  #mapSummary {
    display: block;
    max-width: 100%;
    font-size: .7rem;
    line-height: 1.25;
  }
  .pharmacy-map-canvas {
    border-radius: 14px;
    padding: 6px 2px 2px;
  }
  .activity-top-list {
    margin-top: 8px;
  }
  .hero-search-panel { padding: 12px; }
}

/* ── Heatmap chart: etiquetas de barras visibles en mobile ────── */
@media (max-width: 599px) {
  .city-heat-row { gap: 4px; }
  .city-heat-bar { height: 10px; }
}

/* ── Social layout: ya tiene breakpoint en 860px, refuerzo ───── */
@media (max-width: 599px) {
  .social-layout { gap: var(--sp-3); }
  .social-post-card { padding: var(--sp-3); }
}

/* ── Stats grid en admin: 4 cols en desktop ──────────────────── */
@media (min-width: 600px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Overflow seguro en secciones ────────────────────────────── */
section { min-width: 0; overflow: visible; }
.section { min-width: 0; }

/* ── Topbar colapsable en home ──────────────────────────────── */
.home-page .topbar { margin-bottom: var(--sp-1); }
.home-page .topbar.topbar--collapsed .topbar-online-pill { display: none; }
.home-page .topbar.topbar--collapsed .brand-copy small { display: none; }
.home-page .topbar.topbar--collapsed .topbar-inner { padding: 3px 8px; min-height: 32px; }
.home-page .topbar.topbar--collapsed .brand { grid-template-columns: 26px 1fr; }
.home-page .topbar.topbar--collapsed .brand-copy strong { font-size: .78rem; }
/* Keep session name always visible */
.home-page .topbar.topbar--collapsed .session-cluster { display: flex; }
.home-page .topbar.topbar--collapsed .session-name { display: block; max-width: none; }

/* ── Comparador: filas limpias ─────────────────────────────── */
.compare-pharmacy-name {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: block;
}
.compare-stock {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  min-width: 24px;
  text-align: center;
}
.compare-price {
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}
.compare-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.compare-actions .btn {
  min-height: 26px;
  padding: 3px 7px;
  font-size: .65rem;
  border-radius: 6px;
  gap: 2px;
}
.compare-actions .btn svg { width: 10px; height: 10px; }
.compare-best-tag {
  font-size: .56rem;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  line-height: 1;
  margin-bottom: 1px;
}

/* ── Product card en resultados globales: compacto ─────────── */
.result-item.product-card {
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  margin-bottom: 3px;
  cursor: pointer;
  transition: box-shadow .15s;
}
.result-item.product-card:hover {
  box-shadow: 0 2px 10px rgba(8,32,63,.08);
}

/* ── Search result row: clean grid ─────────────────────────── */
.search-result-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
}
.search-result-info {
  min-width: 0;
  overflow: hidden;
}
.search-result-name {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.search-result-pharmacy {
  display: block;
  font-size: .65rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── Hero compacto en mobile ──────────────────────────────── */
@media (max-width: 599px) {
  .hero-shell { padding: 14px 14px; border-radius: 18px; }
  .hero-title { font-size: 1.2rem !important; margin: 4px 0; }
  .hero-subtitle { font-size: .82rem; margin-bottom: 8px; }
  .hero-meta-row { gap: 6px; }
  .badge-glow { font-size: .68rem; padding: 4px 10px; }
  .hero-mini-tag { font-size: .68rem; }
  .quick-action { min-height: 56px !important; font-size: .65rem; }
  .quick-action svg { width: 16px; height: 16px; }
  .hero-cta-grid { gap: 6px; }
  .hero-cta-grid .btn { font-size: .78rem; padding: 8px 12px; min-height: 36px; }
  .hero-live-stats .pill { font-size: .68rem; padding: 3px 8px; min-height: auto; }
  .compare-group-head { padding: 6px 8px; font-size: .82rem; }
  .compare-group-head h3 { font-size: .8rem !important; }
  .compare-match-row { padding: 5px 8px; gap: 5px; grid-template-columns: 1fr 28px 50px auto; }
  .compare-pharmacy-name { font-size: .72rem; }
  .compare-price { font-size: .78rem; min-width: 44px; }
  .compare-actions .btn { min-height: 24px; padding: 2px 6px; font-size: .6rem; }
  .search-result-row { gap: 5px; grid-template-columns: 1fr 28px 46px auto; }
  .search-result-name { font-size: .74rem; }
  .search-result-pharmacy { font-size: .62rem; }
  .result-item.product-card { padding: 5px 8px; }
  .compare-card { padding: 10px; }
  .section-header h2 { font-size: 1.1rem; }
  .section-subtitle { font-size: .78rem; }
}

/* ── Tablas en mobile: scroll horizontal ─────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ── Image upload preview en mobile ──────────────────────────── */
@media (max-width: 480px) {
  .cr-post-img  { max-height: 240px; }
  .social-post-img { max-height: 200px; }
}

/* ── Topbar session cluster: compacto en mobile ──────────────── */
@media (max-width: 599px) {
  .home-page .topbar-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    flex-wrap: nowrap;
  }
  .home-page .brand {
    flex: 0 1 auto;
    grid-template-columns: 26px auto;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }
  .home-page .brand-copy strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .88rem;
  }
  .home-page .brand-copy small {
    display: none;
  }
  /* Online pill: show only the count number, compact */
  .topbar-online-pill {
    min-height: 22px;
    padding: 2px 6px;
    font-size: .62rem;
    border-radius: 6px;
    flex-shrink: 0;
    order: 0;
  }
  .topbar-online-pill .pill-copy > span:first-child { display: none; }
  .topbar-status-cluster {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .session-cluster {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
  }
  .session-pill {
    min-height: 22px;
    min-width: 0;
    padding: 2px 6px;
  }
  .session-logout-btn {
    min-height: 22px;
    padding: 2px 6px;
    font-size: .62rem;
    width: auto;
    flex-shrink: 0;
  }
  .session-name {
    font-size: .7rem;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Community room header: compacto en mobile ───────────────── */
@media (max-width: 599px) {
  .cr-header {
    min-height: 50px;
    padding: 8px 12px;
    gap: 6px;
  }
  .cr-meta { display: none; }
  .cr-name { font-size: .92rem; }
  .cr-back-btn { padding: 6px 8px; font-size: .82rem; }
  .cr-header-actions { gap: 4px; }
  .cr-header-actions .btn-sm {
    min-height: 32px;
    padding: 4px 8px;
    font-size: .76rem;
  }
}

/* ── Dark mode: community room + redes + schedule ─────────────── */
[data-theme="dark"] .cr-header {
  background: rgba(13,18,28,.94);
  border-color: rgba(120,160,220,.1);
}
[data-theme="dark"] .cr-post {
  background: linear-gradient(160deg, rgba(30,42,62,.88), rgba(20,30,48,.78));
  border-color: rgba(120,160,220,.1);
}
[data-theme="dark"] .cr-composer {
  background: rgba(13,18,28,.94);
  border-color: rgba(120,160,220,.08);
}
[data-theme="dark"] .cr-comment-bubble {
  background: rgba(11,115,255,.12);
}
[data-theme="dark"] .redes-item {
  background: linear-gradient(145deg, rgba(30,42,62,.88), rgba(20,30,48,.78));
}
[data-theme="dark"] .redes-label { color: var(--muted); }
[data-theme="dark"] .schedule-table td {
  background: rgba(30,42,62,.6);
}
[data-theme="dark"] .schedule-table td:first-child { color: var(--text); }
[data-theme="dark"] .modal-card {
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
}
[data-theme="dark"] .modal-close {
  background: rgba(255,255,255,.08);
  border-color: rgba(120,160,220,.15);
}
[data-theme="dark"] .suggest-item:hover {
  background: rgba(var(--primary-rgb), .12);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE: comprehensive contrast fix (v2)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Search input: light bg + dark text (all search bars in dark mode) */
[data-theme="dark"] .hero-search-panel {
  background: rgba(22,32,52,.85) !important;
  border-color: rgba(120,160,220,.18) !important;
}
[data-theme="dark"] .hero-search-panel input,
[data-theme="dark"] .home-page .hero-search-panel input {
  background: rgba(255,255,255,.92) !important;
  color: #0a1f3d !important;
  border-color: rgba(120,160,220,.25) !important;
}
[data-theme="dark"] .hero-search-panel input::placeholder,
[data-theme="dark"] .home-page .hero-search-panel input::placeholder {
  color: #6b7c8f !important;
}
/* Compare search bar + any .search-bar input in dark mode — black text on white bg */
[data-theme="dark"] .search-bar input[type="search"],
[data-theme="dark"] .compare-card input[type="search"],
[data-theme="dark"] .compare-card input,
[data-theme="dark"] #compareInput,
[data-theme="dark"] .compare-card .search-bar input {
  background: rgba(255,255,255,.95) !important;
  color: #0a0a0a !important;
  border-color: rgba(120,160,220,.25) !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
[data-theme="dark"] .search-bar input[type="search"]::placeholder,
[data-theme="dark"] .compare-card input::placeholder,
[data-theme="dark"] #compareInput::placeholder {
  color: #6b7c8f !important;
  -webkit-text-fill-color: #6b7c8f !important;
}

/* ── 2. Quick action buttons (Ingresar, Registrar, Ubicacion, Turno) ── */
[data-theme="dark"] .quick-action,
[data-theme="dark"] .home-page .quick-action {
  background: rgba(22,32,52,.78) !important;
  color: #e6eef8 !important;
  border-color: rgba(120,160,220,.18) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(120,160,220,.08) !important;
}
[data-theme="dark"] .quick-action svg,
[data-theme="dark"] .home-page .quick-action svg {
  color: #60a5fa !important;
}
[data-theme="dark"] .quick-action:hover,
[data-theme="dark"] .home-page .quick-action:hover {
  background: rgba(30,42,62,.88) !important;
  border-color: rgba(120,160,220,.3) !important;
}

/* ── 3. City heat chart: names & bars visible ────────────────────────── */
[data-theme="dark"] .city-heat-row strong,
[data-theme="dark"] .city-heat-row b {
  color: #f0f6ff !important;
}
[data-theme="dark"] .city-heat-row {
  color: #b0c4de;
}
[data-theme="dark"] .city-heat-row small,
[data-theme="dark"] .city-heat-row .muted {
  color: #7b93b0 !important;
}
[data-theme="dark"] .city-heat-bar {
  background: rgba(120,160,220,.15) !important;
}

/* ── 4. Session name: full name visible, no truncation dots ──────────── */
[data-theme="dark"] .session-name,
[data-theme="dark"] .home-page .session-name {
  color: #e6eef8 !important;
}
.session-name {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.home-page .session-name {
  max-width: none !important;
}
.home-page .topbar.topbar--collapsed .session-name {
  max-width: none !important;
}

/* ── 5. Logout button: bigger, visible, with border ──────────────────── */
.session-logout-btn {
  min-height: 30px !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
}
.session-logout-btn .logout-text {
  display: inline !important;
}
[data-theme="dark"] .session-logout-btn {
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220,38,38,.35) !important;
}
[data-theme="dark"] .session-logout-btn:hover {
  background: rgba(220,38,38,.3) !important;
  color: #fecaca !important;
}
@media (max-width: 420px) {
  .session-logout-btn {
    min-height: 28px !important;
    padding: 3px 10px !important;
    font-size: .68rem !important;
  }
  .session-logout-btn .logout-text {
    display: inline !important;
  }
}

/* ── 6. Community card inner text + Unirme button ─────────────────────── */
[data-theme="dark"] .social-community-card h3,
[data-theme="dark"] .social-community-card h4,
[data-theme="dark"] .social-community-card strong {
  color: #f0f6ff !important;
}
[data-theme="dark"] .social-community-card p,
[data-theme="dark"] .social-community-card .muted {
  color: #8ba3c0 !important;
}
[data-theme="dark"] .social-community-card .btn-glass,
[data-theme="dark"] .social-community-card .btn {
  color: #e6eef8 !important;
  border-color: rgba(120,160,220,.25) !important;
}
[data-theme="dark"] .social-hub-grid .social-community-card {
  background: linear-gradient(135deg, rgba(30,42,62,.9), rgba(20,30,48,.85)) !important;
  border-color: rgba(120,160,220,.18) !important;
}

/* ── 7. ALL btn-glass and ghost buttons in dark mode ──────────────────── */
[data-theme="dark"] .btn-glass,
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] a.btn.ghost {
  color: #e6eef8 !important;
  background: rgba(30,42,62,.7) !important;
  border-color: rgba(120,160,220,.2) !important;
}
[data-theme="dark"] .btn-glass:hover,
[data-theme="dark"] .btn.ghost:hover {
  background: rgba(40,55,78,.85) !important;
  border-color: rgba(120,160,220,.3) !important;
}

/* ── 8. Section title buttons (Ver todo, Refrescar, Farmacia mas cercana) */
[data-theme="dark"] .section-title .btn-glass,
[data-theme="dark"] .section-title .btn,
[data-theme="dark"] .map-card-head .btn-glass,
[data-theme="dark"] .map-card-head .btn {
  color: #e6eef8 !important;
  background: rgba(30,42,62,.75) !important;
  border-color: rgba(120,160,220,.22) !important;
}

/* ── 9. Pharmacy list card "Ver" / "Ir" buttons ──────────────────────── */
[data-theme="dark"] .list-card .btn.ghost,
[data-theme="dark"] .list-card a.btn.ghost,
[data-theme="dark"] .list-card .btn-glass,
[data-theme="dark"] .list-card a.btn-glass {
  color: #e6eef8 !important;
  background: rgba(30,42,62,.7) !important;
  border-color: rgba(120,160,220,.2) !important;
}

/* ── 10. Session pill dark mode ───────────────────────────────────────── */
[data-theme="dark"] .session-pill,
[data-theme="dark"] .home-page .session-pill {
  background: rgba(22,30,44,.8) !important;
  border-color: rgba(120,160,220,.15) !important;
}
[data-theme="dark"] .session-label {
  color: #7b93b0 !important;
}

/* ── 11. Geo-map section in dark mode ────────────────────────────────── */
[data-theme="dark"] .geo-map-canvas {
  background: rgba(13,19,30,.6) !important;
}
[data-theme="dark"] .geo-map-bar .btn-glass {
  color: #e6eef8 !important;
}

/* ── 12. General text in dark cards ──────────────────────────────────── */
[data-theme="dark"] .card h3,
[data-theme="dark"] .glass h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .glass h4 {
  color: #f0f6ff;
}
[data-theme="dark"] .card p,
[data-theme="dark"] .glass p {
  color: #b0c4de;
}
[data-theme="dark"] .card .muted,
[data-theme="dark"] .glass .muted {
  color: #7b93b0;
}
[data-theme="dark"] .card strong,
[data-theme="dark"] .glass strong {
  color: #e6eef8;
}

/* ── 13. Offer section (Ver todo + banner cards) ─────────────────────── */
[data-theme="dark"] .banner-card {
  background: linear-gradient(160deg, rgba(30,42,62,.85), rgba(20,30,48,.75)) !important;
  border-color: rgba(120,160,220,.15) !important;
}
[data-theme="dark"] .banner-card h3 {
  color: #f0f6ff !important;
}
[data-theme="dark"] .banner-card p,
[data-theme="dark"] .banner-card .muted {
  color: #8ba3c0 !important;
}
[data-theme="dark"] .offer-strip .banner-card .pill {
  color: #6ee7b7 !important;
}

/* ── 14. Topbar layout fix: brand + online + session don't overlap ──── */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}
.topbar-inner .brand {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.topbar-inner .brand-copy strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.topbar-status-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.session-cluster {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 15. User live GPS marker (pulsing blue dot) ──────────────────────── */
@keyframes gpsPulse {
  0%   { transform: scale(1);   opacity: .85; }
  50%  { transform: scale(1.6); opacity: .3; }
  100% { transform: scale(1);   opacity: .85; }
}
.user-gps-marker {
  width: 18px; height: 18px;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,99,235,.5), 0 2px 6px rgba(0,0,0,.25);
  position: relative;
}
.user-gps-marker::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(37,99,235,.25);
  animation: gpsPulse 2s ease-in-out infinite;
  z-index: -1;
}

/* ── Duplicate all for prefers-color-scheme auto-dark ─────────────────── */
@media (prefers-color-scheme: dark) {
  /* Search input */
  :root:not([data-theme="light"]) .hero-search-panel {
    background: rgba(22,32,52,.85) !important;
    border-color: rgba(120,160,220,.18) !important;
  }
  :root:not([data-theme="light"]) .hero-search-panel input,
  :root:not([data-theme="light"]) .home-page .hero-search-panel input {
    background: rgba(255,255,255,.92) !important;
    color: #0a1f3d !important;
    border-color: rgba(120,160,220,.25) !important;
  }
  :root:not([data-theme="light"]) .hero-search-panel input::placeholder,
  :root:not([data-theme="light"]) .home-page .hero-search-panel input::placeholder {
    color: #6b7c8f !important;
  }
  /* Compare/search-bar inputs — black text on white bg */
  :root:not([data-theme="light"]) .search-bar input[type="search"],
  :root:not([data-theme="light"]) .compare-card input[type="search"],
  :root:not([data-theme="light"]) .compare-card input,
  :root:not([data-theme="light"]) #compareInput,
  :root:not([data-theme="light"]) .compare-card .search-bar input {
    background: rgba(255,255,255,.95) !important;
    color: #0a0a0a !important;
    border-color: rgba(120,160,220,.25) !important;
    -webkit-text-fill-color: #0a0a0a !important;
  }
  :root:not([data-theme="light"]) .search-bar input[type="search"]::placeholder,
  :root:not([data-theme="light"]) .compare-card input::placeholder,
  :root:not([data-theme="light"]) #compareInput::placeholder {
    color: #6b7c8f !important;
    -webkit-text-fill-color: #6b7c8f !important;
  }
  /* Quick actions */
  :root:not([data-theme="light"]) .quick-action,
  :root:not([data-theme="light"]) .home-page .quick-action {
    background: rgba(22,32,52,.78) !important;
    color: #e6eef8 !important;
    border-color: rgba(120,160,220,.18) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(120,160,220,.08) !important;
  }
  :root:not([data-theme="light"]) .quick-action svg,
  :root:not([data-theme="light"]) .home-page .quick-action svg {
    color: #60a5fa !important;
  }
  /* City heat chart */
  :root:not([data-theme="light"]) .city-heat-row strong,
  :root:not([data-theme="light"]) .city-heat-row b { color: #f0f6ff !important; }
  :root:not([data-theme="light"]) .city-heat-row { color: #b0c4de; }
  :root:not([data-theme="light"]) .city-heat-row small { color: #7b93b0 !important; }
  :root:not([data-theme="light"]) .city-heat-bar { background: rgba(120,160,220,.15) !important; }
  /* Session name */
  :root:not([data-theme="light"]) .session-name,
  :root:not([data-theme="light"]) .home-page .session-name { color: #e6eef8 !important; }
  /* Logout button */
  :root:not([data-theme="light"]) .session-logout-btn {
    background: rgba(220,38,38,.18) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(220,38,38,.35) !important;
  }
  /* Community card + Unirme btn */
  :root:not([data-theme="light"]) .social-community-card h3,
  :root:not([data-theme="light"]) .social-community-card h4,
  :root:not([data-theme="light"]) .social-community-card strong { color: #f0f6ff !important; }
  :root:not([data-theme="light"]) .social-community-card p { color: #8ba3c0 !important; }
  :root:not([data-theme="light"]) .social-community-card .btn-glass,
  :root:not([data-theme="light"]) .social-community-card .btn { color: #e6eef8 !important; border-color: rgba(120,160,220,.25) !important; }
  :root:not([data-theme="light"]) .social-hub-grid .social-community-card {
    background: linear-gradient(135deg, rgba(30,42,62,.9), rgba(20,30,48,.85)) !important;
    border-color: rgba(120,160,220,.18) !important;
  }
  /* ALL btn-glass */
  :root:not([data-theme="light"]) .btn-glass,
  :root:not([data-theme="light"]) .btn.ghost,
  :root:not([data-theme="light"]) a.btn.ghost {
    color: #e6eef8 !important;
    background: rgba(30,42,62,.7) !important;
    border-color: rgba(120,160,220,.2) !important;
  }
  /* Section title buttons */
  :root:not([data-theme="light"]) .section-title .btn-glass,
  :root:not([data-theme="light"]) .section-title .btn,
  :root:not([data-theme="light"]) .map-card-head .btn-glass,
  :root:not([data-theme="light"]) .map-card-head .btn {
    color: #e6eef8 !important;
    background: rgba(30,42,62,.75) !important;
    border-color: rgba(120,160,220,.22) !important;
  }
  /* Pharmacy list card buttons */
  :root:not([data-theme="light"]) .list-card .btn.ghost,
  :root:not([data-theme="light"]) .list-card a.btn.ghost,
  :root:not([data-theme="light"]) .list-card .btn-glass,
  :root:not([data-theme="light"]) .list-card a.btn-glass {
    color: #e6eef8 !important;
    background: rgba(30,42,62,.7) !important;
    border-color: rgba(120,160,220,.2) !important;
  }
  /* Session pill */
  :root:not([data-theme="light"]) .session-pill,
  :root:not([data-theme="light"]) .home-page .session-pill {
    background: rgba(22,30,44,.8) !important;
    border-color: rgba(120,160,220,.15) !important;
  }
  /* General card text */
  :root:not([data-theme="light"]) .card h3,
  :root:not([data-theme="light"]) .glass h3,
  :root:not([data-theme="light"]) .card h4,
  :root:not([data-theme="light"]) .glass h4 { color: #f0f6ff; }
  :root:not([data-theme="light"]) .card p,
  :root:not([data-theme="light"]) .glass p { color: #b0c4de; }
  :root:not([data-theme="light"]) .card strong,
  :root:not([data-theme="light"]) .glass strong { color: #e6eef8; }
  /* Offer section */
  :root:not([data-theme="light"]) .banner-card {
    background: linear-gradient(160deg, rgba(30,42,62,.85), rgba(20,30,48,.75)) !important;
    border-color: rgba(120,160,220,.15) !important;
  }
  :root:not([data-theme="light"]) .banner-card h3 { color: #f0f6ff !important; }
:root:not([data-theme="light"]) .banner-card p { color: #8ba3c0 !important; }
}

/* BMI calculator modal */
.bmi-open-btn {
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  padding-inline: 8px;
}
.bmi-open-btn .bmi-short-label { display: none; }
.bmi-open-btn .bmi-full-label { display: inline; }
.bmi-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 8, 18, .72);
  backdrop-filter: blur(14px);
}
.bmi-modal[hidden] { display: none !important; }
.bmi-modal-card {
  width: min(620px, 100%);
  max-height: min(92vh, 780px);
  overflow: auto;
  border-radius: 26px;
  border: 1px solid rgba(130, 207, 255, .26);
  background:
    radial-gradient(circle at 12% 8%, rgba(52, 230, 207, .18), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(121, 188, 255, .18), transparent 35%),
    linear-gradient(180deg, rgba(15, 37, 53, .96), rgba(8, 20, 34, .96));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  color: #eaf4ff;
  padding: 18px;
}
.bmi-modal-card--iframe {
  width: min(1180px, 100%);
  height: min(94vh, 920px);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 12px;
}
.bmi-modal-head {
  display: grid;
  grid-template-columns: 52px 1fr 38px;
  gap: 12px;
  align-items: center;
}
.bmi-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(52, 230, 207, .22), rgba(121, 188, 255, .18));
  color: #34e6cf;
  border: 1px solid rgba(255, 255, 255, .14);
}
.bmi-modal-icon svg { width: 27px; height: 27px; }
.bmi-modal-head h2 {
  margin: 0;
  font-size: 1.18rem;
  color: #f4f9ff;
}
.bmi-modal-head p {
  margin: 4px 0 0;
  color: rgba(234, 244, 255, .72);
  font-size: .88rem;
}
.bmi-close {
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  color: #eaf4ff;
  background: rgba(255, 255, 255, .08);
  font-size: 1.5rem;
  line-height: 1;
}
.bmi-tool-frame {
  width: 100%;
  height: 100%;
  min-height: 620px;
  margin-top: 12px;
  border: 0;
  border-radius: 20px;
  background: #0a2a3c;
}
.bmi-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.bmi-field {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .055);
}
.bmi-field span {
  color: rgba(234, 244, 255, .76);
  font-size: .8rem;
  font-weight: 700;
}
.bmi-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f9ff;
  font-size: 1.05rem;
  font-weight: 800;
}
.bmi-field input::placeholder { color: rgba(234, 244, 255, .38); }
.bmi-result-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .15);
}
.bmi-result-card strong {
  display: block;
  color: var(--bmi-status, #79bcff);
  font-size: clamp(2.4rem, 9vw, 4.25rem);
  line-height: .95;
  font-weight: 950;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bmi-result-card h3 {
  margin: 10px 0 6px;
  color: #f4f9ff;
  font-size: 1.2rem;
}
.bmi-result-card p {
  margin: 0;
  color: rgba(234, 244, 255, .74);
  line-height: 1.45;
}
.bmi-note {
  margin: 12px 0 0;
  color: rgba(234, 244, 255, .62);
  font-size: .82rem;
}
.bmi-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bmi-actions .btn {
  justify-content: center;
  min-width: 0;
}
.bmi-actions .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .bmi-modal { padding: 10px; align-items: end; }
  .bmi-modal-card { border-radius: 24px 24px 0 0; max-height: 94vh; }
  .bmi-modal-card--iframe { height: 94vh; }
  .bmi-tool-frame { min-height: 0; border-radius: 16px 16px 0 0; }
  .bmi-modal-grid,
  .bmi-actions { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .home-page .quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }
  .home-page .bmi-open-btn {
    grid-column: auto;
    min-height: 56px !important;
    font-size: clamp(.54rem, 2.55vw, .62rem);
    padding-inline: 4px;
  }
  .home-page .bmi-open-btn .bmi-short-label { display: inline; }
  .home-page .bmi-open-btn .bmi-full-label { display: none; }
}

/* Auth topbar: marca y acciones separadas para que nada se encime. */
.auth-page .auth-topbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.auth-page .auth-topbar-inner .brand {
  min-width: 0;
  overflow: visible;
}
.auth-page .auth-topbar-inner .brand-copy strong,
.auth-page .auth-topbar-inner .brand-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-page .auth-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.auth-page .auth-topbar-actions > .btn,
.auth-page .auth-topbar-actions .session-logout-btn {
  flex: 0 0 auto;
}
.auth-page .auth-topbar-actions .session-cluster {
  min-width: 0;
}
.auth-page .auth-topbar-actions .session-pill {
  max-width: 112px;
}
.auth-page .auth-topbar-actions .session-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 599px) {
  .auth-page .auth-topbar-inner {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .auth-page .auth-topbar-inner .brand {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }
  .auth-page .auth-topbar-inner .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .auth-page .auth-topbar-inner .brand-copy strong {
    font-size: 1rem;
    line-height: 1.18;
  }
  .auth-page .auth-topbar-inner .brand-copy small {
    font-size: .76rem;
    line-height: 1.3;
    margin-top: 3px;
  }
  .auth-page .auth-topbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .auth-page .auth-topbar-actions > .btn {
    min-height: 36px;
    padding: 7px 12px;
  }
  .auth-page .auth-topbar-actions .session-cluster {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .auth-page .auth-topbar-actions .session-pill {
    max-width: 124px;
  }
  .auth-page .auth-topbar-actions .session-logout-btn {
    min-height: 36px !important;
    padding: 7px 12px !important;
  }
}

@media (max-width: 379px) {
  .auth-page .auth-topbar-inner .brand-copy small {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .auth-page .auth-topbar-actions .session-cluster {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.global-ad-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.global-ad-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border, rgba(148,163,184,.28));
  border-radius: 8px;
  background: rgba(11, 115, 255, .045);
}
.global-ad-option span { display: grid; gap: 3px; }
.global-ad-option small { color: var(--muted, #64748b); line-height: 1.35; }
.global-ad-schedule-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line, #dbeafe);
  border-radius: 14px;
  padding: 12px;
  background: rgba(248, 250, 252, .76);
}
.global-ad-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.global-ad-days label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line, #dbeafe);
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}
.global-ad-dashboard {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.global-ad-delivery-head,
.global-ad-map-card,
.global-ad-device-row {
  border: 1px solid var(--border, rgba(148,163,184,.26));
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}
.global-ad-delivery-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  align-items: center;
}
.global-ad-delivery-head h3 { margin: 0 0 4px; }
.global-ad-mini-chart {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  background: conic-gradient(#22c55e 0 42%, #f59e0b 42% 76%, #ef4444 76% 100%);
  color: #fff;
  box-shadow: inset 0 0 0 12px rgba(2, 6, 23, .22);
}
.global-ad-mini-chart strong { display: block; font-size: 1.35rem; line-height: 1; }
.global-ad-mini-chart span { font-size: .72rem; }
.global-ad-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.global-ad-kpis > div {
  padding: 12px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 8px;
  background: rgba(15,23,42,.04);
}
.global-ad-kpis strong { display: block; font-size: 1.45rem; }
.global-ad-kpis span { color: var(--muted, #64748b); font-size: .82rem; }
.global-ad-map-card { padding: 12px; }
.global-ad-map-card > strong {
  display: block;
  margin-bottom: 8px;
}
.global-ad-map {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, rgba(34,197,94,.20), transparent 34%),
    radial-gradient(circle at 72% 58%, rgba(59,130,246,.20), transparent 36%),
    #0f172a;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}
.global-ad-map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  z-index: 3;
}
.global-ad-pin {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.global-ad-pin.pending { background: #f59e0b; }
.global-ad-pin.delivered { background: #0ea5e9; }
.global-ad-pin.shown { background: #22c55e; }
.global-ad-pin.clicked { background: #8b5cf6; }
.global-ad-pin.dismissed { background: #64748b; }
.global-ad-pin.error { background: #ef4444; }
.global-ad-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted, #64748b);
  font-size: .84rem;
}
.global-ad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.global-ad-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.global-ad-legend .pending { background: #f59e0b; }
.global-ad-legend .delivered { background: #0ea5e9; }
.global-ad-legend .shown { background: #22c55e; }
.global-ad-legend .clicked { background: #8b5cf6; }
.global-ad-legend .error { background: #ef4444; }
.global-ad-device-table { display: grid; gap: 8px; }
.global-ad-device-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px;
  align-items: center;
  border-left-width: 5px;
}
.global-ad-device-row.pending { border-left-color: #f59e0b; }
.global-ad-device-row.delivered { border-left-color: #0ea5e9; }
.global-ad-device-row.shown { border-left-color: #22c55e; }
.global-ad-device-row.clicked { border-left-color: #8b5cf6; }
.global-ad-device-row.dismissed { border-left-color: #64748b; }
.global-ad-device-row.error { border-left-color: #ef4444; }
.global-ad-device-row strong,
.global-ad-device-row span { display: block; font-weight: 800; }
.global-ad-device-row small,
.global-ad-device-row code { display: block; color: var(--muted, #64748b); overflow-wrap: anywhere; }
@media (max-width: 780px) {
  .global-ad-delivery-head,
  .global-ad-device-row { grid-template-columns: 1fr; display: grid; }
}