*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1018;--bg-surface:#181a24;--bg-elevated:#1e2030;--text:#9ca3af;--text-bright:#e5e7eb;--accent:#ef4444;--border:#2a2d3a;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace}body{font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px}#root{max-width:900px;margin:0 auto;padding:0 24px}@media (width<=640px){#root{padding:0 12px}}.app{padding:32px 0 64px}.app-header{align-items:baseline;gap:16px;margin-bottom:24px;display:flex}.app-title{color:var(--text-bright);letter-spacing:-.5px;font-size:22px;font-weight:600}.app-track-name{color:var(--text);font-size:14px}.waveform-wrapper{margin-bottom:20px}.waveform-time{font-family:var(--mono);color:var(--text-bright);margin-bottom:8px;font-size:13px}.waveform-container{background:var(--bg-surface);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:8px;width:100%;height:180px;position:relative;overflow:hidden}.waveform-scroll-content{will-change:transform;position:absolute;top:0;bottom:0;left:0}.waveform-bars{align-items:center;gap:1px;height:100%;padding:0;display:flex;position:absolute;top:0;bottom:0}.waveform-bar{background:#4b5170;border-radius:1px;flex-shrink:0;width:2px;min-width:2px;transition:background-color 50ms}.waveform-bar.played{background:#8b8faa}.playhead{background:var(--accent);pointer-events:none;z-index:10;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 8px #ef444480}.comment-marker{cursor:pointer;z-index:5;opacity:.85;width:3px;transition:opacity .15s,width .15s;position:absolute;top:0;bottom:0}.comment-marker:before{content:"";position:absolute;inset:0 -10px}.comment-marker:hover,.comment-marker.active{opacity:1;width:4px}.comment-tooltip{background:var(--bg-elevated);border:1px solid var(--border);white-space:normal;z-index:20;pointer-events:none;border-radius:6px;min-width:160px;max-width:280px;padding:8px 12px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0006}.comment-author{color:var(--text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:600;display:block}.comment-text{color:var(--text-bright);font-size:13px;line-height:1.4;display:block}.waveform-container:after{content:"";pointer-events:none;z-index:8;background:linear-gradient(#0000,#0f1018b3);height:22px;position:absolute;bottom:0;left:0;right:0}.waveform-labels{pointer-events:none;height:22px;position:absolute;bottom:0}.waveform-label{font-family:var(--mono);color:var(--text);font-size:10px;position:absolute;bottom:4px;transform:translate(-50%)}.waveform-hint{color:#555;text-align:right;margin-top:6px;font-size:11px}.waveform-hint-mobile{display:none}@media (pointer:coarse){.waveform-hint-desktop{display:none}.waveform-hint-mobile{display:inline}}.transport-controls{justify-content:center;align-items:center;gap:16px;margin-bottom:32px;display:flex}.transport-btn{border:1px solid var(--border);background:var(--bg-surface);width:48px;height:48px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.transport-btn:hover{background:var(--bg-elevated);color:var(--text-bright);border-color:#444}.transport-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;width:56px;height:56px}.transport-btn-primary:hover{color:#fff;background:#dc2626;border-color:#dc2626}.comment-list{background:var(--bg-surface);border-radius:8px;padding:20px}.comment-list-title{color:var(--text-bright);margin-bottom:16px;font-size:15px;font-weight:600}.comment-list-empty{color:#555;font-size:13px}.comment-item{cursor:pointer;border-radius:6px;align-items:flex-start;gap:12px;padding:10px 12px;transition:background .15s;display:flex}.comment-item:hover{background:var(--bg-elevated)}.comment-item.active{background:var(--bg-elevated);outline:1px solid var(--border)}.comment-item-color{border-radius:2px;flex-shrink:0;width:4px;height:100%;min-height:32px}.comment-item-body{flex:1;min-width:0}.comment-item-header{align-items:center;gap:10px;margin-bottom:4px;display:flex}.comment-item-time{font-family:var(--mono);color:var(--accent);font-size:12px;font-weight:600}.comment-item-author{color:var(--text);font-size:12px}.comment-item-text{color:var(--text-bright);font-size:13px;line-height:1.4}.comment-item-delete{color:#555;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:18px;line-height:1;transition:color .15s}.comment-item-delete:hover{color:var(--accent)}.upload-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-bright);cursor:pointer;border-radius:6px;margin-left:auto;padding:6px 16px;font-size:13px;transition:background .15s,border-color .15s}.upload-btn:hover{background:var(--bg-elevated);border-color:#444}.upload-form{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;margin-bottom:24px;padding:20px}.upload-form-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.upload-form-header h3{color:var(--text-bright);font-size:15px;font-weight:600}.upload-form-close{color:var(--text);cursor:pointer;background:0 0;border:none;font-size:20px}.upload-form form{flex-direction:column;gap:12px;display:flex}.upload-form label{color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}.upload-form input[type=text],.upload-form input[type=file]{background:var(--bg);border:1px solid var(--border);color:var(--text-bright);border-radius:4px;padding:8px 10px;font-size:13px}.upload-submit{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;margin-top:8px;padding:10px 20px;font-size:14px;font-weight:600}.upload-submit:hover{background:#dc2626}.upload-submit:disabled{opacity:.5;cursor:not-allowed}.upload-result{color:#10b981;word-break:break-all;background:#10b9811a;border-radius:6px;margin-top:12px;padding:10px;font-size:13px}.upload-result a{color:#10b981;text-decoration:underline}.upload-error{color:var(--accent);background:#ef44441a;border-radius:6px;margin-top:12px;padding:10px;font-size:13px}.review-empty{color:#555;text-align:center;padding:40px 0;font-size:14px}.track-list{flex-direction:column;gap:2px;display:flex}.track-item{background:var(--bg-surface);border-radius:8px;transition:background .15s;overflow:hidden}.track-item.expanded{background:var(--bg-surface)}.track-row{width:100%;color:var(--text-bright);font:inherit;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;padding:14px 16px;font-size:14px;transition:background .15s;display:flex}.track-row:hover{background:var(--bg-elevated)}.track-expand-icon{width:20px;height:20px;color:var(--text);flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s;display:flex}.track-expand-icon.open{transform:rotate(90deg)}.track-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;overflow:hidden}.track-meta{color:var(--text);flex-shrink:0;align-items:center;gap:16px;font-size:12px;display:flex}.track-duration{font-family:var(--mono)}.track-date{color:#555}.track-comments{color:var(--text)}.track-status{text-transform:uppercase;letter-spacing:.3px;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600}.track-status-awaiting_review{color:#f59e0b;background:#f59e0b26}.track-status-approved{color:#10b981;background:#10b98126}.track-expanded{padding:0 16px 20px}.loading,.error{justify-content:center;align-items:center;min-height:200px;font-size:16px;display:flex}.loading{color:var(--text)}.error{color:var(--accent)}@media (width<=640px){.app{padding:16px 0 48px}.app-header{gap:10px;margin-bottom:16px}.app-title{font-size:18px}.waveform-container{height:120px}.waveform-container:after{height:18px}.waveform-label{font-size:9px}.transport-controls{gap:12px;margin-bottom:20px}.transport-btn{width:40px;height:40px}.transport-btn-primary{width:48px;height:48px}.comment-list{padding:12px}.comment-tooltip{min-width:120px;max-width:200px;left:0;transform:none}.track-row{flex-wrap:wrap;gap:6px 12px;padding:12px}.track-title{flex-basis:calc(100% - 32px)}.track-meta{flex-wrap:wrap;flex-basis:100%;gap:10px;padding-left:32px}.track-date{display:none}.track-expanded{padding:0 8px 16px}}