/*=====
GLOBAL CSS */

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background: rgba(5, 11, 18, 0.84);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  max-width: 1300px;
  height: 74px;
  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #ffffff;
  text-decoration: none;

  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.logo-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  color: #29e3d0;
  background: rgba(41, 227, 208, 0.08);
  border: 1px solid rgba(41, 227, 208, 0.16);
}

.logo-accent {
  color: #29e3d0;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.top-nav a {
  color: #b4bfd3;
  text-decoration: none;

  font-size: 0.95rem;
  font-weight: 600;

  transition: 0.2s ease;
}

.top-nav a:hover {
  color: #ffffff;
}

.mobile-menu-btn {
  display: none;
}

.auth-account-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  max-width: 140px;
  padding: 0.35rem 0.65rem 0.35rem 0.38rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  color: #d9e4ef;
  background: rgba(15, 23, 42, 0.62);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.auth-account-button:hover { border-color: rgba(45, 212, 191, 0.45); color: #99f6e4; }
.auth-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; color: #07111c; background: #f8fafc; font-weight: 900; }
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; }
.auth-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth-modal-shell[hidden] { display: none !important; }
.auth-modal-shell { position: fixed; inset: 0; z-index: 2100000; display: grid; place-items: center; padding: 18px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2, 6, 12, 0.78); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease; }
.auth-modal { position: relative; width: min(440px, 100%); padding: 30px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 22px; color: #e8eef6; background: radial-gradient(circle at top right, rgba(45, 212, 191, .12), transparent 18rem), #08111b; box-shadow: 0 28px 90px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.auth-modal-shell.open .auth-modal-backdrop, .auth-modal-shell.open .auth-modal { opacity: 1; }
.auth-modal-shell.open .auth-modal { transform: none; }
.auth-modal-close { position: absolute; top: 13px; right: 13px; width: 36px; height: 36px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 10px; color: #cbd5e1; background: rgba(15, 23, 42, .7); font-size: 1.35rem; cursor: pointer; }
.auth-modal-kicker { color: #5eead4; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.auth-modal h2 { margin: .35rem 0 .5rem; color: #fff; font-size: 1.65rem; letter-spacing: -.035em; }
.auth-modal > p { margin: 0 0 1.25rem; color: #9eacbf; font-size: .9rem; line-height: 1.55; }
.auth-google-button { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 48px; border: 1px solid rgba(148, 163, 184, .22); border-radius: 13px; color: #122033; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.auth-google-button span { font-size: 1.1rem; }
.auth-modal-divider { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: #64748b; font-size: .72rem; }
.auth-modal-divider::before, .auth-modal-divider::after { content: ''; flex: 1; height: 1px; background: rgba(148, 163, 184, .16); }
.auth-magic-form label { display: block; margin-bottom: .5rem; color: #cbd5e1; font-size: .78rem; font-weight: 750; }
.auth-magic-row { display: flex; gap: .5rem; }
.auth-magic-row input { min-width: 0; flex: 1; min-height: 46px; padding: 0 .8rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; outline: none; color: #f8fafc; background: rgba(15, 23, 42, .72); font: inherit; }
.auth-magic-row input:focus { border-color: rgba(45, 212, 191, .55); }
.auth-magic-row button { min-height: 46px; padding: 0 .9rem; border: 0; border-radius: 12px; color: #042f2e; background: #5eead4; font: inherit; font-weight: 850; cursor: pointer; }
.auth-magic-row button:disabled { opacity: .55; cursor: wait; }
.auth-modal .auth-modal-status { min-height: 1.3em; margin: .85rem 0 0; color: #99f6e4; font-size: .78rem; }
body.auth-modal-open { overflow: hidden; }
.auth-account-card { width: min(620px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow-y: auto; }
.auth-account-profile { display: flex; align-items: center; gap: 1rem; padding-right: 30px; }
.auth-account-photo { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; border: 2px solid rgba(94, 234, 212, .45); border-radius: 50%; color: #062a27; background: #99f6e4; font-size: 1.5rem; font-weight: 900; }
.auth-account-photo img { width: 100%; height: 100%; object-fit: cover; }
.auth-account-profile h2 { margin-bottom: .15rem; font-size: 1.35rem; }
.auth-account-profile .auth-account-email { margin: 0; overflow-wrap: anywhere; color: #94a3b8; font-size: .8rem; }
.account-dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1.3rem; }
.account-dashboard-stats > * { display: grid; gap: .15rem; min-width: 0; padding: .85rem .6rem; border: 1px solid rgba(148, 163, 184, .14); border-radius: 13px; color: #94a3b8; background: rgba(15, 23, 42, .5); text-align: center; font: inherit; }
.account-dashboard-stats button { cursor: pointer; }
.account-dashboard-stats button:hover { border-color: rgba(45, 212, 191, .4); background: rgba(20, 184, 166, .08); }
.account-dashboard-stats strong { color: #f8fafc; font-size: 1.15rem; }
.account-dashboard-stats span { font-size: .68rem; }
.account-reading-history { margin-top: 1rem; }
.account-history-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; color: #e2e8f0; }
.account-history-heading small { color: #64748b; font-size: .68rem; }
.account-history-list { display: grid; max-height: 210px; overflow-y: auto; border-top: 1px solid rgba(148, 163, 184, .12); }
.account-history-list > p { color: #64748b; font-size: .78rem; }
.account-history-list a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .2rem; border-bottom: 1px solid rgba(148, 163, 184, .1); color: #cbd5e1; text-decoration: none; }
.account-history-list a:hover span { color: #5eead4; }
.account-history-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.account-history-list a small { flex: 0 0 auto; color: #64748b; font-size: .65rem; }
.auth-account-menu { display: grid; gap: .6rem; margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid rgba(148, 163, 184, .14); }
.auth-account-menu button { min-height: 46px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.auth-switch-button { border: 1px solid rgba(94, 234, 212, .3); color: #99f6e4; background: rgba(20, 184, 166, .09); }
.auth-signout-button { border: 1px solid rgba(248, 113, 113, .25); color: #fca5a5; background: rgba(127, 29, 29, .12); }
.site-confirm-modal { width: min(420px, 100%); text-align: center; }
.site-confirm-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .75rem; border-radius: 50%; color: #fecaca; background: rgba(239, 68, 68, .14); font-size: 1.25rem; font-weight: 900; }
.site-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.2rem; }
.site-confirm-actions button { min-height: 44px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 11px; color: #cbd5e1; background: rgba(15, 23, 42, .75); font: inherit; font-weight: 800; cursor: pointer; }
.site-confirm-actions button.danger { border-color: rgba(248, 113, 113, .35); color: #fff; background: #b91c1c; }

@media (max-width: 1120px) {
  .auth-account-button { max-width: 44px; padding-right: 0.38rem; }
  .auth-label { display: none; }
}

@media (max-width: 680px) {
  .auth-account-button { max-width: 44px; padding-right: 0.38rem; }
  .auth-label { display: none; }
  .auth-modal { padding: 25px 20px; }
  .account-dashboard-stats { gap: .4rem; }
  .account-dashboard-stats > * { padding: .7rem .3rem; }
  .auth-magic-row { flex-direction: column; }
}

/* evita o header cobrir o conteúdo */
body {
  padding-top: 74px;
}

@media (max-width: 860px) {
  .mobile-menu-btn {
    display: block;

    background: none;
    border: none;

    color: white;
    font-size: 1.55rem;

    cursor: pointer;
  }

  .top-nav {
    position: absolute;
    top: 74px;
    left: 0;

    width: 100%;

    padding: 24px;

    background: #08111d;

    border-bottom: 1px solid rgba(255,255,255,0.06);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);

    transition: 0.25s ease;
  }

  .top-nav.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.site-header {
  width: 100%;
  max-width: 100%;
}

.header-inner {
  width: min(1300px, calc(100% - 32px));
  max-width: 100%;
}

@media (max-width: 860px) {
  .header-inner {
    width: 100%;
    padding: 0 16px;
  }

  .logo {
    min-width: 0;
  }

  .mobile-menu-btn {
    margin-left: auto;
    flex-shrink: 0;
  }

  .top-nav {
    left: 0;
    right: 0;
    width: 100%;
  }
}



/* =========================
   HEADER HARD RESET
========================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  max-width: 100%;

  z-index: 1000;

  background: rgba(5, 11, 18, 0.84);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  width: min(1300px, calc(100% - 48px));
  height: 74px;

  margin: 0 auto;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header,
.site-header * {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #ffffff;
  text-decoration: none;

  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.logo span {
  line-height: 1;
}

.logo-accent {
  color: #29e3d0;
}

.logo-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: #29e3d0;
  background: rgba(41, 227, 208, 0.08);
  border: 1px solid rgba(41, 227, 208, 0.16);
  border-radius: 12px;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.top-nav a {
  color: #b4bfd3;
  text-decoration: none;

  font-size: 0.95rem;
  font-weight: 600;

  padding: 0;
  border: none;
  background: transparent;

  transition: 0.2s ease;
}

.top-nav a:hover {
  color: #ffffff;
}

.mobile-menu-btn {
  display: none;
}

body {
  padding-top: 74px;
}

@media (max-width: 860px) {
  .header-inner {
    width: 100%;
    padding: 0 16px;
  }

  .top-nav {
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;

    width: 100%;

    padding: 24px;

    background: #08111d;

    border-bottom: 1px solid rgba(255,255,255,0.06);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);

    transition: 0.25s ease;
  }

  .top-nav.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu-btn {
    display: block;
    margin-left: auto;

    background: none;
    border: none;

    color: white;
    font-size: 1.55rem;

    cursor: pointer;
  }
}

.header-extension-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 13px !important;
  border-radius: 999px;

  color: #ffffff !important;
  background: rgba(39, 240, 215, 0.08);

  font-weight: 850;
  font-size: 0.9rem;
  text-decoration: none;

  border: 1px solid rgba(39, 240, 215, 0.26);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.header-extension-btn:hover {
  transform: translateY(-1px);
  color: #0cd1a6 !important;
}

@media (max-width: 768px) {
  .header-extension-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    padding: 11px 14px !important;
  }
}

/* Padroniza o header em qualquer página */
.site-header {
  line-height: 1.6;
}
/* Transições curtas entre páginas: suavizam sem simular carregamento. */
html {
  background: #080d14;
}

body {
  animation: bid-page-enter 0.2s ease-out both;
}

body.page-leaving {
  opacity: 0;
  transition: opacity 0.13s ease-out;
}

@keyframes bid-page-enter {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: bid-page-out 0.13s ease-out both;
}

::view-transition-new(root) {
  animation: bid-page-enter 0.2s ease-out both;
}

@keyframes bid-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.page-leaving,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    transition: none;
  }
}

/* Aparência de vidro ajustável: aplicada apenas a superfícies estratégicas. */
:root {
  --glass-blur: 15px;
  --glass-soft-blur: 8px;
  --glass-opacity: .77;
  --glass-border: .14;
  --glass-shadow: .13;
  --glass-reflection: .09;
  --glass-saturation: 123%;
}

.site-header,
.auth-modal,
.top-nav.show,
.saved-drawer {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.site-header {
  background: rgba(5, 11, 18, var(--glass-opacity));
  border-bottom-color: rgba(255, 255, 255, var(--glass-border));
  box-shadow: 0 12px 38px rgba(0, 0, 0, var(--glass-shadow));
}

.auth-modal {
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, .13), transparent 18rem),
    rgba(8, 17, 27, var(--glass-opacity));
  border-color: rgba(255, 255, 255, var(--glass-border));
}

.account-appearance {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, var(--glass-border));
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(45, 212, 191, .09), rgba(56, 189, 248, .04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.account-appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-appearance-heading strong { display: block; margin-top: .15rem; color: #f8fafc; font-size: .92rem; }
.account-appearance output { padding: .35rem .55rem; border-radius: 999px; color: #062a27; background: #99f6e4; font-size: .72rem; font-weight: 900; }
.account-appearance input[type="range"] { width: 100%; margin: .9rem 0 .45rem; accent-color: #2dd4bf; cursor: pointer; }
.account-appearance-scale { display: flex; justify-content: space-between; color: #718096; font-size: .62rem; font-weight: 750; }
.account-appearance > p { margin: .65rem 0 0; color: #8292a8; font-size: .7rem; line-height: 1.4; }

html[data-glass-level="0"] .site-header,
html[data-glass-level="0"] .auth-modal,
html[data-glass-level="0"] .top-nav.show,
html[data-glass-level="0"] .saved-drawer {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sistema premium para popups, confirmações e painel do perfil. */
.auth-modal,
.account-restriction-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,var(--glass-border));
  box-shadow:
    0 35px 110px rgba(0,0,0,.62),
    0 12px 38px rgba(13,148,136,var(--glass-shadow)),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(45,212,191,.06);
}

.auth-modal::before,
.account-restriction-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 0%, rgba(94,234,212,var(--glass-reflection)), transparent 28%),
    radial-gradient(circle at 98% 14%, rgba(56,189,248,var(--glass-reflection)), transparent 31%),
    linear-gradient(115deg, rgba(255,255,255,var(--glass-reflection)), transparent 22%, transparent 78%, rgba(45,212,191,var(--glass-reflection)));
  pointer-events: none;
}

.auth-modal::after,
.account-restriction-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 9%;
  right: 9%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(153,246,228,.75),transparent);
  pointer-events: none;
}

.auth-modal-backdrop {
  background:
    radial-gradient(circle at 18% 18%, rgba(13,148,136,.15), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(37,99,235,.14), transparent 36%),
    rgba(1,5,10,.76);
  -webkit-backdrop-filter: blur(var(--glass-soft-blur)) saturate(125%);
  backdrop-filter: blur(var(--glass-soft-blur)) saturate(125%);
}

.auth-modal-close,
.saved-drawer-close {
  border-color: rgba(255,255,255,.15);
  background: linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.2);
}

.account-dashboard-stats > * {
  border-color: rgba(255,255,255,var(--glass-border));
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(15,23,42,.28));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

html[data-glass-level="0"] .auth-modal-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sólido: opaco de verdade, sem reflexo ou conteúdo atravessando. */
html[data-glass-level="0"] .site-header,
html[data-glass-level="0"] .auth-modal,
html[data-glass-level="0"] .account-restriction-card,
html[data-glass-level="0"] .top-nav.show,
html[data-glass-level="0"] .saved-drawer {
  background-color: #08111b;
  background-image: none;
}

html[data-glass-level="0"] .auth-modal::before,
html[data-glass-level="0"] .auth-modal::after,
html[data-glass-level="0"] .account-restriction-card::before,
html[data-glass-level="0"] .account-restriction-card::after {
  display: none;
}

/* Cristal: transparência máxima e reflexos mais definidos. */
html[data-glass-level="100"] .auth-modal,
html[data-glass-level="100"] .account-restriction-card {
  box-shadow: 0 38px 120px rgba(0,0,0,.6),0 0 50px rgba(45,212,191,.18),inset 0 1px rgba(255,255,255,.2);
}

html[data-glass-level="100"] .site-header,
html[data-glass-level="100"] .auth-modal,
html[data-glass-level="100"] .saved-drawer {
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 30px 100px rgba(0,0,0,.52),0 0 55px rgba(45,212,191,.2),inset 0 1px rgba(255,255,255,.25);
}

@media (max-width: 680px) {
  .auth-modal { border-radius: 26px; }
  .auth-account-card { max-height: calc(100dvh - 22px); }
}
.account-restriction-screen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 7, 13, 0.96);
  backdrop-filter: blur(16px);
}

.account-restriction-screen[hidden] {
  display: none;
}

.account-restriction-card {
  width: min(100%, 520px);
  padding: clamp(1.5rem, 5vw, 2.4rem);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 24px;
  color: #e5edf5;
  background: linear-gradient(150deg, #111b29, #080e17);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.account-restriction-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  color: #fff;
  background: #dc2626;
  font-size: 1.35rem;
  font-weight: 900;
}

.account-restriction-card h1 {
  margin: 0.45rem 0 0.8rem;
  color: #fff;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.15;
}

.account-restriction-card p {
  margin: 0;
  color: #aab8c7;
  line-height: 1.65;
}

.account-restriction-actions {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.account-restriction-actions a,
.account-restriction-actions button {
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 12px;
  color: #042f2e;
  background: #5eead4;
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.account-restriction-actions .secondary {
  color: #dbe7f3;
  background: rgba(148, 163, 184, 0.12);
}

body.account-restricted {
  overflow: hidden;
}