/* ============================================================
   GUIFT, tema base (design system Apple).
   Um único azul interativo (Action Red), superfícies planas,
   tipografia SF Pro (Inter como substituto fora do ecossistema
   Apple), sem gradientes e sem sombras na interface.
   Carregado por último em todas as páginas.
   ============================================================ */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ── Tokens: claro (por defeito) ─────────────────────────── */
:root, :root[data-theme="light"] {
    color-scheme: light;

    /* Apple */
    --primary: #cc1417;
    --primary-focus: #e5252a;
    --primary-link: #cc1417;
    --on-primary: #ffffff;

    --bg: #f5f5f7;            /* parchment */
    --surface: #ffffff;       /* canvas */
    --surface-2: #f5f5f7;     /* controlos dentro de cartões */
    --line: #e0e0e0;          /* hairline */
    --text: #1d1d1f;          /* ink */
    --text-2: #333333;
    --muted: #6e6e73;
    --chip: #d2d2d7;

    /* Estado (apenas semântico; nunca decorativo) */
    --green: #1d8348; --amber: #a86a12; --danger: #d70015;
    --tint-green: #eaf6ee; --tint-green-line: #bfe0cd;
    --tint-amber: #fbf1dc; --tint-amber-line: #ecd6a2;
    --tint-danger: #fdecee; --tint-danger-line: #f3c2c8;
    --tint-primary: #fdecec; --tint-primary-line: #f5c2c3;
    --tint-purple: var(--surface-2); --tint-purple-line: var(--line);

    /* Compatibilidade com o CSS existente: o antigo "vermelho de marca" passa a ser o azul */
    --red: var(--primary); --red-hover: #a80f12; --red-text: var(--primary-link);
    --tint-red: var(--tint-primary); --tint-red-line: var(--tint-primary-line);
    --red-dim: var(--tint-primary); --red-border: var(--tint-primary-line);
    --card-bg: var(--surface); --border: var(--line); --faint: var(--surface-2);

    /* Navegação flutuante (parchment 80% + blur) */
    --nav-bg: rgba(245, 245, 247, 0.8); --nav-line: rgba(0, 0, 0, 0.08);
    --nav-icon: #1d1d1f; --nav-hover: rgba(0, 0, 0, 0.06);
    --header-bg: rgba(245, 245, 247, 0.8);

    --tile-dark: #272729;
    --font-num: 'Outfit', var(--font-display);
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;

    --primary: #cc1417;
    --primary-focus: #e5252a;
    --primary-link: #ff5a5f;  /* Sky Link Red: só em superfícies escuras */

    --bg: #000000;
    --surface: #0e0e10;       /* preto sólido */
    --surface-2: #1a1a1d;
    --line: #26262a;
    --text: #ffffff;
    --text-2: #e5e5e7;
    --muted: #a1a1a6;
    --chip: #d2d2d7;

    --green: #4cc38a; --amber: #e0a030; --danger: #ff6a6a;
    --tint-green: #16281f; --tint-green-line: #24523a;
    --tint-amber: #2a2312; --tint-amber-line: #54431a;
    --tint-danger: #2e1618; --tint-danger-line: #5c2a2f;
    --tint-primary: #2e1214; --tint-primary-line: #6b1f23;
    --red-hover: #a80f12;

    --nav-bg: rgba(14, 14, 16, 0.85); --nav-line: rgba(255, 255, 255, 0.1);
    --nav-icon: #ffffff; --nav-hover: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(0, 0, 0, 0.8);
}

/* Sem escolha guardada: segue o sistema */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
    color-scheme: dark;

    --primary: #cc1417;
    --primary-focus: #e5252a;
    --primary-link: #ff5a5f;  /* Sky Link Red: só em superfícies escuras */

    --bg: #000000;
    --surface: #0e0e10;       /* preto sólido */
    --surface-2: #1a1a1d;
    --line: #26262a;
    --text: #ffffff;
    --text-2: #e5e5e7;
    --muted: #a1a1a6;
    --chip: #d2d2d7;

    --green: #4cc38a; --amber: #e0a030; --danger: #ff6a6a;
    --tint-green: #16281f; --tint-green-line: #24523a;
    --tint-amber: #2a2312; --tint-amber-line: #54431a;
    --tint-danger: #2e1618; --tint-danger-line: #5c2a2f;
    --tint-primary: #2e1214; --tint-primary-line: #6b1f23;
    --red-hover: #a80f12;

    --nav-bg: rgba(14, 14, 16, 0.85); --nav-line: rgba(255, 255, 255, 0.1);
    --nav-icon: #ffffff; --nav-hover: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(0, 0, 0, 0.8);
}
}

