/* === FREDOKA REGULAR 400 (self-hosted wordmark) === */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/fonts/Fredoka-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/static/fonts/Fredoka-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/fonts/Fredoka-Light.ttf") format("truetype");
}
/* Dark-only visual mock for Qxopa (Scandi dark forever).
   Tokens on bare html + html.theme-dark; class always forced in base.html. */
html,
html.theme-dark {
  color-scheme: dark;
  /* Scandi dark (from scandi-dark-interactive.html) */
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --cream: #0d0d0f;
  --cream-2: #1a1a1c;
  --ink: #f2f0ec;
  --forest: #f2f0ec;
  --forest-deep: #0d0d0f;
  --gold: #8fa88a; /* sage — dark-mode primary accent */
  --gold-soft: rgba(143, 168, 138, 0.18);
  --gold-dim: #8fa88a;
  --white: #1a1a1c;
  --card: #1a1a1c;
  --line: #2a2a2e;
  --muted: #9a9690;
  --danger: #c47a6a;
  --ok: #30D158;
  --sage: #8fa88a;
  --scandi-cream: #e8e4dc;
  --elevated: #121214;
  --chrome: #0a0a0b;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.55);
}

html,
html.theme-dark,
html body,
html.theme-dark body {
  background: #0d0d0f;
  color: var(--ink);
}

html.theme-dark .sat-fill {
  background: #0d0d0f;
}

html.theme-dark .app {
  background: var(--cream);
}

html.theme-dark .topbar {
  background: #0d0d0f;
  border-bottom: 0.5px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-dark .wordmark,
html.theme-dark .auth-wrap h1,
html.theme-dark .auth-mark,
html.theme-dark .act-head h2 {
  color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif;
}

html.theme-dark .brand-msg {
  color: var(--ink);
}

html.theme-dark .card,
html.theme-dark .auth-card,
html.theme-dark .auth-install,
html.theme-dark .audience,
html.theme-dark .duration-row-ui,
html.theme-dark .act-head,
html.theme-dark .comments-sheet,
html.theme-dark .share-sheet,
html.theme-dark .options-sheet,
html.theme-dark .book-pick-sheet,
html.theme-dark .social-link-sheet,
html.theme-dark .msg-head {
  background: #1a1a1c;
  color: var(--ink);
}

html.theme-dark .field {
  background: #121214;
  color: var(--ink);
}

html.theme-dark .field::placeholder,
html.theme-dark .comments-input::placeholder {
  color: var(--muted);
}

html.theme-dark .nav {
  background: #0a0a0b;
  border-top: 0.5px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-dark .nav::after {
  background: #0a0a0b;
}

html.theme-dark .nav .plus {
  background: var(--gold);
  color: #0d0d0f;
  box-shadow: 0 6px 16px rgba(143, 168, 138, 0.35);
}

html.theme-dark .nav .plus + span {
  color: var(--forest);
}

html.theme-dark .nav a.active {
  color: var(--gold);
}

html.theme-dark body.kb-open,
html.theme-dark .kb-fill,
html.theme-dark body.kb-open .thread.is-open .comment-inline {
  background: #0d0d0f;
}

html.theme-dark .act-panel,
html.theme-dark .search-panel {
  background: #0d0d0f;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.65);
}

html.theme-dark .search-panel {
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.65);
}

html.theme-dark .act-panel::before,
html.theme-dark .search-panel::before {
  background: #0d0d0f;
}

html.theme-dark .act-item:hover {
  background: #1a1a1c;
}

html.theme-dark .comments-layer .comments-sheet,
html.theme-dark .share-layer .share-sheet {
  background: #1a1a1c;
  color: var(--ink);
}

html.theme-dark .comments-input,
html.theme-dark .comments-composer {
  background: #121214;
  color: var(--ink);
}

html.theme-dark .comments-handle {
  background: rgba(255, 255, 255, 0.28);
}

/* Primary CTAs — cream fill (mock .btn-cream); accents stay sage via --gold */
html.theme-dark .btn:not(.ghost):not(.btn-quiet):not(.share-wa):not(.lugar-maps-btn) {
  background: var(--scandi-cream);
  color: #121212;
  border-color: transparent;
}
html.theme-dark .btn:not(.ghost):not(.btn-quiet):disabled {
  opacity: 0.4;
}
html.theme-dark .btn.ghost {
  background: transparent;
  color: var(--gold-dim);
  border-color: var(--line);
}
html.theme-dark .auth-card .btn {
  background: var(--scandi-cream);
  color: #121212;
}


html.theme-dark .chip {
  /* keep white text on colored chips */
  color: #fff;
}

html.theme-dark .durations:not(.durations-stack) span {
  color: var(--forest);
  border-color: var(--gold);
}

html.theme-dark .duration-radio {
  border-color: rgba(255, 255, 255, 0.28);
}

html.theme-dark .duration-row input:checked + .duration-row-ui,
html.theme-dark .durations input:checked + .duration-row-ui {
  border-color: #ff2d55;
  background: rgba(255, 45, 85, 0.14);
}

/* Keep danger/red selected chips */
html.theme-dark .durations:not(.durations-stack) input:checked + span {
  background: #ff2d55;
  color: #fff;
  border-color: #ff2d55;
}

html.theme-dark .badge,
html.theme-dark .brand.has-unread .brand-msg svg {
  /* accents stay */
}

html.theme-dark meta[name="theme-color"] {
  /* meta not stylable; script can update if needed */
}

html.theme-dark .preview {
  background: #121214;
}

html.theme-dark .avatar.gold {
  color: #f2f0ec;
}

html.theme-dark .avatar.sage,
html.theme-dark .avatar.plum {
  color: rgba(143, 168, 138, 0.35);
}

/* Soft blue tint surfaces that used --gold-soft */
html.theme-dark .gold-soft,
html.theme-dark [style*="gold-soft"] {
  background: rgba(143, 168, 138, 0.18);
}

/* Hard-coded light page fills that bypass variables */
html.theme-dark .screen-head,
html.theme-dark .feed,
html.theme-dark .form-block,
html.theme-dark .page-kicker,
html.theme-dark .page-title {
  color: var(--ink);
}

html.theme-dark .tiny,
html.theme-dark .muted,
html.theme-dark .auth-switch,
html.theme-dark .auth-age,
html.theme-dark .login-faces-kicker,
html.theme-dark .card-label,
html.theme-dark .post-meta,
html.theme-dark .when,
html.theme-dark .subtitle {
  color: var(--muted);
}

html.theme-dark .subtitle {
  color: var(--gold);
}

html.theme-dark .auth-switch a {
  color: var(--gold);
}

/* Stories / rings / misc elevated surfaces */
html.theme-dark .stories,
html.theme-dark .story-rail,
html.theme-dark .historias-rail,
html.theme-dark .user-row,
html.theme-dark .req-card,
html.theme-dark .request-card,
html.theme-dark .grant-card,
html.theme-dark .pass-card {
  background: #1a1a1c;
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark .user-row {
  border-bottom-color: var(--line);
}

/* Options / sheets that hard-code white */
html.theme-dark .options-sheet,
html.theme-dark .book-pick-sheet,
html.theme-dark .social-link-sheet,
html.theme-dark .options-list button,
html.theme-dark .sheet,
html.theme-dark .drawer {
  background: #1a1a1c;
  color: var(--ink);
}

html.theme-dark .options-list button:hover,
html.theme-dark .options-list button:active {
  background: #121214;
}

/* Message / chat bubbles — fix light gray #E9E9EB + white text */
html.theme-dark .thread,
html.theme-dark .comment-inline {
  background: #1a1a1c;
  color: var(--ink);
}

html.theme-dark .msg-bubble.theirs,
html.theme-dark .room-bubble {
  background: #121214 !important;
  border-color: transparent;
  color: #f2f0ec !important;
}

html.theme-dark .msg-bubble.mine,
html.theme-dark .room-msg.mine .room-bubble {
  background: #8fa88a !important;
  border-color: #8fa88a !important;
  color: #0d0d0f !important;
}

html.theme-dark .room-body,
html.theme-dark .room-main,
html.theme-dark .msg-bubble {
  color: inherit;
}

html.theme-dark .room-name {
  color: #8fa88a;
}

html.theme-dark .msg-list[data-thread-user] .room-msg:not(.mine) .room-bubble::after {
  background: #121214 !important;
  border-right-color: transparent;
  border-top-color: transparent;
}

html.theme-dark .msg-list[data-thread-user] .room-msg.mine .room-bubble::after {
  background: #8fa88a !important;
}

html.theme-dark .room-bubble.msg-typing {
  background: #121214 !important;
  color: #f2f0ec !important;
}

html.theme-dark .text-bubble {
  background: #121214;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f0ec;
}

html.theme-dark .comment-line,
html.theme-dark .comment-line .comment-body,
html.theme-dark .comment-line .name,
html.theme-dark .cmt-main,
html.theme-dark .cmt-main .name,
html.theme-dark .cmt-body,
html.theme-dark .comment .name,
html.theme-dark .comment p {
  color: #f2f0ec;
}

/* Invert remaining hard-coded #f2f0ec / white fills via attribute-less overrides */
html.theme-dark [style*="background: #f2f0ec"],
html.theme-dark [style*="background:#f2f0ec"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background:white"] {
  background: #1a1a1c !important;
}

/* Theme-color meta visual cue via body; status bar feel */
html.theme-dark body {
  background-color: #0d0d0f;
}

/* Keep #ff2d55 accents as-is (already dark-friendly) */
/* Keep #8fa88a / --gold as dark-mode blue */

/* Secondary elevated chips / pills */
html.theme-dark .pill,
html.theme-dark .tag,
html.theme-dark .seg,
html.theme-dark .segmented,
html.theme-dark .tabbar-seg {
  background: #121214;
  color: var(--ink);
  border-color: var(--line);
}

html.theme-dark .seg.on,
html.theme-dark .segmented .on,
html.theme-dark .pill.on {
  background: rgba(143, 168, 138, 0.18);
  color: #8fa88a;
}

/* Icon strokes that inherit black */
html.theme-dark .icon-btn,
html.theme-dark .text-btn,
html.theme-dark .lock-link,
html.theme-dark svg {
  color: inherit;
}

html.theme-dark .icon-btn,
html.theme-dark .text-btn {
  color: var(--forest);
}

/* Flash banners already dark-ish; nudge for contrast */
html.theme-dark .flash.ok {
  background: #0d2818;
  color: var(--ok);
}
html.theme-dark .flash.err {
  background: #3a1515;
  color: #ff6961;
}

/* Admin tabs / misc leftover whites */
html.theme-dark .admin-tabs a.on {
  color: #fff;
}

/* Ensure borders on cards use dark token */
html.theme-dark .card,
html.theme-dark .auth-card,
html.theme-dark .auth-install {
  border: 0.5px solid var(--line);
  box-shadow: var(--shadow);
}

/* Duration selected radio fill uses inset white ring — remap */
html.theme-dark .duration-row input:checked + .duration-row-ui .duration-radio,
html.theme-dark .durations input:checked + .duration-row-ui .duration-radio {
  border-color: #ff2d55;
  background: #ff2d55;
  box-shadow: inset 0 0 0 3px #1a1a1c;
}

/* Login faces / install cards sit on black page */
html.theme-dark .auth-wrap {
  background: transparent;
}

html.theme-dark .login-face {
  color: var(--ink);
}

/* Share send bar */
html.theme-dark .share-bar {
  background: #1a1a1c;
  border-top: 0.5px solid var(--line);
}

/* Comments composer bar */
html.theme-dark .comments-composer {
  border-top: 0.5px solid var(--line);
}

/* Soft blue highlight used in selection / focus */
html.theme-dark ::selection {
  background: rgba(143, 168, 138, 0.35);
  color: #fff;
}

html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark .field:focus {
  outline: 2px solid rgba(143, 168, 138, 0.45);
  outline-offset: 1px;
}

/* Solicitudes / feed polish: secondary surfaces for stacked rows */
html.theme-dark .duration-row-ui {
  background: #121214;
}
html.theme-dark .duration-row input:checked + .duration-row-ui {
  border-color: #ff2d55;
  background: rgba(255, 45, 85, 0.14);
}
html.theme-dark .duration-row input:checked + .duration-row-ui .duration-radio {
  border-color: #ff2d55;
  background: #ff2d55;
  box-shadow: inset 0 0 0 3px #1a1a1c;
}
html.theme-dark .pending-pill {
  background: rgba(143, 168, 138, 0.18);
  border-color: #8fa88a;
  color: #8fa88a;
}
html.theme-dark .req-card {
  background: #1a1a1c;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
html.theme-dark h2.section,
html.theme-dark .garden-grant-title,
html.theme-dark .req-top h3,
html.theme-dark .empty h2 {
  color: #f2f0ec;
}
@media (min-width: 540px) {
  html.theme-dark .app {
    box-shadow: 0 0 0 10px #0d0d0f, 0 30px 80px rgba(0, 0, 0, 0.7);
  }
}

html.theme-dark .options-head h2,
html.theme-dark .opt-title {
  color: #f2f0ec;
}
html.theme-dark .opt-hint {
  color: #9a9690;
}
html.theme-dark .opt-row {
  border-color: rgba(255, 255, 255, 0.12);
}
html.theme-dark .options-handle {
  background: rgba(255, 255, 255, 0.28);
}


/* Lugares / Recomendaciones board */
html.theme-dark .place-card .place-source {
  color: #9a9690;
}
html.theme-dark .kind-chip.kind-restaurante {
  background: rgba(255, 159, 10, 0.22);
  color: #ff9f0a;
}
html.theme-dark .kind-chip.kind-bar {
  background: rgba(191, 90, 242, 0.22);
  color: #bf5af2;
}
html.theme-dark .kind-chip.kind-plan {
  background: rgba(143, 168, 138, 0.22);
  color: #a8c2a3;
}
html.theme-dark .kind-chip.kind-otro {
  background: rgba(255, 214, 10, 0.16);
  color: #ffd60a;
}
html.theme-dark .explore-hub[href="/lugares"] {
  border-color: rgba(255, 255, 255, 0.12);
}
html.theme-dark .lugar-maps-btn {
  background: var(--scandi-cream);
  color: #121212;
  border-color: transparent;
}
html.theme-dark .place-serves span {
  color: #9a9690;
}
html.theme-dark .filter-pills-5 .kind-pill span,
html.theme-dark .kind-pills-4 .kind-pill span {
  background: #121214;
  border-color: rgba(255, 255, 255, 0.12);
  color: #9a9690;
}
html.theme-dark .filter-pills-5 .kind-pill input:checked + span,
html.theme-dark .kind-pills-4 .kind-pill input:checked + span {
  background: var(--gold);
  border-color: var(--gold);
  color: #0d0d0f;
}

/* —— Apple Messages–style inbox (Mensajes list) —— */
html.theme-dark .people-list.form-block {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 4px 0 calc(24px + var(--nav-h, 60px));
}

html.theme-dark .msg-row-wrap {
  background: transparent;
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.65);
  padding: 0 16px;
  gap: 4px;
}

html.theme-dark .msg-row-wrap:last-child {
  border-bottom-color: transparent;
}

html.theme-dark .user-row.msg-row,
html.theme-dark .msg-row-wrap .msg-row {
  background: transparent !important;
  border-bottom: none !important;
  border-color: transparent !important;
  padding: 13px 0;
  gap: 14px;
  -webkit-tap-highlight-color: transparent;
}

html.theme-dark .msg-row-wrap:active {
  background: #1a1a1c;
}

html.theme-dark .msg-row-main strong {
  color: #f2f0ec;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
}

html.theme-dark .msg-row-preview,
html.theme-dark .msg-row-preview.tiny {
  color: #98989F !important;
  font-size: 15px !important;
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

html.theme-dark .msg-row-meta .tiny {
  color: #636366 !important;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Unread: brighter preview + blue time (Apple Mail/Messages vibe) */
html.theme-dark .msg-row-wrap:has(.badge) .msg-row-main strong {
  font-weight: 700;
}
html.theme-dark .msg-row-wrap:has(.badge) .msg-row-preview,
html.theme-dark .msg-row-wrap:has(.badge) .msg-row-preview.tiny {
  color: #EBEBF5 !important;
  font-weight: 500;
}
html.theme-dark .msg-row-wrap:has(.badge) .msg-row-meta .tiny {
  color: #8fa88a !important;
  font-weight: 600;
}

html.theme-dark .msg-row .badge {
  background: #8fa88a;
  color: #0d0d0f;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  animation: none;
}

html.theme-dark .msg-row-wrap .msg-del {
  color: #636366;
  opacity: 0.9;
}

html.theme-dark .msg-row .avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
  flex-shrink: 0;
}

html.theme-dark .empty h2 {
  color: #f2f0ec;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Thread header stays card-like, Apple clean */
html.theme-dark .msg-head {
  background: #1a1a1c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0.5px solid var(--line);
}

html.theme-dark .msg-list {
  background: #0d0d0f;
}


html.theme-dark .act-item-request {
  background: rgba(143, 168, 138, 0.14);
}
html.theme-dark .act-item-garden_request {
  background: rgba(175, 82, 222, 0.16);
}
html.theme-dark .act-kind-follow {
  background: rgba(143, 168, 138, 0.22);
  color: #a8c2a3;
}
html.theme-dark .act-kind-garden {
  background: rgba(191, 90, 242, 0.22);
  color: #da8fff;
}
html.theme-dark .share-wa {
  color: #25d366 !important;
  background: rgba(37, 211, 102, 0.14) !important;
}
html.theme-dark .explore-city-chip {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f0ec;
}
html.theme-dark .explore-city-select {
  background: #121214;
  color: #f2f0ec;
  border-color: rgba(255, 255, 255, 0.12);
}
html.theme-dark .explore-hub-featured {
  background: linear-gradient(135deg, rgba(143, 168, 138, 0.22), rgba(255, 149, 0, 0.14));
  border-color: rgba(255, 255, 255, 0.14);
}
html.theme-dark .explore-place-chip {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f0ec;
}


/* Booking confirmation — keep text readable on dark cards */
html.theme-dark .book-confirm-card {
  color: #f2f0ec;
}
html.theme-dark .book-confirm-card .page-h,
html.theme-dark .book-confirm-title {
  color: #f2f0ec;
}
html.theme-dark .book-confirm-card > .tiny,
html.theme-dark .book-confirm-hint,
html.theme-dark .book-confirm-note {
  color: #9a9690;
}
html.theme-dark .book-confirm-when {
  background: #121214;
}
html.theme-dark .book-confirm-when strong {
  color: #f2f0ec;
}
html.theme-dark .book-confirm-when .tiny {
  color: #9a9690;
}

html.theme-dark .profile-share-bubble-btn {
  background: rgba(143, 168, 138, 0.22);
  border-color: rgba(143, 168, 138, 0.45);
  color: var(--gold);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}


/* High-contrast service badges in dark mode (app.css also sets these) */
html.theme-dark .chip,
html.theme-dark .chip-service,
html.theme-dark .chip-lashista,
html.theme-dark .chip-rating,
html.theme-dark .chip-agenda,
html.theme-dark .agenda-pill {
  font-weight: 800;
}

/* Story / historia rings — sage accent (replaces iOS blue rings) */
html.theme-dark .story-ring,
html.theme-dark .historia-ring,
html.theme-dark .ring-unseen,
html.theme-dark .av-ring.has-story,
html.theme-dark .story .ring,
html.theme-dark .historias-av.has-unseen {
  border-color: var(--gold);
}
html.theme-dark .story-ring.seen,
html.theme-dark .historia-ring.seen {
  border-color: var(--line);
}

/* Historia rings — sage conic (replaces iOS blue gradient) */
html.theme-dark .historias-ring.unseen {
  background: conic-gradient(from 210deg, #a8c2a3, #8fa88a, #6f8a6a, #a8c2a3);
}
html.theme-dark .historias-ring.seen {
  background: var(--line);
}

/* ============================================================
   FULL SCANDI PARITY — match scandi-dark-interactive.html
   Appended overrides win over earlier dark-mock rules.
   ============================================================ */

html.theme-dark {
  --blue-ring: #3b82f6;
  --pink: #e879a9;
  --radius: 18px;
  --nav-h: 64px;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --shadow: none;
}

html.theme-dark,
html.theme-dark body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* —— Topbar: opaque chrome, Fredoka Regular ~28px —— */
html.theme-dark .topbar {
  background: #0d0d0f;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 36px;
  padding: 6px 12px 10px;
  margin-bottom: 6px;
}
html.theme-dark .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  padding: 0;
}
html.theme-dark .icon-btn,
html.theme-dark .text-btn,
html.theme-dark .lock-link,
html.theme-dark .topbar .icon-btn,
html.theme-dark .topbar svg {
  color: var(--muted);
}
html.theme-dark .brand-msg {
  color: var(--ink);
}

/* —— Auth: Fredoka Regular ~42px, cream CTA, sage links, fields 14px —— */
html.theme-dark .auth-wrap h1,
html.theme-dark .auth-mark,
html.theme-dark .auth-wrap .brand .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 6px;
  padding: 0;
}
html.theme-dark .auth-wrap .brand {
  margin: 0 auto 22px;
  padding-right: 18px;
}
html.theme-dark .auth-card {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  padding: 18px 16px;
}
html.theme-dark .field,
html.theme-dark input.field,
html.theme-dark textarea.field,
html.theme-dark select.field {
  background: #121214;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  padding: 12px;
}
html.theme-dark .field:focus,
html.theme-dark input.field:focus,
html.theme-dark textarea.field:focus,
html.theme-dark select.field:focus,
html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: none;
}
html.theme-dark .btn:not(.ghost):not(.btn-quiet):not(.share-wa):not(.lugar-maps-btn) {
  background: var(--scandi-cream);
  color: #121212;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  padding: 13px 16px;
}
html.theme-dark .btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
}
html.theme-dark .auth-switch a,
html.theme-dark .auth-toggle a {
  color: var(--sage);
  font-weight: 600;
}
html.theme-dark label.lbl {
  color: var(--muted);
}

/* —— Cards / posts: soft scandi, ~18px, 1px line —— */
html.theme-dark .card,
html.theme-dark .auth-install,
html.theme-dark .audience,
html.theme-dark .req-card,
html.theme-dark .grant-card,
html.theme-dark .pass-card {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}
html.theme-dark .feed {
  gap: 12px;
}
html.theme-dark .post-head {
  padding: 14px 14px 10px;
}
html.theme-dark .post-body {
  padding: 8px 14px 14px;
}
html.theme-dark .post-media,
html.theme-dark .post-photo img,
html.theme-dark .post-media video {
  border-radius: 0;
}
html.theme-dark .post-media.post-photo,
html.theme-dark .post-media:not(.board-podcast) {
  border-radius: 14px;
  margin: 0 14px 10px;
  overflow: hidden;
}

/* Action pills — sage when on (not iOS blue/pink text links) */
html.theme-dark .react-btn {
  background: #121214;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  height: auto;
  min-width: 0;
  padding: 6px 12px;
  gap: 6px;
}
html.theme-dark .react-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
html.theme-dark .react-btn.on,
html.theme-dark .react-btn.on-share,
html.theme-dark .react-btn.copied {
  color: var(--sage);
  border-color: rgba(143, 168, 138, 0.45);
  background: #121214;
}
html.theme-dark .react-btn.on svg {
  fill: currentColor;
}
html.theme-dark .react-row {
  gap: 10px;
  flex-wrap: wrap;
}

/* —— Bottom nav: icon-only, sage active, Nuevo blue ring —— */
html.theme-dark .nav {
  background: #0a0a0b;
  border-top: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  height: auto;
  min-height: var(--nav-h);
  align-items: center;
}
html.theme-dark .nav::after {
  background: #0a0a0b;
}
html.theme-dark .nav a,
html.theme-dark .nav .nav-item {
  color: var(--muted);
  gap: 0;
  font-size: 0;
  line-height: 0;
}
/* Only hide text labels — never the Nuevo ring */
html.theme-dark .nav a > span.nav-label {
  display: none !important;
}
html.theme-dark .nav a > span.nuevo-ring {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.75px solid #3b82f6;
  place-items: center;
  color: #f2f0ec;
  background: transparent;
  box-sizing: border-box;
}
html.theme-dark .nav a > span.nuevo-ring svg {
  display: block !important;
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
html.theme-dark .nav a svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}
html.theme-dark .nav a.active {
  color: var(--sage);
}
html.theme-dark .nav .plus {
  width: 30px;
  height: 30px;
  margin-top: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.75px solid var(--blue-ring);
  box-shadow: none;
  color: var(--ink);
  display: grid;
  place-items: center;
}
html.theme-dark .nav .plus svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
}
html.theme-dark .nav a.active .plus {
  border-color: var(--sage);
  color: var(--sage);
}
html.theme-dark .nav .plus + span {
  display: none !important;
}

