:root{--primary: #6366f1;--primary-glow: rgba(99, 102, 241, .5);--bg-dark: #0f172a;--card-bg: rgba(255, 255, 255, .05);--border: rgba(255, 255, 255, .1);--text-main: #f8fafc;--text-dim: #94a3b8;--gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%)}*{margin:0;padding:0;box-sizing:border-box}.app-container{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-x:hidden;width:100%}.stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(circle at center,#1e293b 0%,#0f172a 100%)}header{margin-bottom:3rem;text-align:center;animation:fadeInDown .8s ease-out}.logo-wrapper{width:80px;height:80px;background:var(--gradient);border-radius:24px;display:flex;justify-content:center;align-items:center;margin:0 auto 1.5rem;box-shadow:0 10px 25px -5px var(--primary-glow)}.logo-icon{font-size:2.5rem;color:#fff}h1{font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.gradient-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}header p{color:var(--text-dim);font-size:1.1rem}.glass-card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:32px;padding:2.5rem;box-shadow:0 25px 50px -12px #00000080;animation:fadeInUp .8s ease-out;transition:all .5s cubic-bezier(.4,0,.2,1);width:100%;max-width:600px}.glass-card.full-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:none;z-index:1000;border-radius:0;display:flex;flex-direction:column;padding:2rem;background:var(--bg-dark);margin:0}.transcript-wrapper{position:relative;margin-bottom:2rem;flex:1;display:flex;flex-direction:column}.status-indicator{position:absolute;top:-15px;left:20px;background:#1e293b;padding:4px 12px;border-radius:20px;font-size:.75rem;display:flex;align-items:center;gap:6px;border:1px solid var(--border);transition:all .3s ease;z-index:10}.dot{width:8px;height:8px;background:#4ade80;border-radius:50%}.status-indicator.recording{border-color:#ef4444}.status-indicator.recording .dot{background:#ef4444;animation:pulse-dot 1s infinite}.transcript-area{width:100%;min-height:200px;max-height:350px;background:rgba(0,0,0,.2);border-radius:20px;padding:1.5rem;text-align:left;font-size:1.2rem;line-height:1.6;color:var(--text-main);overflow-y:auto;border:1px solid transparent;transition:all .5s ease;height:100%;resize:none;border:none;outline:none;font-family:inherit}.btn:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.glass-card.full-screen .transcript-area{flex:1;max-height:none;font-size:1.8rem;border:none;background:transparent}.controls{display:flex;justify-content:center;align-items:center;gap:1.5rem}.glass-card.full-screen .controls{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:rgba(15,23,42,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1rem 2rem;border-radius:24px;border:1px solid var(--border);gap:2rem}.btn{border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none}.primary-btn{width:80px;height:80px;background:var(--gradient);border-radius:50%;color:#fff;font-size:2rem;box-shadow:0 10px 20px -5px var(--primary-glow)}.primary-btn:hover{transform:scale(1.1)}.primary-btn.active{background:#ef4444;animation:pulse-ring 1.5s infinite}.secondary-btn{width:50px;height:50px;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;color:var(--text-dim);font-size:1.2rem}.secondary-btn:hover{background:var(--border);color:var(--text-main);transform:translateY(-2px)}footer{margin-top:3rem;color:var(--text-dim);font-size:.9rem;text-align:center;animation:fadeIn 1.2s ease-in}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-dot{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes pulse-ring{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 20px #ef444400}to{box-shadow:0 0 #ef444400}}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%) translateY(100px);background:#10b981;color:#fff;padding:12px 24px;border-radius:12px;font-weight:600;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);z-index:2000}.toast.show{transform:translate(-50%) translateY(0)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:3000;animation:fadeIn .3s ease}.modal-content{max-width:400px;width:90%;text-align:center;animation:scaleIn .3s cubic-bezier(.175,.885,.32,1.275)}.modal-content h3{font-family:Outfit,sans-serif;font-size:1.5rem;margin-bottom:1rem}.modal-content p{color:var(--text-dim);margin-bottom:2rem;line-height:1.5}.modal-actions{display:flex;gap:1rem;justify-content:center}.modal-btn{padding:10px 24px;border-radius:12px;font-weight:600;font-size:1rem}.cancel-btn{background:var(--card-bg);border:1px solid var(--border);color:var(--text-main)}.cancel-btn:hover{background:var(--border)}.confirm-btn{background:#ef4444;color:#fff}.confirm-btn:hover{background:#dc2626;transform:translateY(-2px)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}