/* Shared customer UI polish based on customer_kiki_test.html.
   Keep this as a visual override only; do not add behavior here. */

:root {
    --primary: #2dd4bf;
    --primary-hover: #14b8a6;
    --accent: #38bdf8;
    --secondary: #22d3ee;
    --primary-rgb: 45, 212, 191;
    --accent-rgb: 56, 189, 248;
    --bg: #0d111b;
    --surface: #141925;
    --surface-2: #111827;
    --surface-panel: #141925;
    --surface-soft: #182132;
    --border: #2d3748;
    --line-soft: #344054;
    --text: #f8fafc;
    --text-muted: #cbd5e1;
    --muted: #cbd5e1;
}

html,
body,
button,
input,
select,
textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

body,
.app-screen,
.app-body {
    background: #0d111b !important;
    color: #f8fafc !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

nav.slim-nav,
.slim-nav,
.top-nav,
.header {
    background: #0d111b !important;
    border-bottom: 1px solid #263244 !important;
    box-shadow: none !important;
}

.live-ticker {
    background: #111827 !important;
    border-top: 1px solid #263244 !important;
    border-bottom: 1px solid #263244 !important;
    box-shadow: none !important;
}

.ticker-item,
.ticker-item span,
.ticker-item b {
    font-size: 13px !important;
    font-weight: 650 !important;
    text-shadow: none !important;
}

.ticker-item span {
    color: #7dd3fc !important;
}

.ticker-item b {
    color: #34d399 !important;
}

.sidebar {
    width: 350px !important;
    min-width: 350px !important;
    background: #11131a !important;
    border-right: 1px solid #2d3748 !important;
    box-shadow: none !important;
}

.sidebar-user,
.sidebar-bottom {
    background: #11131a !important;
    border-color: #2d3748 !important;
}

.sidebar-bottom {
    padding: 14px 16px !important;
}

.sidebar-bottom .quota,
.sidebar-bottom .quota-text,
#quotaText {
    color: #fff !important;
}

#quotaText,
.sidebar-bottom .quota strong,
.sidebar-bottom .quota-text {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    font-weight: 750 !important;
}

.sidebar-bottom small,
#pointsDisplay,
#expiryText,
#profileText {
    color: #e2e8f0 !important;
}

.sidebar-email {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.sidebar-section-label,
.sidebar-section-title {
    color: #f8fafc !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
}

.sidebar-nav-item,
.sidebar-nav-item span,
.sidebar-link,
.sidebar-link span {
    color: #f8fafc !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.sidebar-nav-item,
.sidebar-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
}

.sidebar-nav-item:hover,
.sidebar-link:hover {
    background: #1b2230 !important;
    border-color: #334155 !important;
}

.sidebar-nav-item.active,
.sidebar-link.active {
    background: #22283a !important;
    border-color: #4b556f !important;
    color: #fff !important;
    box-shadow: none !important;
}

.main-layout,
.main-area,
.workspace,
.content,
.page-content {
    background: #0f1320 !important;
}

.input-card,
.right-column,
.panel,
.card,
.history,
.settings-card,
.srt-settings-card,
.srt-file-card {
    background: #141925 !important;
    border-color: #344054 !important;
    box-shadow: none !important;
}

.input-card:focus-within,
.panel:focus-within,
.card:focus-within {
    border-color: rgba(45, 212, 191, 0.58) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.16) !important;
}

input,
select,
textarea,
.form-control {
    background: #090d15 !important;
    border-color: #334155 !important;
    color: #fff !important;
}

input::placeholder,
textarea::placeholder {
    color: #aab2c2 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.18) !important;
}

