:root {
    --bg: #e4e6ea;
    --panel-bg: #f5f5f5;
    --panel-border: #c8c8c8;
    --panel-shadow: 0 1px 4px rgba(0,0,0,0.1);
    --text: #1a1a1a;
    --text-s: #555;
    --text-xs: #888;
    --input-bg: #ffffff;
    --input-border: #b8b8b8;
    --slider-color: #4a90d9;
    --tbl-header-bg: #2bbfbf;
    --tbl-header-text: #fff;
    --success-color: #28a745;
    --error-color: #dc3545;
    --row-odd: #ffffff;
    --row-even: #f0f8f0;
    --row-hover: #e8f4fd;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 13px;
    line-height: 1.5;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #ddd; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ========== AUTH ========== */
.auth-bg {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #cdd5e0, #e8eaf0);
}

.auth-card {
    width: 100%; max-width: 420px;
    padding: 40px 36px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.14);
    text-align: center;
}

.auth-icon {
    width: 64px; height: 64px;
    background: #4a90d9;
    border-radius: 14px;
    margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: white;
    box-shadow: 0 4px 12px rgba(74,144,217,0.4);
}

.auth-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; color: var(--text); }
.auth-input-group { margin-bottom: 16px; text-align: left; }
.auth-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.82rem; color: var(--text-s); }
.auth-input {
    width: 100%; padding: 10px 14px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text); font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.auth-input:focus { border-color: #4a90d9; outline: none; box-shadow: 0 0 0 3px rgba(74,144,217,0.15); }

.btn-cyber {
    width: 100%; padding: 12px;
    border-radius: 8px; border: none;
    background: linear-gradient(90deg, #4a90d9, #357abd);
    color: white; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; transition: filter 0.2s, transform 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
}
.btn-cyber:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-cyber:active { transform: translateY(0); }
.btn-cyber:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ========== APP WRAPPER ========== */
.app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ========== TITLE BAR ========== */
.title-bar {
    background: #2c2c2c;
    color: #eee;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid #111;
    user-select: none;
}

.title-bar-nav { display: flex; align-items: center; gap: 2px; }

.title-nav-btn {
    background: none;
    border: none;
    color: #bbb;
    padding: 5px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.title-nav-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.title-nav-btn.active { background: rgba(74,144,217,0.25); color: #7ab8f5; }

/* ========== VIEW PANELS ========== */
.view-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.view-panel.active-panel { display: flex; }

/* ========== MAIN BODY ========== */
.main-body {
    flex: 1;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    min-height: 0;
}

/* ========== COLUMNS ========== */
.left-col { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.right-col { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

/* ========== SECTION BOX ========== */
.section-box {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    box-shadow: var(--panel-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.section-title {
    background: #e8e8e8;
    border-bottom: 1px solid var(--panel-border);
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sec-icon { margin-right: 6px; color: #4a90d9; }

.word-badge {
    font-size: 0.68rem;
    font-family: monospace;
    background: rgba(0,0,0,0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.section-body { padding: 10px 12px; }

/* ========== TEXTAREA ========== */
#tts-input {
    width: 100%;
    height: 200px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    background: var(--input-bg);
    padding: 10px 12px;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.65;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#tts-input:focus { border-color: #4a90d9; outline: none; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }

/* ========== CÀI ĐẶT ========== */
.caidat-body { display: flex; flex-direction: column; gap: 10px; }

.setting-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.setting-group-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-s);
    display: flex;
    align-items: center;
    gap: 6px;
}

.setting-divider {
    height: 1px;
    background: var(--panel-border);
    margin: 2px 0;
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-label {
    font-size: 0.82rem;
    color: var(--text-s);
    font-weight: 600;
    min-width: 108px;
    white-space: nowrap;
}

.slider-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }

.custom-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 3px;
    background: #ccc;
    outline: none;
    cursor: pointer;
}
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--slider-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.custom-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.slider-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-s);
    min-width: 44px;
    text-align: right;
}

.action-row { display: flex; gap: 10px; }

.btn-action {
    flex: 1; padding: 9px 0;
    border: none; border-radius: 6px;
    font-size: 0.86rem; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: filter 0.15s, transform 0.1s;
    letter-spacing: 0.02em;
}
.btn-action:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-start { background: #28a745; color: white; box-shadow: 0 2px 8px rgba(40,167,69,0.3); }
.btn-start:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-stop { background: #dc3545; color: white; box-shadow: 0 2px 8px rgba(220,53,69,0.3); }
.btn-stop:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

.status-inline {
    padding: 8px 12px;
    background: rgba(0,0,0,0.04);
    border-radius: 5px;
    border-left: 3px solid #4a90d9;
    font-size: 0.78rem;
    color: var(--text-s);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    word-break: break-word;
    min-height: 32px;
}
.status-inline i { flex-shrink: 0; margin-top: 2px; }

/* Batch TTS progress bar */
.batch-progress-bar {
    height: 4px; border-radius: 2px;
    background: #e5e7eb; overflow: hidden;
    margin-top: 4px;
}
.batch-progress-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    transition: width 0.4s ease;
}

/* Word badge (character counter) */
.word-badge {
    font-size: 0.72rem;
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 0;
}

/* ========== FPT CHIPS ========== */
.fpt-chips-grid { display: flex; flex-wrap: wrap; gap: 5px; }

.fpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 5px;
    border-radius: 20px;
    background: #efefef;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-s);
    white-space: nowrap;
    user-select: none;
}
.fpt-chip:hover { border-color: #2bbfbf; background: #e0f5f5; color: #1a8888; }
.fpt-chip.selected {
    border-color: #2bbfbf;
    background: #c8eeed;
    color: #147070;
    box-shadow: 0 0 0 2px rgba(43,191,191,0.2);
}
.fpt-chip-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #c2185b);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800;
    color: white; flex-shrink: 0;
}

/* ========== CLOUD VOICES (RIGHT TOP) ========== */
.cloud-voices-section { flex-shrink: 0; }

.cloud-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(99,102,241,0.1);
    color: #5254a3;
    border: 1px solid rgba(99,102,241,0.25);
    padding: 2px 8px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 4px;
}

.cloud-voices-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 12px;
    min-height: 64px;
}

.voice-loading {
    color: var(--text-xs);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

/* Cloud voice card - compact horizontal style */
.cloud-voice-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 7px;
    border-radius: 24px;
    background: #f0f0f0;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
}
.cloud-voice-card:hover {
    border-color: #6366f1;
    background: #eeecff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.cloud-voice-card.selected {
    border-color: #6366f1;
    background: #dfe0ff;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
}
.cloud-voice-card.selected .cv-name { color: #3730a3; }

.cv-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
    color: white; flex-shrink: 0;
}
.cv-avatar.premium { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.cv-avatar.cloned  { background: linear-gradient(135deg, #ec4899, #be185d); }

.cv-info { display: flex; flex-direction: column; gap: 1px; }
.cv-name { font-size: 0.8rem; font-weight: 700; color: #333; line-height: 1.2; }
.cv-desc { font-size: 0.68rem; color: #888; line-height: 1.2; }

.cv-play-btn {
    margin-left: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #6366f1; font-size: 0.6rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cv-play-btn:hover { background: #6366f1; color: white; border-color: #6366f1; }

.cv-cloned-tag {
    font-size: 0.6rem;
    background: rgba(236,72,153,0.12);
    color: #be185d;
    border: 1px solid rgba(236,72,153,0.25);
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 700;
    white-space: nowrap;
}

/* ========== RESULT TABLE ========== */
.result-section { flex: 1; overflow: hidden; }
.tbl-wrap { flex: 1; overflow-y: auto; max-height: 220px; }

.result-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }

.result-table thead tr { background: var(--tbl-header-bg); position: sticky; top: 0; z-index: 2; }
.result-table thead th {
    color: var(--tbl-header-text);
    padding: 8px 10px;
    text-align: left;
    font-weight: 700; font-size: 0.74rem;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.th-stt, .th-cb { width: 36px; text-align: center !important; }
.th-status { width: 90px; text-align: center !important; }
.th-text { flex: 1; }

.result-table tbody tr:nth-child(odd)  { background: var(--row-odd); }
.result-table tbody tr:nth-child(even) { background: var(--row-even); }
.result-table tbody tr:hover { background: var(--row-hover); cursor: pointer; }
.result-table tbody tr.playing-row { background: #d8f0ff; }

.result-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.td-stt { text-align: center; font-weight: 700; color: var(--text-xs); font-size: 0.76rem; }
.td-cb  { text-align: center; }
.td-cb input[type="checkbox"] { cursor: pointer; accent-color: var(--tbl-header-bg); width: 13px; height: 13px; }
.td-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.td-text span { vertical-align: middle; }
.td-status { text-align: center; font-weight: 700; font-size: 0.74rem; white-space: nowrap; }
.status-ok   { color: #28a745; }
.status-fail { color: #dc3545; }

/* History row visual states */
.hist-row { transition: background 0.1s; }
.hist-row-active { background: #e8f4ff !important; }
.hist-row-active td { color: #1565c0; }
.hist-row-checked { background: #f0fdf4 !important; }
.hist-row-checked.hist-row-active { background: #e0f2fe !important; }

.hist-audio-icon {
    color: #9ca3af; font-size: 0.65rem;
    margin-right: 5px; vertical-align: middle;
    transition: color 0.2s;
}
.hist-audio-icon.playing {
    color: #2563eb;
    animation: iconPulse 1s ease-in-out infinite alternate;
}
@keyframes iconPulse {
    from { opacity: 0.5; transform: scale(0.9); }
    to   { opacity: 1;   transform: scale(1.1); }
}

.empty-state {
    text-align: center;
    padding: 28px 20px;
    color: var(--text-xs);
    font-size: 0.82rem;
}
.empty-state i { font-size: 1.4rem; display: block; margin-bottom: 8px; opacity: 0.3; }

.btn-clear {
    background: none; border: none;
    color: #dc3545; cursor: pointer;
    opacity: 0.5; transition: opacity 0.15s;
    padding: 2px 5px; border-radius: 4px;
    font-size: 0.8rem;
}
.btn-clear:hover { opacity: 1; background: rgba(220,53,69,0.08); }

/* ========== INLINE PLAYER ========== */
.inline-player {
    padding: 10px 12px;
    border-top: 1px solid var(--panel-border);
    background: #edf7ed;
    flex-shrink: 0;
}
.player-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.player-icon {
    width: 30px; height: 30px;
    background: var(--success-color);
    border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.75rem;
}
.player-title { font-weight: 700; font-size: 0.82rem; }
.player-sub   { font-size: 0.7rem; color: var(--text-xs); }

.btn-download {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: 7px;
    background: #f0f0f0;
    border: 1px solid var(--panel-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-s); text-decoration: none;
    transition: all 0.15s; flex-shrink: 0; font-size: 0.8rem;
}
.btn-download:hover { background: #4a90d9; color: white; border-color: #4a90d9; }

#result-audio { width: 100%; height: 32px; border-radius: 4px; }

.hidden { display: none !important; }

/* ========== BOTTOM TOOLBAR ========== */
.bottom-toolbar {
    background: #d4d4d4;
    border-top: 1px solid #b8b8b8;
    display: flex;
    flex-shrink: 0;
}
.btn-toolbar {
    padding: 10px 22px;
    border: none;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 7px;
    transition: filter 0.15s;
    border-right: 1px solid rgba(0,0,0,0.08);
    letter-spacing: 0.02em;
}
.btn-toolbar:hover { filter: brightness(0.93); }
.btn-taolai { background: linear-gradient(135deg, #e67e00, #ff9800); color: white; }
.btn-ghep   { background: linear-gradient(135deg, #ad1457, #e91e8c); color: white; position: relative; }
.btn-output { background: linear-gradient(135deg, #c45000, #e65100); color: white; }

/* Badge số items chọn để ghép */
.merge-badge {
    position: absolute; top: 4px; right: 4px;
    background: #fff; color: #ad1457;
    border-radius: 50%; width: 17px; height: 17px;
    font-size: 0.65rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    animation: badgePop 0.2s ease;
}
@keyframes badgePop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ========== STATUS BAR ========== */
.status-bar-bottom {
    background: #2c2c2c;
    color: #ccc;
    font-size: 0.72rem;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-top: 1px solid #111;
}
.btn-copy-key {
    background: #f9a825; border: none; border-radius: 4px;
    padding: 4px 12px; font-size: 0.72rem; font-weight: 700;
    color: #1a1a1a; cursor: pointer; transition: filter 0.15s;
    display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.btn-copy-key:hover { filter: brightness(0.92); }

/* ========== TOAST ========== */
#toast-container {
    position: fixed; bottom: 48px; right: 20px;
    z-index: 99999; display: flex; flex-direction: column; gap: 8px;
}
.toast-msg {
    padding: 11px 18px; border-radius: 7px;
    background: #2c2c2c; border: 1px solid #444;
    color: white; font-weight: 600;
    display: flex; align-items: center; gap: 9px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    font-size: 0.83rem;
    animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ========== CLONE VIEW ========== */
.clone-view-wrap { padding: 20px; overflow-y: auto; flex: 1; }
.card-glass {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 28px;
    box-shadow: var(--panel-shadow);
    max-width: 720px; margin: 0 auto;
}
.clone-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.clone-desc { color: var(--text-xs); font-size: 0.85rem; margin-bottom: 24px; line-height: 1.6; }

.upload-zone {
    border: 2px dashed #c0c0c0;
    border-radius: 8px; padding: 36px 24px;
    text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fafafa;
}
.upload-zone:hover { border-color: #4a90d9; background: #f0f5ff; }
.upload-icon { font-size: 2.8rem; color: #4a90d9; margin-bottom: 12px; }
.upload-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.upload-desc { color: var(--text-xs); font-size: 0.82rem; margin-bottom: 18px; }
.upload-select-btn { width: auto; padding: 9px 28px; font-size: 0.85rem; }

.file-info-box {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: rgba(74,144,217,0.08);
    border: 1px solid rgba(74,144,217,0.2);
    border-radius: 6px; margin-top: 12px;
    font-size: 0.82rem; color: #357abd;
}

.clone-actions { margin-top: 24px; display: flex; justify-content: flex-end; }

/* ========== ADMIN VIEW ========== */
.admin-view-wrap { padding: 20px; overflow-y: auto; flex: 1; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--panel-border); }
.admin-header h2 { font-size: 1.2rem; font-weight: 800; }
.admin-header p { color: var(--text-xs); font-size: 0.83rem; margin-top: 4px; }
.btn-quota { width: auto; padding: 9px 20px; font-size: 0.82rem; background: linear-gradient(90deg,#28a745,#218838); }

.api-textarea {
    width: 100%; height: 110px;
    border: 1px solid var(--input-border);
    border-radius: 6px; padding: 10px 12px;
    background: #fff; color: #2563eb;
    font-family: 'Courier New', monospace;
    font-size: 0.83rem; resize: vertical;
    transition: border-color 0.2s;
}
.api-textarea:focus { border-color: #4a90d9; outline: none; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }

.hint-text { font-size: 0.74rem; color: var(--text-xs); margin-top: 6px; }
.quota-title { font-weight: 700; margin-bottom: 18px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }

/* ========== DASHBOARD GRID (Quota Cards) ========== */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.api-card {
    background: #fafafa; border: 1px solid var(--panel-border);
    border-radius: 8px; padding: 16px;
    position: relative; overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex; flex-direction: column;
}
.api-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.api-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #4a90d9; }
.api-card.premium::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.api-card.error::before   { background: #dc3545; }

.api-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.api-key-text { font-family: monospace; font-size: 0.88rem; font-weight: 500; color: #333; word-break: break-all; }
.tier-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; background: #e8e8e8; color: #666; white-space: nowrap; margin-left: 8px; flex-shrink: 0; }
.tier-badge.premium { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.3); }
.tier-badge.error   { background: rgba(220,53,69,0.1); color: #dc3545; border: 1px solid rgba(220,53,69,0.25); }

.quota-stats { flex-grow: 1; margin-bottom: 12px; }
.quota-number { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; }
.quota-limit  { font-size: 0.78rem; color: var(--text-xs); }
.progress-bar-bg { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.progress-fill.safe    { background: linear-gradient(90deg, #28a745, #52c41a); }
.progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-fill.danger  { background: linear-gradient(90deg, #dc3545, #f87171); }

/* ========== FPT CUSTOM DROPDOWN ========== */
.fpt-custom-select {
    flex: 1;
    position: relative;
    user-select: none;
}

.fpt-cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 11px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 34px;
    gap: 8px;
}

.fpt-cs-trigger:hover { border-color: #4a90d9; }
.fpt-cs-trigger.open {
    border-color: #4a90d9;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.15);
}

.fpt-cs-placeholder {
    color: #dc3545;
    font-weight: 700;
    font-size: 0.82rem;
    font-style: italic;
    flex: 1;
}

.fpt-cs-selected {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.82rem;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fpt-cs-arrow {
    font-size: 0.7rem;
    color: #888;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.fpt-cs-trigger.open .fpt-cs-arrow { transform: rotate(180deg); }

/* Dropdown menu */
.fpt-cs-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #4a90d9;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    z-index: 9999;
    max-height: 280px;
    overflow-y: auto;
}
.fpt-cs-menu.open { display: block; }

/* Each option row */
.fpt-cs-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid #f0f0f0;
}
.fpt-cs-option:last-child { border-bottom: none; }
.fpt-cs-option:hover { background: #f0f5ff; }
.fpt-cs-option.selected { background: #e8f0ff; }

/* Avatar wrapper */
.fpt-avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    width: 36px; height: 36px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.fpt-avatar-wrap svg { display: block; }

/* Small avatar in trigger when selected */
.fpt-avatar-sm {
    width: 26px; height: 26px;
}

/* Voice label */
.fpt-opt-label {
    flex: 1;
    min-width: 0;
}
.fpt-opt-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fpt-opt-sub {
    font-size: 0.68rem;
    color: #888;
    line-height: 1.2;
}

/* Play button inside option */
.fpt-opt-play {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #f8f8f8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.62rem;
    color: #666;
    transition: all 0.15s;
    flex-shrink: 0;
}
.fpt-opt-play:hover { background: #28a745; border-color: #28a745; color: white; }
/* Ready = đã có cache, phát ngay */
.fpt-opt-play.ready {
    border-color: #28a745;
    color: #28a745;
    background: #f0fdf4;
}
.fpt-opt-play.ready:hover { background: #28a745; color: white; }
.fpt-opt-play.playing { background: #dc3545; border-color: #dc3545; color: white; animation: pulse-play 0.8s infinite alternate; }

/* Chấm xanh nhỏ báo hiệu preview sẵn sàng */
.fpt-cached-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #28a745;
    margin-left: 4px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(40,167,69,0.2);
}

@keyframes pulse-play {
    from { box-shadow: 0 0 0 0 rgba(220,53,69,0.4); }
    to   { box-shadow: 0 0 0 5px rgba(220,53,69,0); }
}

/* ========== VOICE PICKER TRIGGER BUTTON ========== */
.voice-picker-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 34px;
}
.voice-picker-btn:hover { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.1); }

.voice-picker-placeholder {
    color: #dc3545;
    font-weight: 700;
    font-size: 0.8rem;
    font-style: italic;
    display: flex; align-items: center; gap: 6px;
}
.voice-picker-selected {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; color: #1a1a1a;
    flex: 1;
}
.voice-picker-icon { font-size: 0.72rem; color: #aaa; flex-shrink: 0; }

/* ========== VOICE MODAL OVERLAY ========== */
.voice-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    animation: fadeOverlay 0.2s ease;
}
.voice-modal-overlay.open { display: flex; }
@keyframes fadeOverlay { from { opacity:0; } to { opacity:1; } }

/* Modal box */
.voice-modal {
    background: #fff;
    border-radius: 12px;
    width: 640px;
    max-width: 98vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: slideModal 0.22s ease;
    overflow: hidden;
}
@keyframes slideModal { from { opacity:0; transform:translateY(-18px) scale(0.97); } to { opacity:1; transform:none; } }

/* Header */
.voice-modal-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: none;
    flex-shrink: 0;
}

/* Tabs bar */
.vm-tabs {
    display: flex;
    padding: 8px 12px 0;
    border-bottom: 2px solid #e2e8f0;
    flex-shrink: 0;
    gap: 8px;
    background: #fafaf7;
}
.vm-tab-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 20px;
    border: none;
    background: #fffbea;           /* vàng nhạt mặc định */
    border: 1.5px solid #fde68a;   /* viền vàng nhẹ */
    font-weight: 700; font-size: 0.82rem;
    cursor: pointer; color: #92400e;
    border-radius: 8px 8px 0 0;
    font-family: inherit;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    white-space: nowrap;
    position: relative;
    margin-bottom: -2px;
}
.vm-tab-btn:not(.active):hover {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #78350f;
}
/* Active blue: Giọng mẫu */
.vm-tab-btn.active[data-tab="fpt"] {
    color: #fff;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    border-color: transparent;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 8px rgba(21,101,192,0.2);
}
/* Active red: Giọng cá nhân */
.vm-tab-btn.active[data-tab="personal"] {
    color: #fff;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    border-color: transparent;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 8px rgba(192,57,43,0.2);
}

/* Tab pane */
.vm-tab-pane { display: none; }
.vm-tab-pane.active { display: block; }

/* Smaller voice cards */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 7px;
}
.vm-voice-card {
    padding: 9px 7px 8px;
    gap: 5px;
}
.vm-card-name { font-size: 0.72rem; }
.vm-card-sub  { font-size: 0.6rem; color: #666; }
.vm-card-region {
    font-size: 0.55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    opacity: 0.85;
    margin-top: -1px;
}
.vm-card-avatar { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; }
.vm-card-play { width: 24px; height: 24px; font-size: 0.58rem; }

/* Region groups inside FPT pane */
.vm-region-group { margin-bottom: 14px; }
.vm-region-label {
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: #666;
    margin-bottom: 8px;
    padding: 4px 0;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Personal tab: clone list + inline form ── */
.vm-clone-list {
    margin-bottom: 10px;
}
.vm-no-clones {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 12px;
    background: #f0f7ff; border: 1px solid #bee3f8;
    border-radius: 8px; color: #2c5282;
    font-size: 0.78rem; font-weight: 600;
    margin-bottom: 6px;
}
.vm-no-clones i { color: #3182ce; font-size: 0.85rem; flex-shrink: 0; }

.vm-clone-form-wrap {
    border-top: 1.5px dashed #e2e8f0;
    padding-top: 14px;
    margin-top: 6px;
    display: flex; flex-direction: column; gap: 10px;
}
.vm-clone-form-title {
    font-size: 0.8rem; font-weight: 800; color: #444;
    display: flex; align-items: center; gap: 6px;
}
.vm-clone-form-title i { color: #8b5cf6; }

.vm-upload-zone {
    border: 2px dashed #c7d2fe;
    border-radius: 10px;
    padding: 18px 14px;
    background: #faf5ff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.vm-upload-zone:hover, .vm-upload-zone.dragover {
    border-color: #7c3aed; background: #ede9fe;
}
.vm-upload-zone .fa-cloud-arrow-up { font-size: 1.6rem; color: #7c3aed; }
.vm-upload-label { font-size: 0.8rem; font-weight: 700; color: #374151; }
.vm-upload-hint  { font-size: 0.68rem; color: #888; }
.vm-upload-btn {
    margin-top: 4px;
    padding: 6px 14px; border-radius: 6px;
    background: #7c3aed; color: white;
    border: none; cursor: pointer; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; gap: 5px;
    transition: filter 0.15s;
}
.vm-upload-btn:hover { filter: brightness(1.12); }

.vm-file-info {
    display: flex; align-items: center; gap: 7px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 7px; padding: 7px 10px;
    font-size: 0.75rem; color: #15803d; font-weight: 600;
}
.vm-file-info i { color: #16a34a; }

.vm-clone-name-input {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 0.82rem; font-family: inherit;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.vm-clone-name-input:focus { border-color: #7c3aed; }

.vm-clone-submit-btn {
    width: 100%; padding: 11px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white; border: none; border-radius: 9px;
    font-weight: 800; font-size: 0.84rem;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 10px rgba(124,58,237,0.3);
}
.vm-clone-submit-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.vm-clone-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.vm-clone-status {
    padding: 8px 12px; border-radius: 7px;
    font-size: 0.78rem; font-weight: 700;
    text-align: center;
}
.vm-clone-status.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.vm-clone-status.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* ── Mode tabs (Upload / Ghi âm) ── */
.vm-mode-tabs {
    display: flex; gap: 6px;
    background: #fefce8; border-radius: 10px; padding: 4px;
    border: 1.5px solid #fde68a;
}
.vm-mode-tab {
    flex: 1; padding: 7px 10px;
    border: 1.5px solid #fde68a;
    background: #fffbea;
    border-radius: 7px; cursor: pointer;
    font-size: 0.75rem; font-weight: 700; font-family: inherit;
    color: #92400e;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.18s;
}
.vm-mode-tab:not(.active):hover {
    background: #fef3c7; border-color: #fbbf24; color: #78350f;
}
/* Tải lên active → tím */
.vm-mode-tab.active[data-mode="upload"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: transparent; color: white;
    box-shadow: 0 2px 8px rgba(124,58,237,0.35);
}
/* Ghi âm active → đỏ */
.vm-mode-tab.active[data-mode="record"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: transparent; color: white;
    box-shadow: 0 2px 8px rgba(220,38,38,0.35);
}
.vm-mode-panel { display: none; }
.vm-mode-panel.active { display: block; }

/* ── Studio Mic UI ── */
.vm-studio {
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 10px 12px;
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 60%, #1e1b4b 100%);
    border-radius: 14px;
    gap: 10px;
}

/* Mic wrapper with pulsing rings */
.vm-mic-wrap {
    position: relative;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.vm-mic-rings span {
    position: absolute; border-radius: 50%;
    border: 2px solid rgba(167,139,250,0.3);
    animation: vmRingIdle 2.5s ease-out infinite;
    opacity: 0;
}
.vm-mic-rings span:nth-child(1) { width: 80px;  height: 80px;  animation-delay: 0s; }
.vm-mic-rings span:nth-child(2) { width: 98px;  height: 98px;  animation-delay: 0.6s; }
.vm-mic-rings span:nth-child(3) { width: 116px; height: 116px; animation-delay: 1.2s; }

@keyframes vmRingIdle {
    0%   { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0; }
}

/* Recording state: red rings, faster */
.vm-mic-wrap.recording .vm-mic-rings span {
    border-color: rgba(239,68,68,0.5);
    animation-name: vmRingRec;
    animation-duration: 1.1s;
}
@keyframes vmRingRec {
    0%   { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 0; }
}

.vm-mic-btn {
    width: 64px; height: 64px; border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(145deg, #7c3aed, #5b21b6);
    color: white; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(124,58,237,0.6), 0 0 0 3px rgba(167,139,250,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative; z-index: 1;
}
.vm-mic-btn:hover { transform: scale(1.06); }
.vm-mic-wrap.recording .vm-mic-btn {
    background: linear-gradient(145deg, #ef4444, #b91c1c);
    box-shadow: 0 4px 20px rgba(239,68,68,0.7), 0 0 0 3px rgba(252,165,165,0.4);
    animation: vmMicPulse 0.8s ease-in-out infinite alternate;
}
@keyframes vmMicPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

/* Timer */
.vm-rec-timer {
    font-size: 1.2rem; font-weight: 900; letter-spacing: 0.1em;
    color: #e0e7ff; font-family: 'Courier New', monospace;
}

/* Waveform canvas */
.vm-waveform {
    width: 100%; max-width: 340px; height: 48px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
}

/* Post-record controls */
.vm-rec-controls {
    display: flex; align-items: center; gap: 10px;
}
.vm-rec-play {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(167,139,250,0.2); border: 1.5px solid #a78bfa;
    color: #c4b5fd; cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.vm-rec-play:hover { background: rgba(167,139,250,0.4); }
.vm-rec-label { color: #c4b5fd; font-size: 0.72rem; font-weight: 600; }
.vm-rec-redo {
    padding: 5px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: #e0e7ff; cursor: pointer; font-size: 0.72rem; font-weight: 700;
    font-family: inherit; display: flex; align-items: center; gap: 5px;
    transition: background 0.15s;
}
.vm-rec-redo:hover { background: rgba(255,255,255,0.18); }

/* Hint text */
.vm-rec-hint {
    font-size: 0.7rem; color: #a5b4fc; font-weight: 500;
    text-align: center;
}

.voice-modal-title {
    font-size: 1rem; font-weight: 800; color: #1a1a1a;
    display: flex; align-items: center; gap: 8px;
}
.voice-modal-title i { color: #4a90d9; }
.voice-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%; border: none;
    background: #f0f0f0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; color: #666;
    transition: background 0.15s, color 0.15s;
}
.voice-modal-close:hover { background: #dc3545; color: white; }

/* Body scrollable */
.voice-modal-body {
    flex: 1; overflow-y: auto;
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 0;
}

/* Section inside modal */
.vm-section-title {
    font-size: 0.78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #555;
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}
.vm-section-title i { color: #4a90d9; }

.vm-badge {
    font-size: 0.65rem; font-weight: 700;
    background: #e8f5e9; color: #2e7d32;
    border: 1px solid #a5d6a7;
    padding: 2px 7px; border-radius: 10px;
}
.vm-badge.cloud {
    background: #ede7f6; color: #512da8;
    border-color: #b39ddb;
}

/* Voice card grid */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

/* Individual voice card */
.vm-voice-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 7px;
    padding: 14px 10px 12px;
    border-radius: 10px;
    border: 2px solid #e8e8e8;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.18s;
    text-align: center;
    user-select: none;
}
.vm-voice-card:hover { border-color: #4a90d9; background: #f0f5ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74,144,217,0.15); }
.vm-voice-card.selected {
    border-color: #28a745;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.15);
}

/* Checkmark overlay */
.vm-checkmark {
    position: absolute; top: 7px; right: 7px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #28a745;
    display: none;
    align-items: center; justify-content: center;
    color: white; font-size: 0.65rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(40,167,69,0.4);
}
.vm-voice-card.selected .vm-checkmark { display: flex; }

.vm-card-avatar { flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.vm-card-name { font-size: 0.8rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.vm-card-sub { font-size: 0.68rem; color: #888; line-height: 1.3; }

.vm-card-play {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 0.65rem;
    cursor: pointer; transition: all 0.15s;
    margin-top: 2px;
}
.vm-card-play:hover { background: #28a745; border-color: #28a745; color: white; }
.vm-card-play.ready { border-color: #28a745; color: #28a745; background: #f0fdf4; }
.vm-card-play.playing { background: #dc3545; border-color: #dc3545; color: white; animation: pulse-play 0.8s infinite alternate; }

/* Empty state (no cloned voices) */
.vm-empty-state {
    text-align: center;
    padding: 24px 16px;
    color: #888;
    border: 2px dashed #ddd;
    border-radius: 10px;
    font-size: 0.83rem;
}
.vm-empty-state i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: 0.35; color: #6366f1; }
.vm-empty-title { font-weight: 700; font-size: 0.88rem; color: #555; margin-bottom: 6px; }
.vm-empty-desc { font-size: 0.78rem; color: #999; margin-bottom: 14px; line-height: 1.5; }
.vm-btn-create {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 7px;
    border: none; background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white; font-weight: 700; font-size: 0.82rem;
    cursor: pointer; font-family: inherit;
    transition: filter 0.15s, transform 0.1s;
}
.vm-btn-create:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Cloned voice card (in cloud section) */
.vm-cloud-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid #e8e8e8;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.vm-cloud-card:hover { border-color: #6366f1; background: #f5f3ff; }
.vm-cloud-card.selected { border-color: #28a745; background: #f0fdf4; }
.vm-cloud-card.selected .vm-checkmark { display: flex; }
.vm-cloud-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 0.85rem;
}
.vm-cloud-avatar.cloned { background: linear-gradient(135deg, #ec4899, #be185d); }
.vm-cloud-info { flex: 1; min-width: 0; }
.vm-cloud-name { font-size: 0.83rem; font-weight: 700; color: #1a1a1a; }
.vm-cloud-sub { font-size: 0.7rem; color: #888; }
.vm-cloned-tag {
    font-size: 0.6rem; font-weight: 700;
    background: rgba(236,72,153,0.1); color: #be185d;
    border: 1px solid rgba(236,72,153,0.25);
    padding: 1px 6px; border-radius: 8px;
    white-space: nowrap;
}

/* Footer */
.voice-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid #eee;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    flex-shrink: 0;
    background: #fafafa;
}
.vm-btn-cancel {
    padding: 9px 20px; border-radius: 7px;
    border: 1px solid #ddd; background: #f5f5f5;
    color: #555; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s;
}
.vm-btn-cancel:hover { background: #ebebeb; }

.vm-btn-save {
    padding: 9px 24px; border-radius: 7px;
    border: none; background: linear-gradient(90deg, #28a745, #218838);
    color: white; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(40,167,69,0.3);
}
.vm-btn-save:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.vm-btn-save:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Output Modal ── */
.om-toolbar {
    display: flex; align-items: center; gap: 7px;
    flex-wrap: wrap;
    padding: 8px 0 10px;
    border-bottom: 1.5px solid #f0f0f0;
    margin-bottom: 10px;
}
.om-tool-btn {
    padding: 5px 12px; border-radius: 7px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #374151;
    font-size: 0.72rem; font-weight: 700; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    transition: all 0.15s;
}
.om-tool-btn:hover:not(:disabled) { background: #e2e8f0; }
.om-tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.om-tool-btn.danger {
    border-color: #fecaca; color: #b91c1c; background: #fef2f2;
}
.om-tool-btn.danger:hover:not(:disabled) { background: #fee2e2; }
.om-tool-btn.merge {
    border-color: #c7d2fe; color: #4338ca; background: #eef2ff;
}
.om-tool-btn.merge:hover:not(:disabled) { background: #e0e7ff; }

.om-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px;
    border: 1.5px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    margin-bottom: 4px;
}
.om-row:hover { background: #f8fafc; border-color: #e2e8f0; }
.om-cb { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; accent-color: #7c3aed; }

.om-row-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: #ede9fe; color: #7c3aed;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.om-row-icon.merged { background: #dbeafe; color: #1d4ed8; }

.om-row-info { flex: 1; min-width: 0; }
.om-row-name {
    font-size: 0.74rem; font-weight: 700; color: #1f2937;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.om-row-meta { font-size: 0.64rem; color: #9ca3af; }

.om-row-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.om-act {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #e5e7eb; font-size: 0.7rem; cursor: pointer;
    text-decoration: none; transition: all 0.13s;
}
.om-act.play  { background: #ecfdf5; color: #16a34a; border-color: #bbf7d0; }
.om-act.play:hover  { background: #d1fae5; }
.om-act.dl    { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.om-act.dl:hover    { background: #dbeafe; }
.om-act.del   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.om-act.del:hover   { background: #fee2e2; }

.om-loading, .om-empty {
    text-align: center; padding: 30px 0;
    color: #9ca3af; font-size: 0.82rem;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.om-loading i { font-size: 1.3rem; }
.om-empty i { font-size: 2rem; opacity: 0.4; }

.om-merge-result {
    display: flex; align-items: center; gap: 8px; flex: 1;
}
.om-dl-btn {
    width: 28px; height: 28px; border-radius: 6px;
    background: #eff6ff; color: #2563eb; border: 1.5px solid #bfdbfe;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; cursor: pointer; text-decoration: none;
    transition: background 0.13s;
}
.om-dl-btn:hover { background: #dbeafe; }

/* ── Cloned voice card: delete button ── */
.vm-cloud-card {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fafafa; cursor: pointer;
    transition: all 0.15s; margin-bottom: 7px;
}
.vm-cloud-card:hover { background: #f0f4ff; border-color: #a5b4fc; }
.vm-cloud-card.selected { background: #eff6ff; border-color: #3b82f6; }

.vm-cloud-del-btn {
    margin-left: auto; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 6px;
    background: #fef2f2; border: 1.5px solid #fecaca;
    color: #dc2626; cursor: pointer; font-size: 0.68rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s, background 0.13s;
}
.vm-cloud-card:hover .vm-cloud-del-btn { opacity: 1; }
.vm-cloud-del-btn:hover { background: #fee2e2; }