:root {
      --sailiq-bg-a: #ffffff;
      --sailiq-bg-b: #ffffff;
      --sailiq-bg-c: #ffffff;
      --glass-bg: rgba(255, 255, 255, 0.62);
      --glass-border: rgba(148, 163, 184, 0.35);
      --glass-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
      --glass-blur: 14px;
    }
    html.dark {
      --sailiq-bg-a: #0f172a;
      --sailiq-bg-b: #020617;
      --sailiq-bg-c: #082f49;
      --glass-bg: rgba(15, 23, 42, 0.58);
      --glass-border: rgba(148, 163, 184, 0.24);
      --glass-shadow: 0 14px 42px rgba(2, 6, 23, 0.55);
      --glass-blur: 12px;
    }
    html,
    body {
      background: #ffffff !important;
      background-color: #ffffff !important;
    }
    .sailiq-atmosphere {
      background: #ffffff !important;
      background-image: none !important;
      background-color: #ffffff !important;
      background-attachment: scroll;
    }
    .glass-shell {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    .glass-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
      -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.85));
      backdrop-filter: blur(calc(var(--glass-blur) * 0.85));
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .glass-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
      border-color: rgba(56, 189, 248, 0.35);
    }
    .glass-tab-pill {
      background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
      border: 1px solid var(--glass-border);
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
      -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.65));
      backdrop-filter: blur(calc(var(--glass-blur) * 0.65));
      transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
    }
    .glass-tab-pill:hover {
      border-color: rgba(56, 189, 248, 0.35);
    }
    .glass-tab-pill.bg-sky-600 {
      background: color-mix(in srgb, rgb(2 132 199) 80%, white 20%);
      border-color: rgb(2 132 199);
      color: white;
      box-shadow: 0 6px 16px rgba(2, 132, 199, 0.32);
    }
    /* Global button restyle: black/white button backgrounds -> brand lime. */
    button[class*="bg-slate-900"],
    button[class*="bg-slate-800"],
    button[class*="bg-slate-700"],
    button[class*="bg-black"],
    button[class*="bg-white"],
    input[type="submit"][class*="bg-slate-900"],
    input[type="submit"][class*="bg-slate-800"],
    input[type="submit"][class*="bg-slate-700"],
    input[type="submit"][class*="bg-black"],
    input[type="submit"][class*="bg-white"],
    input[type="button"][class*="bg-slate-900"],
    input[type="button"][class*="bg-slate-800"],
    input[type="button"][class*="bg-slate-700"],
    input[type="button"][class*="bg-black"],
    input[type="button"][class*="bg-white"],
    a[role="button"][class*="bg-slate-900"],
    a[role="button"][class*="bg-slate-800"],
    a[role="button"][class*="bg-slate-700"],
    a[role="button"][class*="bg-black"],
    a[role="button"][class*="bg-white"],
    a[class*="bg-slate-900"][class*="px-"][class*="py-"],
    a[class*="bg-slate-800"][class*="px-"][class*="py-"],
    a[class*="bg-slate-700"][class*="px-"][class*="py-"],
    a[class*="bg-black"][class*="px-"][class*="py-"],
    a[class*="bg-white"][class*="px-"][class*="py-"] {
      background: #1E90FF !important;
      color: #ffffff !important;
      border-color: #1E90FF !important;
    }
    button[class*="bg-slate-900"]:hover,
    button[class*="bg-slate-800"]:hover,
    button[class*="bg-slate-700"]:hover,
    button[class*="bg-black"]:hover,
    button[class*="bg-white"]:hover,
    input[type="submit"][class*="bg-slate-900"]:hover,
    input[type="submit"][class*="bg-slate-800"]:hover,
    input[type="submit"][class*="bg-slate-700"]:hover,
    input[type="submit"][class*="bg-black"]:hover,
    input[type="submit"][class*="bg-white"]:hover,
    input[type="button"][class*="bg-slate-900"]:hover,
    input[type="button"][class*="bg-slate-800"]:hover,
    input[type="button"][class*="bg-slate-700"]:hover,
    input[type="button"][class*="bg-black"]:hover,
    input[type="button"][class*="bg-white"]:hover,
    a[role="button"][class*="bg-slate-900"]:hover,
    a[role="button"][class*="bg-slate-800"]:hover,
    a[role="button"][class*="bg-slate-700"]:hover,
    a[role="button"][class*="bg-black"]:hover,
    a[role="button"][class*="bg-white"]:hover,
    a[class*="bg-slate-900"][class*="px-"][class*="py-"]:hover,
    a[class*="bg-slate-800"][class*="px-"][class*="py-"]:hover,
    a[class*="bg-slate-700"][class*="px-"][class*="py-"]:hover,
    a[class*="bg-black"][class*="px-"][class*="py-"]:hover,
    a[class*="bg-white"][class*="px-"][class*="py-"]:hover {
      background: #187bcd !important;
      color: #ffffff !important;
      border-color: #187bcd !important;
    }
    /* Keep modal/backdrop overlays neutral translucent gray, not brand color. */
    button[id$="backdrop"],
    button#feed-summary-backdrop,
    button[class*="absolute"][class*="inset-0"][class*="bg-slate-900/"] {
      background: rgba(15, 23, 42, 0.55) !important;
      border-color: transparent !important;
      color: transparent !important;
    }
    html.dark .glass-tab-pill.bg-sky-600 {
      background: color-mix(in srgb, rgb(2 132 199) 65%, rgb(15 23 42) 35%);
      border-color: rgb(14 165 233);
    }
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 320ms ease, transform 320ms ease;
    }
    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
    @media (max-width: 768px) {
      :root { --glass-blur: 10px; }
      .sailiq-atmosphere { background-attachment: scroll; }
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .glass-shell, .glass-card {
        background: rgba(255, 255, 255, 0.95);
      }
      html.dark .glass-shell, html.dark .glass-card {
        background: rgba(15, 23, 42, 0.9);
      }
    }
    /* Stabilize header layout before Tailwind hydrates (avoids icon flash/jump). */
    .header-main-row {
      position: relative;
    }
    .header-auth-shell,
    .header-public-shell {
      display: none;
    }
    /* El menú de invitado no puede depender de que Tailwind haya generado la
       variante responsive: en móvil es la única puerta a explorar/entrar. */
    @media (max-width: 1279px) {
      .header-main-row > #mobile-menu-toggle {
        display: inline-flex !important;
        margin-left: auto;
      }
      .public-mobile-quick-actions {
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-left: auto;
      }
      .public-mobile-quick-actions a {
        border-radius: .55rem;
        padding: .48rem .58rem;
        color: #334155;
        font-size: .78rem;
        font-weight: 750;
        text-decoration: none;
      }
      .public-mobile-quick-actions .public-mobile-join {
        background: #0284c7;
        color: #fff;
      }
    }
    @media (max-width: 640px) {
      /* El visitante ya tiene las tres rutas principales a la vista. Ocultar
         el botón hamburguesa evita comprimir el wordmark y partir «Log in». */
      body:has(.public-mobile-quick-actions) #mobile-menu-toggle { display: none !important; }
      .header-main-row { gap: .4rem; padding: .75rem 1rem; }
      .header-logo-anchor { max-width: 6.9rem; }
      .header-logo-anchor img { height: 1.55rem; }
      .public-mobile-quick-actions { gap: .15rem; }
      .public-mobile-quick-actions a {
        padding: .42rem .42rem;
        font-size: .72rem;
        line-height: 1;
        white-space: nowrap;
      }
    }
    @media (min-width: 1280px) {
      .public-mobile-quick-actions { display: none; }
      .header-auth-shell,
      .header-public-shell {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .header-auth-center,
      .header-public-center {
        pointer-events: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
      }
      .header-auth-actions,
      .header-public-actions {
        pointer-events: auto;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
      }
    }
    .header-auth-actions a,
    .header-public-actions a,
    .header-auth-actions button,
    .header-public-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
    }
    .header-auth-actions .header-organizer-link,
    .header-public-actions .header-organizer-link {
      width: auto;
      height: 100%;
      min-height: 2.75rem;
      padding-inline: 0.9rem;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    /* Las acciones públicas de texto no son iconos. La regla común de 2rem
       evita flashes en los iconos, pero aquí encogía «Entrar» y «Crear cuenta»
       hasta partir el copy en varias líneas en escritorio. */
    .header-public-actions .header-public-login,
    .header-public-actions .header-public-register {
      width: auto;
      height: auto;
      min-height: 2.5rem;
      padding: .5rem .75rem;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .public-site-header .glass-shell{background:rgba(255,255,255,.96);border:0;border-bottom:1px solid #e2e8f0;box-shadow:0 3px 18px #0f172a05;backdrop-filter:blur(16px)}
    .public-site-header .header-main-row{min-height:72px;padding:12px 24px;gap:16px;box-sizing:border-box}
    .public-site-header a.public-login-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;width:auto;height:44px;min-height:44px;padding:0 19px;border:1px solid #0f172a;border-radius:999px;background:#0f172a;color:#fff;font-size:14px;font-weight:750;line-height:1;text-decoration:none;white-space:nowrap;box-sizing:border-box;transition:background .15s,box-shadow .15s}
    .public-site-header a.public-login-button:hover{background:#1e3a5f;box-shadow:0 4px 12px #0f172a20}
    .public-site-header a.public-login-button:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
    .public-site-header .public-login-button svg{width:19px;height:19px;flex:none}
    @media(max-width:1279px){
      .public-site-header #mobile-menu-toggle{display:none!important}
      .public-site-header .public-mobile-quick-actions{gap:14px}
      .public-site-header .public-mobile-quick-actions>a:not(.public-login-button){display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:13px;font-weight:650;color:#475569}
    }
    @media(max-width:640px){
      .public-site-header .header-main-row{min-height:68px;padding:12px 16px;gap:12px}
      .public-site-header .header-logo-anchor{max-width:none}
      .public-site-header .header-logo-anchor img{width:104px;height:auto}
      .public-site-header .public-mobile-quick-actions{gap:10px}
      .public-site-header a.public-login-button{padding:0 16px}
    }
    @media(max-width:360px){
      .public-site-header .header-main-row{padding-inline:12px;gap:8px}
      .public-site-header .header-logo-anchor img{width:88px}
      .public-site-header .public-mobile-quick-actions{gap:6px}
      .public-site-header a.public-login-button{padding:0 12px;gap:6px}
    }
    .header-profile-link {
      overflow: hidden;
      border-radius: 999px;
      background: #f1f5f9;
    }
    .header-profile-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* Prevent icon FOUC before Tailwind utility classes hydrate. */
    .header-auth-actions svg,
    .header-public-actions svg {
      width: 23px;
      height: 23px;
      display: block;
      flex: 0 0 auto;
    }
    .header-notif-btn {
      position: relative;
    }
    .header-notif-badge {
      position: absolute;
      top: 2px;
      right: 1px;
      min-width: 14px;
      height: 14px;
      padding: 0 3px;
      border-radius: 999px;
      border: 1px solid #fff;
      background: #ef4444;
      color: #fff;
      font-size: 9px;
      line-height: 1;
      font-weight: 700;
      display: grid;
      place-items: center;
    }
    /* Sin avisos sin leer, solo la campana: el `display:grid` de arriba ganaba
       a `.hidden` y se veía el globo rojo con un 0. */
    .header-notif-badge.hidden {
      display: none;
    }
    .header-notif-panel {
      position: fixed;
      inset: 0;
      z-index: 120;
      padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, .34);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .header-notif-dialog {
      width: min(720px, 100%);
      height: min(78vh, 760px);
      min-height: min(560px, calc(100vh - 2rem));
      border: 1px solid #e2e8f0;
      background: #fff;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
      display: flex;
      flex-direction: column;
    }
    .header-notif-panel.hidden {
      display: none;
    }
    .header-notif-head {
      min-height: 4.75rem;
      border-bottom: 1px solid #e2e8f0;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: #fff;
    }
    .header-notif-list {
      overflow: auto;
      padding: .2rem 0 1.5rem;
      background: #fff;
    }
    .header-notif-section-title {
      margin: 1.35rem 1.5rem .45rem;
      color: #0f172a;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -.02em;
    }
    .header-notif-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      width: 100%;
      text-align: left;
      border: 0;
      border-radius: 0;
      background: #fff;
      padding: .7rem 1.5rem;
      transition: background .15s ease;
    }
    .header-notif-item:hover {
      background: #f8fafc;
    }
    .header-notif-item.is-unread {
      background: #f8fbff;
    }
    .header-notif-avatar,
    .header-notif-icon {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 999px;
    }
    .header-notif-avatar {
      object-fit: cover;
      background: #f1f5f9;
    }
    .header-notif-icon {
      display: grid;
      place-items: center;
      border: 1px solid #cbd5e1;
      color: #334155;
      background: #fff;
    }
    .header-notif-copy {
      min-width: 0;
      flex: 1 1 auto;
    }
    .header-notif-title {
      color: #0f172a;
      font-size: .925rem;
      font-weight: 600;
      line-height: 1.32;
    }
    .header-notif-body {
      margin-top: .12rem;
      color: #64748b;
      font-size: .78rem;
      line-height: 1.35;
    }
    .header-notif-context {
      margin-top: .15rem;
      color: #64748b;
      font-size: .75rem;
      line-height: 1.3;
    }
    .header-notif-time {
      flex: 0 0 auto;
      align-self: flex-start;
      padding-top: .14rem;
      font-size: .72rem;
      color: #94a3b8;
      white-space: nowrap;
    }
    .header-notif-unread-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 999px;
      background: #0ea5e9;
    }
    .header-notif-empty {
      display: grid;
      place-items: center;
      min-height: 360px;
      padding: 2rem;
      text-align: center;
      color: #64748b;
    }
    .header-notif-empty svg {
      width: 42px;
      height: 42px;
      margin: 0 auto .8rem;
      color: #94a3b8;
    }
    @media (max-width: 640px) {
      .header-notif-panel { padding: .65rem; }
      .header-notif-dialog { height: min(84vh, 760px); min-height: 0; border-radius: 18px; }
      .header-notif-head { min-height: 4.25rem; padding: 0 1rem; }
      .header-notif-section-title { margin-left: 1rem; margin-right: 1rem; }
      .header-notif-item { padding-left: 1rem; padding-right: 1rem; gap: .6rem; }
      .header-notif-avatar, .header-notif-icon { width: 40px; height: 40px; flex-basis: 40px; }
    }
    #mobile-menu-toggle svg {
      width: 16px;
      height: 16px;
      display: block;
      flex: 0 0 auto;
    }