/* Acabamento premium em todo o painel.
   Tipografia: Pacifico (títulos, números), Schibsted Grotesk (texto), Kalam (letra à mão, com moderação).
   Sem caixa-alta espaçada, sem anéis de progresso, movimento só quando ela age. */

body { font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.005em; font-feature-settings: "kern", "liga"; }
body[data-tema] { --fonte-titulo: 'Pacifico', Georgia, serif !important; }
h1, h2, h3, .titulo-marca, .planner-titulo, .login-marca, .login-titulo {
  font-family: 'Pacifico', Georgia, serif !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; font-synthesis: none;
}
h1, .planner-titulo { font-size: clamp(28px, 3.2vw, 38px) !important; line-height: 1.05; }
/* tela de entrar: nome na letra do logo do topo e o recadinho em letra de mão */
.login-papel .login-titulo { font-family: 'Kalam', cursive !important; font-size: 19px !important; line-height: 1.2; letter-spacing: 0 !important; }
.cabecalho-cartao h2, h2 { font-size: 24px !important; line-height: 1.15; }
.titulo-marca { font-size: 28px !important; }
body .mao { font-family: 'Kalam', cursive !important; font-weight: 400 !important; font-style: normal !important; font-size-adjust: 0.4; }
body:is([data-tema="linho"], [data-tema="oliva"], [data-tema="noite"]) .mao { font-family: 'Schibsted Grotesk', sans-serif !important; font-style: italic !important; font-weight: 400 !important; font-size-adjust: none; }
.botao, button, input, textarea, select { font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.botao { font-weight: 500 !important; letter-spacing: 0.01em; }
strong, .forte, b { font-weight: 600; }

/* nada de rótulo em caixa-alta espaçada */
*, *::before, *::after { text-transform: none !important; }
.sobretitulo, .postit-rotulo, .rotulo-calma, .rotulo-refeicao, .grupo-temas, .bloco-mes, .cal-cabecalho, .dia-faixa-letra, .letra-dia, .resumo-nome, .data-semana, .marca-hoje {
  letter-spacing: 0 !important;
}
.sobretitulo, .postit-rotulo, .grupo-temas { font-family: 'Schibsted Grotesk', sans-serif; font-style: normal; font-size: 14px !important; font-weight: 600 !important; }
.rotulo-calma, .rotulo-refeicao { font-size: 13px !important; font-weight: 500 !important; }

/* saudação do topo: nome e, embaixo, a data */
.saudacao { display: flex; flex-direction: column; gap: 2px; }
.data-saudacao { font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 500; color: var(--apagado); font-style: normal; }

/* movimento: sem entradas automáticas em cada bloco; só o que responde a um toque */
.efeitos-ativos .chegando, .efeitos-ativos .chegando * { animation: none !important; }
.cartao:hover, .resumo-item:hover, .dia-faixa:hover, .modelo-habito:hover, .meta-hoje:hover { transform: none !important; }

/* ---------- Resumo do Hoje: número + marquinhas ---------- */
.resumo-dia .resumo-item { gap: 14px; align-items: center; }
.resumo-num { font-family: 'Pacifico', serif; font-size: 46px; line-height: 0.9; font-weight: 500; color: var(--cor-item, var(--destaque)); min-width: 0.6em; text-align: right; }
.resumo-dia .resumo-nome { font-size: 14px; font-weight: 500; color: var(--tinta); }
.resumo-dia .resumo-sub { font-size: 13px; color: var(--apagado); }
.marcas { display: flex; gap: 3px; margin-top: 4px; color: var(--cor-item, var(--destaque)); }
.marcas svg { display: block; }
.tracinho { width: 14px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--cor-item) 22%, transparent); }
.tracinho.cheio { background: var(--cor-item); }
@media (max-width: 900px) {
  .resumo-dia .resumo-item { flex-direction: column; gap: 4px; text-align: center; align-items: center; }
  .resumo-num { text-align: center; font-size: 38px; }
  .resumo-dia .resumo-nome { font-size: 12px; line-height: 1.2; }
  .marcas { justify-content: center; flex-wrap: wrap; max-width: 90px; }
}

