/* ============ DESIGN TOKENS ============ */:root {
       color-scheme: dark;
       /* Accent (W-STUDIO VOICES: roxo neon + prata) */
       --gold: #9b4dff;
       --gold-light: #d7c4ff;
       --gold-dark: #5f18d6;
       --gold-glow: rgba(155, 77, 255, 0.34);
       --gold-gradient: linear-gradient(135deg, #5f18d6 0%, #9b4dff 45%, #d8d8dc 100%);
       
       /* Gradient Themes */
       --gradient-bg: linear-gradient(135deg, #4d12b8 0%, #9b4dff 52%, #d8d8dc 100%);

       /* Base (azul escuro + branco gelo) */
       --bg-primary: #030304;
       --bg-secondary: #09090d;
       --bg-tertiary: #121018;
       --bg-card: rgba(12, 11, 18, 0.84);
       --bg-hover: rgba(155, 77, 255, 0.11);
       --text-primary: #f3f3f6;
       --text-secondary: #c9c4d2;
       --text-muted: #8f879d;
       --border: rgba(216, 216, 220, 0.13);
       --border-gold: rgba(155, 77, 255, 0.40);
       --success: #34d399;
       --error: #f87171;
       --warning: #fbbf24;
       --info: #60a5fa;
       --sidebar-w: 260px;
       --settings-w: 380px;
       --topbar-h: 60px;
       --radius: 12px;
       --radius-sm: 8px;
       --radius-lg: 16px;
       --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
       --shadow-gold: 0 0 28px rgba(155, 77, 255, 0.28);
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       --font: 'Inter', -apple-system, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
       color-scheme: light;
       --bg-primary: #f3f8ff;
       --bg-secondary: #ffffff;
       --bg-tertiary: #e9f1ff;
       --bg-card: rgba(255, 255, 255, 0.92);
       --bg-hover: rgba(29, 78, 216, 0.08);
       --text-primary: #0b1430;
       --text-secondary: #233b6a;
       --text-muted: #5873a6;
       --border: rgba(11, 20, 48, 0.12);
       --shadow: 0 4px 24px rgba(11, 20, 48, 0.10);
}

/* ============ GRADIENT THEMES (OVERRIDE ALL) ============ */
body[data-gradient="purple"],
body[data-gradient="purple"][data-theme="dark"],
body[data-gradient="purple"][data-theme="light"] {
       --bg-primary: linear-gradient(135deg, #0d0221 0%, #1a0d2e 25%, #2d1b3d 50%, #3d2550 75%, #4d2f63 100%) !important;
       --bg-secondary: linear-gradient(135deg, #1a0d2e 0%, #2d1b3d 33%, #3d2550 66%, #4d2f63 100%) !important;
       --bg-tertiary: linear-gradient(135deg, #2d1b3d 0%, #3d2550 50%, #4d2f63 100%) !important;
       --bg-card: linear-gradient(135deg, rgba(45, 27, 61, 0.85) 0%, rgba(61, 37, 80, 0.90) 50%, rgba(77, 47, 99, 0.95) 100%) !important;
       --bg-hover: linear-gradient(135deg, rgba(156, 39, 176, 0.12) 0%, rgba(206, 147, 216, 0.08) 100%);
       --text-primary: #f3e5f5 !important;
       --text-secondary: #ce93d8 !important;
       --text-muted: #ba68c8 !important;
       --border: rgba(206, 147, 216, 0.15);
       --border-gold: rgba(206, 147, 216, 0.35);
       --gold: #ce93d8 !important;
       --gold-light: #e1bee7 !important;
       --gold-dark: #9c27b0 !important;
       --gold-glow: rgba(206, 147, 216, 0.35);
       --gold-gradient: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 25%, #ba68c8 50%, #ce93d8 75%, #e1bee7 100%) !important;
}

body[data-gradient="green"],
body[data-gradient="green"][data-theme="dark"],
body[data-gradient="green"][data-theme="light"] {
       --bg-primary: linear-gradient(135deg, #051008 0%, #0f1f14 25%, #1b2e1f 50%, #243d2a 75%, #2d4d35 100%) !important;
       --bg-secondary: linear-gradient(135deg, #0f1f14 0%, #1b2e1f 33%, #243d2a 66%, #2d4d35 100%) !important;
       --bg-tertiary: linear-gradient(135deg, #1b2e1f 0%, #243d2a 50%, #2d4d35 100%) !important;
       --bg-card: linear-gradient(135deg, rgba(27, 46, 31, 0.85) 0%, rgba(36, 61, 42, 0.90) 50%, rgba(45, 77, 53, 0.95) 100%) !important;
       --bg-hover: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(129, 199, 132, 0.08) 100%);
       --text-primary: #e8f5e9 !important;
       --text-secondary: #a5d6a7 !important;
       --text-muted: #81c784 !important;
       --border: rgba(129, 199, 132, 0.15);
       --border-gold: rgba(129, 199, 132, 0.35);
       --gold: #81c784 !important;
       --gold-light: #a5d6a7 !important;
       --gold-dark: #4caf50 !important;
       --gold-glow: rgba(129, 199, 132, 0.35);
       --gold-gradient: linear-gradient(135deg, #2e7d32 0%, #4caf50 25%, #66bb6a 50%, #81c784 75%, #a5d6a7 100%) !important;
}

body[data-gradient="gold"],
body[data-gradient="gold"][data-theme="dark"],
body[data-gradient="gold"][data-theme="light"] {
       --bg-primary: linear-gradient(135deg, #0f0c06 0%, #1f1810 25%, #2e2416 50%, #3d311d 75%, #4d3e24 100%) !important;
       --bg-secondary: linear-gradient(135deg, #1f1810 0%, #2e2416 33%, #3d311d 66%, #4d3e24 100%) !important;
       --bg-tertiary: linear-gradient(135deg, #2e2416 0%, #3d311d 50%, #4d3e24 100%) !important;
       --bg-card: linear-gradient(135deg, rgba(46, 36, 22, 0.85) 0%, rgba(61, 49, 29, 0.90) 50%, rgba(77, 62, 36, 0.95) 100%) !important;
       --bg-hover: linear-gradient(135deg, rgba(249, 168, 37, 0.12) 0%, rgba(255, 215, 0, 0.08) 100%);
       --text-primary: #fffbea !important;
       --text-secondary: #ffe082 !important;
       --text-muted: #ffd54f !important;
       --border: rgba(255, 215, 0, 0.15);
       --border-gold: rgba(255, 215, 0, 0.35);
       --gold: #ffd700 !important;
       --gold-light: #ffecb3 !important;
       --gold-dark: #f9a825 !important;
       --gold-glow: rgba(255, 215, 0, 0.35);
       --gold-gradient: linear-gradient(135deg, #b8860b 0%, #daa520 25%, #f9a825 50%, #ffd700 75%, #ffecb3 100%) !important;
}

body[data-gradient="ice"],
body[data-gradient="ice"][data-theme="dark"],
body[data-gradient="ice"][data-theme="light"] {
       --bg-primary: linear-gradient(135deg, #d5dce5 0%, #e0e7f0 25%, #e8eef5 50%, #f0f4f8 75%, #f5f7fa 100%) !important;
       --bg-secondary: linear-gradient(135deg, #e8eef5 0%, #f0f4f8 33%, #f5f7fa 66%, #ffffff 100%) !important;
       --bg-tertiary: linear-gradient(135deg, #f5f7fa 0%, #ffffff 50%, #f8f9fb 100%) !important;
       --bg-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.97) 50%, rgba(240, 244, 248, 0.98) 100%) !important;
       --bg-hover: linear-gradient(135deg, rgba(92, 107, 192, 0.10) 0%, rgba(92, 107, 192, 0.06) 100%);
       --text-primary: #1a237e !important;
       --text-secondary: #3949ab !important;
       --text-muted: #5c6bc0 !important;
       --border: rgba(26, 35, 126, 0.15);
       --border-gold: rgba(92, 107, 192, 0.35);
       --gold: #5c6bc0 !important;
       --gold-light: #9fa8da !important;
       --gold-dark: #3949ab !important;
       --gold-glow: rgba(92, 107, 192, 0.35);
       --gold-gradient: linear-gradient(135deg, #303f9f 0%, #3949ab 25%, #5c6bc0 50%, #7986cb 75%, #9fa8da 100%) !important;
       --shadow: 0 4px 24px rgba(26, 35, 126, 0.12) !important;
}

body[data-gradient="blue"],
body[data-gradient="blue"][data-theme="dark"],
body[data-gradient="blue"][data-theme="light"] {
       --bg-primary: radial-gradient(circle at 50% -10%, rgba(155, 77, 255, 0.28) 0%, rgba(3, 3, 4, 0.90) 34%, #030304 72%) !important;
       --bg-secondary: linear-gradient(145deg, #050507 0%, #0b0910 48%, #111018 100%) !important;
       --bg-tertiary: linear-gradient(145deg, #0f0d15 0%, #171220 55%, #211733 100%) !important;
       --bg-card: linear-gradient(145deg, rgba(12, 11, 18, 0.88) 0%, rgba(18, 14, 28, 0.92) 52%, rgba(31, 22, 49, 0.88) 100%) !important;
       --bg-hover: linear-gradient(135deg, rgba(155, 77, 255, 0.16) 0%, rgba(216, 216, 220, 0.06) 100%);
       --text-primary: #f3f3f6 !important;
       --text-secondary: #c9c4d2 !important;
       --text-muted: #8f879d !important;
       --border: rgba(216, 216, 220, 0.14);
       --border-gold: rgba(155, 77, 255, 0.42);
       --gold: #9b4dff !important;
       --gold-light: #d7c4ff !important;
       --gold-dark: #5f18d6 !important;
       --gold-glow: rgba(155, 77, 255, 0.36);
       --gold-gradient: linear-gradient(135deg, #5f18d6 0%, #8d2cff 44%, #d8d8dc 100%) !important;
}
/* ============ RESET & BASE ============ */*,*::before,*::after {
        box-sizing: border-box;
       margin: 0;
       padding: 0
}
html {
        font-size: 14px;
       scroll-behavior: smooth
}
body {
        font-family: var(--font);
       background: var(--bg-primary);
       color: var(--text-primary);
       overflow: hidden;
       height: 100vh;
       -webkit-font-smoothing: antialiased
}

/* Force text colors to adapt to theme */
h1, h2, h3, h4, h5, h6 {
       color: var(--text-primary);
}

p, span, div, label {
       color: inherit;
}
.hidden {
        display: none !important
}
.clone-workspace-tabs {
        display: flex;
        gap: 8px;
        margin: 18px 0 16px;
        padding: 4px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm)
}
.clone-workspace-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        min-height: 42px;
        padding: 0 12px;
        border-radius: 6px;
        color: var(--text-secondary);
        transition: var(--transition)
}
.clone-workspace-tab .material-icons-round {
        font-size: 19px
}
.clone-workspace-tab.active {
        background: rgba(236, 72, 153, 0.16);
        color: var(--text-primary);
        box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.30)
}
.clone-workspace-panel {
        margin-top: 12px
}
.audio-cut-card {
        display: grid;
        gap: 14px;
        padding: 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm)
}
.audio-cut-header {
        display: flex;
        align-items: flex-start;
        gap: 12px
}
.audio-cut-header > .material-icons-round {
        color: #ec4899;
        font-size: 28px
}
.audio-cut-header strong {
        display: block;
        color: var(--text-primary);
        margin-bottom: 4px
}
.audio-cut-header p,
.audio-cut-status {
        color: var(--text-muted);
        line-height: 1.45
}
.audio-cut-zone {
        margin-top: 0
}
.audio-cut-status {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card)
}
.audio-cut-status.success {
        color: var(--success);
        border-color: rgba(52, 211, 153, 0.34)
}
.audio-cut-status.error {
        color: var(--error);
        border-color: rgba(248, 113, 113, 0.34)
}
.audio-cut-preview {
        width: 100%
}
@media (max-width: 768px) {
        .clone-workspace-tabs {
                margin-top: calc(var(--topbar-h) + 56px)
        }
}
.gold {
        color: var(--gold)
}
a {
        text-decoration: none;
       color: inherit
}
button {
        cursor: pointer;
       border: none;
       background: none;
       font-family: inherit;
       color: inherit
}
input,textarea,select {
        font-family: inherit;
       color: var(--text-primary)
}
::selection {
        background: var(--gold);
       color: #000
}
::-webkit-scrollbar {
        width: 6px
}
::-webkit-scrollbar-track {
        background: transparent
}
::-webkit-scrollbar-thumb {
        background: var(--text-muted);
       border-radius: 3px
}
::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary)
}
/* ============ AUTH OVERLAY ============ */.auth-overlay {
        position: fixed;
       inset: 0;
       z-index: 1000;
       display: block;
       justify-content: center;
       background: #050607;
       overflow-y: auto;
       overflow-x: hidden;
       height: 100vh
}
.auth-bg-effects {
        position: absolute;
       inset: 0;
       overflow: hidden;
       pointer-events: none;
       background-image:
         linear-gradient(rgba(0, 174, 255, 0.045) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0, 174, 255, 0.045) 1px, transparent 1px);
       background-size: 80px 80px;
       mask-image: radial-gradient(circle at 50% 15%, #000 0%, rgba(0,0,0,0.72) 48%, transparent 86%)
}
.auth-bg-effects::before {
       content: '';
       position: absolute;
       inset: 0;
       background:
         radial-gradient(circle at 12% 32%, rgba(0, 174, 255, 0.38) 0 3px, transparent 4px),
         radial-gradient(circle at 26% 12%, rgba(0, 174, 255, 0.28) 0 4px, transparent 5px),
         radial-gradient(circle at 58% 18%, rgba(0, 174, 255, 0.32) 0 3px, transparent 4px),
         radial-gradient(circle at 78% 34%, rgba(0, 174, 255, 0.30) 0 3px, transparent 4px),
         radial-gradient(circle at 92% 54%, rgba(0, 174, 255, 0.36) 0 4px, transparent 5px),
         radial-gradient(circle at 16% 76%, rgba(0, 174, 255, 0.26) 0 3px, transparent 4px),
         radial-gradient(circle at 48% 64%, rgba(0, 174, 255, 0.32) 0 4px, transparent 5px),
         radial-gradient(circle at 71% 82%, rgba(0, 174, 255, 0.30) 0 3px, transparent 4px);
       opacity: .75;
}
.auth-orb {
        position: absolute;
       border-radius: 50%;
       filter: blur(80px);
       opacity: 0.4;
       animation: orbFloat 8s ease-in-out infinite
}
.auth-orb-1 {
        width: 400px;
       height: 400px;
       background: var(--gold);
       top: -100px;
       left: -100px
}
.auth-orb-2 {
        width: 300px;
       height: 300px;
       background: var(--gold-dark);
       bottom: -50px;
       right: -50px;
       animation-delay: -3s
}
.auth-orb-3 {
        width: 200px;
       height: 200px;
       background: var(--gold-light);
       top: 50%;
       left: 50%;
       animation-delay: -5s
}
.studio-portal {
       --portal-x: 50%;
       --portal-y: 42%;
       --portal-hue: 270;
       position: relative;
       z-index: 2;
       min-height: 100vh;
       display: flex;
       align-items: flex-start;
       justify-content: center;
       overflow: hidden;
       color: #f7f4ff;
       padding: 24px 20px 36px;
       font-family: 'Poppins', 'Inter', Arial, sans-serif;
       background:
         radial-gradient(circle at var(--portal-x) var(--portal-y), hsla(var(--portal-hue), 96%, 58%, .28), transparent 23rem),
         radial-gradient(circle at 15% 18%, rgba(123, 60, 255, .22), transparent 28rem),
         radial-gradient(circle at 82% 80%, rgba(22, 174, 248, .14), transparent 30rem),
         #030304;
       transition: background .45s ease;
}
.studio-portal::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image:
         linear-gradient(rgba(155, 77, 255, .055) 1px, transparent 1px),
         linear-gradient(90deg, rgba(155, 77, 255, .055) 1px, transparent 1px);
       background-size: 74px 74px;
       mask-image: radial-gradient(circle at 50% 38%, #000 0%, rgba(0,0,0,.74) 52%, transparent 88%);
       pointer-events: none;
}
.studio-portal::after {
       content: '';
       position: absolute;
       width: 36rem;
       height: 36rem;
       left: calc(var(--portal-x) - 18rem);
       top: calc(var(--portal-y) - 18rem);
       border-radius: 50%;
       background: radial-gradient(circle, hsla(var(--portal-hue), 100%, 64%, .16), transparent 62%);
       filter: blur(18px);
       opacity: .9;
       pointer-events: none;
       transition: left .12s ease, top .12s ease, background .35s ease;
}
.portal-shell {
       position: relative;
       z-index: 1;
       width: min(1320px, 100%);
       min-height: calc(100vh - 60px);
       display: flex;
       flex-direction: column;
}
.portal-header {
       height: 74px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid rgba(255,255,255,.08);
       padding: 0 2px;
}
.portal-main {
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
       text-align: center;
       padding: 48px 0 0;
}
.portal-kicker {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 9px 16px;
       border: 1px solid rgba(155, 77, 255, .42);
       background: rgba(155, 77, 255, .09);
       color: #c9a9ff;
       border-radius: 999px;
       font-size: .78rem;
       font-weight: 900;
       letter-spacing: .08em;
       text-transform: uppercase;
       box-shadow: 0 0 32px rgba(155, 77, 255, .14);
}
.portal-kicker > span:first-child {
       flex: 0 0 auto;
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #a855f7;
       box-shadow: 0 0 18px #a855f7;
}
.portal-main h1 {
       position: relative;
       overflow: hidden;
       margin: 26px 0 16px;
       font-family: 'Poppins', 'Inter', Arial Black, Arial, sans-serif;
       width: 100%;
       font-size: clamp(3.8rem, 6.35vw, 6.35rem);
       line-height: .88;
       letter-spacing: -.026em;
       font-weight: 900;
       text-shadow: 0 0 32px rgba(168,85,247,.18);
}
.portal-main h1::after {
       content: '';
       position: absolute;
       top: -20%;
       bottom: -20%;
       left: -28%;
       width: 12%;
       transform: skewX(-18deg);
       background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), rgba(168,85,247,.24), transparent);
       filter: blur(8px);
       opacity: .78;
       mix-blend-mode: screen;
       animation: portalTitleWave 3.4s ease-in-out infinite;
       pointer-events: none;
}
.portal-main h1 strong {
       color: #a855f7;
       text-shadow: 0 0 34px rgba(168, 85, 247, .30);
}
.portal-main p {
       max-width: 980px;
       color: #efeaff;
       font-family: 'Poppins', 'Arial Black', Arial, sans-serif;
       font-size: clamp(1.04rem, 1.2vw, 1.28rem);
       font-weight: 700;
       line-height: 1.72;
       margin: 0 auto;
       text-shadow: 0 0 24px rgba(168,85,247,.16);
}
.portal-instruction {
       margin-top: 16px !important;
       color: #f4efff !important;
       font-weight: 900;
}
.studio-card-grid {
       width: 100%;
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 24px;
       margin-top: 38px;
}
.studio-area-card {
       position: relative;
       min-height: 385px;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-end;
       text-align: left;
       padding: 34px;
       border-radius: 24px;
       border: 1px solid rgba(255,255,255,.11);
       background:
         radial-gradient(circle at 22% 0%, rgba(255,255,255,.12), transparent 34%),
         linear-gradient(145deg, rgba(18, 12, 31, .92), rgba(6, 6, 9, .90));
       color: #f7f4ff;
       overflow: hidden;
       box-shadow: 0 30px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
       transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, filter .28s ease;
}
.studio-area-card::before {
       content: '';
       position: absolute;
       inset: -1px;
       background: linear-gradient(115deg, transparent 0 22%, rgba(255,255,255,.34) 36%, transparent 50% 100%);
       transform: translateX(-120%);
       transition: transform .75s ease;
       pointer-events: none;
       opacity: .38;
}
.studio-area-card::after {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 12%), rgba(168,85,247,.34), transparent 32%);
       opacity: .72;
       pointer-events: none;
}
.studio-area-card:hover {
       transform: translateY(-8px);
       border-color: rgba(168,85,247,.58);
       box-shadow: 0 34px 110px rgba(93, 35, 180, .42), 0 0 48px rgba(168,85,247,.22);
}
.studio-area-card:hover::before {
       transform: translateX(120%);
}
.studio-area-card.is-active {
       cursor: pointer;
       border-color: rgba(22,174,248,.38);
       background:
         radial-gradient(circle at 28% 0%, rgba(22,174,248,.20), transparent 35%),
         linear-gradient(145deg, rgba(21, 11, 44, .96), rgba(4, 25, 38, .88));
}
.studio-area-card.is-soon {
       cursor: default;
}
.area-status {
       position: absolute;
       top: 22px;
       right: 22px;
       z-index: 3;
       padding: 11px 16px;
       border-radius: 999px;
       border: 1px solid rgba(255,255,255,.16);
       background: rgba(255,255,255,.07);
       color: #d9ccff;
       font-size: .88rem;
       font-weight: 900;
       text-transform: uppercase;
       letter-spacing: .08em;
}
.studio-area-card.is-active .area-status {
       color: #03131b;
       background: linear-gradient(100deg, #22c7ff, #a855f7, #22c7ff);
       background-size: 220% 100%;
       border-color: transparent;
       box-shadow: 0 0 28px rgba(34,199,255,.32), 0 0 32px rgba(168,85,247,.22);
       animation: accessWave 2.6s linear infinite;
}
.area-icon {
       position: relative;
       z-index: 2;
       width: 62px;
       height: 62px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 26px;
       border-radius: 17px;
       background: rgba(155,77,255,.18);
       border: 1px solid rgba(155,77,255,.32);
       box-shadow: 0 0 30px rgba(155,77,255,.18);
}
.area-icon .material-icons-round {
       font-size: 32px;
       color: #c084fc;
}
.studio-area-card.is-active .area-icon {
       background: rgba(22,174,248,.16);
       border-color: rgba(22,174,248,.34);
}
.studio-area-card.is-active .area-icon .material-icons-round {
       color: #38bdf8;
}
.studio-area-card h2,
.studio-area-card p {
       position: relative;
       z-index: 2;
}
.studio-area-card h2 {
       font-size: clamp(1.75rem, 1.8vw, 2.15rem);
       line-height: 1.08;
       letter-spacing: -.045em;
       margin-bottom: 12px;
}
.studio-area-card p {
       color: #b9b0c9;
       font-family: 'Inter', Arial, sans-serif;
       font-size: 1.04rem;
       line-height: 1.62;
}
@keyframes portalTitleWave {
       0%, 18% { left: -34%; opacity: 0; }
       34% { opacity: .85; }
       62%, 100% { left: 112%; opacity: 0; }
}
@keyframes accessWave {
       0% { background-position: 0% 50%; }
       100% { background-position: 220% 50%; }
}
.brand-orbit,
.prompt-rain {
       position: absolute;
       inset: 0;
       z-index: 1;
       pointer-events: none;
       overflow: hidden;
}
.prompt-rain {
       transform: translate(var(--push-x, 0px), var(--push-y, 0px));
       transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.voice-logo,
.social-logo {
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 105px;
       height: 105px;
       border-radius: 30px;
       font-family: 'Poppins', Arial Black, Arial, sans-serif;
       font-weight: 900;
       font-size: 1.72rem;
       box-shadow: 0 30px 64px rgba(0,0,0,.50), 0 0 34px rgba(168,85,247,.18), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -18px 36px rgba(0,0,0,.30);
       transform-style: preserve-3d;
       opacity: .72;
       animation: none;
       filter: saturate(1.12) contrast(1.08);
       text-shadow: 0 3px 0 rgba(0,0,0,.18), 0 0 22px rgba(255,255,255,.20);
       will-change: transform, left, top;
}
.eleven-logo {
       top: 50px;
       left: 54px;
       background: linear-gradient(145deg, #ffffff, #d7d2ea);
       color: #050505;
}
.minimax-logo {
       top: 28px;
       right: 20px;
       background: linear-gradient(135deg, #7c3cff, #ff4fd8);
       color: #fff;
       animation-delay: .45s, 10.45s;
}
.edge-logo {
       top: 178px;
       right: 52px;
       background: linear-gradient(135deg, #12d6ff, #22c55e);
       color: #00151b;
       font-size: 2.9rem;
}
.social-logo {
       width: 98px;
       height: 98px;
       font-size: 1.62rem;
       color: #fff;
}
.social-logo.tk { top: 34px; left: 24px; background:#050505; border:1px solid rgba(255,255,255,.22); }
.social-logo.yt { top: 34px; right: 18px; background:linear-gradient(145deg,#ff0033,#9b001f); }
.social-logo.ig { top: 152px; left: 112px; background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.social-logo.fb { top: 202px; right: 100px; background:linear-gradient(145deg,#1877f2,#063b94); }
.social-logo.sh { top: 232px; right: 12px; background:linear-gradient(135deg,#22c55e,#06b6d4); }
.studio-area-card:hover .prompt-rain {
       transition-duration: .14s;
}
.prompt-rain span {
       position: absolute;
       top: -52px;
       width: max-content;
       max-width: 360px;
       color: rgba(34, 255, 143, .72);
       font-family: 'JetBrains Mono', monospace;
       font-size: .82rem;
       font-weight: 700;
       text-shadow: 0 0 16px rgba(34,255,143,.42);
       white-space: nowrap;
       animation: matrixFall 8.6s linear infinite;
}
.prompt-rain span:nth-child(1) { left: 8%; animation-delay: 0s; }
.prompt-rain span:nth-child(2) { left: 20%; animation-delay: .8s; animation-duration: 9.7s; }
.prompt-rain span:nth-child(3) { left: 42%; animation-delay: 1.6s; animation-duration: 7.9s; }
.prompt-rain span:nth-child(4) { left: 58%; animation-delay: .3s; animation-duration: 10.1s; }
.prompt-rain span:nth-child(5) { left: 72%; animation-delay: 1.1s; animation-duration: 9.1s; }
.prompt-rain span:nth-child(6) { left: 5%; animation-delay: 2s; animation-duration: 8.1s; }
.prompt-rain span:nth-child(7) { left: 35%; animation-delay: 2.6s; animation-duration: 10.4s; }
.prompt-rain span:nth-child(8) { left: 64%; animation-delay: 3.1s; animation-duration: 8.8s; }
.prompt-rain span:nth-child(9) { left: 14%; animation-delay: 3.7s; animation-duration: 9.5s; }
.prompt-rain span:nth-child(10) { left: 50%; animation-delay: 4.2s; animation-duration: 10.8s; }
@keyframes matrixFall {
       0% { transform: translateY(-30px); opacity: 0; }
       12% { opacity: .9; }
       100% { transform: translateY(430px); opacity: 0; }
}
@keyframes iconSettle {
       0% { transform: translate3d(-90px, -42px, 0) rotateX(18deg) rotateY(-24deg) rotateZ(-12deg) scale(1.02); }
       26% { transform: translate3d(112px, 56px, 0) rotateX(-16deg) rotateY(22deg) rotateZ(11deg) scale(1.05); }
       52% { transform: translate3d(-34px, 118px, 0) rotateX(12deg) rotateY(-10deg) rotateZ(-7deg) scale(.98); }
       76% { transform: translate3d(16px, 28px, 0) rotateX(5deg) rotateY(8deg) rotateZ(3deg) scale(1); }
       100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}
@keyframes iconFloat {
       0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
       50% { transform: translate3d(0, -13px, 24px) rotateX(6deg) rotateY(-8deg) rotateZ(3deg); }
}
@keyframes iconShake {
       0% { transform: translate3d(calc(var(--push-x, 0px) * .14), calc(var(--push-y, 0px) * .14), 20px) rotateX(12deg) rotateY(-14deg) rotateZ(-4deg) scale(1.04); }
       100% { transform: translate3d(calc(var(--push-x, 0px) * -.10), calc(var(--push-y, 0px) * -.10), 40px) rotateX(-10deg) rotateY(16deg) rotateZ(5deg) scale(1.08); }
}
.landing-page {
       position: relative;
       z-index: 2;
       min-height: 100vh;
       color: #f6f7fb;
       padding-bottom: 80px;
       display: none
}
.auth-overlay.voice-mode .landing-page {
       display: block
}
.auth-overlay.voice-mode .studio-portal,
.auth-overlay.auth-mode .studio-portal {
       display: none
}
.landing-header {
       position: sticky;
       top: 0;
       z-index: 5;
       height: 72px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: min(1180px, calc(100% - 40px));
       margin: 0 auto;
       border-bottom: 1px solid rgba(255,255,255,.07);
       backdrop-filter: blur(18px)
}
.landing-brand {
       display: flex;
       align-items: center;
       gap: 12px;
       font-weight: 800;
       letter-spacing: -.03em
}
.landing-brand img {
       width: 36px;
       height: 36px;
       object-fit: cover;
       border-radius: 8px
}
.brand-mark {
       width: 36px;
       height: 36px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 auto;
       border-radius: 10px;
       border: 1px solid rgba(155, 77, 255, 0.46);
       background: radial-gradient(circle at 30% 20%, rgba(216,216,220,.22), transparent 32%), linear-gradient(145deg, #08070b, #160d25);
       color: #d9d4e6;
       font-size: 0.72rem;
       font-weight: 900;
       letter-spacing: -0.06em;
       box-shadow: 0 0 22px rgba(155, 77, 255, 0.26);
}
.auth-brand-mark {
       width: 72px;
       height: 72px;
       margin: -8px auto 16px;
       font-size: 1.18rem;
       border-radius: 18px;
}
.landing-brand strong, .landing-section h2 strong, .landing-hero strong {
       color: #16aef8
}
.landing-nav, .landing-actions, .hero-buttons, .hero-proof {
       display: flex;
       align-items: center;
       gap: 24px
}
.landing-nav a, .landing-link {
       color: #8c8f96;
       font-weight: 600
}
.landing-link {
       background: transparent;
       border: 0;
       padding: 0;
       cursor: pointer
}
.landing-nav a:hover, .landing-link:hover {
       color: #16aef8
}
.landing-member-btn, .hero-primary, .provider-card button, .price-card button {
       background: #16aef8;
       color: #041014;
       border-radius: 14px;
       padding: 12px 22px;
       font-weight: 800;
       box-shadow: 0 0 28px rgba(22,174,248,.24);
       transition: var(--transition)
}
.landing-member-btn {
       background: rgba(22,174,248,.12);
       color: #16aef8;
       border: 1px solid rgba(22,174,248,.42)
}
.landing-member-btn:hover, .hero-primary:hover, .price-card button:hover {
       transform: translateY(-2px);
       box-shadow: 0 0 40px rgba(22,174,248,.34)
}
.landing-hero {
       width: min(980px, calc(100% - 40px));
       margin: 120px auto 40px;
       text-align: center
}
.landing-badge {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       color: #16aef8;
       border: 1px solid rgba(22,174,248,.32);
       background: rgba(22,174,248,.08);
       border-radius: 999px;
       padding: 9px 18px;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: .05em;
       font-size: .78rem
}
.landing-badge > span:first-child {
       flex: 0 0 auto;
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #16aef8;
       box-shadow: 0 0 12px #16aef8
}
.landing-hero h1 {
       font-size: clamp(3rem, 7vw, 6.7rem);
       line-height: .95;
       letter-spacing: -.08em;
       margin: 32px 0 22px
}
.landing-hero p, .section-heading p, .final-cta p {
       color: #9b9da4;
       font-size: 1.15rem;
       line-height: 1.75;
       max-width: 760px;
       margin: 0 auto
}
.hero-buttons {
       justify-content: center;
       margin-top: 34px
}
.hero-secondary {
       border: 1px solid rgba(255,255,255,.13);
       color: #f6f7fb;
       border-radius: 14px;
       padding: 12px 22px;
       font-weight: 800;
       background: rgba(255,255,255,.035)
}
.hero-proof {
       justify-content: center;
       flex-wrap: wrap;
       margin-top: 28px;
       color: #b9bcc4;
       gap: 10px
}
.hero-proof span, .tag-plan {
       border: 1px solid rgba(255,255,255,.11);
       background: rgba(255,255,255,.045);
       border-radius: 999px;
       padding: 8px 13px;
       font-size: .85rem;
       font-weight: 700
}
.voice-console {
       position: relative;
       z-index: 2;
       width: min(760px, calc(100% - 40px));
       margin: 58px auto 130px;
       padding: 28px;
       border: 1px solid rgba(22,174,248,.23);
       border-radius: 22px;
       background: linear-gradient(145deg, rgba(18,18,19,.92), rgba(7,34,48,.72));
       box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 56px rgba(22,174,248,.10)
}
.console-top, .console-body {
       display: flex;
       justify-content: space-between;
       gap: 20px;
       align-items: center
}
.console-label {
       display: block;
       color: #16aef8;
       font-size: .75rem;
       text-transform: uppercase;
       letter-spacing: .12em;
       margin-bottom: 8px
}
.console-status {
       color: #2fe7a3;
       border: 1px solid rgba(47,231,163,.28);
       border-radius: 999px;
       padding: 8px 12px;
       font-weight: 800
}
.console-body {
       align-items: stretch;
       margin: 24px 0
}
.script-box {
       flex: 1;
       text-align: left;
       color: #9b9da4;
       border: 1px solid rgba(255,255,255,.09);
       border-radius: 16px;
       padding: 18px;
       background: rgba(0,0,0,.24)
}
.console-body button {
       min-width: 150px;
       border-radius: 16px;
       color: #051014;
       background: #16aef8;
       font-weight: 900
}
.console-progress {
       height: 8px;
       background: rgba(255,255,255,.07);
       border-radius: 999px;
       overflow: hidden
}
.console-progress span {
       display: block;
       height: 100%;
       width: 78%;
       background: linear-gradient(90deg, #16aef8, #7c3cff);
       animation: landingProgress 3s ease-in-out infinite
}
@keyframes landingProgress { 50% { width: 96% } }
.waveform {
       height: 64px;
       display: flex;
       gap: 8px;
       align-items: center;
       justify-content: center;
       margin-top: 22px
}
.waveform i {
       width: 7px;
       height: 20px;
       border-radius: 999px;
       background: #16aef8;
       animation: wavePulse 1.2s ease-in-out infinite
}
.waveform i:nth-child(2n) { height: 38px; animation-delay: -.2s }
.waveform i:nth-child(3n) { height: 52px; animation-delay: -.4s; background: #7c3cff }
@keyframes wavePulse { 50% { transform: scaleY(.42); opacity:.55 } }
.landing-section {
       position: relative;
       z-index: 2;
       width: min(1180px, calc(100% - 40px));
       margin: 0 auto 130px
}
.section-heading {
       text-align: center;
       margin-bottom: 44px
}
.section-heading > span {
       color: #16aef8;
       font-weight: 900;
       text-transform: uppercase;
       letter-spacing: .12em
}
.section-heading h2, .final-cta h2 {
       font-size: clamp(2.2rem, 4vw, 4rem);
       line-height: 1.04;
       letter-spacing: -.06em;
       margin: 12px 0
}
.provider-grid {
       display: grid;
       grid-template-columns: 1.2fr 1fr 1fr;
       gap: 20px
}
.provider-card, .workflow-grid > div, .price-card, .faq-grid > div {
       border: 1px solid rgba(255,255,255,.09);
       border-radius: 22px;
       background: rgba(18,18,19,.82);
       padding: 28px;
       box-shadow: 0 26px 70px rgba(0,0,0,.25)
}
.provider-card.premium, .price-card.featured {
       background: linear-gradient(145deg, rgba(7,60,85,.88), rgba(18,18,19,.82));
       border-color: rgba(22,174,248,.30)
}
.provider-logo {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 900;
       margin-bottom: 20px
}
.provider-logo.eleven { background:#fff; color:#000 }
.provider-logo.mini { background:#7c3cff; color:#fff }
.provider-logo.edge { background:linear-gradient(135deg,#0aa0ff,#28e0b3); color:#001014 }
.provider-badges {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
       margin-bottom: 14px
}
.provider-badges span {
       color: #16aef8;
       border: 1px solid rgba(22,174,248,.30);
       border-radius: 999px;
       padding: 6px 10px;
       font-size: .78rem;
       font-weight: 800
}
.provider-card h3, .workflow-grid h3, .price-card h3, .faq-grid h3 {
       font-size: 1.45rem;
       margin-bottom: 12px
}
.provider-card p, .workflow-grid p, .price-card p, .faq-grid p {
       color: #9b9da4;
       line-height: 1.65
}
.provider-card ul {
       margin-top: 20px;
       list-style: none;
       display: grid;
       gap: 10px
}
.provider-card li::before {
       content: '✓';
       color: #16aef8;
       margin-right: 8px
}
.workflow-grid, .pricing-grid, .faq-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px
}
.workflow-grid strong {
       color: rgba(22,174,248,.36);
       font-size: 3.3rem;
       font-weight: 900
}
.pricing-grid {
       grid-template-columns: repeat(5, minmax(0, 1fr))
}
.price-card {
       min-height: 310px;
       display: flex;
       flex-direction: column;
       gap: 14px
}
.price {
       font-size: 2.4rem;
       font-weight: 900;
       letter-spacing: -.07em
}
.price-card strong {
       color: #f6f7fb;
       line-height: 1.45;
       min-height: 48px
}
.price-card button {
       margin-top: auto;
       width: 100%
}
.pricing-highlights {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 14px;
       margin: 0 0 18px;
}
.pricing-highlight {
       display: grid;
       grid-template-columns: auto 1fr;
       align-items: center;
       gap: 4px 12px;
       padding: 14px 16px;
       border: 1px solid rgba(255,255,255,.12);
       border-radius: 14px;
       background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
       color: #f7f4ff;
       text-decoration: none;
}
.pricing-highlight .material-icons-round {
       grid-row: span 2;
       width: 38px;
       height: 38px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
       background: rgba(168,85,247,.18);
       color: #d8b4fe;
}
.pricing-highlight strong {
       font-size: .98rem;
       line-height: 1.1;
}
.pricing-highlight small {
       color: #a7a0b8;
       line-height: 1.35;
}
.pricing-highlight.free-test {
       border-color: rgba(34,197,94,.45);
       background: linear-gradient(145deg, rgba(22,163,74,.18), rgba(168,85,247,.05));
       box-shadow: 0 0 28px rgba(34,197,94,.18);
}
.pricing-highlight.free-test .material-icons-round {
       background: rgba(34,197,94,.18);
       color: #86efac;
}
.gmail-pricing-panel {
       display: grid;
       grid-template-columns: minmax(220px, .72fr) 1fr;
       gap: 18px;
       align-items: center;
       margin-top: 18px;
       padding: 18px;
       border: 1px solid rgba(251,191,36,.28);
       border-radius: 18px;
       background:
         linear-gradient(145deg, rgba(251,191,36,.10), rgba(168,85,247,.06)),
         rgba(12,10,18,.72);
}
.gmail-pricing-panel h3 {
       margin: 6px 0;
       color: #f7f4ff;
       font-size: 1.2rem;
}
.gmail-pricing-panel p {
       color: #a7a0b8;
       line-height: 1.45;
}
.gmail-year-grid {
       display: grid;
       grid-template-columns: repeat(7, minmax(0, 1fr));
       gap: 8px;
}
.gmail-year-grid div {
       min-height: 66px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 6px;
       padding: 10px 8px;
       border: 1px solid rgba(255,255,255,.12);
       border-radius: 12px;
       background: rgba(255,255,255,.045);
       text-align: center;
}
.gmail-year-grid span {
       color: #a7a0b8;
       font-size: .82rem;
       font-weight: 800;
}
.gmail-year-grid strong {
       color: #facc15;
       font-size: 1.02rem;
}
.final-cta {
       width: min(980px, calc(100% - 40px));
       margin: 0 auto 60px;
       text-align: center;
       border: 1px solid rgba(22,174,248,.22);
       border-radius: 28px;
       padding: 58px 28px;
       background: radial-gradient(circle at 50% 0%, rgba(22,174,248,.18), rgba(18,18,19,.78) 58%)
}
.whatsapp {
       border-color: rgba(37,211,102,.35);
       color: #25d366
}

/* ============ W STUDIOS VOICES PURPLE EXPERIENCE ============ */
.auth-overlay.voice-mode {
       background:
         radial-gradient(circle at 50% -6%, rgba(168,85,247,.22), transparent 35rem),
         radial-gradient(circle at 16% 28%, rgba(124,58,237,.18), transparent 28rem),
         radial-gradient(circle at 86% 54%, rgba(34,199,255,.12), transparent 30rem),
         #030304;
}
.auth-overlay.voice-mode .auth-bg-effects {
       background-image:
         linear-gradient(rgba(168,85,247,.052) 1px, transparent 1px),
         linear-gradient(90deg, rgba(168,85,247,.052) 1px, transparent 1px);
}
.auth-overlay.voice-mode .auth-bg-effects::before {
       background:
         radial-gradient(circle at 12% 32%, rgba(168,85,247,.35) 0 3px, transparent 4px),
         radial-gradient(circle at 26% 12%, rgba(34,199,255,.25) 0 4px, transparent 5px),
         radial-gradient(circle at 58% 18%, rgba(168,85,247,.30) 0 3px, transparent 4px),
         radial-gradient(circle at 78% 34%, rgba(34,199,255,.22) 0 3px, transparent 4px),
         radial-gradient(circle at 92% 54%, rgba(168,85,247,.32) 0 4px, transparent 5px),
         radial-gradient(circle at 16% 76%, rgba(34,199,255,.20) 0 3px, transparent 4px),
         radial-gradient(circle at 48% 64%, rgba(168,85,247,.28) 0 4px, transparent 5px),
         radial-gradient(circle at 71% 82%, rgba(34,199,255,.24) 0 3px, transparent 4px);
}
.auth-overlay.voice-mode .landing-header {
       border-bottom-color: rgba(168,85,247,.18);
       background: linear-gradient(180deg, rgba(3,3,4,.84), rgba(3,3,4,.54));
}
.auth-overlay.voice-mode .landing-brand strong,
.auth-overlay.voice-mode .landing-hero strong,
.auth-overlay.voice-mode .section-heading > span,
.auth-overlay.voice-mode .landing-nav a:hover,
.auth-overlay.voice-mode .landing-link:hover {
       color: #a855f7;
       text-shadow: 0 0 24px rgba(168,85,247,.30);
}
.auth-overlay.voice-mode .landing-member-btn,
.auth-overlay.voice-mode .hero-primary,
.auth-overlay.voice-mode .provider-card button,
.auth-overlay.voice-mode .price-card button {
       background: linear-gradient(105deg, #22c7ff, #a855f7 48%, #f4edff);
       background-size: 220% 100%;
       color: #05020a;
       border-color: transparent;
       box-shadow: 0 0 34px rgba(168,85,247,.26), 0 0 22px rgba(34,199,255,.16);
       animation: accessWave 3s linear infinite;
}
.auth-overlay.voice-mode .landing-member-btn {
       color: #f7f4ff;
       background: linear-gradient(135deg, rgba(168,85,247,.20), rgba(34,199,255,.10));
       border: 1px solid rgba(168,85,247,.42);
}
.auth-overlay.voice-mode .landing-badge,
.auth-overlay.voice-mode .provider-badges span {
       color: #c084fc;
       border-color: rgba(168,85,247,.36);
       background: rgba(168,85,247,.10);
}
.auth-overlay.voice-mode .landing-badge > span:first-child {
       background: #a855f7;
       box-shadow: 0 0 14px #a855f7;
}
.auth-overlay.voice-mode .landing-hero h1,
.auth-overlay.voice-mode .section-heading h2,
.auth-overlay.voice-mode .final-cta h2 {
       font-family: 'Poppins', 'Inter', Arial Black, Arial, sans-serif;
}
.auth-overlay.voice-mode .landing-hero {
       margin-top: 84px;
       margin-bottom: 30px;
}
.auth-overlay.voice-mode .landing-hero h1 {
       font-size: clamp(3.2rem, 6.1vw, 5.75rem);
       letter-spacing: -.03em;
       line-height: .98;
}
.auth-overlay.voice-mode .voice-console {
       margin-top: 44px;
}
.auth-overlay.voice-mode .provider-card,
.auth-overlay.voice-mode .workflow-grid > div,
.auth-overlay.voice-mode .price-card,
.auth-overlay.voice-mode .faq-grid > div,
.auth-overlay.voice-mode .final-cta {
       border-color: rgba(168,85,247,.16);
       background:
         radial-gradient(circle at 18% 0%, rgba(168,85,247,.16), transparent 34%),
         linear-gradient(145deg, rgba(16,10,28,.88), rgba(6,6,9,.82));
       box-shadow: 0 30px 84px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
.auth-overlay.voice-mode .provider-card.premium,
.auth-overlay.voice-mode .price-card.featured {
       border-color: rgba(168,85,247,.38);
       background:
         radial-gradient(circle at 20% 0%, rgba(168,85,247,.26), transparent 40%),
         linear-gradient(145deg, rgba(31,17,58,.92), rgba(7,26,40,.74));
       box-shadow: 0 38px 98px rgba(67,28,128,.34), 0 0 42px rgba(168,85,247,.13);
}
.auth-overlay.voice-mode .provider-card li::before,
.auth-overlay.voice-mode .workflow-grid strong {
       color: #a855f7;
}
.auth-overlay.voice-mode .voice-console {
       width: min(860px, calc(100% - 40px));
       border-color: rgba(168,85,247,.28);
       background:
         radial-gradient(circle at 24% 0%, rgba(168,85,247,.22), transparent 34%),
         radial-gradient(circle at 80% 100%, rgba(34,199,255,.12), transparent 36%),
         linear-gradient(145deg, rgba(15,10,27,.96), rgba(3,11,18,.90));
       box-shadow: 0 42px 104px rgba(0,0,0,.52), 0 0 70px rgba(168,85,247,.16);
}
.workflow-demo {
       overflow: hidden;
       min-height: 336px;
}
.workflow-demo::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image:
         linear-gradient(rgba(168,85,247,.08) 1px, transparent 1px),
         linear-gradient(90deg, rgba(34,199,255,.05) 1px, transparent 1px);
       background-size: 44px 44px;
       opacity: .35;
       pointer-events: none;
}
.workflow-demo::after {
       content: '';
       position: absolute;
       inset: -60% -18%;
       background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.18) 50%, transparent 58%);
       transform: translateX(-45%);
       animation: workflowSweep 14s cubic-bezier(.2,.7,.12,1) infinite;
       pointer-events: none;
}
.workflow-demo .console-top,
.workflow-demo .console-body,
.workflow-demo .console-progress,
.workflow-demo .cyber-process,
.workflow-demo .waveform,
.workflow-demo .console-final {
       z-index: 2;
}
.workflow-demo .console-top,
.workflow-demo .console-body,
.workflow-demo .console-progress {
       position: relative;
       animation: mainWorkflowFade 14s ease-in-out infinite;
}
.workflow-demo .console-label {
       color: #c084fc;
}
.workflow-demo .voice-choice-demo {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       animation: voiceSelectPulse 14s ease-in-out infinite;
}
.workflow-demo .voice-choice-demo::before {
       content: '11';
       width: 28px;
       height: 28px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 9px;
       background: #f7f4ff;
       color: #05020a;
       font-size: .72rem;
       font-weight: 900;
       box-shadow: 0 0 18px rgba(255,255,255,.20);
}
.workflow-demo .console-status {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       min-width: 104px;
       justify-content: center;
       color: #f7f4ff;
       border-color: rgba(168,85,247,.34);
       background: rgba(168,85,247,.12);
}
.status-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #22c7ff;
       box-shadow: 0 0 16px #22c7ff;
}
.progress-count::after {
       content: '0%';
       font-variant-numeric: tabular-nums;
       animation: percentSteps 14s steps(10, end) infinite;
}
.workflow-demo .script-box {
       border-color: rgba(168,85,247,.24);
       background: rgba(5,3,10,.62);
       box-shadow: inset 0 0 28px rgba(168,85,247,.08);
       min-height: 82px;
       overflow: hidden;
}
.typed-script {
       display: inline-block;
       width: 0;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
       border-right: 2px solid rgba(168,85,247,.70);
       animation: typeScript 14s steps(94, end) infinite;
}
.workflow-demo .generate-demo {
       position: relative;
       overflow: hidden;
       background: linear-gradient(105deg, #22c7ff, #a855f7, #f5efff);
       background-size: 220% 100%;
       box-shadow: 0 0 30px rgba(168,85,247,.28);
       animation: generateClick 14s ease-in-out infinite, accessWave 3s linear infinite;
}
.workflow-demo .generate-demo::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
       transform: translateX(-120%);
       animation: buttonLightWave 2.8s ease-in-out infinite;
}
.workflow-demo .console-progress {
       height: 11px;
       background: rgba(255,255,255,.07);
       border: 1px solid rgba(168,85,247,.14);
       box-shadow: inset 0 0 18px rgba(0,0,0,.38);
}
.workflow-demo .console-progress span {
       width: 0;
       background: linear-gradient(90deg, #22c7ff, #a855f7 62%, #f6efff);
       box-shadow: 0 0 24px rgba(168,85,247,.38);
       animation: workflowFill 14s linear infinite;
}
.cyber-process {
       height: 54px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       margin-top: 18px;
       animation: workflowFade 14s ease-in-out infinite;
}
.cyber-process i {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #a855f7;
       box-shadow: 0 0 18px rgba(168,85,247,.7);
       animation: cyberNode 1.15s ease-in-out infinite;
}
.cyber-process i:nth-child(2n) {
       background: #22c7ff;
       box-shadow: 0 0 18px rgba(34,199,255,.7);
       animation-delay: -.28s;
}
.cyber-process i:nth-child(3n) {
       animation-delay: -.52s;
}
.workflow-demo .waveform {
       animation: waveformReady 14s ease-in-out infinite, workflowFade 14s ease-in-out infinite;
}
.workflow-demo .waveform i {
       background: #a855f7;
       box-shadow: 0 0 20px rgba(168,85,247,.48);
}
.workflow-demo .waveform i:nth-child(3n) {
       background: #22c7ff;
}
.demo-cursor {
       position: absolute;
       z-index: 5;
       width: 20px;
       height: 20px;
       left: 14%;
       top: 52%;
       filter: drop-shadow(0 0 12px rgba(255,255,255,.45));
       animation: workflowCursor 14s cubic-bezier(.2,.78,.18,1) infinite;
       pointer-events: none;
}
.demo-cursor::before {
       content: '';
       position: absolute;
       width: 0;
       height: 0;
       border-left: 18px solid #f8f3ff;
       border-top: 12px solid transparent;
       border-bottom: 12px solid transparent;
       transform: rotate(-20deg);
}
.demo-cursor::after {
       content: '';
       position: absolute;
       width: 36px;
       height: 36px;
       left: -9px;
       top: -8px;
       border-radius: 50%;
       border: 1px solid rgba(168,85,247,.42);
       transform: scale(.4);
       opacity: 0;
       animation: cursorRipple 14s ease-in-out infinite;
}
.workflow-demo .console-final {
       position: absolute;
       inset: 28px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       opacity: 0;
       transform: translateY(18px) scale(.96);
       pointer-events: none;
       animation: finalReveal 14s ease-in-out infinite;
       z-index: 4;
}
.console-final h3 {
       font-family: 'Poppins', 'Inter', Arial Black, Arial, sans-serif;
       font-size: clamp(2.3rem, 5vw, 4.8rem);
       line-height: .9;
       letter-spacing: -.075em;
       color: #f7f4ff;
       text-shadow: 0 0 38px rgba(168,85,247,.28);
}
.console-final p {
       max-width: 650px;
       margin-top: 18px;
       color: #d9ccff;
       font-size: 1.08rem;
       line-height: 1.7;
       font-weight: 700;
}
@keyframes workflowFill {
       0% { width: 0%; }
       71.4%, 100% { width: 100%; }
}
@keyframes percentSteps {
       0% { content: '0%'; }
       7.1% { content: '10%'; }
       14.2% { content: '20%'; }
       21.3% { content: '30%'; }
       28.4% { content: '40%'; }
       35.5% { content: '50%'; }
       42.6% { content: '60%'; }
       49.7% { content: '70%'; }
       56.8% { content: '80%'; }
       63.9% { content: '90%'; }
       71.4%, 100% { content: '100%'; }
}
@keyframes workflowCursor {
       0%, 9% { left: 18%; top: 50%; opacity: 0; }
       13%, 25% { left: 26%; top: 50%; opacity: 1; }
       33%, 43% { left: 29%; top: 23%; opacity: 1; }
       52%, 64% { left: 76%; top: 50%; opacity: 1; }
       72%, 100% { left: 88%; top: 18%; opacity: 0; }
}
@keyframes cursorRipple {
       0%, 12%, 30%, 50%, 70%, 100% { opacity: 0; transform: scale(.35); }
       17%, 38%, 58% { opacity: .75; transform: scale(1.15); }
}
@keyframes typeScript {
       0%, 12% { width: 0; }
       42%, 72% { width: 100%; }
       90%, 100% { width: 100%; }
}
@keyframes voiceSelectPulse {
       0%, 28%, 46%, 100% { color: #f7f4ff; filter: none; }
       34%, 42% { color: #c084fc; filter: drop-shadow(0 0 16px rgba(168,85,247,.48)); }
}
@keyframes generateClick {
       0%, 46%, 66%, 100% { transform: translateY(0) scale(1); }
       54%, 58% { transform: translateY(2px) scale(.96); }
}
@keyframes buttonLightWave {
       0%, 28% { transform: translateX(-130%); }
       62%, 100% { transform: translateX(130%); }
}
@keyframes workflowSweep {
       0%, 42% { transform: translateX(-48%); opacity: 0; }
       54% { opacity: .56; }
       78%, 100% { transform: translateX(44%); opacity: 0; }
}
@keyframes cyberNode {
       0%, 100% { transform: translateY(0) scale(.7); opacity: .45; }
       50% { transform: translateY(-13px) scale(1.5); opacity: 1; }
}
@keyframes waveformReady {
       0%, 58% { opacity: .3; filter: blur(1px); transform: translateY(8px); }
       78%, 100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes workflowFade {
       0%, 70% { opacity: 1; }
       78%, 100% { opacity: .12; }
}
@keyframes mainWorkflowFade {
       0%, 70% { opacity: 1; transform: translateY(0); filter: blur(0); }
       78%, 100% { opacity: .08; transform: translateY(-8px); filter: blur(2px); }
}
@keyframes finalReveal {
       0%, 70% { opacity: 0; transform: translateY(18px) scale(.96); }
       78%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-overlay.auth-mode .landing-page {
       display: none
}
.auth-overlay.auth-mode {
       display: flex;
       align-items: center;
       justify-content: center
}
@keyframes orbFloat {
        0%,    100% {
            transform: translate(0, 0) scale(1)
}
    50% {
            transform: translate(30px, -30px) scale(1.1)
}

}
.auth-container {
        position: relative;
       z-index: 1;
       width: 100%;
       max-width: 420px;
       padding: 40px;
       background: var(--bg-card);
       backdrop-filter: blur(20px);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.74), 0 0 52px rgba(155, 77, 255, 0.18)
}
.auth-overlay:not(.auth-mode) .auth-container {
       display: none
}
.auth-back {
       width: 100%;
       margin-top: 14px;
       color: #8c8f96;
       font-weight: 700;
       text-align: center
}
.auth-back:hover {
       color: #16aef8
}
.auth-logo {
        text-align: center;
       margin-bottom: 32px
}
.auth-brand-logo {
       display: none !important
}
.auth-logo-icon {
        width: 64px;
       height: 64px;
       margin: 0 auto 16px;
       background: var(--gold-gradient);
       border-radius: var(--radius);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: var(--shadow-gold)
}
.auth-logo-icon .material-icons-round {
        font-size: 32px;
       color: #000
}
.auth-logo h1 {
        font-size: 1.8rem;
       font-weight: 700;
       letter-spacing: 0.04em;
       background: linear-gradient(135deg, #f7f7f8 0%, #b9b9bd 52%, #8d2cff 100%);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent
}
.auth-subtitle {
        color: var(--text-secondary);
       font-size: 0.85rem;
       margin-top: 4px
}
.auth-tabs {
        display: flex;
       gap: 4px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       padding: 4px;
       margin-bottom: 24px
}
.auth-tab {
        flex: 1;
       padding: 10px;
       border-radius: 6px;
       font-weight: 500;
       font-size: 0.9rem;
       transition: var(--transition)
}
.auth-tab.active {
        background: var(--gold-gradient);
       color: #050506;
       box-shadow: 0 0 20px rgba(155, 77, 255, 0.28)
}
.auth-form {
        display: none;
       flex-direction: column;
       gap: 16px
}
.auth-form.active {
        display: flex
}
.form-group {
        display: flex;
       flex-direction: column;
       gap: 6px
}
.form-group label {
        font-size: 0.85rem;
       font-weight: 500;
       color: var(--text-secondary)
}
.input-wrapper {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       transition: var(--transition)
}
.input-wrapper:focus-within {
        border-color: var(--gold);
       box-shadow: 0 0 0 3px var(--gold-glow)
}
.input-wrapper .material-icons-round {
        font-size: 20px;
       color: var(--text-muted)
}
.input-wrapper input {
        flex: 1;
       background: none;
       border: none;
       outline: none;
       font-size: 0.95rem
}
.btn-primary {
        display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 12px 24px;
       background: var(--gold-gradient);
       color: #050506;
       font-weight: 600;
       font-size: 0.95rem;
       border-radius: var(--radius-sm);
       transition: var(--transition);
       position: relative;
       overflow: hidden
}
.btn-primary:hover {
        transform: translateY(-1px);
       box-shadow: var(--shadow-gold)
}
.btn-primary:active {
        transform: translateY(0)
}
.btn-primary.loading {
        pointer-events: none;
       opacity: 0.7
}
.btn-primary.loading::after {
        content: '';
       position: absolute;
       width: 20px;
       height: 20px;
       border: 2px solid rgba(0, 0, 0, 0.3);
       border-top-color: #000;
       border-radius: 50%;
       animation: spin 0.6s linear infinite
}
@keyframes spin {
        to {
            transform: rotate(360deg)
}

}
.btn-secondary {
        padding: 10px 20px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-weight: 500;
       transition: var(--transition)
}
.btn-secondary:hover {
        border-color: var(--gold);
       background: var(--bg-hover)
}
.auth-error {
        color: var(--error);
       font-size: 0.85rem;
       min-height: 20px;
       text-align: center
}
/* ============ APP LAYOUT ============ */.app {
        display: flex;
       height: 100vh;
       overflow: hidden
}
/* ============ SIDEBAR ============ */.sidebar {
        width: var(--sidebar-w);
       height: 100vh;
       background: var(--bg-secondary);
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       transition: var(--transition);
       flex-shrink: 0;
       z-index: 100;
       box-shadow: 18px 0 48px rgba(0, 0, 0, 0.34)
}
.sidebar-header {
        display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px 20px;
       border-bottom: 1px solid var(--border)
}
.logo {
        display: flex;
       align-items: center;
       gap: 10px
}
.logo-img {
       width: 44px;
       height: 44px;
       border-radius: 10px;
       border: 1px solid rgba(155, 77, 255, 0.38);
       box-shadow: 0 0 18px rgba(155, 77, 255, 0.25);
       background: #000
}
.logo-icon {
        width: 36px;
       height: 36px;
       background: var(--gold-gradient);
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: var(--shadow-gold)
}
.logo-icon .material-icons-round {
        font-size: 20px;
       color: #000
}
.logo-name {
        font-size: 1.05rem;
       font-weight: 700;
       display: block;
       line-height: 1.2;
       letter-spacing: 0.04em
}
.logo-sub {
        font-size: 0.75rem;
       font-weight: 600;
       display: block;
       letter-spacing: 0.38em
}
.sidebar-toggle {
        padding: 6px;
       border-radius: 6px;
       transition: var(--transition)
}
.sidebar-toggle:hover {
        background: var(--bg-hover)
}
.sidebar-user {
        display: flex;
       align-items: center;
       gap: 12px;
       padding: 16px 20px;
       border-bottom: 1px solid var(--border)
}
.user-avatar {
        width: 36px;
       height: 36px;
       background: var(--gold-gradient);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       font-size: 0.9rem;
       color: #000;
       flex-shrink: 0
}
.user-info {
        display: flex;
       flex-direction: column
}
.user-name {
        font-weight: 600;
       font-size: 0.9rem
}
.user-tier {
        font-size: 0.75rem;
       font-weight: 500
}
.sidebar-nav {
        flex: 1;
       overflow-y: auto;
       padding: 12px 0
}
.nav-section {
        padding: 0 12px;
       margin-bottom: 8px
}
.nav-section-title {
        display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 8px;
       font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--text-muted)
}
.nav-section-title .material-icons-round {
        font-size: 16px
}
/* ============ COLLAPSIBLE SIDEBAR SECTIONS ============ */
.nav-section-collapsible {
        padding: 0 12px;
        margin-bottom: 4px
}
.nav-section-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text-primary);
        transition: var(--transition);
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit
}
.nav-section-toggle:hover {
        background: var(--bg-hover)
}
.nav-provider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 6px currentColor
}
.nav-section-name {
        flex: 1;
        text-align: left
}
.nav-toggle-icon {
        font-size: 18px !important;
        color: var(--text-muted);
        transition: transform 0.3s ease
}
.nav-section-items {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding-left: 8px
}
.nav-section-items.open {
        max-height: 500px
}
.nav-section-collapsible.collapsed .nav-toggle-icon {
        transform: rotate(-90deg)
}
.nav-section-collapsible.collapsed .nav-section-items {
        max-height: 0
}
.nav-item {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px 12px;
       border-radius: var(--radius-sm);
       font-size: 0.88rem;
       font-weight: 400;
       color: var(--text-secondary);
       transition: var(--transition);
       margin-bottom: 2px
}
.nav-item:hover {
        background: var(--bg-hover);
       color: var(--text-primary)
}
.nav-item.active {
        background: var(--bg-hover);
       color: var(--gold);
       font-weight: 500;
       border-left: 3px solid var(--gold)
}
.nav-item .material-icons-round {
        font-size: 20px
}
.sidebar-footer {
        padding: 12px 16px;
       border-top: 1px solid var(--border)
}
.credits-display {
        display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 12px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       margin-bottom: 10px;
       border: 1px solid var(--border-gold)
}
.credits-display .material-icons-round {
        color: var(--gold);
       font-size: 20px
}
.credits-display #credits-count {
        font-weight: 700;
       font-size: 1.05rem;
       color: var(--gold)
}
.credits-label {
        font-size: 0.8rem;
       color: var(--text-muted)
}
.sidebar-actions {
        display: flex;
       gap: 4px
}
.sidebar-btn {
        flex: 1;
       padding: 8px;
       border-radius: 6px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 4px;
       transition: var(--transition)
}
.sidebar-btn:hover {
        background: var(--bg-hover)
}
.sidebar-btn .material-icons-round {
        font-size: 20px;
       color: var(--text-secondary)
}
.sidebar-btn-label {
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.5px;
}
/* ============ MAIN CONTENT ============ */.main-content {
        flex: 1;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       min-width: 0;
       background: var(--bg-primary) !important;
}
.topbar {
        display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 24px;
       height: var(--topbar-h);
       border-bottom: 1px solid var(--border);
       background: var(--bg-secondary);
       flex-shrink: 0
}
.topbar-left {
        display: flex;
       align-items: center;
       gap: 12px
}
.mobile-menu-btn {
        display: none;
       padding: 6px;
       border-radius: 6px
}
.page-title {
        font-size: 1.15rem;
       font-weight: 600
}
.topbar-right {
        display: flex;
       align-items: center;
       gap: 16px
}
.health-indicator {
        display: flex;
       align-items: center;
       gap: 6px;
       padding: 6px 12px;
       background: var(--bg-tertiary);
       border-radius: 20px;
       font-size: 0.8rem
}
.health-dot {
        width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--success);
       box-shadow: 0 0 6px var(--success)
}
.health-label {
        font-weight: 500
}
.topbar-credits {
        display: flex;
       align-items: center;
       gap: 6px;
       font-weight: 600;
       color: var(--gold)
}
.topbar-credits .material-icons-round {
        font-size: 20px
}
.page-wrapper {
        flex: 1;
       overflow-y: auto;
       padding: 0;
       background: var(--bg-primary) !important;
}
.page {
        display: none;
       height: 100%
}
.page.active {
        display: block
}
/* ============ TTS LAYOUT ============ */.tts-layout {
        display: flex;
       height: 100%;
       overflow: hidden
}
.tts-editor {
        flex: 1;
       display: flex;
       flex-direction: column;
       border-right: 1px solid var(--border);
       min-width: 0;
       background: var(--bg-primary) !important;
}
.editor-area {
        flex: 1;
       display: flex;
       flex-direction: column;
       padding: 0
}
.editor-area textarea {
        flex: 1;
       width: 100%;
       padding: 24px;
       background: transparent;
       border: none;
       outline: none;
       resize: none;
       font-size: 1rem;
       line-height: 1.7;
       color: var(--text-primary)
}
.editor-area textarea::placeholder {
        color: var(--text-muted)
}
.editor-footer {
        display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       border-top: 1px solid var(--border);
       background: var(--bg-secondary);
       gap: 12px
}
/* Limpar Roteiro fica colado ao Gerar audio (mesmo grupo flex à direita).
   Sem `margin-right` nem flex separador — o gap do .editor-footer já cobre. */
.editor-footer .btn-clear-script + .btn-generate,
.editor-footer .btn-clear-script {
       margin: 0;
}
/* Wrapper que mantém Limpar Roteiro + Gerar audio sempre lado a lado,
   ancorados à direita do footer. */
.editor-actions {
       display: flex;
       align-items: center;
       gap: 8px;
}
.btn-icon {
        padding: 8px;
       border-radius: 6px;
       transition: var(--transition);
       display: flex;
       align-items: center
}
.btn-icon:hover {
        background: var(--bg-hover)
}
.btn-icon .material-icons-round {
        font-size: 22px;
       color: var(--text-secondary)
}
.char-count {
        display: flex;
       align-items: center;
       gap: 6px;
       font-size: 0.85rem;
       color: var(--text-muted)
}
.btn-generate {
        padding: 10px 20px;
       font-size: 0.9rem;
       border-radius: var(--radius-sm);
       white-space: nowrap
}
/* Limpar Roteiro: secundário do lado do Gerar audio */
.btn-clear-script {
       padding: 10px 16px;
       font-size: 0.88rem;
       border-radius: var(--radius-sm);
       white-space: nowrap;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: transparent;
       color: var(--text-muted);
       border: 1px solid var(--border);
       cursor: pointer;
       transition: var(--transition);
}
.btn-clear-script:hover {
       color: var(--text-primary);
       border-color: var(--error);
}
.btn-clear-script .material-icons-round { font-size: 18px; }
/* ============ TTS SETTINGS ============ */.tts-settings {
        width: var(--settings-w);
       display: flex;
       flex-direction: column;
       overflow-y: auto;
       background: var(--bg-secondary);
       flex-shrink: 0
}
.settings-tabs {
        display: flex;
       border-bottom: 1px solid var(--border);
       padding: 0 16px
}
.settings-tab {
        padding: 14px 16px;
       font-size: 0.85rem;
       font-weight: 500;
       color: var(--text-secondary);
       border-bottom: 2px solid transparent;
       transition: var(--transition);
       display: flex;
       align-items: center;
       gap: 6px
}
.settings-tab.active {
        color: var(--gold);
       border-bottom-color: var(--gold)
}
.settings-panel {
        display: none;
       padding: 20px 16px;
       flex-direction: column;
       gap: 18px;
       overflow-y: auto
}
.settings-panel.active {
        display: flex
}
.setting-group {
        display: flex;
       flex-direction: column;
       gap: 6px
}
.setting-label {
        font-size: 0.85rem;
       font-weight: 500;
       color: var(--text-secondary)
}
.setting-selector {
        display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.9rem;
       width: 100%;
       text-align: left;
       transition: var(--transition)
}
.setting-selector:hover {
        border-color: var(--gold)
}
.setting-selector .material-icons-round {
        margin-left: auto;
       font-size: 18px;
       color: var(--text-muted)
}
.setting-select {
        padding: 10px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.9rem;
       outline: none;
       width: 100%;
       color: var(--text-primary);
       appearance: none;
       -webkit-appearance: none;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239a9ab0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 12px center;
       cursor: pointer;
       transition: var(--transition)
}
.setting-select option {
       background-color: var(--bg-secondary) !important;
       color: var(--text-primary) !important;
       padding: 8px
}
.setting-select:focus {
        border-color: var(--gold)
}
select {
       background: var(--bg-tertiary);
       color: var(--text-primary)
}
select option {
       background-color: var(--bg-secondary) !important;
       color: var(--text-primary) !important;
}
.input-field {
        padding: 10px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.9rem;
       outline: none;
       width: 100%;
       transition: var(--transition)
}
.input-field:focus {
        border-color: var(--gold)
}
.tag {
        padding: 2px 8px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: 4px;
       font-size: 0.75rem;
       font-weight: 500;
       color: var(--text-secondary)
}
.tag.small {
        font-size: 0.7rem;
       padding: 1px 6px
}
/* ============ SLIDERS ============ */.slider-container {
        display: flex;
       align-items: center;
       gap: 8px
}
.slider-label {
        font-size: 0.72rem;
       color: var(--text-muted);
       white-space: nowrap;
       min-width: 55px
}
.slider-label:last-child {
        text-align: right
}
.slider {
        flex: 1;
       -webkit-appearance: none;
       height: 4px;
       background: var(--bg-tertiary);
       border-radius: 2px;
       outline: none;
       cursor: pointer
}
.slider::-webkit-slider-thumb {
        -webkit-appearance: none;
       width: 16px;
       height: 16px;
       background: var(--gold);
       border-radius: 50%;
       cursor: pointer;
       box-shadow: 0 0 6px var(--gold-glow);
       transition: var(--transition)
}
.slider::-webkit-slider-thumb:hover {
        transform: scale(1.2);
       box-shadow: 0 0 12px var(--gold-glow)
}
/* ============ TOGGLES ============ */.toggle-group {
        flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center
}
.toggle-item {
        display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
       font-size: 0.88rem
}
.toggle-item input {
        display: none
}
.toggle-switch {
        width: 36px;
       height: 20px;
       background: var(--bg-tertiary);
       border-radius: 10px;
       position: relative;
       transition: var(--transition);
       border: 1px solid var(--border);
       flex-shrink: 0
}
.toggle-switch::after {
        content: '';
       position: absolute;
       width: 14px;
       height: 14px;
       background: var(--text-muted);
       border-radius: 50%;
       top: 2px;
       left: 2px;
       transition: var(--transition)
}
.toggle-item input:checked+.toggle-switch {
        background: var(--gold);
       border-color: var(--gold)
}
.toggle-item input:checked+.toggle-switch::after {
        transform: translateX(16px);
       background: #000
}
.btn-text-small {
        font-size: 0.8rem;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 4px;
       transition: var(--transition)
}
.btn-text-small:hover {
        color: var(--gold)
}
.btn-text-small .material-icons-round {
        font-size: 16px
}
/* ============ UPLOAD ZONES ============ */.upload-zone {
        display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 48px 24px;
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       text-align: center;
       transition: var(--transition);
       cursor: pointer;
       min-height: 250px;
       margin: 16px
}
.upload-zone:hover {
        border-color: var(--gold);
       background: var(--bg-hover)
}
.upload-zone.dragover {
        border-color: var(--gold);
       background: rgba(212, 168, 67, 0.1)
}
.upload-icon {
        font-size: 48px;
       color: var(--text-muted);
       margin-bottom: 12px
}
.upload-zone h3 {
        font-size: 1rem;
       margin-bottom: 8px;
       font-weight: 500
}
.upload-zone p {
        font-size: 0.85rem;
       color: var(--text-muted);
       margin-bottom: 4px
}
.upload-limit {
        color: var(--gold) !important;
       font-size: 0.8rem !important
}
.file-preview {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 16px;
       margin: 0 16px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-gold)
}
.file-preview .material-icons-round {
        color: var(--gold);
       font-size: 24px
}
.file-preview span:nth-child(2) {
        flex: 1;
       font-size: 0.9rem;
       font-weight: 500
}
.btn-icon-small {
        padding: 4px;
       border-radius: 4px;
       transition: var(--transition)
}
.btn-icon-small:hover {
        background: var(--bg-hover)
}
.btn-icon-small .material-icons-round {
        font-size: 18px;
       color: var(--text-muted)
}
/* ============ SINGLE TOOL LAYOUT ============ */.single-tool-layout {
        display: flex;
       justify-content: center;
       align-items: flex-start;
       padding: 40px 24px;
       height: 100%;
       overflow-y: auto
}
.tool-card {
        width: 100%;
       max-width: 560px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 32px;
       backdrop-filter: blur(10px)
}
.tool-card.wide-card {
        max-width: 700px
}
.tool-header {
        display: flex;
       align-items: flex-start;
       gap: 16px;
       margin-bottom: 24px
}
.tool-icon {
        font-size: 36px;
       color: var(--gold);
       flex-shrink: 0
}
.tool-header h3 {
        font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 4px
}
.tool-header p {
        font-size: 0.85rem;
       color: var(--text-secondary)
}
.sfx-textarea,.imagen-textarea {
        width: 100%;
       padding: 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       outline: none;
       resize: vertical;
       font-size: 0.95rem;
       line-height: 1.5;
       transition: var(--transition)
}
.sfx-textarea:focus,.imagen-textarea:focus {
        border-color: var(--gold)
}
.char-hint {
        font-size: 0.75rem;
       color: var(--text-muted);
       text-align: right;
       display: block;
       margin-top: 4px
}
.sfx-options,.dub-options {
        display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-top: 16px
}
/* ============ IMAGEN LAYOUT ============ */.imagen-layout {
        display: flex;
       height: 100%;
       overflow: hidden
}
.imagen-editor {
        flex: 1;
       padding: 24px;
       overflow-y: auto;
       border-right: 1px solid var(--border)
}
.imagen-settings {
        width: 300px;
       padding: 20px;
       overflow-y: auto;
       flex-shrink: 0
}
.imagen-ref-zone {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 16px;
       border: 1px dashed var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: var(--transition);
       margin-top: 12px
}
.imagen-ref-zone:hover {
        border-color: var(--gold);
       background: var(--bg-hover)
}
.imagen-ref-zone .material-icons-round {
        color: var(--text-muted);
       font-size: 24px
}
.imagen-ref-zone p {
        font-size: 0.8rem;
       color: var(--text-muted)
}
.ref-previews {
        display: flex;
       gap: 8px;
       margin-top: 8px;
       flex-wrap: wrap
}
.ref-previews img {
        width: 64px;
       height: 64px;
       object-fit: cover;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border)
}
.ratio-buttons {
        display: flex;
       gap: 6px
}
.ratio-btn {
        padding: 8px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.85rem;
       font-weight: 500;
       transition: var(--transition)
}
.ratio-btn:hover {
        border-color: var(--gold)
}
.ratio-btn.active {
        background: var(--gold);
       color: #000;
       border-color: var(--gold)
}
.price-display {
        flex-direction: row;
       align-items: center;
       gap: 6px;
       padding: 14px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-gold);
       font-size: 0.9rem;
       margin-top: 8px
}
.price-display .material-icons-round {
        color: var(--gold)
}
.price-display strong {
        color: var(--gold)
}
.imagen-results {
        margin-top: 24px;
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: 12px
}
.imagen-results img {
        width: 100%;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
       cursor: pointer;
       transition: var(--transition)
}
.imagen-results img:hover {
        border-color: var(--gold);
       transform: scale(1.02)
}
/* ============ HISTORY ============ */.history-layout {
        padding: 24px;
       height: 100%;
       overflow-y: auto
}
.history-filters {
        margin-bottom: 20px
}
.history-filter-tabs {
        display: flex;
       gap: 6px;
       flex-wrap: wrap
}
.filter-tab {
        padding: 8px 16px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: 20px;
       font-size: 0.85rem;
       font-weight: 500;
       transition: var(--transition)
}
.filter-tab:hover {
        border-color: var(--gold)
}
.filter-tab.active {
        background: var(--gold);
       color: #000;
       border-color: var(--gold)
}
.history-list {
        display: flex;
       flex-direction: column;
       gap: 10px
}
.history-item {
        display: flex;
       align-items: center;
       gap: 16px;
       padding: 16px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       transition: var(--transition);
       backdrop-filter: blur(10px)
}
.history-item:hover {
        border-color: var(--border-gold)
}
.history-item-icon {
        width: 44px;
       height: 44px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0
}
.history-item-icon .material-icons-round {
        font-size: 22px;
       color: var(--gold)
}
.history-item-info {
        flex: 1;
       min-width: 0
}
.history-item-title {
        font-weight: 600;
       font-size: 0.9rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis
}
.history-item-meta {
        font-size: 0.8rem;
       color: var(--text-muted);
       display: flex;
       gap: 12px;
       margin-top: 4px
}
.history-item-status {
        padding: 3px 8px;
       border-radius: 4px;
       font-size: 0.75rem;
       font-weight: 600
}
.history-item-status.done {
        background: rgba(52, 211, 153, 0.15);
       color: var(--success)
}
.history-item-status.doing {
        background: rgba(96, 165, 250, 0.15);
       color: var(--info)
}
.history-item-status.error {
        background: rgba(248, 113, 113, 0.15);
       color: var(--error)
}
.history-item-actions {
        display: flex;
       gap: 4px
}
.history-item-actions button {
        padding: 8px;
       border-radius: 6px;
       transition: var(--transition)
}
.history-item-actions button:hover {
        background: var(--bg-hover)
}
.history-item-actions .material-icons-round {
        font-size: 20px;
       color: var(--text-secondary)
}
.history-item audio {
        width: 200px;
       height: 32px
}
.audio-flow-toolbar {
        display: flex;
       align-items: center;
       gap: 16px;
       justify-content: space-between;
       padding: 16px 18px;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       background: var(--bg-secondary);
       margin-bottom: 18px;
       flex-wrap: wrap;
}
.audio-flow-toolbar-text {
        display: flex;
       flex-direction: column;
       gap: 4px
}
.audio-flow-toolbar-text small {
        color: var(--text-muted);
       max-width: 720px
}
.audio-flow-select-wrap {
        display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap
}
.audio-flow-list {
        display: flex;
       flex-direction: column;
       gap: 12px
}
.audio-flow-item {
        display: grid;
       grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) auto;
       gap: 18px;
       align-items: center;
       padding: 16px 18px;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       background: var(--bg-secondary)
}
.audio-flow-item.is-short-audio {
       border-color: rgba(239, 68, 68, 0.95);
       border-left: 6px solid #ef4444;
       background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), var(--bg-secondary) 38%);
       box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28), 0 12px 28px rgba(127, 29, 29, 0.22);
}
.audio-flow-main {
        display: flex;
       flex-direction: column;
       gap: 8px;
       min-width: 0
}
.audio-flow-title-row {
        display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap
}
.audio-flow-title {
        font-size: 1rem;
       font-weight: 700;
       color: var(--text-primary)
}
.audio-flow-meta {
        display: flex;
       gap: 14px;
       flex-wrap: wrap;
       color: var(--text-muted);
       font-size: 0.84rem
}
.audio-flow-user {
        display: flex;
       flex-direction: column;
       gap: 4px;
       min-width: 0
}
.audio-flow-user strong {
        color: var(--text-primary)
}
.audio-flow-user-name,
.recent-audio-user-name {
       color: #38bdf8;
       font-weight: 800;
}
.audio-flow-user-email,
.recent-audio-user-email {
       color: #facc15;
       font-weight: 800;
}
.audio-flow-user span,
.audio-flow-user small {
        color: var(--text-muted);
       word-break: break-all
}
.audio-flow-user span .audio-flow-user-email {
       color: #facc15;
}
.short-audio-badge {
       background: rgba(239, 68, 68, 0.18);
       border: 1px solid rgba(239, 68, 68, 0.7);
       color: #fecaca;
}
.audio-flow-audio {
        display: block;
       width: 100%;
       min-width: 220px;
       min-height: 40px;
       height: 40px;
}
.audio-flow-audio-empty {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 12px 16px;
       background: rgba(255,255,255,0.04);
       border: 1px dashed rgba(255,255,255,0.12);
       border-radius: 10px;
       color: var(--text-muted);
       font-size: .85rem;
       font-style: italic;
}

/* ============ ÚLTIMOS ÁUDIOS GERADOS ============ */
.recent-audio-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 16px;
    flex-wrap: wrap;
}
.recent-audio-show-label {
    color: var(--text-secondary);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.recent-audio-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recent-audio-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.recent-audio-row.is-short-audio {
    border-color: rgba(239, 68, 68, 0.95);
    border-left: 6px solid #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), var(--bg-tertiary) 42%);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28), 0 12px 28px rgba(127, 29, 29, 0.22);
}
.recent-audio-row.is-deleted-by-user {
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid rgba(239, 68, 68, 0.6);
}
.recent-audio-row.is-short-audio.is-deleted-by-user {
    border-left-width: 6px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), var(--bg-tertiary) 42%);
}
.recent-audio-meta { min-width: 0; }
.recent-audio-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.recent-audio-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: .95rem;
}
.recent-audio-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.recent-audio-info strong { color: var(--text-secondary); font-weight: 600; }
.recent-audio-text {
    color: var(--text-secondary);
    font-size: .82rem;
    background: rgba(255,255,255,0.025);
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 2px solid var(--gold);
    line-height: 1.45;
    margin-top: 6px;
}
.recent-audio-player {
    display: block;
    width: 100%;
    min-width: 220px;
    min-height: 40px;
    height: 40px;
}
.recent-audio-player-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: .82rem;
    font-style: italic;
}
.recent-audio-actions { display: flex; gap: 8px; }
@media (max-width: 1100px) {
    .recent-audio-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* ============ CONTAGEM TOTAL DE ÁUDIOS ============ */
.audio-stats-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 16px;
    flex-wrap: wrap;
}
.audio-stats-presets {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.audio-stats-preset-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: var(--transition);
}
.audio-stats-preset-btn:hover { color: var(--text-primary); }
.audio-stats-preset-btn.is-active {
    background: var(--gold);
    color: #000;
    box-shadow: 0 0 16px var(--gold-glow);
}
.audio-stats-range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-left: 1px solid var(--border);
}
.audio-stats-range-label {
    color: var(--text-secondary);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.audio-stats-range-label input[type="date"] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: .85rem;
}
.audio-stats-range-label input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
.audio-stats-summary { margin-bottom: 16px; }
.audio-stats-card {
    display: inline-block;
    padding: 16px 22px;
    background: linear-gradient(145deg, rgba(155,77,255,.15), rgba(155,77,255,.04));
    border: 1px solid rgba(155,77,255,.32);
    border-radius: 12px;
    min-width: 240px;
}
.audio-stats-label {
    color: var(--text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.audio-stats-value {
    color: var(--text-primary);
    font-size: 1.85rem;
    font-weight: 800;
    margin: 4px 0;
}
.audio-stats-sub {
    color: var(--text-muted);
    font-size: .8rem;
}
.audio-stats-h4 {
    color: var(--text-secondary);
    margin: 14px 0 10px;
    font-size: 1rem;
}
.audio-stats-buckets { margin-bottom: 16px; }
.audio-stats-bars { display: flex; flex-direction: column; gap: 6px; }
.audio-stats-bar-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    gap: 10px;
    align-items: center;
    font-size: .85rem;
}
.audio-stats-bar-label { color: var(--text-secondary); font-family: var(--font-mono); }
.audio-stats-bar-track {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.audio-stats-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    transition: width .3s ease;
}
.audio-stats-bar-count { color: var(--text-primary); text-align: right; font-weight: 700; }
.audio-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.audio-stats-table th, .audio-stats-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
}
.audio-stats-table th {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
}
.audio-stats-table td.num, .audio-stats-table th.num { text-align: right; font-family: var(--font-mono); }
.audio-flow-actions {
        display: flex;
       align-items: center;
       gap: 8px;
       justify-content: flex-end;
       flex-wrap: wrap
}
.audio-flow-btn {
        display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 8px 12px;
       border-radius: 10px;
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
       color: var(--text-primary);
       cursor: pointer;
       transition: var(--transition)
}
.audio-flow-btn:hover {
        border-color: var(--gold)
}
.audio-flow-btn.danger:hover {
        border-color: #ef4444;
       color: #fecaca
}
.audio-flow-empty {
        padding: 28px;
       text-align: center;
       border: 1px dashed var(--border);
       border-radius: var(--radius);
       color: var(--text-muted)
}
@media (max-width: 1100px) {
    .audio-flow-item {
        grid-template-columns: 1fr;
        align-items: stretch
    }
    .audio-flow-actions {
        justify-content: flex-start
    }
}
.history-mini-list {
        display: flex;
       flex-direction: column;
       gap: 8px
}
.empty-state-mini {
        text-align: center;
       padding: 40px 20px;
       color: var(--text-muted)
}
.empty-state-mini .material-icons-round {
        font-size: 40px;
       margin-bottom: 8px;
       opacity: 0.5
}
/* Mini History Items */.mini-history-item {
        padding: 10px 12px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       margin-bottom: 6px;
       transition: var(--transition)
}
.mini-history-item:hover {
        border-color: var(--border-gold)
}
.mini-history-row {
        display: flex;
       align-items: center;
       gap: 8px
}
.mini-history-info {
        flex: 1;
       min-width: 0
}
.mini-history-title {
        font-size: 0.82rem;
       font-weight: 500;
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis
}
.mini-history-cost {
        font-size: 0.72rem;
       color: var(--text-muted)
}
.mini-history-actions {
        display: flex;
       gap: 2px
}
.mini-history-actions button {
        padding: 4px;
       border-radius: 4px;
       background: none;
       border: none;
       cursor: pointer;
       color: var(--text-secondary);
       transition: var(--transition)
}
.mini-history-actions button:hover {
        background: var(--bg-hover);
       color: var(--gold)
}
.mini-progress {
        height: 3px;
       background: var(--bg-primary);
       border-radius: 2px;
       margin-top: 8px;
       overflow: hidden
}
.mini-progress-bar {
        height: 100%;
       width: 30%;
       background: var(--gold);
       border-radius: 2px;
       animation: miniProgressAnim 1.5s ease-in-out infinite
}
.loading-state {
        display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 60px;
       gap: 12px;
       color: var(--text-muted)
}
.spinner {
        width: 32px;
       height: 32px;
       border: 3px solid var(--border);
       border-top-color: var(--gold);
       border-radius: 50%;
       animation: spin 0.8s linear infinite
}
.pagination {
        display: flex;
       justify-content: center;
       gap: 6px;
       margin-top: 20px
}
.pagination button {
        padding: 8px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.85rem;
       transition: var(--transition)
}
.pagination button.active {
        background: var(--gold);
       color: #000
}
/* ============ MODALS ============ */.modal {
        position: fixed;
       inset: 0;
       z-index: 500;
       display: flex;
       align-items: center;
       justify-content: center
}
.modal-overlay {
        position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px)
}
.modal-content {
        position: relative;
       z-index: 1;
       background: var(--bg-secondary);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       max-height: 85vh;
       overflow: hidden;
       display: flex;
       flex-direction: column
}
.voice-modal-content {
        width: 90%;
       max-width: 900px
}
.model-modal-content {
        width: 90%;
       max-width: 500px
}
.lang-modal-content {
        width: 90%;
       max-width: 340px
}

/* ============ GRADIENT MODAL ============ */
.gradient-modal-content {
        width: 90%;
        max-width: 480px;
}

.gradient-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        padding: 24px;
}

.gradient-option {
        position: relative;
        height: 120px;
        border-radius: var(--radius);
        cursor: pointer;
        transition: var(--transition);
        border: 3px solid transparent;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
}

.gradient-option:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gradient-option.active {
        border-color: #fff;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.gradient-option::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
}

.gradient-option[data-gradient="purple"]::before {
        background: linear-gradient(135deg, #4a148c 0%, #9c27b0 50%, #ce93d8 100%);
}

.gradient-option[data-gradient="green"]::before {
        background: linear-gradient(135deg, #1b5e20 0%, #4caf50 50%, #a5d6a7 100%);
}

.gradient-option[data-gradient="gold"]::before {
        background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #fff8dc 100%);
}

.gradient-option[data-gradient="ice"]::before {
        background: linear-gradient(135deg, #b0bec5 0%, #eceff1 50%, #ffffff 100%);
}

.gradient-option[data-gradient="blue"]::before {
        background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 50%, #9ee7ff 100%);
}

.gradient-option-name {
        position: relative;
        z-index: 1;
        font-weight: 600;
        font-size: 1rem;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gradient-option-check {
        position: relative;
        z-index: 1;
        width: 24px;
        height: 24px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: var(--transition);
}

.gradient-option.active .gradient-option-check {
        opacity: 1;
}

.gradient-option-check .material-icons-round {
        font-size: 18px;
        color: #000;
}
.modal-header {
        display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 24px;
       border-bottom: 1px solid var(--border)
}
.modal-header h3 {
        font-size: 1.1rem;
       font-weight: 600
}
.modal-close {
        padding: 6px;
       border-radius: 6px;
       transition: var(--transition)
}
.modal-close:hover {
        background: var(--bg-hover)
}
.voice-tabs {
        display: flex;
       gap: 4px;
       padding: 12px 24px;
       border-bottom: 1px solid var(--border)
}
.voice-tab {
        padding: 8px 16px;
       border-radius: var(--radius-sm);
       font-size: 0.85rem;
       font-weight: 500;
       transition: var(--transition);
       display: flex;
       align-items: center;
       gap: 6px
}
.voice-tab.active {
        background: var(--gold);
       color: #000
}
.voice-search {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 24px;
       border-bottom: 1px solid var(--border);
       flex: 0 0 auto;
       position: relative;
       z-index: 1;
       background: var(--bg-secondary)
}
.voice-search .material-icons-round {
        color: var(--text-muted)
}
.voice-search input {
        flex: 1;
       background: none;
       border: none;
       outline: none;
       font-size: 0.95rem
}
.voice-list,.model-list {
        overflow-y: auto;
       padding: 16px 24px;
       max-height: 55vh
}
.voice-list {
        display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
       gap: 10px
}
.voice-card {
        padding: 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: var(--transition)
}
.voice-card:hover {
        border-color: var(--gold);
       background: var(--bg-hover)
}
.voice-card-name {
        font-weight: 600;
       font-size: 0.9rem;
       margin-bottom: 4px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis
}
.voice-card-desc {
        font-size: 0.78rem;
       color: var(--text-muted);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       margin-bottom: 8px;
       min-height: 30px
}
.voice-card-tags {
        display: flex;
       gap: 4px;
       flex-wrap: wrap;
       margin-bottom: 8px
}
.voice-card-tags span {
        padding: 2px 6px;
       background: var(--bg-primary);
       border-radius: 3px;
       font-size: 0.7rem;
       color: var(--text-secondary)
}
.voice-card-footer {
        display: flex;
       align-items: center;
       justify-content: space-between
}
.voice-card-footer button {
        padding: 4px 12px;
       background: var(--gold);
       color: #000;
       border-radius: 4px;
       font-size: 0.78rem;
       font-weight: 600;
       transition: var(--transition)
}
.voice-card-footer button:hover {
        opacity: 0.9
}
.model-list {
        display: flex;
       flex-direction: column;
       gap: 10px
}
.model-card {
        padding: 16px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: var(--transition)
}
.model-card:hover {
        border-color: var(--gold)
}
.model-card.active {
        border-color: var(--gold);
       background: var(--bg-hover)
}
.model-card-name {
        font-weight: 600;
       font-size: 0.95rem;
       margin-bottom: 2px
}
.model-card .tag {
        display: inline-block;
       margin-left: 8px
}
.model-card-desc {
        font-size: 0.82rem;
       color: var(--text-muted);
       margin-top: 6px;
       line-height: 1.4
}
.model-card-langs {
        font-size: 0.75rem;
       color: var(--text-muted);
       margin-top: 8px
}
/* ============ LANGUAGE MODAL ============ */.lang-options {
        padding: 16px 24px;
       display: flex;
       flex-direction: column;
       gap: 6px
}
.lang-option {
        padding: 12px 16px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       font-size: 0.95rem;
       text-align: left;
       transition: var(--transition)
}
.lang-option:hover {
        border-color: var(--gold)
}
.lang-option.active {
        background: var(--gold);
       color: #000;
       border-color: var(--gold)
}
/* ============ TOAST ============ */.toast-container {
        position: fixed;
       bottom: 24px;
       right: 24px;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       gap: 8px
}
.toast {
        padding: 14px 20px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.9rem;
       animation: toastIn 0.3s ease;
       box-shadow: var(--shadow);
       max-width: 400px
}
.toast.success {
        border-color: var(--success)
}
.toast.error {
        border-color: var(--error)
}
.toast.info {
        border-color: var(--info)
}
.toast .material-icons-round {
        font-size: 20px
}
.toast.success .material-icons-round {
        color: var(--success)
}
.toast.error .material-icons-round {
        color: var(--error)
}
.toast.info .material-icons-round {
        color: var(--info)
}
@keyframes toastIn {
        from {
            transform: translateX(100%);
           opacity: 0
}
    to {
            transform: translateX(0);
           opacity: 1
}

}
/* ============ RESPONSIVE ============ */@media(max-width:1024px) {
        .tts-settings,    .imagen-settings {
            width: 320px
}

}
@media(max-width:768px) {
        .studio-portal {
            align-items: flex-start;
            padding: 18px 14px 34px
}
    .portal-shell {
            min-height: auto
}
    .portal-header {
            height: auto;
            padding-bottom: 14px;
            gap: 12px
}
    .portal-main {
            padding-top: 54px
}
    .portal-main h1 {
            font-size: 3.7rem
}
    .portal-main p {
            font-size: 1rem
}
    .studio-card-grid {
            grid-template-columns: 1fr;
            margin-top: 34px
}
    .studio-area-card {
            min-height: 360px
}
    .voice-logo,
    .social-logo {
            width: 82px;
            height: 82px;
            border-radius: 24px;
            font-size: 1.34rem
}
    .social-logo {
            width: 76px;
            height: 76px
}
    .edge-logo {
            font-size: 2.3rem
}
        .landing-header {
            width: calc(100% - 24px);
            height: auto;
            padding: 12px 0;
            gap: 12px
}
    .landing-nav {
            display: none
}
    .landing-actions {
            gap: 10px
}
    .landing-link {
            display: none
}
    .landing-brand span {
            font-size: .9rem
}
    .landing-hero {
            margin-top: 70px
}
    .landing-hero h1 {
            font-size: 3.2rem
}
    .console-top, .console-body {
            display: block
}
    .console-body button {
            width: 100%;
            margin-top: 14px;
            padding: 14px
}
    .provider-grid, .workflow-grid, .pricing-grid, .faq-grid {
            grid-template-columns: 1fr
}
    .provider-card.premium {
            order: -1
}
        .sidebar {
            position: fixed;
           left: -100%;
           z-index: 200
}
    .sidebar.open {
            left: 0
}
    .mobile-menu-btn {
            display: flex
}
    .tts-layout,    .imagen-layout {
            flex-direction: column
}
    .tts-settings,    .imagen-settings {
            width: 100%;
           max-height: 50vh;
           border-right: none;
           border-top: 1px solid var(--border)
}
    .tts-editor,    .imagen-editor {
            border-right: none
}
    .voice-modal-content {
            width: 95%;
           max-width: none
}
    .sfx-options,    .dub-options {
            grid-template-columns: 1fr
}

}
  @keyframes miniProgressAnim {
     0% {
     transform: translateX(-100%);

}
 100% {
     transform: translateX(200%);

}
 
}
/* ============ GOOGLE SIGN-IN ============ */.auth-divider {
        display: flex;
       align-items: center;
       gap: 12px;
       margin: 20px 0 16px;
       color: var(--text-muted);
       font-size: 0.85rem;
}
.auth-divider::before, .auth-divider::after {
        content: '';
       flex: 1;
       height: 1px;
       background: var(--border);
}
.google-signin-btn {
        display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 12px 24px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       font-size: 0.95rem;
       font-weight: 500;
       transition: var(--transition);
       color: var(--text-primary);
}
.google-signin-btn:hover {
        border-color: var(--gold);
       background: var(--bg-hover);
       box-shadow: 0 2px 12px rgba(212,168,67,0.1);
}
.google-signin-btn svg {
     flex-shrink: 0;

}
/* ============ CREDITS WARNING POPUP ============ */.credits-warning-content {
        width: 90%;
       max-width: 420px;
       padding: 32px;
       text-align: center;
       animation: warningPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes warningPopIn {
        from {
     transform: scale(0.8);
    opacity: 0;

}
    to {
     transform: scale(1);
    opacity: 1;

}

}
.credits-warning-icon {
        width: 64px;
       height: 64px;
       margin: 0 auto 16px;
       background: linear-gradient(135deg, #fbbf24, #f59e0b);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 0 24px rgba(251,191,36,0.3);
}
.credits-warning-icon .material-icons-round {
        font-size: 32px;
       color: #000;
}
.credits-warning-content h3 {
        font-size: 1.2rem;
       font-weight: 700;
       margin-bottom: 8px;
}
.credits-warning-content p {
        font-size: 0.9rem;
       color: var(--text-secondary);
       line-height: 1.5;
       margin-bottom: 16px;
}
.credits-warning-amount {
        display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 12px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-gold);
       margin-bottom: 16px;
       font-weight: 600;
       color: var(--gold);
}
.credits-warning-amount .material-icons-round {
     font-size: 20px;

}
.credits-warning-toggle {
        justify-content: center;
       font-size: 0.85rem;
       color: var(--text-secondary);
}
/* ============ AUDIO TITLE BAR ============ */.audio-title-bar {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 24px;
       border-bottom: 1px solid var(--border);
       background: var(--bg-secondary);
}
.audio-title-bar .material-icons-round {
        font-size: 20px;
       color: var(--gold);
}
.audio-title-bar input {
        flex: 1;
       background: none;
       border: none;
       outline: none;
       font-size: 0.9rem;
       color: var(--text-primary);
       font-weight: 500;
}
.audio-title-bar input::placeholder {
        color: var(--text-muted);
       font-weight: 400;
}
/* voice-preview-btn e voice-use-btn: estilos herdados removidos — usar os redesenhados em L6834 e L7468 */

.voice-card.voice-high-demand {
    border-color: rgba(251, 191, 36, 0.5) !important;
}

.voice-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
}

.voice-status-badge.maintenance {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

.voice-status-badge.high-demand {
    background: rgba(251, 191, 36, 0.9);
    color: #000;
}

/* ============ PROVIDER MAINTENANCE BUTTON ============ */
.btn-generate:disabled {
    pointer-events: none;
}

.btn-generate[style*="background: #ef4444"] {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.mini-spinner {
        width: 16px;
       height: 16px;
       border: 2px solid rgba(0,0,0,0.2);
       border-top-color: #000;
       border-radius: 50%;
       animation: spin 0.6s linear infinite;
}
/* ============ HISTORY RENAME ============ */.btn-rename-task {
        display: inline-flex;
       align-items: center;
       padding: 2px;
       border-radius: 4px;
       vertical-align: middle;
       margin-left: 4px;
       opacity: 0;
       transition: var(--transition);
}
.history-item:hover .btn-rename-task {
     opacity: 1;

}
.btn-rename-task:hover {
     background: var(--bg-hover);
    color: var(--gold);

}
.history-item-type-badge {
        font-size: 0.7rem;
       padding: 1px 6px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: 3px;
       color: var(--text-muted);
       margin-left: 6px;
       vertical-align: middle;
}
/* ============ ADMIN PANEL ============ */.admin-layout {
        padding: 24px;
       height: 100%;
       overflow-y: auto;
}
.admin-header {
        margin-bottom: 24px;
}
.admin-header h3 {
        font-size: 1.2rem;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 6px;
}
.admin-header h3 .material-icons-round {
     color: var(--gold);

}
.admin-header p {
        font-size: 0.9rem;
       color: var(--text-secondary);
}

/* ElevenLabs Balance Card */
.elevenlabs-balance-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.el-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.el-balance-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.el-balance-item .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.el-balance-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-balance-item .value .material-icons-round {
    font-size: 1.8rem;
}

.el-balance-item.primary .value {
    font-size: 2rem;
    color: var(--gold);
}

.el-balance-item .subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.el-balance-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    padding: 16px;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: 12px;
}

.el-balance-error .material-icons-round {
    font-size: 24px;
}

/* Provider Balances Card */
.provider-balances-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.provider-section {
    margin-bottom: 24px;
}

.provider-section:last-child {
    margin-bottom: 0;
}

.provider-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.provider-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.provider-key-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provider-key-card.error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.provider-key-card .key-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.provider-key-card .key-masked {
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    word-break: break-all;
}

.provider-key-card .key-balance {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.provider-key-card .key-balance .material-icons-round {
    font-size: 1.5rem;
}

.provider-key-card.error .key-balance {
    color: var(--error);
    font-size: 0.9rem;
    font-weight: 600;
}

.provider-key-card .key-currency {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============ USAGE CHARTS ============ */
.usage-filters {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-select,
.filter-input {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: var(--font);
    min-width: 180px;
    cursor: pointer;
    transition: var(--transition);
}

.filter-select:hover,
.filter-input:hover {
    border-color: var(--border-gold);
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.filter-apply-btn {
    padding: 10px 20px;
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    margin-top: auto;
}

.filter-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--gold-glow);
}

.filter-apply-btn .material-icons-round {
    font-size: 1.1rem;
}

.usage-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.usage-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
}

.chart-header {
    margin-bottom: 20px;
}

.chart-header h4 {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.chart-header h4 .material-icons-round {
    font-size: 1.3rem;
    color: var(--gold);
}

.chart-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius);
    z-index: 10;
}

.chart-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.chart-loading p {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.admin-section-header {
    margin-bottom: 16px;
}

.admin-section-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.admin-section-header h3 .material-icons-round {
    color: var(--gold);
}

.admin-section-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-table {
        width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
}
.admin-table th {
        padding: 14px 16px;
       text-align: left;
       font-size: 0.8rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--text-muted);
       background: var(--bg-tertiary);
       border-bottom: 1px solid var(--border);
}
.admin-table td {
        padding: 14px 16px;
       font-size: 0.9rem;
       border-bottom: 1px solid var(--border);
       vertical-align: middle;
}
.admin-table tr:last-child td {
     border-bottom: none;

}
.admin-table tr:hover td {
     background: var(--bg-hover);

}
.admin-user-cell {
        display: flex;
       align-items: center;
       gap: 10px;
}
.admin-avatar {
        width: 32px;
       height: 32px;
       border-radius: 50%;
       object-fit: cover;
       flex-shrink: 0;
}
.admin-avatar-letter {
        width: 32px;
       height: 32px;
       border-radius: 50%;
       background: var(--gold-gradient);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       font-size: 0.85rem;
       color: #000;
       flex-shrink: 0;
}
.admin-badge {
        padding: 3px 8px;
       border-radius: 4px;
       font-size: 0.75rem;
       font-weight: 600;
}
.admin-badge.email {
        background: rgba(96,165,250,0.15);
       color: var(--info);
}
.admin-badge.google {
        background: rgba(52,211,153,0.15);
       color: var(--success);
}
.admin-badge.role-admin {
        background: rgba(168,85,247,0.18);
       color: #d8b4fe;
}
.admin-badge.role-user {
        background: rgba(148,163,184,0.14);
       color: #cbd5e1;
}
.admin-status-cell {
        display: flex;
       flex-direction: column;
       gap: 4px;
}
.admin-status-note {
        font-size: 0.72rem;
       color: var(--text-muted);
}
.admin-credits {
        color: var(--gold);
       font-size: 1rem;
}
.admin-actions {
        display: flex;
       gap: 4px;
}
.admin-btn {
        width: 32px;
       height: 32px;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
}
.admin-btn:hover {
     border-color: var(--gold);

}
.admin-btn .material-icons-round {
     font-size: 18px;

}
.admin-btn.add:hover {
     background: rgba(52,211,153,0.15);
    color: var(--success);

}
.admin-btn.remove:hover {
     background: rgba(248,113,113,0.15);
    color: var(--error);

}
.admin-btn.set:hover {
     background: rgba(212,168,67,0.15);
    color: var(--gold);

}
.admin-btn.role:hover {
     background: rgba(168,85,247,0.15);
    color: #d8b4fe;

}
.admin-btn:disabled {
        opacity: 0.45;
       cursor: not-allowed;
       border-color: var(--border);
}
/* ============ PROVIDER SELECTOR ============ */.provider-selector {
        display: flex;
       gap: 4px;
       background: var(--bg-primary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 3px;
}
.provider-btn {
        flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 8px 6px;
       border-radius: 5px;
       font-size: 0.78rem;
       font-weight: 600;
       transition: var(--transition);
       white-space: nowrap;
}
.provider-btn.active {
        background: var(--bg-card);
       box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.provider-btn:hover:not(.active) {
     background: var(--bg-hover);

}
.provider-dot {
        width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--text-muted);
       flex-shrink: 0;
}
.provider-btn .tag.small {
        font-size: 0.65rem;
       padding: 1px 4px;
       background: rgba(52,211,153,0.15);
       color: var(--success);
       border-radius: 3px;
       font-weight: 700;
}
/* ============ VOICE FILTERS ============ */.voice-filters {
        display: flex;
       gap: 8px;
       padding: 10px 24px;
       border-bottom: 1px solid var(--border);
       flex-wrap: wrap;
}
.voice-filter-select {
        padding: 7px 12px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       color: var(--text-primary);
       font-size: 0.82rem;
       outline: none;
       cursor: pointer;
       min-width: 120px;
}
.voice-filter-select:focus {
     border-color: var(--gold);

}
/* ============ PROVIDER BADGES ============ */.provider-badge {
        font-size: 0.65rem !important;
       font-weight: 700 !important;
       padding: 1px 5px !important;
       border-radius: 3px !important;
}
.provider-badge.elevenlabs {
        background: rgba(96,165,250,0.15) !important;
       color: var(--info) !important;
}
.provider-badge.minimax {
        background: rgba(56,189,248,0.14) !important;
       color: #9ee7ff !important;
}
.provider-badge.edge {
        background: rgba(52,211,153,0.15) !important;
       color: var(--success) !important;
}
/* Voice card cover for Minimax */.voice-card-cover {
        width: 36px;
       height: 36px;
       border-radius: 50%;
       object-fit: cover;
       margin-bottom: 6px;
}
/* Empty state mini */.empty-state-mini {
        display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 40px 20px;
       color: var(--text-muted);
       text-align: center;
       gap: 8px;
}
.empty-state-mini .material-icons-round {
     font-size: 32px;

}
/* ============ DELETE CONFIRMATION MODAL ============ */.delete-modal-content {
        width: 90%;
       max-width: 420px;
       text-align: center;
       padding: 32px 28px 24px;
}
.delete-modal-icon {
        width: 64px;
       height: 64px;
       margin: 0 auto 16px;
       border-radius: 50%;
       background: rgba(248,113,113,0.12);
       display: flex;
       align-items: center;
       justify-content: center;
}
.delete-modal-icon .material-icons-round {
        font-size: 32px;
       color: var(--error);
}
.delete-modal-content h3 {
        font-size: 1.2rem;
       font-weight: 700;
       margin-bottom: 8px;
}
.delete-modal-desc {
        color: var(--text-muted);
       font-size: 0.88rem;
       margin-bottom: 20px;
       line-height: 1.5;
}
.delete-modal-checkbox {
        background: var(--bg-primary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 14px 16px;
       text-align: left;
       margin-bottom: 20px;
}
.delete-modal-checkbox label {
        display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
       font-size: 0.88rem;
       font-weight: 600;
}
.delete-modal-checkbox input[type="checkbox"] {
        width: 18px;
       height: 18px;
       accent-color: var(--gold);
       cursor: pointer;
       flex-shrink: 0;
}
.delete-modal-warning {
        margin-top: 10px;
       font-size: 0.78rem;
       color: var(--warning);
       line-height: 1.5;
       padding-left: 28px;
}
.delete-modal-actions {
        display: flex;
       gap: 10px;
       justify-content: center;
}
.delete-modal-actions .btn-secondary {
        flex: 1;
       padding: 10px 16px;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-weight: 600;
       font-size: 0.9rem;
       cursor: pointer;
       transition: var(--transition);
}
.delete-modal-actions .btn-secondary:hover {
        background: var(--bg-hover);
       border-color: var(--text-muted);
}
.delete-modal-actions .btn-danger {
        flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 10px 16px;
       border-radius: var(--radius-sm);
       border: none;
       background: var(--error);
       color: #fff;
       font-weight: 700;
       font-size: 0.9rem;
       cursor: pointer;
       transition: var(--transition);
}
.delete-modal-actions .btn-danger:hover {
        background: #dc2626;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(248,113,113,0.3);
}
.delete-modal-actions .btn-danger .material-icons-round {
        font-size: 18px;
}
/* ============ VOICE ID DIRECT INPUT ============ */.voice-id-direct {
        padding: 8px 16px;
       border-bottom: 1px solid var(--border);
       background: var(--bg-tertiary);
}
.voice-id-input-row {
        display: flex;
       align-items: center;
       gap: 8px;
}
.voice-id-input-row .material-icons-round {
        font-size: 18px;
       color: var(--gold);
       flex-shrink: 0;
}
.voice-id-input-row input {
        flex: 1;
       padding: 8px 12px;
       background: var(--bg-secondary);
       border: 1px solid var(--border);
       border-radius: 6px;
       font-size: 0.85rem;
       outline: none;
       transition: var(--transition);
}
.voice-id-input-row input:focus {
        border-color: var(--gold);
       box-shadow: 0 0 0 2px var(--gold-glow);
}
.voice-id-input-row input::placeholder {
        color: var(--text-muted);
       font-size: 0.8rem;
}
.btn-small {
        padding: 8px 14px !important;
       font-size: 0.8rem !important;
       border-radius: 6px !important;
       white-space: nowrap;
       flex-shrink: 0;
}
/* ============ CUSTOM VOICE BADGE ============ */.provider-badge.custom {
        background: linear-gradient(135deg, #d4a843, #f0d078) !important;
       color: #000 !important;
       font-weight: 700;
}
/* ============ ADMIN: CUSTOM VOICES SECTION ============ */.admin-section {
        margin-top: 24px;
       padding: 20px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
}
.admin-section-header {
        margin-bottom: 16px;
}
.admin-section-header h4 {
        display: flex;
       align-items: center;
       gap: 8px;
       font-size: 1.1rem;
       font-weight: 600;
       color: var(--gold);
}
.admin-section-header h4 .material-icons-round {
        font-size: 22px;
}
.admin-section-header p {
        color: var(--text-secondary);
       font-size: 0.85rem;
       margin-top: 4px;
}
.custom-voice-form {
        padding: 16px;
       background: var(--bg-tertiary);
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
}
.cv-form-row {
        display: flex;
       gap: 12px;
       margin-bottom: 10px;
}
.cv-form-group {
        flex: 1;
       display: flex;
       flex-direction: column;
       gap: 4px;
}
.cv-form-group.cv-form-wide {
        flex: 2;
}
.cv-form-group label {
        font-size: 0.8rem;
       font-weight: 500;
       color: var(--text-secondary);
}
.cv-form-group input,.cv-form-group select {
        padding: 8px 12px;
       background: var(--bg-secondary);
       border: 1px solid var(--border);
       border-radius: 6px;
       font-size: 0.85rem;
       outline: none;
       transition: var(--transition);
}
.cv-form-group input:focus,.cv-form-group select:focus {
        border-color: var(--gold);
       box-shadow: 0 0 0 2px var(--gold-glow);
}
.cv-form-group input::placeholder {
        color: var(--text-muted);
}
.custom-voices-list {
        margin-top: 16px;
}
.cv-empty {
        text-align: center;
       color: var(--text-muted);
       font-size: 0.9rem;
       padding: 20px;
}
.cv-item {
        display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       margin-bottom: 8px;
       transition: var(--transition);
}
.cv-item:hover {
        border-color: var(--gold);
       background: var(--bg-hover);
}
.cv-item-info {
        display: flex;
       flex-direction: column;
       gap: 4px;
}
.cv-item-info strong {
        font-size: 0.95rem;
       color: var(--text-primary);
}
.cv-item-id {
        font-family: var(--font-mono);
       font-size: 0.75rem;
       color: var(--gold);
       opacity: 0.8;
}
.cv-item-desc {
        font-size: 0.8rem;
       color: var(--text-secondary);
}
.cv-item-tags {
        display: flex;
       gap: 6px;
       margin-top: 4px;
}
.cv-item-tags span {
        font-size: 0.7rem;
       padding: 2px 8px;
       background: var(--bg-secondary);
       border-radius: 10px;
       color: var(--text-secondary);
       border: 1px solid var(--border);
}
/* ============ SCRIPT FILTER PAGE ============ */.sf-container {
        padding: 24px;
       max-width: 1440px;
       margin: 0 auto;
       height: 100%;
       overflow-y: auto;
}
.sf-tabs {
        display: flex;
       gap: 8px;
       margin-bottom: 20px;
}
.sf-tab-btn {
        padding: 10px 22px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       color: var(--text-secondary);
       border-radius: var(--radius-sm);
       font-weight: 600;
       font-size: 0.9rem;
       transition: var(--transition);
}
.sf-tab-btn.active {
        background: var(--gold-gradient);
       color: #000;
       border-color: var(--gold);
}
.sf-tab-btn:hover:not(.active) {
        background: var(--bg-hover);
       color: var(--text-primary);
       border-color: var(--gold);
}
.sf-tab-content {
        display: none;
}
.sf-tab-content.active {
        display: block;
}
.sf-grid {
        display: grid;
       grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.3fr);
       gap: 20px;
       align-items: start;
}
.sf-card {
        background: var(--bg-card);
       backdrop-filter: blur(12px);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 20px;
}
.sf-label {
        display: block;
       margin: 14px 0 6px;
       font-weight: 600;
       font-size: 0.85rem;
       color: var(--text-secondary);
}
.sf-label:first-child {
        margin-top: 0;
}
.sf-input {
        width: 100%;
       padding: 12px 14px;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-size: 0.9rem;
       outline: none;
       transition: var(--transition);
}
.sf-input:focus {
        border-color: var(--gold);
       box-shadow: 0 0 0 3px var(--gold-glow);
}
.sf-textarea {
        width: 100%;
       padding: 14px;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-size: 0.9rem;
       outline: none;
       min-height: 240px;
       resize: vertical;
       line-height: 1.65;
       transition: var(--transition);
}
.sf-textarea:focus {
        border-color: var(--gold);
       box-shadow: 0 0 0 3px var(--gold-glow);
}
.sf-textarea-small {
        min-height: 100px;
}
.sf-select {
        width: 100%;
       padding: 12px 14px;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border);
       background: var(--bg-tertiary);
       color: var(--text-primary);
       font-size: 0.9rem;
       outline: none;
       appearance: none;
       cursor: pointer;
       transition: var(--transition);
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239a9ab0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 12px center;
}
.sf-select:focus {
        border-color: var(--gold);
       box-shadow: 0 0 0 3px var(--gold-glow);
}
.sf-voice-model-row {
        display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
       margin-top: 4px;
}
.sf-select-group {
        display: flex;
       flex-direction: column;
}
.sf-hint {
        color: var(--text-muted);
       font-size: 0.78rem;
       margin-top: 6px;
       line-height: 1.5;
}
.sf-hint .sf-hint-alert {
        color: var(--gold);
       font-weight: 700;
}
.sf-buttons {
        display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 16px;
}
.sf-btn {
        padding: 10px 16px;
       border: none;
       border-radius: var(--radius-sm);
       cursor: pointer;
       font-weight: 700;
       font-size: 0.85rem;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       transition: var(--transition);
}
.sf-btn:hover {
        transform: translateY(-1px);
       filter: brightness(1.15);
}
.sf-btn .material-icons-round {
        font-size: 18px;
}
.sf-btn-filter {
        background: var(--gold);
       color: #001018;
}
.sf-btn-save {
        background: var(--success);
       color: #fff;
}
.sf-btn-copy {
        background: var(--gold-light);
       color: #fff;
}
.sf-btn-generate {
        background: var(--gold-gradient);
       color: #000;
       box-shadow: 0 0 12px var(--gold-glow);
}
.sf-btn-generate:hover {
        box-shadow: var(--shadow-gold);
}
.sf-btn-generate.loading {
        pointer-events: none;
       opacity: 0.7;
}
.sf-btn-clear {
        background: var(--bg-tertiary);
       color: var(--text-secondary);
       border: 1px solid var(--border);
}
.sf-stats {
        display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 8px;
       margin-top: 16px;
}
.sf-stat {
        background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 10px 12px;
       text-align: center;
}
.sf-stat small {
        display: block;
       color: var(--text-muted);
       font-size: 0.72rem;
       margin-bottom: 4px;
       text-transform: uppercase;
       letter-spacing: 0.05em;
}
.sf-stat strong {
        font-size: 1rem;
       color: var(--gold);
}
.sf-preview {
        min-height: 500px;
       max-height: 72vh;
       overflow: auto;
       white-space: pre-wrap;
       word-break: break-word;
       background: var(--bg-tertiary);
       border: 1px dashed var(--border);
       border-radius: var(--radius-sm);
       padding: 18px 20px;
       line-height: 1.85;
       font-size: 0.85rem;
       color: var(--text-secondary);
}
.sf-preview-title {
        font-size: 1.05rem;
       font-weight: 800;
       text-transform: uppercase;
       margin-bottom: 18px;
       display: block;
       line-height: 1.35;
       letter-spacing: 0.4px;
       color: var(--gold);
}
@media (max-width: 1100px) {
        .sf-grid {
            grid-template-columns: 1fr;
   
}
    .sf-preview {
            min-height: 300px;
   
}

}
@media (max-width: 600px) {
        .sf-container {
            padding: 12px;
   
}
    .sf-voice-model-row {
            grid-template-columns: 1fr;
   
}
    .sf-stats {
            grid-template-columns: 1fr;
   
}

}
/* ============ SF VOICE MANAGER ============ */.sf-voice-section {
        margin-top: 4px;
}
.sf-voice-add-form {
        display: grid;
       grid-template-columns: 1fr 1fr 0.7fr auto;
       gap: 8px;
       align-items: end;
       margin-bottom: 12px;
}
.sf-voice-add-form .sf-input {
        font-size: 0.82rem;
       padding: 10px 12px;
}
.sf-voice-add-form .sf-btn {
        height: 40px;
       white-space: nowrap;
}
.sf-voice-list {
        display: flex;
       flex-direction: column;
       gap: 6px;
       max-height: 220px;
       overflow-y: auto;
       padding-right: 4px;
}
.sf-voice-empty {
        color: var(--text-muted);
       font-size: 0.82rem;
       text-align: center;
       padding: 18px;
       border: 1px dashed var(--border);
       border-radius: var(--radius-sm);
}
.sf-voice-card {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 14px;
       background: var(--bg-tertiary);
       border: 2px solid var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: var(--transition);
}
.sf-voice-card:hover {
        border-color: var(--gold);
       background: var(--bg-hover);
}
.sf-voice-card.selected {
        border-color: var(--gold);
       background: rgba(212, 168, 67, 0.12);
       box-shadow: 0 0 12px var(--gold-glow);
}
.sf-voice-card .sf-vc-info {
        flex: 1;
       min-width: 0;
}
.sf-voice-card .sf-vc-name {
        font-weight: 700;
       font-size: 0.9rem;
       color: var(--text-primary);
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
}
.sf-voice-card .sf-vc-detail {
        font-size: 0.75rem;
       color: var(--text-muted);
       display: flex;
       gap: 8px;
       margin-top: 2px;
}
.sf-voice-card .sf-vc-detail span {
        display: inline-flex;
       align-items: center;
       gap: 3px;
}
.sf-voice-card .sf-vc-actions {
        display: flex;
       gap: 4px;
       flex-shrink: 0;
}
.sf-vc-btn {
        width: 34px;
       height: 34px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
       border: 1px solid var(--border);
       background: var(--bg-secondary);
}
.sf-vc-btn:hover {
        border-color: var(--gold);
       background: var(--bg-hover);
}
.sf-vc-btn .material-icons-round {
        font-size: 18px;
}
.sf-vc-btn.sf-vc-play {
        color: var(--gold);
}
.sf-vc-btn.sf-vc-play.playing {
        background: var(--gold);
       color: #000;
       border-color: var(--gold);
}
.sf-vc-btn.sf-vc-del {
        color: var(--error);
}
.sf-vc-btn.sf-vc-del:hover {
        background: rgba(248, 113, 113, 0.15);
       border-color: var(--error);
}
.sf-voice-card .sf-vc-selected-badge {
        display: none;
       font-size: 0.7rem;
       font-weight: 700;
       color: var(--gold);
       background: rgba(212, 168, 67, 0.15);
       padding: 2px 8px;
       border-radius: 10px;
       white-space: nowrap;
}
.sf-voice-card.selected .sf-vc-selected-badge {
        display: inline;
}
@media (max-width: 700px) {
        .sf-voice-add-form {
            grid-template-columns: 1fr;
   
}

}
/* ============ SF AUDIO HISTORY ============ */.sf-audio-history {
        margin-top: 24px;
       background: var(--bg-secondary);
       border: 1px solid var(--border);
       border-radius: var(--radius);
}
.sf-ah-header {
        display: flex;
       align-items: center;
       gap: 8px;
       padding: 14px 18px;
       border-bottom: 1px solid var(--border);
       background: var(--bg-tertiary);
       border-radius: var(--radius) var(--radius) 0 0;
}
.sf-ah-title {
        font-weight: 700;
       font-size: 0.9rem;
       color: var(--text-primary);
       flex: 1;
}
.sf-ah-badge {
        background: var(--gold);
       color: #000;
       font-size: 0.7rem;
       font-weight: 700;
       min-width: 20px;
       height: 20px;
       border-radius: 10px;
       padding: 0 6px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
}
.sf-ah-badge:empty {
     display: none;

}
.sf-ah-clear-btn {
        background: none;
       border: 1px solid var(--border);
       color: var(--text-muted);
       border-radius: var(--radius-sm);
       width: 30px;
       height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: var(--transition);
}
.sf-ah-clear-btn:hover {
     border-color: var(--error);
    color: var(--error);

}
.sf-ah-clear-btn .material-icons-round {
     font-size: 17px;

}
.sf-ah-list {
        padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
       max-height: 420px;
       overflow-y: auto;
}
.sf-ah-empty {
        color: var(--text-muted);
       font-size: 0.82rem;
       text-align: center;
       padding: 24px;
}
.sf-ah-card {
        display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 14px;
       background: var(--bg-tertiary);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       transition: var(--transition);
}
.sf-ah-card:hover {
     border-color: var(--gold);

}
.sf-ah-card .sf-ah-icon {
        width: 38px;
       height: 38px;
       border-radius: 50%;
       background: rgba(212, 168, 67, 0.12);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       color: var(--gold);
}
.sf-ah-card .sf-ah-icon .material-icons-round {
     font-size: 20px;

}
.sf-ah-info {
        flex: 1;
       min-width: 0;
}
.sf-ah-name {
        font-weight: 700;
       font-size: 0.88rem;
       color: var(--text-primary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
}
.sf-ah-meta {
        font-size: 0.73rem;
       color: var(--text-muted);
       margin-top: 2px;
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
}
.sf-ah-expires {
        color: var(--warning, #f59e0b);
       font-weight: 600;
}
.sf-ah-actions {
        display: flex;
       gap: 4px;
       flex-shrink: 0;
}
.sf-ah-btn {
        width: 34px;
       height: 34px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
       border: 1px solid var(--border);
       background: var(--bg-secondary);
       cursor: pointer;
}
.sf-ah-btn .material-icons-round {
     font-size: 17px;

}
.sf-ah-btn.sf-ah-play {
     color: var(--gold);

}
.sf-ah-btn.sf-ah-play.playing {
     background: var(--gold);
    color: #000;
    border-color: var(--gold);

}
.sf-ah-btn.sf-ah-dl {
     color: #6ee7b7;

}
.sf-ah-btn.sf-ah-dl:hover {
     border-color: #6ee7b7;
    background: rgba(110,231,183,0.1);

}
.sf-ah-btn.sf-ah-del {
     color: var(--error);

}
.sf-ah-btn.sf-ah-del:hover {
     border-color: var(--error);
    background: rgba(248,113,113,0.12);

}
.sf-ah-card.generating .sf-ah-icon {
     color: var(--gold);
    animation: spin 1.2s linear infinite;

}
@keyframes spin {
     to {
     transform: rotate(360deg);

}
 
}
audio.sf-ah-audio {
     display: none;

}
/* ============================================================   CONTROLE DE CLIENTES — REDESIGN ULTRA PREMIUM 3D   Neon Glow • Glass Morphism • 3D Elevation • Vivid Colors   ============================================================ *//* ---- CSS Vars locais do módulo ---- */.clientes-page, .client-modal-wrapper {
       --cl-purple: #1d4ed8;
       --cl-purple-bright: #38bdf8;
       --cl-cyan: #06b6d4;
       --cl-cyan-bright: #22d3ee;
       --cl-gold: #f59e0b;
       --cl-gold-bright: #fcd34d;
       --cl-pink: #ec4899;
       --cl-green: #10b981;
       --cl-blue: #3b82f6;
       --cl-orange: #f97316;
       --cl-neon-purple: rgba(124, 58, 237, 0.6);
       --cl-neon-cyan: rgba(6, 182, 212, 0.6);
       --cl-neon-gold: rgba(245, 158, 11, 0.5);
       --cl-glass: rgba(15, 15, 30, 0.7);
       --cl-glass-border: rgba(255,255,255,0.08);
       --cl-glass-border-hover: rgba(255,255,255,0.18);
}
/* ---- Page Layout ---- */.clientes-page {
        padding: 28px;
       min-height: 100%;
       display: flex;
       flex-direction: column;
       gap: 24px;
       overflow-y: auto;
       max-height: calc(100vh - var(--topbar-h));
       box-sizing: border-box;
       background:
       radial-gradient(ellipse at 10% 0%, rgba(29,78,216,0.14) 0%, transparent 50%),
       radial-gradient(ellipse at 90% 100%, rgba(56,189,248,0.10) 0%, transparent 50%);
}
/* ---- Stats Bar ---- */.clients-stats-bar {
        display: flex;
       gap: 16px;
       flex-wrap: wrap;
}
.client-stat-card {
        display: flex;
       align-items: center;
       gap: 16px;
       padding: 20px 24px;
       background: var(--cl-glass);
       border: 1px solid var(--cl-glass-border);
       border-radius: 18px;
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       flex: 1;
       min-width: 160px;
       cursor: default;
       transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
       transform-style: preserve-3d;
       box-shadow:        0 2px 0 rgba(255,255,255,0.05) inset,        0 8px 32px rgba(0,0,0,0.4),        0 1px 0 rgba(255,255,255,0.06);
       position: relative;
       overflow: hidden;
}
.client-stat-card::before {
        content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
       pointer-events: none;
       border-radius: inherit;
}
.client-stat-card:hover {
        border-color: var(--cl-glass-border-hover);
       transform: translateY(-6px) scale(1.01);
       box-shadow:        0 2px 0 rgba(255,255,255,0.07) inset,        0 20px 60px rgba(0,0,0,0.5),        0 0 30px rgba(56,189,248,0.12);
}
.client-stat-card:nth-child(1):hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(56,189,248,0.18);

}
.client-stat-card:nth-child(2):hover {
     box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245,158,11,0.25);

}
.client-stat-card.bonus-stat:hover   {
     box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245,158,11,0.4);

}
.client-stat-card .material-icons-round {
        font-size: 32px;
       color: var(--cl-purple-bright);
       filter: drop-shadow(0 0 8px rgba(56,189,248,0.45));
       transition: all 0.3s ease;
}
.client-stat-card:hover .material-icons-round {
        transform: scale(1.15) rotate(-5deg);
}
.bonus-stat .material-icons-round {
        color: var(--cl-gold-bright);
       filter: drop-shadow(0 0 10px rgba(245,158,11,0.7));
}
.client-stat-card:nth-child(2) .material-icons-round {
        color: var(--cl-gold);
       filter: drop-shadow(0 0 8px rgba(245,158,11,0.5));
}
.client-stat-card .stat-value {
        display: block;
       font-size: 1.6rem;
       font-weight: 800;
       color: #fff;
       line-height: 1;
       letter-spacing: -0.5px;
       background: linear-gradient(135deg, #fff, rgba(255,255,255,0.75));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
}
.bonus-stat .stat-value {
        background: linear-gradient(135deg, var(--cl-gold-bright), var(--cl-gold));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       filter: drop-shadow(0 0 8px rgba(245,158,11,0.5));
}
.client-stat-card .stat-label {
        display: block;
       font-size: 0.72rem;
       color: rgba(255,255,255,0.45);
       margin-top: 4px;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 0.08em;
}
.client-stat-card .stat-estimate {
       display: block;
       margin-top: 3px;
       color: rgba(255,255,255,0.58);
       font-size: 0.68rem;
       font-weight: 700;
       letter-spacing: 0;
       text-transform: none;
}
/* ---- Toolbar ---- */.clients-toolbar {
        display: flex;
       align-items: center;
       gap: 14px;
}
.client-search-wrapper {
        flex: 1;
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 18px;
       background: var(--cl-glass);
       border: 1px solid var(--cl-glass-border);
       border-radius: 14px;
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       transition: all 0.3s ease;
       box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.client-search-wrapper:focus-within {
        border-color: var(--cl-purple-bright);
       box-shadow:        0 4px 20px rgba(0,0,0,0.3),        0 0 0 3px rgba(56,189,248,0.18),        0 0 20px rgba(56,189,248,0.12);
}
.client-search-wrapper .material-icons-round {
        color: rgba(255,255,255,0.35);
       font-size: 20px;
       transition: color 0.3s;
}
.client-search-wrapper:focus-within .material-icons-round {
        color: var(--cl-purple-bright);
}
.client-search-wrapper input {
        flex: 1;
       background: transparent;
       border: none;
       outline: none;
       font-size: 0.92rem;
       color: var(--text-primary);
}
.client-search-wrapper input::placeholder {
        color: var(--text-muted);
}
/* Botão Novo Cliente — Neon 3D */#btn-new-client {
        padding: 12px 22px;
       font-size: 0.88rem;
       font-weight: 700;
       border-radius: 14px;
       background: linear-gradient(135deg, var(--cl-purple), var(--cl-purple-bright));
       color: #fff;
       border: none;
       position: relative;
       overflow: hidden;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       box-shadow:        0 4px 0 rgba(0,0,0,0.4),        0 8px 24px rgba(56,189,248,0.26),        0 0 40px rgba(56,189,248,0.14),        inset 0 1px 0 rgba(255,255,255,0.2);
       text-shadow: 0 1px 4px rgba(0,0,0,0.3);
       white-space: nowrap;
}
#btn-new-client::before {
        content: '';
       position: absolute;
       top: 0;
    left: -100%;
       width: 100%;
    height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
       transition: left 0.5s ease;
}
#btn-new-client:hover::before {
     left: 100%;

}
#btn-new-client:hover {
        transform: translateY(-4px);
       box-shadow:        0 8px 0 rgba(0,0,0,0.4),        0 16px 40px rgba(56,189,248,0.42),        0 0 60px rgba(56,189,248,0.22),        inset 0 1px 0 rgba(255,255,255,0.25);
}
#btn-new-client:active {
        transform: translateY(0px);
       box-shadow:        0 2px 0 rgba(0,0,0,0.4),        0 4px 16px rgba(56,189,248,0.26);
}
/* ---- Tree / Mapa Mental ---- */.clients-tree {
     flex: 1;
     overflow: hidden;
     position: relative;
     background: var(--bg-primary) !important;
}
.client-tree-root {
     display: flex;
    flex-direction: column;
    gap: 20px;

}
.client-flat-list {
        display: grid;
       grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
       gap: 16px;
}
.client-node {
     display: flex;
    flex-direction: column;

}
/* ---- Children connector ---- */.client-children {
        display: flex;
       margin-left: 40px;
       position: relative;
}
.client-branch-line {
        position: absolute;
       left: -20px;
       top: 0;
       bottom: 20px;
       width: 2px;
       background: linear-gradient(to bottom,        var(--cl-purple-bright),        rgba(6,182,212,0.3),        transparent    );
       border-radius: 2px;
}
.client-children-cards {
        flex: 1;
       display: flex;
       flex-direction: column;
       gap: 12px;
       padding-top: 12px;
}
/* ---- Client Card — 3D Premium ---- */.client-card {
        background: var(--cl-glass);
       border: 1px solid var(--cl-glass-border);
       border-radius: 20px;
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       overflow: hidden;
       position: relative;
       transition: all 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
       transform-style: preserve-3d;
       box-shadow:        0 4px 0 rgba(0,0,0,0.5),        0 12px 40px rgba(0,0,0,0.45),        0 1px 0 rgba(255,255,255,0.07) inset;
}
/* Sheen layer */.client-card::before {
        content: '';
       position: absolute;
       top: 0;
    left: 0;
    right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
       pointer-events: none;
}
/* Glow orb on hover */.client-card::after {
        content: '';
       position: absolute;
       width: 120px;
       height: 120px;
       border-radius: 50%;
       filter: blur(50px);
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.4s ease;
       top: -20px;
       right: -20px;
}
.client-card:hover::after {
     opacity: 1;

}
.client-card:hover {
        border-color: var(--cl-glass-border-hover);
       transform: translateY(-8px) scale(1.008);
       box-shadow:        0 12px 0 rgba(0,0,0,0.5),        0 28px 70px rgba(0,0,0,0.55),        0 1px 0 rgba(255,255,255,0.1) inset;
}
/* Root cards — purple glow */.root-card {
        border-left: 3px solid var(--cl-purple-bright);
       background: linear-gradient(135deg,        rgba(30,15,60,0.85) 0%,        rgba(15,10,40,0.9) 100%    );
}
.root-card::after {
     background: var(--cl-purple);

}
.root-card:hover {
        box-shadow:        0 12px 0 rgba(0,0,0,0.5),        0 28px 70px rgba(0,0,0,0.55),        0 0 50px rgba(56,189,248,0.18);
       border-left-color: #bf7af0;
}
/* Child cards — cyan glow */.child-card {
        border-left: 3px solid var(--cl-cyan);
       background: linear-gradient(135deg,        rgba(5,25,45,0.85) 0%,        rgba(5,15,35,0.9) 100%    );
}
.child-card::after {
     background: var(--cl-cyan);

}
.child-card:hover {
        box-shadow:        0 12px 0 rgba(0,0,0,0.5),        0 28px 70px rgba(0,0,0,0.55),        0 0 50px rgba(6,182,212,0.2);
       border-left-color: var(--cl-cyan-bright);
}
/* Deep cards — blue glow */.deep-card {
        border-left: 3px solid var(--cl-blue);
       background: linear-gradient(135deg,        rgba(5,15,40,0.8) 0%,        rgba(5,10,30,0.85) 100%    );
}
.deep-card::after {
     background: var(--cl-blue);

}
.deep-card:hover {
        box-shadow:        0 12px 0 rgba(0,0,0,0.5),        0 28px 70px rgba(0,0,0,0.55),        0 0 50px rgba(59,130,246,0.2);
}
/* ---- Card Header ---- */.client-card-header {
        display: flex;
       align-items: flex-start;
       gap: 14px;
       padding: 18px 18px 12px;
}
/* ---- Avatar — 3D ---- */.client-avatar {
        width: 48px;
       height: 48px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       font-size: 1rem;
       flex-shrink: 0;
       color: #fff;
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       position: relative;
       box-shadow:        0 4px 12px rgba(0,0,0,0.4),        0 1px 0 rgba(255,255,255,0.2) inset;
}
.client-card:hover .client-avatar {
        transform: scale(1.12) rotate(-3deg);
}
.color-0 {
     background: linear-gradient(135deg, #d4a843, #f59e0b);
    box-shadow: 0 4px 16px rgba(245,158,11,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;

}
.color-1 {
    background: var(--gold-gradient);
    box-shadow: 0 4px 16px var(--gold-glow), 0 1px 0 rgba(255,255,255,0.2) inset;

}
.color-2 {
     background: linear-gradient(135deg, #0891b2, #06b6d4);
    box-shadow: 0 4px 16px rgba(6,182,212,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;

}
.color-3 {
     background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 4px 16px rgba(16,185,129,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;

}
.color-4 {
     background: linear-gradient(135deg, #be123c, #f43f5e);
    box-shadow: 0 4px 16px rgba(244,63,94,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;

}
.color-5 {
     background: linear-gradient(135deg, #c2410c, #f97316);
    box-shadow: 0 4px 16px rgba(249,115,22,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;

}
/* ---- Client Info ---- */.client-info {
     flex: 1;
    min-width: 0;

}
.client-name {
        font-size: 1.02rem;
       font-weight: 700;
       color: #fff;
       margin-bottom: 6px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       letter-spacing: -0.2px;
}
.client-meta {
        display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 5px;
}
.client-meta span,.client-code {
        display: flex;
       align-items: center;
       gap: 3px;
       font-size: 0.77rem;
       color: rgba(255,255,255,0.55);
}
.client-meta .material-icons-round,.client-code .material-icons-round {
        font-size: 12px;
}
.client-code {
        background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
       border: 1px solid rgba(245,158,11,0.3);
       border-radius: 20px;
       padding: 2px 10px;
       color: var(--cl-gold-bright);
       font-weight: 700;
       font-family: var(--font-mono);
       font-size: 0.76rem;
       letter-spacing: 0.05em;
       box-shadow: 0 0 12px rgba(245,158,11,0.15);
       transition: all 0.3s ease;
}
.client-card:hover .client-code {
        box-shadow: 0 0 20px rgba(245,158,11,0.3);
       border-color: rgba(245,158,11,0.5);
}
.client-ref {
        display: flex;
       align-items: center;
       gap: 4px;
       font-size: 0.76rem;
       color: rgba(255,255,255,0.35);
       margin-top: 2px;
}
.client-ref .material-icons-round {
     font-size: 12px;

}
.client-ref strong {
     color: rgba(255,255,255,0.6);

}
/* ---- Card Actions — 3D Buttons ---- */.client-card-actions {
        display: flex;
       gap: 6px;
       flex-shrink: 0;
}
.cc-btn {
        width: 32px;
       height: 32px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
       border: 1px solid rgba(255,255,255,0.08);
       background: rgba(255,255,255,0.04);
       position: relative;
       overflow: hidden;
       box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.cc-btn .material-icons-round {
     font-size: 16px;
    transition: transform 0.2s ease;

}
.cc-btn-add {
     color: var(--cl-gold);

}
.cc-btn-add:hover {
        background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,158,11,0.15));
       border-color: var(--cl-gold);
       color: var(--cl-gold-bright);
       transform: translateY(-3px) scale(1.1);
       box-shadow: 0 6px 16px rgba(245,158,11,0.35), 0 0 20px rgba(245,158,11,0.2);
}
.cc-btn-edit {
     color: rgba(255,255,255,0.4);

}
.cc-btn-edit:hover {
        background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.1));
       border-color: #3b82f6;
       color: #60a5fa;
       transform: translateY(-3px) scale(1.1);
       box-shadow: 0 6px 16px rgba(59,130,246,0.3), 0 0 20px rgba(59,130,246,0.15);
}
.cc-btn-delete {
     color: rgba(255,255,255,0.3);

}
.cc-btn-delete:hover {
        background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.1));
       border-color: #f43f5e;
       color: #fb7185;
       transform: translateY(-3px) scale(1.1);
       box-shadow: 0 6px 16px rgba(244,63,94,0.3), 0 0 20px rgba(244,63,94,0.15);
}
.cc-btn:hover .material-icons-round {
     transform: scale(1.15);

}
/* ---- Card Body ---- */.client-card-body {
     padding: 0 18px 18px;

}
.client-credits-row {
        display: flex;
       gap: 8px;
       flex-wrap: wrap;
       margin-bottom: 12px;
}
.client-credit-item {
        display: flex;
       align-items: center;
       gap: 6px;
       padding: 7px 13px;
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(255,255,255,0.07);
       border-radius: 24px;
       font-size: 0.8rem;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.client-credit-item:hover {
        background: rgba(255,255,255,0.07);
       border-color: rgba(255,255,255,0.14);
       transform: translateY(-1px);
}
.client-credit-item .material-icons-round {
        font-size: 14px;
       color: rgba(255,255,255,0.35);
}
.credit-label {
        color: rgba(255,255,255,0.4);
       font-size: 0.73rem;
       font-weight: 500;
}
.credit-value {
        font-weight: 800;
       color: rgba(255,255,255,0.9);
       font-family: var(--font-mono);
       font-size: 0.85rem;
}
.has-bonus {
        border-color: rgba(245,158,11,0.3);
       background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.04));
       box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 16px rgba(245,158,11,0.1);
}
.has-bonus .material-icons-round {
     color: var(--cl-gold);

}
.bonus-value {
        color: var(--cl-gold-bright);
       text-shadow: 0 0 12px rgba(245,158,11,0.6);
}
/* ---- Bonus Bar — Premium ---- */.client-bonus-bar {
        display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 12px 16px;
       background: linear-gradient(135deg,        rgba(245,158,11,0.12),        rgba(245,158,11,0.06)    );
       border: 1px solid rgba(245,158,11,0.3);
       border-radius: 14px;
       margin-bottom: 12px;
       flex-wrap: wrap;
       position: relative;
       overflow: hidden;
       box-shadow: 0 0 20px rgba(245,158,11,0.1), inset 0 1px 0 rgba(245,158,11,0.1);
}
.client-bonus-bar::before {
        content: '';
       position: absolute;
       top: 0;
    left: 0;
    right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(245,158,11,0.4), transparent);
}
.bonus-info {
        display: flex;
       align-items: center;
       gap: 8px;
       font-size: 0.83rem;
       color: rgba(255,255,255,0.7);
}
.bonus-info .material-icons-round {
        font-size: 18px;
       color: var(--cl-gold-bright);
       filter: drop-shadow(0 0 6px rgba(245,158,11,0.7));
}
.bonus-info strong {
        color: var(--cl-gold-bright);
       font-family: var(--font-mono);
       font-size: 1.05em;
       text-shadow: 0 0 16px rgba(245,158,11,0.5);
}
/* Botão Bônus Pago */.btn-pay-bonus {
        display: flex;
       align-items: center;
       gap: 6px;
       padding: 8px 16px;
       background: linear-gradient(135deg, var(--cl-gold), var(--cl-gold-bright));
       color: #000;
       font-weight: 800;
       font-size: 0.78rem;
       border-radius: 24px;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       white-space: nowrap;
       box-shadow:        0 4px 0 rgba(0,0,0,0.4),        0 8px 24px rgba(245,158,11,0.35),        0 0 30px rgba(245,158,11,0.2),        inset 0 1px 0 rgba(255,255,255,0.3);
       letter-spacing: 0.01em;
       position: relative;
       overflow: hidden;
}
.btn-pay-bonus::before {
        content: '';
       position: absolute;
       top: 0;
    left: -100%;
       width: 100%;
    height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
       transition: left 0.4s ease;
}
.btn-pay-bonus:hover::before {
     left: 100%;

}
.btn-pay-bonus:hover {
        transform: translateY(-4px);
       box-shadow:        0 8px 0 rgba(0,0,0,0.4),        0 16px 40px rgba(245,158,11,0.55),        0 0 50px rgba(245,158,11,0.35),        inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-pay-bonus:active {
     transform: translateY(0);

}
.btn-pay-bonus .material-icons-round {
     font-size: 15px;

}
/* ---- Purchases History ---- */.client-purchases {
        border-top: 1px solid rgba(255,255,255,0.05);
       padding-top: 12px;
}
.purchases-label {
        display: flex;
       align-items: center;
       gap: 5px;
       font-size: 0.7rem;
       color: rgba(255,255,255,0.3);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       margin-bottom: 8px;
}
.purchases-label .material-icons-round {
     font-size: 13px;

}
.purchase-item {
        display: flex;
       align-items: center;
       gap: 8px;
       padding: 6px 0;
       font-size: 0.79rem;
       border-bottom: 1px solid rgba(255,255,255,0.03);
       transition: background 0.2s ease;
}
.purchase-item:last-child {
     border-bottom: none;

}
.purchase-item .material-icons-round {
     font-size: 14px;
    color: var(--cl-gold);

}
.purchase-credits {
     font-weight: 800;
    color: rgba(255,255,255,0.88);
    font-family: var(--font-mono);

}
.purchase-desc {
     flex: 1;
    color: rgba(255,255,255,0.35);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.purchase-bonus {
     font-size: 0.74rem;
    color: var(--cl-gold);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(245,158,11,0.4);

}
.purchase-date {
     font-size: 0.71rem;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;

}
/* ---- Empty State ---- */.clients-empty {
        display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 20px;
       padding: 100px 20px;
       color: rgba(255,255,255,0.35);
       text-align: center;
}
.clients-empty .material-icons-round {
        font-size: 72px;
       background: linear-gradient(135deg, var(--cl-purple-bright), var(--cl-cyan));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       filter: drop-shadow(0 0 20px rgba(56,189,248,0.26));
       animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
        0%, 100% {
     transform: translateY(0);

}
    50% {
     transform: translateY(-10px);

}

}
.clients-empty p {
        font-size: 1rem;
       color: rgba(255,255,255,0.4);
       font-weight: 500;
}
/* ---- Modals — Premium 3D ---- */.client-modal-wrapper {
        display: none;
       position: fixed;
       inset: 0;
       z-index: 999999;
       align-items: center;
       justify-content: center;
       padding: 16px;
       box-sizing: border-box;
       overflow-y: auto;
}
.client-modal-wrapper.active {
     display: flex;
}
.client-modal-overlay {
        position: absolute;
       inset: 0;
       background: rgba(5,5,15,0.8);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
}
.client-modal-box {
        position: relative;
       z-index: 1;
       width: 100%;
       max-width: 460px;
       max-height: 90vh;
       overflow-y: auto;
       overflow-x: hidden;
       margin: 16px auto;
       background: linear-gradient(160deg, rgba(20,12,45,0.97) 0%, rgba(12,8,30,0.97) 100%);
       border: 1px solid rgba(56,189,248,0.22);
       border-radius: 24px;
       box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 40px 80px rgba(0,0,0,0.7), 0 0 60px rgba(56,189,248,0.12), 0 -1px 0 rgba(255,255,255,0.06) inset;
       padding: 28px;
       animation: modalIn3D 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Decorative top glow line */.client-modal-box::before {
        content: '';
       position: absolute;
       top: 0;
    left: 10%;
    right: 10%;
       height: 1px;
       background: linear-gradient(90deg, transparent, var(--cl-purple-bright), var(--cl-cyan), transparent);
       opacity: 0.6;
}
/* Background orb */.client-modal-box::after {
        content: '';
       position: absolute;
       width: 200px;
    height: 200px;
       background: radial-gradient(ellipse, rgba(56,189,248,0.12), transparent);
       top: -60px;
    right: -60px;
       border-radius: 50%;
       pointer-events: none;
}
@keyframes modalIn3D {
        from {
            opacity: 0;
           transform: scale(0.85) translateY(30px) rotateX(8deg);
           filter: blur(4px);
   
}
    to {
            opacity: 1;
           transform: scale(1) translateY(0) rotateX(0deg);
           filter: blur(0);
   
}

}
.client-modal-header {
        display: flex;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 28px;
}
.client-modal-header h3 {
        font-size: 1.25rem;
       font-weight: 800;
       color: #fff;
       letter-spacing: -0.3px;
       background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
}
.client-form-group {
        margin-bottom: 18px;
       display: flex;
       flex-direction: column;
       gap: 8px;
}
.client-form-group label {
        font-size: 0.82rem;
       font-weight: 600;
       color: rgba(255,255,255,0.5);
       text-transform: uppercase;
       letter-spacing: 0.07em;
}
.required {
     color: var(--cl-gold);
    margin-left: 2px;

}
.client-input-wrapper {
        display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(255,255,255,0.08);
       border-radius: 12px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.client-input-wrapper:focus-within {
        border-color: var(--cl-purple-bright);
       background: rgba(56,189,248,0.07);
       box-shadow:        0 2px 10px rgba(0,0,0,0.3),        0 0 0 3px rgba(56,189,248,0.16),        0 0 20px rgba(56,189,248,0.10);
}
.client-input-wrapper .material-icons-round {
        font-size: 18px;
       color: rgba(255,255,255,0.3);
       flex-shrink: 0;
       transition: color 0.3s ease;
}
.client-input-wrapper:focus-within .material-icons-round {
        color: var(--cl-purple-bright);
}
.client-input-wrapper input,.client-input-wrapper select {
        flex: 1;
       background: transparent;
       border: none;
       outline: none;
       font-size: 0.92rem;
       color: var(--text-primary);
       min-width: 0;
}
.client-input-wrapper input::placeholder {
     color: var(--text-muted);

}
.client-input-wrapper select option {
     background: var(--bg-tertiary);
     color: var(--text-primary);
}
.client-new-credit-group {
       padding: 16px;
       border: 1px solid rgba(168,85,247,0.25);
       border-radius: 16px;
       background: linear-gradient(135deg, rgba(168,85,247,0.11), rgba(14,165,233,0.07));
}
.client-credit-package-grid {
       display: grid;
       grid-template-columns: repeat(5, minmax(0, 1fr));
       gap: 8px;
}
.client-credit-package-grid button {
       border: 1px solid rgba(168,85,247,0.35);
       border-radius: 12px;
       padding: 10px 8px;
       background: rgba(255,255,255,0.05);
       color: rgba(255,255,255,0.9);
       font-weight: 800;
       cursor: pointer;
       transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.client-credit-package-grid button:hover {
       transform: translateY(-2px);
       border-color: var(--cl-purple-bright);
       box-shadow: 0 0 22px rgba(168,85,247,0.28);
}
.client-created-message {
       margin-top: 14px;
       padding: 14px;
       border: 1px solid rgba(34,197,94,0.3);
       border-radius: 16px;
       background: rgba(34,197,94,0.08);
}
.client-created-message textarea {
       width: 100%;
       min-height: 190px;
       resize: vertical;
       padding: 14px;
       border-radius: 12px;
       border: 1px solid rgba(255,255,255,0.12);
       background: rgba(0,0,0,0.35);
       color: #fff;
       font-family: inherit;
       line-height: 1.5;
       outline: none;
}
.client-created-message button {
       margin-top: 10px;
}
@media (max-width: 720px) {
       .client-credit-package-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
       }
}
.client-modal-actions {
        display: flex;
       justify-content: flex-end;
       gap: 12px;
       margin-top: 28px;
}
/* Modal Buttons */.client-modal-actions .btn-secondary {
        padding: 11px 22px;
       border-radius: 12px;
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.1);
       color: rgba(255,255,255,0.65);
       font-weight: 600;
       font-size: 0.88rem;
       transition: all 0.25s ease;
       box-shadow: 0 3px 8px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.client-modal-actions .btn-secondary:hover {
        background: rgba(255,255,255,0.1);
       border-color: rgba(255,255,255,0.2);
       color: #fff;
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.client-modal-actions .btn-primary,#btn-save-client,#btn-save-purchase {
        padding: 11px 26px;
       background: linear-gradient(135deg, var(--cl-purple), var(--cl-purple-bright));
       color: #fff;
       font-weight: 700;
       font-size: 0.88rem;
       border-radius: 12px;
       border: none;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       box-shadow:        0 4px 0 rgba(0,0,0,0.4),        0 8px 24px rgba(56,189,248,0.26),        0 0 30px rgba(56,189,248,0.14),        inset 0 1px 0 rgba(255,255,255,0.2);
       position: relative;
       overflow: hidden;
       text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.client-modal-actions .btn-primary::before,#btn-save-client::before,#btn-save-purchase::before {
        content: '';
       position: absolute;
       top: 0;
    left: -100%;
       width: 100%;
    height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
       transition: left 0.45s ease;
}
.client-modal-actions .btn-primary:hover::before,#btn-save-client:hover::before,#btn-save-purchase:hover::before {
     left: 100%;

}
.client-modal-actions .btn-primary:hover,#btn-save-client:hover,#btn-save-purchase:hover {
        transform: translateY(-4px);
       box-shadow:        0 8px 0 rgba(0,0,0,0.4),        0 16px 40px rgba(56,189,248,0.42),        0 0 50px rgba(56,189,248,0.22),        inset 0 1px 0 rgba(255,255,255,0.25);
}
.client-modal-actions .btn-primary:active,#btn-save-client:active,#btn-save-purchase:active {
        transform: translateY(0);
}
/* ---- Purchase Modal ---- */.purchase-modal-box {
     max-width: 420px;

}
.purchase-client-name-label {
        font-size: 0.82rem;
       color: rgba(255,255,255,0.4);
       margin-top: 4px;
}
.purchase-client-name-label strong {
     color: rgba(255,255,255,0.8);

}
.purchase-bonus-preview {
        display: flex;
       align-items: center;
       gap: 10px;
       padding: 14px 16px;
       background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05));
       border: 1px solid rgba(245,158,11,0.25);
       border-radius: 12px;
       font-size: 0.85rem;
       color: rgba(255,255,255,0.6);
       margin-bottom: 18px;
       position: relative;
       overflow: hidden;
       box-shadow: 0 0 20px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1);
}
.purchase-bonus-preview::before {
        content: '';
       position: absolute;
       top: 0;
    left: 0;
    right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(245,158,11,0.3), transparent);
}
.purchase-bonus-preview .material-icons-round {
        color: var(--cl-gold-bright);
       font-size: 20px;
       filter: drop-shadow(0 0 6px rgba(245,158,11,0.6));
}
.purchase-bonus-preview strong {
        color: var(--cl-gold-bright);
       font-family: var(--font-mono);
       font-size: 1.1em;
       font-weight: 800;
       text-shadow: 0 0 12px rgba(245,158,11,0.5);
}
.purchase-bonus-estimate {
       color: rgba(255,255,255,0.62);
       font-size: 0.78rem;
       font-weight: 700;
}
/* ---- Close button ---- */.modal-close {
        width: 30px;
    height: 30px;
       border-radius: 50%;
       display: flex;
    align-items: center;
    justify-content: center;
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.08);
       color: rgba(255,255,255,0.45);
       transition: all 0.2s ease;
       box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.modal-close:hover {
        background: rgba(244,63,94,0.2);
       border-color: rgba(244,63,94,0.4);
       color: #fb7185;
       transform: rotate(90deg) scale(1.1);
}
/* ---- Spinner ---- */.spin {
     animation: spin 0.7s linear infinite;
    display: inline-block;

}
/* ---- Scroll bar for clientes ---- */.clients-tree::-webkit-scrollbar {
     width: 5px;

}
.clients-tree::-webkit-scrollbar-track {
     background: transparent;

}
.clients-tree::-webkit-scrollbar-thumb {
        background: var(--gold);
       border-radius: 4px;
}

/* ---- Zoom Viewport ---- */
#zoom-viewport {
    background: var(--bg-primary) !important;
}
#zoom-viewport::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#zoom-viewport::-webkit-scrollbar-track {
    background: transparent;
}
#zoom-viewport::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
}

/* ---- Select dropdown fix ---- */
select, select option,
.client-input-wrapper select,
.client-input-wrapper select option,
.client-modal-box select,
.client-modal-box select option {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
select option:checked,
.client-input-wrapper select option:checked {
    background: var(--gold) !important;
    color: #000 !important;
}
/* ---- Responsive ---- */@media (max-width: 768px) {
        .clientes-page {
     padding: 16px;
    gap: 14px;

}
    .clients-stats-bar {
     flex-direction: column;

}
    .client-stat-card {
     min-width: unset;

}
    .clients-toolbar {
     flex-direction: column;
    align-items: stretch;

}
    .client-flat-list {
     grid-template-columns: 1fr;

}
    .client-children {
     margin-left: 16px;

}
    .client-bonus-bar {
     flex-direction: column;
    align-items: flex-start;

}
    .client-modal-box {
     padding: 22px;
    margin: 12px;

}
    .client-card:hover {
     transform: translateY(-4px) scale(1.004);

}

}



/* ============================================================
   VOICE CARDS — GENERO, BANDEIRAS, COPIAR ID
   ============================================================ */

.voice-card .vc-top-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.voice-card .vc-name-wrap { flex: 1; min-width: 0; }
.voice-card .voice-card-name { color: var(--text-primary) !important; font-weight: 700; font-size: 0.88rem; line-height: 1.3; margin-bottom: 4px; }
.voice-card .vc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }

.vc-gender.gender-male { background: linear-gradient(135deg,rgba(16,185,129,.2),rgba(5,150,105,.1)); border: 1px solid rgba(16,185,129,.5); color: #34d399; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.vc-gender.gender-female { background: linear-gradient(135deg,rgba(236,72,153,.2),rgba(219,39,119,.1)); border: 1px solid rgba(236,72,153,.5); color: #f472b6; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.vc-gender.gender-neutral { background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.25); color: #94a3b8; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.vc-flag { font-size: 1rem; line-height: 1; }
.vc-age { font-size: .7rem; color: rgba(255,255,255,.4); padding: 2px 6px; background: rgba(255,255,255,.05); border-radius: 10px; }

.gender-card-male { border-left: 3px solid #10b981 !important; }
.gender-card-female { border-left: 3px solid #ec4899 !important; }
.gender-card-neutral { border-left: 3px solid #64748b !important; }

.voice-card .vc-top-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.vc-copy-btn { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.4); cursor: pointer; transition: all .2s ease; }
.vc-copy-btn .material-icons-round { font-size: 14px; }
.vc-copy-btn:hover { background: rgba(99,102,241,.2); border-color: #6366f1; color: #818cf8; transform: scale(1.1); }

.voice-card .voice-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.voice-card .voice-preview-btn { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); border-radius: 8px; color: #818cf8; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.voice-card .voice-preview-btn .material-icons-round { font-size: 15px; }
.voice-card .voice-preview-btn:hover { background: rgba(99,102,241,.3); border-color: #6366f1; transform: scale(1.03); }
.voice-card .voice-preview-btn.previewing { background: rgba(239,68,68,.2); border-color: #ef4444; color: #fca5a5; }

/* ================================================================
   REDESIGN GLOBAL PREMIUM — EFEITOS 3D, VIBRANTE E MODERNO
   Aplicado a todo o site: sidebar, topbar, botões, cards, modais
   ================================================================ */

/* ---- Tokens globais vibrantes ---- */
:root {
    /* Rebrand azul escuro + azul claro + branco gelo */
    --gold:          #38bdf8;
    --gold-light:    #9ee7ff;
    --gold-dark:     #1d4ed8;
    --gold-glow:     rgba(56,189,248,0.28);
    --gold-gradient: linear-gradient(135deg,#1d4ed8,#38bdf8);
    --shadow-gold:   0 0 24px rgba(56,189,248,0.18), 0 4px 0 rgba(0,0,0,0.3);

    --accent: #1d4ed8;
    --accent-bright: #38bdf8;
    --accent-cyan:   #67e8f9;

    --bg-primary:   #050b1a;
    --bg-secondary: #0b1430;
    --bg-tertiary:  #101e45;
    --bg-card:      rgba(12,22,54,0.78);
    --border:       rgba(234,246,255,0.12);
    --border-gold:  rgba(56,189,248,0.32);

    --radius:    14px;
    --radius-sm: 10px;
    --radius-lg: 20px;

    --shadow: 0 8px 32px rgba(0,0,0,0.5);
    --transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1);

    --glow-purple: 0 0 40px rgba(29,78,216,0.18);
    --glow-gold:   0 0 40px rgba(56,189,248,0.18);
    --glow-cyan:   0 0 40px rgba(103,232,249,0.16);
}

/* ---- Body — gradiente radial de fundo ---- */
body {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(29,78,216,0.16) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(56,189,248,0.10) 0%, transparent 45%),
        #050b1a;
}

/* ================================================================
   SIDEBAR — GLASSMORPHISM + BORDA VIBRANTE
   ================================================================ */
.sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 4px 0 30px rgba(0,0,0,0.4) !important;
}

.sidebar-header {
    border-bottom: 1px solid var(--border) !important;
    background: linear-gradient(180deg, var(--bg-hover) 0%, transparent 100%);
}

.logo-icon {
    background: var(--gold-gradient) !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3), 0 8px 24px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.26) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.logo-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,0.3), 0 16px 32px rgba(56,189,248,0.34) !important; }

.nav-item {
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1) !important;
    position: relative;
    overflow: hidden;
}
.nav-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: translateX(3px);
    box-shadow: 0 2px 12px var(--gold-glow);
}
.nav-item.active {
    background: var(--bg-hover) !important;
    color: var(--gold) !important;
    border-left: 3px solid var(--gold) !important;
    box-shadow: 0 2px 16px var(--gold-glow), inset 1px 0 0 var(--gold-glow);
    font-weight: 600 !important;
}

.credits-display {
    background: var(--bg-tertiary) !important;
    border: 1px solid rgba(56,189,248,0.20) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 20px rgba(56,189,248,0.08), inset 0 1px 0 rgba(56,189,248,0.08) !important;
}
.credits-display #credits-count {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
}

/* ================================================================
   TOPBAR — VIDRO PREMIUM
   ================================================================ */
.topbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
}

.page-title {
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg,#fff,rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.health-indicator {
    background: linear-gradient(135deg,rgba(16,185,129,0.12),rgba(16,185,129,0.06)) !important;
    border: 1px solid rgba(16,185,129,0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 12px rgba(16,185,129,0.1) !important;
}

.topbar-credits {
    background: linear-gradient(135deg,rgba(56,189,248,0.12),rgba(29,78,216,0.06));
    border: 1px solid rgba(56,189,248,0.22);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: 0 0 16px rgba(245,158,11,0.1);
}
.topbar-credits .material-icons-round { filter: drop-shadow(0 0 6px rgba(56,189,248,0.6)); }

.bonus-notification-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(250,204,21,0.32);
    background: rgba(15,23,42,0.72);
    color: #facc15;
    box-shadow: 0 0 18px rgba(250,204,21,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: visible;
}

.bonus-notification-btn .material-icons-round {
    position: relative;
    z-index: 2;
    font-size: 20px;
}

.bonus-notification-btn.has-unread {
    color: #fff7ad;
    border-color: rgba(250,204,21,0.7);
}

.bonus-notification-wave {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(250,204,21,0.45);
    opacity: 0;
    pointer-events: none;
}

.bonus-notification-btn.has-unread .bonus-notification-wave {
    animation: bonusNotifyWave 1.8s ease-out infinite;
}

.bonus-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    z-index: 3;
}

.bonus-notification-btn:not(.has-unread) .bonus-notification-count {
    display: none;
}

@keyframes bonusNotifyWave {
    0% { transform: scale(0.72); opacity: 0.76; box-shadow: 0 0 0 0 rgba(250,204,21,0.22); }
    70% { transform: scale(1.35); opacity: 0; box-shadow: 0 0 0 14px rgba(250,204,21,0); }
    100% { transform: scale(1.35); opacity: 0; }
}

.bonus-notification-panel {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 76px 24px 24px;
}

.bonus-notification-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(5px);
}

.bonus-notification-card {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 104px));
    overflow: hidden;
    border: 1px solid rgba(250,204,21,0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(8,13,24,0.98));
    box-shadow: 0 24px 80px rgba(0,0,0,0.42), 0 0 28px rgba(250,204,21,0.12);
}

.bonus-notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bonus-notification-kicker {
    margin: 0 0 4px;
    color: rgba(250,204,21,0.8);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bonus-notification-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.bonus-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
}

.bonus-notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(min(620px, calc(100vh - 104px)) - 72px);
    overflow-y: auto;
    padding: 14px;
}