/* —— Explorar hubs —— */
html.theme-dark .explore-hubs {
  gap: 10px;
}
html.theme-dark .explore-hub {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  padding: 14px;
  min-height: 0;
}
html.theme-dark .explore-hub strong {
  font-size: 14px;
  font-weight: 650;
}
html.theme-dark .explore-hub > span {
  font-size: 11px;
  color: var(--muted);
}
html.theme-dark .explore-hub-featured {
  background: linear-gradient(135deg, #121820, #1a1a1c);
  border-color: rgba(59, 130, 246, 0.35);
}
html.theme-dark .explore-hub-featured[href="/clips"],
html.theme-dark .explore-hub-featured[href="/historias/nueva"] {
  background: linear-gradient(135deg, #1a1218, #1a1a1c);
  border-color: rgba(232, 121, 169, 0.35);
}
html.theme-dark .explore-loteria-teaser {
  background: #0d2818;
  border: 2px solid #34c759;
  border-radius: 16px;
  box-shadow: none;
  margin: 12px 14px 14px;
  padding: 14px 16px;
}

/* —— Sheets: 22px top radius, page bg, sage accents —— */
html.theme-dark .comments-sheet,
html.theme-dark .share-sheet,
html.theme-dark .options-sheet,
html.theme-dark .book-pick-sheet,
html.theme-dark .social-link-sheet,
html.theme-dark .sheet,
html.theme-dark .drawer {
  background: #0d0d0f;
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  color: var(--ink);
  box-shadow: none;
}
html.theme-dark .comments-handle,
html.theme-dark .options-handle {
  background: #333;
  opacity: 1;
}
html.theme-dark .comments-head h2,
html.theme-dark .options-head h2,
html.theme-dark .share-sheet .comments-head h2 {
  color: var(--ink);
  font-weight: 650;
  font-size: 17px;
}
html.theme-dark .comments-post,
html.theme-dark .share-send:not(:disabled) {
  color: var(--sage);
}

/* —— Typography: serif section titles; never serif on wordmark —— */
html.theme-dark .page-title,
html.theme-dark h2.section,
html.theme-dark .audience-title,
html.theme-dark .hero h2,
html.theme-dark .profile-hero h1,
html.theme-dark .profile-hero h2,
html.theme-dark .empty h2,
html.theme-dark .comments h2 {
  font-family: var(--serif);
  font-weight: 500;
}
html.theme-dark .wordmark,
html.theme-dark .auth-wrap h1,
html.theme-dark .auth-mark,
html.theme-dark .auth-wrap .brand .wordmark,
html.theme-dark .act-head h2 {
  font-family: "Fredoka", system-ui, sans-serif !important;
}
/* act-head "Actividad" / "Buscar" are UI titles — use sans, not wordmark script */
html.theme-dark .act-head h2 {
  font-family: var(--sans) !important;
  font-weight: 650;
  font-size: 17px;
  color: var(--ink);
}

/* —— Duration / segment: sage (mock), not iOS pink —— */
html.theme-dark .duration-row input:checked + .duration-row-ui,
html.theme-dark .durations input:checked + .duration-row-ui {
  border-color: var(--sage);
  background: rgba(143, 168, 138, 0.14);
}
html.theme-dark .duration-row input:checked + .duration-row-ui .duration-radio,
html.theme-dark .durations input:checked + .duration-row-ui .duration-radio {
  border-color: var(--sage);
  background: var(--sage);
  box-shadow: inset 0 0 0 3px #1a1a1c;
}
html.theme-dark .durations:not(.durations-stack) input:checked + span {
  background: var(--sage);
  color: #0d0d0f;
  border-color: var(--sage);
}
html.theme-dark .duration label:has(input:checked),
html.theme-dark .historias-pill.on {
  border-color: var(--sage);
  color: var(--ink);
}

/* —— Chat bubbles (mock .bubble.me / .them) —— */
html.theme-dark .msg-bubble.theirs,
html.theme-dark .room-bubble {
  background: #1a1a1c !important;
  border: 1px solid var(--line) !important;
  color: #f2f0ec !important;
  border-bottom-left-radius: 6px;
}
html.theme-dark .msg-bubble.mine,
html.theme-dark .room-msg.mine .room-bubble {
  background: #243028 !important;
  border: 1px solid rgba(143, 168, 138, 0.3) !important;
  color: #f2f0ec !important;
  border-bottom-right-radius: 6px;
}
html.theme-dark .msg-list[data-thread-user] .room-msg.mine .room-bubble::after {
  background: #243028 !important;
}
html.theme-dark .msg-list[data-thread-user] .room-msg:not(.mine) .room-bubble::after {
  background: #1a1a1c !important;
}

/* —— Misc chrome —— */
html.theme-dark .seg,
html.theme-dark .segmented {
  background: #121214;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
}
html.theme-dark .seg button.on,
html.theme-dark .segmented .on {
  background: #1a1a1c;
  color: var(--ink);
}
html.theme-dark .pill.on,
html.theme-dark .pending-pill {
  color: var(--sage);
  border-color: rgba(143, 168, 138, 0.45);
  background: #121214;
}
html.theme-dark .tabs button.on::after,
html.theme-dark .profile-tabs button.on::after {
  background: var(--sage);
}
html.theme-dark .composer button,
html.theme-dark .play {
  background: var(--sage);
  color: #0d0d0f;
}
html.theme-dark .mic {
  background: var(--sage);
  color: #0d0d0f;
}
html.theme-dark .list-item,
html.theme-dark .user-row:not(.msg-row) {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 14px;
}
html.theme-dark .subtitle {
  color: var(--muted);
  letter-spacing: 0.04em;
}
html.theme-dark .badge {
  background: var(--danger);
}
html.theme-dark .nav .badge {
  background: #ff2d55;
}

/* ============================================================
   HTML STRUCTURE PARITY v11 — class names from mock markup
   ============================================================ */

/* Auth brand (no demo unread bubble) */
html.theme-dark .auth-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 20px 16px 28px;
  text-align: center;
}
html.theme-dark .auth-brand {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 42px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
html.theme-dark .auth-sub {
  text-align: center;
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 14px;
}
html.theme-dark .auth-toggle {
  text-align: center;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}
html.theme-dark .auth-toggle a {
  color: var(--sage);
  font-weight: 600;
  text-decoration: none;
}
html.theme-dark .auth-toggle-muted {
  margin-top: 8px;
  opacity: 0.75;
  font-size: 12px;
}
html.theme-dark .auth-toggle-muted a {
  color: var(--muted);
  font-weight: 500;
}
html.theme-dark .auth-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
html.theme-dark .auth-card .lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
html.theme-dark .btn-cream,
html.theme-dark .btn.btn-cream {
  background: var(--scandi-cream) !important;
  color: #121212 !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 13px;
  width: 100%;
}
html.theme-dark .btn-sage,
html.theme-dark .btn.btn-sage {
  background: var(--sage) !important;
  color: #0d0d0f !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 600;
}
html.theme-dark .btn-ghost,
html.theme-dark .btn.btn-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  width: auto;
  padding: 10px 16px;
}
html.theme-dark .btn-sm {
  padding: 8px 14px !important;
  font-size: 13px !important;
  width: auto !important;
}

/* Bottom nav: real .nuevo-ring, hide labels */
html.theme-dark .nav .nav-label {
  display: none !important;
  font-size: 0;
}
html.theme-dark .nav a.nuevo-btn {
  color: var(--ink);
}
html.theme-dark .nav .nuevo-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.75px solid var(--blue-ring, #3b82f6);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
html.theme-dark .nav .nuevo-ring svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
html.theme-dark .nav a.active .nuevo-ring,
html.theme-dark .nav a.nuevo-btn.active .nuevo-ring {
  border-color: var(--sage);
  color: var(--sage);
}
/* Legacy .plus still maps to ring look if present */
html.theme-dark .nav .plus {
  width: 30px;
  height: 30px;
  margin-top: 0;
  border-radius: 50%;
  background: transparent !important;
  border: 1.75px solid var(--blue-ring, #3b82f6);
  box-shadow: none !important;
  color: var(--ink);
}

/* Explorar: feat-row + hub-grid + loteria + mosaic */
html.theme-dark .feat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 14px 14px;
}
html.theme-dark .feat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  text-align: left;
  font: inherit;
  width: 100%;
}
html.theme-dark .feat.blue {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, #121820, #1a1a1c);
}
html.theme-dark .feat.pink {
  border-color: rgba(232, 121, 169, 0.35);
  background: linear-gradient(135deg, #1a1218, #1a1a1c);
}
html.theme-dark .feat .em,
html.theme-dark .feat .em {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex: 0 0 auto;
}
html.theme-dark .feat .t {
  font-weight: 650;
  font-size: 15px;
}
html.theme-dark .feat .b {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
html.theme-dark .hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 14px 14px;
}
html.theme-dark .hub {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  text-align: left;
  font: inherit;
  display: block;
}
html.theme-dark .hub.hub-wide,
html.theme-dark .hub[style*="grid-column"] {
  grid-column: 1 / -1;
}
html.theme-dark .hub .em {
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}
html.theme-dark .hub .t {
  font-weight: 650;
  font-size: 14px;
}
html.theme-dark .hub .b {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.3;
}
html.theme-dark a.loteria,
html.theme-dark .loteria {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 0 14px 14px;
  background: #0d2818;
  border: 2px solid #34c759;
  color: inherit;
  text-decoration: none;
  text-align: left;
  font: inherit;
  width: auto;
  box-shadow: none;
}
html.theme-dark .loteria .t {
  font-weight: 800;
  font-size: 16px;
}
html.theme-dark .loteria .m {
  color: #e5e5ea;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
html.theme-dark .loteria .n {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
html.theme-dark .loteria .ch {
  margin-left: auto;
  color: #34c759;
  font-size: 28px;
  font-weight: 300;
}
html.theme-dark .section-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 14px 10px;
}
html.theme-dark .mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0 0 8px;
  padding: 0;
}
html.theme-dark .mosaic a {
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  background: #161618;
  position: relative;
}
html.theme-dark .mosaic img,
html.theme-dark .mosaic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Feed cards: bordered 18, media inset 14, pill acts */
html.theme-dark .feed .card,
html.theme-dark article.card {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  margin: 0 12px 12px;
  box-shadow: none;
  overflow: hidden;
}
html.theme-dark .post-head,
html.theme-dark .post-head {
  padding: 14px 14px 10px;
}
html.theme-dark .post-media.post-photo,
html.theme-dark .post-media:not(.board-podcast) {
  border-radius: 14px;
  margin: 0 14px 10px;
  overflow: hidden;
}
html.theme-dark .post-body {
  padding: 8px 14px 14px;
}
html.theme-dark .react-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
html.theme-dark .react-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #121214;
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  height: auto;
  min-width: 0;
}
html.theme-dark .react-btn.on,
html.theme-dark .react-btn.on-share {
  color: var(--sage);
  border-color: rgba(143, 168, 138, 0.45);
  background: #121214;
}

/* Stories row spacing */
html.theme-dark .historias-tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 14px 14px;
  scrollbar-width: none;
}
html.theme-dark .historias-tray::-webkit-scrollbar { display: none; }

