@import"https://fonts.googleapis.com/css2?family=Russo+One&display=swap";:root{--font-main: "Russo One", sans-serif;--bg-color: #ffffff;--card-bg: #f7f7f8;--text-color: #1a1a1a;--text-secondary: #5b5f66;--border-color: #d8dbe0;--input-bg: #f0f2f5;--primary-glow: #0056b3;--danger-glow: #c900c6;--positive-bg: rgba(0, 123, 255, .1);--improvement-bg: rgba(220, 53, 69, .1);--shadow-color: rgba(0, 0, 0, .08);--youtube-red: #FF0000}.dark-mode{--bg-color: #0d0f1f;--card-bg: #1d213a;--text-color: #e0e1e6;--text-secondary: #8a93b4;--border-color: rgba(0, 246, 255, .2);--input-bg: #131628;--primary-glow: #00f6ff;--danger-glow: #ff00f8;--positive-bg: rgba(0, 246, 255, .1);--improvement-bg: rgba(255, 0, 248, .1);--shadow-color: rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;transition:background-color .3s ease,color .3s ease;position:relative}body:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border-color) 1px,transparent 1px),linear-gradient(to right,var(--border-color) 1px,transparent 1px);background-size:40px 40px;animation:pan-grid 20s linear infinite;z-index:-1;opacity:.5;transition:opacity .3s ease}.dark-mode body:before{opacity:.5}.light-mode body:before{opacity:1}@keyframes pan-grid{0%{background-position:0 0}to{background-position:40px 40px}}.app-container{font-family:var(--font-main);width:100%;max-width:680px;margin:40px 20px;padding:2.5rem;background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;border:1px solid var(--border-color);box-shadow:0 0 40px var(--shadow-color),inset 0 0 20px var(--shadow-color);position:relative;transition:all .3s ease}.dark-mode .app-container{background:radial-gradient(circle at top center,rgba(29,33,58,.8),var(--card-bg))}header{text-align:center;padding-bottom:25px;margin-bottom:35px}main{display:flex;flex-direction:column;gap:40px}.app-logo{max-width:250px;margin-bottom:1rem;filter:drop-shadow(0 0 10px var(--primary-glow))}.light-mode .app-logo{filter:none}.dark-mode-toggle{position:absolute;top:25px;right:25px;background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--text-color);font-size:1.2rem;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.dark-mode-toggle:hover{transform:scale(1.1) rotate(15deg);box-shadow:0 0 15px var(--primary-glow)}.recorder-container h2,.analysis-container h2{margin-top:0;font-size:1.8rem;font-weight:700;color:var(--text-color);margin-bottom:25px;text-shadow:0 0 5px var(--primary-glow)}.light-mode .recorder-container h2,.light-mode .analysis-container h2{text-shadow:none}.transcript-box{border:1px solid var(--border-color);padding:15px 20px;min-height:120px;border-radius:8px;background-color:var(--input-bg);line-height:1.6;color:var(--text-secondary);font-size:1rem}.record-controls{text-align:center;margin-bottom:15px}.record-button{padding:14px 28px;font-size:1.1rem;font-family:var(--font-main);cursor:pointer;color:#fff;border:1px solid;border-radius:8px;transition:all .2s ease;min-width:220px;text-transform:uppercase;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}.record-button:hover{transform:scale(1.05);box-shadow:0 0 20px}.start-button{background:var(--primary-glow);border-color:var(--primary-glow);color:var(--bg-color);text-shadow:0 0 10px var(--primary-glow)}.start-button:hover{box-shadow:0 0 20px var(--primary-glow)}.stop-button{background:var(--danger-glow);border-color:var(--danger-glow);color:var(--bg-color);text-shadow:0 0 10px var(--danger-glow)}.stop-button:hover{box-shadow:0 0 20px var(--danger-glow)}.stop-button.recording{animation:pulse-glow 1.5s infinite}.light-mode .start-button,.light-mode .stop-button{text-shadow:none;color:#fff}.modes-container{display:flex;justify-content:center;gap:10px;margin-bottom:25px}.mode-button{padding:8px 16px;font-size:.9rem;font-family:var(--font-main);background-color:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:20px;cursor:pointer;transition:all .2s ease}.mode-button:hover{border-color:var(--primary-glow);color:var(--primary-glow)}.mode-button.active{background:var(--primary-glow);color:var(--bg-color);border-color:var(--primary-glow)}.mode-button:disabled{opacity:.5;cursor:not-allowed}.light-mode .mode-button.active{color:#fff}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:25px}.metric-card,.feedback-card,.youtube-recommendation,.badges-container{background-color:var(--input-bg);padding:20px;border-radius:12px;border:1px solid var(--border-color);transition:all .3s ease}.metric-card:hover{transform:translateY(-4px);border-color:var(--primary-glow);box-shadow:0 0 15px var(--primary-glow)}.metric-card h4,.feedback-card h4,.youtube-recommendation h4,.badges-container h4{margin:0 0 10px;font-weight:500;font-size:1rem;color:var(--text-secondary);text-transform:uppercase}.metric-value{font-size:2.5rem;color:var(--text-color);margin:0;text-shadow:0 0 8px var(--primary-glow)}.light-mode .metric-value{text-shadow:none}.feedback-card{line-height:1.6}.positive-feedback{border-left:4px solid var(--primary-glow);background:var(--positive-bg)}.improvement-feedback{border-left:4px solid var(--danger-glow);background:var(--improvement-bg)}.loading-message,.placeholder-message,.error-message{text-align:center;color:var(--text-secondary);padding:40px;background-color:var(--input-bg);border-radius:12px}.spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top-color:var(--primary-glow);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-glow{0%{box-shadow:0 0 5px var(--danger-glow)}50%{box-shadow:0 0 20px var(--danger-glow)}to{box-shadow:0 0 5px var(--danger-glow)}}.youtube-recommendation,.badges-container{margin-top:25px}.youtube-link-button{display:inline-block;padding:10px 20px;background-color:var(--youtube-red);color:#fff;text-decoration:none;border-radius:6px;font-weight:700;font-family:var(--font-main);transition:all .2s ease}.youtube-link-button:hover{transform:scale(1.05);box-shadow:0 0 15px var(--youtube-red)}.badges-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:15px}.badge{display:flex;flex-direction:column;align-items:center;gap:5px;background-color:var(--card-bg);padding:10px 15px;border-radius:8px;border:1px solid var(--border-color);min-width:120px;text-align:center}.badge-emoji{font-size:2.5rem}.badge-name{font-size:1rem;font-weight:500}@media (max-width: 768px){.results-grid{grid-template-columns:1fr}}@media (min-width: 800px){.app-container{max-width:1200px}main{flex-direction:row;align-items:flex-start}.recorder-container,.analysis-container{flex:1}}