/* ---------- Habit tracker ---------- */
.titulo-habitos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.segmentos { display: flex; gap: 4px; max-width: 360px; }
.segmentos span { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--forte) 20%, transparent); transition: background 0.4s ease; }
.segmentos span.cheio { background: var(--forte); }
.topo-habitos .destaque-seq { color: var(--apagado); font-weight: inherit; }
.marcar-grande {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--forte) !important; background: transparent; color: var(--forte);
}
.marcar-grande.feito { background: var(--forte); }
.marcar-grande:hover:not(.feito) { background: color-mix(in srgb, var(--forte) 10%, transparent); }
.marcar-num { font-family: 'Pacifico', serif; font-size: 19px; font-weight: 500; color: var(--forte); }
.anel-marcar, .marcar-miolo { display: none !important; }
.pulado-icone { border-style: dashed !important; color: var(--apagado); background: transparent !important; }
.pontinhos { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 1px; }
.pontinhos span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--forte) 18%, transparent); }
.pontinhos span.cheio { background: var(--forte); }
.item-habito.feito { background: transparent; }
.item-habito .habito-nome { font-family: 'Schibsted Grotesk', sans-serif !important; font-size: 17px; font-weight: 500; }
.botao-mini { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--borda-premium, rgba(0,0,0,.12)); color: var(--apagado); }
.sequencia { font-weight: 500; color: var(--apagado); }
.sequencia .chama { width: 12px; height: 15px; }
.numeros-habito div { border-radius: 14px; }
.numeros-habito strong { font-weight: 500; }
.tracker-titulo { font-size: 30px !important; }
.medalha-num { font-family: 'Pacifico', serif; font-weight: 500; }

/* ---------- Metas: régua em vez de anel ---------- */
.meta-progresso { width: 100%; height: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 10px 0 2px; }
.meta-pct { position: static; font-size: 44px; font-weight: 500; line-height: 1; }
.meta-pct small { font-size: 0.45em; margin-left: 2px; }
.regua { display: block; width: 100%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--forte) 18%, transparent); overflow: hidden; }
.regua span { display: block; height: 100%; border-radius: 3px; background: var(--forte); transition: width 0.6s ease; }

/* números grandes do resto do sistema na mesma família */
.dia-faixa-num, .bloco-numero, .cal-numero, .dia-numero, .anel-dia, .foco-tempo, .data-grande, .valor-grande, .saldo-valor { font-family: 'Pacifico', serif !important; font-weight: 400 !important; font-style: normal !important; }
.data-grande { font-size: 44px; }
.data-dia { font-size: 22px !important; }
.folga { justify-self: center; align-self: center; width: fit-content; margin: 6px auto 0 !important; padding: 8px 16px; border-radius: 999px; background: var(--cartao); color: var(--apagado); }

/* texto mais firme: nada de cinza clarinho em tela de notebook */
body { font-weight: 400; color: var(--tinta); }
.pequeno, .suave, .resumo-sub, .habito-detalhe, .data-saudacao, .opcao-desc { color: color-mix(in srgb, var(--tinta) 72%, transparent) !important; }
label, .rotulo-login, .aba, .botao, .resumo-nome { font-weight: 500 !important; }

