.tf-shell{--tone:#db2777}.tf-upload{cursor:pointer;border-style:dashed;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 20px;transition:border-color .14s,background .14s;display:grid}.tf-upload:hover,.tf-upload.dragover{border-color:var(--primary);background:var(--primary-soft)}.tf-upload-icon,.tf-file-icon{border-radius:var(--radius-sm);width:42px;height:42px;color:var(--primary);background:var(--primary-soft);place-items:center;font-size:1.25rem;font-weight:800;display:grid}.tf-upload-icon svg{width:23px;height:23px}.tf-upload strong{font-size:.98rem;display:block}.tf-upload p{color:var(--text-muted);margin-top:2px;font-size:.82rem}.tf-shell.is-loaded .tf-upload{display:none}.tf-work{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);display:grid;overflow:hidden}.tf-analysis-pane,.tf-result-pane{min-width:0;padding:22px}.tf-result-pane{border-left:1px solid var(--border);background:color-mix(in srgb, var(--surface) 97%, var(--primary-soft))}.tf-file-row{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding-bottom:18px;display:flex}.tf-file-row strong{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.tf-file-row .grow span{color:var(--text-muted);margin-top:2px;font-size:.78rem;display:block}.tf-source-label,.tf-amp-name{color:var(--primary);white-space:nowrap;font-size:.76rem;font-weight:700}.tf-section-head{justify-content:space-between;align-items:center;gap:12px;margin:20px 0 10px;display:flex}.tf-section-head>div,.tf-result-title{align-items:center;gap:9px;display:flex}.tf-section-head h2{font-size:1rem}.tf-section-head>span{color:var(--text-muted);font-size:.8rem}.tf-step{background:var(--text);width:23px;height:23px;color:var(--surface);border-radius:50%;flex:none;place-items:center;font-size:.75rem;font-weight:800;display:inline-grid}.tf-wave-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);height:184px;position:relative;overflow:hidden}#tf-wave{cursor:crosshair;width:100%;height:100%}.tf-range-layer{pointer-events:none;position:absolute;inset:0}.tf-range-layer input{appearance:none;pointer-events:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.tf-range-layer input::-webkit-slider-thumb{appearance:none;background:var(--tone);width:14px;height:22px;box-shadow:0 0 0 1px var(--tone);pointer-events:auto;cursor:ew-resize;border:2px solid #fff;border-radius:4px}.tf-range-layer input::-moz-range-thumb{background:var(--tone);pointer-events:auto;cursor:ew-resize;border:2px solid #fff;border-radius:4px;width:12px;height:20px}.tf-transport{align-items:center;gap:14px;padding:12px 0 2px;display:flex}.tf-transport .tabular{color:var(--text-muted);font-size:.82rem}.tf-transport .hint{margin-left:auto}.tf-score-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.tf-score{text-align:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 7px}.tf-score>span{font-size:.78rem;font-weight:700;display:block}.tf-score small{color:var(--text-muted);font-size:.67rem}.tf-score-ring{background:conic-gradient(var(--tone) var(--score), var(--surface-3) 0);border-radius:50%;place-items:center;width:62px;height:62px;margin:8px auto 5px;display:grid;position:relative}.tf-score-ring:after{content:"";border-radius:inherit;background:var(--surface);position:absolute;inset:7px}.tf-score-ring strong{z-index:1;color:var(--tone);font-size:1.12rem;position:relative}.tf-ai-row{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);justify-content:space-between;align-items:center;gap:14px;margin-top:16px;padding:14px;display:flex}.tf-ai-row strong{font-size:.86rem}.tf-ai-row p{color:var(--text-muted);margin-top:2px;font-size:.76rem}.tf-progress-wrap{margin-top:10px}.tf-progress-track{background:var(--surface-3);border-radius:10px;height:6px;overflow:hidden}.tf-progress-track span{background:var(--primary);width:0;height:100%;transition:width .18s;display:block}.tf-progress-wrap .hint{margin-top:6px;display:block}.tf-status{min-height:20px;margin-top:8px}.tf-result-title{border-bottom:1px solid var(--border);padding-bottom:18px}.tf-result-title>div>span{color:var(--text-muted);font-size:.76rem;font-weight:700;display:block}.tf-result-title h2{letter-spacing:-.025em;margin-top:3px;font-size:1.35rem}.tf-result-section{border-bottom:1px solid var(--border);padding:18px 0}.tf-result-section h3{margin-bottom:12px;font-size:.93rem}.tf-observations{gap:8px;padding:0;list-style:none;display:grid}.tf-observations li{color:var(--text-muted);padding-left:20px;font-size:.82rem;line-height:1.55;position:relative}.tf-observations li:before{content:"✓";color:var(--tone);font-weight:800;position:absolute;top:.05em;left:0}.tf-chain{gap:9px;padding:0;list-style:none;display:grid}.tf-chain li{align-items:flex-start;gap:9px;display:flex}.tf-chain-index{border:1px solid var(--border-strong);width:22px;height:22px;color:var(--text-muted);border-radius:4px;flex:none;place-items:center;font-size:.7rem;display:grid}.tf-chain strong,.tf-chain small{display:block}.tf-chain strong{font-size:.82rem}.tf-chain small{color:var(--text-muted);margin-top:1px;font-size:.72rem;line-height:1.45}.tf-knobs{gap:10px;display:grid}.tf-knob .row-between{font-size:.78rem}.tf-knob-track{background:var(--surface-3);border-radius:10px;height:5px;margin-top:5px;overflow:hidden}.tf-knob-track span{background:var(--primary);height:100%;display:block}.tf-actions{flex-wrap:wrap;gap:8px;padding-top:18px;display:flex}@media (width<=920px){.tf-work{grid-template-columns:1fr}.tf-result-pane{border-left:0;border-top:1px solid var(--border)}}@media (width<=620px){.tf-upload{grid-template-columns:auto 1fr;padding:15px}.tf-upload .btn{grid-column:1/-1;width:100%}.tf-analysis-pane,.tf-result-pane{padding:16px}.tf-file-row{flex-wrap:wrap;align-items:flex-start}.tf-source-label{order:4}.tf-wave-wrap{height:148px}.tf-score-grid{grid-template-columns:repeat(2,1fr)}.tf-score:last-child{grid-column:1/-1}.tf-ai-row{flex-direction:column;align-items:stretch}.tf-transport{flex-wrap:wrap}.tf-transport .hint{width:100%;margin-left:0}.tf-actions .btn{flex:100%}}