.bonus-notification-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
}

.bonus-notification-item.is-unread {
    border-color: rgba(250,204,21,0.34);
    background: rgba(250,204,21,0.08);
}

.bonus-notification-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #facc15;
    background: rgba(250,204,21,0.12);
}

.bonus-notification-item-body strong {
    display: block;
    color: #fde68a;
    font-size: 0.9rem;
}

.bonus-notification-item-body p {
    margin: 5px 0 6px;
    color: rgba(255,255,255,0.86);
    font-size: 0.86rem;
    line-height: 1.45;
}

.bonus-notification-item-body span,
.bonus-notification-empty {
    color: rgba(255,255,255,0.52);
    font-size: 0.78rem;
}

.bonus-notification-empty {
    padding: 20px 12px;
    text-align: center;
}

/* ================================================================
   BOTAO PRIMARIO — 3D NEON ELEVADO
   ================================================================ */
.btn-primary {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.4),
        0 8px 24px rgba(56,189,248,0.38),
        0 0 40px rgba(56,189,248,0.18),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition: left 0.5s ease;
}
.btn-primary:hover::after { left: 100%; }
.btn-primary:hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 10px 0 rgba(0,0,0,0.4),
        0 20px 50px rgba(56,189,248,0.55),
        0 0 60px rgba(56,189,248,0.28),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