.btn-primary,
.convert-btn,
.btn-batch-confirm,
.upgrade-btn,
.player-btn,
button.primary,
button[type="submit"] {
    background: linear-gradient(135deg, #2dd4bf, #38bdf8) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.btn-primary *,
.convert-btn *,
.btn-batch-confirm *,
.upgrade-btn *,
.player-btn *,
button.primary *,
button[type="submit"] * {
    color: inherit !important;
}

.btn-primary:hover,
.convert-btn:hover,
.btn-batch-confirm:hover,
.upgrade-btn:hover,
.player-btn:hover,
button.primary:hover,
button[type="submit"]:hover {
    box-shadow: 0 10px 24px rgba(45, 212, 191, 0.18) !important;
}

button[onclick="openTeamModal()"] {
    background: #162436 !important;
    color: #fff !important;
    border: 1px solid #2f485f !important;
    box-shadow: none !important;
}

button[onclick="openTeamModal()"] i,
button[onclick="openTeamModal()"] .btn-text {
    color: #fff !important;
    font-weight: 750 !important;
}

.gift-icon-link {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.quota-fill,
#quotaFill,
.job-progress-bar,
.progress-fill,
.srt-progress > span {
    background: linear-gradient(90deg, #2dd4bf, #38bdf8) !important;
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.22) !important;
}

.quota-bar,
.quota-track,
.job-progress-bg,
.progress-track {
    background: #263244 !important;
}

.sidebar-bottom .quota-bar,
.sidebar-bottom .quota-track {
    width: 100% !important;
    height: 5px !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    border-radius: 999px !important;
    background: #263244 !important;
    overflow: hidden !important;
}

.sidebar-bottom .quota-fill,
.sidebar-bottom #quotaFill {
    display: block !important;
    height: 100% !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    transition: width 0.35s ease !important;
}

#userPlanBadge,
.plan-badge,
.voice-tag {
    background: #1e293b !important;
    color: #fff !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

.plan-badge.supper-vip,
.voice-tag.supper-vip,
.plan.supper-vip,
#userPlanBadge.supper-vip {
    background: linear-gradient(135deg, #d4af37, #f3e5ab) !important;
    color: #000 !important;
    border-color: #c5a017 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.35) !important;
}

input[type="range"],
input[type="checkbox"],
input[type="radio"] {
    accent-color: #2dd4bf !important;
}

a,
.link,
[style*="var(--primary)"],
[style*="var(--accent)"] {
    color: #7dd3fc;
}

.social-icon:hover {
    color: #fff !important;
}

@media (max-width: 1020px) {
    .sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Final cyan theme override.
   Loaded after page-local styles so old purple/violet values do not leak visually. */
:root {
    --primary: #2dd4bf !important;
    --primary-hover: #14b8a6 !important;
    --primary-dim: rgba(45, 212, 191, 0.15) !important;
    --primary-rgb: 45, 212, 191 !important;
    --accent: #38bdf8 !important;
    --accent-rgb: 56, 189, 248 !important;
    --secondary: #22d3ee !important;
    --violet: #38bdf8 !important;
    --teal: #2dd4bf !important;
}

body {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 34%),
        #0d111b !important;
}

.nav-item,
.sidebar-nav-item,
.sidebar-link,
.menu-item,
.tool-link {
    color: #fff !important;
}

.nav-item:hover,
.nav-item.active,
.sidebar-nav-item:hover,
.sidebar-nav-item.active,
.sidebar-link:hover,
.sidebar-link.active,
.menu-item:hover,
.menu-item.active,
.tool-link:hover,
.tool-link.active {
    background: #22283a !important;
    border-color: #334155 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.nav-item.active i,
.nav-item:hover i,
.sidebar-nav-item.active i,
.sidebar-nav-item:hover i,
.sidebar-link.active i,
.sidebar-link:hover i,
.menu-item.active i,
.menu-item:hover i,
.tool-link.active i,
.tool-link:hover i {
    color: #7dd3fc !important;
}

.tab.active,
.tab-btn.active,
.tabs button.active,
.mode-btn.active,
.chip.active,
.pill.active,
.voice-tab.active,
.filter-tab.active,
.segmented button.active {
    background: #223042 !important;
    border-color: #38bdf8 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.hero p,
.subtitle,
.page-subtitle,
.muted,
.text-muted {
    color: #cbd5e1 !important;
}

.dropzone,
.upload-zone,
.upload-box,
.file-drop,
.drop-area,
.srt-upload-box {
    border-color: rgba(56, 189, 248, 0.38) !important;
    background: rgba(15, 23, 42, 0.52) !important;
}

.dropzone:hover,
.upload-zone:hover,
.upload-box:hover,
.file-drop:hover,
.drop-area:hover,
.srt-upload-box:hover {
    border-color: rgba(45, 212, 191, 0.72) !important;
    background: rgba(45, 212, 191, 0.06) !important;
}

.btn-primary,
.convert-btn,
.btn-batch-confirm,
.upgrade-btn,
.player-btn,
.btn-gradient,
.create-btn,
.submit-btn,
.primary-btn,
button.primary,
button[type="submit"] {
    background: linear-gradient(135deg, #2dd4bf, #38bdf8) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.convert-btn:hover,
.btn-batch-confirm:hover,
.upgrade-btn:hover,
.player-btn:hover,
.btn-gradient:hover,
.create-btn:hover,
.submit-btn:hover,
.primary-btn:hover,
button.primary:hover,
button[type="submit"]:hover {
    box-shadow: 0 10px 24px rgba(45, 212, 191, 0.18) !important;
}

[style*="#8b5cf6"],
[style*="#7c3aed"],
[style*="#9333ea"],
[style*="#a855f7"],
[style*="#c084fc"],
[style*="#c4b5fd"],
[style*="#ec4899"],
[style*="rgba(139, 92, 246"],
[style*="rgba(139,92,246"],
[style*="purple"],
[style*="violet"] {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: none !important;
}

[style*="color:#8b5cf6"],
[style*="color: #8b5cf6"],
[style*="color:#7c3aed"],
[style*="color: #7c3aed"],
[style*="color:#9333ea"],
[style*="color: #9333ea"],
[style*="color:#a855f7"],
[style*="color: #a855f7"],
[style*="color:#c084fc"],
[style*="color: #c084fc"],
[style*="color:#c4b5fd"],
[style*="color: #c4b5fd"],
[style*="color:#ec4899"],
[style*="color: #ec4899"] {
    color: #7dd3fc !important;
}

[style*="background:linear-gradient"][style*="#8b5cf6"],
[style*="background: linear-gradient"][style*="#8b5cf6"],
[style*="background:linear-gradient"][style*="#7c3aed"],
[style*="background: linear-gradient"][style*="#7c3aed"],
[style*="background:linear-gradient"][style*="#ec4899"],
[style*="background: linear-gradient"][style*="#ec4899"] {
    background: linear-gradient(135deg, #2dd4bf, #38bdf8) !important;
}

[style*="background:rgba(139, 92, 246"],
[style*="background: rgba(139, 92, 246"],
[style*="background:rgba(139,92,246"],
[style*="background: rgba(139,92,246"],
[style*="background-color:rgba(139, 92, 246"],
[style*="background-color: rgba(139, 92, 246"],
[style*="background-color:rgba(139,92,246"],
[style*="background-color: rgba(139,92,246"] {
    background: rgba(45, 212, 191, 0.1) !important;
}