| :root { |
| --ink: #14181c; |
| --ink-2: #44505a; |
| --ink-3: #7a8792; |
| --paper: #eef1f4; |
| --paper-2: #e2e7ec; |
| --surface: #ffffff; |
| --line: #cfd6dd; |
| --accent: #1b4f46; |
| --accent-2: #27685c; |
| --warn-bg: #f1ebe0; |
| --warn-ink: #6a4f1d; |
| --font-display: "Syne", sans-serif; |
| --font-body: "Manrope", sans-serif; |
| --ease: cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| min-height: 100%; |
| } |
|
|
| body { |
| font-family: var(--font-body); |
| color: var(--ink); |
| background: |
| linear-gradient(180deg, #f5f7f9 0%, var(--paper) 48%, #e5eaef 100%); |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .app-shell { |
| display: grid; |
| grid-template-columns: 220px minmax(0, 1fr); |
| min-height: 100vh; |
| } |
|
|
| .sidebar { |
| position: sticky; |
| top: 0; |
| height: 100vh; |
| padding: 28px 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 28px; |
| background: var(--surface); |
| border-right: 1px solid var(--line); |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .brand-mark { |
| width: 36px; |
| height: 36px; |
| display: grid; |
| place-items: center; |
| background: var(--accent); |
| color: #fff; |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 0.78rem; |
| flex-shrink: 0; |
| } |
|
|
| .brand-name { |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 0.98rem; |
| letter-spacing: -0.02em; |
| line-height: 1.15; |
| } |
|
|
| .brand-sub { |
| font-size: 0.72rem; |
| color: var(--ink-3); |
| margin-top: 2px; |
| } |
|
|
| .nav { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .nav-item { |
| border: 0; |
| background: transparent; |
| color: var(--ink-3); |
| font: 600 0.9rem/1.2 var(--font-body); |
| padding: 11px 12px; |
| text-align: left; |
| cursor: pointer; |
| } |
|
|
| .nav-item:hover { |
| color: var(--ink); |
| background: var(--paper); |
| } |
|
|
| .nav-item.active { |
| color: var(--accent); |
| background: rgba(27, 79, 70, 0.08); |
| } |
|
|
| .sidebar-foot { |
| margin-top: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .side-note { |
| margin: 0; |
| font-size: 0.75rem; |
| color: var(--ink-3); |
| line-height: 1.4; |
| } |
|
|
| .top-status { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 0.75rem; |
| color: var(--ink-3); |
| } |
|
|
| .dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: var(--ink-3); |
| } |
|
|
| .dot.ok { |
| background: var(--accent); |
| } |
|
|
| .dot.err { |
| background: #8b2e2e; |
| } |
|
|
| .content { |
| padding: 24px 28px 48px; |
| max-width: none; |
| width: 100%; |
| min-width: 0; |
| } |
|
|
| .workspace { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 300px; |
| gap: 16px; |
| align-items: stretch; |
| width: 100%; |
| } |
|
|
| .view { |
| animation: enter 0.3s var(--ease) both; |
| } |
|
|
| .intro { |
| margin-bottom: 22px; |
| max-width: 40rem; |
| } |
|
|
| .intro.compact h1 { |
| font-size: clamp(1.45rem, 2.4vw, 1.85rem); |
| } |
|
|
| .intro h1 { |
| margin: 0 0 8px; |
| font-family: var(--font-display); |
| font-size: clamp(1.7rem, 3vw, 2.2rem); |
| font-weight: 700; |
| letter-spacing: -0.03em; |
| line-height: 1.12; |
| } |
|
|
| .intro p { |
| margin: 0; |
| color: var(--ink-2); |
| font-size: 0.98rem; |
| line-height: 1.5; |
| } |
|
|
| .chat-stage { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| min-height: 520px; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 22px; |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| max-height: 56vh; |
| } |
|
|
| .message { |
| display: flex; |
| } |
|
|
| .message.user { |
| justify-content: flex-end; |
| } |
|
|
| .bubble { |
| max-width: 82%; |
| padding: 11px 13px; |
| font-size: 0.93rem; |
| line-height: 1.55; |
| white-space: pre-wrap; |
| } |
|
|
| .message.assistant .bubble { |
| background: var(--paper-2); |
| } |
|
|
| .message.user .bubble { |
| background: var(--accent); |
| color: #fff; |
| } |
|
|
| .message.assistant.refusal .bubble { |
| background: var(--warn-bg); |
| color: var(--warn-ink); |
| } |
|
|
| .message.assistant.thinking .bubble { |
| color: var(--ink-3); |
| font-style: italic; |
| } |
|
|
| .prompt-row { |
| border-top: 1px solid var(--line); |
| padding: 12px 14px 14px; |
| background: #f7f9fb; |
| } |
|
|
| .suggestions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| margin-bottom: 10px; |
| } |
|
|
| .suggestion { |
| border: 1px solid var(--line); |
| background: var(--surface); |
| color: var(--ink-2); |
| font: 500 0.76rem/1.2 var(--font-body); |
| padding: 6px 9px; |
| cursor: pointer; |
| } |
|
|
| .suggestion:hover { |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
|
|
| .composer { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .composer input { |
| flex: 1; |
| border: 1px solid var(--line); |
| background: var(--surface); |
| padding: 11px 12px; |
| font: 0.93rem/1.3 var(--font-body); |
| color: var(--ink); |
| outline: none; |
| } |
|
|
| .composer input:focus { |
| border-color: var(--accent); |
| } |
|
|
| .composer button { |
| border: 0; |
| background: var(--accent); |
| color: #fff; |
| font: 600 0.88rem/1 var(--font-body); |
| padding: 0 16px; |
| cursor: pointer; |
| } |
|
|
| .composer button:hover { |
| background: var(--accent-2); |
| } |
|
|
| .composer button:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| |
| .insight-panel { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| padding: 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| min-height: 520px; |
| } |
|
|
| .insight-head h2 { |
| margin: 0 0 4px; |
| font-family: var(--font-display); |
| font-size: 1.05rem; |
| font-weight: 700; |
| } |
|
|
| .insight-block { |
| padding-top: 12px; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .insight-block:first-of-type { |
| border-top: 0; |
| padding-top: 0; |
| } |
|
|
| .insight-label { |
| font-size: 0.68rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--ink-3); |
| margin-bottom: 8px; |
| } |
|
|
| .decision { |
| margin: 0; |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 1.05rem; |
| } |
|
|
| .decision.CORRECT { |
| color: var(--accent); |
| } |
|
|
| .decision.AMBIGUOUS { |
| color: var(--warn-ink); |
| } |
|
|
| .decision.INCORRECT { |
| color: #8b2e2e; |
| } |
|
|
| .muted { |
| color: var(--ink-3); |
| font-size: 0.84rem; |
| } |
|
|
| .muted.small, |
| .small { |
| font-size: 0.78rem; |
| line-height: 1.4; |
| } |
|
|
| .plain-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 5px; |
| font-size: 0.82rem; |
| } |
|
|
| .plain-list.numbered { |
| list-style: decimal; |
| padding-left: 1.1rem; |
| } |
|
|
| .signals { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .signals li { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| font-size: 0.82rem; |
| padding: 6px 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .signals span { |
| color: var(--ink-3); |
| } |
|
|
| .grades { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .grade-row { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 3px 10px; |
| padding: 8px 0 0; |
| border-top: 1px solid var(--line); |
| font-size: 0.78rem; |
| } |
|
|
| .grade-row:first-child { |
| border-top: 0; |
| padding-top: 0; |
| } |
|
|
| .grade-doc { |
| font-weight: 600; |
| } |
|
|
| .grade-score { |
| color: var(--accent); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .grade-meta { |
| grid-column: 1 / -1; |
| color: var(--ink-3); |
| } |
|
|
| |
| .meta-line { |
| display: flex; |
| gap: 16px; |
| flex-wrap: wrap; |
| color: var(--ink-3); |
| font-size: 0.84rem; |
| margin-bottom: 8px; |
| } |
|
|
| .section-title { |
| margin: 22px 0 12px; |
| font-family: var(--font-display); |
| font-size: 1.05rem; |
| font-weight: 700; |
| } |
|
|
| .score-row { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .score-row-tight { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .metrics-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); |
| gap: 20px; |
| align-items: start; |
| } |
|
|
| .metrics-overview { |
| position: sticky; |
| top: 16px; |
| } |
|
|
| .metrics-overview .section-title { |
| margin-top: 0; |
| } |
|
|
| .step-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .step-list li { |
| display: grid; |
| grid-template-columns: 22px 1fr; |
| gap: 8px; |
| align-items: start; |
| font-size: 0.8rem; |
| line-height: 1.4; |
| color: var(--ink-2); |
| } |
|
|
| .step-idx { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: rgba(27, 79, 70, 0.12); |
| color: var(--accent); |
| font-size: 0.7rem; |
| font-weight: 700; |
| display: grid; |
| place-items: center; |
| flex-shrink: 0; |
| } |
|
|
| .step-text { |
| min-width: 0; |
| word-break: break-word; |
| } |
|
|
| |
| .arch-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); |
| gap: 24px; |
| align-items: start; |
| } |
|
|
| .arch-explain { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| padding: 18px 16px; |
| position: sticky; |
| top: 16px; |
| } |
|
|
| .arch-explain > h2 { |
| margin: 0 0 14px; |
| font-family: var(--font-display); |
| font-size: 1.1rem; |
| font-weight: 700; |
| } |
|
|
| .explain-card { |
| padding: 12px 0; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .explain-card:first-of-type { |
| border-top: 0; |
| padding-top: 0; |
| } |
|
|
| .explain-card h3 { |
| margin: 0 0 6px; |
| font-size: 0.88rem; |
| font-weight: 700; |
| color: var(--ink); |
| } |
|
|
| .explain-card p { |
| margin: 0; |
| font-size: 0.84rem; |
| line-height: 1.5; |
| color: var(--ink-2); |
| } |
|
|
| .explain-card.explain-correct h3 { |
| color: var(--accent); |
| } |
|
|
| .explain-card.explain-ambiguous h3 { |
| color: var(--warn-ink); |
| } |
|
|
| .explain-card.explain-incorrect h3 { |
| color: #8b2e2e; |
| } |
|
|
| .arch-flow { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0; |
| width: 100%; |
| } |
|
|
| .arch-node { |
| width: min(100%, 100%); |
| background: var(--surface); |
| border: 1px solid var(--line); |
| padding: 14px 16px; |
| text-align: center; |
| } |
|
|
| .arch-kicker { |
| font-size: 0.7rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| color: var(--accent); |
| margin-bottom: 4px; |
| } |
|
|
| .arch-title { |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 1rem; |
| } |
|
|
| .arch-note { |
| margin-top: 4px; |
| font-size: 0.8rem; |
| color: var(--ink-3); |
| } |
|
|
| .arch-arrow { |
| width: 2px; |
| height: 28px; |
| background: var(--line); |
| position: relative; |
| margin: 4px 0; |
| } |
|
|
| .arch-arrow span, |
| .arch-mini-arrow span { |
| position: absolute; |
| left: 50%; |
| width: 8px; |
| height: 8px; |
| border-right: 2px solid var(--accent); |
| border-bottom: 2px solid var(--accent); |
| transform: translateX(-50%) rotate(45deg); |
| animation: arrow-pulse 1.4s ease-in-out infinite; |
| } |
|
|
| .arch-arrow span { |
| bottom: -2px; |
| } |
|
|
| .arch-mini-arrow { |
| width: 2px; |
| height: 18px; |
| background: var(--line); |
| position: relative; |
| margin: 6px auto; |
| } |
|
|
| .arch-mini-arrow span { |
| bottom: -2px; |
| } |
|
|
| .arch-branches { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| width: 100%; |
| margin-top: 8px; |
| } |
|
|
| .arch-branch { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| padding: 14px 12px; |
| text-align: center; |
| font-size: 0.82rem; |
| color: var(--ink-2); |
| line-height: 1.4; |
| } |
|
|
| .arch-branch p { |
| margin: 0; |
| } |
|
|
| .arch-branch-label { |
| font-weight: 800; |
| font-size: 0.75rem; |
| letter-spacing: 0.06em; |
| margin-bottom: 8px; |
| } |
|
|
| .arch-branch.correct { |
| border-color: rgba(27, 79, 70, 0.35); |
| background: rgba(27, 79, 70, 0.06); |
| } |
|
|
| .arch-branch.correct .arch-branch-label { |
| color: var(--accent); |
| } |
|
|
| .arch-branch.ambiguous { |
| border-color: rgba(106, 79, 29, 0.35); |
| background: rgba(241, 235, 224, 0.7); |
| } |
|
|
| .arch-branch.ambiguous .arch-branch-label { |
| color: var(--warn-ink); |
| } |
|
|
| .arch-branch.incorrect { |
| border-color: rgba(139, 46, 46, 0.3); |
| background: rgba(139, 46, 46, 0.06); |
| } |
|
|
| .arch-branch.incorrect .arch-branch-label { |
| color: #8b2e2e; |
| } |
|
|
| @keyframes arrow-pulse { |
| 0%, |
| 100% { |
| opacity: 0.35; |
| transform: translateX(-50%) translateY(0) rotate(45deg); |
| } |
| 50% { |
| opacity: 1; |
| transform: translateX(-50%) translateY(3px) rotate(45deg); |
| } |
| } |
|
|
| .score-card { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| padding: 16px; |
| } |
|
|
| .score-card .label { |
| font-size: 0.7rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--ink-3); |
| margin-bottom: 8px; |
| } |
|
|
| .score-card .value { |
| font-family: var(--font-display); |
| font-size: 1.65rem; |
| font-weight: 700; |
| letter-spacing: -0.03em; |
| } |
|
|
| .score-card .delta { |
| margin-top: 8px; |
| font-size: 0.8rem; |
| color: var(--ink-2); |
| } |
|
|
| .result-table-wrap { |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| background: var(--surface); |
| margin-bottom: 20px; |
| } |
|
|
| .result-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 0.88rem; |
| } |
|
|
| .result-table th, |
| .result-table td { |
| padding: 13px 14px; |
| text-align: left; |
| border-bottom: 1px solid var(--line); |
| color: var(--ink); |
| } |
|
|
| .result-table th { |
| font-size: 0.72rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--ink-2); |
| background: #f4f7f9; |
| } |
|
|
| .result-table td.num { |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| color: var(--ink-2); |
| } |
|
|
| .result-table td.num.strong { |
| color: var(--ink); |
| font-weight: 700; |
| } |
|
|
| .result-table td.delta-up { |
| color: var(--accent); |
| font-weight: 700; |
| } |
|
|
| .result-table td.delta-down { |
| color: #8b2e2e; |
| font-weight: 700; |
| } |
|
|
| .footnote { |
| margin-top: 18px; |
| font-size: 0.82rem; |
| color: var(--ink-2); |
| } |
|
|
| .empty-panel { |
| border: 1px dashed var(--line); |
| padding: 40px 20px; |
| text-align: center; |
| background: var(--surface); |
| } |
|
|
| .flow { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .flow li { |
| display: grid; |
| grid-template-columns: 56px 1fr; |
| gap: 14px; |
| padding: 20px 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .flow-num { |
| font-family: var(--font-display); |
| font-weight: 700; |
| font-size: 1.05rem; |
| color: var(--accent); |
| } |
|
|
| .flow h2 { |
| margin: 0 0 5px; |
| font-family: var(--font-display); |
| font-size: 1.1rem; |
| } |
|
|
| .flow p { |
| margin: 0; |
| color: var(--ink-2); |
| line-height: 1.5; |
| } |
|
|
| .closing-note { |
| margin-top: 24px; |
| color: var(--ink-3); |
| font-size: 0.88rem; |
| } |
|
|
| @keyframes enter { |
| from { |
| opacity: 0; |
| transform: translateY(6px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @media (max-width: 980px) { |
| .workspace, |
| .metrics-layout, |
| .arch-layout, |
| .arch-branches { |
| grid-template-columns: 1fr; |
| } |
|
|
| .metrics-overview, |
| .arch-explain { |
| position: static; |
| } |
|
|
| .insight-panel { |
| min-height: 0; |
| } |
| } |
|
|
| @media (max-width: 820px) { |
| .app-shell { |
| grid-template-columns: 1fr; |
| } |
|
|
| .sidebar { |
| position: static; |
| height: auto; |
| border-right: 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .nav { |
| flex-direction: row; |
| flex-wrap: wrap; |
| } |
|
|
| .content { |
| padding: 20px 16px 40px; |
| } |
|
|
| .score-row { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