/* Botão gold original (generate, audio controls etc) */
.btn-generate,
button[class*="gold"],
.btn-gold {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.4),
        0 8px 24px var(--gold-glow),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-generate:hover,
button[class*="gold"]:hover,
.btn-gold:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 8px 0 rgba(0,0,0,0.4),
        0 16px 40px var(--gold-glow),
        0 0 50px var(--gold-glow),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Botão secundário */
.btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 10px 24px rgba(0,0,0,0.3) !important;
}

/* btn-icon (botões de ícone no editor) */
.btn-icon {
    border-radius: 10px !important;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
    border: 1px solid transparent !important;
}
.btn-icon:hover {
    background: rgba(56,189,248,0.12) !important;
    border-color: rgba(56,189,248,0.32) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(56,189,248,0.18) !important;
}
.btn-icon .material-icons-round { transition: transform 0.2s ease !important; }
.btn-icon:hover .material-icons-round { transform: scale(1.1) !important; }

/* ================================================================
   CARDS GLOBAIS — ELEVAÇÃO 3D
   ================================================================ */
.bg-card,
.history-card,
.voice-card,
.audio-card,
.setting-group,
.card,
[class*="-card"]:not(.client-card):not(.client-stat-card):not(.genre-card-male):not(.genre-card-female):not(.genre-card-neutral) {
    border-radius: 16px !important;
    transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1) !important;
}

