| :root { |
| --ink: #18181b; |
| --muted: #5b616b; |
| --line: #d9dde3; |
| --soft: #f6f7f8; |
| --green: #176b4d; |
| --green-soft: #e9f5ef; |
| --amber: #9a5b13; |
| --amber-soft: #fff7e6; |
| --red: #a33a35; |
| --white: #ffffff; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| color: var(--ink); |
| background: var(--white); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| font-size: 15px; |
| line-height: 1.5; |
| letter-spacing: 0; |
| } |
|
|
| button, select { font: inherit; letter-spacing: 0; } |
|
|
| .app-header, |
| .notice, |
| main { |
| width: min(1440px, 100%); |
| margin: 0 auto; |
| } |
|
|
| .app-header { |
| min-height: 104px; |
| padding: 24px 28px 18px; |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 28px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| h1, h2, h3, h4, p { margin-top: 0; } |
| h1 { margin-bottom: 0; font-size: 28px; line-height: 1.15; } |
| h2 { margin-bottom: 0; font-size: 20px; } |
| h3 { margin-bottom: 8px; font-size: 15px; } |
| h4 { margin: 22px 0 6px; font-size: 13px; } |
|
|
| .eyebrow { |
| margin-bottom: 4px; |
| color: var(--green); |
| font-size: 12px; |
| font-weight: 700; |
| text-transform: uppercase; |
| } |
|
|
| .snapshot-meta, |
| .section-stat { |
| margin-bottom: 0; |
| color: var(--muted); |
| font-size: 13px; |
| text-align: right; |
| } |
|
|
| .notice { |
| padding: 10px 28px; |
| color: #75420c; |
| background: var(--amber-soft); |
| border-bottom: 1px solid #efd7ab; |
| font-size: 13px; |
| } |
|
|
| main { padding: 0 28px 56px; } |
|
|
| .filter-band { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; |
| gap: 12px; |
| align-items: end; |
| padding: 18px 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| label { |
| display: grid; |
| gap: 5px; |
| color: #3f454d; |
| font-size: 12px; |
| font-weight: 650; |
| } |
|
|
| select, |
| button { |
| min-height: 38px; |
| border: 1px solid #b9c0c9; |
| border-radius: 5px; |
| background: var(--white); |
| color: var(--ink); |
| } |
|
|
| select { width: 100%; padding: 7px 32px 7px 10px; } |
| button { padding: 7px 14px; cursor: pointer; font-weight: 650; } |
| button:hover { border-color: var(--green); color: var(--green); } |
| button:focus-visible, select:focus-visible { outline: 3px solid #b7ddca; outline-offset: 1px; } |
|
|
| .case-band { |
| padding: 18px 0 4px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .case-select-label { max-width: 900px; } |
|
|
| .metrics { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(130px, 1fr)); |
| gap: 0; |
| margin: 18px 0 0; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .metrics div { padding: 12px 14px; border-right: 1px solid var(--line); } |
| .metrics div:first-child { padding-left: 0; } |
| .metrics div:last-child { border-right: 0; } |
| .metrics dt { color: var(--muted); font-size: 11px; text-transform: uppercase; } |
| .metrics dd { margin: 3px 0 0; font-weight: 700; overflow-wrap: anywhere; } |
|
|
| .tabs { |
| display: flex; |
| gap: 24px; |
| overflow-x: auto; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .tab { |
| min-height: 48px; |
| padding: 0; |
| border: 0; |
| border-bottom: 3px solid transparent; |
| border-radius: 0; |
| background: transparent; |
| white-space: nowrap; |
| } |
| .tab.active { color: var(--green); border-bottom-color: var(--green); } |
|
|
| .panel { padding: 26px 0; } |
| .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; } |
| .rating { margin: 0; color: var(--green); font-weight: 750; } |
|
|
| .review-text { |
| margin: 0; |
| padding: 18px 20px; |
| background: var(--soft); |
| border-left: 4px solid var(--green); |
| font-size: 16px; |
| line-height: 1.65; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
| .review-text.generated { border-left-color: var(--amber); } |
|
|
| .product-grid { |
| display: grid; |
| grid-template-columns: 1.4fr 1fr 1fr; |
| gap: 32px; |
| margin-top: 26px; |
| } |
| .product-grid p, .product-grid li { color: #3f454d; } |
| .product-grid ul { margin: 0; padding-left: 20px; } |
|
|
| .detail-list { display: grid; grid-template-columns: minmax(110px, 0.7fr) 1.3fr; margin: 0; } |
| .detail-list dt, .detail-list dd { padding: 5px 0; border-bottom: 1px solid #eceef1; } |
| .detail-list dt { color: var(--muted); font-size: 12px; } |
| .detail-list dd { margin: 0; overflow-wrap: anywhere; } |
| .detail-list.horizontal { grid-template-columns: repeat(4, auto 1fr); gap: 0 12px; margin-top: 16px; } |
|
|
| .table-scroll { width: 100%; overflow-x: auto; } |
| table { width: 100%; border-collapse: collapse; table-layout: fixed; } |
| th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; } |
| th { color: var(--muted); background: var(--soft); font-size: 11px; text-transform: uppercase; } |
| td { font-size: 13px; } |
|
|
| #history-body td:nth-child(1) { width: 92px; } |
| #history-body td:nth-child(2), #history-body td:nth-child(3) { width: 70px; } |
| #history-body td:nth-child(4) { width: 220px; font-weight: 650; } |
|
|
| .candidate-layout { display: grid; grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.8fr); gap: 30px; } |
| #candidate-select { min-height: 270px; padding: 5px; } |
| #candidate-select option { padding: 8px; } |
| .candidate-detail { min-width: 0; } |
| .candidate-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; } |
| .score { min-width: 64px; color: var(--green); font-size: 22px; text-align: right; } |
| .score.low { color: var(--red); } |
| .score.medium { color: var(--amber); } |
| .candidate-table-wrap { margin-top: 28px; } |
| #candidate-body td:last-child { width: 32%; } |
|
|
| .status-error { color: var(--red); font-weight: 700; } |
| .status-ok { color: var(--green); font-weight: 700; } |
| .empty-state { padding: 50px 0; text-align: center; color: var(--muted); } |
|
|
| @media (max-width: 900px) { |
| .filter-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .metrics div { border-bottom: 1px solid var(--line); } |
| .product-grid { grid-template-columns: 1fr; gap: 20px; } |
| .candidate-layout { grid-template-columns: 1fr; } |
| .detail-list.horizontal { grid-template-columns: minmax(100px, 0.6fr) 1.4fr; } |
| } |
|
|
| @media (max-width: 560px) { |
| .app-header { align-items: start; flex-direction: column; padding: 18px 16px; } |
| .snapshot-meta { text-align: left; } |
| .notice { padding: 10px 16px; } |
| main { padding: 0 16px 40px; } |
| .filter-band { grid-template-columns: 1fr; } |
| .metrics { grid-template-columns: 1fr; } |
| .metrics div, .metrics div:first-child { padding-left: 0; border-right: 0; } |
| .section-heading { align-items: start; flex-direction: column; } |
| .section-stat { text-align: left; } |
| table { min-width: 760px; } |
| } |
|
|
