| :root { |
| color-scheme: light; |
| font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; |
| font-size: 16px; |
| --page-bg: #f4f6fb; |
| --surface-color: #ffffff; |
| --surface-muted: #f8fafc; |
| --surface-emphasis: #eef1f7; |
| --header-bg: #1f2937; |
| --footer-bg: #111827; |
| --text-primary: #0f172a; |
| --text-secondary: #475569; |
| --text-muted: #64748b; |
| --text-inverse: #f8fafc; |
| --accent: #4f46e5; |
| --accent-strong: #4338ca; |
| --accent-soft: rgba(79, 70, 229, 0.1); |
| --accent-outline: rgba(79, 70, 229, 0.35); |
| --border-color: rgba(15, 23, 42, 0.08); |
| --border-muted: rgba(148, 163, 184, 0.2); |
| --border-strong: rgba(79, 70, 229, 0.3); |
| --radius-lg: 0.75rem; |
| --radius-md: 0.5rem; |
| --radius-sm: 0.375rem; |
| --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); |
| --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08); |
| --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.1); |
| --info-bg: rgba(148, 163, 184, 0.1); |
| --info-border: rgba(148, 163, 184, 0.3); |
| --success-bg: rgba(34, 197, 94, 0.1); |
| --success-border: rgba(34, 197, 94, 0.4); |
| --error-bg: rgba(248, 113, 113, 0.1); |
| --error-border: rgba(248, 113, 113, 0.4); |
| --badge-valid-bg: rgba(34, 197, 94, 0.15); |
| --badge-valid-text: #065f46; |
| --badge-invalid-bg: rgba(248, 113, 113, 0.15); |
| --badge-invalid-text: #7f1d1d; |
| --outline-offset: 2px; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| color-scheme: dark; |
| --page-bg: #030712; |
| --surface-color: #0f172a; |
| --surface-muted: #1e293b; |
| --surface-emphasis: #0b1324; |
| --header-bg: #0b1324; |
| --footer-bg: #050b19; |
| --text-primary: #e2e8f0; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
| --text-inverse: #f9fafb; |
| --accent-soft: rgba(99, 102, 241, 0.15); |
| --border-color: rgba(148, 163, 184, 0.1); |
| --border-muted: rgba(148, 163, 184, 0.2); |
| --border-strong: rgba(99, 102, 241, 0.4); |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); |
| --info-bg: rgba(148, 163, 184, 0.15); |
| --info-border: rgba(148, 163, 184, 0.3); |
| --success-bg: rgba(34, 197, 94, 0.15); |
| --success-border: rgba(34, 197, 94, 0.4); |
| --error-bg: rgba(248, 113, 113, 0.15); |
| --error-border: rgba(248, 113, 113, 0.4); |
| --badge-valid-bg: rgba(34, 197, 94, 0.2); |
| --badge-valid-text: #86efac; |
| --badge-invalid-bg: rgba(248, 113, 113, 0.2); |
| --badge-invalid-text: #fca5a5; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| transition-duration: 0.01ms !important; |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| } |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| background: var(--page-bg); |
| color: var(--text-primary); |
| } |
|
|
| code { |
| font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; |
| padding: 0.1rem 0.35rem; |
| border-radius: var(--radius-sm); |
| background: var(--surface-emphasis); |
| color: var(--text-secondary); |
| } |
|
|
| .app-header, |
| .app-footer { |
| padding: 2rem; |
| color: var(--text-inverse); |
| } |
|
|
| .app-header { |
| background: var(--header-bg); |
| border-bottom: 1px solid rgba(15, 23, 42, 0.2); |
| } |
|
|
| .app-header h1 { |
| margin: 0 0 0.5rem; |
| font-size: 2rem; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| } |
|
|
| .tagline { |
| margin: 0; |
| font-size: 0.95rem; |
| color: rgba(248, 250, 252, 0.85); |
| } |
|
|
| .app-footer { |
| margin-top: auto; |
| font-size: 0.875rem; |
| text-align: center; |
| background: var(--footer-bg); |
| border-top: 1px solid rgba(15, 23, 42, 0.2); |
| } |
|
|
| .app-main { |
| flex: 1; |
| padding: 2rem; |
| max-width: 1200px; |
| width: 100%; |
| margin: 0 auto; |
| } |
|
|
| .app-shell { |
| display: flex; |
| gap: 2rem; |
| align-items: flex-start; |
| } |
|
|
| .sidebar { |
| width: 320px; |
| flex-shrink: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 1.5rem; |
| position: sticky; |
| top: 2rem; |
| } |
|
|
| .content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .panel { |
| background: var(--surface-color); |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-md); |
| padding: 1.5rem; |
| display: grid; |
| gap: 1.25rem; |
| } |
|
|
| .panel-heading h2 { |
| margin: 0 0 0.25rem; |
| font-size: 1.125rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .panel-heading p { |
| margin: 0; |
| font-size: 0.875rem; |
| color: var(--text-secondary); |
| line-height: 1.5; |
| } |
|
|
| .control-group { |
| display: grid; |
| gap: 0.5rem; |
| } |
|
|
| .control-label { |
| font-weight: 600; |
| font-size: 0.875rem; |
| color: var(--text-primary); |
| } |
|
|
| .control-row { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 0.75rem; |
| align-items: center; |
| } |
|
|
| .control-help { |
| margin: 0; |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| } |
|
|
| .divider { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| font-weight: 600; |
| } |
|
|
| .divider::before, |
| .divider::after { |
| content: ""; |
| flex: 1; |
| height: 1px; |
| background: var(--border-muted); |
| } |
|
|
| .select, |
| .file-input, |
| .button { |
| font: inherit; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-muted); |
| padding: 0.625rem 0.875rem; |
| transition: all 0.15s ease; |
| } |
|
|
| .select { |
| width: 100%; |
| background: var(--surface-color); |
| color: var(--text-primary); |
| } |
|
|
| .file-input { |
| width: 100%; |
| background: var(--surface-color); |
| color: var(--text-primary); |
| } |
|
|
| .select:focus-visible, |
| .file-input:focus-visible { |
| outline: 3px solid var(--accent-outline); |
| outline-offset: var(--outline-offset); |
| } |
|
|
| .file-input { |
| cursor: pointer; |
| } |
|
|
| .file-input::file-selector-button, |
| .file-input::-webkit-file-upload-button { |
| font: inherit; |
| border: none; |
| margin-right: 0.75rem; |
| padding: 0.5rem 0.875rem; |
| border-radius: var(--radius-sm); |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| color: var(--text-inverse); |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .file-input::file-selector-button:hover, |
| .file-input::-webkit-file-upload-button:hover { |
| transform: translateY(-1px); |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .button { |
| background: linear-gradient(135deg, var(--accent), var(--accent-strong)); |
| border: none; |
| color: var(--text-inverse); |
| cursor: pointer; |
| font-weight: 600; |
| font-size: 0.875rem; |
| white-space: nowrap; |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .button:hover:not(:disabled) { |
| transform: translateY(-1px); |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .button:focus-visible { |
| outline: 2px solid var(--accent-outline); |
| outline-offset: var(--outline-offset); |
| } |
|
|
| .button:disabled { |
| background: var(--surface-emphasis); |
| color: var(--text-muted); |
| border: 1px solid var(--border-muted); |
| cursor: not-allowed; |
| box-shadow: none; |
| transform: none; |
| opacity: 0.6; |
| } |
|
|
| .button-secondary { |
| background: var(--surface-muted); |
| color: var(--text-primary); |
| border: 1px solid var(--border-color); |
| box-shadow: none; |
| } |
|
|
| .button-secondary:hover:not(:disabled) { |
| background: var(--surface-emphasis); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .current-selection { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius-md); |
| background: var(--accent-soft); |
| border: 1px solid var(--border-strong); |
| font-size: 0.875rem; |
| } |
|
|
| .current-selection-label { |
| font-weight: 600; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| } |
|
|
| .current-selection-value { |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .panel-status { |
| gap: 1rem; |
| } |
|
|
| .status-header { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| align-items: center; |
| gap: 1rem; |
| } |
|
|
| .dataset-info { |
| font-weight: 600; |
| color: var(--text-primary); |
| font-size: 0.875rem; |
| flex: 1; |
| } |
|
|
| .nav-buttons { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0.5rem; |
| min-width: 140px; |
| } |
|
|
| .progress { |
| width: 100%; |
| height: 0.5rem; |
| border-radius: 999px; |
| background: rgba(148, 163, 184, 0.2); |
| overflow: hidden; |
| appearance: none; |
| } |
|
|
| .progress::-webkit-progress-bar { |
| background: transparent; |
| } |
|
|
| .progress::-webkit-progress-value { |
| background: linear-gradient(90deg, var(--accent), var(--accent-strong)); |
| border-radius: 999px; |
| transition: width 0.3s ease; |
| } |
|
|
| .progress::-moz-progress-bar { |
| background: linear-gradient(90deg, var(--accent), var(--accent-strong)); |
| border-radius: 999px; |
| transition: width 0.3s ease; |
| } |
|
|
| .progress.is-empty::-webkit-progress-value, |
| .progress.is-empty::-moz-progress-bar { |
| background: transparent; |
| } |
|
|
| .message { |
| padding: 1rem; |
| border-radius: var(--radius-md); |
| background: var(--info-bg); |
| color: var(--text-primary); |
| font-weight: 500; |
| border: 1px solid var(--info-border); |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| font-size: 0.9rem; |
| line-height: 1.5; |
| } |
|
|
| .message::before { |
| content: "ℹ"; |
| font-weight: 600; |
| font-size: 1rem; |
| color: inherit; |
| background: rgba(148, 163, 184, 0.3); |
| border-radius: 50%; |
| width: 1.5rem; |
| height: 1.5rem; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
|
|
| .message[data-type="error"] { |
| background: var(--error-bg); |
| color: #991b1b; |
| border-color: var(--error-border); |
| } |
|
|
| .message[data-type="success"] { |
| background: var(--success-bg); |
| color: #166534; |
| border-color: var(--success-border); |
| } |
|
|
| .message[data-type="error"]::before { |
| content: "✕"; |
| background: rgba(248, 113, 113, 0.3); |
| } |
|
|
| .message[data-type="success"]::before { |
| content: "✓"; |
| background: rgba(34, 197, 94, 0.3); |
| } |
|
|
| .record-card { |
| background: var(--surface-color); |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-lg); |
| padding: 2rem; |
| display: grid; |
| gap: 1.5rem; |
| } |
|
|
| .record-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 1rem; |
| flex-wrap: wrap; |
| } |
|
|
| .record-title-group { |
| display: grid; |
| gap: 0.5rem; |
| } |
|
|
| .record-subtitle { |
| margin: 0; |
| text-transform: uppercase; |
| font-size: 0.75rem; |
| font-weight: 600; |
| letter-spacing: 0.1em; |
| color: var(--text-muted); |
| } |
|
|
| .question-title { |
| margin: 0; |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| letter-spacing: -0.01em; |
| line-height: 1.3; |
| } |
|
|
| .badge { |
| padding: 0.5rem 1rem; |
| border-radius: 999px; |
| font-size: 0.75rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| background: var(--surface-muted); |
| color: var(--text-muted); |
| border: 1px solid var(--border-color); |
| } |
|
|
| .badge.valid { |
| background: var(--badge-valid-bg); |
| color: var(--badge-valid-text); |
| } |
|
|
| .badge.invalid { |
| background: var(--badge-invalid-bg); |
| color: var(--badge-invalid-text); |
| } |
|
|
| .meta-grid { |
| display: grid; |
| gap: 0.75rem; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| } |
|
|
| .meta-chip { |
| display: grid; |
| gap: 0.375rem; |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-color); |
| background: var(--surface-muted); |
| } |
|
|
| .meta-chip[data-empty="true"] { |
| opacity: 0.72; |
| border-style: dashed; |
| } |
|
|
| .meta-chip[data-empty="true"] .meta-value { |
| color: var(--text-muted); |
| font-style: italic; |
| } |
|
|
| .meta-label { |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--text-muted); |
| } |
|
|
| .meta-value { |
| font-size: 1rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .record-grid { |
| display: grid; |
| gap: 1.25rem; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| } |
|
|
| .block { |
| padding: 1.25rem; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-color); |
| background: var(--surface-muted); |
| display: grid; |
| gap: 0.75rem; |
| } |
|
|
| .block h3 { |
| margin: 0; |
| font-size: 0.875rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-secondary); |
| } |
|
|
| .block--wide { |
| grid-column: 1 / -1; |
| background: var(--accent-soft); |
| border-color: var(--border-strong); |
| } |
|
|
| .text-block { |
| margin: 0; |
| line-height: 1.6; |
| white-space: pre-wrap; |
| } |
|
|
| .text-block.is-empty { |
| color: var(--text-muted); |
| font-style: italic; |
| } |
|
|
| .options-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: grid; |
| gap: 0.75rem; |
| } |
|
|
| .options-list li { |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-color); |
| background: var(--surface-color); |
| box-shadow: var(--shadow-sm); |
| line-height: 1.5; |
| display: flex; |
| gap: 0.5rem; |
| align-items: baseline; |
| color: var(--text-primary); |
| } |
|
|
| .options-list li.is-correct { |
| border-color: var(--success-border); |
| background: var(--success-bg); |
| font-weight: 500; |
| } |
|
|
| .options-list .option-key { |
| font-weight: 600; |
| margin-right: 0.5rem; |
| color: var(--accent-strong); |
| flex-shrink: 0; |
| } |
|
|
| .options-list li .is-empty { |
| color: var(--text-muted); |
| font-style: italic; |
| } |
|
|
| .options-list.is-empty { |
| gap: 0; |
| } |
|
|
| .option-empty-message { |
| justify-content: center; |
| font-style: italic; |
| color: var(--text-muted); |
| background: var(--surface-muted); |
| border-style: dashed; |
| } |
|
|
| .definition-list { |
| margin: 0; |
| display: grid; |
| gap: 0.75rem; |
| } |
|
|
| .definition-list dt { |
| font-weight: 600; |
| font-size: 0.875rem; |
| color: var(--text-primary); |
| } |
|
|
| .definition-list dd { |
| margin: 0 0 0 0; |
| line-height: 1.6; |
| color: var(--text-secondary); |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| @media (max-width: 960px) { |
| .app-shell { |
| flex-direction: column; |
| } |
|
|
| .sidebar { |
| width: 100%; |
| position: static; |
| } |
|
|
| .app-main { |
| padding: 1.5rem; |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| .app-header, |
| .app-footer { |
| padding: 1.5rem; |
| } |
|
|
| .app-header h1 { |
| font-size: 1.5rem; |
| } |
|
|
| .app-main { |
| padding: 1rem; |
| } |
|
|
| .panel { |
| padding: 1.25rem; |
| } |
|
|
| .record-card { |
| padding: 1.5rem; |
| } |
|
|
| .status-header { |
| grid-template-columns: 1fr; |
| gap: 0.75rem; |
| } |
|
|
| .nav-buttons { |
| grid-template-columns: 1fr 1fr; |
| width: 100%; |
| } |
|
|
| .meta-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .record-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .record-subtitle { |
| font-size: 0.7rem; |
| } |
|
|
| .question-title { |
| font-size: 1.25rem; |
| } |
| } |
|
|
