*,:before,:after{box-sizing:border-box}body{margin:0}#root{min-height:100vh}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080b10;--surface:#0d1117;--border:#21262d;--text-primary:#f0f6fc;--text-secondary:#8b949e;--green:#4ade80;--red:#ef4444;--blue:#60a5fa;--yellow:#fbbf24}body{background:var(--bg);color:var(--text-primary);justify-content:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}.app{width:100%;max-width:480px;padding:1.5rem 1rem env(safe-area-inset-bottom,2rem);padding-top:max(1.5rem, env(safe-area-inset-top));flex-direction:column;gap:1.25rem;display:flex}.app-header{padding-bottom:.25rem}.header-row{align-items:center;gap:.6rem;margin-bottom:.2rem;display:flex}.live-dot{background:#2d3748;border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:background .3s}.live-dot.active{background:var(--green);animation:1.4s ease-in-out infinite dot-pulse}@keyframes dot-pulse{0%{box-shadow:0 0 #4ade8080}70%{box-shadow:0 0 0 8px #4ade8000}to{box-shadow:0 0 #4ade8000}}.app-title{color:var(--text-primary);letter-spacing:-.02em;font-size:1.55rem;font-weight:700}.share-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;margin-left:auto;padding:.3rem .8rem;font-size:.78rem;font-weight:500;transition:all .15s}.share-btn:hover,.share-btn:active{border-color:var(--text-secondary);color:var(--text-primary)}.app-subtitle{color:var(--text-secondary);padding-left:1.6rem;font-size:.78rem}.alert-card{border:2px solid #0000;border-radius:16px;flex-direction:column;gap:.4rem;width:100%;padding:1.1rem 1.25rem;animation:.18s ease-out alert-enter;display:flex}@keyframes alert-enter{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.alert-danger{border-color:var(--red);background:#1a0808;box-shadow:0 0 28px -8px #ef444466}.alert-social{border-color:var(--blue);background:#080f1a;box-shadow:0 0 28px -8px #60a5fa66}.alert-speech{border-color:var(--green);background:#081a0a;box-shadow:0 0 28px -8px #4ade804d}.alert-top{justify-content:space-between;align-items:center;display:flex}.alert-type-badge{letter-spacing:.15em;font-size:.65rem;font-weight:700}.alert-danger .alert-type-badge{color:var(--red)}.alert-social .alert-type-badge{color:var(--blue)}.alert-speech .alert-type-badge{color:var(--green)}.alert-label{color:var(--text-primary);font-size:1.65rem;font-weight:700;line-height:1.2}.alert-score{color:var(--text-secondary);font-size:.78rem}.alert-dismiss{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:.3rem .75rem;font-size:.75rem;transition:all .15s}.alert-dismiss:hover,.alert-dismiss:active{border-color:var(--text-secondary);color:var(--text-primary)}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.card-header{justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.09em;font-size:.82rem;font-weight:600}.status-pill{border-radius:999px;padding:.22rem .65rem;font-size:.72rem;font-weight:600}.status-loading{color:#9ca3af;background:#1f2937}.status-ready{color:var(--green);background:#0d2018}.status-running{color:var(--green);background:#0d2018;animation:1.6s ease-in-out infinite pill-blink}.status-error{color:var(--red);background:#2d1015}@keyframes pill-blink{0%,to{opacity:1}50%{opacity:.55}}.detections-list{flex-direction:column;gap:.55rem;list-style:none;display:flex}.detection-row{align-items:center;gap:.65rem;display:flex}.detection-label{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;width:145px;font-size:.85rem;overflow:hidden}.detection-bar-track{background:var(--border);border-radius:2px;flex:1;height:4px;overflow:hidden}.detection-bar-fill{background:linear-gradient(90deg, var(--green), #22d3ee);border-radius:2px;height:100%;transition:width .3s}.detection-pct{color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;width:2.4rem;font-size:.75rem}.primary-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:12px;width:100%;min-height:56px;padding:1rem;font-size:1rem;font-weight:600;transition:opacity .15s,transform .1s}.primary-btn:active:not(:disabled){transform:scale(.98)}.primary-btn:disabled{opacity:.38;cursor:not-allowed}.btn-start{background:linear-gradient(135deg, var(--green), #22d3ee);color:#080b10}.btn-stop{background:var(--red);color:#fff}.btn-outline{border:1px solid var(--border);color:var(--text-primary);background:0 0}.transcript-box{border:1px solid var(--border);background:#161b22;border-radius:10px;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.transcript-text{color:var(--text-primary);font-size:1.1rem;line-height:1.7}.clear-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;align-self:flex-end;padding:.35rem .75rem;font-size:.78rem;transition:all .15s}.clear-btn:hover,.clear-btn:active{background:var(--border);color:var(--text-primary)}.direction-passive{align-items:center;gap:.9rem;display:flex}.direction-arrow{flex-shrink:0;font-size:2.4rem;line-height:1}.direction-arrow-xl{text-align:center;font-size:4rem;line-height:1;display:block}.direction-text{flex-direction:column;gap:.15rem;display:flex}.direction-label{color:var(--text-primary);font-size:1.05rem;font-weight:600}.direction-sub{color:var(--text-secondary);font-size:.76rem}.direction-hint{color:var(--text-secondary);font-size:.84rem;line-height:1.55}.direction-result{flex-direction:column;align-items:center;gap:.45rem;padding:.5rem 0;display:flex}.direction-result-actions{align-items:center;gap:.75rem;width:100%;margin-top:.6rem;display:flex}.direction-rescan{flex:1}.scan-ui{flex-direction:column;gap:.75rem;display:flex}.scan-instruction{color:var(--text-secondary);font-size:.88rem}.scan-progress-row{align-items:center;gap:.65rem;display:flex}.scan-progress-row .detection-bar-track{flex:1}.direction-cancel{align-self:flex-start}.profile-selector{flex-wrap:wrap;gap:.5rem;display:flex}.profile-pill{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:999px;align-items:center;gap:.35rem;padding:.4rem .85rem;font-size:.82rem;font-weight:500;transition:all .15s;display:flex}.profile-pill:hover{border-color:var(--text-secondary);color:var(--text-primary)}.profile-pill.active{background:var(--green);border-color:var(--green);color:#080b10;font-weight:600}.profile-hint{color:var(--text-secondary);margin-top:-.5rem;padding-left:.25rem;font-size:.76rem}.onboarding-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#080b10d9;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.onboarding-modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:360px;padding:2.25rem 1.75rem 1.75rem;animation:.22s ease-out modal-enter;display:flex}@keyframes modal-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.onboarding-icon{font-size:3.5rem;line-height:1}.onboarding-title{color:var(--text-primary);text-align:center;letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.onboarding-body{color:var(--text-secondary);text-align:center;font-size:.92rem;line-height:1.65}.onboarding-dots{gap:.45rem;margin:.25rem 0;display:flex}.onboarding-dot{background:var(--border);border-radius:50%;width:7px;height:7px;transition:background .2s}.onboarding-dot.active{background:var(--green)}.onboarding-actions{flex-direction:column;gap:.6rem;width:100%;margin-top:.25rem;display:flex}.onboarding-next{min-height:52px}.onboarding-skip{color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:none;padding:.4rem;font-size:.88rem;transition:color .15s}.onboarding-skip:hover{color:var(--text-primary)}@media (width>=480px){.app{padding-left:1.5rem;padding-right:1.5rem}}