/* Opaque topbar */
html.theme-dark .topbar {
  background: #0d0d0f !important;
  border-bottom: 1px solid transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Back row (hub pages) */
html.theme-dark .back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 14px 12px;
}
html.theme-dark .back-row .back {
  background: none;
  border: 0;
  color: var(--ink);
  padding: 6px;
  display: inline-flex;
  text-decoration: none;
}
html.theme-dark .back-row .h1,
html.theme-dark .back-row .page-title {
  font-family: var(--serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
}

/* Bochinche mic sage + cream publish */
html.theme-dark .mic,
html.theme-dark .board-rec-btn.mic,
html.theme-dark .board-rec-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 0;
  background: var(--sage) !important;
  color: #0d0d0f !important;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(143, 168, 138, 0.25);
  margin: 8px auto;
  gap: 0;
  flex-direction: column;
  font-size: 0;
}
html.theme-dark .board-rec-btn .board-rec-mic,
html.theme-dark .board-rec-btn svg {
  width: 32px;
  height: 32px;
}
html.theme-dark .board-rec-btn [data-board-rec-label],
html.theme-dark .board-rec-btn span {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}
html.theme-dark .mic-wrap,
html.theme-dark .board-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px;
}
html.theme-dark .board-composer.card {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  margin: 0 14px 14px;
}

/* Seg control */
html.theme-dark .seg {
  display: flex;
  gap: 6px;
  background: #121214;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin: 0 14px 14px;
}
html.theme-dark .seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html.theme-dark .seg button.on {
  background: var(--card);
  color: var(--ink);
}

/* Messages composer */
html.theme-dark .composer,
html.theme-dark .msg-composer.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #0d0d0f;
}
html.theme-dark .composer .field,
html.theme-dark .msg-composer .msg-input {
  margin: 0;
  flex: 1;
  border-radius: 22px;
  padding: 11px 14px;
}
html.theme-dark .composer-send,
html.theme-dark .msg-composer .msg-send {
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  min-width: 42px;
  background: var(--sage) !important;
  color: #0d0d0f !important;
  border: 0 !important;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 0;
}
html.theme-dark .msg-bubble.theirs,
html.theme-dark .room-bubble {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: #1a1a1c !important;
  border: 1px solid var(--line) !important;
}
html.theme-dark .msg-bubble.mine,
html.theme-dark .room-msg.mine .room-bubble {
  background: #243028 !important;
  border: 1px solid rgba(143, 168, 138, 0.3) !important;
  border-bottom-right-radius: 6px;
}

/* List items / hub cards */
html.theme-dark .list-item,
html.theme-dark .top10-row,
html.theme-dark .sala-room-btn,
html.theme-dark .board-card,
html.theme-dark .req-card {
  background: #1a1a1c;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 14px 8px;
  box-shadow: none;
}
html.theme-dark .price {
  font-weight: 700;
  color: var(--sage);
  font-size: 15px;
}
html.theme-dark .tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #121214;
  border: 1px solid var(--line);
  color: var(--muted);
  margin-right: 4px;
}
html.theme-dark .room {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  margin: 0 14px 8px;
}
html.theme-dark .room .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sage);
  flex: 0 0 auto;
}

/* Profile hero closer to mock */
html.theme-dark .profile-hero {
  text-align: center;
  padding: 4px 14px 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html.theme-dark .profile-hero .avatar,
html.theme-dark .profile-hero .avatar.lg {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
}
html.theme-dark .profile-tabs button.on::after,
html.theme-dark .tabs button.on::after {
  background: var(--sage);
}

/* Nuevo form */
html.theme-dark .topbar-nuevo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
html.theme-dark .row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
html.theme-dark .sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 14px 14px;
}
html.theme-dark .nuevo-form .form-block,
html.theme-dark .nuevo-form .form-block {
  padding: 0 14px 24px;
}

/* Kill serif on wordmark if any Fraunces leak */
html.theme-dark .wordmark,
html.theme-dark .auth-brand,
html.theme-dark .logo.wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
}

/* Auth: match mock — no card chrome, placeholder-only fields */
html.theme-dark .auth-wrap .auth-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.theme-dark .auth-wrap .lbl {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
html.theme-dark .auth-wrap .field {
  margin-bottom: 10px;
  border-radius: 14px !important;
}
html.theme-dark .auth-footer .badge,
html.theme-dark .auth-install .badge,
html.theme-dark .install-btn .badge {
  display: none !important;
}
html.theme-dark .auth-install,
html.theme-dark .install-btn {
  filter: none !important;
  box-shadow: none !important;
}

/* Profile hero center like mock */
html.theme-dark .profile-hero {
  text-align: center;
}
html.theme-dark .profile-hero .profile-row {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html.theme-dark .profile-hero .avatar {
  width: 96px !important;
  height: 96px !important;
  font-size: 36px;
}
html.theme-dark .profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 0 14px 12px;
  text-align: center;
}

/* ============================================================
   PARITY v13 — auth minimal + mock-top wordmark-left + kill extras
   ============================================================ */

/* Auth: vertically center, no footer clutter, no badge/glow */
html.theme-dark .shell-auth .app,
html.theme-dark .app.shell-auth,
html.theme-dark body.shell-auth .app {
  min-height: 100dvh;
}
html.theme-dark .auth-wrap {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 48px);
  padding: 24px 20px 32px;
  max-width: 420px;
  margin: 0 auto;
}
html.theme-dark .auth-brand {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  text-align: center;
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  filter: none !important;
  position: relative;
}
/* Kill any wordmark badge / purple glow on auth */
html.theme-dark .auth-brand::after,
html.theme-dark .auth-brand .badge,
html.theme-dark .auth-brand .brand-msg,
html.theme-dark .auth-wrap .brand-msg,
html.theme-dark .auth-wrap .badge {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}
html.theme-dark .auth-footer,
html.theme-dark .login-faces,
html.theme-dark .auth-install,
html.theme-dark .auth-install-stack,
html.theme-dark .auth-install-tip,
html.theme-dark .auth-age,
html.theme-dark .auth-toggle-muted,
html.theme-dark .auth-wrap .auth-toggle-muted {
  display: none !important;
}

/* Topchrome: wordmark LEFT, icons RIGHT */
html.theme-dark .topbar.mock-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px 10px;
  background: #0d0d0f !important;
  border-bottom: 0 !important;
}
html.theme-dark .brand-word {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
html.theme-dark .brand-word .wordmark,
html.theme-dark .mock-top .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0;
}
html.theme-dark .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
html.theme-dark .top-actions .star-btn,
html.theme-dark .top-actions .icon-btn,
html.theme-dark .msg-icon {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
}
html.theme-dark .top-actions .star-btn svg,
html.theme-dark .top-actions .icon-btn svg,
html.theme-dark .msg-icon svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  stroke-width: 2.3;
  display: block;
  transform: translateY(1px);
}
html.theme-dark .msg-icon .badge,
html.theme-dark .top-actions .star-badge:not([hidden]) {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--danger, #c47a6a);
  color: #fff;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
/* Legacy centered brand-as-messages — hide bubble if any leftover */
html.theme-dark .topbar .brand .brand-msg {
  display: none !important;
}
html.theme-dark .topbar .brand {
  pointer-events: none;
}

/* Feed cards: radius 18, border, media inset 14, pill acts */
html.theme-dark .feed .card,
html.theme-dark article.card {
  border-radius: 18px !important;
  border: 1px solid #2a2a2e !important;
  background: #1a1a1c !important;
}
html.theme-dark .post-media,
html.theme-dark .post-media.post-photo,
html.theme-dark .post-photo img,
html.theme-dark .post-media video {
  border-radius: 14px !important;
}
html.theme-dark .react-social {
  display: none !important;
}

/* Stories: circular sage rings */
html.theme-dark .historias-ring.unseen,
html.theme-dark .story .ring,
html.theme-dark .historias-tray .ring {
  border-color: var(--sage) !important;
  background: conic-gradient(from 210deg, #a8c2a3, #8fa88a, #6f8a6a, #a8c2a3);
}

/* Explorar: hide leftover city/hoy chrome if any */
html.theme-dark .explore-city-card,
html.theme-dark .explore-hoy-card,
html.theme-dark [data-city-strip] {
  display: none !important;
}

/* Nuevo: Fredoka Regular title */
html.theme-dark .topbar-nuevo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 10px;
}
html.theme-dark .topbar-nuevo .wordmark,
html.theme-dark .topbar-nuevo .logo.wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 400;
}
html.theme-dark .nuevo-form .row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Nav: icon-only, sage active, Nuevo blue ring */
html.theme-dark .nav .nav-label {
  display: none !important;
}
html.theme-dark .nav a.active {
  color: var(--sage) !important;
}
html.theme-dark .nav .nuevo-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.75px solid #3b82f6;
  display: grid;
  place-items: center;
  color: var(--ink);
}
html.theme-dark .nav a.active .nuevo-ring {
  border-color: var(--sage);
  color: var(--sage);
}

/* Auth shell vertical center (class on .app is just "auth") */
html.theme-dark .app.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
html.theme-dark .app.auth .auth-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 20px 40px;
}

/* ============================================================
   PARITY v14 — hubs back-row, mensajes, overlays, ajustes sheet
   ============================================================ */

html.theme-dark .back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 14px 12px;
  min-height: 36px;
}
html.theme-dark .back-row .back,
html.theme-dark .back-row .icon-btn {
  background: none;
  border: 0;
  color: var(--ink);
  padding: 6px;
  display: inline-flex;
  text-decoration: none;
}
html.theme-dark .back-row .h1,
html.theme-dark .back-row .page-title {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 500;
  font-size: 22px !important;
  margin: 0 !important;
  color: var(--ink);
}
html.theme-dark .sub,
html.theme-dark .board-anon-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 14px 14px;
}

/* Hub listing cards */
html.theme-dark .board-card,
html.theme-dark .board-feed .card,
html.theme-dark .listing-card {
  background: #1a1a1c;
  border: 1px solid #2a2a2e;
  border-radius: 18px;
  padding: 14px;
  margin: 0 14px 10px;
  box-shadow: none;
}
html.theme-dark .board-composer,
html.theme-dark .listing-compose {
  margin: 0 14px 14px;
}

/* Mensajes list — dark rows, not white buttons */
html.theme-dark .msg-row,
html.theme-dark a.msg-row,
html.theme-dark .user-row.msg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 6px;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
  border: 0;
  width: 100%;
  text-decoration: none;
  box-shadow: none !important;
}
html.theme-dark .msg-row:hover,
html.theme-dark a.msg-row:hover {
  background: #1a1a1c !important;
}
html.theme-dark .msg-row-main strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
html.theme-dark .msg-row-preview,
html.theme-dark .msg-row-meta .tiny {
  color: var(--muted);
  font-size: 12px;
}
html.theme-dark .msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #2a2a2e;
}
html.theme-dark .bubble.them {
  background: #1a1a1c;
  border: 1px solid #2a2a2e;
  border-bottom-left-radius: 6px;
}
html.theme-dark .bubble.me {
  background: #243028;
  border: 1px solid rgba(143, 168, 138, 0.3);
  border-bottom-right-radius: 6px;
}

/* Overlays / sheets — scandi dark */
html.theme-dark .act-panel,
html.theme-dark .search-panel,
html.theme-dark .share-sheet,
html.theme-dark .comments-sheet,
html.theme-dark .options-sheet {
  background: #0d0d0f !important;
  border-color: #2a2a2e !important;
  color: var(--ink);
}
html.theme-dark .act-head h2,
html.theme-dark .search-head h2,
html.theme-dark .options-sheet h2 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
}
html.theme-dark .options-sheet .opt-row,
html.theme-dark .options-sheet .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #2a2a2e;
}
html.theme-dark .btn-danger,
html.theme-dark .options-sheet .btn-danger,
html.theme-dark button[formaction*="salir"],
html.theme-dark .auth-wrap + .btn-danger {
  background: transparent !important;
  color: #c47a6a !important;
  border: 1px solid rgba(196, 122, 106, 0.45) !important;
  border-radius: 999px;
}

/* Edit profile */
html.theme-dark .edit-form .field,
html.theme-dark form[action="/perfil/editar"] .field {
  background: #121214;
  border: 1px solid #2a2a2e;
  border-radius: 14px;
  color: var(--ink);
}
html.theme-dark .btn-cream,
html.theme-dark .btn.btn-cream {
  background: #e8e4dc !important;
  color: #121212 !important;
  border: 0 !important;
  border-radius: 999px;
  font-weight: 600;
}

/* Booking/admin pages: wordmark not logo-bubble */
html.theme-dark .topbar .brand-word .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 28px;
  color: var(--ink);
}

/* Loteria green card */
html.theme-dark .loteria,
html.theme-dark .explore-loteria-card,
html.theme-dark .loteria-page-card {
  background: #0d2818 !important;
  border: 2px solid #34c759 !important;
  border-radius: 16px;
  color: var(--ink);
}

/* Ensure no purple glow / badge on auth brand */
html.theme-dark .app.auth .auth-brand {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html.theme-dark .app.auth .auth-brand::before,
html.theme-dark .app.auth .auth-brand::after {
  display: none !important;
  content: none !important;
}

/* Ajustes / options sheet — match mock toggle rows */
html.theme-dark .options-sheet .opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid #2a2a2e;
  color: var(--ink);
  text-decoration: none;
}
html.theme-dark .options-sheet .opt-title {
  font-weight: 650;
  font-size: 14px;
}
html.theme-dark .options-sheet .opt-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 0;
}
html.theme-dark .opt-switch-ui {
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: #2a2a2e;
  position: relative;
  display: inline-block;
  transition: background .2s;
}
html.theme-dark .opt-switch input:checked + .opt-switch-ui {
  background: var(--sage, #8fa88a);
}
html.theme-dark .opt-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
html.theme-dark .opt-switch input:checked + .opt-switch-ui::after {
  transform: translateX(18px);
}
html.theme-dark .opt-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html.theme-dark .options-sheet form[action*="salir"] > .btn:not(.opt-row),
html.theme-dark .options-sheet button.opt-logout:not(.opt-row) {
  width: 100%;
  margin-top: 24px;
  background: transparent !important;
  color: #c47a6a !important;
  border: 1px solid rgba(196,122,106,.45) !important;
  border-radius: 999px;
  padding: 13px;
  font-weight: 600;
}

/* Topchrome brand-word on secondary pages */
html.theme-dark .topbar .brand-word .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
html.theme-dark .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Messages list — cover live class names */
html.theme-dark .msg-list-page .user-row,
html.theme-dark .msg-list-page .msg-row,
html.theme-dark a.user-row.msg-row {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 14px;
  text-align: left;
}
html.theme-dark .msg-list-page .user-row:hover {
  background: #1a1a1c !important;
}
html.theme-dark .section-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 4px 14px 10px;
}


/* MOCK FONT STACK — match scandi-dark-interactive.html exactly */
html.theme-dark {
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
}
html.theme-dark,
html.theme-dark body,
html.theme-dark button,
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}
html.theme-dark .wordmark,
html.theme-dark .auth-brand,
html.theme-dark .brand-word,
html.theme-dark .logo,
html.theme-dark .topchrome .logo,
html.theme-dark .nuevo-title,
html.theme-dark .mock-top .wordmark {
  font-family: "Fredoka", system-ui, sans-serif !important;
}
html.theme-dark .h1,
html.theme-dark .hero h2,
html.theme-dark .profile-name,
html.theme-dark .perfil-name,
html.theme-dark .page-title.serif {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-weight: 500;
}


/* FIX nuevo-ring visible — was killed by span:not(.plus) hide */
html.theme-dark .nav a.nuevo-btn .nuevo-ring,
html.theme-dark .nav .nuevo-ring {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1.75px solid #3b82f6 !important;
  place-items: center;
  color: #f2f0ec !important;
  background: transparent !important;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}
html.theme-dark .nav .nuevo-ring svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
}
html.theme-dark .nav a.nuevo-btn.active .nuevo-ring,
html.theme-dark .nav a.active .nuevo-ring {
  border-color: #8fa88a !important;
  color: #8fa88a !important;
}

/* ============================================================
   PARITY v15 — feed when/pills, hide like-line, forms inline, icons
   ============================================================ */

