.app{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1e1e1e}:root{--app-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}html,body,button,input,select,textarea{font-family:var(--app-font)}.center-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.camera-overlay{position:fixed;top:12px;left:auto;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}.camera-frame{background:#00000040;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #00000059;pointer-events:auto;transition:top .16s ease,left .16s ease,transform .12s ease,box-shadow .16s ease;touch-action:none}.camera-video{width:100%;height:100%;object-fit:cover;display:block}.camera-frame.dragging{cursor:grabbing;transform:scale(.98);box-shadow:0 10px 28px #00000073;transition:none}.camera-overlay.dragging{transition:none}html,body{height:100%;overflow:hidden}.voice-recorder{width:80px;height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:static;z-index:1;pointer-events:auto;margin-top:0;margin-bottom:16px}.circle{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#1e1e1e;position:relative;z-index:2}.mic-icon{font-size:24px}.wave-start,.wave-record{display:flex;align-items:center;justify-content:space-between;width:60%;position:relative;z-index:3}.wave-record{align-items:flex-end;height:40px}.dot{background:#fff;border-radius:50%;position:relative;z-index:3}.dot--start{width:8px;height:8px;animation:startAnim .8s ease-in-out infinite alternate}@keyframes startAnim{0%{transform:translate(0) scale(0)}50%{transform:translate(var(--tx)) scale(1)}to{transform:translate(calc(var(--tx) * 2)) scale(.8)}}.dot--record{width:6px;height:24px;transform-origin:bottom center;transition:transform .1s ease-out;border-radius:2px;transform:scaleY(var(--scale, 1))}.processing{display:flex;align-items:center;justify-content:center;width:60%;height:40px;position:relative;z-index:3}.processing .spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.transcript{max-width:90vw;max-height:30vh;overflow-y:auto;margin:12px auto 0;padding:10px 12px;background:#ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:12px;font-size:14px;line-height:1.45;color:#fff;white-space:pre-wrap}.log-panel{width:min(640px,90vw);height:42vh;overflow-y:auto;overflow-x:hidden;margin:0 auto;padding:10px 12px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;font-size:14px;line-height:1.45;color:#000;white-space:normal;box-shadow:0 8px 24px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;box-sizing:border-box}.log-entry{background:#f7f7f8;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:8px 10px;margin-bottom:8px;display:flex;align-items:baseline;gap:8px;word-break:break-word}.log-time{font-size:12px;color:#00000080;min-width:48px}.log-message{color:#000;font-weight:600}.log-emoji{min-width:18px}.log-details{color:#000000b3;overflow-wrap:anywhere}.log-info{border-left:3px solid #6d28d9}.log-success{border-left:3px solid #16a34a}.log-warning{border-left:3px solid #f59e0b}.log-error{border-left:3px solid #dc2626}.log-ws{border-left:3px solid #2563eb}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:400px;pointer-events:none}.toast{background:#1e1e1ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:0;box-shadow:0 8px 32px #0000004d;transform:translate(100%);animation:slideIn .22s ease-out forwards;pointer-events:auto;position:relative;overflow:hidden;min-width:300px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif}.toast.toast-success{border-left:4px solid #4ade80}.toast.toast-warning{border-left:4px solid #fbbf24}.toast.toast-error{border-left:4px solid #f87171}.toast.toast-ws-event{border-left:4px solid #60a5fa}.toast.toast-info{border-left:4px solid #a78bfa}.toast-content{padding:16px}.toast-header{display:flex;align-items:flex-start;gap:12px}.toast-icon{font-size:16px;flex-shrink:0;margin-top:2px}.toast-message{flex:1;font-size:14px;font-weight:500;color:#fff;line-height:1.4}.toast-details{font-size:12px;color:#fffc;line-height:1.3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;background:#0003;padding:8px 12px;border-radius:6px;margin-top:8px;overflow-x:auto}.toast-close{background:none;border:none;color:#fff9;font-size:20px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background:#ffffff1a;color:#fff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#ffffff4d,#fff9,#ffffff4d);animation:progress linear forwards}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast.closing{animation:slideOut .22s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progress{0%{width:100%}to{width:0%}}.settings-wrapper{margin-top:16px;display:flex;flex-direction:column;align-items:center}.settings-toggle{background:#2b2b2b;color:#ddd;border:1px solid #444;border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px}.settings-toggle:hover{background:#3a3a3a}.settings-panel{box-sizing:border-box;margin-top:10px;background:#1e1e1e;border:1px solid #333;border-radius:10px;padding:16px;width:min(640px,90vw);color:#eee;box-shadow:0 4px 12px #0006}.settings-title{font-size:16px;margin-bottom:12px;text-align:center;color:#fff}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.settings-field{display:flex;flex-direction:column}.settings-field label{font-size:13px;margin-bottom:4px;color:#aaa}.settings-field input,.settings-field select,.settings-field textarea{padding:6px;border-radius:4px;border:1px solid #444;background:#2b2b2b;color:#fff;font-size:14px;resize:none}.settings-field input:focus,.settings-field select:focus,.settings-field textarea:focus{border-color:#4a90e2;outline:none}.apply-btn{margin-top:16px;width:100%;background:#4a90e2;border:none;border-radius:6px;color:#fff;padding:8px;cursor:pointer;font-size:14px}.apply-btn:hover{background:#357abf}@media (max-width: 480px){.camera-overlay{top:8px;left:8px}.camera-frame{border-radius:10px}.settings-grid{grid-template-columns:1fr}.log-panel{width:calc(100vw - 20px);height:50vh}.toast-container{top:10px;right:10px;left:10px;max-width:none}.toast{min-width:auto}.toast-message{font-size:13px}.toast-details{font-size:11px}}