/* Cards de histórico e áudio */
.history-card,
.audio-card,
.sf-ah-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.4),
        0 8px 30px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1) !important;
}
.history-card:hover,
.audio-card:hover,
.sf-ah-card:hover {
    border-color: rgba(255,255,255,0.14) !important;
    transform: translateY(-5px) !important;
    box-shadow:
        0 10px 0 rgba(0,0,0,0.4),
        0 20px 50px rgba(0,0,0,0.5),
        0 0 30px rgba(56,189,248,0.10) !important;
}

/* Voice cards — herdam a borda de gênero já definida */
.voice-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.45),
        0 8px 28px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1) !important;
}
.voice-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow:
        0 12px 0 rgba(0,0,0,0.45),
        0 24px 60px rgba(0,0,0,0.5) !important;
}

/* ================================================================
   INPUTS E SELECTS — FOCUS NEON
   ================================================================ */
.input-wrapper,
.setting-selector,
.setting-select,
.input-field {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.input-wrapper:focus-within,
.setting-select:focus,
.input-field:focus {
    border-color: var(--gold) !important;
    background: var(--bg-hover) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        0 0 0 3px rgba(56,189,248,0.18),
        0 0 20px rgba(56,189,248,0.12) !important;
}

/* ================================================================
   MODALS GLOBAIS — 3D PREMIUM
   ================================================================ */
.modal-overlay,
.overlay,
[id*="modal"] > .overlay,
[class*="modal-overlay"] {
    background: rgba(5,5,15,0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modal-box,
.modal-content,
[class*="modal-box"],
[class*="modal-content"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 40px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(56,189,248,0.10) !important;
}

/* ================================================================
   SLIDERS — COR VIBRANTE
   ================================================================ */
.slider::-webkit-slider-thumb {
    background: var(--gold-gradient) !important;
    box-shadow: 0 0 0 3px var(--gold-glow), 0 0 12px var(--gold-glow) !important;
    width: 18px !important;
    height: 18px !important;
    transition: all 0.2s ease !important;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.2) !important; }

.slider::-moz-range-thumb {
    background: var(--gold-gradient) !important;
    box-shadow: 0 0 0 3px var(--gold-glow) !important;
}

/* ================================================================
   ABAS / TABS
   ================================================================ */
.settings-tab.active,
.auth-tab.active,
[class*="-tab"].active {
    color: #eaf6ff !important;
    border-bottom-color: rgba(56,189,248,0.85) !important;
}

.settings-tab:hover,
.auth-tab:hover {
    color: rgba(255,255,255,0.8) !important;
}

/* Auth tabs */
.auth-tab.active {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 6px 16px rgba(56,189,248,0.22), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ================================================================
   SCROLLBAR GLOBAL VIBRANTE
   ================================================================ */
::-webkit-scrollbar-thumb {
    background: rgba(56,189,248,0.28) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(56,189,248,0.46) !important;
}
::-webkit-scrollbar { width: 5px !important; }

/* ================================================================
   TOASTS / NOTIFICAÇÕES
   ================================================================ */
.toast,
[class*="toast"] {
    border-radius: 14px !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}

/* ================================================================
   AUTH / LOGIN — MAIS IMPACTANTE
   ================================================================ */
.auth-container {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 28px !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 40px 80px rgba(0,0,0,0.8),
        0 0 80px rgba(56,189,248,0.12) !important;
}

.auth-logo-icon {
    box-shadow:
        0 4px 0 rgba(0,0,0,0.4),
        0 8px 32px rgba(56,189,248,0.26),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-radius: 16px !important;
    width: 72px !important;
    height: 72px !important;
}

.auth-orb-1 { background: radial-gradient(circle,var(--gold),transparent) !important; opacity: 0.5 !important; }
.auth-orb-2 { background: radial-gradient(circle,var(--gold-dark),transparent) !important; opacity: 0.4 !important; }
.auth-orb-3 { background: radial-gradient(circle,var(--gold-light),transparent) !important; opacity: 0.3 !important; }

/* ================================================================
   ANIMACOES GLOBAIS MICRO
   ================================================================ */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Botão use de vozes */
.voice-use-btn {
    background: var(--gold-gradient) !important;
    color: #000 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 7px 16px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 6px 18px rgba(56,189,248,0.28) !important;
    transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.voice-use-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 14px 35px rgba(56,189,248,0.42) !important;
}

/* Provider badges redesenhados */
.provider-badge {
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    letter-spacing: 0.03em !important;
}
.provider-badge.elevenlabs { background: linear-gradient(135deg,rgba(56,189,248,0.18),rgba(29,78,216,0.08)) !important; border: 1px solid rgba(56,189,248,0.28) !important; color: #b9d7ff !important; }
.provider-badge.edge { background: linear-gradient(135deg,rgba(16,185,129,0.2),rgba(16,185,129,0.1)) !important; border: 1px solid rgba(16,185,129,0.35) !important; color: #34d399 !important; }
.provider-badge.minimax { background: linear-gradient(135deg,rgba(99,102,241,0.2),rgba(99,102,241,0.1)) !important; border: 1px solid rgba(99,102,241,0.35) !important; color: #818cf8 !important; }
.provider-badge.custom { background: linear-gradient(135deg,rgba(236,72,153,0.2),rgba(236,72,153,0.1)) !important; border: 1px solid rgba(236,72,153,0.35) !important; color: #f472b6 !important; }

/* ================================================================
   USER AVATAR — VIBRANTE
   ================================================================ */
.user-avatar {
    background: var(--gold-gradient) !important;
    box-shadow: 0 0 0 2px var(--gold-glow), 0 4px 12px var(--gold-glow) !important;
    color: #000 !important;
    font-weight: 800 !important;
}

/* ---- Client Form Row (side-by-side) ---- */
.client-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
@media (max-width: 500px) { .client-form-row { grid-template-columns: 1fr; } }

/* ---- CLIENT CANVAS (DRAG & DROP) ---- */
.client-canvas {
    position: relative;
    min-height: 400px;
    width: 100%;
    padding: 8px 0;
    overflow: hidden;
}
.canvas-hint {
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; color: rgba(255,255,255,0.2);
    pointer-events: none; white-space: nowrap;
    letter-spacing: 0.04em;
}
.canvas-hint .material-icons-round { font-size: 14px; }
.cc-draggable {
    position: absolute;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-draggable:hover {
    transform: translateY(-3px) scale(1.01) !important;
}
.cc-draggable:active {
    transform: scale(1.03) !important;
}

/* ---- Modo Compacto (Chaves) ---- */
.cc-compact:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* Linha de chave: conecta cards compactos como bracket de campeonato */
.bracket-line {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.ccd-btn:hover {
    filter: brightness(1.4);
    transform: scale(1.1);
}

/* ---- Animations for Credits and Bonus ---- */
@keyframes cc-pulse-credits {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(56,189,248,0.2); }
    50% { transform: scale(1.02); box-shadow: 0 0 25px rgba(56,189,248,0.6); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(56,189,248,0.2); }
}
.cc-draggable.cc-has-credits::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid rgba(56,189,248,0.4);
    z-index: -1;
    pointer-events: none;
    animation: gentle-pulse-border 2s ease-in-out infinite;
}
@keyframes gentle-pulse-border {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.04); opacity: 0; }
}

/* Rotating golden border for bonus */
@keyframes gold-spin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.cc-draggable.cc-has-bonus::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px; /* Slightly larger than card 12px */
    background: linear-gradient(90deg, #fcd34d, #b45309, #fcd34d, #f59e0b);
    background-size: 300% 300%;
    animation: gold-spin 3s linear infinite;
    z-index: -2;
}
.cc-draggable.cc-has-bonus::after {
    content: '';
    position: absolute;
    inset: 0px;
    border-radius: 12px; /* Matches card inner radius */
    background: inherit; /* Copies the linear-gradient of the card itself */
    z-index: -1;
}



/* Network Visualizer Animations */
.network-node-path {
  stroke-dasharray: 8 6;
  animation: flow 3s linear infinite;
}
@keyframes flow {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   VOICE MODAL � MELHORIAS (popup idiomas, tabs por provider, preview)
   ============================================================ */

/* T�tulo do modal com badge do provider */
.voice-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.voice-modal-provider-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Bot�o de idioma com bandeira */
.vf-lang-btn-wrap {
    position: relative;
}
.vf-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface-elevated, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.vf-lang-btn:hover {
    background: var(--surface-hover, rgba(255,255,255,0.1));
    border-color: var(--accent, #3b82f6);
}

/* Popup de idiomas */
.vf-lang-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    background: var(--surface, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
    width: 420px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popupFadeIn 0.18s ease;
}
.vf-lang-popup.hidden { display: none; }

@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vf-lang-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
.vf-popup-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 6px;
    transition: color 0.15s;
}
.vf-popup-close-btn:hover { color: var(--text-primary, #fff); }

/* Grade de idiomas */
.vf-lang-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 10px 12px;
    overflow-y: auto;
    max-height: 340px;
}
.vf-lang-grid::-webkit-scrollbar { width: 4px; }
.vf-lang-grid::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }

.vf-lang-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.vf-lang-item:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.1);
}
.vf-lang-item.active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
}
.vf-lang-item.vf-lang-all {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
.vf-lang-item.vf-lang-all:hover {
    background: rgba(255,255,255,0.09);
}

/* Destaque para idioma priorit�rio (pt-br) */
.vf-lang-item.vf-lang-priority {
    position: relative;
    border-color: rgba(34,197,94,0.3);
        background: rgba(34,197,94,0.03);
        box-shadow: inset 0 0 0 1px rgba(34,197,94,0.08);
}
.vf-lang-item.vf-lang-priority::after {
        content: '\2605';
    position: absolute;
    top: 3px;
    right: 4px;
        font-size: 10px;
    color: #22c55e;
}
.vf-lang-item.vf-lang-priority:hover {
        background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.5);
}
.vf-lang-item.vf-lang-priority.active {
        background: rgba(59,130,246,0.15);
        border-color: rgba(59,130,246,0.4);
        box-shadow: none;
}
.vf-lang-item.vf-lang-priority.active::after {
        color: #93c5fd;
}

.vf-lang-flag {
    font-size: 22px;
    line-height: 1;
}
.vf-lang-name {
    font-size: 10px;
    color: var(--text-secondary, #aaa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.vf-lang-item.active .vf-lang-name {
    color: #3b82f6;
    font-weight: 600;
}

/* Bot�o Preview com �cone de rosto */
.voice-preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.voice-preview-btn:hover {
    background: rgba(59,130,246,0.15);
    border-color: #3b82f6;
    color: #3b82f6;
    transform: scale(1.05);
}
.voice-preview-btn.previewing {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    color: #ef4444;
}
.voice-preview-btn .material-icons-round {
    font-size: 18px;
}

/* Ids de filtro sem o select, agora usando hidden input */
#default-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ============================================================
   OVERRIDES: TRANSFORMA O POPUP DE IDIOMAS EM UM MODAL CHEIO
   ============================================================ */

.vf-lang-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    background: var(--surface-drawer, #111116) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.12)) !important;
    border-radius: 20px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 3000px rgba(0,0,0,0.6) !important;
    width: 650px !important;
    max-width: 90vw !important;
    /* max-height removed to use default size or max-height of viewport inside flex */
}

@keyframes popupFadeIn {
    0% { opacity: 0; transform: translate(-50%, -46%) scale(0.92) !important; }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
}

.vf-lang-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
    max-height: 60vh !important;
}


/* Estilos das bandeiras via FlagCDN em substituicao as emojis */
.vf-lang-img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin-bottom: 4px;
}

/* ============================================================
   OVERRIDES POPUP GIGANTE (Conforme solicitado)
   ============================================================ */

.vf-lang-popup {
    width: 900px !important;       /* Bem mais largo */
    max-width: 95vw !important;
    border-radius: 24px !important;
}

.vf-lang-grid {
    grid-template-columns: repeat(6, 1fr) !important; /* 6 colunas para caber mais na horizontal */
    max-height: 75vh !important; /* Mais alto antes de precisar rolar */
    gap: 12px 8px !important;
    padding: 20px !important;
}

/* Corrige o simbolo de estrela na prioridade BR que apareceu como ? */
.vf-lang-item.vf-lang-priority::after {
    content: '' !important;
    width: 14px;
    height: 14px;
    background-color: #22c55e;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center / contain;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') no-repeat center / contain;
    position: absolute;
    top: 6px;
    right: 8px;
}

/* Ajustes finos de hover nas linguas para a resolucao nova */
.vf-lang-item {
    padding: 10px 6px !important;
}

/* ============================================================
   DASHBOARD CONTAINMENT
   Mantem a landing/login fora da area logada e impede que temas
   salvos ou estilos publicos deformem o editor interno.
   ============================================================ */

body.dashboard-mode {
    --gold: #16aef8;
    --gold-light: #7dd3fc;
    --gold-dark: #0369a1;
    --gold-glow: rgba(22, 174, 248, 0.28);
    --gold-gradient: linear-gradient(135deg, #0369a1 0%, #16aef8 100%);
    --bg-primary: #050607;
    --bg-secondary: #0b0d10;
    --bg-tertiary: #11151b;
    --bg-card: rgba(18, 18, 19, 0.88);
    --bg-hover: rgba(22, 174, 248, 0.1);
    --text-primary: #f6f7fb;
    --text-secondary: #c7c9d1;
    --text-muted: #8c8f96;
    --border: rgba(255, 255, 255, 0.1);
    --border-gold: rgba(22, 174, 248, 0.32);
    --shadow-gold: 0 0 24px rgba(22, 174, 248, 0.18);
    background: #050607 !important;
}

body.dashboard-mode .auth-overlay {
    display: none !important;
}

body.dashboard-mode .app {
    display: flex !important;
    background: #050607 !important;
    min-height: 100vh !important;
    width: 100% !important;
}

body.dashboard-mode .landing-page,
body.dashboard-mode .auth-container,
body.dashboard-mode .auth-brand-logo {
    display: none !important;
}

body.dashboard-mode .sidebar {
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    background: var(--bg-secondary) !important;
}

body.dashboard-mode .main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: var(--bg-primary) !important;
}

body.dashboard-mode .tts-editor {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: var(--bg-primary) !important;
}

body.dashboard-mode .tts-settings {
    width: var(--settings-w) !important;
    min-width: var(--settings-w) !important;
    background: var(--bg-secondary) !important;
}

body.dashboard-mode .topbar {
    background: var(--bg-secondary) !important;
}

body.dashboard-mode .logo-img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

body.dashboard-mode .logo-text,
body.dashboard-mode .brand-text {
    max-width: 130px;
}

/* W Studios portal/auth refinements */
.brand-mark {
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 36%;
    transform: scale(1.32);
}

.auth-divider,
.google-signin-btn {
    display: none !important;
}

.auth-overlay.auth-mode .auth-container {
    background:
        linear-gradient(145deg, rgba(22, 13, 38, .96), rgba(13, 8, 24, .98)) !important;
    border-color: rgba(168, 85, 247, .42) !important;
    box-shadow: 0 34px 120px rgba(126, 34, 206, .32), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.auth-overlay.auth-mode .gold,
.auth-overlay.auth-mode .form-group label,
.auth-overlay.auth-mode .input-wrapper .material-icons-round {
    color: #c084fc !important;
}

.auth-overlay.auth-mode .auth-tab.active,
.auth-overlay.auth-mode .btn-auth {
    background: linear-gradient(100deg, #7c3aed, #22c7ff, #a855f7) !important;
    background-size: 220% 100% !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 16px 38px rgba(124, 58, 237, .35), 0 0 34px rgba(34, 199, 255, .16) !important;
    animation: lightWave 3.5s linear infinite;
}

.auth-overlay.auth-mode .input-wrapper:focus-within {
    border-color: rgba(168, 85, 247, .72) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .12) !important;
}

.studio-portal .portal-header,
.studio-portal .portal-kicker,
.studio-portal .portal-main h1,
.studio-portal .portal-main > p,
.studio-portal .portal-instruction,
.studio-portal .studio-area-card {
    opacity: 0;
    transform: translateY(22px);
    animation: portalCascadeIn .78s cubic-bezier(.2,.8,.2,1) forwards;
}

.studio-portal .portal-header { animation-delay: .12s; }
.studio-portal .portal-kicker { animation-delay: .38s; }
.studio-portal .portal-main h1 { animation-delay: .66s; }
.studio-portal .portal-main > p { animation-delay: .94s; }
.studio-portal .portal-instruction { animation-delay: 1.18s; }
.studio-portal .studio-area-card:nth-child(1) { animation-delay: 1.46s; }
.studio-portal .studio-area-card:nth-child(2) { animation-delay: 1.72s; }
.studio-portal .studio-area-card:nth-child(3) { animation-delay: 1.98s; }

@keyframes portalCascadeIn {
    from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes lightWave {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

.admin-signup-settings {
    display: grid;
    grid-template-columns: minmax(220px,1fr) auto minmax(140px,180px) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(168,85,247,.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(22,174,248,.08));
}

.admin-signup-settings strong {
    display: block;
    color: #fff;
    font-weight: 800;
}

.admin-signup-settings small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.admin-toggle,
.admin-credit-input {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 700;
}

.admin-credit-input input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    color: #fff;
    padding: 0 10px;
    font-weight: 800;
}

.admin-save-btn {
    height: 40px;
    border: 0;
    border-radius: 10px;
    padding: 0 18px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(100deg, #7c3aed, #22c7ff, #a855f7);
    background-size: 220% 100%;
    animation: lightWave 4s linear infinite;
}

@media(max-width:900px) {
    .admin-signup-settings {
        grid-template-columns: 1fr;
    }
}

.nav-item.is-disabled {
    opacity: .48;
    cursor: not-allowed !important;
    filter: grayscale(.25);
}

.nav-item.is-disabled:hover {
    transform: none !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.nav-soon {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .22);
    border: 1px solid rgba(192, 132, 252, .32);
    color: #e9d5ff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.voice-id-direct {
    display: none !important;
}

.voice-card-id {
    margin: 3px 0 6px;
    color: rgba(226, 232, 240, .68);
    font-size: .68rem;
    line-height: 1.35;
    word-break: break-all;
}

.voice-card-id code {
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(168, 85, 247, .18);
    border: 1px solid rgba(192, 132, 252, .25);
    color: #f5f3ff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .68rem;
}

.voice-card .voice-card-tags span,
.voice-card .vc-badges span,
.voice-card .provider-badge {
    color: #f5f3ff !important;
    background: linear-gradient(135deg, rgba(168,85,247,.34), rgba(14,165,233,.18)) !important;
    border: 1px solid rgba(216,180,254,.30) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.voice-card .provider-badge.edge {
    color: #dcfce7 !important;
    background: linear-gradient(135deg, rgba(34,197,94,.30), rgba(14,165,233,.12)) !important;
    border-color: rgba(74,222,128,.34) !important;
}

.voice-card .provider-badge.minimax {
    color: #ede9fe !important;
    background: linear-gradient(135deg, rgba(168,85,247,.34), rgba(99,102,241,.16)) !important;
    border-color: rgba(192,132,252,.34) !important;
}

.voice-card .provider-badge.elevenlabs {
    color: #dbeafe !important;
    background: linear-gradient(135deg, rgba(59,130,246,.30), rgba(168,85,247,.16)) !important;
    border-color: rgba(147,197,253,.34) !important;
}

.provider-maintenance-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.provider-status-topbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

.provider-maintenance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.72);
    padding: 5px 7px;
    font-size: .64rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.provider-maintenance-pill:hover {
    transform: translateY(-1px);
}

.provider-maintenance-pill span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34,197,94,.9);
    flex: 0 0 auto;
}

.provider-maintenance-pill.is-active {
    border-color: rgba(34,197,94,.28);
    background: rgba(34,197,94,.09);
    color: #dcfce7;
}

.provider-maintenance-pill.is-maintenance {
    border-color: rgba(239,68,68,.34);
    background: rgba(239,68,68,.10);
    color: #fecaca;
}

.provider-maintenance-pill.is-maintenance span {
    background: #ef4444;
    box-shadow: 0 0 12px rgba(239,68,68,.9);
}

.provider-maintenance-pill.is-high-demand {
    border-color: rgba(245,158,11,.40);
    background: rgba(245,158,11,.12);
    color: #fde68a;
}

.provider-maintenance-pill.is-high-demand span {
    background: #f59e0b;
    box-shadow: 0 0 12px rgba(245,158,11,.9);
}

.provider-maintenance-pill.is-invisible {
    color: #94a3b8;
    border-color: rgba(148,163,184,.34);
    background: rgba(148,163,184,.10);
}

.provider-maintenance-pill.is-invisible span {
    background: #94a3b8;
    box-shadow: 0 0 10px rgba(148,163,184,.7);
}

.provider-status-modal-content {
    max-width: 520px;
    border: 1px solid rgba(168,85,247,.22);
    background: linear-gradient(180deg, rgba(20,16,32,.98), rgba(11,9,18,.98));
}

.provider-status-options {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.provider-status-option {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    padding: 13px 14px;
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    cursor: pointer;
}

.provider-status-option.active {
    border-color: rgba(255,255,255,.32);
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04);
}

.provider-status-option span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.provider-status-option small {
    grid-column: 2;
    color: var(--text-muted);
    font-weight: 600;
}

.provider-status-option.online span { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,.8); }
.provider-status-option.high-demand span { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.8); }
.provider-status-option.maintenance span { background: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,.8); }
.provider-status-option.invisible span { background: #94a3b8; box-shadow: 0 0 12px rgba(148,163,184,.8); }

.provider-status-actions {
    padding: 0 18px 18px;
    display: flex;
    justify-content: flex-end;
}

.nav-discount {
    margin-left: auto;
    margin-right: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .12);
    color: #bbf7d0;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

/* Voice modal polish: readable tags, spacing, and gender colors */
.voice-list {
    gap: 14px !important;
}

.voice-card {
    padding: 16px 16px 14px !important;
}

.voice-card .vc-top-row {
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.voice-card .voice-card-name {
    margin-bottom: 7px !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
}

.voice-card-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 9px !important;
    font-size: .7rem !important;
    line-height: 1.3 !important;
}

.voice-card-id code {
    display: inline-block;
    max-width: 100%;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: .69rem !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-card .vc-badges {
    gap: 7px !important;
    row-gap: 7px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.voice-card .vc-badges span,
.voice-card .provider-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

.voice-card .vc-gender.gender-female {
    color: #ffe4f3 !important;
    background: linear-gradient(135deg, rgba(236,72,153,.45), rgba(190,24,93,.25)) !important;
    border-color: rgba(244,114,182,.75) !important;
    box-shadow: 0 0 14px rgba(236,72,153,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.voice-card .vc-gender.gender-male {
    color: #dbeafe !important;
    background: linear-gradient(135deg, rgba(59,130,246,.46), rgba(37,99,235,.24)) !important;
    border-color: rgba(96,165,250,.78) !important;
    box-shadow: 0 0 14px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.voice-card .vc-gender.gender-neutral {
    color: #e2e8f0 !important;
    background: rgba(100,116,139,.22) !important;
    border-color: rgba(148,163,184,.48) !important;
}

.voice-card .vc-lang,
.voice-card .vc-age {
    color: #ede9fe !important;
    background: rgba(124,58,237,.18) !important;
    border: 1px solid rgba(167,139,250,.34) !important;
}

.voice-card .provider-badge.edge {
    color: #dcfce7 !important;
    background: linear-gradient(135deg, rgba(16,185,129,.38), rgba(5,150,105,.18)) !important;
    border-color: rgba(74,222,128,.58) !important;
}

.voice-card .provider-badge.elevenlabs {
    color: #dbeafe !important;
    background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(29,78,216,.18)) !important;
    border-color: rgba(147,197,253,.48) !important;
}

.voice-card-desc {
    margin-top: 8px !important;
}


body[data-current-provider-status="maintenance"] .page.active .editor-area,
body[data-current-provider-status="maintenance"] .page.active .settings-panel,
body[data-current-provider-status="maintenance"] .page.active .tool-page,
body[data-current-provider-status="maintenance"] .page.active .single-tool-layout,
body[data-current-provider-status="maintenance"] .page.active .tool-card,
body[data-current-provider-status="maintenance"] .page.active .tts-main,
body[data-current-provider-status="maintenance"] .page.active .tts-settings {
    filter: grayscale(1);
    opacity: .42;
    pointer-events: none;
}

body[data-current-provider-status="maintenance"] .page.active::after {
    content: "servidor em manutenção";
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    padding: 22px 34px;
    border-radius: 14px;
    border: 1px solid rgba(248,113,113,.58);
    background: rgba(127,29,29,.94);
    color: #fff;
    font-size: clamp(1.05rem, 2.2vw, 1.65rem);
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 44px rgba(239,68,68,.28);
    pointer-events: none;
}

.provider-maintenance-alert {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(.96);
    z-index: 1000000;
    min-width: min(420px, calc(100vw - 32px));
    padding: 24px 28px;
    border: 1px solid rgba(248,113,113,.68);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(153,27,27,.98), rgba(127,29,29,.98));
    color: #fff;
    box-shadow: 0 28px 90px rgba(0,0,0,.66), 0 0 54px rgba(239,68,68,.30);
    opacity: 0;
    pointer-events: none;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    transition: opacity .18s ease, transform .18s ease;
}

.provider-maintenance-alert.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.provider-maintenance-alert .material-icons-round {
    font-size: 44px;
    color: #fecaca;
}

.provider-maintenance-alert strong {
    font-size: clamp(1.15rem, 3vw, 1.75rem);
    line-height: 1.15;
    text-transform: uppercase;
}

.provider-maintenance-alert small {
    color: #fecaca;
    font-weight: 900;
    letter-spacing: 0;
}

#client-sort,
#client-sort option {
    background: color-mix(in srgb, var(--bg-tertiary) 82%, var(--cl-purple-bright, #a855f7) 18%) !important;
    color: var(--text-primary) !important;
}

#client-sort option:hover,
#client-sort option:checked {
    background: color-mix(in srgb, var(--cl-purple-bright, #a855f7) 70%, #020617 30%) !important;
    color: #fff !important;
}


/* ============ NOVOS ESTILOS - MELHORIAS ============ */

/* Botões de ação dentro de inputs */
.btn-icon-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
    margin-left: 4px;
}

.btn-icon-action:hover {
    color: var(--gold);
    transform: scale(1.1);
}

.btn-icon-action .material-icons-round {
    font-size: 20px;
}

/* Mensagem de registro desativado */
.register-disabled-message {
    text-align: center;
    padding: 40px 20px;
}

.register-disabled-message h3 {
    margin: 16px 0 8px;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.register-disabled-message p {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Auth tabs (Login | Registrar) */
.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.auth-tabs.single {
    border-bottom: none;
}

.auth-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.auth-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.auth-tab:hover:not(.active):not(.disabled) {
    color: var(--text-secondary);
}

.auth-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-muted);
}

.auth-tab.disabled:hover {
    color: var(--text-muted);
    border-bottom-color: transparent;
}

.auth-tab.disabled .material-icons-round {
    font-size: 16px;
    opacity: 0.6;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* Garantir que o botão de submit do formulário de login tenha tamanho adequado */
#login-form .btn-primary,
#login-form .btn-auth {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    margin-top: 8px;
    min-height: 48px;
}

#login-form .btn-primary .material-icons-round,
#login-form .btn-auth .material-icons-round {
    font-size: 22px;
}

/* Ajustar espaçamento do formulário de login */
#login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#login-form .form-group {
    margin-bottom: 0;
}

/* Mensagem de erro de login */
.auth-error {
    padding: 12px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.9rem;
    text-align: center;
    display: none;
}

.auth-error:not(:empty) {
    display: block;
}

/* Ajustes no grid de créditos iniciais */
.client-credit-package-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.client-credit-package-grid button {
    padding: 10px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.client-credit-package-grid button:hover {
    background: var(--bg-hover);
    border-color: var(--gold);
    color: var(--gold);
}

.client-credit-package-grid button:active {
    transform: scale(0.95);
}

/* Código de indicação readonly */
#client-codigo[readonly] {
    background: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.8;
}

/* Ajustes no modal de cliente para acomodar novos campos */
.client-modal-box {
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Remover campo de grupo (ocultar se ainda existir) */
#client-grupo {
    display: none;
}

/* Estilos para o popup de cliente criado */
#client-created-popup {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .client-credit-package-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .client-modal-box {
        max-width: 95%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .client-credit-package-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Garantir que botões dos cards de clientes sejam clicáveis */
.ccd-btn {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

.ccd-btn:hover {
    transform: scale(1.1);
    opacity: 1 !important;
}

.ccd-actions {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.cc-draggable {
    pointer-events: auto;
}

.cc-draggable * {
    pointer-events: auto;
}


/* ============ REQUEST VOICE PAGE ============ */
.request-voice-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.request-voice-header {
    margin-bottom: 32px;
}

.request-voice-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.request-voice-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
}

.info-card .material-icons-round {
    font-size: 32px;
    color: var(--gold);
    flex-shrink: 0;
}

.info-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.info-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.status-legend {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.status-legend h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.request-voice-form-container,
.request-voice-list-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.request-voice-form-container h4,
.request-voice-list-container h4 {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.request-voice-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.request-voice-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.request-voice-form .form-row:has(.form-group:only-child) {
    grid-template-columns: 1fr;
}

.request-voice-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.request-voice-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.request-voice-form input,
.request-voice-form select {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.request-voice-form input:focus,
.request-voice-form select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.request-voice-form small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.request-voice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-voice-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.request-voice-item-info {
    flex: 1;
}

.request-voice-item-info h5 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.request-voice-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.request-voice-item-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============ MY ACCOUNT PAGE ============ */
.my-account-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.my-account-header {
    margin-bottom: 32px;
}

.my-account-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.account-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.account-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.account-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.account-form input {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.account-form input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.account-form small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.account-credits-display {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.credits-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.credits-card .material-icons-round {
    font-size: 48px;
    color: var(--gold);
}

.credits-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credits-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credits-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
}

.account-credits-display p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* ============ REFER AND EARN PAGE ============ */
.refer-layout {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px;
}

.refer-header {
    margin-bottom: 24px;
}

.refer-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.refer-header p {
    color: var(--text-secondary);
    margin: 0;
}

.refer-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.refer-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.refer-summary > div,
.refer-preview,
.refer-link-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}

.refer-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.refer-summary strong {
    color: var(--gold);
    font-size: 1.35rem;
}

.refer-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.refer-form label,
.refer-link-box label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
}

.refer-form textarea,
.refer-link-box input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    padding: 12px 14px;
    outline: none;
}

.refer-form textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.refer-form textarea:focus,
.refer-link-box input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.refer-form small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.refer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.refer-preview p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.refer-status {
    min-height: 20px;
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.refer-status.success {
    color: var(--success);
}

.refer-status.error {
    color: var(--error);
}

@media (max-width: 640px) {
    .refer-summary {
        grid-template-columns: 1fr;
    }

    .refer-actions {
        flex-direction: column;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .request-voice-info {
        grid-template-columns: 1fr;
    }
    
    .request-voice-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Dark theme fix for voice request page */
#page-request-voice {
    color: var(--text-primary);
    background: transparent;
}

#page-request-voice .info-card {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

#page-request-voice .status-legend {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

#page-request-voice .request-voice-form-container,
#page-request-voice .request-voice-list-container {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

#page-request-voice input,
#page-request-voice textarea,
#page-request-voice select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

#page-request-voice select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Ensure select options in request-voice form are dark on all browsers */
.request-voice-form select,
.request-voice-form select option,
#page-request-voice select,
#page-request-voice select option {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
.request-voice-form select option:hover,
.request-voice-form select option:focus,
.request-voice-form select option:checked,
#page-request-voice select option:hover,
#page-request-voice select option:focus,
#page-request-voice select option:checked {
    background-color: var(--gold) !important;
    color: #000 !important;
}


/* ============ PASSWORD TOGGLE ============ */
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrap input {
    flex: 1;
    padding-right: 44px !important;
}

.btn-password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.btn-password-toggle:hover {
    color: var(--text-primary);
}

.btn-password-toggle .material-icons-round {
    font-size: 20px;
}

/* ============ AVATAR UPLOAD ============ */
.account-avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.avatar-preview {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.avatar-image.active {
    display: block;
}

.avatar-default {
    font-size: 64px;
    color: var(--gold);
}

.avatar-default.hidden {
    display: none;
}

.avatar-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.avatar-actions .btn-primary,
.avatar-actions .btn-secondary {
    padding: 10px 16px;
    font-size: 0.9rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .avatar-preview {
        width: 100px;
        height: 100px;
    }
    
    .avatar-default {
        font-size: 52px;
    }
}

/* ============ VOICE REQUESTS - USUÁRIO ============ */
.vr-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.vr-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}

.vr-voice-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.vr-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.vr-rejection-reason {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #f87171;
    background: rgba(248,113,113,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
}

.vr-rejection-reason .material-icons-round { font-size: 16px; }

.vr-item-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ============ ADMIN: VOZES REQUISITADAS ============ */
.admin-section-header {
    border-top: 1px solid var(--border);
    padding-top: 32px;
}

.admin-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.vr-pending-badge {
    background: #f59e0b;
    color: #000;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
}

.admin-voice-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.admin-vr-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.2s;
}

.admin-vr-item:has(.status-pending) { border-left: 3px solid #f59e0b; }
.admin-vr-item:has(.status-approved) { border-left: 3px solid #22c55e; }
.admin-vr-item:has(.status-rejected) { border-left: 3px solid #ef4444; }

.admin-vr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.admin-vr-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.admin-vr-user small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.admin-vr-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-vr-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.admin-vr-info strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.admin-vr-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--gold);
}

.admin-vr-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-approve, .btn-reject, .btn-pending, .btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: opacity 0.2s;
}

.btn-approve { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.btn-reject  { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.btn-pending { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.btn-delete  { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }

.btn-approve:hover { opacity: 0.8; }
.btn-reject:hover  { opacity: 0.8; }
.btn-pending:hover { opacity: 0.8; }
.btn-delete:hover  { opacity: 0.8; background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }

.btn-approve .material-icons-round,
.btn-reject .material-icons-round,
.btn-pending .material-icons-round,
.btn-delete .material-icons-round { font-size: 16px; }

/* ============ SIDEBAR PROVIDER BACKGROUNDS ============ */

/* ElevenLabs — azul */
.nav-provider-elevenlabs {
    background: rgba(59, 130, 246, 0.07);
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    margin-bottom: 6px;
    overflow: hidden;
}

.nav-provider-elevenlabs .nav-section-toggle {
    border-radius: 10px 10px 0 0;
}

.nav-provider-elevenlabs .nav-section-toggle:hover,
.nav-provider-elevenlabs .nav-section-items .nav-item:hover {
    background: rgba(59, 130, 246, 0.12);
}

.nav-provider-elevenlabs .nav-section-items .nav-item.active {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Minimax — roxo */
.nav-provider-minimax {
    background: rgba(168, 85, 247, 0.07);
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.15);
    margin-bottom: 6px;
    overflow: hidden;
}

.nav-provider-minimax .nav-section-toggle {
    border-radius: 10px 10px 0 0;
}

.nav-provider-minimax .nav-section-toggle:hover,
.nav-provider-minimax .nav-section-items .nav-item:hover {
    background: rgba(168, 85, 247, 0.12);
}

.nav-provider-minimax .nav-section-items .nav-item.active {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

/* Edge — verde */
.nav-provider-edge {
    background: rgba(34, 197, 94, 0.07);
    border-radius: 10px;
    border: 1px solid rgba(34, 197, 94, 0.15);
    margin-bottom: 6px;
    overflow: hidden;
}

.nav-provider-edge .nav-section-toggle {
    border-radius: 10px 10px 0 0;
}

.nav-provider-edge .nav-section-toggle:hover,
.nav-provider-edge .nav-section-items .nav-item:hover {
    background: rgba(34, 197, 94, 0.12);
}

.nav-provider-edge .nav-section-items .nav-item.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}


/* ============ POPUP ANIMATIONS ============ */
@keyframes popupIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes popupOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ============ SPIN ANIMATION ============ */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ============ TASK INFO TOOLTIP ============ */
.task-info-tooltip {
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 200px;
    max-width: 300px;
    animation: tooltipFadeIn 0.2s ease;
}
.task-info-tooltip .task-info-row {
    font-size: 0.82rem;
    color: var(--text-secondary, #aaa);
    padding: 3px 0;
    line-height: 1.4;
}
.task-info-tooltip .task-info-row strong {
    color: var(--text-primary, #fff);
    margin-right: 4px;
}
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.btn-task-info {
    opacity: 0;
    transition: var(--transition);
}
.history-item:hover .btn-task-info {
    opacity: 1;
}

/* ============ HISTORY ITEM UI REDESIGN (voice, inline timing, wider player) ============ */
.history-item audio {
    min-width: 400px;
    flex: 1 1 400px;
    max-width: 520px;
    height: 36px;
}

@media (max-width: 768px) {
    .history-item audio {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
    }
}

/* History meta pills - retangular highlighted info boxes */
.history-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.history-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px 10px;
    line-height: 1.15;
    font-size: 0.75rem;
}

.history-pill-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    color: var(--text-secondary, #aaa);
}

.history-pill-value {
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
}

.history-pill--voice {
    border-color: var(--gold, #f7d14f);
}
.history-pill--voice .history-pill-label,
.history-pill--voice .history-pill-value {
    color: var(--gold, #f7d14f);
}

.history-pill--submit {
    border-color: rgba(34, 197, 94, 0.5);
}
.history-pill--submit .history-pill-label { color: #4ade80; }

.history-pill--credits {
    border-color: rgba(148, 163, 184, 0.35);
}

.history-pill--duration {
    border-color: rgba(236, 72, 153, 0.5);
}
.history-pill--duration .history-pill-label { color: #f472b6; }
.history-pill--duration .history-pill-value { color: #f9a8d4; }

.history-pill--expiry {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.12);
}
.history-pill--expiry .history-pill-label { color: #60a5fa; }
.history-pill--expiry .history-pill-value { color: #93c5fd; }

@media (max-width: 768px) {
    .history-pill {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    .history-pill-label {
        font-size: 0.6rem;
    }
}

/* Mini-history pills (TTS sidebar) */
.mini-history-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: var(--text-secondary, #aaa);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-pill--voice {
    border-color: var(--gold, #f7d14f);
    color: var(--gold, #f7d14f);
}

.mini-pill--duration {
    border-color: rgba(236, 72, 153, 0.5);
    color: #f472b6;
}


/* Generation Duration Popup — slides in from top-right, glossy 3D green button style */
.generation-duration-popup {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    transform: translateX(120%);
    background: linear-gradient(180deg, #34d979 0%, #10b85d 45%, #0a7a3d 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    padding: 14px 22px;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    /* 3D button effect */
    box-shadow:
        0 0 20px rgba(52, 217, 121, 0.55),
        0 0 40px rgba(52, 217, 121, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.45),
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -3px 0 rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    color: #ffffff;
}

.generation-duration-popup.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.generation-duration-popup.is-leaving {
    transform: translateX(120%);
    opacity: 0;
}

.generation-duration-popup .material-icons-round {
    font-size: 32px;
    color: #ffffff;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.generation-duration-popup-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.generation-duration-popup-title {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 2px;
    font-weight: 500;
}

.generation-duration-popup-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .generation-duration-popup {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        min-width: 0;
    }
}


/* Audio duration estimate pill — shown next to char count / credit cost */
.duration-estimate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 6px;
    font-size: 0.78rem;
    color: #a5b4fc;
    white-space: nowrap;
}
.duration-estimate strong {
    color: #c7d2fe;
    font-weight: 700;
}
.duration-estimate .material-icons-round {
    color: #a5b4fc;
}


/* Usage total badge beside the "Consumo de Créditos" heading */
.usage-total-badge {
    margin-left: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold, #f7d14f);
    font-size: 0.9rem;
    font-weight: 600;
    vertical-align: middle;
}
.usage-total-badge:empty {
    display: none;
}


/* Badge for audios soft-deleted by the client (visible only to admins) */
.admin-badge-deleted {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
}
.audio-flow-item.is-deleted-by-user {
    border-left: 3px solid rgba(239, 68, 68, 0.6);
}
.audio-flow-item.is-short-audio,
.audio-flow-item.is-short-audio.is-deleted-by-user {
    border-left: 6px solid #ef4444;
}


/* ============================================================
   VOICE MODAL v2 — 4x4 GRID + MULTI-LANGUAGE PREVIEW
   ============================================================ */
.voice-modal-content.voice-modal-v2 {
    width: 96vw !important;
    max-width: 1440px !important;
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
}

.voice-modal-v2 .voice-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)) !important;
    gap: 14px !important;
    padding: 18px 22px !important;
    max-height: calc(92vh - 260px) !important;
    min-height: 420px;
    align-content: start;
}

/* Card redesenhado para o grid */
.voice-modal-v2 .voice-card {
    padding: 14px 14px 12px;
    background: linear-gradient(155deg, rgba(255,255,255,0.035), rgba(155,77,255,0.04));
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.voice-modal-v2 .voice-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 14px 32px rgba(0,0,0,0.32), 0 0 24px var(--gold-glow);
}

/* Garantir footer DENTRO do card */
.voice-modal-v2 .voice-card .voice-card-desc {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    min-height: 0;
}

.voice-modal-v2 .voice-card .voice-card-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.voice-modal-v2 .voice-card .voice-use-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.voice-modal-v2 .voice-card .voice-preview-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Paginação do modal de vozes */
.voice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}
.voice-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}
.voice-pagination button:not(:disabled):hover {
    border-color: var(--gold);
    color: var(--gold);
}
.voice-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.voice-pagination .vp-info {
    min-width: 110px;
    text-align: center;
}
.voice-pagination .vp-count {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============ VOICE PAGINATION BUTTONS ============ */
#voice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.vp-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vp-page-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-gold);
    color: var(--text-primary);
}

.vp-page-btn.vp-active {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    font-weight: 700;
    cursor: default;
}

.vp-ellipsis {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0 4px;
    user-select: none;
}

.vp-count {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 12px;
}

/* Voice card visibility: any of these classes hides the card */
.voice-card.vp-hide-pag,
.voice-card.vp-hide-search,
.voice-card.vp-hide-filter {
    display: none !important;
}

/* Preview popover (escolher idioma para ouvir) */
.preview-lang-popover {
    position: fixed;
    z-index: 1100;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,77,255,0.18);
    padding: 14px;
    display: none;
    backdrop-filter: blur(14px);
}
.preview-lang-popover.open { display: block; }
.preview-lang-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.preview-lang-popover-header .plp-voice {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    margin-top: 2px;
}
.preview-lang-popover-header button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.preview-lang-popover-header button:hover { color: var(--text-primary); background: var(--bg-hover); }
.preview-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}
.preview-lang-grid button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}
.preview-lang-grid button:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.preview-lang-grid button.loading {
    opacity: 0.6;
    pointer-events: none;
}
.preview-lang-grid button.playing {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
}
.preview-lang-grid .plg-code {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.preview-lang-grid button.playing .plg-code { color: rgba(0,0,0,0.7); }

/* Badge de quando a voz tem multi-idioma disponível */
.voice-preview-multi {
    position: relative;
}
.voice-preview-multi::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--gold);
}


/* ============================================================
   VOICE PREVIEW POPOVER v2 — flags + download all + central toast
   ============================================================ */
.preview-lang-popover {
    width: 380px !important;
    padding: 12px !important;
}
.preview-lang-popover-header {
    gap: 8px;
}

/* Botão "Baixar todos" */
.plp-download-all {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-radius: 9px !important;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.plp-download-all:hover:not(:disabled) {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.plp-download-all:disabled {
    opacity: 0.6;
    cursor: wait;
}
.plp-download-all .material-icons-round { font-size: 16px; }
.plp-download-all.is-loading .material-icons-round {
    animation: plpSpin 1s linear infinite;
}
@keyframes plpSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Grid 5x2 com as bandeiras */
.preview-lang-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
}

.plp-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

.plp-flag-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 10px 4px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    transition: border-color .2s ease, transform .15s ease, background .2s ease;
    position: relative;
    min-height: 72px;
}
.plp-flag-btn:hover:not(:disabled):not(.is-loading) {
    border-color: var(--gold) !important;
    transform: translateY(-1px);
}
.plp-flag-btn:disabled { cursor: wait; }
.plp-flag {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.32));
}
.plp-lang-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    gap: 1px;
}
.plp-lang-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-primary);
}
.plp-lang-code {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Estados */
.plp-flag-btn.is-loading {
    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-hover), var(--bg-tertiary)) !important;
    background-size: 200% 100%;
    animation: plpPulse 1.1s ease-in-out infinite;
}
@keyframes plpPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.plp-flag-btn.is-loading::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    width: 14px; height: 14px;
    transform: translateX(-50%);
    border: 2px solid transparent;
    border-top-color: var(--gold);
    border-right-color: var(--gold);
    border-radius: 50%;
    animation: plpSpin .8s linear infinite;
}

.plp-flag-btn.is-ready {
    border-color: rgba(155, 77, 255, 0.45) !important;
    background: linear-gradient(145deg, rgba(155,77,255,0.08), rgba(155,77,255,0.02)) !important;
}

.plp-flag-btn.is-error {
    border-color: var(--error) !important;
    animation: plpShake .4s ease;
}

/* ============ ADMIN LANGUAGE PICKER (Ctrl+Click) ============ */
.plp-lang-picker {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
}
.plp-lang-picker.hidden { display: none; }
.plp-lang-picker-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
}
.plp-lang-picker-panel {
    position: relative; z-index: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px; width: min(560px, calc(100vw - 32px));
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.plp-lang-picker-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.plp-lang-picker-header strong { font-size: 1.05rem; color: var(--text-primary); }
.plp-lang-picker-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.plp-lang-picker-close:hover { color: var(--text-primary); }
.plp-lang-picker-hint {
    color: var(--text-muted); font-size: .85rem; margin: 0 0 14px 0;
}
.plp-lang-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
@media (max-width: 540px) {
    .plp-lang-picker-grid { grid-template-columns: repeat(4, 1fr); }
}
.plp-lang-picker-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border: 1px solid var(--border);
    background: var(--bg-tertiary); border-radius: 10px;
    cursor: pointer; transition: var(--transition);
}
.plp-lang-picker-cell:hover {
    border-color: var(--gold); transform: translateY(-1px);
}
.plp-lang-picker-cell.is-current {
    border-color: var(--gold); background: rgba(155,77,255,.08);
}
.plp-lang-picker-cell img { width: 36px; height: 24px; object-fit: cover; border-radius: 3px; }
.plp-lang-picker-cell span { font-size: .72rem; font-weight: 700; color: var(--text-secondary); }
.plp-lang-picker-footer {
    display: flex; justify-content: flex-end; margin-top: 14px;
}
.plp-lang-picker-reset {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); padding: 8px 14px; border-radius: 8px;
    cursor: pointer; font-size: .85rem;
}
.plp-lang-picker-reset:hover {
    border-color: var(--error); color: var(--error);
}