/* ---------- Topo: caligrafia centralizada direto no papel, sem caixa ---------- */
.topo, .menu { display: none !important; }
.pagina { gap: 24px !important; padding-top: 0 !important; }
.barra-topo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100vw; margin-left: calc(50% - 50vw); padding: 26px 24px 18px; box-sizing: border-box;
  background: transparent; color: var(--cor-topo);
}
.marca-topo {
  font-family: 'Pacifico', cursive; font-weight: 400; font-size: 52px; line-height: 1; font-synthesis: none; color: var(--cor-topo);
  text-shadow: 0 0 18px var(--brilho-topo), 0 0 3px var(--brilho-topo);
  text-decoration: none; white-space: nowrap; padding: 4px 12px;
  display: inline-flex; align-items: center; gap: .18em;
}
/* a Pacifico tem a perna do "p" bem comprida: o texto sobe um pouco pra ficar no meio do rostinho e não encostar nas abas */
.marca-texto { display: block; line-height: 1.3; padding: 0 .06em .22em; transform: translateY(-.04em); }
.marca-rosto { flex: none; width: auto; height: 1.2em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.nav-topo { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; }
.nav-topo .aba {
  min-height: 36px !important; padding: 0 !important; border-radius: 0; white-space: nowrap; font-size: 15px !important;
  background: transparent !important; color: var(--cor-topo) !important; opacity: 0.82; text-decoration: none; font-weight: 500 !important;
  display: inline-flex; align-items: center; text-shadow: 0 0 10px var(--brilho-topo), 0 0 2px var(--brilho-topo);
}
.nav-topo .aba:hover { opacity: 1; background: transparent !important; }
body .nav-topo .aba.ativa { background: transparent !important; color: var(--cor-topo) !important; opacity: 1; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.acoes-topo { position: absolute; top: 18px; right: max(24px, calc(50vw - 600px)); display: flex; align-items: center; gap: 4px; }
.botao-icone {
  width: 42px; height: 42px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cor-topo); cursor: pointer;
}
.botao-icone:hover, .botao-icone[aria-expanded="true"] { background: color-mix(in srgb, var(--cor-topo) 14%, transparent); }
.botao-icone:focus-visible, .marca-topo:focus-visible, .nav-topo .aba:focus-visible { outline: 2px solid var(--cor-topo); outline-offset: 3px; }
.barra-topo .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 1.5px var(--borda-premium, rgba(0,0,0,.15)) !important; }
.barra-topo .botao-perfil.ativo .avatar { box-shadow: 0 0 0 2px var(--destaque) !important; }

@media (max-width: 1000px) { .acoes-topo { top: 12px; right: 14px; } .marca-topo { font-size: 46px; } }
@media (max-width: 760px) {
  .barra-topo { padding: 54px 16px 14px; }
  .marca-topo { font-size: 38px; }
  .nav-topo { display: none; }
  .acoes-topo { top: 8px; right: 10px; }
}

