| | :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; |
| | } |
| | } |
| |
|
