Spaces:
Running
Running
| :root { | |
| --bg-primary: #090d16; | |
| --bg-card: #131b2e; | |
| --bg-input: #1a243b; | |
| --border-color: #24324f; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --accent: #38bdf8; | |
| --accent-hover: #0ea5e9; | |
| --accent-glow: rgba(56, 189, 248, 0.25); | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --radius-lg: 14px; | |
| --radius-md: 8px; | |
| --radius-sm: 6px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Segoe UI", Roboto, sans-serif; | |
| background-color: var(--bg-primary); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| padding: 24px; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 28px; | |
| } | |
| .badge-row { | |
| display: flex; | |
| justify-content: center; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 12px; | |
| border-radius: 9999px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| letter-spacing: 0.3px; | |
| } | |
| .badge-client { | |
| background: rgba(56, 189, 248, 0.15); | |
| color: #38bdf8; | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| } | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.15); | |
| color: #34d399; | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.15); | |
| color: #fbbf24; | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| h1 { | |
| font-size: 32px; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(135deg, #ffffff 30%, #38bdf8 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 6px; | |
| } | |
| .subtitle { | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| } | |
| .card { | |
| background-color: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .card-title { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: #e2e8f0; | |
| margin-bottom: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .model-config-row { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| input[type="text"], textarea, select { | |
| width: 100%; | |
| background-color: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-main); | |
| padding: 10px 14px; | |
| font-size: 14px; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| input[type="text"]:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| textarea { | |
| min-height: 84px; | |
| resize: vertical; | |
| } | |
| .btn { | |
| background: var(--accent); | |
| color: #0f172a; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| padding: 10px 18px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: background-color 0.2s, transform 0.1s; | |
| white-space: nowrap; | |
| } | |
| .btn:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| } | |
| .btn:active:not(:disabled) { | |
| transform: scale(0.98); | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-secondary { | |
| background: #334155; | |
| color: #f8fafc; | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: #475569; | |
| } | |
| .btn-large { | |
| width: 100%; | |
| padding: 14px 20px; | |
| font-size: 16px; | |
| margin-top: 10px; | |
| } | |
| .progress-bar-bg { | |
| width: 100%; | |
| height: 8px; | |
| background-color: #1e293b; | |
| border-radius: 999px; | |
| overflow: hidden; | |
| margin-top: 12px; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, #38bdf8, #818cf8); | |
| transition: width 0.3s ease; | |
| } | |
| .progress-status { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| margin-top: 6px; | |
| } | |
| .preset-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 12px; | |
| } | |
| .preset-chip { | |
| background-color: #1e293b; | |
| border: 1px solid var(--border-color); | |
| color: #cbd5e1; | |
| padding: 6px 12px; | |
| border-radius: 9999px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .preset-chip:hover { | |
| background-color: #334155; | |
| color: #ffffff; | |
| border-color: var(--accent); | |
| } | |
| .controls-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-top: 14px; | |
| } | |
| .control-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .control-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .control-val { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| input[type="range"] { | |
| accent-color: var(--accent); | |
| } | |
| .g2p-preview-card { | |
| background-color: #0b1120; | |
| border: 1px dashed #334155; | |
| border-radius: var(--radius-md); | |
| padding: 12px 16px; | |
| margin-top: 12px; | |
| font-size: 13px; | |
| } | |
| .g2p-row { | |
| margin-bottom: 6px; | |
| } | |
| .g2p-label { | |
| color: var(--accent); | |
| font-weight: 600; | |
| margin-right: 8px; | |
| } | |
| .g2p-val { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| color: #e2e8f0; | |
| } | |
| .result-card { | |
| background: linear-gradient(180deg, #162035 0%, #111827 100%); | |
| border: 1px solid #38bdf840; | |
| } | |
| .waveform-canvas { | |
| width: 100%; | |
| height: 90px; | |
| border-radius: var(--radius-md); | |
| background-color: #0f172a; | |
| margin-bottom: 12px; | |
| } | |
| .audio-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| audio { | |
| flex-grow: 1; | |
| height: 42px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| margin-top: 14px; | |
| text-align: center; | |
| background-color: rgba(15, 23, 42, 0.6); | |
| padding: 12px; | |
| border-radius: var(--radius-md); | |
| } | |
| .stat-item .stat-title { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .stat-item .stat-val { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| footer { | |
| text-align: center; | |
| color: #64748b; | |
| font-size: 13px; | |
| margin-top: 32px; | |
| padding-bottom: 16px; | |
| } | |
| footer a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |