/* ============================================================
   Vênus Control — componentes globais (toast + confirm modal)
   Importar em todas as telas pós-login:
   <link rel="stylesheet" href="assets/venus-ui.css">
   E incluir o <script src="assets/venus-ui.js"></script> no fim do body.
   ============================================================ */

/* ====== Tipografia · DM Serif Display + Inter (Opção F1) ======
   Display em DM Serif Display traz caráter editorial geométrico.
   <em> em títulos volta a italic — DM Serif Display tem italic elegante
   e o destaque em wine se mantém. Body em Inter, tracking levemente fechado. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.page-title em, .greeting-title em, .modal-title em,
.demo-display em, .h-display em, .lucro-title em,
.rateio-title em, .empty-title em, .confirm-title em,
.brand-name em, .lead em, .hero em,
.insight-title em {
  font-style: italic;
  color: var(--wine, #6B2C5E);
}

/* Body em Inter: tracking levemente fechado dá densidade editorial */
body { letter-spacing: -0.003em; }

/* ====== Sidebar logo (mark + wordmark lado a lado) ======
   Desmembra o logo full em 2 imagens: o V estilizado à esquerda
   e o wordmark "VÊNUS / — CONTROL —" à direita. Padronizado em todas as telas. */
.sidebar-brand .sidebar-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
.sidebar-brand .sidebar-wordmark {
  height: 36px;
  width: auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* ====== Toast (canto inferior direito) ====== */
.toast-region {
  position: fixed;
  bottom: calc(var(--bottom-nav-h, 0px) + 20px);
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
@media (min-width: 960px) {
  .toast-region { bottom: 24px; right: 24px; }
}
.toast {
  pointer-events: auto;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E5DBC9);
  border-left: 4px solid var(--champagne, #B89968);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(44, 19, 56, 0.18);
  min-width: 280px;
  max-width: 380px;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.875rem;
  color: var(--ink, #1A0A22);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1), opacity 320ms;
  position: relative;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: var(--success, #6B8E5A); }
.toast.error   { border-left-color: var(--danger,  #A85651); }
.toast.info    { border-left-color: var(--info-ink, #3D4A7A); }

.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast.success .toast-icon { background: var(--success-bg, rgba(107,142,90,0.14)); color: var(--success-ink, #4A6B3D); }
.toast.error   .toast-icon { background: var(--danger-bg,  rgba(168, 86, 81, 0.14)); color: var(--danger-ink, #7A3A36); }
.toast.info    .toast-icon { background: var(--info-bg,    rgba(91,107,168,0.12));   color: var(--info-ink,  #3D4A7A); }
.toast-icon svg { width: 14px; height: 14px; }

.toast-body { flex: 1; min-width: 0; line-height: 1.4; }
.toast-title { font-weight: 500; margin-bottom: 2px; }
.toast-sub { font-size: 0.75rem; color: var(--ink-muted, #8A7A93); }

.toast-close {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  color: var(--ink-muted, #8A7A93);
  flex-shrink: 0;
}
.toast-close svg { width: 14px; height: 14px; }
.toast-close:hover { color: var(--ink, #1A0A22); }

/* ====== Animação checkmark (overlay grande, opcional) ====== */
.checkmark-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 237, 222, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms, visibility 220ms;
  pointer-events: none;
}
.checkmark-overlay.show { opacity: 1; visibility: visible; }
.checkmark-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--success-bg, rgba(107,142,90,0.16));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: checkPop 380ms cubic-bezier(.2,.7,.3,1) both;
}
.checkmark-circle svg { width: 48px; height: 48px; color: var(--success-ink, #4A6B3D); }
.checkmark-circle svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw 420ms ease-out 180ms forwards;
}
@keyframes checkPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ====== Modal de confirmação ====== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(26, 10, 34, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms, visibility 220ms;
}
.confirm-overlay.show { opacity: 1; visibility: visible; }

.confirm-modal {
  background: var(--white, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  padding: 28px;
  box-shadow: 0 24px 48px rgba(44, 19, 56, 0.24);
  transform: translateY(12px) scale(0.96);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
  text-align: center;
}
.confirm-overlay.show .confirm-modal { transform: translateY(0) scale(1); }

.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--warning-bg, rgba(198, 139, 62, 0.14));
  color: var(--warning-ink, #8B5E22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.confirm-icon.danger { background: var(--danger-bg, rgba(168, 86, 81, 0.14)); color: var(--danger-ink, #7A3A36); }
.confirm-icon svg { width: 28px; height: 28px; }

.confirm-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  color: var(--venus, #2C1338);
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.2;
}
.confirm-title em { font-style: italic; color: var(--wine, #6B2C5E); }
.confirm-message {
  font-size: 0.9375rem;
  color: var(--ink-soft, #4A3550);
  line-height: 1.5;
  margin: 0 0 24px;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.confirm-btn {
  padding: 12px 22px;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 44px;
  min-width: 110px;
  transition: all 160ms ease;
}
.confirm-btn-secondary {
  background: transparent;
  color: var(--ink, #1A0A22);
  border-color: var(--line, #E5DBC9);
}
.confirm-btn-secondary:hover {
  background: var(--cream-soft, #FAF6EC);
  border-color: var(--champagne, #B89968);
}
.confirm-btn-primary {
  background: var(--venus, #2C1338);
  color: var(--cream, #F4EDDE);
}
.confirm-btn-primary:hover { background: var(--aubergine, #3D1F4F); }
.confirm-btn-danger {
  background: var(--danger, #A85651);
  color: var(--white, #fff);
}
.confirm-btn-danger:hover { background: var(--danger-ink, #7A3A36); }

/* ============================================================
   Dropdowns reutilizáveis (sino + avatar)
   Use junto com o auto-init do venus-ui.js — marque triggers com
   data-dropdown-trigger="<id-do-dropdown>" e o dropdown com id="<id>".
   ============================================================ */
.dropdown-wrap { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 280px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E5DBC9);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(44, 19, 56, 0.14);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms cubic-bezier(.2,.7,.3,1),
              transform 220ms cubic-bezier(.2,.7,.3,1),
              visibility 220ms;
  overflow: hidden;
}
.dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown.up {
  top: auto;
  bottom: calc(100% + 10px);
  transform: translateY(6px);
}
.dropdown.up.open { transform: translateY(0); }
.dropdown.left { right: auto; left: 0; }

.dropdown-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft, #EFE7D6);
  background: var(--cream-soft, #FAF6EC);
}
.dropdown-head-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1rem;
  color: var(--venus, #2C1338);
  margin: 0;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown-head-sub {
  font-size: 0.75rem;
  color: var(--ink-muted, #8A7A93);
  margin-top: 2px;
}
.dropdown-head-count {
  background: var(--champagne, #B89968);
  color: var(--venus, #2C1338);
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 9999px;
}

.dropdown-list { padding: 8px 0; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 0.875rem;
  color: var(--ink, #1A0A22);
  cursor: pointer;
  transition: background 120ms ease;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
}
.dropdown-item:hover { background: var(--cream-soft, #FAF6EC); }
.dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--ink-muted, #8A7A93);
  flex-shrink: 0;
}
.dropdown-item.danger { color: var(--danger-ink, #7A3A36); }
.dropdown-item.danger svg { color: var(--danger-ink, #7A3A36); }
.dropdown-sep { height: 1px; background: var(--line-soft, #EFE7D6); margin: 8px 0; }

.dropdown.bell-dd { min-width: 340px; max-width: 360px; }
@media (max-width: 480px) {
  .dropdown.bell-dd { min-width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
}
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 120ms ease;
  border-bottom: 1px solid var(--line-soft, #EFE7D6);
  align-items: flex-start;
  color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--cream-soft, #FAF6EC); }
.notif-item.unread { background: rgba(184, 153, 104, 0.06); }
.notif-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.notif-dot.warning { background: var(--warning-bg, rgba(198,139,62,0.14)); color: var(--warning-ink, #8B5E22); }
.notif-dot.danger  { background: var(--danger-bg,  rgba(168,86,81,0.14));  color: var(--danger-ink,  #7A3A36); }
.notif-dot.info    { background: var(--info-bg,    rgba(91,107,168,0.12)); color: var(--info-ink,    #3D4A7A); }
.notif-dot.success { background: var(--success-bg, rgba(107,142,90,0.14)); color: var(--success-ink, #4A6B3D); }
.notif-dot svg { width: 16px; height: 16px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
  font-size: 0.8125rem;
  color: var(--ink, #1A0A22);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 2px;
}
.notif-meta {
  font-size: 0.6875rem;
  color: var(--ink-muted, #8A7A93);
  letter-spacing: 0.04em;
}
.dropdown-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft, #EFE7D6);
  text-align: center;
  background: var(--cream-soft, #FAF6EC);
}
.dropdown-foot a {
  font-size: 0.8125rem;
  color: var(--wine, #6B2C5E);
  font-weight: 500;
  text-decoration: none;
}
.dropdown-foot a:hover { color: var(--venus, #2C1338); text-decoration: underline; text-underline-offset: 3px; }

.avatar-trigger {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.avatar-trigger:focus-visible {
  outline: 2px solid var(--champagne, #B89968);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ============================================================
   Header desktop (≥960px) — sino com dropdown no canto superior
   ============================================================ */
.desk-header {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--line-soft, #EFE7D6);
  position: sticky;
  top: 0;
  z-index: 9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(250, 246, 236, 0.85);
}
@media (min-width: 960px) { .desk-header { display: flex; } }
.desk-header-crumb {
  font-size: 0.8125rem;
  color: var(--ink-muted, #8A7A93);
  letter-spacing: 0.04em;
}
.desk-header-crumb strong {
  color: var(--venus, #2C1338);
  font-weight: 500;
}
.desk-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.desk-bell {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wine, #6B2C5E);
  border-radius: 8px;
  transition: background 120ms ease;
  background: none;
  border: 0;
  cursor: pointer;
}
.desk-bell:hover { background: rgba(107, 44, 94, 0.08); }
.desk-bell svg { width: 22px; height: 22px; }
.desk-bell .bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--wine, #6B2C5E);
  color: var(--cream, #F4EDDE);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 9999px;
  text-align: center;
  border: 1.5px solid var(--cream-soft, #FAF6EC);
}

/* ====== Empty state — quando a lista/tela está vazia ====== */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  max-width: 460px;
  margin: 0 auto;
  color: var(--ink-soft, #4A3550);
}
.empty-state.compact { padding: 36px 20px; }
.empty-illu {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184, 153, 104, 0.14), rgba(107, 44, 94, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wine, #6B2C5E);
  position: relative;
}
.empty-illu::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--champagne-soft, #D4BC97);
  opacity: 0.5;
}
.empty-illu svg { width: 36px; height: 36px; }
.empty-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne, #B89968);
  margin-bottom: 8px;
}
.empty-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--venus, #2C1338);
  line-height: 1.2;
  margin: 0 0 8px;
}
.empty-title em { font-style: italic; color: var(--wine, #6B2C5E); }
.empty-message {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 24px;
  color: var(--ink-soft, #4A3550);
}
.empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.empty-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--venus, #2C1338);
  color: var(--cream, #F4EDDE);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 220ms ease;
}
.empty-cta:hover { background: var(--aubergine, #3D1F4F); transform: translateY(-1px); }
.empty-cta-ghost {
  background: transparent;
  color: var(--venus, #2C1338);
  border-color: var(--line, #E5DBC9);
}
.empty-cta-ghost:hover { background: var(--cream-soft, #FAF6EC); border-color: var(--champagne, #B89968); }
.empty-cta svg { width: 16px; height: 16px; }

/* ====== Loading skeleton ====== */
@keyframes venusShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(184, 153, 104, 0.08) 0%,
    rgba(184, 153, 104, 0.18) 50%,
    rgba(184, 153, 104, 0.08) 100%);
  background-size: 800px 100%;
  animation: venusShimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.lg  { height: 20px; }
.skeleton-line.sm  { height: 9px; }
.skeleton-block { height: 64px; border-radius: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }

/* ====== Error state (página inteira ou seção) ====== */
.error-state {
  text-align: center;
  padding: 48px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.error-state .empty-illu {
  background: linear-gradient(135deg, rgba(168, 86, 81, 0.14), rgba(198, 139, 62, 0.10));
  color: var(--danger-ink, #7A3A36);
}
.error-state .empty-title { color: var(--ink, #1A0A22); }
.error-detail {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--cream-soft, #FAF6EC);
  border: 1px dashed var(--line, #E5DBC9);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--ink-muted, #8A7A93);
  font-family: ui-monospace, monospace;
  text-align: left;
}

/* ====== Bottom nav mobile padronizado (altura/proporção iguais em todas as telas) ======
   Como cada tela tinha sua própria versão das regras .bottom-nav, surgiam pequenas
   divergências (ex: algumas tinham regra mobile reduzindo padding/font, outras não).
   Centralizamos aqui com !important pra garantir uniformidade pixel-perfect. */
.bottom-nav {
  display: flex !important;
  background: var(--venus, #2C1338) !important;
  border-top: 1px solid var(--aubergine, #3D1F4F) !important;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
  gap: 2px !important;
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  z-index: 20 !important;
}
@media (min-width: 960px) { .bottom-nav { display: none !important; } }
.bottom-nav-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px 0 !important;
  color: rgba(244, 237, 222, 0.55) !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.04em !important;
  border-radius: 8px !important;
  text-decoration: none;
}
.bottom-nav-item svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; }
.bottom-nav-item.active { color: var(--champagne, #B89968) !important; }
.bottom-nav-item.active svg { stroke: var(--champagne, #B89968) !important; }

@media (max-width: 599px) {
  .bottom-nav-item {
    padding: 4px 0 !important;
    font-size: 0.5625rem !important;
  }
  .bottom-nav-item svg { width: 20px !important; height: 20px !important; }
}

/* ====== Topbar mobile padronizada (altura fixa em todas as telas) ======
   Sem essas regras, cada tela tinha padding/elementos com tamanhos sutilmente diferentes
   resultando em alturas visuais distintas. Forçamos min-height + box-sizing + alturas
   fixas pros elementos internos pra garantir uniformidade pixel-perfect entre telas. */
.topbar {
  min-height: 56px !important;
  box-sizing: border-box;
  align-items: center !important;
  flex-wrap: nowrap !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.topbar-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3, 12px) !important;
  flex-shrink: 0 !important;
}
.topbar-back,
.topbar-bell,
.topbar-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0;
}
.topbar img { max-height: 30px !important; }

@media (max-width: 599px) {
  .topbar {
    padding: var(--space-2, 8px) var(--space-4, 16px) !important;
  }
  .topbar-back,
  .topbar-bell,
  .topbar-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .topbar img { max-height: 26px !important; }
}

/* ====== Dropdown do sino em mobile — ancora no viewport, não no botão ======
   Sem isso, o .dropdown.bell-dd em mobile ficava com position:absolute e estourava
   pela esquerda em telas estreitas. Aplica em todas as telas via venus-ui.css. */
@media (max-width: 599px) {
  .dropdown.bell-dd {
    position: fixed !important;
    top: 64px !important;
    left: 16px !important;
    right: 16px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ====== Bottom nav "Mais" sheet (mobile) ======
   Sheet que sobe de baixo ao clicar no item "Mais" do bottom-nav. Disponível em todas as telas
   via venus-ui.js (Venus.more). Lista as telas secundárias: Lembretes, Retornos, Procedimentos,
   Calculadora, Configurações. */
.venus-more-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 10, 34, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.venus-more-overlay.open { opacity: 1; visibility: visible; }

.venus-more-sheet {
  background: var(--white, #fff);
  width: 100%;
  max-width: 520px;
  border-radius: 20px 20px 0 0;
  padding: 10px 8px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2, .7, .3, 1);
  box-shadow: 0 -16px 40px rgba(44, 19, 56, 0.2);
}
.venus-more-overlay.open .venus-more-sheet { transform: translateY(0); }

.venus-more-handle {
  width: 42px;
  height: 5px;
  background: var(--line, #E5DBC9);
  border-radius: 3px;
  margin: 0 auto 12px;
}
.venus-more-sheet h3 {
  font-family: var(--font-body, sans-serif);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted, #8A7A93);
  margin: 0;
  font-weight: 500;
  padding: 0 16px 10px;
}
.venus-more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--ink, #1A0A22);
  text-decoration: none;
  transition: background 150ms;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.venus-more-item + .venus-more-item {
  border-top: 1px solid var(--line-soft, #EFE7D6);
}
.venus-more-item:hover,
.venus-more-item:active {
  background: var(--cream-soft, #FAF6EC);
}
.venus-more-item > svg {
  width: 22px;
  height: 22px;
  color: var(--champagne, #B89968);
  flex-shrink: 0;
  stroke: currentColor;
}
.venus-more-item-text { min-width: 0; flex: 1; }
.venus-more-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1px;
}
.venus-more-item strong {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink, #1A0A22);
}
.venus-more-item-desc {
  font-size: 0.75rem;
  color: var(--ink-muted, #8A7A93);
  display: block;
  line-height: 1.35;
}
.venus-more-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--champagne, #B89968);
  color: var(--venus, #2C1338);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9999px;
  min-width: 18px;
  height: 16px;
  line-height: 1;
}

/* Em desktop, o sheet some — sidebar já lista essas telas */
@media (min-width: 960px) {
  .venus-more-overlay { display: none; }
}