/* =============================================================
   Painel - complementos (rodada 3). Regras de fluidez: SEM backdrop-filter, SEM mix-blend-mode,
   so transform/opacity animando. Cores sempre por tokens (claro e escuro).
   ============================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- marca: API em destaque ---- */
.logo .wordmark { font-family: var(--f-ui); font-weight: 400; letter-spacing: -.02em; }
.logo .wordmark b { font-weight: 700; color: var(--accent-strong); }
.auth-art .logo .wordmark b { color: var(--panel-ink); }

/* ---- transicoes (150-350 ms, so transform/opacity) ---- */
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadein .26s var(--ease-out) both; }
.view-out { opacity: 0; transform: translateY(-6px); transition: opacity .12s ease, transform .12s ease; }
#app.lay-out { opacity: 0; transition: opacity .14s ease; }
#app.lay-in { animation: fadein .3s var(--ease-out) both; }
.banner-in { animation: fadein .3s var(--ease-out) both; margin: 12px 32px 0; }
@media (max-width: 900px) { .banner-in { margin: 10px 16px 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
.modal-backdrop { transition: opacity .2s ease; }
.toast { transition: transform .3s var(--ease-out), opacity .3s; }
.panel-topbar { background: var(--glass-2); }
.scrim { background: rgba(20, 12, 0, .55); }
@media (prefers-reduced-motion: reduce) {
  .fade-in, #app.lay-in, .banner-in, .view-in, .view-in > * { animation: none !important; }
  .view-out, #app.lay-out { transition: none; opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .hive, .honey-grid i, .bal-hero .hx-deco, .pulse-dot { animation: none !important; }
}

/* ---- navegacao ---- */
.nav-group { font-family: var(--f-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); padding: 14px 14px 4px; }
.sidebar .nav-group { color: rgba(255, 244, 219, .45); }
.sidebar nav a { transition: background .15s, color .15s, transform .15s; }
.sidebar nav a:hover { transform: translateX(2px); }

/* ---- abas ---- */
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: var(--pill); background: var(--bg-2); width: fit-content; max-width: 100%; margin-bottom: 18px; overflow-x: auto; }
.tabx { font: inherit; font-family: var(--f-ui); font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: var(--pill); border: 0; background: transparent; color: var(--text-soft); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; }
.tabx:hover { color: var(--ink); }
.tabx[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--sh-sm); }
.tabx:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tabbody { display: flex; flex-direction: column; gap: 16px; }

/* ---- formularios ---- */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; }
.pw-bars { display: flex; gap: 4px; flex: 1; max-width: 160px; }
.pw-bars i { flex: 1; height: 5px; border-radius: 4px; background: var(--line-2); transition: background .25s, transform .25s; transform-origin: left; transform: scaleX(.6); }
.pw-meter[data-s="1"] .pw-bars i:nth-child(-n+1) { background: var(--bad); transform: none; }
.pw-meter[data-s="2"] .pw-bars i:nth-child(-n+2) { background: var(--warn); transform: none; }
.pw-meter[data-s="3"] .pw-bars i:nth-child(-n+3) { background: var(--honey-2); transform: none; }
.pw-meter[data-s="4"] .pw-bars i { background: var(--good); transform: none; }
.pw-lbl { font-size: 12.5px; color: var(--text-soft); font-family: var(--f-ui); }
.btn.danger-txt, .danger-txt { color: var(--bad); }
textarea { font-family: inherit; }
.form-group select, select.sel { min-height: 44px; }

/* ---- Turnstile ---- */
.ts-box:empty { display: none; }
.ts-wrap { display: flex; flex-direction: column; gap: 8px; }
.ts-widget { min-height: 65px; border-radius: var(--r-sm); position: relative; }
.ts-widget.ts-loading::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); background: var(--bg-2); animation: pulse-o 1.2s ease-in-out infinite; }
@keyframes pulse-o { 50% { opacity: .45; } }
.ts-row { display: flex; align-items: center; gap: 12px; min-height: 20px; }
.ts-status { font-size: 12.5px; color: var(--text-mute); }
.ts-box[data-state="error"] .ts-status, .ts-box[data-state="expired"] .ts-status { color: var(--bad); }
.ts-fake { padding: 18px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-family: var(--f-ui); }

