:root{--primary: #58CC02;--primary-dark: #46A302;--secondary: #1CB0F6;--accent: #FF9600;--success: #58CC02;--warning: #FF9600;--error: #FF4B4B;--bg: #FFFFFF;--bg-secondary: #F7F7F7;--surface: #FFFFFF;--surface-light: #E5E5E5;--text-primary: #3C3C3C;--text-secondary: #777777;--text-muted: #AFAFAF;--gradient-primary: linear-gradient(135deg, #58CC02, #7BD839);--gradient-accent: linear-gradient(135deg, #1CB0F6, #49C0F8);--gradient-success: linear-gradient(135deg, #58CC02, #7BD839);--gradient-error: linear-gradient(135deg, #FF4B4B, #FF6B6B);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-secondary);color:var(--text-primary);min-height:100vh;line-height:1.5}#app{display:flex;flex-direction:column;min-height:100vh;max-width:800px;margin:0 auto;padding:0 16px}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.logo{font-size:1.25rem;font-weight:700}.gradient-text{color:var(--primary)}.stats{display:flex;gap:8px}.stat{background:var(--surface);padding:8px 16px;border-radius:12px;font-size:.875rem;font-weight:700;color:var(--primary);border:2px solid var(--surface-light);border-bottom-width:4px;display:flex;align-items:center;gap:8px}.main{flex:1;overflow-y:auto;padding-bottom:120px}.section{margin-bottom:12px}.section-title{font-size:.875rem;font-weight:500;color:var(--text-secondary)}.collapsible{background:var(--surface);border:2px solid var(--surface-light);border-bottom-width:4px;border-radius:16px;overflow:hidden;transition:transform .1s ease,border-bottom-width .1s ease}.collapsible:active{transform:translateY(2px);border-bottom-width:2px}.section-header{width:100%;display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;text-align:left;transition:background .2s ease}.section-header:hover{background:#ffffff08}.section-selected{flex:1;text-align:right;font-size:.9375rem;font-weight:700;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-selected.has-selection{color:var(--primary)}.section-chevron{width:20px;height:20px;color:var(--text-muted);transition:transform .3s ease;flex-shrink:0}.collapsible.expanded .section-chevron{transform:rotate(180deg)}.section-content{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.collapsible.expanded .section-content{max-height:300px;padding:0 16px 16px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:10px 20px;background:var(--surface);border:2px solid var(--surface-light);border-bottom-width:4px;border-radius:16px;font-size:.9375rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .1s ease}.chip:hover{background:var(--bg-secondary);transform:translateY(-1px)}.chip:active{transform:translateY(2px);border-bottom-width:2px}.chip.selected{background:var(--secondary);border-color:#1899d6;color:#fff}.phrase-card{background:var(--surface);border:2px solid var(--surface-light);border-bottom-width:4px;border-radius:16px;padding:24px;margin-top:16px}.phrase-text{font-size:1rem;color:var(--text-primary);margin-bottom:8px}.phrase-response{font-size:1.125rem;font-weight:700;color:var(--primary)}.phrase-details{background:var(--surface);border:1px solid rgba(51,65,85,.5);border-radius:12px;padding:12px;margin-top:16px}.phrase-label{font-size:.625rem;font-weight:700;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:4px}.phrase-translation{font-style:italic;color:var(--text-secondary)}.phrase-divider{height:1px;background:var(--surface-light);margin:12px 0}.phrase-cultural{display:flex;gap:8px;align-items:flex-start}.phrase-cultural-icon{color:var(--primary);font-size:1rem}.phrase-cultural-text{font-size:.875rem;color:var(--text-secondary);line-height:1.4}.prosody-container{background:var(--surface);border:2px solid var(--surface-light);border-bottom-width:4px;border-radius:16px;margin-top:16px;overflow:hidden}.prosody-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--surface-light)}.prosody-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.prosody-legend{display:flex;gap:16px}.prosody-legend span{font-size:.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:6px}.prosody-legend span:before{content:"";display:block;width:12px;height:3px;border-radius:2px}.legend-ghost:before{background:#6366f199}.legend-user:before{background:#10b981}#prosody-canvas{display:block;width:100%;height:120px}.prosody-hint{padding:8px 16px;font-size:.75rem;color:var(--text-muted);text-align:center;border-top:1px solid var(--surface-light)}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px}.spinner{width:32px;height:32px;border:3px solid var(--surface-light);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(transparent,var(--bg) 20%)}.status{font-size:.875rem;color:var(--text-muted);margin-bottom:16px}.mic-button{width:90px;height:90px;border-radius:50%;border:none;background:var(--primary);border-bottom:6px solid var(--primary-dark);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #58cc0266;transition:all .1s ease}.mic-button:active{transform:translateY(4px);border-bottom-width:0;box-shadow:none}.mic-button.active{background:var(--error);border-bottom-color:#d32f2f;box-shadow:0 4px 12px #ff4b4b66;animation:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.mic-icon,.stop-icon{width:44px;height:44px}.hint{font-size:.75rem;color:var(--text-muted);margin-top:12px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:var(--surface);border-radius:20px;padding:24px;text-align:center;max-width:320px;border:2px solid var(--surface-light);border-bottom-width:4px}.modal-content h2{margin-bottom:16px}.btn{background:var(--primary);border:none;border-bottom:4px solid var(--primary-dark);color:#fff;padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:16px;transition:all .1s ease;text-transform:uppercase;letter-spacing:.8px}.btn:active{transform:translateY(2px);border-bottom-width:2px}.hidden{display:none!important}@media(max-width:480px){.chip{padding:6px 12px;font-size:.8125rem}}