/* Caption above acts like mock: keep structure, hide redundant chrome */
html.theme-dark .like-line,
html.theme-dark .view-comments {
  display: none !important;
}
html.theme-dark .react-row form {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
html.theme-dark .react-row.acts {
  gap: 14px;
  align-items: center;
}
html.theme-dark .react-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  color: #9a9690 !important;
  font-size: 12px !important;
  font-weight: 600;
  height: auto !important;
  min-width: 0 !important;
  line-height: 1.2;
}
html.theme-dark .react-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8;
}
html.theme-dark .react-btn.on,
html.theme-dark .react-btn.on-share {
  color: #8fa88a !important;
  border-color: rgba(143, 168, 138, 0.45) !important;
  background: #121214 !important;
}
html.theme-dark .post-head .when,
html.theme-dark .head .when {
  color: #9a9690;
  font-size: 12px;
  margin-top: 1px;
}
html.theme-dark .post-text,
html.theme-dark .caption,
html.theme-dark .cap {
  font-size: 14px;
  line-height: 1.45;
  color: #f2f0ec;
}

/* Topbar icons ~25px muted, heavier stroke; optically centered with 28px wordmark */
html.theme-dark .topbar.mock-top,
html.theme-dark .topbar {
  display: flex !important;
  align-items: center !important;
}
html.theme-dark .top-actions {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
  transform: none !important;
}
html.theme-dark .brand-word {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin-top: 0 !important;
}
html.theme-dark .top-actions .star-btn svg,
html.theme-dark .top-actions .icon-btn svg,
html.theme-dark .msg-icon svg {
  width: 25px !important;
  height: 25px !important;
  flex-shrink: 0 !important;
  stroke-width: 2.3 !important;
  display: block !important;
  /* Lucide glyphs read ~1px high vs Fredoka cap center */
  transform: translateY(1px) !important;
}
html.theme-dark .top-actions .star-btn,
html.theme-dark .top-actions .icon-btn,
html.theme-dark .msg-icon {
  color: #9a9690 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill legacy app.css .topbar > * { margin-top: 5px } lift vs wordmark */
html.theme-dark .topbar > .brand,
html.theme-dark .topbar > .brand-word,
html.theme-dark .topbar > .top-actions,
html.theme-dark .topbar > .topbar-side,
html.theme-dark .topbar > .topbar-right {
  margin-top: 0 !important;
}
html.theme-dark .star-badge:not([hidden]) {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #c47a6a !important;
  color: #fff;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  display: grid !important;
  place-items: center;
}

/* Feed card padding matches mock .card 14 */
html.theme-dark .feed .card,
html.theme-dark article.card {
  border-radius: 18px !important;
  border: 1px solid #2a2a2e !important;
  background: #1a1a1c !important;
  overflow: hidden;
}
html.theme-dark .post-media.post-photo,
html.theme-dark .post-media:not(.board-podcast) {
  border-radius: 14px !important;
  margin: 0 14px 10px !important;
}

/* Solicitudes seg + cards */
html.theme-dark .seg {
  margin: 0 14px 14px;
}
html.theme-dark .req-card,
html.theme-dark .sol-row {
  background: #1a1a1c;
  border: 1px solid #2a2a2e;
  border-radius: 18px;
  padding: 14px;
  margin: 0 14px 10px;
}
html.theme-dark .pair.row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
html.theme-dark .pair.row-btns .btn-sage {
  width: auto !important;
}
html.theme-dark .pair.row-btns .btn-ghost {
  width: auto !important;
}

/* Auth fields exact mock */
html.theme-dark .auth-wrap .field {
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 14px !important;
  color: #f2f0ec !important;
  padding: 12px !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
}

/* NEVER hide nuevo-ring — final guard */
html.theme-dark .nav .nuevo-ring,
html.theme-dark .nav a.nuevo-btn .nuevo-ring,
html.theme-dark .nav span.nuevo-ring {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1.75px solid #3b82f6 !important;
}


/* === MOCK PROFILE HERO v19 === */
html.theme-dark .mock-hide { display: none !important; }

html.theme-dark .profile-stack {
  padding: 0 16px 24px;
  max-width: 520px;
  margin: 0 auto;
}

html.theme-dark .profile-hero.mock-profile-hero,
html.theme-dark .mock-profile-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  text-align: center;
}

html.theme-dark .mock-profile-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center;
}

html.theme-dark .mock-avatar-wrap .avatar,
html.theme-dark .mock-avatar-wrap .av,
html.theme-dark .mock-avatar-wrap img,
html.theme-dark .mock-avatar-wrap > * {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  margin: 0 auto;
}

html.theme-dark .mock-profile-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

html.theme-dark h1.mock-profile-name,
html.theme-dark .mock-profile-name {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #f2f0ec !important;
  margin: 4px 0 0 !important;
  line-height: 1.15;
  text-align: center;
}

html.theme-dark .mock-profile-handle {
  color: #9a9690 !important;
  font-size: 14px !important;
  text-align: center;
}

html.theme-dark .mock-profile-hero .bio {
  max-width: 280px;
  margin: 10px auto 0 !important;
  text-align: center;
  color: #9a9690 !important;
  font-size: 14px;
  line-height: 1.4;
}

html.theme-dark .mock-profile-hero .social-row,
html.theme-dark .mock-profile-hero .profile-lashista-row,
html.theme-dark .mock-profile-hero .profile-mutuals,
html.theme-dark .mock-profile-hero .profile-corr,
html.theme-dark .mock-profile-hero .profile-hours,
html.theme-dark .mock-profile-hero .profile-food-loc-text {
  justify-content: center;
  text-align: center;
}

html.theme-dark .mock-profile-hero .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

html.theme-dark .mock-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

html.theme-dark .btn.btn-ghost.mock-pill,
html.theme-dark a.btn.btn-ghost.mock-pill,
html.theme-dark button.btn.btn-ghost.mock-pill {
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
  padding: 10px 16px !important;
  width: auto !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 500;
}

html.theme-dark .mock-extra-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

html.theme-dark .mock-stats.counts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #2a2a2e;
  border-bottom: 1px solid #2a2a2e;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 18px 0 8px !important;
  padding: 14px 0 !important;
  text-align: center;
}

html.theme-dark .mock-stats.counts a,
html.theme-dark .mock-stats.counts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

html.theme-dark .mock-stats.counts strong,
html.theme-dark .mock-stats.counts b {
  font-size: 16px;
  font-weight: 600;
  color: #f2f0ec;
}

html.theme-dark .mock-stats.counts span {
  font-size: 11px;
  color: #9a9690;
  text-transform: none;
}

html.theme-dark .mock-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #2a2a2e;
  margin: 8px 0 14px;
}

html.theme-dark .mock-tabs button {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #9a9690;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 8px;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
}

html.theme-dark .mock-tabs button.on {
  color: #8fa88a;
  border-bottom-color: #8fa88a;
}

html.theme-dark .mock-pens {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html.theme-dark .mock-pen-card {
  display: block;
  background: #1a1a1c;
  border: 1px solid #2a2a2e;
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: #f2f0ec;
}

html.theme-dark .mock-pen-card .cap {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}

html.theme-dark .mock-pubs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ============================================================
   PARITY v19 — profile hero mock + P0 auth/feed/stories/nuevo/sol/nav
   ============================================================ */

/* —— P0#7 Profile: centered serif hero, no card/share —— */
html.theme-dark .profile-hero,
html.theme-dark .profile-hero.mock-profile-hero,
html.theme-dark section.card.profile-hero {
  text-align: center !important;
  padding: 4px 0 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}
html.theme-dark .profile-share-bubble,
html.theme-dark .profile-share-bubble.mock-hide,
html.theme-dark .mock-hide {
  display: none !important;
}
html.theme-dark .profile-hero .profile-row,
html.theme-dark .mock-profile-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}
html.theme-dark .mock-avatar-wrap,
html.theme-dark .profile-hero .avatar,
html.theme-dark .profile-hero .avatar.lg,
html.theme-dark .mock-avatar-wrap .avatar {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  border: 1px solid #2a2a2e !important;
  font-size: 36px !important;
  background: linear-gradient(145deg, #2a322c, #141614) !important;
}
html.theme-dark .mock-profile-name,
html.theme-dark .profile-hero h1,
html.theme-dark .profile-hero .mock-profile-name {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
  color: #f2f0ec !important;
  text-align: center;
}
html.theme-dark .mock-profile-handle,
html.theme-dark .profile-hero .handle {
  color: #9a9690 !important;
  font-size: 14px !important;
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
html.theme-dark .profile-hero .bio {
  color: #9a9690 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 280px;
  margin: 0 auto 14px !important;
  text-align: center;
}
/* social-row hidden in dark mock — see HIDE PROFILE SOCIAL CHIPS */
html.theme-dark .mock-pills,
html.theme-dark .profile-hero .pills,
html.theme-dark .profile-hero .actions .mock-pills {
  display: flex !important;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 14px !important;
}
html.theme-dark .mock-pill,
html.theme-dark .mock-pills .btn-ghost,
html.theme-dark .profile-hero .btn.btn-ghost.mock-pill {
  width: auto !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
html.theme-dark .mock-extra-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* Stats row — full bleed lines like mock .stats */
html.theme-dark .mock-stats,
html.theme-dark .mock-stats.counts,
html.theme-dark section.mock-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  border-top: 1px solid #2a2a2e !important;
  border-bottom: 1px solid #2a2a2e !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 0 !important;
  margin: 0 0 12px !important;
  text-align: center;
  gap: 0 !important;
}
html.theme-dark .mock-stats strong,
html.theme-dark .mock-stats a strong {
  display: block;
  font-size: 16px !important;
  font-weight: 700;
  color: #f2f0ec;
}
html.theme-dark .mock-stats span,
html.theme-dark .mock-stats a span {
  color: #9a9690 !important;
  font-size: 11px !important;
  font-weight: 400;
}
html.theme-dark .mock-stats a {
  text-decoration: none;
  color: inherit;
}
/* Tabs Pensamientos / Publicaciones */
html.theme-dark .mock-tabs,
html.theme-dark [data-profile-tabs].mock-tabs {
  display: flex !important;
  gap: 22px;
  margin: 0 0 10px !important;
  padding: 0 4px;
  border: 0 !important;
  background: transparent !important;
}
html.theme-dark .mock-tabs button,
html.theme-dark [data-profile-tabs] [data-ptab] {
  background: none !important;
  border: 0 !important;
  color: #9a9690 !important;
  font: inherit;
  font-size: 14px !important;
  font-weight: 500;
  padding: 8px 0 !important;
  cursor: pointer;
  position: relative;
  border-radius: 0 !important;
  width: auto !important;
}
html.theme-dark .mock-tabs button.on,
html.theme-dark [data-profile-tabs] [data-ptab].on {
  color: #f2f0ec !important;
}
html.theme-dark .mock-tabs button.on::after,
html.theme-dark [data-profile-tabs] [data-ptab].on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #8fa88a;
  border-radius: 2px;
}
html.theme-dark .mock-pens {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 0 12px;
  background: transparent !important;
  border: 0 !important;
}
html.theme-dark .mock-pen-card,
html.theme-dark a.mock-pen-card {
  display: block;
  background: #1a1a1c !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  color: inherit;
  text-decoration: none;
  box-shadow: none !important;
}
html.theme-dark .mock-pen-card .cap {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 6px;
  color: #f2f0ec;
}
html.theme-dark .mock-pen-card .when {
  color: #9a9690;
  font-size: 12px;
}
html.theme-dark .mock-pubs.card,
html.theme-dark .mock-pubs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.theme-dark .mock-pubs .grid,
html.theme-dark .profile-stack .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  margin: 0;
}
html.theme-dark .profile-stack {
  padding: 0 16px 16px;
}

