.audio-level-meter{margin-top:16px;padding:12px;background:#0000004d;border-radius:8px}.meter-label{font-size:.85rem;color:#ccc;margin-bottom:8px;font-weight:500}.meter-canvas{width:100%;height:40px;border:1px solid #444;border-radius:4px;background:#1a1a1a}.audio-recorder{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 16px #0000001a}.recorder-controls{display:flex;justify-content:center;margin-bottom:16px}.record-button{display:flex;align-items:center;gap:12px;padding:16px 32px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000026}.record-button.start{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.record-button.start:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.record-button.start:active{transform:translateY(0)}.record-button.stop{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.record-button.stop:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f5576c66}.record-button.stop:active{transform:translateY(0)}.button-icon{font-size:1.5rem}.button-text{font-size:1rem}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:8px;color:#f5576c;font-weight:600;font-size:.9rem}.pulse-dot{width:12px;height:12px;background:#f5576c;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}@media (max-width: 768px){.record-button{padding:14px 24px;font-size:1rem}.button-icon{font-size:1.3rem}}.sstv-canvas-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px;overflow:hidden}.sstv-canvas{max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-moz-crisp-edges;display:block}.canvas-placeholder{text-align:center;color:#999;padding:40px}.canvas-placeholder p{margin:8px 0;font-size:1rem}.placeholder-hint{font-size:.9rem!important;color:#bbb}.status-display{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;gap:20px}.status-section{display:flex;flex-direction:column;gap:12px}.status-section h3{font-size:1.1rem;font-weight:600;color:#333;margin:0;padding-bottom:8px;border-bottom:2px solid #f0f0f0}.status-item{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}.status-label{color:#666;font-weight:500}.status-value{color:#333;font-weight:600}.status-value.active{color:#f5576c}.status-value.inactive{color:#999}.progress-bar-container{width:100%;height:24px;background:#f0f0f0;border-radius:12px;overflow:hidden;margin:8px 0}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease;border-radius:12px}.status-section.error{background:#fff5f5;padding:16px;border-radius:8px;border-left:4px solid #f5576c}.status-section.error h3{color:#f5576c;border-bottom-color:#ffe0e0}.error-message{color:#c53030;font-size:.9rem;line-height:1.5}.status-section.info{background:#f0f7ff;padding:16px;border-radius:8px;border-left:4px solid #667eea}.status-section.info h3{color:#667eea;border-bottom-color:#e0e7ff}.instructions-list{margin:0;padding-left:20px;color:#555;font-size:.9rem;line-height:1.8}.instructions-list li{margin-bottom:4px}@media (max-width: 768px){.status-display{padding:20px}.status-section h3{font-size:1rem}}.debug-panel{position:fixed;bottom:0;left:0;right:0;background:#000000f2;color:#0f0;font-family:Courier New,monospace;font-size:.75rem;max-height:300px;overflow-y:auto;z-index:1000;border-top:2px solid #0f0;box-shadow:0 -4px 12px #00000080}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#00ff001a;border-bottom:1px solid #0f0;position:sticky;top:0;z-index:1}.debug-header h4{margin:0;color:#0f0;font-size:.9rem;font-weight:600}.debug-actions{display:flex;gap:8px}.debug-button{background:#0f0;color:#000;border:none;padding:4px 12px;cursor:pointer;font-size:.7rem;font-weight:600;border-radius:4px;transition:background .2s}.debug-button:hover{background:#0c0}.debug-button:active{background:#090}.debug-content{padding:8px 12px;max-height:250px;overflow-y:auto}.debug-empty{color:#666;font-style:italic;padding:20px;text-align:center}.debug-line{margin:2px 0;word-break:break-word;border-left:2px solid transparent;padding:2px 4px 2px 8px}.debug-line.error{color:#f44;border-left-color:#f44;background:#ff44441a}.debug-line.warn{color:#ff4;border-left-color:#ff4;background:#ffff441a}.debug-line:not(.error):not(.warn){color:#0f0}.debug-content::-webkit-scrollbar{width:8px}.debug-content::-webkit-scrollbar-track{background:#00ff001a}.debug-content::-webkit-scrollbar-thumb{background:#00ff004d;border-radius:4px}.debug-content::-webkit-scrollbar-thumb:hover{background:#00ff0080}@media (max-width: 768px){.debug-panel{max-height:250px;font-size:.7rem}.debug-content{max-height:200px}}.mode-selector{margin-bottom:16px;display:flex;align-items:center;gap:12px}.mode-label{font-weight:500;color:#e0e0e0;font-size:.95rem}.mode-select{flex:1;padding:8px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#e0e0e0;font-size:.95rem;cursor:pointer;transition:all .2s ease}.mode-select:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.mode-select:disabled{opacity:.5;cursor:not-allowed}.mode-select:focus{outline:none;border-color:#4a9eff;box-shadow:0 0 0 2px #4a9eff33}.app{display:flex;flex-direction:column;gap:24px}.app-header{text-align:center;color:#fff;padding:24px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 8px 32px #0000001a}.app-header h1{font-size:2.5rem;margin-bottom:8px;font-weight:700}.app-header p{font-size:1.1rem;opacity:.9}.app-content{display:grid;grid-template-columns:1fr 2fr;gap:24px}.controls-section{display:flex;flex-direction:column;gap:16px}.canvas-section{background:#fff;border-radius:12px;padding:16px;box-shadow:0 8px 32px #0003;min-height:400px;display:flex;align-items:center;justify-content:center}.debug-toggle-container{position:fixed;top:20px;right:20px;z-index:999}.debug-toggle-button{background:#000000b3;color:#0f0;border:2px solid #0f0;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.debug-toggle-button:hover{background:#0f03;box-shadow:0 0 12px #00ff0080}.debug-toggle-button:active{transform:scale(.95)}@media (max-width: 768px){.app-content{grid-template-columns:1fr}.app-header h1{font-size:2rem}.debug-toggle-container{top:10px;right:10px}.debug-toggle-button{padding:6px 12px;font-size:.75rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}#root{max-width:1200px;margin:0 auto}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}