/* Indisponível: idioma sem preview pra essa voz. Bandeira fica
   esmaecida, sem hover/click, com cursor not-allowed e tooltip explicativo
   ("Indisponível para esta voz"). UX honesta: o usuário entende imediatamente
   que aquele idioma não tem amostra em vez de clicar e ouvir áudio em PT. */
.plp-flag-btn.is-unavailable,
.plp-cell[data-unavailable="1"] .plp-flag-btn {
    opacity: 0.42 !important;
    filter: grayscale(0.85);
    cursor: not-allowed !important;
    border-color: rgba(255,255,255,0.05) !important;
    background: rgba(255,255,255,0.015) !important;
}
.plp-flag-btn.is-unavailable:hover,
.plp-cell[data-unavailable="1"] .plp-flag-btn:hover {
    transform: none !important;
    border-color: rgba(255,255,255,0.05) !important;
}
.plp-cell[data-unavailable="1"] .plp-play-btn { display: none !important; }
@keyframes plpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Botão PLAY embaixo da bandeira (aparece depois de gerar) */
.plp-play-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px !important;
    border-radius: 8px !important;
    border: 1px solid var(--gold) !important;
    background: var(--gold) !important;
    color: #000 !important;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
}
.plp-play-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--gold-glow);
}
.plp-play-btn .material-icons-round { font-size: 14px; }
.plp-play-btn span:last-child { display: none; } /* apenas icon no espaço limitado */