/* —— P0#1 Auth fields: 14px / pad 12 → ~43–46px —— */
/* Loop4 P0#1: mock gutters ≈21px (screen 16 + auth 4). Was 4px → form too wide. */
html.theme-dark .auth-wrap {
  padding: 20px 21px !important;
  max-width: none !important;
  width: 100%;
  margin: 0 auto !important;
  min-height: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
html.theme-dark .app.auth .auth-wrap {
  padding: 20px 21px !important;
  flex: 1;
  box-sizing: border-box !important;
}
html.theme-dark .auth-wrap .field,
html.theme-dark .auth-card .field,
html.theme-dark .app.auth .field {
  font-size: 14px !important;
  line-height: 1.25 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  margin-bottom: 10px !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}
html.theme-dark .auth-card .btn,
html.theme-dark .auth-wrap .btn-cream,
html.theme-dark .auth-wrap .btn.btn-cream {
  margin-top: 0 !important;
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* —— P0#2 Feed cards: padding 14, inset media —— */
html.theme-dark .feed .card,
html.theme-dark article.card {
  padding: 14px !important;
  margin: 0 16px 12px !important;
  border-radius: 18px !important;
  border: 1px solid #2a2a2e !important;
  background: #1a1a1c !important;
  overflow: visible !important;
  box-shadow: none !important;
}
html.theme-dark .feed .card .post-head,
html.theme-dark article.card .post-head,
html.theme-dark .feed .card .head {
  padding: 0 0 10px !important;
  margin: 0 !important;
}
html.theme-dark .feed .card .post-media,
html.theme-dark article.card .post-media,
html.theme-dark .feed .card .post-media.post-photo,
html.theme-dark article.card .post-media:not(.board-podcast) {
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  overflow: hidden;
  aspect-ratio: auto;
  width: 100%;
}
html.theme-dark .feed .card .post-body,
html.theme-dark article.card .post-body {
  padding: 0 !important;
  margin: 0 !important;
}
html.theme-dark .feed .card .caption,
html.theme-dark .feed .card .post-text,
html.theme-dark article.card .caption,
html.theme-dark article.card .post-text {
  margin: 0 0 8px !important;
}

/* —— P0#3 Stories: solid sage ring, no + —— */
html.theme-dark .historias-plus {
  display: none !important;
}
html.theme-dark .historias-ring.unseen,
html.theme-dark .historias-ring.mine,
html.theme-dark .story .ring,
html.theme-dark .historias-tray .ring,
html.theme-dark .historias-ring {
  background: none !important;
  background-image: none !important;
  border: 1.5px solid #8fa88a !important;
  padding: 2px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  box-sizing: border-box;
}
html.theme-dark .historias-ring.seen {
  border-color: #2a2a2e !important;
}
html.theme-dark .historias-ring > img,
html.theme-dark .historias-ring > i,
html.theme-dark .historias-ring .avatar {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(145deg, #2a2a2e, #151517);
}

/* —— P0#4 Nuevo: hide audience (mock ends at Foto/Video + Publicar) —— */
html.theme-dark .nuevo-form .audience,
html.theme-dark form.nuevo-form .audience,
html.theme-dark .audience {
  display: none !important;
}

/* —— P0#8 Solicitudes: username as name, hide pending pill —— */
html.theme-dark .pending-pill {
  display: none !important;
}
html.theme-dark .req-card .avatar,
html.theme-dark .sol-row .avatar,
html.theme-dark .req-card .av,
html.theme-dark .sol-row .av {
  width: 48px !important;
  height: 48px !important;
}

/* —— P0#9/#10 Topbar + nav rhythm —— */
html.theme-dark .topbar.mock-top,
html.theme-dark .topbar {
  padding: 6px 16px 10px !important;
  margin-bottom: 10px !important;
  min-height: 36px;
}
html.theme-dark .nav {
  padding: 0 4px 10px !important;
  min-height: 64px !important;
  height: 64px !important;
  align-items: flex-start !important;
  padding-top: 10px !important;
}

/* NEVER hide nuevo-ring */
html.theme-dark .nav .nuevo-ring,
html.theme-dark .nav a.nuevo-btn .nuevo-ring,
html.theme-dark .nav span.nuevo-ring {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1.75px solid #3b82f6 !important;
}

/* === WORDMARK METRICS = MOCK v20 === */
html.theme-dark .wordmark,
html.theme-dark .brand-word .wordmark,
html.theme-dark .mock-top .wordmark,
html.theme-dark .topchrome .wordmark,
html.theme-dark .logo.wordmark,
html.theme-dark .topbar .wordmark,
html.theme-dark .nuevo-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  font-style: normal !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
}

html.theme-dark .auth-brand,
html.theme-dark .app.auth .auth-brand,
html.theme-dark .auth-wrap .brand .wordmark,
html.theme-dark .auth-wrap .auth-brand {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 42px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  font-style: normal !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
}

/* Never let Inter !important on body win via inheritance tricks */
html.theme-dark a.brand-word,
html.theme-dark .brand-word {
  font-family: "Fredoka", system-ui, sans-serif !important;
}

/* === PROFILE CENTERED = MOCK v21b === */
html.theme-dark .profile-stack {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html.theme-dark .profile-hero,
html.theme-dark .profile-hero.mock-profile-hero {
  text-align: center !important;
  padding: 4px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
html.theme-dark .profile-hero .profile-row,
html.theme-dark .mock-profile-row {
  display: none !important;
}
html.theme-dark .mock-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
}
html.theme-dark .mock-big {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid #2a2a2e !important;
  flex: 0 0 96px !important;
}
html.theme-dark .mock-big .avatar,
html.theme-dark .mock-big .avatar img {
  width: 96px !important;
  height: 96px !important;
  max-width: none !important;
  border-radius: 50% !important;
  margin: 0 !important;
  font-size: 36px !important;
  display: grid !important;
  place-items: center !important;
}
html.theme-dark .mock-profile-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.theme-dark .mock-profile-name,
html.theme-dark .mock-hero h1,
html.theme-dark .profile-hero h1 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
  color: #f2f0ec !important;
  text-align: center !important;
  width: 100% !important;
}
html.theme-dark .mock-profile-handle,
html.theme-dark .mock-hero .handle {
  color: #9a9690 !important;
  font-size: 14px !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  width: 100% !important;
}
html.theme-dark .mock-profile-bio,
html.theme-dark .mock-hero .bio,
html.theme-dark .profile-hero .bio {
  color: #9a9690 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  max-width: 280px !important;
  margin: 8px auto 14px !important;
  text-align: center !important;
}
html.theme-dark .mock-hero .profile-lashista-row,
html.theme-dark .mock-hero .actions,
html.theme-dark .mock-pills {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
html.theme-dark .mock-hero .actions {
  flex-direction: column !important;
  margin-top: 10px !important;
}
html.theme-dark .mock-pills {
  flex-direction: row !important;
  margin-bottom: 0 !important;
}
html.theme-dark .mock-pill,
html.theme-dark .mock-pills .btn,
html.theme-dark .mock-pills .btn-ghost {
  width: auto !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}
html.theme-dark .btn-ghost.mock-pill,
html.theme-dark .mock-pills .btn-ghost {
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
}
html.theme-dark .mock-hero .action-pair {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}
html.theme-dark .mock-hero .tiny,
html.theme-dark .mock-hero .profile-mutuals,
html.theme-dark .mock-hero .profile-corr,
html.theme-dark .mock-hero .profile-hours,
html.theme-dark .mock-hero .profile-food-loc-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* kill share gutter from app.css */
html.theme-dark .profile-hero .profile-row,
html.theme-dark .profile-hero .mock-hero {
  padding-right: 0 !important;
}
html.theme-dark .mock-stats.counts,
html.theme-dark .mock-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  text-align: center !important;
  border-top: 1px solid #2a2a2e !important;
  border-bottom: 1px solid #2a2a2e !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 0 !important;
  margin: 0 0 12px !important;
  width: 100% !important;
}

/* === WORDMARK FORCE FREDOKA SEMIBOLD v24 === */
html.theme-dark .wordmark,
html.theme-dark .brand-word,
html.theme-dark .brand-word .wordmark,
html.theme-dark a.brand-word,
html.theme-dark .auth-brand,
html.theme-dark .app.auth .auth-brand,
html.theme-dark .logo,
html.theme-dark .logo.wordmark,
html.theme-dark .topchrome .wordmark,
html.theme-dark .topbar .wordmark,
html.theme-dark .mock-top .wordmark,
html.theme-dark .nuevo-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
}

/* === NAV ICON VERTICAL CENTER v25 === */
html.theme-dark .nav {
  /* Match mock: 64px icon row + home-indicator inset below */
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
}
html.theme-dark .nav a,
html.theme-dark .nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 64px !important; /* icon lane only — not the safe-area */
  max-height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  align-self: start !important;
}
html.theme-dark .nav a > svg,
html.theme-dark .nav a > .nuevo-ring,
html.theme-dark .nav a > .plus {
  display: block !important;
  margin: 0 auto !important;
  flex-shrink: 0;
}
html.theme-dark .nav-label,
html.theme-dark .nav a > span.nav-label,
html.theme-dark .nav .plus + span {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
/* Optical nudge: icons were reading high; 1px down in the 64px lane */
html.theme-dark .nav a > svg,
html.theme-dark .nav a > .nuevo-ring {
  transform: translateY(1px);
}

/* === HIDE PROFILE SOCIAL CHIPS v27 — mock has no social row on perfil === */
html.theme-dark .profile-hero .social-row,
html.theme-dark .mock-hero .social-row,
html.theme-dark .mock-profile-hero .social-row,
html.theme-dark .profile-stack .social-row,
html.theme-dark .social-row,
html.theme-dark nav.social-row,
html.theme-dark .profile-socials {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* === AUTH GUTTER = MOCK v27 === */
/* Mock: .screen pad 16px + .auth-wrap 20px 4px → ~20px side inset.
   Live had only auth-wrap 20px 4px → 4–5px inset (too wide). */
html.theme-dark .app.auth,
html.theme-dark body.auth .app,
html.theme-dark .auth-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.theme-dark .auth-wrap {
  padding: 24px 20px !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
html.theme-dark .auth-wrap .field,
html.theme-dark .auth-wrap input[type="text"],
html.theme-dark .auth-wrap input[type="password"],
html.theme-dark .auth-wrap input[type="email"],
html.theme-dark .auth-wrap .btn,
html.theme-dark .auth-wrap .btn-cream {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ============================================================
   PARITY v28 — Scandi mock loop4: gutters 16, feed inset, stories,
   nuevo audience, bochinche centered mic, mensajes overlay,
   solicitudes username title
   ============================================================ */

/* —— 16px screen gutters (mock .screen padding 4px 16px) —— */
html.theme-dark .sub,
html.theme-dark .board-anon-note {
  margin: 0 16px 14px !important;
}
html.theme-dark .back-row {
  margin: 4px 16px 12px !important;
}
html.theme-dark .seg {
  margin: 0 16px 14px !important;
}
html.theme-dark .historias-tray {
  padding: 0 16px 14px !important;
  gap: 12px !important;
}
html.theme-dark .nuevo-form .form-block,
html.theme-dark .form-block {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
html.theme-dark .topbar-nuevo {
  padding: 6px 16px 10px !important;
}
html.theme-dark .board-composer.card,
html.theme-dark .board-composer,
html.theme-dark .listing-compose {
  margin: 0 16px 14px !important;
}
html.theme-dark .board-feed {
  padding: 0 16px 8px !important;
}
html.theme-dark .board-card,
html.theme-dark .board-feed .card,
html.theme-dark .listing-card {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
html.theme-dark .feat-row,
html.theme-dark .hub-grid,
html.theme-dark .loteria,
html.theme-dark .mosaic,
html.theme-dark .section-label {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
html.theme-dark .feat,
html.theme-dark a.feat {
  /* full width inside 16px shell — explore uses padded container */
}

/* —— Feed: card pad 14 inside 16px gutter; media inset (no double margin) —— */
html.theme-dark .feed .card,
html.theme-dark article.card {
  padding: 14px !important;
  margin: 0 16px 12px !important;
  border-radius: 18px !important;
  border: 1px solid #2a2a2e !important;
  background: #1a1a1c !important;
  overflow: visible !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html.theme-dark .feed .card .post-media,
html.theme-dark article.card .post-media,
html.theme-dark .feed .card .post-media.post-photo,
html.theme-dark article.card .post-media.post-photo,
html.theme-dark .feed .card .post-media:not(.board-podcast),
html.theme-dark article.card .post-media:not(.board-podcast) {
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box !important;
}
html.theme-dark .feed .card .post-media img,
html.theme-dark .feed .card .post-media video,
html.theme-dark article.card .post-media img,
html.theme-dark article.card .post-media video {
  border-radius: 14px !important;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
/* Kill legacy full-bleed / extra inset on feed media */
html.theme-dark .post-media.post-photo,
html.theme-dark .post-media:not(.board-podcast) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.theme-dark .feed .card .post-media.post-photo,
html.theme-dark .feed .card .post-media:not(.board-podcast),
html.theme-dark article.card .post-media.post-photo,
html.theme-dark article.card .post-media:not(.board-podcast) {
  margin: 0 0 10px !important;
}

/* —— Stories: solid sage ring, NEVER show + on Tú —— */
html.theme-dark .historias-plus {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html.theme-dark .historias-ring,
html.theme-dark .historias-ring.unseen,
html.theme-dark .historias-ring.mine,
html.theme-dark .historias-ring.seen,
html.theme-dark .story .ring,
html.theme-dark .historias-tray .ring {
  background: none !important;
  background-image: none !important;
  border: 1.5px solid #8fa88a !important;
  padding: 2px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}
html.theme-dark .historias-ring.seen {
  border-color: #2a2a2e !important;
}
html.theme-dark .historias-ring.mine {
  border-style: solid !important; /* mock: solid sage, not dashed */
  border-color: #8fa88a !important;
}

/* —— Nuevo: audience gone; Foto/Video chips + cream Publicar; 16px —— */
html.theme-dark .nuevo-form .audience,
html.theme-dark form.nuevo-form .audience,
html.theme-dark .audience,
html.theme-dark .audience.mock-hide {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
html.theme-dark .nuevo-form .row-btns .btn-ghost,
html.theme-dark .nuevo-form .row-btns label.btn {
  width: auto !important;
  border-radius: 999px !important;
  border: 1px solid #2a2a2e !important;
  background: transparent !important;
  color: #f2f0ec !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}
html.theme-dark .nuevo-form .btn-cream,
html.theme-dark .nuevo-form button.btn-cream {
  background: #e8e4dc !important;
  color: #121212 !important;
  border-radius: 999px !important;
  margin-top: 4px;
}

/* —— Bochinche: centered sage mic + label + timer (mock .mic-wrap) —— */
html.theme-dark .board-composer .boch-q,
html.theme-dark .boch-q {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  color: #9a9690 !important;
}
html.theme-dark .board-composer .preview.board-file-pick,
html.theme-dark .board-composer .preview-optional {
  display: none !important; /* mock has no photo strip on composer */
}
html.theme-dark .board-recorder,
html.theme-dark .board-recorder.mic-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html.theme-dark .board-rec-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
}
html.theme-dark .board-rec-btn,
html.theme-dark .board-rec-btn.mic {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: #8fa88a !important;
  color: #0d0d0f !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 28px rgba(143, 168, 138, 0.25) !important;
  margin: 0 auto !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
html.theme-dark .board-rec-btn .board-rec-mic,
html.theme-dark .board-rec-btn svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}
html.theme-dark .board-rec-btn.is-recording,
html.theme-dark .board-rec-row.is-recording .board-rec-btn {
  background: #c47a6a !important;
  box-shadow: 0 8px 28px rgba(196, 122, 106, 0.35) !important;
}
html.theme-dark .mic-l,
html.theme-dark [data-board-rec-label].mic-l,
html.theme-dark .board-rec-row [data-board-rec-label] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f2f0ec !important;
  text-align: center;
  line-height: 1.3 !important;
  margin: 0 !important;
}
html.theme-dark .mic-t {
  color: #9a9690 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.3;
}
html.theme-dark .board-rec-row.is-recording .mic-idle {
  display: none !important;
}
html.theme-dark .board-rec-row:not(.is-recording) .board-rec-live {
  display: none !important;
}
html.theme-dark .board-rec-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a9690;
  font-weight: 400;
}
html.theme-dark .board-composer .btn-cream {
  background: #e8e4dc !important;
  color: #121212 !important;
  border-radius: 999px !important;
  opacity: 1;
}
html.theme-dark .board-composer .btn-cream:disabled {
  opacity: 0.4;
  background: #2a2a2e !important;
  color: #121212 !important;
}

/* —— Mensajes: overlay / sheet-full chrome —— */
html.theme-dark .msg-sheet-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 4px 8px 8px !important;
  padding-top: 8px;
  min-height: 36px;
}
html.theme-dark .msg-sheet-head .page-title,
html.theme-dark .msg-page-title {
  flex: 1 !important;
  text-align: center !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  margin: 0 !important;
  color: #f2f0ec !important;
}
html.theme-dark .msg-head-spacer {
  width: 30px;
  flex: 0 0 30px;
}
html.theme-dark .msg-list-page {
  padding: 0 16px 24px !important;
}
html.theme-dark .msg-list-page .msg-row,
html.theme-dark .msg-list-page a.msg-row {
  padding: 12px 4px !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  gap: 12px !important;
}
html.theme-dark .msg-list-page .msg-row:hover {
  background: #1a1a1c !important;
  border-radius: 14px !important;
}
html.theme-dark .msg-row-name,
html.theme-dark .msg-row-main strong {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: #f2f0ec !important;
}
html.theme-dark .msg-row-preview {
  color: #f2f0ec !important;
  font-size: 14px !important;
  opacity: 0.92;
}
html.theme-dark .msg-row-when,
html.theme-dark .msg-row-meta .tiny {
  color: #9a9690 !important;
  font-size: 11px !important;
}
html.theme-dark .msg-del-form,
html.theme-dark .msg-list-page .msg-del {
  /* keep reachable but de-emphasize vs mock (mock has no trash) */
  opacity: 0.35;
}
html.theme-dark .section-label {
  /* hide leftover list labels if any */
}

/* —— Solicitudes: username-as-title, 16px gutters —— */
html.theme-dark .req-list {
  padding: 0 16px 24px !important;
  gap: 12px !important;
}
html.theme-dark .req-card,
html.theme-dark .sol-row {
  background: #1a1a1c !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin: 0 0 12px !important; /* list already has 16px pad */
  box-shadow: none !important;
}
html.theme-dark .req-card .name,
html.theme-dark .sol-row .name,
html.theme-dark .req-top h3.name,
html.theme-dark .req-top h3 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f2f0ec !important;
  font-family: Inter, system-ui, sans-serif !important;
}
html.theme-dark .req-card .when,
html.theme-dark .sol-row .when,
html.theme-dark .req-top p {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: #9a9690 !important;
}
html.theme-dark .garden-grant-title,
html.theme-dark .garden-grant-sub {
  display: none !important; /* mock jardin cards have no extra chrome titles */
}
html.theme-dark .pending-pill {
  display: none !important;
}
html.theme-dark .pair.row-btns .btn-sage,
html.theme-dark .row-btns .btn-sage {
  background: #8fa88a !important;
  color: #0d0d0f !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: auto !important;
  padding: 8px 14px !important;
}
html.theme-dark .pair.row-btns .btn-ghost,
html.theme-dark .row-btns .btn-ghost {
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 999px !important;
  width: auto !important;
}

/* —— Editar perfil: mock-minimal hero + labels —— */
html.theme-dark .edit-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 8px 0 18px !important;
  gap: 10px;
}
html.theme-dark .edit-avatar-big,
html.theme-dark .edit-hero .big {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid #2a2a2e !important;
  background: linear-gradient(145deg, #2a2a2e, #151517) !important;
  margin: 0 auto !important;
}
html.theme-dark .edit-avatar-big .avatar,
html.theme-dark .edit-avatar-big .avatar img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
}
html.theme-dark .edit-photo-btn {
  width: auto !important;
  border-radius: 999px !important;
  border: 1px solid #2a2a2e !important;
  background: transparent !important;
  color: #f2f0ec !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  cursor: pointer;
}
html.theme-dark .edit-form-mock > .lbl[for="avatar"],
html.theme-dark .edit-form-mock > input#avatar,
html.theme-dark .edit-form-mock .social-edit,
html.theme-dark .edit-form-mock .check,
html.theme-dark .edit-form-mock > .tiny,
html.theme-dark .edit-form-mock > label.lbl[for="corregimiento"],
html.theme-dark .edit-form-mock > select#corregimiento {
  /* keep avatar input in DOM for Cambiar foto; hide duplicate chrome */
}
html.theme-dark .edit-form-mock .social-edit,
html.theme-dark .edit-form-mock label.check,
html.theme-dark .edit-form-mock > p.tiny,
html.theme-dark .edit-form-mock > label.lbl[for="corregimiento"],
html.theme-dark .edit-form-mock > #corregimiento,
html.theme-dark .edit-form-mock > label.lbl[for="avatar"] {
  display: none !important;
}
html.theme-dark .edit-form-mock > input#avatar {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.theme-dark .edit-form-mock > .lbl {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #9a9690 !important;
  margin: 10px 0 6px !important;
}
html.theme-dark .edit-form-mock .btn-cream,
html.theme-dark .edit-form-mock button.btn-cream {
  background: #e8e4dc !important;
  color: #121212 !important;
  border-radius: 999px !important;
  margin-top: 16px !important;
}
html.theme-dark form.form-block[action="/salir"] {
  display: none !important; /* mock edit has no logout on this screen */
}

/* —— Explorar hub gutters —— */
html.theme-dark .explore-hub,
html.theme-dark .explorar-stack,
html.theme-dark main .hub-grid {
  padding-left: 0;
}

html.theme-dark .board-rec-row.is-recording .board-rec-mic,
html.theme-dark .board-rec-btn.is-recording .board-rec-mic,
html.theme-dark .board-rec-btn.is-recording svg {
  display: block !important;
}
html.theme-dark .explorar .feat-row,
html.theme-dark [data-screen] .feat-row,
html.theme-dark .body-explorar .feat-row,
html.theme-dark main .feat-row {
  margin-left: 16px !important;
  margin-right: 16px !important;
  width: auto !important;
}
html.theme-dark .hub-grid {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
html.theme-dark .req-list .req-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.theme-dark .edit-save-legacy { display: none !important; }
html.theme-dark .edit-save-mock { display: block !important; }
html:not(.theme-dark) .edit-save-mock { display: none !important; }
html.theme-dark .edit-form-mock > input#avatar {
  /* keep in tab order for label; clip visually */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

/* === WORDMARK ALWAYS FREDOKA SEMIBOLD v31 === */
.wordmark, .brand-word, .brand-word .wordmark, a.brand-word,
.auth-brand, .auth-mark, .auth-wrap h1, .auth-wrap .auth-brand,
.logo, .logo.wordmark, .topchrome .wordmark, .topbar .wordmark,
.mock-top .wordmark, .nuevo-title {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* === PASS158 — people list (seguidores / siguiendo / bloqueados) ===
   Mock .list-item: card #1a1a1c, 1px #2a2a2e, radius 14, pad 12, gap 12.
   Transparent list on ink; no cream form-block, no nested .user-row. */
html.theme-dark .people-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 4px;
  gap: 8px;
}
html.theme-dark .people-page-title {
  flex: 1;
  text-align: center;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  color: #f2f0ec !important;
  letter-spacing: -0.01em;
}
html.theme-dark .people-list.people-page {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 8px 14px calc(28px + var(--nav-h, 60px)) !important;
}
html.theme-dark .people-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #1a1a1c;
  border: 1px solid #2a2a2e;
  margin-bottom: 8px;
  color: #f2f0ec;
}
html.theme-dark .people-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html.theme-dark .people-row .avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
  flex-shrink: 0;
}
html.theme-dark .people-row-meta {
  flex: 1;
  min-width: 0;
}
html.theme-dark .people-row-name {
  font-weight: 600;
  font-size: 14px;
  color: #f2f0ec;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.theme-dark .people-row-sub {
  color: #9a9690;
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.theme-dark .people-row-action {
  flex-shrink: 0;
  margin: 0;
}
html.theme-dark .people-row:active {
  background: #121214;
}
html.theme-dark .people-empty {
  padding: 48px 24px;
  text-align: center;
}
html.theme-dark .people-empty p {
  margin: 0;
  color: #9a9690;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* === PASS159 — public profile action pills (scandi mock) === */
html.theme-dark .action-pair {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
html.theme-dark .action-pair form {
  margin: 0 !important;
  display: inline-flex !important;
}
html.theme-dark .mock-hero .action-pair,
html.theme-dark .profile-hero .action-pair,
html.theme-dark .mock-profile-hero .action-pair {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}
/* Pill base — mock .btn.btn-sm */
html.theme-dark .action-pair .btn,
html.theme-dark .action-pair a.btn,
html.theme-dark .action-pair button.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
}
html.theme-dark .action-pair .btn svg,
html.theme-dark .action-pair a.btn svg {
  display: none !important; /* clean text like mock */
}
/* Seguir / Entrar — sage primary */
html.theme-dark .action-pair .btn-sage,
html.theme-dark .action-pair .btn.btn-sage,
html.theme-dark .action-pair a.btn-sage,
html.theme-dark .action-pair button.btn-sage {
  background: var(--sage, #8fa88a) !important;
  color: #0d0d0f !important;
  border: 0 !important;
  border-color: transparent !important;
}
/* Ghost outline — Mensaje / Siguiendo / Solicitud / Crear cuenta */
html.theme-dark .action-pair .btn.ghost,
html.theme-dark .action-pair a.btn.ghost,
html.theme-dark .action-pair button.btn.ghost,
html.theme-dark .action-pair .btn-ghost {
  background: transparent !important;
  color: var(--ink, #f2f0ec) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
}
/* Secondary safety (Bloquear / Denunciar) under quiet Opciones */
html.theme-dark .profile-safety {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
html.theme-dark .profile-safety > summary.profile-safety-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  color: var(--muted, #9a9690);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  user-select: none;
}
html.theme-dark .profile-safety > summary.profile-safety-toggle::-webkit-details-marker {
  display: none;
}
html.theme-dark .profile-safety-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
html.theme-dark .profile-safety-actions form {
  margin: 0;
}
html.theme-dark .profile-safety-actions .btn,
html.theme-dark .profile-safety-actions .btn.ghost,
html.theme-dark .profile-safety-actions .btn.btn-sm {
  width: auto !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--muted, #9a9690) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
}
html.theme-dark .profile-safety-actions .btn-sage,
html.theme-dark .profile-safety-actions .btn.btn-sage {
  background: var(--sage, #8fa88a) !important;
  color: #0d0d0f !important;
  border: 0 !important;
}

/* ============================================================
   PARITY v41 — Feed / home only (scandi-dark-interactive feed)
   Kill double gutter (.feed 14px + card 16px), meta stamp,
   follow chip, avatar/name/pill weight, ring 1.5, nav pad
   ============================================================ */

/* Screen gutter: card margin provides the 16px — feed itself must not add more */
html.theme-dark .feed {
  padding: 0 0 8px !important;
  gap: 0 !important; /* cards already margin-bottom: 12px */
}

/* Duplicate uppercase timestamp under pills — mock only has .when in head */
html.theme-dark .feed .card .meta,
html.theme-dark article.card .meta {
  display: none !important;
}

/* Mock feed cards have no Seguir / Siguiendo chip */
html.theme-dark .feed .card .post-follow,
html.theme-dark article.card .post-follow {
  display: none !important;
}

/* Avatar 36 (mock .av) */
html.theme-dark .feed .card .post-head .avatar,
html.theme-dark article.card .post-head .avatar,
html.theme-dark .feed .card .head .avatar,
html.theme-dark article.card .head .avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/* Name 14 / 600 (mock .name) */
html.theme-dark .feed .card .post-head .name,
html.theme-dark article.card .post-head .name,
html.theme-dark .feed .card .head .name,
html.theme-dark article.card .head .name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* when 12 muted — already close; ensure no uppercase */
html.theme-dark .feed .card .when,
html.theme-dark article.card .when {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted, #9a9690) !important;
  text-transform: none !important;
}

/* Action pills: Inter 12 / 400 like mock .pill */
html.theme-dark .feed .react-btn,
html.theme-dark article.card .react-btn {
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* Caption before acts (mock: media → cap → acts) */
html.theme-dark .feed .card .post-body,
html.theme-dark article.card .post-body {
  display: flex !important;
  flex-direction: column !important;
}
html.theme-dark .feed .card .post-body .caption,
html.theme-dark article.card .post-body .caption {
  order: 1 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: var(--ink, #f2f0ec) !important;
  margin: 0 0 8px !important;
}
html.theme-dark .feed .card .post-body .react-row,
html.theme-dark article.card .post-body .react-row,
html.theme-dark .feed .card .post-body .acts,
html.theme-dark article.card .post-body .acts {
  order: 2 !important;
  margin: 0 !important;
  gap: 14px !important;
}
html.theme-dark .feed .card .post-body .thread,
html.theme-dark article.card .post-body .thread,
html.theme-dark .feed .card .post-body .like-line,
html.theme-dark .feed .card .post-body .view-comments,
html.theme-dark .feed .card .post-body .meta {
  order: 3 !important;
}

/* Stories ring: solid sage 1.5px (mock .ring) */
html.theme-dark .historias-ring,
html.theme-dark .historias-ring.unseen,
html.theme-dark .historias-ring.mine,
html.theme-dark .historias-tray .ring {
  border-width: 1.5px !important;
  border-style: solid !important;
}

/* Bottom nav pad match mock: 0 4px 10px (+ safe area) */
html.theme-dark .nav {
  padding: 0 4px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

/* ============================================================
   PARITY v42 — Explorar (scandi-dark-interactive explorar)
   Body LH 1.45 bloated feat/hub/lotería cards vs mock "normal".
   Kill explore-grid max-height 160; keep 16px gutters + mosaic 3px.
   ============================================================ */

/* Tight type: mock uses line-height:normal on feat/hub/lotería */
html.theme-dark .feat .t,
html.theme-dark a.feat .t,
html.theme-dark .feat .b,
html.theme-dark a.feat .b {
  line-height: normal !important;
}
html.theme-dark .hub .t,
html.theme-dark a.hub .t {
  line-height: normal !important;
}
html.theme-dark .hub .b,
html.theme-dark a.hub .b {
  line-height: 1.3 !important;
}
html.theme-dark .loteria .t,
html.theme-dark a.loteria .t,
html.theme-dark .loteria .m,
html.theme-dark a.loteria .m,
html.theme-dark .loteria .n,
html.theme-dark a.loteria .n,
html.theme-dark .loteria .ch,
html.theme-dark a.loteria .ch {
  line-height: normal !important;
}
html.theme-dark .section-label {
  line-height: normal !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--muted, #9a9690) !important;
}

/* Feat / hub / lotería chrome — lock ink tokens to mock */
html.theme-dark .feat-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 16px 14px !important;
  width: auto !important;
}
html.theme-dark .feat,
html.theme-dark a.feat {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  background: var(--card, #1a1a1c) !important;
  color: var(--ink, #f2f0ec) !important;
  text-decoration: none !important;
  text-align: left !important;
  font: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
html.theme-dark .feat.blue,
html.theme-dark a.feat.blue {
  border-color: rgba(59, 130, 246, 0.35) !important;
  background: linear-gradient(135deg, #121820, #1a1a1c) !important;
}
html.theme-dark .feat.pink,
html.theme-dark a.feat.pink {
  border-color: rgba(232, 121, 169, 0.35) !important;
  background: linear-gradient(135deg, #1a1218, #1a1a1c) !important;
}
html.theme-dark .feat .em,
html.theme-dark a.feat .em {
  font-size: 22px !important;
  width: 36px !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}
html.theme-dark .feat .t,
html.theme-dark a.feat .t {
  font-weight: 650 !important;
  font-size: 15px !important;
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark .feat .b,
html.theme-dark a.feat .b {
  color: var(--muted, #9a9690) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

html.theme-dark .hub-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 16px 14px !important;
  width: auto !important;
}
html.theme-dark .hub,
html.theme-dark a.hub {
  background: var(--card, #1a1a1c) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  color: var(--ink, #f2f0ec) !important;
  text-decoration: none !important;
  text-align: left !important;
  font: inherit !important;
  display: block !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
html.theme-dark .hub.hub-wide,
html.theme-dark a.hub.hub-wide {
  grid-column: 1 / -1 !important;
}
html.theme-dark .hub .em,
html.theme-dark a.hub .em {
  font-size: 20px !important;
  display: block !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
}
html.theme-dark .hub .t,
html.theme-dark a.hub .t {
  font-weight: 650 !important;
  font-size: 14px !important;
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark .hub .b,
html.theme-dark a.hub .b {
  color: var(--muted, #9a9690) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-top: 3px !important;
}

html.theme-dark a.loteria,
html.theme-dark .loteria {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  margin: 0 16px 14px !important;
  background: #0d2818 !important;
  border: 2px solid #34c759 !important;
  color: var(--ink, #f2f0ec) !important;
  text-decoration: none !important;
  text-align: left !important;
  font: inherit !important;
  width: auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
html.theme-dark .loteria .t,
html.theme-dark a.loteria .t {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark .loteria .m,
html.theme-dark a.loteria .m {
  color: #e5e5ea !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}
html.theme-dark .loteria .n,
html.theme-dark a.loteria .n {
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: 0.12em !important;
  margin-top: 4px !important;
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark .loteria .ch,
html.theme-dark a.loteria .ch {
  margin-left: auto !important;
  color: #34c759 !important;
  font-size: 28px !important;
  font-weight: 300 !important;
}

/* Section label + mosaic: 16px gutter, 3px gap, no 160px cap from app.css */
html.theme-dark .section-label {
  margin: 4px 16px 10px !important;
}
html.theme-dark .mosaic,
html.theme-dark .mosaic.explore-grid,
html.theme-dark .explore-grid.mosaic {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  margin: 0 16px 8px !important;
  padding: 0 !important;
  width: auto !important;
}
html.theme-dark .mosaic a,
html.theme-dark .mosaic.explore-grid a,
html.theme-dark .explore-grid a {
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  background: #161618 !important;
  position: relative !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
html.theme-dark .mosaic img,
html.theme-dark .mosaic video,
html.theme-dark .explore-grid img,
html.theme-dark .explore-grid video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   PARITY v43 — Nuevo / compose (scandi-dark-interactive nuevo)
   Mock: cream Publicar, ghost Foto/Video pills, no audience,
   textarea minH 80 / 14px / LH normal, hide empty dashed preview.
   Do not touch feed / explorar / topbar / people / profile blocks.
   ============================================================ */

/* Textarea: mock min-height 80, 14px, LH normal (app.css text-post was 140/16) */
html.theme-dark .nuevo-form textarea.text-post,
html.theme-dark .nuevo-form textarea.field,
html.theme-dark form.nuevo-form textarea {
  min-height: 80px !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: normal !important;
  padding: 12px !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  color: #f2f0ec !important;
  resize: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
}

/* Sub + form gutters already 16px from v28 — keep */
html.theme-dark .nuevo-form > .sub,
html.theme-dark form.nuevo-form > .sub {
  margin: 0 16px 14px !important;
  font-size: 13px !important;
  color: #9a9690 !important;
  line-height: normal !important;
}

html.theme-dark .nuevo-form .form-block {
  padding: 0 16px 24px !important;
}

/* Ghost Foto/Video pills — match mock btn-ghost btn-sm (h≈34, LH normal) */
html.theme-dark .nuevo-form .row-btns {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 0 14px !important;
}
html.theme-dark .nuevo-form .row-btns .btn-ghost,
html.theme-dark .nuevo-form .row-btns label.btn,
html.theme-dark .nuevo-form .row-btns label.btn-ghost {
  width: auto !important;
  border-radius: 999px !important;
  border: 1px solid #2a2a2e !important;
  background: transparent !important;
  color: #f2f0ec !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Topbar Cerrar ghost — same pill metrics as mock */
html.theme-dark .topbar-nuevo .btn-ghost,
html.theme-dark .topbar-nuevo a.btn-ghost {
  width: auto !important;
  border-radius: 999px !important;
  border: 1px solid #2a2a2e !important;
  background: transparent !important;
  color: #f2f0ec !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

/* Cream Publicar CTA — mock pad 13, full width, no 18px bottom from .wide */
html.theme-dark .nuevo-form .btn-cream,
html.theme-dark .nuevo-form button.btn-cream,
html.theme-dark .nuevo-form .btn.btn-cream.wide {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #e8e4dc !important;
  color: #121212 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px !important;
  margin: 4px 0 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  text-align: center !important;
}

/* Audience row: mock has none — keep crushed */
html.theme-dark .nuevo-form .audience,
html.theme-dark form.nuevo-form .audience,
html.theme-dark .nuevo-form .audience.mock-hide {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Empty dashed preview: .preview {display:grid} was beating [hidden] UA rule */
html.theme-dark .nuevo-form .preview[hidden],
html.theme-dark .nuevo-form .preview-optional[hidden],
html.theme-dark .nuevo-form label.preview[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* When media is selected, preview should look like mock .media (no gold dash) */
html.theme-dark .nuevo-form .preview:not([hidden]) {
  aspect-ratio: 4 / 3 !important;
  border-radius: 14px !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  background: radial-gradient(ellipse at 40% 55%, rgba(143, 168, 138, 0.2), transparent 55%),
    linear-gradient(160deg, #1e2420, #12140f 55%, #1a1c22) !important;
  cursor: default !important;
}


/* ============================================================
   PARITY v44 — Bochinche (scandi-dark-interactive bochinche)
   Centered sage mic already in v28; close remaining gaps:
   textarea 14/80, cream Publicar pad 13 / h45, board cards
   single 16px gutter (no feed-pad + card-margin double),
   compact Suscrito ghost, ink rhythm.
   Do not touch feed / explorar / nuevo / topbar / people / profile.
   ============================================================ */

/* Composer shell — block flow like mock .card (kill app.css grid gap) */
html.theme-dark .board-composer.card,
html.theme-dark form.board-composer.card {
  display: block !important;
  background: #1a1a1c !important;
  border: 1px solid #2a2a2e !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin: 0 16px 12px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Prompt + textarea = mock 14 / minH 80 / LH normal */
html.theme-dark .board-composer .boch-q,
html.theme-dark .boch-q {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #9a9690 !important;
  line-height: normal !important;
}
html.theme-dark .board-composer textarea.field,
html.theme-dark .board-composer textarea,
html.theme-dark form.board-composer textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 80px !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  padding: 12px !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  color: #f2f0ec !important;
  resize: none !important;
}

/* Keep photo pick crushed (mock has none) */
html.theme-dark .board-composer .preview.board-file-pick,
html.theme-dark .board-composer .preview-optional,
html.theme-dark .board-composer label.board-file-pick {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Mic stack — reinforce centered sage 88 */
html.theme-dark .board-recorder,
html.theme-dark .board-recorder.mic-wrap,
html.theme-dark .board-composer .mic-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
html.theme-dark .board-rec-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}
html.theme-dark .board-rec-btn,
html.theme-dark .board-rec-btn.mic,
html.theme-dark .board-composer .mic {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: #8fa88a !important;
  color: #0d0d0f !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 28px rgba(143, 168, 138, 0.25) !important;
  margin: 0 auto !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
html.theme-dark .board-rec-btn .board-rec-mic,
html.theme-dark .board-rec-btn svg,
html.theme-dark .board-composer .mic svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}
html.theme-dark .mic-l,
html.theme-dark .board-rec-row [data-board-rec-label],
html.theme-dark [data-board-rec-label].mic-l {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f2f0ec !important;
  text-align: center !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
html.theme-dark .mic-t,
html.theme-dark .board-composer .mic-t {
  color: #9a9690 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

/* Cream Publicar — pad 13 only, no .wide 6px top / 16px sides */
html.theme-dark .board-composer .btn-cream,
html.theme-dark .board-composer button.btn-cream,
html.theme-dark .board-composer .btn.btn-cream.wide,
html.theme-dark .board-composer .btn.wide.btn-cream {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #e8e4dc !important;
  color: #121212 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  text-align: center !important;
  opacity: 1 !important;
}
html.theme-dark .board-composer .btn-cream:disabled,
html.theme-dark .board-composer button.btn-cream:disabled {
  opacity: 0.4 !important;
  background: #e8e4dc !important;
  color: #121212 !important;
}

/* Board feed cards — single 16px gutter (feed pads; cards must NOT also margin 16) */
html.theme-dark .board-feed {
  padding: 0 16px 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html.theme-dark .board-feed > .card,
html.theme-dark .board-feed article.card,
html.theme-dark .board-feed .board-card,
html.theme-dark section.board-feed article.card {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid #2a2a2e !important;
  background: #1a1a1c !important;
  box-shadow: none !important;
}

/* Podcast / audio strip — dark ink bed (native controls stay, chrome matches) */
html.theme-dark .board-feed .board-podcast,
html.theme-dark .board-feed .post-media.board-podcast {
  background: #121214 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.theme-dark .board-feed .board-podcast audio {
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  display: block !important;
}

/* Suscrito — compact ghost (mock has no chip; keep product, shrink chrome) */
html.theme-dark .back-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
}
html.theme-dark .back-row .board-sub {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
html.theme-dark .back-row .board-sub .btn,
html.theme-dark .back-row .board-sub button,
html.theme-dark .back-row .board-sub .btn.ghost {
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
  box-shadow: none !important;
}

/* Anon sub already guttered; keep ink */
html.theme-dark .board-anon-note {
  color: #9a9690 !important;
  font-size: 13px !important;
  margin: 0 16px 14px !important;
  line-height: normal !important;
}

/* ============================================================
   PARITY v45 — Profile own + public (scandi-dark-interactive
   perfil / perfil-publico)
   Hero 96 / serif name / pills / stats / tabs / mosaic gutters.
   Do NOT touch people-list (PASS158) or rewrite PASS159 sage/ghost
   tokens — only tighten sizes/margins on profile-stack.
   ============================================================ */

/* Bio: mock margin 0 auto 14 (was 8px top from v21b) */
html.theme-dark .mock-profile-bio,
html.theme-dark .mock-hero .bio,
html.theme-dark .profile-hero .bio {
  margin: 0 auto 14px !important;
}

/* Actions sit flush under bio; pills own the 14px gap to stats */
html.theme-dark .mock-hero .actions,
html.theme-dark .profile-hero .actions {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 8px !important;
}

/* Own Editar / Opciones — mock .btn-ghost: 15px / pad 10×16 / lh normal → h≈41 */
html.theme-dark .mock-pills {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  width: 100% !important;
}
html.theme-dark .mock-pill,
html.theme-dark .mock-pills .btn,
html.theme-dark .mock-pills .btn-ghost,
html.theme-dark .profile-hero .btn.btn-ghost.mock-pill {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #f2f0ec !important;
  border: 1px solid #2a2a2e !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

/* Public action-pair — keep PASS159 sage/ghost; equalize h to mock 34; mb 14 */
html.theme-dark .action-pair {
  margin: 0 0 14px !important;
}
html.theme-dark .action-pair .btn,
html.theme-dark .action-pair a.btn,
html.theme-dark .action-pair button.btn {
  min-height: 34px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}
/* Sage Seguir: transparent border so height matches ghost Mensaje (mock 34) */
html.theme-dark .action-pair .btn-sage,
html.theme-dark .action-pair .btn.btn-sage,
html.theme-dark .action-pair a.btn-sage,
html.theme-dark .action-pair button.btn-sage {
  border: 1px solid transparent !important;
}

/* Safety Opciones stays quiet; no extra top gap stacking with pair mb */
html.theme-dark .profile-safety {
  margin-top: 0 !important;
  margin-bottom: 4px;
}

/* Tabs — mock pad 0, weight 400 */
html.theme-dark .mock-tabs,
html.theme-dark [data-profile-tabs].mock-tabs {
  padding: 0 !important;
  gap: 22px !important;
  margin: 0 0 10px !important;
}
html.theme-dark .mock-tabs button,
html.theme-dark [data-profile-tabs] [data-ptab] {
  font-weight: 400 !important;
  line-height: normal !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Mosaic — mock .grid gap 3, cell radius 0 (kill app.css 10px) */
html.theme-dark .profile-stack .grid,
html.theme-dark .mock-pubs .grid,
html.theme-dark [data-ptab-panel="grid"] .grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.theme-dark .profile-stack .grid a,
html.theme-dark .mock-pubs .grid a,
html.theme-dark .photos-card .grid a,
html.theme-dark [data-ptab-panel="grid"] .grid a {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #161618 !important;
  aspect-ratio: 1 !important;
  display: block !important;
  position: relative !important;
}
html.theme-dark .profile-stack .grid img,
html.theme-dark .profile-stack .grid video,
html.theme-dark .mock-pubs .grid img,
html.theme-dark .mock-pubs .grid video,
html.theme-dark [data-ptab-panel="grid"] .grid img,
html.theme-dark [data-ptab-panel="grid"] .grid video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
}
html.theme-dark .mock-pubs.card,
html.theme-dark .mock-pubs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Contenido Privado — only under Publicaciones panel; quiet label + mosaic, no fat card */
html.theme-dark [data-ptab-panel="grid"] > .photos-card:not(.mock-pubs),
html.theme-dark [data-ptab-panel="grid"] section.card.photos-card:not(.mock-pubs) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 14px 0 0 !important;
  margin: 8px 0 0 !important;
  overflow: visible !important;
}
html.theme-dark [data-ptab-panel="grid"] > .photos-card:not(.mock-pubs) .card-label-row {
  margin: 0 0 10px !important;
  padding: 0 !important;
}
html.theme-dark [data-ptab-panel="grid"] > .photos-card:not(.mock-pubs) .card-label {
  color: #9a9690 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
}
html.theme-dark [data-ptab-panel="grid"] > .photos-card:not(.mock-pubs) .grid {
  gap: 3px !important;
}
html.theme-dark [data-ptab-panel="pens"] .photos-card {
  display: none !important; /* belt: privado never on Pensamientos */
}

/* Pensamientos cards already matched; ensure 16px gutter (no double inset) */
html.theme-dark .mock-pen-card,
html.theme-dark a.mock-pen-card {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep social chips hidden on profile (mock has none) */
html.theme-dark .profile-hero .social-row,
html.theme-dark .mock-profile-hero .social-row,
html.theme-dark .profile-stack .social-row,
html.theme-dark .profile-socials {
  display: none !important;
}

/* ============================================================
   PARITY v46 — Mensajes inbox + thread + Actividad sheet
   (scandi-dark-interactive #ov-mensajes / #mensaje / #ov-actividad)
   Do NOT regress feed/explorar/nuevo/bochinche/profile/people/topbar.
   ============================================================ */

/* —— Mensajes inbox (mock sheet-full msg-row) —— */
html.theme-dark .msg-sheet-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 4px 16px 12px !important;
  padding-top: 8px !important;
  min-height: 34px !important;
  background: transparent !important;
  border-bottom: 0 !important;
}
html.theme-dark .msg-sheet-head .page-title,
html.theme-dark .msg-page-title {
  flex: 1 !important;
  text-align: center !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  margin: 0 !important;
  color: #f2f0ec !important;
  letter-spacing: 0 !important;
}
html.theme-dark .msg-list-page.people-list.form-block,
html.theme-dark .msg-list-page {
  padding: 0 16px 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.theme-dark .msg-list-page .msg-row-wrap {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  gap: 0 !important;
  background: transparent !important;
  border-radius: 14px !important;
}
html.theme-dark .msg-list-page .msg-row-wrap:active,
html.theme-dark .msg-list-page .msg-row-wrap:hover {
  background: #1a1a1c !important;
}
html.theme-dark .msg-list-page .msg-row,
html.theme-dark .msg-list-page a.msg-row,
html.theme-dark .msg-list-page .user-row.msg-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html.theme-dark .msg-list-page .msg-row .avatar,
html.theme-dark .msg-row-wrap .msg-row .avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  font-size: 14px !important;
  flex: 0 0 36px !important;
  border-radius: 50% !important;
}
html.theme-dark .msg-row-name,
html.theme-dark .msg-list-page .msg-row-main strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f2f0ec !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
html.theme-dark .msg-list-page .msg-row-preview,
html.theme-dark .msg-list-page .msg-row-preview.tiny {
  color: #9a9690 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}
html.theme-dark .msg-list-page .msg-row-when,
html.theme-dark .msg-list-page .msg-row-meta .tiny {
  color: #9a9690 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
html.theme-dark .msg-list-page .msg-del-form,
html.theme-dark .msg-list-page .msg-del {
  opacity: 0.28 !important;
}
/* unread: keep sage badge, skip Apple Mail blue/time restyles */
html.theme-dark .msg-list-page .msg-row-wrap:has(.badge) .msg-row-main strong {
  font-weight: 650 !important;
}
html.theme-dark .msg-list-page .msg-row-wrap:has(.badge) .msg-row-preview,
html.theme-dark .msg-list-page .msg-row-wrap:has(.badge) .msg-row-preview.tiny {
  color: #f2f0ec !important;
  font-weight: 400 !important;
}
html.theme-dark .msg-list-page .msg-row-wrap:has(.badge) .msg-row-meta .tiny {
  color: #9a9690 !important;
  font-weight: 400 !important;
}

/* —— Thread (mock .bubble / .composer) —— */
html.theme-dark .app.chat-shell .msg-head,
html.theme-dark .msg-head.back-row,
html.theme-dark .msg-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 4px 16px 12px !important;
  min-height: 34px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html.theme-dark .msg-head-user {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f2f0ec !important;
  min-width: 0 !important;
}
html.theme-dark .msg-head-user .avatar,
html.theme-dark .msg-head .avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 11px !important;
  flex: 0 0 28px !important;
}
html.theme-dark .msg-head-user span {
  font-size: 14px !important;
  font-weight: 600 !important;
}
html.theme-dark .msg-head-del {
  opacity: 0.28 !important;
}
html.theme-dark .msg-list[data-thread],
html.theme-dark .msg-list[data-thread-user] {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px 16px 12px !important;
  background: transparent !important;
}
/* Hide per-bubble avatars — mock bubbles stand alone */
html.theme-dark .msg-list[data-thread-user] .room-who {
  display: none !important;
}
html.theme-dark .msg-list[data-thread-user] .room-msg {
  display: flex !important;
  width: auto !important;
  max-width: 78% !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
}
/* Mock: them left / me right — app.css had these inverted */
html.theme-dark .msg-list[data-thread-user] .room-msg:not(.mine) {
  align-self: flex-start !important;
  justify-content: flex-start !important;
}
html.theme-dark .msg-list[data-thread-user] .room-msg.mine {
  align-self: flex-end !important;
  justify-content: flex-end !important;
}
html.theme-dark .msg-list[data-thread-user] .room-slide {
  max-width: 100% !important;
}
html.theme-dark .msg-list[data-thread-user] .room-bubble,
html.theme-dark .msg-bubble.theirs,
html.theme-dark .room-bubble {
  max-width: 100% !important;
  padding: 10px 13px !important;
  border-radius: 18px !important;
  border-bottom-left-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  background: #1a1a1c !important;
  border: 1px solid #2a2a2e !important;
  color: #f2f0ec !important;
  box-shadow: none !important;
}
html.theme-dark .msg-list[data-thread-user] .room-msg.mine .room-bubble,
html.theme-dark .msg-bubble.mine,
html.theme-dark .room-msg.mine .room-bubble {
  background: #243028 !important;
  border: 1px solid rgba(143, 168, 138, 0.3) !important;
  border-radius: 18px !important;
  border-bottom-right-radius: 6px !important;
  border-bottom-left-radius: 18px !important;
}
html.theme-dark .msg-list[data-thread-user] .room-body,
html.theme-dark .room-body {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #f2f0ec !important;
}
/* Kill iMessage-style tails */
html.theme-dark .msg-list[data-thread-user] .room-bubble::after,
html.theme-dark .msg-list[data-thread-user] .room-msg.mine .room-bubble::after,
html.theme-dark .msg-list[data-thread-user] .room-msg:not(.mine) .room-bubble::after {
  content: none !important;
  display: none !important;
}

/* Composer — mock sticky row; live stays fixed above nav */
html.theme-dark .msg-composer.composer,
html.theme-dark .msg-composer {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-end !important;
  border-top: 1px solid #2a2a2e !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: #0d0d0f !important;
  box-sizing: border-box !important;
}
html.theme-dark .msg-composer .msg-input,
html.theme-dark .msg-composer .field {
  margin: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 22px !important;
  padding: 11px 14px !important;
  font-size: 16px !important; /* iOS: <16px zooms viewport on focus */
  line-height: 1.25 !important;
  background: #121214 !important;
  border: 1px solid #2a2a2e !important;
  color: #f2f0ec !important;
  min-height: 0 !important;
  height: auto !important;
}
html.theme-dark .msg-composer .msg-send,
html.theme-dark .composer-send {
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  background: #8fa88a !important;
  color: #0d0d0f !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}
html.theme-dark .msg-composer .msg-send svg,
html.theme-dark .composer-send svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* —— Actividad: mock bottom sheet (was side drawer) —— */
html.theme-dark .act-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}
html.theme-dark .act-panel {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: min(480px, 100%) !important;
  margin: 0 auto !important;
  height: auto !important;
  max-height: 85% !important;
  min-height: 65% !important;
  background: #0d0d0f !important;
  border-radius: 22px 22px 0 0 !important;
  border: 1px solid #2a2a2e !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  transform: translateY(110%) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 41 !important;
}
html.theme-dark body.act-open .act-panel {
  transform: translateY(0) !important;
}
/* Kill side-drawer safe-area strip; HTML .sheet-handle is the mock grip */
html.theme-dark .act-panel::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html.theme-dark .act-panel .sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: #333;
  margin: 10px auto 4px;
  flex-shrink: 0;
}
html.theme-dark .act-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 8px 12px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  flex-shrink: 0 !important;
}
html.theme-dark .act-head h2 {
  margin: 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  color: #f2f0ec !important;
  letter-spacing: 0 !important;
}
html.theme-dark .act-head .icon-btn {
  color: #9a9690 !important;
}
html.theme-dark .act-list {
  overflow: auto !important;
  padding: 0 16px 24px !important;
  flex: 1 !important;
  background: transparent !important;
}
html.theme-dark .act-item {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 12px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #2a2a2e !important;
  color: inherit !important;
  background: transparent !important;
}
html.theme-dark .act-item:hover {
  background: transparent !important;
}
html.theme-dark .act-item .avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  flex: 0 0 36px !important;
  margin-top: 0 !important;
}
html.theme-dark .act-item .who {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #f2f0ec !important;
  font-weight: 400 !important;
}
html.theme-dark .act-item .who b {
  font-weight: 650 !important;
  color: #f2f0ec !important;
}
html.theme-dark .act-item .when {
  display: inline !important;
  color: #9a9690 !important;
  font-size: 12px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}
html.theme-dark .act-item .when::before {
  content: " · ";
  color: #9a9690;
}
/* Keep thumbs but compact; mock has none */
html.theme-dark .act-thumb {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  flex: 0 0 36px !important;
  object-fit: cover !important;
  margin-left: auto !important;
}
html.theme-dark .act-item > span:empty {
  display: none !important;
}
html.theme-dark .act-empty {
  text-align: center !important;
  padding: 28px 12px !important;
  color: #9a9690 !important;
}

/* —— PARITY v48: iPhone DM send — hide nav/topbar on chat-shell; composer above ——
   Root cause: .nav z-index:20 sat over .msg-composer z-index:19; chat-shell left
   nav visible (only body.kb-open hid it) and composer bottom: nav-h left a slot
   for Nuevo blue + to paint where sage send belongs. */
html.theme-dark .app.chat-shell .nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.theme-dark .app.chat-shell .topbar,
html.theme-dark .app.chat-shell .topbar.mock-top {
  display: none !important;
}
html.theme-dark .app.chat-shell .msg-composer.composer,
html.theme-dark .app.chat-shell .msg-composer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: min(480px, 100%) !important;
  margin: 0 auto !important;
  bottom: 0 !important;
  z-index: 35 !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}
html.ios.theme-dark .app.chat-shell .msg-composer.composer,
html.ios.theme-dark .app.chat-shell .msg-composer {
  bottom: 0 !important;
}
/* Keep sage circular send + plane visible above any leftover chrome */
html.theme-dark .app.chat-shell .msg-composer .msg-send,
html.theme-dark .app.chat-shell .composer-send {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: #8fa88a !important;
  color: #0d0d0f !important;
}
/* Do not regress bubble sides: mine right / them left */
html.theme-dark .msg-list[data-thread-user] .room-msg.mine,
html.theme-dark .msg-bubble.mine,
html.theme-dark .room-msg.mine {
  align-self: flex-end !important;
}
html.theme-dark .msg-list[data-thread-user] .room-msg:not(.mine),
html.theme-dark .msg-bubble.theirs {
  align-self: flex-start !important;
}

/* —— iOS chat: no focus-zoom (input >= 16px) —— */
html.theme-dark .msg-composer .msg-input,
html.theme-dark .msg-composer .field,
html.theme-dark .composer .msg-input,
html.theme-dark .composer .field {
  font-size: 16px !important;
  line-height: 1.25 !important;
  transform: none !important;
}
html.theme-dark .app.chat-shell,
html.theme-dark .app.chat-shell .msg-composer,
html.theme-dark body.kb-open .msg-composer {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
}
html.theme-dark .app.chat-shell .msg-composer {
  margin: 0 !important;
  transform: none !important;
}

/* —— iOS chat: caret lock (no VV reposition) —— */
html.theme-dark .app.chat-shell .msg-composer.composer,
html.theme-dark .app.chat-shell .msg-composer,
html.ios.theme-dark .app.chat-shell .msg-composer.composer,
html.ios.theme-dark .app.chat-shell .msg-composer,
html.theme-dark body.kb-open .app.chat-shell .msg-composer {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}
html.theme-dark .app.chat-shell .msg-composer .msg-input,
html.theme-dark .app.chat-shell .msg-composer .field {
  font-size: 16px !important;
  line-height: 1.25 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* === PASS161 — search profile cards (scandi mock .list-item) ===
   Scope: overlay .search-panel / .search-list and /buscar .search-page only.
   Do NOT touch .msg-row, people-list, or .search-cita-row. */
html.theme-dark .search-page.search-list,
html.theme-dark .search-panel .search-list {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 8px 14px 20px !important;
}
html.theme-dark .search-page.search-list {
  padding-bottom: calc(28px + var(--nav-h, 60px)) !important;
}
html.theme-dark .search-panel .user-row:not(.msg-row):not(.search-cita-row),
html.theme-dark .search-list .user-row:not(.msg-row):not(.search-cita-row),
html.theme-dark .search-page .user-row:not(.msg-row):not(.search-cita-row) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #1a1a1c !important;
  border: 1px solid #2a2a2e !important;
  border-bottom: 1px solid #2a2a2e !important;
  margin: 0 0 8px 0 !important;
  color: #f2f0ec !important;
  text-decoration: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
}
html.theme-dark .search-panel .user-row:not(.msg-row):not(.search-cita-row):active,
html.theme-dark .search-list .user-row:not(.msg-row):not(.search-cita-row):active,
html.theme-dark .search-page .user-row:not(.msg-row):not(.search-cita-row):active {
  background: #121214 !important;
}
html.theme-dark .search-panel .user-row:not(.search-cita-row) .avatar,
html.theme-dark .search-list .user-row:not(.search-cita-row) .avatar,
html.theme-dark .search-page .user-row:not(.search-cita-row) .avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
}
html.theme-dark .search-panel .user-row .meta,
html.theme-dark .search-list .user-row .meta,
html.theme-dark .search-page .user-row .meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html.theme-dark .search-panel .user-row .meta .n,
html.theme-dark .search-list .user-row .meta .n,
html.theme-dark .search-page .user-row .meta .n,
html.theme-dark .search-panel .user-row .meta strong,
html.theme-dark .search-list .user-row .meta strong,
html.theme-dark .search-page .user-row .meta strong {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #f2f0ec !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.theme-dark .search-panel .user-row .meta .s,
html.theme-dark .search-list .user-row .meta .s,
html.theme-dark .search-page .user-row .meta .s,
html.theme-dark .search-panel .user-row .meta .tiny,
html.theme-dark .search-list .user-row .meta .tiny,
html.theme-dark .search-page .user-row .meta .tiny {
  color: #9a9690 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Compact chips — below handle, no cream/light borders */
html.theme-dark .search-panel .user-row .search-hit-meta,
html.theme-dark .search-list .user-row .search-hit-meta,
html.theme-dark .search-page .user-row .search-hit-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
}
html.theme-dark .search-panel .user-row .search-hit-meta .chip,
html.theme-dark .search-list .user-row .search-hit-meta .chip,
html.theme-dark .search-page .user-row .search-hit-meta .chip {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 100%;
}
html.theme-dark .search-page .search-match-hint,
html.theme-dark .search-list .search-match-hint,
html.theme-dark .search-panel .search-match-hint {
  margin-top: 2px !important;
  color: #9a9690 !important;
  font-size: 12px !important;
}
/* Kill cream leftovers on search page result shell only */
html.theme-dark .search-page.search-list,
html.theme-dark .search-page .user-row,
html.theme-dark .search-list .user-row {
  background-image: none !important;
}
html.theme-dark .search-page .user-row:not(.search-cita-row),
html.theme-dark .search-list .user-row:not(.search-cita-row) {
  background-color: #1a1a1c !important;
}


/* === PASS162 — search casing + profile name Fredoka light ===
   Search hits inherit global .meta { text-transform: uppercase }.
   Profile name was serif; Ken wants same family as qxopa wordmark, ~200. */
html.theme-dark .search-panel .user-row .meta,
html.theme-dark .search-list .user-row .meta,
html.theme-dark .search-page .user-row .meta,
html.theme-dark .search-panel .user-row .meta .n,
html.theme-dark .search-list .user-row .meta .n,
html.theme-dark .search-page .user-row .meta .n,
html.theme-dark .search-panel .user-row .meta .s,
html.theme-dark .search-list .user-row .meta .s,
html.theme-dark .search-page .user-row .meta .s,
html.theme-dark .search-panel .user-row .meta .tiny,
html.theme-dark .search-list .user-row .meta .tiny,
html.theme-dark .search-page .user-row .meta .tiny,
html.theme-dark .search-panel .user-row .meta strong,
html.theme-dark .search-list .user-row .meta strong,
html.theme-dark .search-page .user-row .meta strong,
html.theme-dark .search-panel .user-row .search-match-hint,
html.theme-dark .search-list .user-row .search-match-hint,
html.theme-dark .search-page .user-row .search-match-hint {
  text-transform: none !important;
  letter-spacing: normal !important;
}

html.theme-dark .profile-name,
html.theme-dark .mock-profile-name,
html.theme-dark h1.profile-name,
html.theme-dark h1.mock-profile-name,
html.theme-dark .profile-hero .profile-name,
html.theme-dark .profile-hero .mock-profile-name,
html.theme-dark .profile-hero h1,
html.theme-dark .mock-hero h1,
html.theme-dark .perfil-name {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Feed acts: left-align like/comment/share icons with caption /
   like-line / comment placeholder text (same post-body inset).
   ============================================================ */
html.theme-dark .feed .card .post-body .react-row.acts,
html.theme-dark article.card .post-body .react-row.acts,
html.theme-dark .feed .card .post-body .acts,
html.theme-dark article.card .post-body .acts {
  justify-content: flex-start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html.theme-dark .feed .card .post-body .react-btn,
html.theme-dark article.card .post-body .react-btn {
  padding-left: 0 !important;
  padding-right: 12px !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  min-width: 0 !important;
}
html.theme-dark .feed .card .post-body .react-btn svg,
html.theme-dark article.card .post-body .react-btn svg {
  margin-left: 0 !important;
}
/* Keep active color; no pill chrome so icon x matches text x */
html.theme-dark .feed .card .post-body .react-btn.on,
html.theme-dark .feed .card .post-body .react-btn.on-share,
html.theme-dark article.card .post-body .react-btn.on,
html.theme-dark article.card .post-body .react-btn.on-share {
  background: transparent !important;
  border-color: transparent !important;
}

/* No grey press flash on buttons / feed acts */
html.theme-dark,
html.theme-dark * {
  -webkit-tap-highlight-color: transparent !important;
}
html.theme-dark .react-btn:active,
html.theme-dark .react-btn:focus,
html.theme-dark .react-btn:focus-visible,
html.theme-dark button:active,
html.theme-dark a.react-btn:active,
html.theme-dark .feed .react-btn:active,
html.theme-dark article.card .react-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}
html.theme-dark .options-list button:active,
html.theme-dark .options-list button:hover,
html.theme-dark .msg-row-wrap:active,
html.theme-dark .people-row:active,
html.theme-dark .msg-list-page .msg-row-wrap:active,
html.theme-dark .msg-list-page .msg-row-wrap:hover {
  background: transparent !important;
}

/* PASS172 — Feed media flexible height (natural aspect); no letterbox; explore/profile stay 1:1 */
html.theme-dark .feed .card .post-media,
html.theme-dark article.card .post-media,
html.theme-dark .feed .card .post-media.post-photo,
html.theme-dark article.card .post-media.post-photo,
html.theme-dark .feed .card .post-media:not(.board-podcast),
html.theme-dark article.card .post-media:not(.board-podcast) {
  aspect-ratio: auto !important;
  height: auto !important;
  background: #1a1a1c !important; /* loading only; no black letterbox box */
}
html.theme-dark .feed .card .post-media img,
html.theme-dark .feed .card .post-media video,
html.theme-dark article.card .post-media img,
html.theme-dark article.card .post-media video {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: transparent !important;
}


/* ============================================================
   PASS173 — Explorar scandi cards polish (feat/hub/lotería/hoy)
   Align with marketing/scandi-dark-interactive.html
   ============================================================ */
html.theme-dark .feat,
html.theme-dark a.feat {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}
html.theme-dark .feat.blue,
html.theme-dark a.feat.blue {
  border-color: rgba(59, 130, 246, 0.35) !important;
  background: linear-gradient(135deg, #121820, #1a1a1c) !important;
}
html.theme-dark .feat.pink,
html.theme-dark a.feat.pink {
  border-color: rgba(232, 121, 169, 0.35) !important;
  background: linear-gradient(135deg, #1a1218, #1a1a1c) !important;
}
html.theme-dark .hub,
html.theme-dark a.hub {
  background: var(--card, #1a1a1c) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: none !important;
}
/* emoji on TOP for hubs (not title-left / emoji-right) */
html.theme-dark .hub .em,
html.theme-dark a.hub .em {
  font-size: 20px !important;
  display: block !important;
  margin-bottom: 6px !important;
}
html.theme-dark a.loteria,
html.theme-dark .loteria {
  background: #0d2818 !important;
  border: 2px solid #34c759 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html.theme-dark .loteria .ch,
html.theme-dark a.loteria .ch {
  color: #34c759 !important;
}
/* Hoy cerca card chrome (kept hidden by earlier display:none; styles for parity) */
html.theme-dark .explore-hoy-card {
  background: #1a1a1c !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
/* Hoy / place chips — dark field pills, line border, no light elevation */
html.theme-dark .explore-place-chip,
html.theme-dark .explore-city-chip,
html.theme-dark .explore-hoy-card .chip,
html.theme-dark .explore-hoy-block .chip {
  background: #121214 !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--ink, #f2f0ec) !important;
}


/* ===== PASS174 — Explorar hubs full-width Scandi rows ===== */
html.theme-dark .hub-grid,
html.theme-dark main .hub-grid,
html.theme-dark .explore-hubs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 14px 14px !important;
}
html.theme-dark .hub,
html.theme-dark a.hub,
html.theme-dark .explore-hub {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
  background: var(--card, #1a1a1c) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
html.theme-dark .hub.hub-wide,
html.theme-dark a.hub.hub-wide {
  grid-column: 1 / -1 !important;
}
html.theme-dark .hub .em,
html.theme-dark a.hub .em,
html.theme-dark .explore-hub .em {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  font-size: 22px !important;
  width: 36px !important;
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
  align-self: center !important;
}
html.theme-dark .hub .t,
html.theme-dark a.hub .t,
html.theme-dark .explore-hub strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-weight: 650 !important;
  font-size: 15px !important;
  color: var(--ink, #f2f0ec) !important;
  margin: 0 !important;
}
html.theme-dark .hub .b,
html.theme-dark a.hub .b,
html.theme-dark .explore-hub > span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: var(--muted, #9a9690) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin: 2px 0 0 !important;
  line-height: 1.3 !important;
}

/* ===== PASS175 — Explorar cards uniform Scandi (no blue/pink variants) ===== */
html.theme-dark .feat,
html.theme-dark a.feat,
html.theme-dark .feat.blue,
html.theme-dark .feat.pink,
html.theme-dark a.feat.blue,
html.theme-dark a.feat.pink,
html.theme-dark .hub,
html.theme-dark a.hub,
html.theme-dark .explore-hub,
html.theme-dark .explore-hub-featured {
  background: var(--card, #1a1a1c) !important;
  background-image: none !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-color: var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  color: var(--ink, #f2f0ec) !important;
  box-shadow: none !important;
}
html.theme-dark .feat.blue,
html.theme-dark .feat.pink,
html.theme-dark a.feat.blue,
html.theme-dark a.feat.pink {
  /* same as .feat — keep class for markup, kill tint */
  border-color: var(--line, #2a2a2e) !important;
}

/* ===== PASS176 — Lotería card same Scandi charcoal as other Explorar hubs ===== */
html.theme-dark a.loteria,
html.theme-dark .loteria,
html.theme-dark .explore-loteria-teaser {
  background: var(--card, #1a1a1c) !important;
  background-image: none !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-radius: 16px !important;
  color: var(--ink, #f2f0ec) !important;
  box-shadow: none !important;
}
html.theme-dark a.loteria .t,
html.theme-dark .loteria .t,
html.theme-dark .explore-loteria-teaser .t,
html.theme-dark a.loteria .n,
html.theme-dark .loteria .n {
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark a.loteria .m,
html.theme-dark .loteria .m,
html.theme-dark .explore-loteria-teaser .m {
  color: var(--muted, #9a9690) !important;
}
html.theme-dark a.loteria .ch,
html.theme-dark .loteria .ch,
html.theme-dark .explore-loteria-teaser .ch {
  color: var(--muted, #9a9690) !important;
}

/* ===== PASS177 — La Lotería PAGE: remove green, Scandi charcoal like other cards ===== */
html.theme-dark .loteria-page-card,
html.theme-dark .explore-loteria-card,
html.theme-dark .loteria-latest,
html.theme-dark .loteria-draw,
html.theme-dark article.loteria-draw,
html.theme-dark .loteria-draw-live,
html.theme-dark section.loteria-page-card,
html.theme-dark .card.loteria-page-card,
html.theme-dark .card.explore-loteria-card {
  background: var(--card, #1a1a1c) !important;
  background-image: none !important;
  border: 1px solid var(--line, #2a2a2e) !important;
  border-color: var(--line, #2a2a2e) !important;
  color: var(--ink, #f2f0ec) !important;
  box-shadow: none !important;
}
html.theme-dark .loteria-live-pill {
  background: var(--field, #121214) !important;
  color: var(--muted, #9a9690) !important;
  border: 1px solid var(--line, #2a2a2e) !important;
}
html.theme-dark .loteria-primero,
html.theme-dark .loteria-lbl,
html.theme-dark .loteria-draw-meta,
html.theme-dark .loteria-strip,
html.theme-dark .loteria-menores,
html.theme-dark .loteria-loc {
  color: var(--ink, #f2f0ec) !important;
}
html.theme-dark .loteria-lbl,
html.theme-dark .loteria-loc,
html.theme-dark .loteria-draw-meta span {
  color: var(--muted, #9a9690) !important;
}
html.theme-dark .loteria-draw-meta strong {
  color: var(--ink, #f2f0ec) !important;
}

/* ===== PASS179 — Opciones sheet: Cerrar sesión ===== */
html.theme-dark .options-sheet .opt-logout-form {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
}
html.theme-dark .options-sheet button.opt-logout {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: inherit;
}
html.theme-dark .options-sheet button.opt-logout .opt-title {
  color: #c47a6a !important;
  font-weight: 650 !important;
}
html.theme-dark .options-sheet button.opt-logout .opt-hint {
  color: var(--muted, #9a9690) !important;
}
html.theme-dark .options-sheet button.opt-logout .opt-chevron {
  color: #c47a6a !important;
}

/* ===== PASS180 — Opciones sheet: Scandi dark parity (Fredoka / charcoal / sage) ===== */
html.theme-dark .options-sheet {
  background: #0d0d0f !important;
  color: #f2f0ec !important;
  border-radius: 22px 22px 0 0 !important;
  border: 1px solid #2a2a2e !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html.theme-dark .options-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #333 !important;
  opacity: 1 !important;
  margin: 10px auto 4px !important;
}
html.theme-dark .options-head {
  border-bottom: 1px solid #2a2a2e !important;
  padding: 0 8px 12px !important;
}
html.theme-dark .options-head h2 {
  font-family: "Fredoka", Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0.01em;
  color: #f2f0ec !important;
}
html.theme-dark .options-head .icon-btn {
  color: #f2f0ec !important;
}
html.theme-dark .options-list {
  padding: 4px 16px 24px !important;
}
html.theme-dark .options-sheet .opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 !important;
  border-bottom: 1px solid #2a2a2e !important;
  background: transparent !important;
  color: #f2f0ec !important;
  text-decoration: none;
}
html.theme-dark .options-sheet .opt-title {
  font-weight: 650 !important;
  font-size: 15px !important;
  color: #f2f0ec !important;
}
html.theme-dark .options-sheet .opt-hint {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #9a9690 !important;
}
html.theme-dark .options-sheet .opt-chevron {
  color: #9a9690 !important;
  font-size: 22px;
  font-weight: 300;
}
html.theme-dark .opt-switch-ui {
  width: 44px !important;
  height: 26px !important;
  border-radius: 99px !important;
  background: #2a2a2e !important;
  position: relative;
  display: inline-block;
  transition: background 0.2s;
}
html.theme-dark .opt-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff !important;
  transition: transform 0.2s;
  box-shadow: none !important;
}
html.theme-dark .opt-switch input:checked + .opt-switch-ui {
  background: #8fa88a !important; /* sage */
}
html.theme-dark .opt-switch input:checked + .opt-switch-ui::after {
  transform: translateX(18px);
}
/* Cerrar sesión — pill ghost danger (match Android OutlinedButton) */
html.theme-dark .options-sheet .opt-logout-form {
  margin: 24px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  display: block;
  width: 100%;
}
html.theme-dark .options-sheet button.opt-logout {
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 13px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(196, 122, 106, 0.55) !important;
  border-radius: 999px !important;
  border-bottom: 1px solid rgba(196, 122, 106, 0.55) !important;
  text-align: center !important;
  cursor: pointer;
  font: inherit;
  color: #c47a6a !important;
}
html.theme-dark .options-sheet button.opt-logout .opt-copy {
  flex: 0 1 auto;
  text-align: center;
}
html.theme-dark .options-sheet button.opt-logout .opt-title {
  color: #c47a6a !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
html.theme-dark .options-sheet button.opt-logout .opt-hint,
html.theme-dark .options-sheet button.opt-logout .opt-chevron {
  display: none !important;
}