/* AI Voice Languages Practician - Styles */
:root { --vl-primary: #7c3aed; --vl-secondary: #a855f7; --vl-accent: #c084fc; --vl-glow: rgba(124,58,237,0.3); --vl-bg: #0a0a0f; --vl-surface: #111118; --vl-card: #1a1a24; --vl-border: rgba(124,58,237,0.15); --vl-text: #e4e4e7; --vl-muted: #71717a; }
.vl-container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: 'Inter','Segoe UI',sans-serif; color: var(--vl-text); background: var(--vl-bg); min-height: 100vh; }
.vl-header { text-align: center; margin-bottom: 24px; }
.vl-header h1 { font-size: 28px; font-weight: 900; background: linear-gradient(135deg, var(--vl-primary), var(--vl-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 4px; }
.vl-header p { color: var(--vl-muted); font-size: 13px; margin: 0; }
.vl-stats-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.vl-stat { background: var(--vl-card); border: 1px solid var(--vl-border); border-radius: 12px; padding: 12px 20px; text-align: center; min-width: 100px; }
.vl-stat .val { font-size: 22px; font-weight: 900; color: var(--vl-primary); }
.vl-stat .lab { font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--vl-muted); letter-spacing: 0.5px; }
.vl-lang-selector { background: var(--vl-card); border-radius: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--vl-border); }
.vl-lang-selector h3 { font-size: 14px; font-weight: 800; color: var(--vl-primary); margin: 0 0 10px; }
.vl-lang-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.vl-lang-btn { padding: 7px 12px; border: 1px solid transparent; border-radius: 8px; background: rgba(124,58,237,0.05); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--vl-muted); transition: all 0.2s; display: flex; align-items: center; gap: 4px; }
.vl-lang-btn:hover { background: rgba(124,58,237,0.1); color: var(--vl-text); }
.vl-lang-btn.active { background: rgba(124,58,237,0.15); border-color: var(--vl-primary); color: var(--vl-primary); }
.vl-voice-zone { background: linear-gradient(135deg, var(--vl-card), rgba(124,58,237,0.05)); border-radius: 16px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--vl-border); }
.vl-voice-zone h3 { font-size: 15px; font-weight: 800; color: var(--vl-primary); margin: 0 0 12px; }
.vl-modes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.vl-mode-btn { padding: 7px 14px; border: 1px solid rgba(124,58,237,0.15); border-radius: 20px; background: transparent; color: var(--vl-muted); font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.vl-mode-btn:hover { border-color: var(--vl-primary); color: var(--vl-text); }
.vl-mode-btn.active { background: rgba(124,58,237,0.12); border-color: var(--vl-primary); color: var(--vl-primary); }
.vl-chat { background: rgba(0,0,0,0.25); border-radius: 12px; padding: 14px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; border: 1px solid var(--vl-border); }
.vl-msg { margin-bottom: 6px; padding: 10px 14px; border-radius: 10px; max-width: 80%; font-size: 12px; line-height: 1.5; }
.vl-msg.ai { background: rgba(124,58,237,0.08); color: var(--vl-accent); margin-right: auto; }
.vl-msg.user { background: rgba(34,197,94,0.08); color: #86efac; margin-left: auto; text-align: right; }
.vl-msg.system { background: rgba(251,191,36,0.08); color: #fbbf24; text-align: center; max-width: 100%; font-size: 10px; font-weight: 600; }
.vl-input-row { display: flex; gap: 6px; align-items: center; }
.vl-input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--vl-border); background: var(--vl-surface); color: var(--vl-text); font-size: 13px; outline: none; }
.vl-input:focus { border-color: var(--vl-primary); }
.vl-btn { padding: 10px 18px; border-radius: 10px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.vl-btn-primary { background: var(--vl-primary); color: white; }
.vl-btn-primary:hover { background: var(--vl-secondary); }
.vl-btn-voice { background: linear-gradient(135deg, var(--vl-primary), #ec4899); color: white; min-width: 44px; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 50%; width: 44px; height: 44px; padding: 0; }
.vl-btn-voice.recording { animation: vl-pulse 1s infinite; background: linear-gradient(135deg, #ef4444, #ec4899); }
@keyframes vl-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } }
.vl-btn-skip { background: transparent; border: 1px solid rgba(124,58,237,0.2); color: var(--vl-muted); padding: 10px 14px; }
.vl-btn-skip:hover { border-color: var(--vl-primary); color: var(--vl-text); }
.vl-btn-speak { background: rgba(124,58,237,0.1); color: var(--vl-primary); padding: 10px 14px; border: 1px solid var(--vl-border); }
.vl-btn-speak:hover { background: rgba(124,58,237,0.2); }
.vl-section { background: var(--vl-card); border-radius: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--vl-border); }
.vl-section h3 { font-size: 15px; font-weight: 800; color: var(--vl-primary); margin: 0 0 4px; }
.vl-section .sub { font-size: 11px; color: var(--vl-muted); margin: 0 0 12px; }
.vl-words-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vl-word-card { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 8px 10px; min-width: 150px; max-width: 200px; border-left: 2px solid rgba(124,58,237,0.3); cursor: pointer; transition: all 0.2s; }
.vl-word-card:hover { border-left-color: var(--vl-primary); background: rgba(124,58,237,0.05); }
.vl-word-card .cat { font-size: 7px; font-weight: 700; color: var(--vl-muted); text-transform: uppercase; }
.vl-word-card .en { font-size: 12px; font-weight: 800; }
.vl-word-card .tr { font-size: 11px; color: var(--vl-accent); }
.vl-word-card .ex { font-size: 8px; color: var(--vl-muted); font-style: italic; }
.vl-word-card .speak-icon { font-size: 14px; cursor: pointer; float: right; opacity: 0.6; }
.vl-word-card .speak-icon:hover { opacity: 1; }
.vl-sent-card { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px 12px; min-width: 240px; max-width: 360px; border-left: 2px solid rgba(124,58,237,0.25); cursor: pointer; transition: all 0.2s; }
.vl-sent-card:hover { border-left-color: var(--vl-primary); }
.vl-sent-card .ctx { font-size: 7px; font-weight: 700; color: var(--vl-muted); text-transform: uppercase; }
.vl-sent-card .en { font-size: 11px; font-weight: 700; }
.vl-sent-card .tr { font-size: 10px; color: var(--vl-accent); }
.vl-cat-filter { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 10px; }
.vl-cat-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--vl-border); background: transparent; color: var(--vl-muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.vl-cat-btn.active { background: rgba(124,58,237,0.1); border-color: var(--vl-primary); color: var(--vl-primary); }
.vl-show-more { display: block; width: 100%; text-align: center; padding: 10px; background: transparent; border: 1px dashed var(--vl-border); border-radius: 8px; color: var(--vl-primary); font-size: 11px; font-weight: 700; cursor: pointer; margin-top: 8px; }
.vl-show-more:hover { background: rgba(124,58,237,0.05); }
.vl-voice-indicator { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; margin: 8px 0; }
.vl-voice-bar { width: 3px; border-radius: 2px; background: var(--vl-primary); animation: vl-bar 0.6s ease-in-out infinite alternate; }
.vl-voice-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.vl-voice-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.vl-voice-bar:nth-child(3) { height: 24px; animation-delay: 0.2s; }
.vl-voice-bar:nth-child(4) { height: 16px; animation-delay: 0.3s; }
.vl-voice-bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }
@keyframes vl-bar { to { height: 4px; } }
@media (max-width: 768px) { .vl-container { padding: 12px; } .vl-header h1 { font-size: 22px; } .vl-word-card { min-width: 130px; } .vl-sent-card { min-width: 200px; } }