/* Cell em playback */
.plp-cell.is-playing .plp-flag-btn {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(155,77,255,0.25);
}

/* Toast central com fade */
.vp-center-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    background: linear-gradient(145deg, rgba(12,11,18,0.96), rgba(31,22,49,0.98));
    border: 1px solid var(--gold);
    color: var(--text-primary);
    padding: 18px 28px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 36px var(--gold-glow);
    backdrop-filter: blur(12px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
    max-width: 460px;
    text-align: center;
}
.vp-center-toast-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.vp-center-toast-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.97);
}

/* Responsivo: bandeiras em 5x2 fica apertado em telas pequenas, cai pra 4 */
@media (max-width: 420px) {
    .preview-lang-popover { width: calc(100vw - 24px) !important; }
    .preview-lang-grid { grid-template-columns: repeat(4, 1fr) !important; }
}


/* Esconder filtro "Todos os idiomas" do modal (não é mais necessário) */
.voice-modal-v2 #default-filters > .vf-lang-btn-wrap:first-child,
.voice-modal-v2 #el-filters > .vf-lang-btn-wrap:first-child {
    display: none !important;
}


/* ============================================================
   VOICE PREVIEW POPOVER v3 — CENTRALIZADO + BANDEIRAS SVG
   Override das regras anteriores para mostrar centralizado na tela
   ============================================================ */

