Spaces:
Running
Running
| /* ================================================================ | |
| Leo Presentation Analyser — Global Styles | |
| Stormy Morning palette: deep slate bg, cornflower blue accents | |
| ================================================================ */ | |
| /* ── Custom properties ─────────────────────────────────────────── */ | |
| :root { | |
| --bg: #222e38; | |
| --surface: #384959; | |
| --surface-2: #445c70; | |
| --border: rgba(136,189,242,0.14); | |
| --accent: #88BDF2; | |
| --accent-2: #6A89A7; | |
| --accent-glow: rgba(136,189,242,0.28); | |
| --text: #e8f2fc; | |
| --text-muted: #8aabbd; | |
| --success: #1de9a1; | |
| --warning: #ffb300; | |
| --danger: #ff5252; | |
| --radius: 14px; | |
| --radius-sm: 8px; | |
| --shadow: 0 8px 40px rgba(0,0,0,0.5); | |
| --transition: 0.25s ease; | |
| } | |
| /* ── Reset & Base ──────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.6; | |
| } | |
| h1,h2,h3,h4 { font-weight: 700; letter-spacing: -0.02em; } | |
| h3 { font-size: 1.1rem; } | |
| p { color: var(--text-muted); font-size: 0.9rem; } | |
| /* ── Header ────────────────────────────────────────────────────── */ | |
| .site-header { | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| padding: 1.1rem 2rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(12px); | |
| } | |
| .header-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| } | |
| .logo { | |
| height: 90px; | |
| width: auto; | |
| object-fit: contain; | |
| border-radius: var(--radius-sm); | |
| margin: -20px 0; | |
| } | |
| .brand-name { font-size: 1.4rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .brand-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; } | |
| /* ── Main Wrap ─────────────────────────────────────────────────── */ | |
| .main-wrap { | |
| flex: 1; | |
| max-width: 1100px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 2.5rem 1.5rem 3rem; | |
| } | |
| /* ── Upload Section ────────────────────────────────────────────── */ | |
| .upload-card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1.5rem; | |
| max-width: 640px; | |
| margin: 0 auto; | |
| } | |
| .drop-zone { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 2px dashed var(--border); | |
| border-radius: var(--radius); | |
| padding: 3.5rem 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); | |
| position: relative; | |
| } | |
| .drop-zone:hover, | |
| .drop-zone.drag-over { | |
| border-color: var(--accent); | |
| background: rgba(136,189,242,0.07); | |
| box-shadow: 0 0 0 4px var(--accent-glow); | |
| } | |
| .drop-icon svg { width: 72px; height: 72px; margin-bottom: 1.2rem; } | |
| .drop-title { | |
| font-size: 1.4rem; | |
| margin-bottom: 0.4rem; | |
| } | |
| .drop-sub { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem; } | |
| .browse-link { | |
| color: var(--accent); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| .file-selected { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| background: rgba(136,189,242,0.12); | |
| border: 1px solid var(--accent); | |
| border-radius: var(--radius-sm); | |
| padding: 0.6rem 1rem; | |
| margin-top: 1rem; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| .file-selected .file-icon { font-size: 1.1rem; flex-shrink: 0; } | |
| #file-name-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .file-size { color: var(--text-muted); font-weight: 400; flex-shrink: 0; } | |
| .format-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 1.4rem; letter-spacing: 0.05em; } | |
| /* ── Presentation Name Input ───────────────────────────────────── */ | |
| .name-field { width: 100%; } | |
| .name-input { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 0.75rem 1.1rem; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| color: var(--text); | |
| outline: none; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| } | |
| .name-input::placeholder { color: var(--text-muted); } | |
| .name-input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| /* ── Presentation Title (results) ──────────────────────────────── */ | |
| .presentation-title { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 1.5rem; | |
| min-height: 1em; | |
| } | |
| /* ── Analyze Button ────────────────────────────────────────────── */ | |
| .btn-analyze { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: #fff; | |
| border: none; | |
| border-radius: 40px; | |
| padding: 0.85rem 2.8rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| letter-spacing: 0.03em; | |
| transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition); | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .btn-analyze:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| transform: none ; | |
| } | |
| .btn-analyze:not(:disabled):hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px var(--accent-glow); | |
| } | |
| .btn-icon { margin-right: 0.4rem; } | |
| /* ── Progress Section ──────────────────────────────────────────── */ | |
| .progress-card { | |
| max-width: 520px; | |
| margin: 4rem auto; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 3rem 2.5rem; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| } | |
| /* Spinner */ | |
| .spinner-ring { | |
| width: 56px; | |
| height: 56px; | |
| border: 4px solid var(--surface-2); | |
| border-top-color: var(--accent); | |
| border-right-color: var(--accent-2); | |
| border-radius: 50%; | |
| animation: spin 0.9s linear infinite; | |
| margin: 0 auto 1.5rem; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .progress-title { font-size: 1.2rem; margin-bottom: 1.4rem; } | |
| .progress-track { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--surface-2); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| margin-bottom: 0.6rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| border-radius: 100px; | |
| transition: width 0.4s ease; | |
| } | |
| .progress-pct { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-bottom: 0.3rem; } | |
| .progress-msg { font-size: 0.85rem; color: var(--text-muted); } | |
| /* ── Summary Row ───────────────────────────────────────────────── */ | |
| .summary-row { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .sum-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.2rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.9rem; | |
| transition: transform var(--transition), box-shadow var(--transition); | |
| } | |
| .sum-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } | |
| .sum-icon { | |
| font-size: 1.8rem; | |
| width: 44px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| flex-shrink: 0; | |
| } | |
| .pace-icon { background: rgba(136,189,242,0.15); } | |
| .mood-icon { background: rgba(106,137,167,0.2); } | |
| .gaze-icon { background: rgba(29,233,161,0.15); } | |
| .filler-icon{ background: rgba(255,179,0,0.15); } | |
| .pause-icon { background: rgba(255,82,82,0.15); } | |
| .freq-icon { background: rgba(130,80,255,0.15); } | |
| .sum-body { min-width: 0; flex: 1; } | |
| .sum-val { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--text); text-transform: capitalize; overflow-wrap: break-word; word-break: break-word; } | |
| .sum-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; } | |
| /* ── Tabs ──────────────────────────────────────────────────────── */ | |
| .tabs-wrapper { margin-bottom: 2rem; } | |
| .tab-bar { | |
| display: flex; | |
| gap: 0.25rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 0.35rem; | |
| margin-bottom: 1.5rem; | |
| overflow-x: auto; | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| padding: 0.6rem 1rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: background var(--transition), color var(--transition); | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { background: var(--surface-2); color: var(--text); } | |
| .tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 2px 12px var(--accent-glow); } | |
| .tab-panel { animation: fadeIn 0.25s ease; } | |
| @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } | |
| /* ── Chart Grid ────────────────────────────────────────────────── */ | |
| .chart-grid { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; } | |
| .two-col { grid-template-columns: 1fr 1fr; } | |
| @media (max-width: 720px) { | |
| .two-col { grid-template-columns: 1fr; } | |
| } | |
| .chart-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.4rem 1.5rem; | |
| box-shadow: 0 2px 16px rgba(0,0,0,0.2); | |
| } | |
| .chart-card.full { margin-bottom: 1.25rem; } | |
| .chart-card h3 { margin-bottom: 0.2rem; font-size: 1rem; } | |
| .chart-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem; } | |
| .canvas-wrap { position: relative; height: 280px; } | |
| .canvas-wrap.tall{ height: 340px; } | |
| /* ── Frequency Stats ───────────────────────────────────────────── */ | |
| .freq-stats-row { | |
| display: grid; | |
| grid-template-columns: repeat(3,1fr); | |
| gap: 1rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .freq-stat-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.6rem 1rem; | |
| text-align: center; | |
| } | |
| .freq-stat-val { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } | |
| .freq-stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem; } | |
| .freq-stat-unit { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; } | |
| /* ── Pause List ────────────────────────────────────────────────── */ | |
| .pause-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } | |
| .pause-badge { | |
| background: rgba(255,82,82,0.12); | |
| border: 1px solid rgba(255,82,82,0.3); | |
| color: var(--danger); | |
| border-radius: 100px; | |
| padding: 0.3rem 0.9rem; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 2.5rem; | |
| color: var(--success); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| /* ── Gaze Summary ──────────────────────────────────────────────── */ | |
| .gaze-summary { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.5rem; } | |
| .gaze-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| } | |
| .gaze-direction { font-size: 0.85rem; font-weight: 600; min-width: 80px; text-transform: capitalize; } | |
| .gaze-bar-track { | |
| flex: 1; | |
| height: 6px; | |
| background: var(--surface-2); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| } | |
| .gaze-bar-fill { | |
| height: 100%; | |
| border-radius: 100px; | |
| transition: width 0.6s ease; | |
| } | |
| .gaze-pct { font-size: 0.8rem; color: var(--text-muted); min-width: 42px; text-align: right; } | |
| /* ── Emotion Selector Pills ────────────────────────────────────── */ | |
| .emotion-selector { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.4rem; | |
| margin-bottom: 1rem; | |
| } | |
| .emo-pill { | |
| background: transparent; | |
| border: 1.5px solid var(--pill-color, var(--border)); | |
| color: var(--text-muted); | |
| border-radius: 100px; | |
| padding: 0.28rem 0.8rem; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| font-family: inherit; | |
| cursor: pointer; | |
| transition: background var(--transition), color var(--transition); | |
| } | |
| .emo-pill:hover:not(.active) { | |
| background: rgba(255,255,255,0.05); | |
| color: var(--text); | |
| } | |
| .emo-pill.active { | |
| background: var(--pill-color, var(--accent)); | |
| border-color: var(--pill-color, var(--accent)); | |
| color: #fff; | |
| } | |
| /* ── Transcript ────────────────────────────────────────────────── */ | |
| .transcript-card { margin-bottom: 2rem; } | |
| .transcript-body { | |
| background: var(--surface-2); | |
| border-radius: var(--radius-sm); | |
| padding: 1.2rem 1.4rem; | |
| font-size: 0.9rem; | |
| line-height: 1.8; | |
| max-height: 260px; | |
| overflow-y: auto; | |
| color: var(--text); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .transcript-body::-webkit-scrollbar { width: 6px; } | |
| .transcript-body::-webkit-scrollbar-track { background: var(--surface); } | |
| .transcript-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| /* ── AI Coach Chat ─────────────────────────────────────────────── */ | |
| #chat-messages::-webkit-scrollbar { width: 6px; } | |
| #chat-messages::-webkit-scrollbar-track { background: var(--surface); } | |
| #chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| .chat-msg { | |
| max-width: 80%; | |
| padding: 0.55rem 0.9rem; | |
| border-radius: 12px; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .chat-msg--user { | |
| align-self: flex-end; | |
| background: var(--accent); | |
| color: #000; | |
| border-bottom-right-radius: 3px; | |
| } | |
| .chat-msg--assistant { | |
| align-self: flex-start; | |
| background: var(--surface-2); | |
| color: var(--text); | |
| border-bottom-left-radius: 3px; | |
| } | |
| .chat-thinking { | |
| align-self: flex-start; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 0.55rem 0.9rem; | |
| background: var(--surface-2); | |
| border-radius: 12px; | |
| border-bottom-left-radius: 3px; | |
| } | |
| .chat-thinking span { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--text-muted); | |
| animation: chat-bounce 1.2s infinite ease-in-out; | |
| } | |
| .chat-thinking span:nth-child(2) { animation-delay: 0.2s; } | |
| .chat-thinking span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes chat-bounce { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 30% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| /* ── Reset Row ─────────────────────────────────────────────────── */ | |
| .reset-row { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-top: 1.5rem; | |
| } | |
| /* ── Footer ────────────────────────────────────────────────────── */ | |
| .site-footer { | |
| border-top: 1px solid var(--border); | |
| padding: 1rem 2rem; | |
| text-align: center; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .site-footer strong { color: var(--accent); } | |
| /* ── Suggest button (header) ────────────────────────────────── */ | |
| .btn-suggest { | |
| margin-left: auto; | |
| background: transparent; | |
| color: var(--accent); | |
| border: 1.5px solid var(--accent); | |
| border-radius: 40px; | |
| padding: 0.45rem 1.1rem; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background var(--transition), box-shadow var(--transition); | |
| } | |
| .btn-suggest:hover { | |
| background: rgba(136,189,242,0.10); | |
| box-shadow: 0 0 12px var(--accent-glow); | |
| } | |
| /* ── Suggestions modal ──────────────────────────────────────── */ | |
| .suggestions-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.55); | |
| backdrop-filter: blur(4px); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .suggestions-modal { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| width: 100%; | |
| max-width: 520px; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| animation: sug-in 0.2s ease; | |
| } | |
| @keyframes sug-in { | |
| from { opacity: 0; transform: translateY(-16px) scale(0.97); } | |
| to { opacity: 1; transform: none; } | |
| } | |
| .suggestions-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .suggestions-header h2 { | |
| font-size: 1.15rem; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .suggestions-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| padding: 0 0.2rem; | |
| transition: color var(--transition); | |
| } | |
| .suggestions-close:hover { color: var(--text); } | |
| .suggestions-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| margin: 0; | |
| } | |
| .sug-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .sug-field label { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| letter-spacing: 0.03em; | |
| } | |
| .sug-optional { font-weight: 400; opacity: 0.7; } | |
| .sug-required { color: var(--danger); } | |
| .sug-field input, | |
| .sug-field select, | |
| .sug-field textarea { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| font-family: inherit; | |
| padding: 0.6rem 0.85rem; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| resize: vertical; | |
| } | |
| .sug-field input:focus, | |
| .sug-field select:focus, | |
| .sug-field textarea:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 2px var(--accent-glow); | |
| } | |
| .sug-field select option { background: var(--surface-2); } | |
| .sug-char-count { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-align: right; | |
| } | |
| .sug-feedback { | |
| font-size: 0.85rem; | |
| padding: 0.6rem 0.9rem; | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| } | |
| .sug-feedback.success { background: rgba(29,233,161,0.12); color: var(--success); } | |
| .sug-feedback.error { background: rgba(255,82,82,0.12); color: var(--danger); } | |
| .sug-actions { | |
| display: flex; | |
| gap: 0.75rem; | |
| justify-content: flex-end; | |
| padding-top: 0.25rem; | |
| } | |
| /* ── Scrollbar global ──────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; } | |
| /* ── Secondary Button ────────────────────────────────────────────── */ | |
| .btn-secondary { | |
| background: var(--surface-2); | |
| color: var(--accent); | |
| border: 1.5px solid var(--accent); | |
| border-radius: 40px; | |
| padding: 0.7rem 1.8rem; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| letter-spacing: 0.02em; | |
| transition: background var(--transition), box-shadow var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(136,189,242,0.12); | |
| box-shadow: 0 4px 16px var(--accent-glow); | |
| } | |
| .btn-secondary:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } | |
| /* ── Severity Badges ─────────────────────────────────────────────── */ | |
| .sum-card.badge-green { border-color: var(--success); box-shadow: 0 0 0 1px rgba(29,233,161,0.2); } | |
| .sum-card.badge-yellow { border-color: var(--warning); box-shadow: 0 0 0 1px rgba(255,179,0,0.2); } | |
| .sum-card.badge-red { border-color: var(--danger); box-shadow: 0 0 0 1px rgba(255,82,82,0.2); } | |
| .sum-card.badge-green .sum-val { color: var(--success); } | |
| .sum-card.badge-yellow .sum-val { color: var(--warning); } | |
| .sum-card.badge-red .sum-val { color: var(--danger); } | |
| .compare-val.badge-green { color: var(--success); font-weight: 700; } | |
| .compare-val.badge-yellow { color: var(--warning); font-weight: 700; } | |
| .compare-val.badge-red { color: var(--danger); font-weight: 700; } | |
| /* ── 4-col / 5-col frequency stats ──────────────────────────────── */ | |
| .freq-stats-row.four-col { grid-template-columns: repeat(4, 1fr); } | |
| .freq-stats-row.five-col { grid-template-columns: repeat(5, 1fr); } | |
| .freq-stats-row.five-col .freq-stat-val { font-size: 2rem; } | |
| .freq-stats-row.five-col .freq-stat-label { font-size: 0.65rem; } | |
| .freq-stats-row.five-col .freq-stat-unit { font-size: 0.65rem; } | |
| @media (max-width: 900px) { | |
| .freq-stats-row.five-col { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| @media (max-width: 720px) { | |
| .freq-stats-row.four-col, | |
| .freq-stats-row.five-col { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| .variety-card.badge-green .freq-stat-val { color: var(--success); } | |
| .variety-card.badge-yellow .freq-stat-val { color: var(--warning); } | |
| .variety-card.badge-red .freq-stat-val { color: var(--danger); } | |
| /* ── Transcript legend ───────────────────────────────────────────── */ | |
| .transcript-legend { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 0.75rem; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| .transcript-legend-label { margin-right: 0.2rem; } | |
| .transcript-legend-swatch { | |
| display: inline-block; | |
| width: 28px; | |
| height: 14px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(255,82,82,0.25); | |
| flex-shrink: 0; | |
| } | |
| .transcript-legend-text { margin-right: 0.5rem; } | |
| /* ── Clickable Transcript ────────────────────────────────────────── */ | |
| .transcript-word { | |
| cursor: pointer; | |
| border-radius: 3px; | |
| padding: 1px 2px; | |
| display: inline; | |
| transition: background var(--transition), color var(--transition); | |
| } | |
| .transcript-word:hover { background: rgba(136,189,242,0.2); color: var(--text); } | |
| .transcript-word.highlighted { | |
| background: var(--accent); | |
| color: #fff; | |
| border-radius: 3px; | |
| } | |
| /* ── History Cards ───────────────────────────────────────────────── */ | |
| .history-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; } | |
| .history-card { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 0.9rem 1.2rem; | |
| transition: border-color var(--transition), transform var(--transition); | |
| } | |
| .history-card:hover { border-color: var(--accent); transform: translateX(3px); } | |
| .history-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| margin-bottom: 0.5rem; | |
| } | |
| .history-name { font-weight: 700; font-size: 0.95rem; color: var(--text); } | |
| .history-date { font-size: 0.75rem; color: var(--text-muted); } | |
| .history-metrics { display: flex; flex-wrap: wrap; gap: 0.4rem; } | |
| .hm-chip { | |
| background: rgba(108,99,255,0.1); | |
| border: 1px solid rgba(136,189,242,0.2); | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| border-radius: 100px; | |
| padding: 0.18rem 0.65rem; | |
| } | |
| .history-loading { text-align: center; padding: 2rem; color: var(--text-muted); } | |
| /* ── Comparison Grid ─────────────────────────────────────────────── */ | |
| .compare-controls { margin-top: 1.25rem; } | |
| .compare-selectors { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: center; | |
| margin: 1rem 0; | |
| flex-wrap: wrap; | |
| } | |
| .compare-select { | |
| flex: 1; | |
| min-width: 180px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 0.6rem 0.9rem; | |
| font-size: 0.88rem; | |
| font-family: inherit; | |
| color: var(--text); | |
| outline: none; | |
| cursor: pointer; | |
| transition: border-color var(--transition); | |
| } | |
| .compare-select:focus { border-color: var(--accent); } | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 0.5rem 1rem; | |
| margin-top: 1rem; | |
| } | |
| .compare-header { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding-bottom: 0.4rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .compare-label { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .compare-val { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| /* ── Posture / Body Language Option ─────────────────────────────── */ | |
| .posture-option { | |
| margin: 0.6rem 0 0.2rem; | |
| padding: 0.8rem 1rem; | |
| background: rgba(136,189,242,0.05); | |
| border: 1px solid rgba(136,189,242,0.15); | |
| border-radius: var(--radius-sm); | |
| } | |
| .posture-check-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .posture-check-label input[type="checkbox"] { | |
| display: none; | |
| } | |
| .posture-check-box { | |
| width: 18px; | |
| height: 18px; | |
| min-width: 18px; | |
| border: 2px solid var(--accent); | |
| border-radius: 4px; | |
| background: transparent; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background var(--transition), border-color var(--transition); | |
| position: relative; | |
| } | |
| .posture-check-label input[type="checkbox"]:checked + .posture-check-box { | |
| background: var(--accent); | |
| } | |
| .posture-check-label input[type="checkbox"]:checked + .posture-check-box::after { | |
| content: ''; | |
| display: block; | |
| width: 5px; | |
| height: 9px; | |
| border: 2px solid #fff; | |
| border-top: none; | |
| border-left: none; | |
| transform: rotate(45deg) translate(-1px, -1px); | |
| } | |
| .posture-check-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.15rem; | |
| } | |
| .posture-check-title { | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .posture-check-warn { | |
| font-size: 0.76rem; | |
| color: var(--warning); | |
| font-weight: 500; | |
| } | |
| /* ================================================================ | |
| MODE TOGGLE (Upload / Webcam) | |
| ================================================================ */ | |
| .mode-toggle { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 1.2rem; | |
| background: var(--surface-2); | |
| border-radius: var(--radius-sm); | |
| padding: 0.3rem; | |
| } | |
| .mode-btn { | |
| flex: 1; | |
| padding: 0.55rem 1rem; | |
| border: none; | |
| border-radius: calc(var(--radius-sm) - 2px); | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .mode-btn.active { | |
| background: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 2px 10px rgba(136,189,242,0.28); | |
| } | |
| /* ── Webcam preview ─────────────────────────────────────────────── */ | |
| .webcam-wrap { | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: #000; | |
| margin-bottom: 1rem; | |
| aspect-ratio: 16 / 9; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .gaze-check-badge { | |
| position: absolute; | |
| bottom: 12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 5px 14px; | |
| border-radius: 20px; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| pointer-events: none; | |
| white-space: nowrap; | |
| transition: background 0.3s, color 0.3s; | |
| } | |
| .gaze-badge-ok { background: rgba(30,200,100,0.88); color: #fff; } | |
| .gaze-badge-no { background: rgba(255,70,70,0.88); color: #fff; } | |
| .gaze-badge-checking { background: rgba(80,80,100,0.75); color: #ccc; } | |
| .webcam-preview { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: var(--radius); | |
| transform: scaleX(-1); /* mirror so it feels natural */ | |
| } | |
| .webcam-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .btn-record { | |
| padding: 0.65rem 1.6rem; | |
| border: none; | |
| border-radius: 999px; | |
| background: var(--danger); | |
| color: #fff; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 3px 14px rgba(255,82,82,0.4); | |
| } | |
| .btn-record:hover { filter: brightness(1.12); } | |
| .btn-stop { | |
| padding: 0.65rem 1.6rem; | |
| border: none; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| border: 1px solid var(--border); | |
| transition: var(--transition); | |
| } | |
| .btn-stop:hover { background: var(--surface); } | |
| .record-timer { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--danger); | |
| font-variant-numeric: tabular-nums; | |
| min-width: 3rem; | |
| text-align: center; | |
| animation: pulse-timer 1s ease-in-out infinite; | |
| } | |
| @keyframes pulse-timer { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| /* ================================================================ | |
| FILLER HIGHLIGHT IN TRANSCRIPT | |
| ================================================================ */ | |
| .transcript-word.filler-highlight { | |
| background: rgba(255,179,0,0.22); | |
| color: var(--warning); | |
| border-radius: 3px; | |
| padding: 0 2px; | |
| font-weight: 600; | |
| } | |
| /* ================================================================ | |
| REPETITIVE WORDS | |
| ================================================================ */ | |
| .rep-words-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.55rem; | |
| } | |
| .rep-word-item { | |
| display: grid; | |
| grid-template-columns: 120px 1fr 48px; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .rep-word-text { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| text-transform: capitalize; | |
| } | |
| .rep-word-bar-track { | |
| background: var(--surface-2); | |
| border-radius: 999px; | |
| height: 8px; | |
| overflow: hidden; | |
| } | |
| .rep-word-bar { | |
| height: 100%; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| transition: width 0.4s ease; | |
| } | |
| .rep-word-count { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| text-align: right; | |
| } | |
| /* ── Summary tab ───────────────────────────────────────────────── */ | |
| .summary-tab-card { padding: 2rem 2.4rem; } | |
| .summary-paragraphs { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; } | |
| .summary-p { | |
| font-size: 1.05rem; | |
| line-height: 1.8; | |
| color: var(--text); | |
| background: var(--surface-2); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| padding: 1rem 1.4rem; | |
| } | |
| /* ── Script option (upload screen) ────────────────────────────── */ | |
| .script-option { margin: 0.6rem 0; } | |
| .script-toggle-btn { | |
| background: none; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 0.88rem; | |
| padding: 0.5rem 1rem; | |
| width: 100%; | |
| text-align: left; | |
| transition: border-color var(--transition), color var(--transition); | |
| } | |
| .script-toggle-btn:hover { border-color: var(--accent); color: var(--text); } | |
| .script-caret { float: right; } | |
| .script-textarea { | |
| width: 100%; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| margin-top: 0.5rem; | |
| padding: 0.8rem 1rem; | |
| resize: vertical; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| .script-textarea:focus { border-color: var(--accent); } | |
| .script-textarea::placeholder { color: var(--text-muted); } | |
| /* ── Confidence card ───────────────────────────────────────────── */ | |
| .conf-icon { font-size: 1.4rem; } | |
| /* ── Coach Tips ────────────────────────────────────────────────── */ | |
| .coach-tip { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| background: linear-gradient(135deg, rgba(136,189,242,0.08), rgba(106,137,167,0.1)); | |
| border: 1px solid rgba(136,189,242,0.2); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.2rem; | |
| margin-top: 1rem; | |
| } | |
| .coach-tip-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.1rem; } | |
| .coach-tip-text { font-size: 0.93rem; line-height: 1.7; color: var(--text); } | |
| /* ── Segment Coach Panel ───────────────────────────────────────── */ | |
| .segment-coach-panel { | |
| background: var(--surface-2); | |
| border: 1px solid rgba(136,189,242,0.25); | |
| border-left: 3px solid var(--accent); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.4rem; | |
| margin-top: 1rem; | |
| animation: fadeIn 0.2s ease; | |
| } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } | |
| .segment-coach-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .segment-coach-icon { font-size: 1.1rem; } | |
| .segment-coach-title { font-weight: 700; font-size: 0.9rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; } | |
| .segment-coach-time { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); font-family: monospace; } | |
| .segment-coach-text { font-size: 0.95rem; line-height: 1.7; color: var(--text); margin: 0; } | |
| .segment-quote { color: var(--text-muted); font-size: 0.88rem; display: block; margin-top: 0.4rem; } | |
| /* ── Speaking Time Breakdown ───────────────────────────────────── */ | |
| .speaking-breakdown-wrap { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .small-pie { width: 180px ; height: 180px ; flex-shrink: 0; } | |
| .speaking-time-stats { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.6rem; } | |
| .speaking-stat-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; } | |
| .speaking-stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } | |
| .speaking-stat-label { flex: 1; color: var(--text); } | |
| .speaking-stat-time { color: var(--text-muted); font-size: 0.85rem; } | |
| .speaking-stat-pct { width: 36px; text-align: right; font-weight: 700; font-size: 0.85rem; color: var(--text-muted); } | |
| /* ── Script Feedback ───────────────────────────────────────────── */ | |
| .script-stats-row { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 1.5rem; | |
| } | |
| .script-stat-card { | |
| flex: 1; | |
| min-width: 110px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .script-stat-card.stat-green { border-color: rgba(29,233,161,0.3); } | |
| .script-stat-card.stat-yellow { border-color: rgba(255,179,0,0.3); } | |
| .script-stat-card.stat-red { border-color: rgba(255,82,82,0.3); } | |
| .script-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--text); } | |
| .script-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; } | |
| .script-diff-section, .script-missed-section { margin-top: 1.4rem; } | |
| .script-diff-section h4, .script-missed-section h4 { font-size: 1rem; color: var(--text); margin-bottom: 0.4rem; } | |
| .script-legend { font-size: 1.1rem; } | |
| .script-legend.hit { color: #1de9a1; } | |
| .script-legend.miss { color: #ff5252; } | |
| .script-diff-text { | |
| background: var(--surface-2); | |
| border-radius: var(--radius-sm); | |
| padding: 1rem 1.2rem; | |
| font-size: 0.92rem; | |
| line-height: 2; | |
| margin-top: 0.5rem; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .script-word { border-radius: 3px; padding: 1px 3px; } | |
| .script-hit { color: #1de9a1; } | |
| .script-miss { color: #ff5252; background: rgba(255,82,82,0.12); text-decoration: underline; text-decoration-style: dotted; } | |
| .script-tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } | |
| .missed-tag { | |
| background: rgba(255,82,82,0.15); | |
| border: 1px solid rgba(255,82,82,0.3); | |
| border-radius: 999px; | |
| color: #ff8a80; | |
| font-size: 0.82rem; | |
| padding: 0.2rem 0.65rem; | |
| } | |
| .extra-tag { | |
| background: rgba(62,207,207,0.12); | |
| border: 1px solid rgba(62,207,207,0.25); | |
| border-radius: 999px; | |
| color: var(--accent-2); | |
| font-size: 0.82rem; | |
| padding: 0.2rem 0.65rem; | |
| } | |
| /* ================================================================ | |
| NEW FEATURES — Custom Fillers · Slide PDF · Live Coaching | |
| Best/Worst Moments · Audience Q&A · Slides Tab | |
| ================================================================ */ | |
| /* ── Custom filler input description ──────────────────────────── */ | |
| .custom-filler-desc { | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| margin: 0.4rem 0 0.5rem; | |
| } | |
| .custom-filler-defaults { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.35rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| /* ── Slide PDF upload option ───────────────────────────────────── */ | |
| .slide-pdf-option { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| margin-top: 0.8rem; | |
| overflow: hidden; | |
| } | |
| .slide-pdf-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| padding: 0.75rem 1rem; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| } | |
| .slide-pdf-label:hover { background: rgba(255,255,255,0.04); } | |
| .slide-pdf-icon { font-size: 1.4rem; flex-shrink: 0; } | |
| .slide-pdf-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; } | |
| .slide-pdf-title { font-size: 0.92rem; font-weight: 600; color: var(--text); } | |
| .slide-pdf-sub { font-size: 0.78rem; color: var(--text-muted); } | |
| /* ── Live coaching panel ───────────────────────────────────────── */ | |
| .live-coach-panel { | |
| background: rgba(136,189,242,0.10); | |
| border: 1px solid rgba(136,189,242,0.25); | |
| border-radius: var(--radius-sm); | |
| margin-top: 0.9rem; | |
| padding: 0.75rem 1rem; | |
| } | |
| .live-coach-row { | |
| display: flex; | |
| gap: 1.5rem; | |
| align-items: center; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .live-coach-stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.2rem; | |
| min-width: 60px; | |
| } | |
| .live-stat-val { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| line-height: 1.1; | |
| } | |
| .live-stat-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .live-volume-stat { min-width: 80px; } | |
| .live-volume-wrap { | |
| width: 80px; | |
| height: 10px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .live-volume-bar { | |
| height: 100%; | |
| width: 0%; | |
| background: var(--accent-2); | |
| border-radius: 999px; | |
| transition: width 0.1s linear; | |
| } | |
| .live-coach-tip { | |
| text-align: center; | |
| font-size: 0.83rem; | |
| color: var(--text-muted); | |
| margin-top: 0.5rem; | |
| min-height: 1.2em; | |
| } | |
| /* ── Best & Worst moments ──────────────────────────────────────── */ | |
| /* ── Audience Q&A ──────────────────────────────────────────────── */ | |
| .qa-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; } | |
| .qa-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| background: rgba(136,189,242,0.07); | |
| border-radius: var(--radius-sm); | |
| padding: 0.65rem 0.9rem; | |
| } | |
| .qa-num { | |
| flex-shrink: 0; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| background: rgba(136,189,242,0.2); | |
| border-radius: 5px; | |
| padding: 0.1rem 0.4rem; | |
| margin-top: 0.1rem; | |
| } | |
| .qa-text { font-size: 0.9rem; color: var(--text); line-height: 1.5; } | |
| /* ── Slides tab ────────────────────────────────────────────────── */ | |
| .slide-card { | |
| background: var(--surface-2); | |
| border-radius: var(--radius-sm); | |
| padding: 0.8rem 1rem; | |
| margin-bottom: 0.7rem; | |
| border: 1px solid var(--border); | |
| } | |
| .slide-no-text { opacity: 0.55; } | |
| .slide-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| flex-wrap: wrap; | |
| } | |
| .slide-num { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); min-width: 55px; } | |
| .slide-coverage-bar-wrap { | |
| flex: 1; | |
| height: 8px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .slide-coverage-bar { | |
| height: 100%; | |
| border-radius: 999px; | |
| transition: width 0.4s ease; | |
| } | |
| .slide-pct { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| min-width: 120px; | |
| text-align: right; | |
| } | |
| .slide-pct.muted { color: var(--text-muted); } | |
| .slide-preview { | |
| margin-top: 0.45rem; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| } | |
| /* ── Analysis Modules Grid ───────────────────────────────────────── */ | |
| .analysis-modules-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.75rem 2rem; | |
| padding: 0.75rem 0.25rem 0.25rem; | |
| } | |
| @media (max-width: 480px) { | |
| .analysis-modules-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ── Presentation type preset select ────────────────────────────── */ | |
| .preset-select { | |
| width: 100%; | |
| padding: 0.6rem 0.9rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-size: 0.88rem; | |
| font-family: inherit; | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.75rem center; | |
| padding-right: 2rem; | |
| transition: border-color var(--transition); | |
| } | |
| .preset-select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .preset-select option { | |
| background: var(--surface-2); | |
| color: var(--text); | |
| } | |
| /* ── Audio-only note ─────────────────────────────────────────────── */ | |
| .audio-only-note { | |
| font-size: 0.8rem; | |
| color: var(--accent-2); | |
| padding: 0.4rem 0.5rem 0.2rem; | |
| margin: 0; | |
| } | |
| /* ── Summary preset note ─────────────────────────────────────────── */ | |
| .summary-preset-note { | |
| background: rgba(136,189,242,0.08); | |
| border-left: 3px solid var(--accent); | |
| padding: 0.6rem 0.9rem; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| margin-bottom: 0.8rem; | |
| } | |
| /* ── Word cloud ──────────────────────────────────────────────────── */ | |
| .word-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem 0.8rem; | |
| padding: 0.5rem 0; | |
| align-items: center; | |
| line-height: 1.6; | |
| } | |
| .wc-word { | |
| cursor: default; | |
| font-weight: 600; | |
| transition: opacity 0.2s; | |
| letter-spacing: 0.01em; | |
| } | |
| .wc-word:hover { opacity: 1 ; } | |