/* saudação agora mora no cartão do dia */
.data-dia { font-family: 'Schibsted Grotesk', sans-serif !important; font-size: 15px !important; font-weight: 500; color: color-mix(in srgb, var(--tinta) 72%, transparent) !important; }
.data-grande { font-size: 40px !important; }
@media (max-width: 760px) { .data-grande { font-size: 30px !important; } }
body .nav-topo .aba.ativa { background: var(--cartao) !important; color: var(--tinta) !important; }
body .cartao-agora .cabecalho-cartao a { color: color-mix(in srgb, var(--destaque-texto, #fff) 85%, transparent) !important; }
@media (max-width: 760px) {
  .resumo-dia .marcas, .resumo-dia .resumo-sub { display: none; }
  .resumo-dia .resumo-nome { font-size: 12.5px !important; }
}

/* cor da escrita do topo sobre a estampa de cada estética (clara nos fundos escuros, escura nos claros) */
body[data-tema] { --cor-topo: var(--destaque); --brilho-topo: color-mix(in srgb, var(--cartao) 85%, transparent); }
body:is([data-tema="noite"], [data-tema="oliva"], [data-tema="ursinho"], [data-tema="cottage"]) { --cor-topo: #FBF7EC; --brilho-topo: rgba(0, 0, 0, 0.45); }
body[data-tema] .nav-topo .aba, body[data-tema] .nav-topo .aba.ativa { background: transparent !important; color: var(--cor-topo) !important; box-shadow: none !important; }

/* ===================== Ajustes finos (rodada 2) ===================== */
/* cartões: menos "kit de cartões" — raio menor, sombra quase imperceptível, borda fina */
body[data-tema] :is(.cartao, .topo) { border-radius: 14px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 40px -32px rgba(0, 0, 0, 0.45) !important; }
body[data-tema] .cartao:not(.topo):not(.menu) { padding: 24px 26px; }
body[data-tema] dialog.cartao { border-radius: 18px !important; }
.grade-hoje { align-items: start !important; }

/* "A seguir" */
.agora-rotulo { margin: 4px 0 6px; font-size: 14px; color: color-mix(in srgb, var(--destaque-texto, #fff) 78%, transparent); }
.agora-tarefa { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--destaque-texto, #fff); cursor: pointer; text-align: left; }
.caixa-agora { width: 24px !important; height: 24px !important; border-radius: 7px; border: 1.5px solid var(--destaque-texto, #fff) !important; background: transparent !important; flex-shrink: 0; }
.agora-tarefa:hover .caixa-agora { background: color-mix(in srgb, var(--destaque-texto, #fff) 18%, transparent) !important; }
.agora-frase { margin: 2px 0 4px; font-family: 'Pacifico', serif; font-size: 25px; line-height: 1.25; color: var(--destaque-texto, #fff); }
.cartao-agora .agora-titulo { font-family: 'Pacifico', serif !important; font-weight: 400 !important; font-size: 26px !important; }

/* resumo: tudo na cor da estética; vazio vira convite */
.resumo-dia .resumo-item { --cor-item: var(--destaque); }
.resumo-num { color: var(--destaque) !important; font-weight: 400 !important; }
.resumo-vazio { justify-content: center; }
.resumo-convite { font-size: 14px; font-weight: 500; color: var(--destaque); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* rostinhos de traço */
.humor { color: var(--tinta); border: 1px solid transparent !important; background: transparent !important; border-radius: 16px !important; font-weight: 500 !important; }
.humor .rostinho { color: color-mix(in srgb, var(--tinta) 70%, transparent); transition: color 0.2s ease, transform 0.2s ease; }
.humor:hover .rostinho { color: var(--tinta); transform: translateY(-1px); }
.humor.selecionado { border-color: var(--borda-premium, rgba(0,0,0,.12)) !important; background: color-mix(in srgb, var(--destaque) 7%, transparent) !important; }
.humor.selecionado .rostinho { color: var(--destaque); }
.humor.selecionado .rostinho circle:first-child { fill: color-mix(in srgb, var(--destaque) 12%, transparent); }

/* semana do cartão do dia */
.faixa-semana { gap: 4px !important; }
.dia-faixa { padding: 10px 0 !important; border-radius: 10px !important; background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.1)); gap: 0 !important; }
.dia-faixa:hover { background: color-mix(in srgb, var(--suave) 50%, transparent) !important; }
.dia-faixa-num { font-size: 22px !important; }
.dia-faixa-hoje { font-size: 11px; font-weight: 600; line-height: 1; margin-top: 2px; }
.dia-faixa.hoje { background: var(--destaque) !important; border-color: var(--destaque); box-shadow: none !important; transform: none !important; }
.dia-faixa-ponto { margin-top: 3px; }
.data-semana { color: color-mix(in srgb, var(--tinta) 70%, transparent) !important; font-weight: 500 !important; }

/* checklist: campo com + dentro */
.campo-com-botao { position: relative; }
.campo-com-botao input { padding-right: 52px !important; border-radius: 12px !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)) !important; background: transparent !important; min-height: 46px; }
.campo-com-botao input:focus { border-color: var(--destaque) !important; outline: none; }
.botao-mais { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9px; border: 0; background: var(--destaque); color: var(--destaque-texto, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cartao-checklist .cabecalho-cartao .forte, .cartao-checklist .pequeno { color: color-mix(in srgb, var(--tinta) 75%, transparent) !important; }
.barra { height: 4px !important; }

/* foto no topo no mesmo tom dos ícones */
.barra-topo .avatar { background: transparent !important; color: var(--cor-topo); box-shadow: inset 0 0 0 1.3px var(--cor-topo) !important; width: 38px !important; height: 38px !important; }
.barra-topo .avatar-iniciais { font-size: 15px; }
.barra-topo .botao-perfil.ativo .avatar { box-shadow: inset 0 0 0 2px var(--cor-topo) !important; }

/* botões: menos "pílula de app", mais papelaria fina */
.botao { border-radius: 10px !important; box-shadow: none !important; }
.botao-claro { background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)) !important; }

/* rodada 2: menos cor "de app" solta, tudo puxando a paleta da estética */
.meta-hoje { background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.12)); border-radius: 12px !important; --cor: var(--destaque) !important; }
.meta-hoje .barra { background: color-mix(in srgb, var(--destaque) 15%, transparent) !important; }
.cartao-humor .copo svg path { fill: transparent; stroke: var(--destaque); stroke-width: 1.6; }
.cartao-humor .copo svg path[fill="#8EC9F5"] { fill: var(--destaque); }
.copo svg path[fill="#8EC9F5"] { fill: var(--destaque) !important; }
.copo svg path { stroke: var(--destaque) !important; stroke-width: 1.6 !important; }
.copo svg path[fill="#FFFFFF"] { fill: transparent !important; }
.cartao-agora .etiqueta, .agora-dia-todo .etiqueta { background: transparent !important; color: var(--destaque-texto, #fff) !important; border: 1px solid color-mix(in srgb, var(--destaque-texto, #fff) 45%, transparent); font-weight: 500; }
.cartao-ciclo .etiqueta { background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)); font-weight: 500; }
.marcas-gota { color: var(--destaque); }

/* ---------- Ciclo ---------- */
.ciclo-intro { max-width: 560px; margin: 4px 0 6px; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--tinta) 82%, transparent); }
.form-data-ciclo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
.rotulo-data { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.form-data-ciclo input[type=date], .linha-form input[type=date] {
  height: 46px !important; min-height: 0 !important; width: 220px; max-width: 100%; box-sizing: border-box; padding: 0 12px !important;
  border-radius: 10px !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.15)) !important; background: transparent !important;
  font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; color: var(--tinta);
}
.form-data-ciclo .botao { height: 46px; }
.ciclo-semana { font-size: 12px !important; font-weight: 600 !important; color: color-mix(in srgb, var(--tinta) 65%, transparent) !important; }
.ciclo-semana, .ciclo-grade { gap: 4px !important; max-width: 340px; }
.ciclo-dia { width: 100%; max-width: 40px; justify-self: center; font-weight: 500 !important; font-size: 14px !important; }
.ciclo-dia.futuro:not(.prevista):not(.fertil):not(.ovulacao) { opacity: 1 !important; color: color-mix(in srgb, var(--tinta) 55%, transparent); }
.ciclo-dia.hoje { outline: 1.5px solid var(--destaque) !important; outline-offset: 1px !important; }
.ciclo-mes-nome { font-size: 19px !important; }
.ciclo-meses { gap: 40px !important; }
.carregando, .erro-geral { color: var(--cor-topo, var(--tinta)); text-shadow: 0 0 12px var(--brilho-topo, transparent); }
@media (min-width: 901px) { .grade-ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; } .grade-ciclo > .largo { grid-column: 1 / -1; } }
.ciclo-principal .etiqueta { background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)); font-weight: 500; }

/* ---------- Hábitos: linhas mais firmes, últimos 7 dias, sugestões ---------- */
.item-habito { padding: 14px 6px !important; gap: 16px !important; border-bottom: 1px solid var(--borda-premium, rgba(0,0,0,.1)); border-radius: 0 !important; }
.lista-hoje .item-habito:last-child { border-bottom: 0; }
.item-habito .habito-nome { font-family: 'Pacifico', serif !important; font-weight: 400 !important; font-size: 21px !important; color: var(--tinta) !important; }
.habito-gatilho { font-family: 'Schibsted Grotesk', sans-serif !important; font-style: normal !important; font-size: 14px !important; color: color-mix(in srgb, var(--tinta) 72%, transparent) !important; }
.habito-detalhe, .sequencia { font-size: 13px !important; color: color-mix(in srgb, var(--tinta) 72%, transparent) !important; }
.habito-detalhe.forte { color: var(--tinta) !important; font-weight: 600 !important; }
.marcar-grande { width: 50px !important; height: 50px !important; border-width: 1.6px !important; border-color: var(--destaque) !important; color: var(--destaque) !important; }
.marcar-grande.feito { background: var(--destaque) !important; }
.marcar-num { color: var(--destaque) !important; }
.pontinhos span { background: color-mix(in srgb, var(--destaque) 20%, transparent) !important; }
.pontinhos span.cheio { background: var(--destaque) !important; }
.segmentos span { background: color-mix(in srgb, var(--destaque) 18%, transparent) !important; }
.segmentos span.cheio { background: var(--destaque) !important; }
.ultimos-dias { display: flex; gap: 5px; margin-left: auto; }
.ud { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)); display: flex; align-items: center; justify-content: center; }
.ud i { font-style: normal; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--tinta) 82%, transparent); font-variant-numeric: tabular-nums; }
.ud.cheio { background: var(--destaque); border-color: var(--destaque); }
.ud.cheio i { color: var(--destaque-texto, #fff); }
.ud.pulo { border-style: dashed; }
.ud.folga { border-color: transparent; }
.ud.hoje { border-color: var(--destaque); border-width: 1.5px; }
.grupo-periodo .cabecalho-cartao h2 { display: flex; align-items: center; gap: 10px; }
.icone-periodo { width: 26px !important; height: 26px !important; }
.grade-periodos { grid-template-columns: minmax(0, 1fr) !important; }
.sugestoes-habito { margin-top: 0; }
.modelo-habito { background: transparent !important; border: 1px solid var(--borda-premium, rgba(0,0,0,.14)) !important; border-radius: 10px !important; font-weight: 500 !important; color: var(--tinta) !important; }
.modelo-habito:hover { border-color: var(--destaque) !important; }
.titulo-habitos .mao { font-family: 'Schibsted Grotesk', sans-serif !important; font-style: normal !important; font-size: 16px !important; color: color-mix(in srgb, var(--tinta) 78%, transparent); }
/* cordão de luzinhas: os últimos 7 dias pendurados num fio; o dia feito acende na cor do hábito */
.cordao-luz { position: relative; gap: 0 !important; width: 330px; flex: none; justify-content: space-between; padding: 0 4px; }
.cordao-luz::before { content: ''; position: absolute; left: -6px; right: -6px; top: -2px; height: 16px; border-top: 2px solid color-mix(in srgb, var(--tinta) 55%, transparent); border-radius: 50% / 100% 100% 0 0; transform: scaleY(-1); pointer-events: none; }
.luz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 32px; }
.luz .bulbo { position: relative; width: 17px; height: 23px; margin-top: 14px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; background: color-mix(in srgb, var(--tinta) 10%, var(--cartao)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.07); transition: background .3s ease, box-shadow .3s ease; }
.luz .bulbo::before { content: ''; position: absolute; top: -6px; left: 50%; width: 9px; height: 7px; margin-left: -4.5px; border-radius: 2px; background: color-mix(in srgb, var(--tinta) 45%, #9a948a); }
.luz b { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--tinta) 80%, transparent); font-variant-numeric: tabular-nums; }
.luz.acesa .bulbo { background: radial-gradient(circle at 40% 30%, #fff 0 12%, var(--forte) 55%); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--forte) 45%, transparent), 0 0 3px var(--forte); }
.luz.pulo .bulbo { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--tinta) 12%, var(--cartao)) 0 3px, var(--cartao) 3px 6px); }
.luz.folga { opacity: .45; }
.luz.hoje b { color: var(--tinta); font-weight: 800; }
.luz.hoje .bulbo { outline: 1.5px dashed color-mix(in srgb, var(--forte) 70%, transparent); outline-offset: 3px; }
.efeitos-ativos .luz.acesa.hoje .bulbo { animation: luz-acende .8s ease-out; }
@keyframes luz-acende { 0% { box-shadow: 0 0 0 0 transparent; filter: brightness(1.6); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .efeitos-ativos .luz.acesa.hoje .bulbo { animation: none; } }
/* no celular e no tablet o cordão desce pra uma linha só dele, embaixo do nome */
@media (max-width: 1100px) {
  .lista-hoje .item-habito { flex-wrap: wrap; }
  .cordao-luz { order: 5; width: 100%; max-width: 380px; margin: 2px 0 0 !important; }
}
@media (max-width: 480px) { .cordao-luz { max-width: none; } .luz { width: 28px; } }
/* botão de acender a luz de hoje */
.botao-acender { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--forte); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 12px -8px var(--forte); transition: transform .15s ease; }
.botao-acender:active { transform: scale(.95); }
.botao-acender.acesa { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--forte) 70%, transparent); }
.botao-acender.acesa svg path { stroke: var(--forte); }
.botao-acender svg { width: 18px; height: 18px; }
.efeitos-ativos .botao-acender.pulou { animation: marcar-pula .6s cubic-bezier(.3, 1.6, .5, 1); }
.lista-hoje .item-habito-acoes { align-items: center; gap: 6px; }

