| |
| |
| |
|
|
| :root { |
| |
| --bg-primary: #f8fafc; |
| --bg-surface: #ffffff; |
| --bg-elevated: #ffffff; |
| --border-color: #e2e8f0; |
| --border-focus: #6366f1; |
| |
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-muted: #94a3b8; |
|
|
| --primary: #4f46e5; |
| --primary-hover: #4338ca; |
| --primary-light: #eef2ff; |
| --primary-glow: rgba(79, 70, 229, 0.25); |
|
|
| --accent-red: #ef4444; |
| --accent-green: #10b981; |
| --accent-blue: #3b82f6; |
| --accent-amber: #f59e0b; |
|
|
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 18px; |
| --radius-full: 9999px; |
| --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| body.dark-theme { |
| --bg-primary: #090d16; |
| --bg-surface: #111827; |
| --bg-elevated: #1e293b; |
| --border-color: #1f293d; |
| --border-focus: #818cf8; |
|
|
| --text-primary: #f8fafc; |
| --text-secondary: #cbd5e1; |
| --text-muted: #64748b; |
|
|
| --primary: #6366f1; |
| --primary-hover: #818cf8; |
| --primary-light: rgba(99, 102, 241, 0.15); |
| --primary-glow: rgba(99, 102, 241, 0.35); |
|
|
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); |
| --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5); |
| } |
|
|
| |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.5; |
| min-height: 100vh; |
| transition: background-color 0.3s ease, color 0.3s ease; |
| } |
|
|
| .font-mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| |
| .navbar { |
| position: sticky; |
| top: 0; |
| z-index: 50; |
| background: var(--bg-surface); |
| border-bottom: 1px solid var(--border-color); |
| backdrop-filter: blur(12px); |
| padding: 14px 24px; |
| } |
|
|
| .nav-container { |
| max-width: 1200px; |
| margin: auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .nav-brand { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| } |
|
|
| .brand-badge { |
| width: 44px; |
| height: 44px; |
| border-radius: var(--radius-md); |
| background: linear-gradient(135deg, #4f46e5, #7c3aed); |
| color: #ffffff; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); |
| } |
|
|
| .brand-title { |
| font-size: 20px; |
| font-weight: 800; |
| letter-spacing: -0.5px; |
| } |
|
|
| .brand-title .highlight { |
| background: linear-gradient(135deg, #4f46e5, #ec4899); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| .brand-subtitle { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .nav-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .chip-status { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 6px 14px; |
| border-radius: var(--radius-full); |
| background: var(--primary-light); |
| color: var(--primary); |
| font-size: 13px; |
| font-weight: 600; |
| border: 1px solid var(--border-color); |
| } |
|
|
| .status-indicator { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: var(--accent-green); |
| box-shadow: 0 0 8px var(--accent-green); |
| } |
|
|
| .chip-status.processing .status-indicator { |
| background-color: var(--accent-amber); |
| box-shadow: 0 0 8px var(--accent-amber); |
| animation: pulse-ring 1.2s infinite; |
| } |
|
|
| .theme-toggle-btn { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-color); |
| width: 38px; |
| height: 38px; |
| border-radius: 50%; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 16px; |
| transition: var(--transition); |
| } |
|
|
| .theme-toggle-btn:hover { |
| background: var(--border-color); |
| } |
|
|
| |
| .app-container { |
| max-width: 1200px; |
| margin: 24px auto; |
| padding: 0 20px 40px; |
| } |
|
|
| |
| .card { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-sm); |
| transition: var(--transition); |
| } |
|
|
| .card:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| |
| .input-card { |
| margin-bottom: 24px; |
| overflow: hidden; |
| } |
|
|
| .tabs-nav { |
| display: flex; |
| border-bottom: 1px solid var(--border-color); |
| background: var(--bg-primary); |
| padding: 6px; |
| gap: 6px; |
| } |
|
|
| .tab-btn { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 12px 18px; |
| background: transparent; |
| border: none; |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-weight: 600; |
| font-size: 14px; |
| cursor: pointer; |
| transition: var(--transition); |
| } |
|
|
| .tab-btn:hover { |
| color: var(--text-primary); |
| background: rgba(0, 0, 0, 0.04); |
| } |
|
|
| body.dark-theme .tab-btn:hover { |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| .tab-btn.active { |
| background: var(--bg-surface); |
| color: var(--primary); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .tab-pane { |
| display: none; |
| padding: 24px; |
| } |
|
|
| .tab-pane.active { |
| display: block; |
| animation: fadeIn 0.25s ease-in-out; |
| } |
|
|
| |
| .mic-recorder-wrapper { |
| display: flex; |
| align-items: center; |
| gap: 32px; |
| padding: 10px 20px; |
| } |
|
|
| .record-button-box { |
| position: relative; |
| } |
|
|
| .record-btn { |
| width: 72px; |
| height: 72px; |
| border-radius: 50%; |
| background: var(--bg-primary); |
| border: 2px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| position: relative; |
| transition: var(--transition); |
| } |
|
|
| .record-circle { |
| width: 28px; |
| height: 28px; |
| background: var(--accent-red); |
| border-radius: 50%; |
| transition: var(--transition); |
| } |
|
|
| .record-btn:hover { |
| border-color: var(--accent-red); |
| transform: scale(1.05); |
| } |
|
|
| .record-btn.recording .record-circle { |
| border-radius: 6px; |
| width: 22px; |
| height: 22px; |
| } |
|
|
| .record-btn.recording::after { |
| content: ''; |
| position: absolute; |
| inset: -8px; |
| border: 2px solid var(--accent-red); |
| border-radius: 50%; |
| animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; |
| } |
|
|
| @keyframes pulse-ring { |
| 0% { transform: scale(0.9); opacity: 1; } |
| 100% { transform: scale(1.3); opacity: 0; } |
| } |
|
|
| .record-info { |
| flex: 1; |
| } |
|
|
| .record-timer { |
| font-size: 26px; |
| font-weight: 700; |
| color: var(--text-primary); |
| letter-spacing: -1px; |
| } |
|
|
| .record-instruction { |
| font-size: 13px; |
| color: var(--text-muted); |
| margin-top: 4px; |
| } |
|
|
| .mic-meter-wrapper { |
| width: 100%; |
| max-width: 380px; |
| height: 6px; |
| background: var(--border-color); |
| border-radius: var(--radius-full); |
| margin-top: 10px; |
| overflow: hidden; |
| } |
|
|
| .mic-meter-fill { |
| width: 0%; |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent-green), var(--accent-red)); |
| border-radius: var(--radius-full); |
| transition: width 0.05s linear; |
| } |
|
|
| |
| .preset-instruction { |
| font-size: 14px; |
| color: var(--text-secondary); |
| margin-bottom: 16px; |
| } |
|
|
| .preset-chips { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| } |
|
|
| .preset-chip { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 18px; |
| background: var(--bg-primary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-full); |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--text-primary); |
| cursor: pointer; |
| transition: var(--transition); |
| } |
|
|
| .preset-chip:hover { |
| border-color: var(--primary); |
| background: var(--primary-light); |
| transform: translateY(-2px); |
| } |
|
|
| .preset-chip.active { |
| border-color: var(--primary); |
| background: var(--primary); |
| color: #ffffff; |
| box-shadow: 0 4px 12px var(--primary-glow); |
| } |
|
|
| |
| .dropzone { |
| border: 2px dashed var(--border-color); |
| border-radius: var(--radius-md); |
| padding: 36px 20px; |
| text-align: center; |
| cursor: pointer; |
| position: relative; |
| background: var(--bg-primary); |
| transition: var(--transition); |
| } |
|
|
| .dropzone:hover, .dropzone.drag-over { |
| border-color: var(--primary); |
| background: var(--primary-light); |
| } |
|
|
| .file-input { |
| position: absolute; |
| inset: 0; |
| opacity: 0; |
| cursor: pointer; |
| } |
|
|
| .dropzone-icon { |
| color: var(--primary); |
| margin-bottom: 8px; |
| } |
|
|
| .dropzone-text { |
| font-size: 14px; |
| color: var(--text-primary); |
| } |
|
|
| .dropzone-text .link-text { |
| color: var(--primary); |
| text-decoration: underline; |
| } |
|
|
| .dropzone-note { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-top: 4px; |
| } |
|
|
| |
| .content-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 24px; |
| } |
|
|
| |
| .waveform-card { |
| padding: 24px; |
| margin-bottom: 20px; |
| } |
|
|
| .card-title-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 16px; |
| } |
|
|
| .card-heading { |
| font-size: 15px; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .audio-controls { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .btn-play { |
| width: 34px; |
| height: 34px; |
| border-radius: 50%; |
| border: 1px solid var(--border-color); |
| background: var(--primary-light); |
| color: var(--primary); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| font-size: 14px; |
| transition: var(--transition); |
| } |
|
|
| .btn-play:not(:disabled):hover { |
| background: var(--primary); |
| color: #ffffff; |
| transform: scale(1.08); |
| } |
|
|
| .btn-play:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| .timer-tag { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .waveform-box { |
| width: 100%; |
| height: 230px; |
| background: #f8fafc; |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| position: relative; |
| cursor: crosshair; |
| transition: background-color 0.3s ease, border-color 0.3s ease; |
| } |
|
|
| body.dark-theme .waveform-box { |
| background: #0d131f; |
| border-color: #1f293d; |
| } |
|
|
| #waveformCanvas { |
| width: 100%; |
| height: 100%; |
| display: block; |
| } |
|
|
| .waveform-cursor { |
| position: absolute; |
| top: 8px; |
| pointer-events: none; |
| font-size: 11px; |
| font-weight: 600; |
| padding: 2px 7px; |
| background: #ef4444; |
| color: #ffffff; |
| border-radius: 4px; |
| transform: translateX(-50%); |
| display: none; |
| z-index: 10; |
| box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4); |
| } |
|
|
| .waveform-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-top: 14px; |
| padding-top: 12px; |
| border-top: 1px solid var(--border-color); |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .waveform-hint { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| color: var(--text-secondary); |
| } |
|
|
| .waveform-stats { |
| font-size: 12px; |
| color: var(--primary); |
| font-weight: 600; |
| } |
|
|
| .spec-overlay-loading { |
| position: absolute; |
| inset: 0; |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(2px); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| color: #ffffff; |
| font-size: 13px; |
| z-index: 20; |
| } |
|
|
| .spinner { |
| width: 26px; |
| height: 26px; |
| border: 3px solid rgba(255, 255, 255, 0.2); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| .result-card { |
| padding: 32px 28px; |
| border-left: 6px solid var(--primary); |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
|
|
| .emotion-header { |
| display: flex; |
| align-items: center; |
| gap: 18px; |
| margin-bottom: 0; |
| } |
|
|
| .emotion-avatar { |
| font-size: 46px; |
| width: 76px; |
| height: 76px; |
| background: var(--bg-primary); |
| border-radius: var(--radius-lg); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .emotion-meta .sub-label { |
| font-size: 11px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| color: var(--text-muted); |
| font-weight: 700; |
| } |
|
|
| .emotion-title { |
| font-size: 24px; |
| font-weight: 800; |
| letter-spacing: -0.5px; |
| margin: 2px 0 6px; |
| } |
|
|
| .badge-row { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .confidence-tag { |
| background: rgba(16, 185, 129, 0.15); |
| color: #059669; |
| font-size: 12px; |
| font-weight: 700; |
| padding: 3px 10px; |
| border-radius: var(--radius-full); |
| } |
|
|
| .speed-tag { |
| background: var(--primary-light); |
| color: var(--primary); |
| font-size: 12px; |
| font-weight: 600; |
| padding: 3px 10px; |
| border-radius: var(--radius-full); |
| } |
|
|
| .emotion-description { |
| font-size: 13.5px; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
|
|
| |
| .prob-card { |
| padding: 20px; |
| margin-bottom: 20px; |
| } |
|
|
| .card-subheading { |
| font-size: 14px; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: 16px; |
| } |
|
|
| .prob-list { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| } |
|
|
| .prob-item { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .prob-item-header { |
| display: flex; |
| justify-content: space-between; |
| font-size: 13px; |
| font-weight: 600; |
| } |
|
|
| .prob-name { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .prob-bar-track { |
| height: 8px; |
| background: var(--bg-primary); |
| border-radius: var(--radius-full); |
| overflow: hidden; |
| } |
|
|
| .prob-bar-fill { |
| height: 100%; |
| border-radius: var(--radius-full); |
| transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
|
|
| .empty-state { |
| text-align: center; |
| padding: 24px; |
| color: var(--text-muted); |
| font-size: 13px; |
| } |
|
|
| |
| .model-info-card { |
| padding: 16px 20px; |
| } |
|
|
| .info-row { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .info-icon { |
| font-size: 24px; |
| } |
|
|
| .info-label { |
| font-size: 12px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .info-detail { |
| font-size: 11px; |
| color: var(--text-muted); |
| } |
|
|
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(4px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| |
| |
| |
|
|
| |
| @media (max-width: 992px) { |
| .content-grid { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
|
|
| .app-container { |
| padding: 0 16px 36px; |
| margin: 18px auto; |
| } |
|
|
| .result-card { |
| min-height: auto; |
| } |
| } |
|
|
| |
| @media (max-width: 640px) { |
| .navbar { |
| padding: 10px 14px; |
| } |
|
|
| .nav-container { |
| gap: 10px; |
| } |
|
|
| .nav-brand { |
| gap: 10px; |
| } |
|
|
| .brand-badge { |
| width: 38px; |
| height: 38px; |
| min-width: 38px; |
| border-radius: var(--radius-sm); |
| } |
|
|
| .brand-badge svg { |
| width: 20px; |
| height: 20px; |
| } |
|
|
| .brand-title { |
| font-size: 16px; |
| } |
|
|
| |
| .brand-subtitle { |
| display: none; |
| } |
|
|
| .nav-actions { |
| gap: 8px; |
| } |
|
|
| .chip-status { |
| padding: 4px 10px; |
| font-size: 12px; |
| gap: 6px; |
| } |
|
|
| .status-indicator { |
| width: 7px; |
| height: 7px; |
| } |
|
|
| .theme-toggle-btn { |
| width: 34px; |
| height: 34px; |
| min-width: 34px; |
| font-size: 14px; |
| } |
|
|
| .app-container { |
| padding: 0 12px 24px; |
| margin: 12px auto; |
| } |
|
|
| .card { |
| border-radius: var(--radius-md); |
| } |
|
|
| .input-card { |
| margin-bottom: 16px; |
| } |
|
|
| .tabs-nav { |
| padding: 4px; |
| gap: 4px; |
| } |
|
|
| .tab-btn { |
| padding: 10px 8px; |
| font-size: 13px; |
| gap: 6px; |
| } |
|
|
| .tab-btn svg { |
| width: 16px; |
| height: 16px; |
| } |
|
|
| .tab-pane { |
| padding: 16px 12px; |
| } |
|
|
| |
| .mic-recorder-wrapper { |
| flex-direction: column; |
| text-align: center; |
| gap: 14px; |
| padding: 8px 4px; |
| } |
|
|
| .record-btn { |
| width: 64px; |
| height: 64px; |
| } |
|
|
| .record-circle { |
| width: 24px; |
| height: 24px; |
| } |
|
|
| .record-timer { |
| font-size: 24px; |
| } |
|
|
| .record-instruction { |
| font-size: 12px; |
| max-width: 280px; |
| margin: 4px auto 0; |
| text-align: center; |
| } |
|
|
| .mic-meter-wrapper { |
| width: 100%; |
| max-width: 260px; |
| height: 5px; |
| margin: 8px auto 0; |
| } |
|
|
| .record-info { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| width: 100%; |
| } |
|
|
| .dropzone { |
| padding: 24px 12px; |
| } |
|
|
| .dropzone-icon svg { |
| width: 28px; |
| height: 28px; |
| } |
|
|
| .dropzone-text { |
| font-size: 13px; |
| } |
|
|
| .dropzone-note { |
| font-size: 11px; |
| } |
|
|
| .waveform-card { |
| padding: 16px 12px; |
| margin-bottom: 16px; |
| } |
|
|
| .card-title-row { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
|
|
| .card-heading { |
| font-size: 14px; |
| } |
|
|
| .card-heading svg { |
| width: 18px; |
| height: 18px; |
| } |
|
|
| .audio-controls { |
| width: 100%; |
| justify-content: space-between; |
| } |
|
|
| .waveform-box { |
| height: 180px; |
| } |
|
|
| .waveform-footer { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 6px; |
| font-size: 11px; |
| padding-top: 10px; |
| margin-top: 10px; |
| } |
|
|
| .waveform-hint { |
| font-size: 11px; |
| } |
|
|
| .waveform-stats { |
| font-size: 11px; |
| } |
|
|
| .result-card { |
| padding: 20px 14px; |
| } |
|
|
| .emotion-header { |
| gap: 12px; |
| } |
|
|
| .emotion-avatar { |
| width: 58px; |
| height: 58px; |
| font-size: 32px; |
| border-radius: var(--radius-md); |
| min-width: 58px; |
| } |
|
|
| .emotion-title { |
| font-size: 20px; |
| line-height: 1.25; |
| } |
|
|
| .badge-row { |
| flex-wrap: wrap; |
| gap: 6px; |
| } |
|
|
| .speed-tag, .confidence-tag { |
| font-size: 11px; |
| padding: 2px 8px; |
| } |
|
|
| .prob-card { |
| padding: 16px 14px; |
| margin-bottom: 16px; |
| } |
|
|
| .card-subheading { |
| font-size: 13px; |
| margin-bottom: 12px; |
| } |
| } |
|
|
| |
| @media (max-width: 400px) { |
| .nav-container { |
| gap: 6px; |
| } |
|
|
| .brand-title { |
| font-size: 15px; |
| } |
|
|
| .chip-status { |
| padding: 3px 8px; |
| font-size: 11px; |
| } |
|
|
| .tab-btn { |
| font-size: 12px; |
| padding: 8px 4px; |
| } |
|
|
| .waveform-box { |
| height: 160px; |
| } |
|
|
| .emotion-avatar { |
| width: 48px; |
| height: 48px; |
| font-size: 26px; |
| min-width: 48px; |
| } |
|
|
| .emotion-title { |
| font-size: 18px; |
| } |
| } |
|
|
| |
| @media (max-width: 360px) { |
| #statusText { |
| display: none; |
| } |
|
|
| .chip-status { |
| padding: 6px; |
| border-radius: 50%; |
| justify-content: center; |
| width: 26px; |
| height: 26px; |
| } |
|
|
| .status-indicator { |
| margin: 0; |
| } |
|
|
| .tab-btn svg { |
| display: none; |
| } |
| } |
|
|