/* ── Base ─────────────────────────────────────────────────── */
html, body, button, input, select, textarea { font-family: var(--font); }
body {
    background: var(--bg); color: var(--text);
    font-size: 17px; line-height: 1.47; letter-spacing: -0.374px;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.28px; color: var(--text); }
p { color: var(--text-2); }
a { color: var(--primary-link); }
:root { --focus-ring: 2px solid var(--primary-focus); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Sem pulsos decorativos */
.live-badge i, .btn-monitoring.active, .monitoring-status.on { animation: none !important; }

/* ── Cartões de página (login, registo, doar…): store-utility-card ── */
body > .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: none;
}
body > .card h1 { font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: 0.196px; color: var(--text); text-align: center; }
body > .card p, body > .card .card-desc { color: var(--muted); letter-spacing: -0.224px; }
.logo { filter: none !important; }

/* ── Campos: search-input (pill, 44px) ─────────────────────── */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),
select, textarea {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 9999px;
    min-height: 44px;
    padding: 12px 20px;
    font-size: 17px;
    letter-spacing: -0.374px;
}
body > .card input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]) { background: var(--surface-2); border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; }
input:focus, select:focus, textarea:focus { border-color: var(--primary-focus); box-shadow: 0 0 0 3px var(--tint-primary-line); background: var(--surface); }

/* ── Botões: pill azul (button-primary) ───────────────────── */
body > .card button:not(.btn-sec):not(.link-esqueci):not(.wallet-card):not([data-wallet]):not(.audio-rec-btn):not(.audio-rec-play-btn):not(.audio-rec-discard-btn):not(.btn-colar) {
    background: var(--primary); color: var(--on-primary);
    border: 1px solid transparent !important;
    border-radius: 9999px; padding: 11px 22px; min-height: 44px;
    font-size: 17px; font-weight: 400; letter-spacing: -0.374px;
    box-shadow: none; transition: transform .12s ease, background-color .15s ease;
}
body > .card button:not(.btn-sec):not(.link-esqueci):not([data-wallet]):not(.audio-rec-btn):not(.audio-rec-play-btn):not(.audio-rec-discard-btn):not(.btn-colar):hover { background: var(--red-hover); box-shadow: none; }
body > .card button:disabled { opacity: .45; cursor: not-allowed; }
body > .card .btn-sec {
    background: transparent; color: var(--primary-link);
    border: 1px solid var(--primary-link) !important; border-radius: 9999px;
    padding: 11px 22px; min-height: 44px; font-size: 17px; font-weight: 400; letter-spacing: -0.374px;
}
body > .card .btn-sec:hover { background: var(--tint-primary); color: var(--primary-link); }
body > .card .link-esqueci { color: var(--primary-link); font-size: 14px; letter-spacing: -0.224px; font-weight: 400; width: auto; min-height: 0; padding: 4px 8px; margin-top: -2px; }
body > .card .link-esqueci:hover { text-decoration: underline; color: var(--primary-link); background: none; }
button:active { transform: scale(0.95) !important; }

/* ── Estados de página: aviso/erro ─────────────────────────── */
.toast { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.toast.success { border-color: var(--tint-green-line); color: var(--green); }
.toast.error   { border-color: var(--tint-danger-line); color: var(--danger); }
.toast.warn    { border-color: var(--tint-amber-line); color: var(--amber); }

/* ============================================================
   Painel do streamer (dashboard, cashout, overlay studio)
   ============================================================ */
.header {
    background: var(--header-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line) !important;
    position: sticky; top: 0; z-index: 50;
}
.header h1 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; }
.live-badge { background: var(--primary) !important; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -0.12px; }
.tts-status { background: var(--tint-green); border-color: var(--tint-green-line); color: var(--green); }

/* Estatísticas: números grandes, cartões brancos */
.stat { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; padding: 16px 8px !important; }
.stat-label { font-size: 12px !important; letter-spacing: -0.12px; color: var(--muted); }
.stat-value { font-family: var(--font-display); font-size: 21px !important; font-weight: 600 !important; letter-spacing: 0.231px; color: var(--text) !important; }

/* Painéis e listas */
.link-box, .volume-panel, .tts-panel, .panel, .cashout-history-section, .co-modal, .card:not(body > .card) {
    background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: none;
}
.panel-header { border-bottom: 1px solid var(--line) !important; }
.panel-header h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.panel-header h2 i { color: var(--primary-link) !important; }
.donation-item { background: var(--surface-2) !important; border: 0 !important; border-radius: 14px !important; }
.donor-name { font-weight: 600; }
.donation-amount, .cashout-item-amount { color: var(--text) !important; font-weight: 600 !important; letter-spacing: -0.224px; }
.cashout-balance-card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; }
.cashout-balance-amount { color: var(--text) !important; font-family: var(--font-display); font-weight: 600 !important; letter-spacing: -0.28px; }
.cashout-balance-label i { color: var(--primary-link) !important; }
.link-row button, .btn-ler { background: var(--surface-2) !important; border: 0 !important; color: var(--primary-link) !important; border-radius: 9999px !important; }
.btn-ler.has-audio { background: var(--tint-primary) !important; color: var(--primary-link) !important; }
.link-row span { color: var(--text-2); }
.list::-webkit-scrollbar-thumb, #history-list::-webkit-scrollbar-thumb { background: var(--line); }

/* Botões secundários do painel: pill clara */
.btn-logout, .btn-clear, .btn-voice, .pwa-dismiss-btn, .ios-close {
    background: var(--surface-2) !important; border: 0 !important; color: var(--text-2) !important; border-radius: 9999px !important;
}
.btn-logout { padding: 8px 15px; font-size: 14px; font-weight: 400; letter-spacing: -0.224px; }
.btn-logout:hover { background: var(--chip) !important; color: #1d1d1f !important; }
.btn-clear { color: var(--danger) !important; }
.btn-voice.active { background: var(--tint-primary) !important; color: var(--primary-link) !important; }

/* Monitoramento: ação principal em pill azul */
.btn-monitoring { border-radius: 9999px !important; border: 0 !important; font-size: 17px; font-weight: 400; letter-spacing: -0.374px; min-height: 44px; }
.btn-monitoring.inactive { background: var(--primary) !important; color: #fff !important; }
.btn-monitoring.active { background: var(--surface-2) !important; color: var(--text) !important; }
.monitoring-status { font-size: 12px; letter-spacing: -0.12px; }
.monitoring-status.off { background: var(--surface-2); color: var(--muted); }
.monitoring-status.on { background: var(--tint-green); color: var(--green); border-color: var(--tint-green-line); }
.btn-solicitar-cashout, .btn-apply { background: var(--primary) !important; border: 0 !important; color: #fff !important; border-radius: 9999px !important; min-height: 44px; font-size: 17px !important; font-weight: 400 !important; letter-spacing: -0.374px; }
.btn-solicitar-cashout:hover:not(:disabled), .btn-apply:hover { background: var(--red-hover) !important; color: #fff !important; }

/* TTS */
.tts-label { color: var(--muted) !important; font-weight: 600; }
.btn-tts-mute, .btn-tts-power { background: var(--surface-2) !important; border: 0 !important; color: var(--text-2) !important; border-radius: 9999px !important; }
.btn-tts-power { color: var(--primary-link) !important; }
.btn-tts-mute.muted, .btn-tts-power.off { background: var(--tint-danger) !important; color: var(--danger) !important; }
.tts-queue-badge { background: var(--surface-2); border: 0; color: var(--text-2); }
.tts-wave { background: var(--primary-link); }
.tts-speaking-text { color: var(--primary-link); }
.tts-dot.speaking { background: var(--primary-link); }
.tts-dot.ready { background: var(--muted); }

/* Avatar */
.avatar-btn { background: var(--surface-2) !important; border: 2px solid var(--line) !important; color: var(--text) !important; }
.avatar-btn:hover { border-color: var(--primary-focus) !important; }
.avatar-remove:hover { background: var(--danger) !important; }

/* Alertas/toasts do painel */
.alerta { background: var(--surface) !important; border: 1px solid var(--line) !important; border-left: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: none; font-weight: 400; letter-spacing: -0.224px; }
.alerta.alerta-success { background: var(--tint-green) !important; border-color: var(--tint-green-line) !important; }
.alerta.alerta-error { background: var(--tint-danger) !important; border-color: var(--tint-danger-line) !important; }
.alerta.alerta-error::before { color: var(--danger); }
.alerta.alerta-warn { background: var(--tint-amber) !important; border-color: var(--tint-amber-line) !important; }
.support-btn { box-shadow: none; border: 0 !important; }

/* Cashout: estados */
.cashout-item { border-left: 0 !important; }
.status-badge { font-weight: 600; letter-spacing: -0.12px; font-size: 12px; }
.status-badge.recusado { background: var(--tint-danger); color: var(--danger); }
.cashout-item.recusado { border-left-color: var(--danger) !important; }
.cashout-item-reason { color: var(--danger) !important; }
.cashout-min-note, .info-tip { background: var(--tint-amber) !important; border-color: var(--tint-amber-line) !important; color: var(--amber) !important; }

/* Overlay studio (inline styles usam as mesmas variáveis) */
.btn-red { background: var(--primary) !important; border-color: transparent !important; color: #fff !important; border-radius: 9999px !important; }
.btn-red:hover { background: var(--red-hover) !important; color: #fff !important; }
.btn-violet, .btn-ghost { border-radius: 9999px !important; }
.hdr-badge { background: var(--tint-primary) !important; border-color: var(--tint-primary-line) !important; color: var(--primary-link) !important; }
.sw-track { background: var(--chip); }
.switch input:checked + .sw-track { background: var(--primary) !important; }
.pos-btn.active, .size-chip.active, .size-chip:hover, .tab.active { background: var(--tint-primary) !important; border-color: var(--primary-focus) !important; color: var(--primary-link) !important; }
.demo-btn-single { background: var(--tint-primary) !important; border-color: var(--tint-primary-line) !important; color: var(--primary-link) !important; }
.url-box, .finput, .fselect, .color-hex { background: var(--surface-2) !important; border-color: transparent !important; border-radius: 12px !important; }
.finput:focus, .fselect:focus, .color-hex:focus { border-color: var(--primary-focus) !important; }
.q-dot.err { background: var(--danger); }
.toast.err { border-color: var(--tint-danger-line); color: var(--danger); }
.toast.info { border-color: var(--line); color: var(--text-2); }
.preview-container { background: var(--surface-2) !important; border-color: transparent !important; }

/* Ajustes de layout (texto a 12px+ precisa de mais espaço) */
.audio-rec-row[hidden] { display: none; }
.vol-group { min-width: 100%; }
.monitoring-panel { flex-direction: column; align-items: stretch; gap: 8px; }
.monitoring-status { align-self: center; }
.filter-btn.active { background: var(--tint-primary) !important; border-color: var(--tint-primary-line) !important; color: var(--primary-link) !important; }
.cashout-history-title i, .co-field label i { color: var(--primary-link) !important; }

/* Números (valores, totais, estatísticas): Outfit, dígitos tabulares e sem tracking negativo */
.stat-value, .donation-amount, .cashout-balance-amount, .cashout-item-amount, .stage-total strong, .story-total strong, .don .amt b, .obs-pill b em {
    font-family: var(--font-num) !important;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0 !important;
    font-weight: 600;
}
.stat-value { font-size: 24px !important; }
.cashout-balance-amount { font-size: 40px; }