/* topo das estéticas novas: tapete escuro pede letra clara; estampas claras e cheias pedem um brilho mais forte atrás da letra */
html body[data-tema="outono"] { --cor-topo: #FBF3E4; --brilho-topo: rgba(0, 0, 0, 0.55); }
html body:is([data-tema="piquenique"], [data-tema="invernal"], [data-tema="pomar"], [data-tema="confeitaria"], [data-tema="anos80"], [data-tema="luzinhas"], [data-tema="cerejinha"], [data-tema="raminhos"], [data-tema="parede"], [data-tema="riscado"], [data-tema="menta"]) { --brilho-topo: color-mix(in srgb, var(--cartao) 95%, transparent); }
/* estampas cheias: o menu do topo ganha uma faixa de papel por trás, pra nunca sumir na estampa */
html body:is([data-tema="piquenique"], [data-tema="invernal"], [data-tema="pomar"], [data-tema="confeitaria"], [data-tema="anos80"], [data-tema="luzinhas"], [data-tema="cerejinha"], [data-tema="raminhos"], [data-tema="parede"], [data-tema="riscado"], [data-tema="menta"], [data-tema="outono"]) .nav-topo {
  background: color-mix(in srgb, var(--cartao) 88%, transparent); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 22px -16px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html body:is([data-tema="piquenique"], [data-tema="invernal"], [data-tema="pomar"], [data-tema="confeitaria"], [data-tema="anos80"], [data-tema="luzinhas"], [data-tema="cerejinha"], [data-tema="raminhos"], [data-tema="parede"], [data-tema="riscado"], [data-tema="menta"], [data-tema="outono"]) .nav-topo .aba { color: var(--tinta) !important; text-shadow: none !important; }
html body:is([data-tema="piquenique"], [data-tema="invernal"], [data-tema="pomar"], [data-tema="confeitaria"], [data-tema="anos80"], [data-tema="luzinhas"], [data-tema="cerejinha"], [data-tema="raminhos"], [data-tema="parede"], [data-tema="riscado"], [data-tema="menta"], [data-tema="outono"]) .nav-topo .aba.ativa { color: var(--destaque) !important; }

/* faixa "sem internet": discreta, colada no topo, na cor do cartão */
.faixa-sem-rede {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto; padding: 9px 16px; max-width: 980px; border-radius: 0 0 14px 14px;
  background: var(--cartao); color: var(--tinta); font-size: 14px; line-height: 1.35;
  box-shadow: 0 1px 0 var(--borda-premium), 0 10px 22px -16px rgba(0, 0, 0, .5);
}
.faixa-sem-rede[hidden] { display: none; }
.faixa-sem-rede svg { flex: 0 0 auto; color: var(--destaque); }
.faixa-sem-rede em { font-style: normal; font-weight: 600; color: var(--destaque); }
.faixa-sem-rede .girando { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--destaque) 30%, transparent); border-top-color: var(--destaque); animation: girar-rede .8s linear infinite; }
@keyframes girar-rede { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .faixa-sem-rede { font-size: 13px; padding: 8px 12px; border-radius: 0; } }

