/* ===== Zeros de segurança ===== */
  html,
  body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background: none;
  }

  main,
  .content,
  .container,
  .wrapper {
      margin: 0 !important;
      padding: 0 !important;
      background: none !important;
  }

  /* ========= SEÇÃO FULL-BLEED ========= */
  .login-hero {
      position: relative;
      isolation: isolate;
      min-height: 70vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 80px;
      margin: 0;
      overflow: hidden;
  }

  .login-hero+*:not(footer),
  .login-hero~.container:not(footer),
  .login-hero~.wrapper:not(footer),
  .login-hero~.content:not(footer),
  .login-hero~hr {
      display: none !important;
  }

  footer,
  .site-footer {
      margin-top: 0 !important;
  }

  /* ===== Fundo ===== */
  .login-bg-wrap {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
  }

  .login-bg-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 800ms ease;
      will-change: opacity, transform;
      animation: kb-zoom 40s ease-in-out infinite alternate;
  }

  .login-bg-layer.is-visible {
      opacity: 1;
  }

  .login-bg-layer.origin-left {
      transform-origin: left center;
  }

  .login-bg-layer.origin-right {
      transform-origin: right center;
  }

  .login-bg-layer.origin-center {
      transform-origin: center center;
  }

  .login-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .18), rgba(0, 0, 0, .42));
      pointer-events: none;
  }

  @keyframes kb-zoom {
      from {
          transform: scale(1.0) translateY(0);
      }

      to {
          transform: scale(1.12) translateY(-1.5%);
      }
  }

  /* ========= CARTÃO ========= */
  .form-wrapper {
      position: relative;
      z-index: 1;
      width: min(92vw, 780px);
      padding: 22px 20px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(5px);
      border-radius: 14px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
      border: 1px solid rgba(255, 255, 255, .65);
  }

  .form-wrapper h2 {
      text-align: center;
      font-size: 1.4rem;
      margin-bottom: 14px;
      color: #111;
  }

  /* =========================================================
   BLOCO LOGIN — USUÁRIO LOGADO (modo claro e escuro)
   ========================================================= */

  /* ===== Layout ===== */
  .login-info {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 10px;
  }

  /* ===== Pill do usuário ===== */
  .user-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.2px;
      background: linear-gradient(135deg, #f9fbff, #f0f4ff);
      border: 1px solid rgba(0, 64, 255, 0.15);
      color: #1e3a8a;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.25s ease;
  }

  .user-pill:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  }

  .user-pill .icon {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 1.6;
  }

  /* ===== Botão Sair ===== */
  .btn-logout {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 10px;
      background: linear-gradient(135deg, #2563eb, #1e40af);
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      border: none;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
      transition: all 0.25s ease;
  }

  .btn-logout .icon {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 1.8;
  }

  .btn-logout:hover {
      filter: brightness(1.15);
      transform: translateY(-1px);
  }

  .btn-logout:active {
      transform: translateY(0);
      filter: brightness(1);
  }

  /* =========================================================
   DARK MODE — LOGIN LOGADO
   ========================================================= */
  :root[data-theme="dark"] .login-hero .user-pill {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #e9edf7;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }

  :root[data-theme="dark"] .login-hero .user-pill:hover {
      background: rgba(255, 255, 255, 0.08);
  }

  :root[data-theme="dark"] .login-hero .btn-logout {
      background: linear-gradient(135deg, #2d6cdf, #1f4fb1);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #fff;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  }

  :root[data-theme="dark"] .login-hero .btn-logout:hover {
      background: linear-gradient(135deg, #3c7af2, #2657c8);
      filter: brightness(1.1);
  }

  /* Pequeno ajuste visual no mobile */
  @media (max-width: 520px) {
      .login-info {
          flex-direction: column;
          gap: 10px;
      }
  }


  /* ========= Botão Google (compacto e bonito) ========= */
  .social-login {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      height: 44px;
      padding: 0 14px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .10);
      font-weight: 700;
      color: #1f2937;
      text-decoration: none;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }

  .btn-google:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
      background: #f9fafb;
      border-color: rgba(0, 0, 0, .14);
  }

  .btn-google:active {
      transform: translateY(0);
  }

  .btn-google:focus {
      outline: 2px solid #3fb4e6;
      outline-offset: 2px;
  }

  .btn-google:visited {
      color: #1f2937;
  }

  .g-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
  }

  .g-svg {
      width: 18px;
      height: 18px;
      display: block;
  }

  .g-text {
      line-height: 1;
  }

  /* Divisor “ou” */
  .social-sep {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0;
  }

  .social-sep::before,
  .social-sep::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(0, 0, 0, .12);
  }

  .social-sep span {
      font-size: .85rem;
      color: #6b7280;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
  }

  @media (max-width: 480px) {
      .form-wrapper {
          width: 92vw;
          padding: 18px;
      }

      .login-hero {
          padding-top: 60px;
      }
  }

  /* Modal de sessão derrubada (mantive) */
  .kick-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(0, 0, 0, .45);
      backdrop-filter: saturate(140%) blur(2px);
  }

  .kick-modal {
      width: 100%;
      max-width: 560px;
      background: #fff;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, .06);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
      padding: clamp(16px, 2.5vw, 24px);
      text-align: center;
  }

  .kick-title {
      font-weight: 800;
      color: #b91c1c;
      margin: 0 0 6px;
      font-size: clamp(14px, 1.4vw, 16px);
  }

  .kick-text {
      margin: 0 0 14px;
      color: #333;
      line-height: 1.45;
      font-size: clamp(14px, 1.5vw, 16px);
  }

  .kick-btn {
      background: #145ba1;
      color: #fff;
      font-weight: 700;
      border: 0;
      border-radius: 10px;
      padding: 10px 16px;
      cursor: pointer;
  }

  .kick-btn:focus {
      outline: 2px solid #145ba1;
      outline-offset: 2px;
  }


  /* =========================================================
   LOGIN — DARK MODE (somente quando html[data-theme="dark"])
   Compatível com o template login.html do Q7Lab
   ========================================================= */
  :root[data-theme="dark"] .login-hero {
      --ln-bg: var(--bg, #0b0f16);
      --ln-card: var(--card, #0f1623);
      --ln-border: var(--card-border, rgba(255, 255, 255, .10));
      --ln-text: var(--text, #e9edf7);
      --ln-muted: var(--muted, #a7b0c2);
      --ln-link: var(--link, #7cb8ff);
      --ln-link-hover: var(--link-hover, #a9d4ff);
      --ln-elev: var(--elev, 0 8px 26px rgba(0, 0, 0, .55));
      --ln-soft: rgba(255, 255, 255, .05);
      --ln-input-bg: #111827;
      --ln-input-bd: rgba(255, 255, 255, .18);
      --ln-input-bd-focus: #2d6cdf;
      --ln-placeholder: rgba(233, 237, 247, .55);
      --ln-sep: rgba(255, 255, 255, .14);
      background: var(--ln-bg);
      color: var(--ln-text);
  }

  /* =========================================================
   DARK MODE — FUNDO EM PRETO E BRANCO (mantém o mesmo layout)
   ========================================================= */

  :root[data-theme="dark"] .login-hero .login-bg-layer {
      filter: grayscale(100%) brightness(0.85) contrast(1.1);
      transition: filter 0.8s ease;
  }

  /* Mantém overlay sutil para legibilidade */
  :root[data-theme="dark"] .login-hero .login-bg-overlay {
      background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55));
  }

  /* Opcional — remove o filtro ao voltar pro tema claro */
  :root:not([data-theme="dark"]) .login-hero .login-bg-layer {
      filter: none;
      transition: filter 0.6s ease;
  }

  /* Título */
  :root[data-theme="dark"] .login-hero .form-wrapper h2 {
      color: var(--ln-text);
      text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  }

  /* Texto auxiliar / muted */
  :root[data-theme="dark"] .login-hero .login-info,
  :root[data-theme="dark"] .login-hero .login-actions a {
      color: var(--ln-muted);
  }

  /* Links */
  :root[data-theme="dark"] .login-hero a {
      color: var(--ln-link);
  }

  :root[data-theme="dark"] .login-hero a:hover,
  :root[data-theme="dark"] .login-hero a:focus {
      color: var(--ln-link-hover);
  }

  /* ===== Inputs do partial _user-form.html (sem alterar HTML) ===== */
  :root[data-theme="dark"] .login-hero input[type="text"],
  :root[data-theme="dark"] .login-hero input[type="email"],
  :root[data-theme="dark"] .login-hero input[type="password"],
  :root[data-theme="dark"] .login-hero input[type="search"],
  :root[data-theme="dark"] .login-hero select,
  :root[data-theme="dark"] .login-hero textarea {
      background: var(--ln-input-bg);
      border: 1px solid var(--ln-input-bd);
      color: var(--ln-text);
      box-shadow: none;
  }

  :root[data-theme="dark"] .login-hero input::placeholder,
  :root[data-theme="dark"] .login-hero textarea::placeholder {
      color: var(--ln-placeholder);
  }

  :root[data-theme="dark"] .login-hero input:focus,
  :root[data-theme="dark"] .login-hero select:focus,
  :root[data-theme="dark"] .login-hero textarea:focus {
      outline: none;
      border-color: var(--ln-input-bd-focus);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ln-input-bd-focus) 30%, transparent);
  }

  /* Botões padrão (caso use .btn / input[type=submit]) */
  :root[data-theme="dark"] .login-hero .btn,
  :root[data-theme="dark"] .login-hero button[type="submit"],
  :root[data-theme="dark"] .login-hero input[type="submit"] {
      background: linear-gradient(180deg, #2d6cdf, #1f4fb1);
      color: #fff;
      border: 1px solid color-mix(in oklab, #2d6cdf 70%, #000);
      box-shadow: 0 6px 18px rgba(35, 88, 200, .35);
  }

  :root[data-theme="dark"] .login-hero .btn:hover,
  :root[data-theme="dark"] .login-hero button[type="submit"]:hover,
  :root[data-theme="dark"] .login-hero input[type="submit"]:hover {
      filter: brightness(1.05);
  }

  /* Botão Google compacto */
  :root[data-theme="dark"] .login-hero .social-login .btn-google {
      background: #ffffff;
      /* mantém botão do Google branco para contraste */
      color: #1f1f1f;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  }

  :root[data-theme="dark"] .login-hero .social-login .btn-google .g-text {
      color: #1f1f1f;
  }

  :root[data-theme="dark"] .login-hero .social-login .btn-google .g-svg path {
      /* preserva as cores oficiais do logo */
      filter: none;
  }

  /* Separador "ou" */
  :root[data-theme="dark"] .login-hero .social-sep {
      color: var(--ln-muted);
  }

  :root[data-theme="dark"] .login-hero .social-sep::before,
  :root[data-theme="dark"] .login-hero .social-sep::after {
      background: var(--ln-sep);
  }

  /* Pill com usuário logado + botão sair */
  :root[data-theme="dark"] .login-hero .user-pill {
      background: var(--ln-soft);
      border: 1px solid var(--ln-border);
      color: var(--ln-text);
  }

  :root[data-theme="dark"] .login-hero .user-pill .icon {
      stroke: var(--ln-text);
  }

  :root[data-theme="dark"] .login-hero .btn-logout {
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--ln-border);
      color: var(--ln-text);
  }

  :root[data-theme="dark"] .login-hero .btn-logout .icon {
      stroke: var(--ln-text);
  }

  :root[data-theme="dark"] .login-hero .btn-logout:hover {
      background: rgba(255, 255, 255, .10);
  }

  /* Modal "Você foi desconectado" */
  :root[data-theme="dark"] .login-hero .kick-overlay {
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(2px);
  }

  :root[data-theme="dark"] .login-hero .kick-modal {
      background: var(--ln-card);
      color: var(--ln-text);
      border: 1px solid var(--ln-border);
      box-shadow: var(--ln-elev);
  }

  :root[data-theme="dark"] .login-hero .kick-btn {
      background: linear-gradient(180deg, #2d6cdf, #1f4fb1);
      color: #fff;
      border: 1px solid color-mix(in oklab, #2d6cdf 70%, #000);
  }

  /* Acessibilidade: foco visível nos links/botões */
  :root[data-theme="dark"] .login-hero a:focus,
  :root[data-theme="dark"] .login-hero button:focus,
  :root[data-theme="dark"] .login-hero input:focus-visible {
      outline: 2px solid var(--ln-input-bd-focus);
      outline-offset: 2px;
      border-radius: 6px;
  }

  /* Pequenas melhorias de espaçamento no mobile */
  @media (max-width: 520px) {
      :root[data-theme="dark"] .login-hero .form-wrapper {
          box-shadow: none;
          /* menos sombra para não "pesar" */
          border-radius: 12px;
      }
  }