/* ---- recarga ---- */
.countdown { display: flex; flex-direction: column; gap: 8px; }
.cd-bar { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(1); transition: transform 1s linear; border-radius: 6px; }
.qr img { display: block; width: 100%; height: auto; border-radius: 8px; }
.receipt { width: 100%; max-width: 440px; margin: 8px auto; padding: 18px; border-radius: var(--r); background: var(--bg-2); text-align: left; }
.rc-h { display: flex; justify-content: space-between; margin-bottom: 10px; }
.paid .tick::after { content: ""; }
@media print { body * { visibility: hidden; } #receipt, #receipt * { visibility: visible; } #receipt { position: absolute; inset: 0 auto auto 0; background: #fff; color: #000; } }

/* ---- planos ---- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); transition: transform .2s var(--ease-out), box-shadow .2s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh), inset 0 0 0 1px var(--accent); }
.plan.hl { box-shadow: var(--sh), inset 0 0 0 2px var(--accent); }
.plan.cur { background: var(--accent-soft); }
.plan-tag { position: absolute; top: -11px; left: 20px; font-family: var(--f-ui); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 12px; border-radius: var(--pill); background: var(--accent); color: #2A1A00; }
.plan h3 { font-size: 20px; }
.plan-price .big { font-family: var(--f-ui); font-size: 28px; letter-spacing: -.03em; font-weight: 500; }
.plan-cred { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--accent-strong); font-size: 14px; }
.plan-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: 14px; color: var(--text-soft); }
.plan-feat li { display: flex; gap: 8px; align-items: flex-start; }
.plan-feat .ico { color: var(--good); margin-top: 2px; }
.sub-card.sub-bad { box-shadow: var(--sh-sm), inset 0 0 0 1.5px var(--bad); }

/* ---- suporte ---- */
.thread { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: var(--r); background: var(--bg-2); animation: fadein .26s var(--ease-out) both; }
.msg.me { align-self: flex-end; background: var(--accent-soft); }
.msg.staff { align-self: flex-start; }
.msg.note { align-self: stretch; max-width: none; background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
.msg-h { display: flex; gap: 12px; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
@media (max-width: 640px) { .msg { max-width: 94%; } }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 4px; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--f-ui); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--accent-strong); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 10px 0 0; color: var(--text-soft); }
.faq summary::-webkit-details-marker { display: none; }

/* ---- workflows ---- */
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.wf { gap: 10px; display: flex; flex-direction: column; }
.wf h3 { font-size: 16px; line-height: 1.3; }

/* ---- kpi / graficos ---- */
.kpi .value { font-size: clamp(22px, 2.6vw, 30px); }
.kpi.pos .value { color: var(--good); } .kpi.neg .value { color: var(--bad); }
.kpi .sub { display: block; }
.linechart { position: relative; }
.ch-box { position: relative; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-xl { fill: var(--text-mute); font-size: 11px; font-family: var(--f-ui); }
.ch-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ch-line.c0, .ch-dot.c0 { stroke: var(--accent); } .ch-dot.c0 { fill: var(--accent); }
.ch-line.c1, .ch-dot.c1 { stroke: var(--info); } .ch-dot.c1 { fill: var(--info); }
.ch-line.c2, .ch-dot.c2 { stroke: var(--good); } .ch-dot.c2 { fill: var(--good); }
.ch-line.c3, .ch-dot.c3 { stroke: var(--bad); } .ch-dot.c3 { fill: var(--bad); }
.ch-area.c0 { fill: var(--accent); opacity: .14; }
.ch-dot { stroke: var(--paper); stroke-width: 2; }
.ch-guide { stroke: var(--text-mute); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-s { animation: fadein .55s var(--ease-out) both; }
.ch-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; padding: 8px 12px; border-radius: var(--r-sm); background: var(--night); color: var(--on-night); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--sh); white-space: nowrap; will-change: transform; }
.ch-tip[hidden] { display: none; }
.ch-tip .tl { display: flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.lg.c1 { background: var(--info); } .lg.c2 { background: var(--good); } .lg.c3 { background: var(--bad); }
.ch-legend { margin-bottom: 6px; } .ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.linechart:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hb-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 5px; }
.hb-t { height: 10px; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.hb-f { display: block; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--honey-1), var(--honey-2)); transform-origin: left; animation: hb-in .7s var(--ease-out) both; }
@keyframes hb-in { from { transform: scaleX(0); } }
.hb-f[style*="width"] { }

/* ---- estados ---- */
.empty-state.soft { opacity: .95; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 12px; text-align: center; }
.skeleton { position: relative; overflow: hidden; }
@media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabbar { width: 100%; } }
@media (max-width: 400px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.toolbar .sel { max-width: 100%; }