/* ---------- Abas do topo em fita washi: cada aba é um pedaço de fita adesiva colado meio torto ----------
   As cores saem da estética (destaque misturado no cartão), então funciona nas 21. A aba aberta é a fita na cor cheia. */
html body header.barra-topo nav.nav-topo { gap: 10px 8px; margin-top: 6px; }
html body header.barra-topo nav.nav-topo .aba {
  --fita: color-mix(in srgb, var(--destaque) 26%, var(--cartao));
  --risca: color-mix(in srgb, var(--destaque) 38%, var(--cartao));
  position: relative; min-height: 32px !important; padding: 4px 17px !important; border-radius: 0 !important;
  color: var(--tinta) !important; opacity: 1 !important; text-shadow: none !important; text-decoration: none !important; font-weight: 500 !important;
  background: repeating-linear-gradient(45deg, var(--fita) 0 7px, var(--risca) 7px 9px) !important;
  /* pontas rasgadas */
  clip-path: polygon(0 6%, 3% 0, 6% 8%, 9% 0, 91% 0, 94% 7%, 97% 0, 100% 8%, 100% 92%, 97% 100%, 94% 93%, 91% 100%, 9% 100%, 6% 92%, 3% 100%, 0 94%);
  transform: rotate(-1.6deg); transition: transform .2s ease, filter .2s ease;
}
html body header.barra-topo nav.nav-topo .aba:nth-child(3n+2) {
  --fita: color-mix(in srgb, var(--destaque) 16%, var(--cartao));
  background: radial-gradient(circle, color-mix(in srgb, var(--destaque) 42%, var(--cartao)) 1.6px, transparent 2px) 0 0 / 9px 9px, var(--fita) !important;
  transform: rotate(1.4deg);
}
html body header.barra-topo nav.nav-topo .aba:nth-child(3n) {
  --fita: color-mix(in srgb, var(--destaque) 20%, var(--cartao));
  background: repeating-linear-gradient(90deg, var(--fita) 0 6px, color-mix(in srgb, var(--destaque) 30%, var(--cartao)) 6px 12px) !important;
  transform: rotate(-.6deg);
}
html body header.barra-topo nav.nav-topo .aba:hover { transform: rotate(0) translateY(-2px); filter: brightness(1.03); }
html body header.barra-topo nav.nav-topo .aba.ativa {
  background: repeating-linear-gradient(45deg, var(--destaque) 0 7px, color-mix(in srgb, var(--destaque) 86%, #000) 7px 9px) !important;
  color: var(--destaque-texto) !important; font-weight: 700 !important; transform: rotate(0) scale(1.06);
}
html body header.barra-topo nav.nav-topo .aba .bolinha { display: none !important; }
html body header.barra-topo nav.nav-topo .aba:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; clip-path: none; }
@media (prefers-reduced-motion: reduce) { html body header.barra-topo nav.nav-topo .aba { transition: none; } }

/* Pacifico (títulos) só tem um peso: nada de negrito falso nem letra apertada */
[style*="Pacifico"], h1, h2, h3, .planner-titulo, .titulo-marca { font-synthesis: none; }