Spaces:
Running
Running
| /* ========================================================================== | |
| Voice Training App — design system v11 (light only) | |
| Built around four rules borrowed from products with dense-but-calm UIs | |
| (Linear, Stripe, Notion): | |
| 1. Borders carry structure, shadows are a whisper. | |
| 2. One accent colour; every other colour means a score or a state. | |
| 3. A single type scale with three text tones — nothing in between. | |
| 4. Whitespace scales with importance, not with available room. | |
| ========================================================================== */ | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap'); | |
| :root { | |
| /* Surfaces */ | |
| --bg: #f5f7fa; | |
| --surface: #ffffff; | |
| --surface-2: #f8fafc; | |
| --surface-3: #eff3f8; | |
| --border: #e3e8ef; | |
| --border-strong: #cfd7e3; | |
| /* Text */ | |
| --text: #0f172a; | |
| --text-2: #566173; | |
| --text-3: #8792a4; | |
| /* Accent */ | |
| --accent: #3b6ef6; | |
| --accent-strong: #2c55cc; | |
| --accent-soft: #eef3ff; | |
| --accent-ring: rgba(59, 110, 246, 0.22); | |
| /* Semantic */ | |
| --success: #12a05c; | |
| --success-soft: #e9f8f0; | |
| --warning: #d97706; | |
| --warning-soft: #fef5e7; | |
| --danger: #dc2626; | |
| --danger-soft: #fdeceb; | |
| /* GRBAS grades: 0 = normal … 3 = severe */ | |
| --grade-0: #12a05c; | |
| --grade-1: #b3a103; | |
| --grade-2: #ea8010; | |
| --grade-3: #dc2626; | |
| /* Radii & elevation */ | |
| --r-sm: 8px; | |
| --r: 12px; | |
| --r-lg: 16px; | |
| --r-pill: 999px; | |
| --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05); | |
| --shadow-2: 0 10px 30px -18px rgba(15, 23, 42, 0.35); | |
| /* Spacing */ | |
| --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; | |
| --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; | |
| --content: 1180px; | |
| --topbar-h: 60px; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { | |
| font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| background: var(--bg); | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h1, h2, h3 { line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| canvas { display: block; } | |
| :focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| border-radius: var(--r-sm); | |
| } | |
| /* ===================== Buttons ===================== */ | |
| .btn { | |
| display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); | |
| height: 38px; padding: 0 var(--s4); | |
| font: inherit; font-weight: 500; font-size: 0.875rem; | |
| border-radius: var(--r-sm); border: 1px solid transparent; | |
| background: transparent; color: var(--text); | |
| cursor: pointer; white-space: nowrap; | |
| transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; | |
| } | |
| .btn:active { transform: translateY(1px); } | |
| .btn[hidden] { display: none; } | |
| .btn-primary { background: var(--accent); color: #fff; } | |
| .btn-primary:hover { background: var(--accent-strong); } | |
| .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } | |
| .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); } | |
| .btn-ghost { color: var(--text-2); } | |
| .btn-ghost:hover { background: var(--surface-3); color: var(--text); } | |
| .btn-sm { height: 32px; padding: 0 var(--s3); font-size: 0.8125rem; } | |
| .btn-block { width: 100%; } | |
| .secondary-btn { | |
| height: 34px; padding: 0 var(--s3); | |
| font: inherit; font-size: 0.8125rem; font-weight: 500; | |
| color: var(--text-2); background: var(--surface); | |
| border: 1px solid var(--border-strong); border-radius: var(--r-sm); | |
| cursor: pointer; | |
| } | |
| .secondary-btn:hover { background: var(--surface-2); color: var(--text); } | |
| /* ===================== Forms ===================== */ | |
| .field { display: block; margin-bottom: var(--s4); } | |
| .field[hidden] { display: none; } | |
| .field-label { | |
| display: block; margin-bottom: 6px; | |
| font-size: 0.8125rem; font-weight: 500; color: var(--text-2); | |
| } | |
| .field-hint { color: var(--text-3); font-weight: 400; } | |
| .input { | |
| width: 100%; height: 42px; padding: 0 var(--s3); | |
| font: inherit; font-size: 0.9375rem; color: var(--text); | |
| background: var(--surface); | |
| border: 1px solid var(--border-strong); border-radius: var(--r-sm); | |
| transition: border-color .15s ease, box-shadow .15s ease; | |
| } | |
| .input::placeholder { color: var(--text-3); } | |
| .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } | |
| .input-affix { position: relative; display: block; } | |
| .input-affix .input { padding-inline-start: 42px; } | |
| .affix-btn { | |
| position: absolute; inset-inline-start: 4px; top: 4px; | |
| width: 34px; height: 34px; | |
| display: grid; place-items: center; | |
| background: none; border: none; border-radius: var(--r-sm); | |
| font-size: 1rem; cursor: pointer; color: var(--text-2); | |
| } | |
| .affix-btn:hover { background: var(--surface-3); } | |
| .consent { | |
| display: flex; gap: var(--s2); align-items: flex-start; | |
| margin-bottom: var(--s4); padding: var(--s3); | |
| font-size: 0.8125rem; line-height: 1.5; color: var(--text-2); | |
| background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); | |
| } | |
| .consent input { margin-top: 3px; accent-color: var(--accent); } | |
| /* ===================== Tags & badges ===================== */ | |
| .tag { | |
| display: inline-flex; align-items: center; height: 26px; padding: 0 10px; | |
| font-size: 0.75rem; font-weight: 500; color: var(--text-2); | |
| background: var(--surface-3); border-radius: var(--r-pill); | |
| } | |
| .tag[hidden] { display: none; } | |
| /* ===================== Top bar ===================== */ | |
| .topbar { | |
| position: sticky; top: 0; z-index: 40; | |
| height: var(--topbar-h); | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: saturate(180%) blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .topbar-inner { | |
| max-width: var(--content); height: 100%; margin: 0 auto; padding: 0 var(--s5); | |
| display: flex; align-items: center; justify-content: space-between; gap: var(--s4); | |
| } | |
| .brand { display: flex; align-items: center; gap: var(--s3); } | |
| .brand-mark { | |
| width: 34px; height: 34px; display: grid; place-items: center; | |
| font-size: 1.05rem; background: var(--accent-soft); border-radius: var(--r-sm); | |
| } | |
| .brand-text { display: flex; flex-direction: column; line-height: 1.25; } | |
| .brand-title { font-weight: 600; font-size: 0.9375rem; } | |
| .brand-sub { font-size: 0.75rem; color: var(--text-3); } | |
| .topbar-actions { display: flex; align-items: center; gap: var(--s2); } | |
| .user-bar-inline { display: flex; align-items: center; gap: var(--s2); } | |
| .user-bar-inline[hidden] { display: none; } | |
| .user-chip { | |
| display: inline-flex; align-items: center; gap: var(--s2); | |
| height: 32px; padding: 0 10px 0 4px; | |
| background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); | |
| font-size: 0.8125rem; color: var(--text-2); | |
| } | |
| .user-chip-avatar { | |
| width: 24px; height: 24px; display: grid; place-items: center; | |
| background: var(--accent); color: #fff; | |
| border-radius: 50%; font-size: 0.75rem; font-weight: 600; | |
| } | |
| .user-email-nav { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| /* ===================== Auth screen ===================== */ | |
| .auth-screen { max-width: var(--content); margin: 0 auto; padding: var(--s7) var(--s5); } | |
| .auth-grid { | |
| display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); | |
| gap: var(--s6); align-items: start; | |
| } | |
| .auth-card { | |
| background: var(--surface); border: 1px solid var(--border); | |
| border-radius: var(--r-lg); padding: var(--s6); | |
| box-shadow: var(--shadow-2); | |
| } | |
| .auth-heading { font-size: 1.5rem; } | |
| .auth-sub { margin: var(--s2) 0 var(--s5); color: var(--text-2); font-size: 0.9375rem; } | |
| .auth-form[hidden] { display: none; } | |
| .auth-actions { display: flex; flex-direction: column; gap: var(--s2); } | |
| .auth-error { min-height: 20px; margin-top: var(--s3); font-size: 0.8125rem; color: var(--danger); } | |
| .auth-aside { padding: var(--s4) var(--s2); } | |
| .aside-heading { font-size: 1rem; color: var(--text-2); font-weight: 500; margin-bottom: var(--s4); } | |
| .aside-list { list-style: none; display: grid; gap: var(--s4); } | |
| .aside-list li { display: flex; gap: var(--s3); align-items: flex-start; } | |
| .aside-list span strong { display: block; font-weight: 600; color: var(--text); } | |
| .aside-list li > span:last-child { color: var(--text-2); font-size: 0.875rem; } | |
| .aside-icon { | |
| width: 36px; height: 36px; flex: none; display: grid; place-items: center; | |
| background: var(--surface); border: 1px solid var(--border); | |
| border-radius: var(--r-sm); font-size: 1rem; | |
| } | |
| .aside-note { | |
| margin-top: var(--s5); padding: var(--s3) var(--s4); | |
| font-size: 0.8125rem; line-height: 1.6; color: var(--text-2); | |
| background: var(--warning-soft); border-radius: var(--r-sm); | |
| border: 1px solid rgba(217, 119, 6, 0.18); | |
| } | |
| /* ===================== App shell ===================== */ | |
| .app-shell { max-width: var(--content); margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); } | |
| .app-head { | |
| display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; | |
| gap: var(--s4); margin-bottom: var(--s5); | |
| } | |
| .app-title { font-size: 1.5rem; } | |
| .app-sub { color: var(--text-2); font-size: 0.9375rem; margin-top: 4px; } | |
| .stat-row { display: flex; gap: var(--s2); } | |
| .stat { | |
| min-width: 120px; padding: 10px var(--s4); | |
| background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); | |
| display: flex; flex-direction: column; gap: 2px; | |
| } | |
| .stat-label { font-size: 0.75rem; color: var(--text-3); } | |
| .stat-value { font-size: 1.125rem; font-weight: 600; } | |
| /* ===================== Tabs ===================== */ | |
| .tabs { | |
| display: flex; gap: var(--s1); | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: var(--s5); | |
| } | |
| .tab { | |
| position: relative; | |
| height: 40px; padding: 0 var(--s4); | |
| font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--text-2); | |
| background: none; border: none; border-radius: var(--r-sm) var(--r-sm) 0 0; | |
| cursor: pointer; | |
| } | |
| .tab:hover { color: var(--text); background: var(--surface-2); } | |
| .tab.is-active { color: var(--accent); } | |
| .tab.is-active::after { | |
| content: ""; position: absolute; inset-inline: var(--s3); bottom: -1px; height: 2px; | |
| background: var(--accent); border-radius: 2px 2px 0 0; | |
| } | |
| .tab.has-update::before { | |
| content: ""; position: absolute; inset-inline-end: 6px; top: 8px; | |
| width: 6px; height: 6px; background: var(--accent); border-radius: 50%; | |
| } | |
| .tabs-sm { margin-bottom: var(--s5); } | |
| .tabs-sm .tab { height: 34px; font-size: 0.875rem; } | |
| .tab-panel { display: none; } | |
| .tab-panel.is-active { display: block; animation: panel-in .18s ease; } | |
| @keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } | |
| /* ===================== Cards ===================== */ | |
| .card, .panel { | |
| background: var(--surface); border: 1px solid var(--border); | |
| border-radius: var(--r-lg); padding: var(--s5); | |
| box-shadow: var(--shadow-1); | |
| } | |
| .card[hidden], .panel[hidden] { display: none; } | |
| .card-title { font-size: 1.0625rem; } | |
| .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } | |
| .empty-card { | |
| background: var(--surface); border: 1px dashed var(--border-strong); | |
| border-radius: var(--r-lg); padding: var(--s7) var(--s5); | |
| text-align: center; | |
| } | |
| .empty-card[hidden] { display: none; } | |
| .empty-icon { font-size: 1.75rem; } | |
| .empty-card h2 { font-size: 1.125rem; margin: var(--s3) 0 var(--s2); } | |
| .empty-card p { color: var(--text-2); margin-bottom: var(--s4); } | |
| .empty-state { color: var(--text-3); font-size: 0.875rem; text-align: center; padding: var(--s5) 0; } | |
| /* ===================== Recording tab ===================== */ | |
| .record-layout { | |
| display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); | |
| gap: var(--s4); align-items: start; | |
| } | |
| .camera-card { padding: var(--s3); } | |
| .recording-column { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } | |
| .video-container { | |
| position: relative; width: 100%; aspect-ratio: 4 / 3; | |
| background: #0f172a; border-radius: var(--r); overflow: hidden; | |
| } | |
| .video-container video, | |
| .video-container canvas#face-canvas { | |
| position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; | |
| transform: scaleX(-1); | |
| } | |
| #face-canvas { pointer-events: none; } | |
| .neck-effort-widget { | |
| position: static; width: 100%; margin: 0; padding: var(--s3); | |
| background: rgba(15, 23, 42, 0.72); color: #fff; | |
| border-radius: var(--r); | |
| font-size: 0.8125rem; | |
| } | |
| .neck-effort-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| font-weight: 600; font-size: 0.75rem; letter-spacing: .02em; | |
| color: rgba(255,255,255,.75); margin-bottom: var(--s2); | |
| } | |
| .neck-effort-mode { | |
| padding: 2px 8px; background: rgba(255,255,255,.16); border-radius: var(--r-pill); | |
| font-weight: 500; | |
| } | |
| .neck-effort-main { display: flex; align-items: center; gap: var(--s3); } | |
| .neck-effort-score { font-size: 1.75rem; font-weight: 700; line-height: 1; } | |
| .neck-effort-score.grade-0 { color: #4ade80; } | |
| .neck-effort-score.grade-1 { color: #fde047; } | |
| .neck-effort-score.grade-2 { color: #fb923c; } | |
| .neck-effort-score.grade-3 { color: #f87171; } | |
| .neck-effort-meta { min-width: 0; } | |
| .neck-effort-label { font-weight: 500; } | |
| .neck-effort-confidence { color: rgba(255,255,255,.65); font-size: 0.75rem; } | |
| .neck-effort-feedback { | |
| margin-top: var(--s2); padding: 6px 8px; border-radius: var(--r-sm); | |
| background: rgba(255,255,255,.12); line-height: 1.45; | |
| } | |
| .neck-effort-feedback:empty { display: none; } | |
| .neck-feedback-icon { margin-inline-end: 4px; } | |
| .neck-feedback-alert { background: rgba(220, 38, 38, .35); } | |
| .neck-feedback-warn { background: rgba(217, 119, 6, .35); } | |
| .neck-feedback-good { background: rgba(18, 160, 92, .35); } | |
| .neck-effort-reasons { | |
| margin-top: var(--s2); color: rgba(255,255,255,.7); | |
| font-size: 0.75rem; line-height: 1.45; | |
| } | |
| .face-metrics { | |
| position: absolute; inset-inline-end: var(--s3); bottom: var(--s3); | |
| display: flex; gap: var(--s2); flex-wrap: wrap; | |
| font-size: 0.6875rem; color: rgba(255,255,255,.85); | |
| } | |
| .face-metrics span { | |
| padding: 3px 8px; background: rgba(15,23,42,.65); border-radius: var(--r-pill); | |
| } | |
| .recording-card { display: flex; flex-direction: column; gap: var(--s4); } | |
| .recording-inner { display: flex; flex-direction: column; gap: var(--s4); } | |
| .steps { list-style: none; counter-reset: step; display: grid; gap: var(--s2); } | |
| .steps li { | |
| counter-increment: step; | |
| position: relative; padding-inline-start: 28px; | |
| color: var(--text-2); font-size: 0.875rem; | |
| } | |
| .steps li::before { | |
| content: counter(step); | |
| position: absolute; inset-inline-start: 0; top: 2px; | |
| width: 20px; height: 20px; display: grid; place-items: center; | |
| background: var(--surface-3); color: var(--text-2); | |
| border-radius: 50%; font-size: 0.6875rem; font-weight: 600; | |
| } | |
| .instruction { color: var(--text-2); font-size: 0.875rem; } | |
| .record-btn { | |
| display: flex; align-items: center; justify-content: center; gap: var(--s3); | |
| width: 100%; height: 52px; | |
| font: inherit; font-size: 1rem; font-weight: 600; color: #fff; | |
| background: var(--accent); border: none; border-radius: var(--r); | |
| cursor: pointer; transition: background-color .15s ease, transform .1s ease; | |
| } | |
| .record-btn:hover { background: var(--accent-strong); } | |
| .record-btn:active { transform: translateY(1px); } | |
| .record-icon { width: 12px; height: 12px; background: #fff; border-radius: 50%; } | |
| .record-btn.recording { background: var(--danger); } | |
| .record-btn.recording .record-icon { border-radius: 2px; animation: pulse 1.4s ease-in-out infinite; } | |
| @keyframes pulse { 50% { opacity: .35; } } | |
| .timer { | |
| text-align: center; font-size: 1.5rem; font-weight: 600; | |
| font-variant-numeric: tabular-nums; color: var(--text); | |
| } | |
| .timer[hidden] { display: none; } | |
| .status { min-height: 20px; text-align: center; font-size: 0.875rem; color: var(--text-2); } | |
| .status.error { color: var(--danger); } | |
| /* ===================== Results ===================== */ | |
| .results-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--s4); align-items: start; } | |
| .combined-summary { | |
| margin: var(--s4) 0; padding: var(--s4); | |
| background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); | |
| } | |
| .combined-summary[hidden] { display: none; } | |
| .combined-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); } | |
| .combined-summary-kicker { font-size: 0.75rem; color: var(--text-3); } | |
| .combined-summary-title { font-size: 1.0625rem; } | |
| .combined-summary-badge { | |
| padding: 4px 10px; border-radius: var(--r-pill); | |
| font-size: 0.75rem; font-weight: 600; | |
| background: var(--accent-soft); color: var(--accent-strong); | |
| } | |
| .combined-summary-text { margin-top: var(--s2); color: var(--text-2); font-size: 0.875rem; } | |
| .combined-summary-metrics { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } | |
| .summary-chip { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 5px 10px; font-size: 0.8125rem; font-weight: 600; | |
| background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); | |
| } | |
| .summary-chip-label { color: var(--text-3); font-weight: 400; } | |
| .results-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s5); align-items: center; } | |
| .radar-container { display: grid; place-items: center; } | |
| .radar-container canvas { width: 100%; max-width: 260px; height: auto; } | |
| .scores-list { display: grid; gap: var(--s3); } | |
| .score-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 26px; grid-template-areas: "label bar value" ". desc ."; gap: 4px var(--s3); align-items: center; } | |
| .score-label { grid-area: label; font-weight: 700; color: var(--text-2); } | |
| .score-bar-bg { grid-area: bar; height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; } | |
| .score-bar { height: 100%; border-radius: var(--r-pill); transition: width .35s ease; } | |
| .score-value { grid-area: value; font-weight: 700; text-align: center; } | |
| .score-desc { grid-area: desc; font-size: 0.75rem; color: var(--text-3); } | |
| .grade-0 { color: var(--grade-0); } | |
| .grade-1 { color: var(--grade-1); } | |
| .grade-2 { color: var(--grade-2); } | |
| .grade-3 { color: var(--grade-3); } | |
| .model-badge { | |
| display: inline-block; margin-top: var(--s4); padding: 4px 10px; | |
| font-size: 0.75rem; color: var(--text-3); | |
| background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); | |
| } | |
| .grbas-clinician-warning { | |
| margin-top: var(--s4); padding: var(--s3) var(--s4); | |
| font-size: 0.8125rem; line-height: 1.6; color: #7c2d12; | |
| background: var(--warning-soft); border: 1px solid rgba(217,119,6,.25); | |
| border-radius: var(--r-sm); | |
| } | |
| .features-grid { display: grid; gap: var(--s2); } | |
| .feature-item { | |
| display: flex; align-items: center; justify-content: space-between; gap: var(--s3); | |
| padding: 10px var(--s3); | |
| background: var(--surface-2); border-radius: var(--r-sm); | |
| } | |
| .feature-name { font-size: 0.8125rem; color: var(--text-2); } | |
| .feature-value { font-weight: 600; font-variant-numeric: tabular-nums; } | |
| /* ===================== Recommendations ===================== */ | |
| .rec-subtitle, .progress-subtitle { color: var(--text-2); font-size: 0.875rem; margin: 6px 0 var(--s4); } | |
| .recommendations-list { display: grid; gap: var(--s4); } | |
| .rec-group { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } | |
| .rec-header { | |
| display: flex; align-items: center; justify-content: space-between; gap: var(--s3); | |
| padding: var(--s3) var(--s4); background: var(--surface-2); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .rec-measure { font-weight: 600; font-size: 0.9375rem; } | |
| .rec-score { font-size: 0.75rem; color: var(--text-3); } | |
| .rec-priority { | |
| padding: 3px 8px; border-radius: var(--r-pill); | |
| font-size: 0.6875rem; font-weight: 600; | |
| background: var(--accent-soft); color: var(--accent-strong); | |
| } | |
| .rec-resources { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); } | |
| .rec-card { | |
| display: block; padding: var(--s3); | |
| background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); | |
| color: inherit; transition: border-color .15s ease, background-color .15s ease; | |
| } | |
| .rec-card:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; } | |
| .rec-card-section { font-size: 0.75rem; color: var(--text-3); } | |
| .rec-card-why { font-size: 0.8125rem; color: var(--text-2); margin-top: 4px; } | |
| .rec-card-course { font-size: 0.75rem; color: var(--accent); margin-top: 4px; } | |
| /* ===================== Progress & history ===================== */ | |
| .bottom-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--s4); align-items: start; } | |
| .progress-chart-container { | |
| background: var(--surface-2); border: 1px solid var(--border); | |
| border-radius: var(--r); padding: var(--s3); | |
| } | |
| .progress-chart-container canvas { width: 100%; } | |
| .progress-summary { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } | |
| .progress-chip { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 5px 10px; font-size: 0.8125rem; | |
| background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); | |
| } | |
| .progress-chip-dim { font-weight: 700; } | |
| .progress-chip-label { color: var(--text-3); } | |
| .progress-chip-change { font-weight: 600; font-variant-numeric: tabular-nums; } | |
| .progress-improved .progress-chip-change { color: var(--success); } | |
| .progress-worsened .progress-chip-change { color: var(--danger); } | |
| .progress-chip-off { opacity: .4; } | |
| .history-list { display: grid; gap: var(--s2); max-height: 460px; overflow-y: auto; margin-top: var(--s4); } | |
| .history-item { | |
| display: flex; align-items: center; justify-content: space-between; gap: var(--s3); | |
| padding: 10px var(--s3); | |
| background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-sm); | |
| } | |
| .history-item-clickable { cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } | |
| .history-item-clickable:hover { background: var(--surface); border-color: var(--accent); } | |
| .history-time { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; } | |
| .history-scores { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .history-score { | |
| font-size: 0.75rem; font-weight: 600; | |
| padding: 2px 6px; background: var(--surface); border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| } | |
| .history-view-btn { color: var(--text-3); font-size: 0.75rem; } | |
| /* ===================== Improvement banner ===================== */ | |
| .improvement-banner { | |
| display: flex; align-items: flex-start; gap: var(--s3); | |
| margin-bottom: var(--s4); padding: var(--s4); | |
| background: var(--success-soft); border: 1px solid rgba(18,160,92,.22); | |
| border-radius: var(--r); | |
| } | |
| .improvement-banner[hidden] { display: none; } | |
| .banner-icon { font-size: 1.25rem; } | |
| .banner-title { font-weight: 600; } | |
| .banner-message { color: var(--text-2); font-size: 0.875rem; } | |
| .banner-details { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); } | |
| .banner-chip { | |
| padding: 3px 8px; font-size: 0.75rem; font-weight: 600; | |
| background: var(--surface); border-radius: var(--r-pill); | |
| } | |
| /* ===================== Footer & utilities ===================== */ | |
| .site-footer { border-top: 1px solid var(--border); background: var(--surface); } | |
| .legal-note { | |
| max-width: var(--content); margin: 0 auto; padding: var(--s4) var(--s5); | |
| font-size: 0.75rem; line-height: 1.6; color: var(--text-3); text-align: center; | |
| } | |
| .legal-note a { color: var(--text-2); text-decoration: underline; } | |
| .scroll-top-btn { | |
| position: fixed; inset-inline-end: var(--s5); bottom: var(--s5); | |
| width: 40px; height: 40px; display: grid; place-items: center; | |
| background: var(--surface); color: var(--text-2); | |
| border: 1px solid var(--border-strong); border-radius: 50%; | |
| box-shadow: var(--shadow-2); cursor: pointer; | |
| opacity: 0; pointer-events: none; transition: opacity .2s ease; | |
| } | |
| .scroll-top-btn.is-visible { opacity: 1; pointer-events: auto; } | |
| /* ===================== Responsive ===================== */ | |
| @media (max-width: 1024px) { | |
| .auth-grid, .record-layout, .results-row, .bottom-row { grid-template-columns: minmax(0, 1fr); } | |
| .auth-aside { order: -1; padding: 0; } | |
| .results-grid { grid-template-columns: minmax(0, 1fr); } | |
| } | |
| @media (max-width: 720px) { | |
| .topbar-inner, .app-shell, .auth-screen, .legal-note { padding-inline: var(--s4); } | |
| .brand-sub { display: none; } | |
| .app-head { flex-direction: column; align-items: stretch; } | |
| .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } | |
| .stat { min-width: 0; } | |
| .tabs { overflow-x: auto; scrollbar-width: none; } | |
| .tabs::-webkit-scrollbar { display: none; } | |
| .user-email-nav { display: none; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { animation-duration: .01ms ; transition-duration: .01ms ; } | |
| } | |
| /* ========================================================================== | |
| Admin console — same components, denser presentation | |
| ========================================================================== */ | |
| .admin-auth { padding-inline: 0; } | |
| .admin-auth .auth-card { max-width: 420px; margin: 0 auto; } | |
| .admin-section { margin-bottom: var(--s4); } | |
| .subtitle { color: var(--text-2); font-size: 0.875rem; margin-bottom: var(--s4); } | |
| .admin-toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); } | |
| .class-code-box { | |
| display: inline-flex; align-items: center; gap: var(--s3); | |
| padding: 10px var(--s4); | |
| background: var(--accent-soft); border: 1px solid rgba(59,110,246,.2); border-radius: var(--r); | |
| } | |
| .class-code-box[hidden] { display: none; } | |
| .class-code-caption { font-size: 0.75rem; color: var(--text-2); } | |
| .class-code-value { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: var(--accent-strong); | |
| } | |
| .class-code-badge { | |
| display: inline-flex; align-items: center; height: 26px; padding: 0 10px; | |
| font-size: 0.75rem; color: var(--text-2); | |
| background: var(--surface-3); border-radius: var(--r-pill); | |
| } | |
| .small-btn { | |
| height: 28px; padding: 0 10px; | |
| font: inherit; font-size: 0.75rem; font-weight: 500; | |
| color: var(--text-2); background: var(--surface); | |
| border: 1px solid var(--border-strong); border-radius: var(--r-sm); | |
| cursor: pointer; | |
| } | |
| .small-btn:hover { background: var(--surface-2); color: var(--text); } | |
| .danger-btn, .delete-user-btn { color: var(--danger); border-color: rgba(220,38,38,.3); } | |
| .danger-btn:hover, .delete-user-btn:hover { background: var(--danger-soft); } | |
| .allowlist-add { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } | |
| .allowlist-add .input { width: min(320px, 100%); } | |
| .allowlist-list { list-style: none; display: grid; gap: 6px; margin-top: var(--s4); } | |
| .allowlist-list li { | |
| display: flex; align-items: center; justify-content: space-between; gap: var(--s3); | |
| padding: 8px var(--s3); font-size: 0.875rem; | |
| background: var(--surface-2); border-radius: var(--r-sm); | |
| } | |
| .allow-email { display: flex; flex-direction: column; min-width: 0; } | |
| .allow-email small { color: var(--text-2); font-size: 0.75rem; } | |
| .allow-status { font-size: 0.75rem; white-space: nowrap; } | |
| .allow-status.allow-pending { color: var(--text-2); } | |
| .allow-status.allow-active { color: var(--accent); } | |
| .allow-actions { display: flex; gap: 6px; margin-inline-start: auto; } | |
| .storage-warning { | |
| margin-top: var(--s3); padding: 8px var(--s3); font-size: 0.8rem; | |
| color: var(--danger); background: var(--danger-soft); border-radius: var(--r-sm); | |
| } | |
| .results-count-cell { text-align: center; } | |
| .class-tabs { flex-wrap: wrap; } | |
| .class-tabs[hidden] { display: none; } | |
| .class-tab.active { color: var(--accent); } | |
| .class-tab.active::after { | |
| content: ""; position: absolute; inset-inline: var(--s3); bottom: -1px; height: 2px; | |
| background: var(--accent); border-radius: 2px 2px 0 0; | |
| } | |
| .table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); } | |
| .neck-change-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 12px 0; } | |
| .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } | |
| .admin-table th { | |
| position: sticky; top: 0; | |
| padding: 10px var(--s3); text-align: start; white-space: nowrap; | |
| font-size: 0.75rem; font-weight: 600; color: var(--text-2); | |
| background: var(--surface-2); border-bottom: 1px solid var(--border); | |
| } | |
| .admin-table td { padding: 10px var(--s3); border-bottom: 1px solid var(--border); } | |
| .admin-table tbody tr:last-child td { border-bottom: none; } | |
| .admin-table tbody tr:hover { background: var(--surface-2); } | |
| .score-cell { text-align: center; font-variant-numeric: tabular-nums; } | |
| .actions-cell { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .role-badge { | |
| display: inline-flex; align-items: center; height: 22px; padding: 0 8px; | |
| font-size: 0.6875rem; font-weight: 600; border-radius: var(--r-pill); | |
| } | |
| .role-super { background: var(--danger-soft); color: var(--danger); } | |
| .role-admin { background: var(--accent-soft); color: var(--accent-strong); } | |
| .role-user { background: var(--surface-3); color: var(--text-2); } | |
| /* Neck observation grades follow the GRBAS score/bar presentation. */ | |
| .neck-group-score { --neck-grade-0: #22c55e; --neck-grade-1: #f59e0b; --neck-grade-2: #f97316; --neck-grade-3: #ef4444; display: grid; grid-template-columns: auto minmax(70px, 1fr) 52px; grid-template-areas: "label bar value"; gap: 10px; align-items: center; min-width: 210px; } | |
| .neck-group-score .score-label { grid-area: label; font-size: .875rem; } | |
| .neck-group-score .score-value { grid-area: value; font-size: 1.25rem; font-weight: 700; text-align: center; white-space: nowrap; } | |
| .neck-group-score .score-bar-bg { grid-area: bar; height: 8px; background: var(--surface-3, #e5e7eb); border-radius: 999px; overflow: hidden; } | |
| .neck-group-score .score-bar { height: 100%; border-radius: 999px; transition: width .35s ease; } | |
| .neck-group-score-note { font-size: .8125rem; line-height: 1.5; margin: 8px 0; } | |
| .neck-analysis-notices { margin: 18px 0; padding: 14px 18px; border: 1px solid #c9d4e4; border-radius: 10px; background: #f3f6fa; color: #23334a; text-align: start; } | |
| .neck-analysis-notices h3 { margin: 0 0 10px; font-size: 1rem; } | |
| .neck-analysis-notices p { margin: 8px 0; line-height: 1.6; } | |
| .neck-change-table td { vertical-align: top; line-height: 1.6; padding: 12px; } | |
| .neck-change-table summary, .neck-audio-details summary { cursor: pointer; line-height: 1.6; } | |
| @media (max-width: 700px) { | |
| .neck-group-table { display: block; overflow: visible; } | |
| .neck-group-table tbody { display: block; } | |
| .neck-group-table tr:first-child { display: none; } | |
| .neck-group-table tr:not(:first-child) { display: flex; flex-direction: column; margin: 14px 0; padding: 14px; border: 1px solid #c9d4e4; border-radius: 12px; } | |
| .neck-group-table td { display: block; width: auto; padding: 6px 0; border: 0; text-align: start; } | |
| .neck-group-table td:first-child { font-weight: 700; font-size: 1.05rem; order: -2; } | |
| .neck-group-table td:last-child { order: -1; } | |
| .neck-group-table .neck-group-score { min-width: 0; width: 100%; } | |
| } | |
| .neck-numeric-scores { display: grid; gap: 8px; margin: 16px 0; } | |
| .neck-numeric-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 10px; background: var(--surface-2, #f3f6fa); border: 1px solid #c9d4e4; } | |
| .neck-numeric-row strong { font-size: 1.5rem; white-space: nowrap; } | |
| .neck-user-feedback p { line-height: 1.7; margin: 12px 0; } | |
| .neck-positive-feedback { padding: 16px; margin: 16px 0; border: 1px solid #86bca1; border-radius: 10px; background: #edf8f1; color: #174b31; line-height: 1.7; } | |
| .neck-full-report { margin-top: 32px; border-top: 1px solid #c9d4e4; padding-top: 14px; font-size: .875rem; } | |
| .neck-full-report > summary { cursor: pointer; color: #5e6b7a; } | |
| .history-progress-controls, .history-progress-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; } | |
| .history-progress-controls button { padding: 8px 16px; border: 1px solid #94a3b8; border-radius: 8px; cursor: pointer; background: transparent; color: inherit; } | |
| .history-progress-controls button[aria-pressed="true"] { background: #dbeafe; color: #1e3a8a; } | |
| .history-progress-legend { font-size: .875rem; } | |