/* Backdrop escuro atrás do popover centralizado */
.plp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}
.plp-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Popover agora é um modal central — sobrescreve posicionamento antigo */
.preview-lang-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(.94);
    width: 560px !important;
    max-width: calc(100vw - 40px);
    max-height: 86vh;
    padding: 20px 22px !important;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-glow), 0 0 48px var(--gold-glow) !important;
    display: block !important;
    overflow-y: auto;
}
.preview-lang-popover.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Ajusta header do popover maior */
.preview-lang-popover-header {
    padding-bottom: 14px;
    margin-bottom: 14px !important;
    border-bottom: 1px solid var(--border);
}
.preview-lang-popover-header > div:first-child {
    font-size: 1rem !important;
}
.preview-lang-popover-header .plp-voice {
    font-size: .85rem !important;
    margin-top: 4px !important;
}
.plp-download-all {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
}
.plp-download-all .material-icons-round { font-size: 18px !important; }

/* Grid centralizado com cards maiores */
.preview-lang-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
}

/* Bandeiras SVG */
.plp-flag-btn {
    padding: 14px 6px !important;
    min-height: 110px !important;
    gap: 8px !important;
    overflow: hidden;
}
.plp-flag-btn .plp-flag {
    width: 48px !important;
    height: 32px !important;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: block;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
}
.plp-lang-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}
.plp-lang-code {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
}
.plp-play-btn {
    padding: 7px 6px !important;
    font-size: 0.68rem !important;
}
.plp-play-btn span:last-child {
    display: inline !important;
    margin-left: 3px;
}
.plp-play-btn .material-icons-round { font-size: 15px !important; }

@media (max-width: 640px) {
    .preview-lang-popover { width: calc(100vw - 24px) !important; padding: 16px !important; }
    .preview-lang-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    .plp-flag-btn { min-height: 100px !important; }
    .plp-play-btn span:last-child { display: none !important; }
}


/* ==========================================================
   AUDIO FLOW BY CLIENT (folder grid + ADMIN folder + content)
   ========================================================== */

/* Search bar */
.audio-flow-search {
    width: 100%;
    margin: 12px 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--surface, #fff);
    color: var(--text, #111);
}
.audio-flow-search:focus {
    outline: none;
    border-color: var(--primary, #4f46e5);
}

/* Grid wrapper */
.audio-flow-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1279px) { .audio-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .audio-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .audio-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .audio-flow-grid { grid-template-columns: 1fr; } }

/* Folder card (cliente) */
.audio-flow-folder-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    min-height: 86px;
}
.audio-flow-folder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-color: var(--primary, #4f46e5);
}
.audio-flow-folder-card .folder-name {
    font-weight: 600;
    color: var(--text, #111);
    font-size: 0.98rem;
    line-height: 1.2;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audio-flow-folder-card .folder-email {
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audio-flow-folder-card .folder-stats {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}

/* ADMIN card (special folder) */
.audio-flow-admin-card {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    border: 2px solid #d97706;
    border-radius: 10px;
    padding: 16px 18px;
    color: #1f2937;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.audio-flow-admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(217,119,6,0.25);
}
.audio-flow-admin-card .admin-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.audio-flow-admin-card .admin-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}
.audio-flow-admin-card .admin-counter {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* Content view (per-folder list / admin folder) */
.audio-flow-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.audio-flow-content-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.audio-flow-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text, #111);
}
.audio-flow-back-btn:hover {
    border-color: var(--primary, #4f46e5);
    color: var(--primary, #4f46e5);
}
.audio-flow-content-title {
    font-weight: 600;
    font-size: 1.1rem;
    flex: 1;
}
.audio-flow-cleanup-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.audio-flow-cleanup-controls input[type="number"] {
    width: 76px;
    padding: 5px 8px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
}
.audio-flow-cleanup-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}
.audio-flow-cleanup-btn:hover { background: #b91c1c; }

/* Section title within admin folder */
.audio-flow-section-title {
    margin: 8px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #111);
}

/* Paid previews table */
.audio-flow-paid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.audio-flow-paid-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-muted, #f9fafb);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-weight: 600;
}
.audio-flow-paid-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    vertical-align: top;
}
.audio-flow-paid-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.audio-flow-paid-table .voice-cell .voice-name { font-weight: 600; display: block; }
.audio-flow-paid-table .voice-cell .voice-id-fallback { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--text-muted, #6b7280); }
.audio-flow-paid-table .status-paid { color: #b45309; font-weight: 600; }
.audio-flow-paid-table .status-cache { color: #047857; font-weight: 500; }

/* Empty / loading states for the audio flow root */
.audio-flow-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}
.audio-flow-error {
    padding: 16px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
}


/* ============ SIDEBAR PLANS BUTTON ============ */
.btn-plans-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: none;
    border-radius: 12px;
    background: var(--gold-gradient);
    color: #000;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 18px var(--gold-glow);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.btn-plans-sidebar::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.45) 45%, transparent 60% 100%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
    pointer-events: none;
}
.btn-plans-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px var(--gold-glow);
    filter: brightness(1.08);
}
.btn-plans-sidebar:hover::before {
    transform: translateX(120%);
}
.btn-plans-sidebar .material-icons-round {
    font-size: 18px;
}

/* ============ PLANS MODAL ============ */
.plans-modal-content {
    width: min(1280px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    padding: 24px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.plans-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.plans-modal-header h2 {
    font-size: 1.7rem;
    margin: 6px 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.plans-modal-header p {
    color: var(--text-muted);
    max-width: 700px;
    line-height: 1.45;
}
.plans-kicker {
    display: inline-block;
    color: var(--gold);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.modal-close-btn:hover {
    border-color: var(--border-gold);
    color: var(--text-primary);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 218px;
}
.plan-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-gold);
    box-shadow: 0 10px 32px var(--gold-glow);
}
.plan-card.featured {
    border-color: rgba(168, 85, 247, 0.50);
    background: linear-gradient(145deg, rgba(45, 27, 61, 0.65), var(--bg-tertiary));
    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.18);
}
.plan-card-custom {
    border-color: rgba(34, 199, 255, 0.36);
    background: linear-gradient(145deg, rgba(7, 60, 85, 0.30), var(--bg-tertiary));
}
.plan-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.plan-card.featured .plan-tag {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.40);
    color: #d8b4fe;
}
.plan-card-custom .plan-tag {
    background: rgba(34, 199, 255, 0.14);
    border-color: rgba(34, 199, 255, 0.40);
    color: #67e8f9;
}
.plan-card h3 {
    font-size: 1.06rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.plan-price-old {
    color: var(--text-muted);
    font-size: 0.86rem;
    text-decoration: line-through;
    margin-bottom: 2px;
}
.plan-price {
    font-size: 1.52rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0;
    line-height: 1.1;
}
.plan-credits {
    color: var(--text-secondary);
    margin: 8px 0 4px;
    font-size: 0.84rem;
}
.plan-hours {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 10px;
    display: block;
    min-height: 24px;
}
.plan-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: var(--gold-gradient);
    color: #000;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.plan-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.plan-btn-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
}

/* Old/new price styling on landing pricing-grid */
.pricing-grid-7 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
.pricing-grid-7 .price-card {
    min-height: 260px;
    padding: 20px 16px;
}
.pricing-grid-7 .price {
    font-size: 1.88rem;
    letter-spacing: 0;
}
.price-card .price-old {
    color: rgba(255,255,255,0.45);
    font-size: 0.95rem;
    text-decoration: line-through;
    margin-bottom: 2px;
}
.price-card-custom {
    border-color: rgba(34, 199, 255, 0.36) !important;
}
.price-cta-link {
    margin-top: auto;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff !important;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.modal-plan-highlights {
    margin-top: -4px;
    margin-bottom: 14px;
}
.modal-gmail-pricing {
    margin-top: 14px;
    padding: 14px 16px;
}
.modal-plan-highlights .pricing-highlight {
    padding: 12px 14px;
}
.modal-plan-highlights .pricing-highlight .material-icons-round {
    width: 34px;
    height: 34px;
}

@media (max-width: 768px) {
    .plans-modal-content { padding: 20px; }
    .plans-modal-header { flex-direction: column; align-items: stretch; }
    .plans-modal-header h2 { font-size: 1.4rem; }
    .plans-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .pricing-highlights,
    .gmail-pricing-panel {
        grid-template-columns: 1fr;
    }
    .gmail-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============ QUALITY_TAG (PRO / HQ) BADGE — ElevenLabs voice cards ============
   Rendered by `_buildVoiceCard` inside `.vc-badges` using the
   `category_tag` value returned by /api/voices. PRO is reserved for
   ElevenLabs `voice_info.category === "professional"`; every other
   value (including missing) renders as HQ so a card never lacks a
   textual badge (Requirement 8.3).
*/
.voice-card .vc-badges .badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.voice-card .vc-badges .badge.badge-pro {
    color: #1a1306;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    border-color: rgba(251,191,36,.85);
    box-shadow: 0 0 12px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.voice-card .vc-badges .badge.badge-hq {
    color: #c7d2fe;
    background: linear-gradient(135deg, rgba(99,102,241,.32), rgba(67,56,202,.18));
    border-color: rgba(129,140,248,.55);
}


/* ================================================================
   CapCut voice card identity
   ----------------------------------------------------------------
   Voices that come from the DarkPlanner /voices payload tagged with
   provider "CapCut" share the same modal as ElevenLabs, but they are
   a curated, distinct catalog. Apply a warm terracotta-gold accent to
   the card itself and to the provider pill so users can recognize a
   CapCut voice at a glance, even when it shows up in a mixed search.
   The base .voice-card layout is untouched — only an accent border,
   a soft gradient, and the pill colors change.
   ================================================================ */
.voice-card.voice-card-capcut {
    border: 1px solid rgba(244, 162, 97, 0.42) !important;
    background:
        linear-gradient(135deg, rgba(244, 162, 97, 0.10), rgba(168, 85, 247, 0.06)) ,
        rgba(20, 16, 22, 0.55) !important;
    box-shadow: 0 6px 24px -16px rgba(244, 162, 97, 0.55) !important;
}
.voice-card.voice-card-capcut::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(244, 162, 97, 0.18) 0%, transparent 55%);
    opacity: 0.6;
    mix-blend-mode: screen;
}
.voice-card.voice-card-capcut .voice-card-name {
    color: #ffd9b3 !important;
}
.voice-card.voice-card-capcut .voice-card-id code {
    color: #f4a261 !important;
    background: rgba(244, 162, 97, 0.12) !important;
}
.voice-card.voice-card-capcut:hover {
    border-color: rgba(244, 162, 97, 0.7) !important;
    box-shadow: 0 10px 32px -14px rgba(244, 162, 97, 0.65) !important;
    transform: translateY(-2px);
}

/* CapCut Pro provider pill — overrides both pre-existing .provider-badge
   blocks lower in the cascade, kept high specificity to win without !important
   creep elsewhere. */
.voice-card .provider-badge.capcut,
.provider-badge.capcut {
    color: #fff5e6 !important;
    background: linear-gradient(135deg, rgba(244, 162, 97, 0.85), rgba(212, 137, 67, 0.65)) !important;
    border: 1px solid rgba(244, 162, 97, 0.55) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.05em !important;
}


/* ================================================================
   Select dropdown — match the studio dark/purple theme
   ----------------------------------------------------------------
   Native <select> dropdowns ignore most CSS on the popped-up panel,
   but every browser respects `background-color` and `color` on
   <option>. We force the same dark-purple palette used by the rest
   of the app so the gender / language pickers don't pop white panels
   on top of the dark UI. Selected/highlighted rows pick up the
   accent color the user already sees in primary buttons.
   ================================================================ */
select,
select:focus,
.form-group select,
#page-request-voice select,
.request-voice-form select {
    background: var(--bg-secondary, #1a1325) !important;
    color: var(--text-primary, #f5f3ff) !important;
    border: 1px solid var(--border, rgba(168, 85, 247, 0.25)) !important;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent, #a855f7) 50%),
        linear-gradient(135deg, var(--accent, #a855f7) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 32px !important;
}

/* Option panel — colors that browsers DO honour */
select option,
.form-group select option,
#page-request-voice select option,
.request-voice-form select option {
    background-color: #1a1325 !important;
    color: #f5f3ff !important;
}
select option:hover,
select option:focus,
select option:checked,
select option:checked:not(:disabled),
.form-group select option:checked,
#page-request-voice select option:checked,
.request-voice-form select option:checked {
    background: linear-gradient(0deg, rgba(168, 85, 247, 0.55), rgba(168, 85, 247, 0.55)), #1a1325 !important;
    color: #fff !important;
    box-shadow: 0 0 10px 100px rgba(168, 85, 247, 0.55) inset;
}
select option:disabled {
    color: rgba(245, 243, 255, 0.4) !important;
    background-color: #14101a !important;
}


/* === RESPONSIVE OVERRIDES (responsive-design spec) === */

/* 1. Global box-sizing reset (won't affect existing layout because most elements already use border-box) */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Media never overflows */
img, video, audio, iframe { max-width: 100%; height: auto; }

/* 3. Mobile breakpoint (<= 767px) */
@media (max-width: 767px) {
  /* --- Sidebar drawer (Wave 2 — Task 3.1) --- */
  #sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 320px) !important;
    z-index: 200 !important;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }
  #sidebar.open {
    transform: translateX(0);
  }
  /* Backdrop */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    cursor: pointer;
  }
  .sidebar-backdrop[aria-hidden="true"] { display: none; }

  /* Mobile menu button visible */
  #mobile-menu-btn {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Topbar adapt */
  .topbar {
    padding: 12px 16px !important;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 56px;
  }
  #page-title, .page-title {
    font-size: 1.05rem !important;
    line-height: 1.2;
  }
  .topbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Main content takes full width when sidebar is closed */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* App grid uses single column */
  .app {
    display: block !important;
  }

  /* --- Multi-column layouts → single column (Wave 3 — Task 4.1) --- */
  .tts-layout,
  .imagen-layout,
  .history-layout,
  .my-account-layout,
  .admin-layout,
  .request-voice-layout,
  .single-tool-layout {
    flex-direction: column !important;
    display: flex;
  }

  .tts-settings,
  .imagen-settings {
    width: 100% !important;
    max-height: none !important;
    border-top: 1px solid var(--border) !important;
    border-left: 0 !important;
  }

  /* --- Form rows and admin grids → single column (Task 4.2) --- */
  .client-form-row,
  .admin-signup-settings {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* --- Studio / provider / workflow / pricing / faq grids (Task 4.3) --- */
  .studio-card-grid,
  .provider-grid,
  .workflow-grid,
  .pricing-grid,
  .pricing-grid-7,
  .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* Voice grid in modal */
  .voice-modal-v2 .voice-list,
  .voice-grid {
    grid-template-columns: 1fr !important;
  }

  /* Voice card actions stack */
  .voice-card .voice-actions,
  .voice-card .voice-card-footer {
    flex-direction: column !important;
    gap: 8px;
  }
  .voice-card .voice-action,
  .voice-card .voice-use-btn {
    width: 100%;
  }

  /* --- Client management page (Task 4.4) --- */
  .clientes-page {
    padding: 16px !important;
  }
  .clients-stats-bar,
  #clients-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .clients-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  .clients-toolbar > * {
    width: 100% !important;
  }
  .client-credit-package-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- History / account / request-voice (Task 4.5) --- */
  .history-filters {
    flex-direction: column !important;
    gap: 8px;
  }
  .filter-tab {
    width: 100% !important;
  }
  .history-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }
  .history-item audio {
    width: 100% !important;
  }
  .request-voice-info {
    grid-template-columns: 1fr !important;
  }
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  .form-row > .form-group {
    width: 100%;
  }

  /* Auth screens */
  #login-form,
  #register-form,
  .auth-divider {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .google-signin-btn {
    width: 100%;
    min-height: 48px;
  }
  .auth-container {
    padding: 16px;
  }
  .auth-tabs {
    width: 100%;
  }

  /* --- Touch targets baseline (44x44) --- */
  button,
  a.btn,
  .nav-item,
  .voice-fav-btn,
  .voice-card .voice-action,
  .tab,
  .filter-tab,
  .voice-tab,
  .settings-tab,
  .modal-close,
  .modal-close-btn,
  .sidebar-btn,
  .btn-primary,
  .btn-secondary,
  .admin-btn,
  .gradient-option {
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Form inputs anti-zoom + width --- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea#tts-text,
  textarea#edge-tts-text,
  textarea#mm-tts-text,
  textarea#capcut-tts-text {
    min-height: 160px;
  }

  form > button[type="submit"],
  form .btn-primary,
  form .btn-auth {
    width: 100%;
  }

  /* --- Admin tables → card mode on mobile (Wave 4 — Task 5.1) --- */
  table.admin-table,
  table.audio-flow-paid-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate;
  }
  table.admin-table thead,
  table.audio-flow-paid-table thead {
    display: none !important;
  }
  table.admin-table tbody,
  table.audio-flow-paid-table tbody {
    display: block !important;
    width: 100%;
  }
  table.admin-table tbody tr,
  table.audio-flow-paid-table tbody tr {
    display: block !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--bg-secondary) !important;
    width: 100%;
    box-sizing: border-box;
  }
  table.admin-table tbody td,
  table.audio-flow-paid-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  table.admin-table tbody td::before,
  table.audio-flow-paid-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-align: left;
  }
  table.admin-table tbody td:not([data-label]),
  table.audio-flow-paid-table tbody td:not([data-label]) {
    /* td without data-label is treated as full-width content (no label) */
    flex-direction: column;
    align-items: flex-start;
  }
  /* Action cells wrap their buttons */
  .admin-actions,
  td.admin-actions,
  td .admin-actions {
    flex-wrap: wrap !important;
    gap: 6px;
  }

  /* --- Bottom sheet modals (Wave 5 — Task 7.1) --- */
  .modal-content,
  .client-modal-box,
  .plans-modal-content,
  .credits-warning-content {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    transform: translateY(0) !important;
  }
  /* Drag handle pill on top of every bottom sheet */
  .modal-content::before,
  .client-modal-box::before,
  .plans-modal-content::before,
  .credits-warning-content::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 8px auto 12px;
    border-radius: 2px;
    background: var(--text-tertiary, rgba(255, 255, 255, 0.4));
    opacity: 0.5;
  }
  /* Overlays at least 60% opaque */
  .modal-overlay,
  .client-modal-overlay,
  .modal-backdrop,
  .plans-modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }
  /* Body lock helper class */
  body.responsive-modal-locked {
    overflow: hidden;
  }

  /* --- Voice preview popover anchored to bottom on mobile (Wave 6 — Task 8.1) --- */
  .preview-lang-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 20px 20px 0 0 !important;
    transform: none !important;
  }
  .preview-lang-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Voice cards stay one column on mobile (Task 8.1) */
  .voice-card {
    min-width: 0;
  }
}

/* 4. Tablet breakpoint (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet rail: 72px sidebar with icons only */
  #sidebar {
    width: 72px !important;
  }
  #sidebar .nav-section-name,
  #sidebar .nav-item span:not(.material-icons-round):not(.nav-toggle-icon):not(.nav-provider-dot):not(.nav-discount),
  #sidebar .credits-label,
  #sidebar .sidebar-btn-label,
  #sidebar .logo-text,
  #sidebar .user-info {
    display: none !important;
  }
  #sidebar .nav-discount {
    font-size: 8px !important;
    position: absolute;
    bottom: 2px;
    right: 2px;
  }
  #mobile-menu-btn {
    display: none !important;
  }

  /* Tablet two-pane reduction (Task 4.1) */
  .tts-layout .tts-settings,
  .imagen-layout .imagen-settings {
    width: min(40vw, 320px);
  }

  /* Voice grids — 2 columns on tablet (Wave 6 — Task 8.1) */
  .voice-modal-v2 .voice-list,
  .voice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 5. Desktop breakpoint (>= 1024px) — defensive guard */
@media (min-width: 1024px) {
  /* Desktop guard: ensure mobile menu button stays hidden */
  #mobile-menu-btn {
    display: none !important;
  }
}

/* ============ ACCOUNT DISABLED MODAL ============ */
.account-disabled-modal-content {
    max-width: 480px;
    text-align: center;
    padding: 36px 32px 28px !important;
    border: 2px solid var(--error) !important;
    box-shadow: 0 0 60px rgba(239, 68, 68, 0.35);
}
.account-disabled-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 2px solid rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-disabled-icon .material-icons-round {
    font-size: 48px;
    color: var(--error);
}
.account-disabled-title {
    color: var(--error);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.25;
}
.account-disabled-msg {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 26px;
}
.account-disabled-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 32px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
    border: 0;
    cursor: pointer;
}
.account-disabled-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(37, 211, 102, 0.55);
}
.account-disabled-close {
    display: block;
    margin: 16px auto 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}
.account-disabled-close:hover { color: var(--text-primary); }

/* Linha de admin desativada */
.admin-row-inactive {
    opacity: 0.55;
    background: rgba(239, 68, 68, 0.04);
}
.admin-badge.active-yes { color: var(--success); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.admin-badge.active-no { color: var(--error); border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }


/* =====================================================================
   LIVE AUDIO GENERATION (admin)
   Página que mostra gerações em curso nos últimos 60 minutos.
   Polling a cada 3s; itens fora da janela somem.
   ===================================================================== */
.live-audio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.live-audio-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.live-audio-status .live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: liveDotPulse 1.6s ease-out infinite;
}
.live-audio-status.is-paused .live-dot {
    background: #f59e0b;
    animation: none;
}
.live-audio-status.is-error .live-dot {
    background: #ef4444;
    animation: none;
}
@keyframes liveDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}
.live-audio-meta {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.live-audio-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.live-audio-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color 160ms ease, background 160ms ease;
}
.live-audio-row.status-doing  { border-color: rgba(245, 158, 11, 0.35); }
.live-audio-row.status-done   { border-color: rgba(34, 197, 94, 0.30); }
.live-audio-row.status-failed { border-color: rgba(239, 68, 68, 0.35); }
.live-audio-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.live-audio-row.status-doing  .live-audio-icon { color: #f59e0b; }
.live-audio-row.status-done   .live-audio-icon { color: #22c55e; }
.live-audio-row.status-failed .live-audio-icon { color: #ef4444; }
.live-audio-row.status-doing  .live-audio-icon .material-icons-round {
    animation: spin 1.4s linear infinite;
}
.live-audio-info { min-width: 0; }
.live-audio-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}
.live-audio-line1 .live-pill {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.live-pill.provider-elevenlabs { background: rgba(59, 130, 246, 0.15);  color: #60a5fa; }
.live-pill.provider-edge       { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.live-pill.provider-minimax    { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.live-pill.provider-capcut     { background: rgba(160, 82, 45, 0.20);  color: #d6826a; }
.live-audio-line2 {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-audio-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.live-audio-elapsed {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}
.live-audio-row.is-leaving {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}


/* Live audio: ações (copiar / ouvir / baixar) */
.live-audio-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.live-audio-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.live-audio-btn:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.35);
    color: #c084fc;
}
.live-audio-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.live-audio-btn .material-icons-round {
    font-size: 18px;
}
.live-audio-player {
    margin-top: 8px;
    width: 100%;
}
.live-audio-row .live-audio-info {
    /* permite que o player ocupe a largura total da linha */
    grid-column: span 1;
}


/* Botão LIMPAR CRÉDITOS — estilo coerente com o grid de pacotes */
.btn-clear-credits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 16px;
    border: 1px dashed rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 68, 68, 0.85);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn-clear-credits .material-icons-round {
    font-size: 15px;
}
.btn-clear-credits:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.6);
    color: #f87171;
    transform: translateY(-1px);
}
.btn-clear-credits:active {
    transform: translateY(0);
    background: rgba(239, 68, 68, 0.18);
}

/* Active state para botões de pacote selecionados */
.client-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 7, 18, 0.68);
    backdrop-filter: blur(8px);
}
.client-confirm-dialog {
    position: relative;
    width: min(440px, 100%);
    border: 1px solid rgba(245, 158, 11, 0.34);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(18, 18, 28, 0.98), rgba(10, 10, 18, 0.98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 34px rgba(245, 158, 11, 0.14);
    padding: 24px;
    color: var(--text-primary);
}
.client-confirm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
}
.client-confirm-close .material-icons-round {
    font-size: 18px;
}
.client-confirm-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.14);
    color: var(--gold);
    margin-bottom: 14px;
}
.client-confirm-icon .material-icons-round {
    font-size: 26px;
}
.client-confirm-dialog h3 {
    margin: 0 34px 8px 0;
    font-size: 1.08rem;
    line-height: 1.25;
}
.client-confirm-text {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.client-confirm-text strong {
    color: var(--text-primary);
}
.client-confirm-list {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
}
.client-confirm-list div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    color: var(--text-secondary);
    font-size: 0.84rem;
}
.client-confirm-list .material-icons-round {
    color: var(--gold);
    font-size: 17px;
    flex-shrink: 0;
}
.client-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.client-confirm-secondary,
.client-confirm-primary {
    min-height: 40px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}
.client-confirm-secondary {
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
}
.client-confirm-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(245, 158, 11, 0.58);
    background: linear-gradient(135deg, var(--gold), #fbbf24);
    color: #111827;
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
}
.client-confirm-primary .material-icons-round {
    font-size: 18px;
}
.client-confirm-shortcut {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: right;
}
@media (max-width: 520px) {
    .client-confirm-dialog {
        padding: 20px;
    }
    .client-confirm-actions {
        flex-direction: column-reverse;
    }
    .client-confirm-secondary,
    .client-confirm-primary {
        width: 100%;
        justify-content: center;
    }
    .client-confirm-shortcut {
        text-align: center;
    }
}

.client-credit-package-grid button.active {
    border-color: var(--cl-purple-bright, #a855f7);
    background: rgba(168, 85, 247, 0.18);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}


/* Card dourado com light wave — créditos pendentes no card */
.client-card.has-credits-pending {
    position: relative;
    overflow: hidden;
    border-color: rgba(234, 179, 8, 0.5) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.4), 0 0 24px rgba(234, 179, 8, 0.35) !important;
}
.client-card.has-credits-pending::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(234, 179, 8, 0.06) 45%,
        rgba(234, 179, 8, 0.14) 50%,
        rgba(234, 179, 8, 0.06) 55%,
        transparent 70%
    );
    background-size: 250% 100%;
    animation: goldLightWave 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes goldLightWave {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.client-card.has-credits-pending > * {
    position: relative;
    z-index: 2;
}

.clone-quality-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
}

.clone-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    align-items: start;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.clone-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
}

.clone-success-overlay.show {
    opacity: 1;
}

.clone-success-box {
    width: min(260px, calc(100vw - 48px));
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 10px;
    text-align: center;
    padding: 22px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(34,197,94,0.45);
    box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 32px rgba(34,197,94,0.2);
    color: var(--text-primary);
}

/* Admin → "Atividade" column: shows last seen date + days since.
   Color codes the row's activity freshness so admins can spot
   inactive customers at a glance. */
.admin-activity-cell {
    line-height: 1.25;
    min-width: 150px;
}
.admin-activity-cell .admin-activity-date {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
    white-space: nowrap;
}
.admin-activity-cell .admin-activity-label {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 2px;
}
.admin-activity-cell.admin-activity-fresh .admin-activity-label {
    color: var(--success, #22c55e);
}
.admin-activity-cell.admin-activity-warn .admin-activity-label {
    color: #f59e0b;
}
.admin-activity-cell.admin-activity-stale .admin-activity-label {
    color: var(--error, #ef4444);
}
.admin-activity-cell.admin-activity-never .admin-activity-label,
.admin-activity-cell.admin-activity-never .admin-activity-date {
    color: var(--text-muted, #94a3b8);
    font-style: italic;
}

/* ===== Voice Filters V3 (Inline Flags + Gender) ===== */
.voice-filters-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 24px 12px;
  overflow: visible;
  flex: 0 0 auto;
}

#default-filters.voice-filters-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
}

.vf3-gender-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  min-width: 0;
  padding-bottom: 2px;
}
.vf3-gender-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.vf3-gender-btn:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #e2e8f0);
}
.vf3-gender-btn.active {
  border-color: var(--accent, #a855f7);
  background: rgba(168,85,247,0.18);
  color: #fff;
  box-shadow: 0 0 12px rgba(168,85,247,0.25);
}
.vf3-gender-btn.active[data-gender="male"] {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.18);
  box-shadow: 0 0 12px rgba(59,130,246,0.25);
}
.vf3-gender-btn.active[data-gender="female"] {
  border-color: #ec4899;
  background: rgba(236,72,153,0.18);
  box-shadow: 0 0 12px rgba(236,72,153,0.25);
}
.vf3-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--text-tertiary, #64748b);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 0;
  white-space: nowrap;
}
.vf3-reset-btn:hover {
  border-color: rgba(239,68,68,0.4);
  color: #f87171;
  background: rgba(239,68,68,0.08);
}
.vf3-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 84px;
  max-height: 184px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 8px 4px 6px 0;
  align-content: flex-start;
  border-top: 1px solid rgba(255,255,255,0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  -webkit-overflow-scrolling: touch;
}
.vf3-lang-row::-webkit-scrollbar {
  width: 5px;
}
.vf3-lang-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
.vf3-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 52px;
  flex-shrink: 0;
}
.vf3-lang-btn:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.vf3-lang-btn.active {
  border-color: var(--accent, #a855f7);
  background: rgba(168,85,247,0.15);
  box-shadow: 0 0 10px rgba(168,85,247,0.2);
}
.vf3-lang-btn .vf3-flag {
  font-size: 22px;
  line-height: 1;
}
.vf3-lang-btn .vf3-code {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vf3-lang-btn.active .vf3-code {
  color: #fff;
}
/* Dimmed voice cards when filtered */
.voice-card.vf3-dimmed {
  opacity: 0.15;
  pointer-events: none;
  filter: grayscale(0.6);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ===== Voice Filters V3 - Enhanced Flag Visuals ===== */
.vf3-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 72px;
  min-width: 0;
  flex: 0 0 72px;
}
.vf3-flag-img {
  width: 36px;
  height: 27px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.vf3-lang-btn:hover .vf3-flag-img {
  transform: scale(1.1);
}
.vf3-lang-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.vf3-lang-btn.active .vf3-lang-name {
  color: #fff;
}
.vf3-lang-btn .vf3-code {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@media (max-width: 760px) {
  .voice-filters-v3 {
    padding-inline: 14px;
  }

  .vf3-lang-row {
    min-height: 96px;
    max-height: 200px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .vf3-lang-btn {
    width: 64px;
    flex-basis: 64px;
    padding: 8px 8px 7px;
  }

  .vf3-flag-img {
    width: 32px;
    height: 24px;
  }

  .vf3-lang-name {
    max-width: 58px;
  }
}

/* ================================================================
   ARVORE DE REDE MULTINIVEL (ORGANOGRAMA / TREE DIAGRAM)
   ================================================================ */
.network-tree-container {
    width: 100%;
    overflow-x: auto;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 24px;
}

.network-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.network-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.network-tree li {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}

/* Linhas de conexão verticais superiores do pai */
.network-tree li::before, .network-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1.5px solid rgba(255, 255, 255, 0.3);
    width: 50%;
    height: 20px;
}

.network-tree li::after {
    right: auto;
    left: 50%;
    border-left: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Remover linhas das extremidades da árvore */
.network-tree li:only-child::after, .network-tree li:only-child::before {
    display: none;
}

.network-tree li:only-child {
    padding-top: 0;
}

.network-tree li:first-child::before, .network-tree li:last-child::after {
    border: 0 none;
}

.network-tree li:last-child::before {
    border-right: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 5px 0 0;
}

.network-tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* Linhas descendo do pai para os filhos */
.network-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1.5px solid rgba(255, 255, 255, 0.3);
    width: 0;
    height: 20px;
}

/* Card da árvore */
.tree-node-card {
    background: rgba(23, 23, 23, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    position: relative;
    z-index: 10;
    min-width: 220px;
    max-width: 260px;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.tree-node-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(234, 179, 8, 0.15);
}

.tree-node-card.node-self {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(23, 23, 23, 0.95) 0%, rgba(35, 35, 35, 0.95) 100%);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.tree-node-card.node-l1 {
    border-color: rgba(255, 255, 255, 0.15);
}

.tree-node-card.node-l2 {
    background: rgba(15, 15, 15, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
}

.tree-node-title {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    word-break: break-all;
}

.tree-node-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 12px;
    margin: 0 auto;
    width: fit-content;
}

.badge-self { background: rgba(234, 179, 8, 0.1); color: var(--gold); }
.badge-l1 { background: rgba(56, 189, 248, 0.1); color: #7dd3fc; }
.badge-l2 { background: rgba(255, 255, 255, 0.05); color: #ccc; }

.tree-node-info {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    text-align: left;
}

.tree-node-bonus {
    font-size: 12px;
    color: var(--gold);
    font-weight: bold;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 6px;
    text-align: center;
}

/* ============ REVENUE DASHBOARD (Compact) ============ */
.btn-revenue-sidebar {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 10px 16px; margin-bottom: 8px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; font-weight: 800; font-size: 0.82rem;
    letter-spacing: 0.06em; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 4px 18px rgba(16,185,129,0.3);
    text-transform: uppercase; position: relative; overflow: hidden;
}
.btn-revenue-sidebar::before {
    content:''; position:absolute; inset:-1px;
    background: linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.45) 45%, transparent 60% 100%);
    transform: translateX(-120%); transition: transform 0.7s; pointer-events:none;
}
.btn-revenue-sidebar:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(16,185,129,0.4); filter:brightness(1.08); }
.btn-revenue-sidebar:hover::before { transform:translateX(120%); }
.btn-revenue-sidebar .material-icons-round { font-size:18px; }

/* Top Bar */
.rev-top-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; margin-bottom:16px;
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; flex-wrap:wrap; gap:12px;
}
.rev-top-left { display:flex; align-items:center; gap:10px; }
.rev-top-left h3 { margin:0; font-size:1rem; font-weight:700; color:var(--text-primary); }
.rev-badge-total {
    padding:4px 14px; border-radius:20px; font-size:0.95rem; font-weight:800;
    background:rgba(16,185,129,0.12); color:#10b981; letter-spacing:-0.02em;
}
.rev-top-pills { display:flex; gap:8px; flex-wrap:wrap; }
.rev-pill {
    display:flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:8px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
    font-size:0.78rem;
}
.rev-pill .material-icons-round { font-size:16px; color:var(--text-muted); }
.rev-pill-label { color:var(--text-muted); font-weight:600; }
.rev-pill-val { font-weight:800; color:#10b981; }

/* Charts Row — 2 side by side like admin panel */
.rev-charts-row {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.rev-chart-panel {
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; padding:16px;
}
.rev-chart-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.rev-chart-title { font-size:0.85rem; font-weight:700; color:var(--text-primary); }
.rev-patrimonio-badge {
    padding:3px 12px; border-radius:16px; font-size:0.85rem; font-weight:800;
    background:rgba(16,185,129,0.12); color:#10b981;
}
.rev-period-tabs {
    display:flex; gap:2px; background:rgba(255,255,255,0.04);
    border-radius:6px; padding:2px;
}
.rev-tab {
    padding:4px 10px; border:none; border-radius:5px;
    background:transparent; color:var(--text-muted);
    font-size:0.72rem; font-weight:600; cursor:pointer;
    transition:all 0.2s;
}
.rev-tab:hover { color:var(--text-primary); background:rgba(255,255,255,0.06); }
.rev-tab.active { background:rgba(16,185,129,0.15); color:#10b981; }

.rev-canvas-wrap { position:relative; height:220px; }
.rev-canvas-wrap canvas { width:100%!important; height:100%!important; }

/* Actions Row */
.rev-actions-row {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}
.rev-action-box {
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; padding:16px;
}
.rev-action-box h4 {
    display:flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:700; margin:0 0 12px;
    color:var(--text-primary);
}
.rev-action-box h4 .material-icons-round { font-size:18px; color:#10b981; }

/* Plans Grid — 6 compact buttons */
.rev-plans-grid {
    display:grid; grid-template-columns:repeat(6, 1fr); gap:6px;
}
.rev-plan {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:10px 4px; border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; background:rgba(255,255,255,0.03);
    cursor:pointer; transition:all 0.2s;
}
.rev-plan:hover {
    border-color:rgba(16,185,129,0.4); background:rgba(16,185,129,0.08);
    transform:translateY(-1px);
}
.rev-plan strong { font-size:0.85rem; color:var(--text-primary); }
.rev-plan small { font-size:0.68rem; color:#10b981; font-weight:600; }

/* Custom Form */
.rev-custom-form {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.rev-custom-form input {
    flex:1; min-width:100px; padding:8px 12px;
    border:1px solid rgba(255,255,255,0.1); border-radius:8px;
    background:rgba(255,255,255,0.04); color:var(--text-primary);
    font-size:0.85rem;
}
.rev-custom-form input:focus { outline:none; border-color:rgba(16,185,129,0.5); }

/* Transactions Section */
.rev-tx-section {
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; padding:16px;
}
.rev-tx-section h4 {
    display:flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:700; margin:0 0 12px;
    color:var(--text-primary);
}
.rev-tx-section h4 .material-icons-round { font-size:18px; color:#10b981; }
.revenue-transactions { max-height:400px; overflow-y:auto; }
.revenue-transaction-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.04);
    transition:background 0.15s;
}
.revenue-transaction-item:hover { background:rgba(255,255,255,0.02); }
.revenue-transaction-item > .material-icons-round { font-size:20px; flex-shrink:0; }
.rev-tx-info { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.rev-tx-desc { font-size:0.82rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rev-tx-date { font-size:0.68rem; color:var(--text-muted); }
.rev-tx-amount { font-size:0.88rem; font-weight:800; white-space:nowrap; flex-shrink:0; }
.rev-tx-delete { background:none; border:none; cursor:pointer; padding:4px; border-radius:6px; color:var(--text-muted); transition:all 0.15s; flex-shrink:0; }
.rev-tx-delete:hover { background:rgba(239,68,68,0.12); color:#ef4444; }

/* Revenue Responsive */
@media (max-width:1024px) {
    .rev-charts-row { grid-template-columns:1fr; }
    .rev-actions-row { grid-template-columns:1fr; }
    .rev-plans-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px) {
    .rev-top-bar { flex-direction:column; align-items:flex-start; }
    .rev-plans-grid { grid-template-columns:repeat(3, 1fr); }
    .rev-custom-form { flex-direction:column; }
    .rev-custom-form input { width:100%; }
}

/* Undo Bar */
.rev-undo-bar {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; margin-bottom:16px;
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;
}
.rev-undo-btn {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.05); color:var(--text-primary);
    cursor:pointer; transition:all 0.2s;
}
.rev-undo-btn:hover:not(:disabled) { background:rgba(16,185,129,0.15); color:#10b981; }
.rev-undo-btn:disabled { opacity:0.3; cursor:default; }
.rev-undo-btn .material-icons-round { font-size:18px; }
.rev-undo-label { flex:1; font-size:0.78rem; color:var(--text-muted); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rev-undo-count { font-size:0.7rem; color:rgba(255,255,255,0.25); font-weight:600; font-family:'JetBrains Mono', monospace; }

/* Date Range Picker */
.rev-date-range {
    display:flex; align-items:center; gap:8px;
    padding:8px 0; margin-bottom:8px; flex-wrap:wrap;
}
.rev-date-input {
    padding:5px 10px; border:1px solid rgba(255,255,255,0.1);
    border-radius:6px; background:rgba(255,255,255,0.04);
    color:var(--text-primary); font-size:0.8rem;
    font-family:'Inter', sans-serif;
}
.rev-date-input:focus { outline:none; border-color:rgba(16,185,129,0.5); }
.rev-date-input::-webkit-calendar-picker-indicator { filter:invert(0.7); }

/* ===== TASK DETAIL MODAL ===== */
.td-modal-overlay {
    position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    animation: tdFadeIn 0.2s ease;
}
@keyframes tdFadeIn { from{opacity:0} to{opacity:1} }

.td-modal {
    width:min(780px, 94vw); max-height:90vh;
    background: linear-gradient(145deg, #12121e 0%, #0d0d18 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    animation: tdSlideUp 0.25s ease;
}
@keyframes tdSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.td-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.td-modal-header h2 {
    display:flex; align-items:center; gap:8px;
    font-size:1.05rem; font-weight:700; color:var(--text-primary);
    margin:0; font-family:'Inter', sans-serif;
}
.td-modal-header h2 .material-icons-round { font-size:22px; color:rgba(255,255,255,0.5); }
.td-close {
    width:34px; height:34px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.05); color:var(--text-primary);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.td-close:hover { background:rgba(239,68,68,0.2); color:#ef4444; }

.td-modal-body {
    padding:24px; overflow-y:auto; flex:1;
    display:flex; flex-direction:column; gap:20px;
}

/* Grid: Info + Actions */
.td-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
@media (max-width:600px) { .td-grid { grid-template-columns:1fr; } }

.td-info-section h3, .td-actions-section h3, .td-text-section h3, .td-player-section h3 {
    font-size:0.82rem; font-weight:700; color:rgba(255,255,255,0.5);
    text-transform:uppercase; letter-spacing:0.5px;
    margin:0 0 12px; display:flex; align-items:center; gap:6px;
    font-family:'Inter', sans-serif;
}
.td-player-section h3 .material-icons-round { font-size:18px; }

/* Info Table */
.td-info-table {
    width:100%; border-collapse:collapse;
}
.td-info-table td {
    padding:6px 0; font-size:0.82rem; color:var(--text-primary);
    border-bottom:1px solid rgba(255,255,255,0.03);
    font-family:'Inter', sans-serif;
    vertical-align:middle;
}
.td-info-table td:first-child {
    font-weight:600; color:rgba(255,255,255,0.5);
    white-space:nowrap; width:110px; padding-right:12px;
}

/* Status badges */
.td-status-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:20px;
    font-size:0.75rem; font-weight:700;
}
.td-status-done { background:rgba(16,185,129,0.15); color:#10b981; }
.td-status-failed { background:rgba(239,68,68,0.15); color:#ef4444; }
.td-status-doing { background:rgba(234,179,8,0.15); color:#eab308; }

.td-credits-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 10px; border-radius:20px;
    font-size:0.75rem; font-weight:700;
    background:rgba(234,179,8,0.12); color:#eab308;
    font-family:'JetBrains Mono', monospace;
}

.td-duration-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 10px; border-radius:20px;
    font-size:0.75rem; font-weight:600;
    background:rgba(16,185,129,0.12); color:#10b981;
}

.td-voice-id-text {
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem; color:rgba(16,185,129,0.8);
    word-break:break-all;
}

/* Actions */
.td-actions-section {
    display:flex; flex-direction:column; gap:10px;
}
.td-actions-section h3 { margin-bottom:8px; }
.td-action-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:10px 16px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px; background:rgba(255,255,255,0.03);
    color:var(--text-primary); font-size:0.82rem; font-weight:600;
    cursor:pointer; transition:all 0.2s; font-family:'Inter', sans-serif;
}
.td-action-btn .material-icons-round { font-size:18px; }
.td-action-btn:hover { background:rgba(255,255,255,0.06); transform:translateY(-1px); }

.td-action-download {
    border-color:rgba(16,185,129,0.3); color:#10b981;
}
.td-action-download:hover { background:rgba(16,185,129,0.1); border-color:rgba(16,185,129,0.5); }

.td-action-copy {
    border-color:rgba(255,255,255,0.08); color:rgba(255,255,255,0.5);
}
.td-action-copy:hover { color:var(--text-primary); }

.td-action-voice {
    border-color:rgba(234,179,8,0.3); color:#eab308;
}
.td-action-voice:hover { background:rgba(234,179,8,0.1); border-color:rgba(234,179,8,0.5); }

/* Text Content */
.td-text-section { }
.td-text-content {
    padding:16px 18px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;
    color:rgba(255,255,255,0.8);
    font-size:0.82rem; line-height:1.7;
    max-height:240px; overflow-y:auto;
    font-family:'Inter', sans-serif;
    white-space:pre-wrap; word-break:break-word;
}
.td-text-content::-webkit-scrollbar { width:5px; }
.td-text-content::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }

.td-text-stats {
    display:flex; gap:20px; margin-top:8px;
    font-size:0.72rem; color:rgba(255,255,255,0.35);
    font-family:'Inter', sans-serif;
}
.td-text-stats strong {
    color:rgba(255,255,255,0.6);
    font-family:'JetBrains Mono', monospace;
}

/* Player */
.td-player-section audio {
    width:100%; border-radius:8px;
    filter:brightness(0.9) contrast(1.1);
}

/* Detail button in history */
.btn-task-detail {
    background:rgba(99,102,241,0.1) !important;
    border:1px solid rgba(99,102,241,0.2) !important;
    color:#818cf8 !important;
}
.btn-task-detail:hover {
    background:rgba(99,102,241,0.2) !important;
    border-color:rgba(99,102,241,0.4) !important;
}

/* ================================================================
   VIDEO HUB — Tutorial & Notificações
   ================================================================ */

.vh-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(56,189,248,0.25);
    background: rgba(56,189,248,0.08);
    color: rgba(56,189,248,0.9);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.34,1.2,0.64,1);
    white-space: nowrap;
}
.vh-topbar-btn .material-icons-round { font-size: 18px; }
.vh-topbar-btn:hover {
    background: rgba(56,189,248,0.18);
    border-color: rgba(56,189,248,0.55);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(56,189,248,0.22);
}
.vh-notif-btn {
    border-color: rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.10);
    color: rgba(150,150,255,0.95);
}
.vh-notif-btn:hover {
    background: rgba(99,102,241,0.22);
    border-color: rgba(99,102,241,0.6);
    box-shadow: 0 4px 16px rgba(99,102,241,0.22);
}
.vh-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.vh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 11000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.vh-modal.vh-open { display: flex; }
.vh-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,11,26,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.vh-modal-box {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #0b1430);
    border: 1px solid rgba(56,189,248,0.20);
    border-radius: 20px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.65), 0 0 60px rgba(56,189,248,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}
.vh-modal-wide { width: min(860px, calc(100vw - 32px)); }
.vh-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.vh-modal-header > .material-icons-round { color: var(--gold, #38bdf8); font-size: 22px; }
.vh-modal-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; color: #eaf6ff; }
.vh-header-actions { display: flex; align-items: center; gap: 8px; }
.vh-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.vh-close:hover { background: rgba(244,63,94,0.18); border-color: rgba(244,63,94,0.4); color: #fb7185; transform: rotate(90deg) scale(1.1); }
.vh-close .material-icons-round { font-size: 18px; }
.vh-pub-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 8px;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.30);
    color: #7dd3fc; font-size: 0.76rem; font-weight: 700; cursor: pointer;
    transition: all 0.2s ease;
}
.vh-pub-btn:hover { background: rgba(56,189,248,0.22); border-color: rgba(56,189,248,0.55); transform: translateY(-1px); }
.vh-pub-btn .material-icons-round { font-size: 16px; }
.vh-modal-body { overflow-y: auto; flex: 1; padding: 20px; }

.vh-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vh-card {
    display: flex;
    flex-direction: row;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1);
    min-height: 130px;
}
.vh-card:hover {
    border-color: rgba(56,189,248,0.40);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.40), 0 0 18px rgba(56,189,248,0.10);
}
/* Thumbnail 42% à esquerda */
.vh-thumb {
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(29,78,216,0.35), rgba(56,189,248,0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 130px;
}
.vh-thumb::before {
    content: '';
    display: block;
    padding-top: 56.25%;
    position: absolute;
    width: 100%;
}
.vh-play-icon {
    position: absolute;
    font-size: 52px !important;
    color: rgba(255,255,255,0.9);
    filter: drop-shadow(0 3px 12px rgba(0,0,0,0.65));
    transition: transform 0.25s ease, opacity 0.2s ease;
    opacity: 0.85;
    z-index: 2;
}
.vh-card:hover .vh-thumb .vh-play-icon { transform: scale(1.15); opacity: 1; }
.vh-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s ease;
    z-index: 1;
}
.vh-card:hover .vh-thumb::after { background: rgba(0,0,0,0.12); }
/* Conteúdo à direita */
.vh-card-body {
    flex: 1;
    padding: 14px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    justify-content: space-between;
}
.vh-thumb-label {
    font-size: 0.97rem;
    font-weight: 700;
    color: #eaf6ff;
    line-height: 1.35;
}
.vh-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    gap: 8px;
}
.vh-card-date { font-size: 0.70rem; color: rgba(255,255,255,0.32); font-weight: 500; }


.vh-notif-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vh-notif-card {
    display: flex;
    flex-direction: row;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34,1.2,0.64,1);
    min-height: 130px;
}
.vh-notif-card:hover {
    border-color: rgba(99,102,241,0.40);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.40), 0 0 18px rgba(99,102,241,0.10);
}
/* Thumbnail: 42% da largura, proporção 16:9 travada */
.vh-notif-thumb {
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(56,189,248,0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 130px;
}
.vh-notif-thumb::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 */
    position: absolute;
    width: 100%;
}
.vh-notif-thumb .vh-play-icon {
    position: absolute;
    font-size: 52px !important;
    color: rgba(255,255,255,0.92);
    filter: drop-shadow(0 3px 12px rgba(0,0,0,0.65));
    transition: transform 0.25s ease, opacity 0.2s ease;
    opacity: 0.85;
    z-index: 2;
}
.vh-notif-card:hover .vh-notif-thumb .vh-play-icon { transform: scale(1.15); opacity: 1; }
.vh-notif-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.2s ease;
    z-index: 1;
}
.vh-notif-card:hover .vh-notif-thumb::after { background: rgba(0,0,0,0.12); }

/* Corpo do card — lado direito */
.vh-notif-body {
    flex: 1;
    padding: 14px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    justify-content: space-between;
}
.vh-notif-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vh-notif-date {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.32);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.vh-notif-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: #eaf6ff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vh-notif-desc {
    font-size: 0.80rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.55;
    flex: 1;
}
.vh-notif-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.vh-like-btn, .vh-comment-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.55);
    font-size: 0.76rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease;
}
.vh-like-btn .material-icons-round, .vh-comment-toggle .material-icons-round { font-size: 15px; }
.vh-like-btn:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); color: #fca5a5; }
.vh-like-btn.vh-liked { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45); color: #f87171; }
.vh-comment-toggle:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.35); color: #a5b4fc; }

.vh-comments-section { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; }
.vh-comment-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vh-comment { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 10px; font-size: 0.80rem; color: rgba(255,255,255,0.7); }
.vh-comment-author { font-weight: 700; color: var(--gold, #38bdf8); margin-right: 6px; font-size: 0.76rem; }
.vh-comment-form { display: flex; gap: 6px; }
.vh-comment-input {
    flex: 1; padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; color: #eaf6ff; font-size: 0.8rem; outline: none;
    transition: border-color 0.2s ease;
}
.vh-comment-input:focus { border-color: rgba(56,189,248,0.40); }
.vh-comment-send {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.30);
    color: #7dd3fc; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.vh-comment-send:hover { background: rgba(56,189,248,0.25); }
.vh-comment-send .material-icons-round { font-size: 16px; }

.vh-player-modal .vh-modal-backdrop { background: rgba(3,3,12,0.96); }
.vh-player-box {
    position: relative; z-index: 1;
    width: min(900px, calc(100vw - 32px));
    display: flex; flex-direction: column;
    background: #000; border-radius: 16px; overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}
.vh-player-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: rgba(11,20,48,0.9);
}
.vh-player-title { font-size: 0.88rem; font-weight: 600; color: #eaf6ff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-video { width: 100%; max-height: 70vh; display: block; background: #000; }

.vh-admin-form { display: flex; flex-direction: column; gap: 16px; }
.vh-field { display: flex; flex-direction: column; gap: 6px; }
.vh-field label { font-size: 0.80rem; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }
.vh-field input, .vh-field textarea {
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px; color: #eaf6ff; font-size: 0.88rem;
    outline: none; transition: border-color 0.2s ease;
    font-family: inherit; resize: vertical;
}
.vh-field input:focus, .vh-field textarea:focus { border-color: rgba(56,189,248,0.50); }
.vh-field-hint { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.vh-form-error { font-size: 0.80rem; color: #f87171; min-height: 18px; margin: 0; }
.vh-submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 24px; border-radius: 12px;
    background: linear-gradient(135deg,#1d4ed8,#38bdf8);
    color: #000; font-weight: 700; font-size: 0.90rem; cursor: pointer;
    border: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 8px 24px rgba(56,189,248,0.35);
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    align-self: flex-end;
}
.vh-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(0,0,0,0.35), 0 16px 40px rgba(56,189,248,0.50); }
.vh-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.vh-submit-btn .material-icons-round { font-size: 18px; }
.vh-del-btn {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.20);
    color: rgba(248,113,113,0.7); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;
}
.vh-del-btn:hover { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.50); color: #f87171; }
.vh-del-btn .material-icons-round { font-size: 15px; }
.vh-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: rgba(255,255,255,0.30); }
.vh-loading .material-icons-round { font-size: 36px; animation: spin 1.2s linear infinite; }
.vh-empty { text-align: center; padding: 30px; color: rgba(255,255,255,0.35); font-size: 0.88rem; }
.vh-spin { animation: spin 0.8s linear infinite; display: inline-block; }

/* Badge YouTube nos cards */
.vh-yt-badge {
    position: absolute;
    top: 6px; left: 6px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(255,0,0,0.75);
    color: #fff; font-size: 0.68rem; font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 2;
}


@media (max-width: 600px) {
    .vh-notif-thumb { width: 100%; }
    .vh-notif-list { grid-template-columns: 1fr; }
    .vh-topbar-label { display: none; }
    .vh-modal-wide { width: calc(100vw - 24px); }
    .vh-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   TOP VOZES — Botão animado + Modal de Ranking
   ================================================================ */

/* ---- Botão TOP VOZES ---- */
.top-voices-btn {
    position: relative;
    color: #fbbf24;
    border-color: rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.08);
    overflow: visible;
}
.top-voices-btn:hover {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.65);
    box-shadow: 0 4px 20px rgba(251,191,36,0.3);
    transform: translateY(-2px);
}

/* Pulso de atenção via box-shadow — sem artefatos */
.top-voices-btn {
    animation: tv-glow-pulse 2s ease-in-out infinite;
}

.top-voices-ring { display: none; }

@keyframes tv-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(251,191,36,0);
        border-color: rgba(251,191,36,0.4);
    }
    50% {
        box-shadow: 0 0 10px 3px rgba(251,191,36,0.35), 0 0 20px 6px rgba(251,191,36,0.12);
        border-color: rgba(251,191,36,0.8);
    }
}


/* ---- Modal TOP VOZES ---- */
.tv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tv-modal.active { display: flex; }

.tv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,7,18,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tv-fade-in 200ms ease-out;
}

@keyframes tv-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tv-box {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: 88vh;
    background: linear-gradient(145deg, #0f1628 0%, #090e1e 100%);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(251,191,36,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tv-slide-up 280ms cubic-bezier(0.34,1.3,0.64,1);
}

@keyframes tv-slide-up {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(251,191,36,0.15);
    background: linear-gradient(90deg, rgba(251,191,36,0.06) 0%, transparent 100%);
}
.tv-header-left { display: flex; align-items: center; gap: 14px; }
.tv-crown { font-size: 2rem; animation: tv-crown-float 3s ease-in-out infinite; }
@keyframes tv-crown-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%       { transform: translateY(-4px) rotate(5deg); }
}
.tv-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(90deg, #fbbf24, #f97316, #fcd34d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}
.tv-subtitle { margin: 2px 0 0; font-size: 0.72rem; color: rgba(255,255,255,0.4); }

.tv-close {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.tv-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.tv-close .material-icons-round { font-size: 18px; }

.tv-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}
.tv-body::-webkit-scrollbar { width: 4px; }
.tv-body::-webkit-scrollbar-track { background: transparent; }
.tv-body::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.3); border-radius: 2px; }

/* Loading */
.tv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}
.tv-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(251,191,36,0.15);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: tv-spin 0.8s linear infinite;
}
@keyframes tv-spin { to { transform: rotate(360deg); } }

/* Lista */
.tv-list {
    list-style: none;
    margin: 0;
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
    animation: tv-item-in 300ms ease-out both;
}
.tv-item:hover {
    background: rgba(251,191,36,0.06);
    border-color: rgba(251,191,36,0.2);
    transform: translateX(4px);
}

@keyframes tv-item-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Posição (medal/número) */
.tv-rank {
    min-width: 32px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}
.tv-rank-1 { color: #fbbf24; text-shadow: 0 0 12px rgba(251,191,36,0.6); }
.tv-rank-2 { color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,0.4); }
.tv-rank-3 { color: #cd7c3a; text-shadow: 0 0 8px rgba(205,124,58,0.4); }
.tv-rank-num { font-size: 0.78rem; color: rgba(255,255,255,0.35); }

/* Avatar / ícone da voz */
.tv-avatar {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(249,115,22,0.12));
    border: 1px solid rgba(251,191,36,0.2);
}

/* Info */
.tv-info { flex: 1; min-width: 0; }
.tv-voice-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-voice-meta {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Contagem */
.tv-count {
    flex-shrink: 0;
    text-align: right;
}
.tv-count-num {
    font-size: 1rem;
    font-weight: 800;
    color: #fbbf24;
}
.tv-count-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Botões de ação por item (Copiar ID / Usar Voz) */
.tv-item-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.2s, transform 0.2s;
}
.tv-item:hover .tv-item-actions {
    opacity: 1;
    transform: translateX(0);
}
.tv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s;
    font-family: inherit;
}
.tv-action-btn .material-icons-round { font-size: 13px; }
.tv-action-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.tv-copy-btn:hover {
    border-color: rgba(56,189,248,0.4);
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
}
.tv-use-btn {
    border-color: rgba(251,191,36,0.3);
    background: rgba(251,191,36,0.08);
    color: #fbbf24;
}
.tv-use-btn:hover {
    border-color: rgba(251,191,36,0.6);
    background: rgba(251,191,36,0.18);
    color: #ffd060;
    box-shadow: 0 0 10px rgba(251,191,36,0.15);
}
.tv-use-label { font-size: 0.68rem; }

/* Barra de progresso */
.tv-bar-wrap {
    margin-top: 5px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.tv-bar {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #fbbf24, #f97316);
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Top 3 destaque */
.tv-item[data-rank="1"] {
    background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(249,115,22,0.06) 100%);
    border-color: rgba(251,191,36,0.3);
    box-shadow: 0 0 20px rgba(251,191,36,0.08);
}
.tv-item[data-rank="2"] {
    background: rgba(148,163,184,0.06);
    border-color: rgba(148,163,184,0.2);
}
.tv-item[data-rank="3"] {
    background: rgba(205,124,58,0.07);
    border-color: rgba(205,124,58,0.2);
}

/* Empty state */
.tv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: rgba(255,255,255,0.3);
    text-align: center;
}
.tv-empty .material-icons-round { font-size: 48px; opacity: 0.4; }
.tv-empty p { font-size: 0.85rem; line-height: 1.6; margin: 0; }

@media (max-width: 600px) {
    .tv-box { width: calc(100vw - 24px); }
    .tv-voice-name { font-size: 0.8rem; }
}