@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f7f8fb;
  --canvas: #f1f4f7;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-3: #f1f5f7;
  --ink: #151922;
  --text: #303846;
  --muted: #697586;
  --faint: #9aa6b2;
  --line: #e4e8ee;
  --line-strong: #c7d2dc;
  --brand: #151922;
  --brand-2: #0b0f16;
  --brand-soft: #eceff3;
  --nav: #ffffff;
  --nav-muted: #7d8a99;
  --green: #0e7c59;
  --amber: #a96700;
  --red: #b42318;
  --blue: #2563eb;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 18px 48px rgba(16,24,40,.10);
  --content: 1320px;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { font-family: var(--font-sans); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 276px minmax(0, 1fr); background: var(--bg); }
.app-sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; background: var(--nav); color: #f7fafc; display: flex; flex-direction: column; gap: 18px; }
.brand-block { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 2px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-block--link { color: inherit; text-decoration: none; }
.brand-logo { width: 104px; max-height: 30px; object-fit: contain; display: block; flex: 0 0 auto; }
.brand-meta { min-width: 0; display: grid; gap: 2px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: #f8ffff; color: var(--brand-2); display: grid; place-items: center; font-size: 12px; font-weight: 620; }
.brand-block strong { display: block; font-size: 16px; line-height: 1.1; font-weight: 650; }
.brand-script {
  margin-top: 1px;
  font-family: var(--font-sans);
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -0.02em;
  line-height: 1 !important;
  white-space: nowrap;
  color: var(--ink);
}
.brand-block span { display: block; color: var(--nav-muted); font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.primary-create { height: 42px; border-radius: 8px; background: #f7ffff; color: var(--brand-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 13px; font-weight: 650; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.primary-create svg { width: 17px; height: 17px; }
.side-nav { display: grid; gap: 5px; }
.side-nav__label { margin: 13px 10px 5px; color: var(--nav-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; }
.side-nav__link { min-height: 40px; padding: 0 11px; border-radius: 8px; display: flex; align-items: center; gap: 10px; color: #c9d3dc; text-decoration: none; font-size: 14px; font-weight: 560; }
.side-nav__link svg { width: 17px; height: 17px; color: #9fb0bc; }
.side-nav__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-nav__link.is-active { background: rgba(255,255,255,.12); color: #fff; }
.side-nav__link.is-active svg { color: #7ee3df; }
.sidebar-note { margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.055); }
.sidebar-note span { display: block; color: #9fb0bc; font-size: 11px; font-weight: 650; text-transform: uppercase; }
.sidebar-note strong { display: block; margin-top: 6px; color: #f8fafc; font-size: 13px; line-height: 1.45; font-weight: 560; }
.app-frame { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; height: 66px; padding: 0 30px; border-bottom: 1px solid rgba(223,230,236,.9); background: rgba(244,246,248,.9); backdrop-filter: blur(16px); display: grid; grid-template-columns: 220px minmax(260px, 520px) auto; align-items: center; gap: 18px; }
.topbar__title { display: flex; align-items: center; min-height: 40px; }
.topbar__title span { color: var(--muted); font-size: 12px; font-weight: 560; }
.topbar__title strong { color: var(--ink); font-size: 15px; font-weight: 650; }
.global-search { position: relative; }
.global-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); }
.global-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.86); outline: none; color: var(--text); }
.global-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21,25,34,.10); }
.topbar__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.locale-toggle { padding: 2px; border-radius: 8px; background: #e8eef2; display: inline-flex; }
.locale-toggle a { height: 28px; min-width: 32px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-decoration: none; font-weight: 650; }
.locale-toggle a.is-active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.user-menu { position: relative; }
.user-menu__button { height: 38px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-weight: 560; }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--nav); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 620; }
.user-menu__button svg { width: 14px; height: 14px; }
.user-menu__content { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); color: var(--text); }
.user-menu__meta { padding: 9px 10px 11px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.user-menu__meta strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.user-menu__meta span { color: var(--muted); font-size: 12px; }
.user-menu__item, .user-menu__danger { min-height: 36px; width: 100%; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; text-decoration: none; font-size: 13px; }
.user-menu__danger { color: var(--red); }
.app-content { width: min(var(--content), calc(100vw - 276px - 56px)); margin: 0 auto; padding: 28px 0 64px; }
.toast { margin: 16px 30px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13px; }

.page-stack { display: grid; gap: 18px; }
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.eyebrow a { text-decoration: none; }
.page-head h1 { margin: 7px 0 0; color: var(--ink); font-size: 30px; line-height: 1.16; font-weight: 650; }
.page-head p { margin: 8px 0 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.editable-page-title { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.editable-page-title h1 { margin: 0; }
.editable-page-title input { width: min(560px, 70vw); height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; color: var(--ink); font: inherit; font-size: 28px; font-weight: 650; outline: none; background: var(--surface); }
.editable-page-title input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.title-edit-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.title-edit-button:hover { color: var(--brand); border-color: var(--line-strong); background: var(--surface-2); }
.title-edit-button svg { width: 16px; height: 16px; }
.ui-button, .button { height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-sm); }
.ui-button--primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.ui-button--ghost { background: #fff; color: var(--text); }
.ui-button--danger { color: var(--red); border-color: #fecaca; }
.ui-button--danger:hover { background: #fff5f4; border-color: #fca5a5; }
.ui-button--excel { border-color: #107c41; background: #107c41; color: #fff; }
.ui-button--excel:hover { border-color: #0b5f32; background: #0b5f32; }
.ui-button--excel svg { width: 16px; height: 16px; }
.ui-button.is-disabled { opacity: .45; pointer-events: none; }

.insight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.insight-card, .panel-card, .lab-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.insight-card { min-height: 112px; padding: 16px; display: grid; align-content: space-between; }
.insight-card span { color: var(--muted); font-size: 12px; font-weight: 650; }
.insight-card strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 25px; line-height: 1; font-weight: 650; }
.insight-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.panel-card, .lab-panel { overflow: hidden; }
.panel-card__header, .lab-panel__head { min-height: 62px; padding: 15px 18px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, #fbfcfd); }
.panel-card__header h2, .lab-panel__head h2 { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.3; font-weight: 650; }
.panel-card__header p, .lab-panel__head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.panel-card__header--split, .lab-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); gap: 14px; align-items: start; }
.dense-list { display: grid; }
.dense-item { min-height: 68px; padding: 13px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; text-decoration: none; }
.dense-item:last-child { border-bottom: 0; }
.dense-item strong { color: var(--ink); font-size: 14px; font-weight: 650; }
.dense-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill, .tag { min-height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; white-space: nowrap; }
.is-complete { background: #e6f5ee; color: var(--green); }
.is-processing { background: #fff4dd; color: var(--amber); }
.is-failed { background: #fff0ed; color: var(--red); }
.is-waiting { background: #edf2f6; color: #596674; }
.muted { color: var(--muted); font-size: 12px; }

.data-table-wrap, .comparison-table-wrap, .summary-table-wrap { overflow-x: auto; }
.data-table, .comparison-table, .result-matrix table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; }
.data-table { min-width: 980px; }
.comparison-table, .result-matrix table { min-width: 960px; }
.comparison-table--analysis-rows { min-width: 1320px; }
.data-table--comparison-list { min-width: 760px; }
.data-table th, .comparison-table th, .result-matrix th { height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #f8fafb; color: #667085; text-align: left; font-size: 11px; font-weight: 650; white-space: nowrap; vertical-align: middle; }
.data-table td, .comparison-table td, .result-matrix td { height: 54px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: #465464; vertical-align: middle; }
.data-table th:first-child, .comparison-table th:first-child, .result-matrix th:first-child,
.data-table td:first-child, .comparison-table td:first-child, .result-matrix td:first-child { padding-left: 20px; }
.data-table th:last-child, .comparison-table th:last-child, .result-matrix th:last-child,
.data-table td:last-child, .comparison-table td:last-child, .result-matrix td:last-child { padding-right: 20px; }
.data-table tbody tr:hover td, .comparison-table tbody tr:hover td { background: #fbfcfe; }
.data-table tr:last-child td, .comparison-table tr:last-child td, .result-matrix tr:last-child td { border-bottom: 0; }
.data-table__primary { color: var(--ink); font-weight: 650; text-decoration: none; }
.data-table td p, .comparison-table td p { margin: 3px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; line-height: 1.35; }
.is-number, .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.is-number, .data-table th.is-right,
.comparison-table th.is-number, .comparison-table th.is-right,
.result-matrix th.is-number, .result-matrix th.is-right { text-align: right; }
.metric-cell { display: inline-grid; justify-items: end; gap: 2px; min-width: 0; }
.metric-cell strong { color: var(--ink); font-weight: 620; line-height: 1.1; }
.metric-cell span { color: var(--muted); font-size: 11px; line-height: 1.1; }
.text-cell { display: grid; min-width: 0; }
.text-cell .data-table__primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-cell p .status-pill { margin-right: 6px; vertical-align: middle; }
.text-cell p span:not(.status-pill) { vertical-align: middle; }
.cell-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ratio-cell { display: grid; gap: 3px; justify-items: end; min-width: 0; }
.ratio-cell strong { color: var(--ink); font-size: 12px; font-weight: 620; line-height: 1.1; }
.ratio-cell em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.1; white-space: nowrap; }
.ratio-cell small { color: var(--faint); font-size: 10px; font-weight: 560; line-height: 1.1; white-space: nowrap; }
.ratio-cell i { width: min(54px, 100%); height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) var(--ratio), #e7edf2 var(--ratio)); }
.table-meta { padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 560; }
.pagination-bar { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pagination-bar > span:not(.ui-button) { color: var(--muted); font-size: 13px; font-weight: 650; }

.filter-bar { padding: 14px; display: grid; grid-template-columns: minmax(260px, 1fr) 180px 240px auto; gap: 10px; border-bottom: 1px solid var(--line); background: #fff; }
.filter-bar input, .filter-bar select, .run-form input, .run-form textarea, .run-form select, .auth-field input { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); outline: none; }
.filter-bar input, .filter-bar select { height: 38px; padding: 0 12px; }
.filter-bar input:focus, .filter-bar select:focus, .run-form input:focus, .run-form textarea:focus, .run-form select:focus, .auth-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21,25,34,.10); }
.empty-state { margin: 14px; padding: 26px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; background: var(--surface-2); }
.empty-state.compact { margin: 0; padding: 20px 14px; }

.analysis-group-grid { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.analysis-group-card { min-height: 118px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; align-content: space-between; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.analysis-group-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.analysis-group-card strong { color: var(--ink); font-size: 14px; font-weight: 650; }
.analysis-group-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.group-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 12px; }
.group-card-footer em { color: var(--brand); font-style: normal; font-weight: 650; }
.readiness-chip { min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; }

.class-name { white-space: nowrap; }
.class-name i, .class-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-right: 8px; }
.class-name strong { display: inline !important; margin-right: 6px; color: var(--ink); }
.class-name span { display: inline !important; color: var(--muted); font-size: 12px; }
.result-matrix table { min-width: 960px; }
.result-matrix td strong, .comparison-table td strong { color: var(--ink); }
.comparison-table td em { display: block; color: var(--muted); font-size: 12px; font-style: normal; }
.process-notice { padding: 14px 16px; border: 1px solid #f1d59d; border-radius: 12px; background: #fffaf0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.process-notice div { display: grid; gap: 2px; }
.process-notice strong { color: var(--ink); }
.process-notice span { color: var(--muted); font-size: 12px; }
.process-notice span span { display: block; }
.process-notice i { height: 8px; min-width: 180px; border-radius: 999px; background: #f3e3bd; overflow: hidden; }
.process-notice b { display: block; height: 100%; background: var(--amber); }
.process-notice--danger { border-color: #fecaca; background: #fff5f4; }

.basis-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.basis-grid > div { min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); display: grid; align-content: space-between; gap: 8px; }
.basis-grid span { color: var(--muted); font-size: 12px; font-weight: 650; }
.basis-grid strong { color: var(--ink); font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.management-grid { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.management-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.management-form label { display: grid; gap: 6px; }
.management-form span { color: var(--muted); font-size: 12px; font-weight: 650; }
.management-form input, .management-form textarea, .management-form select { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; outline: none; }
.management-form textarea { resize: vertical; }
.management-danger { padding: 12px; border: 1px solid #fee4e2; border-radius: 10px; background: #fff8f7; display: grid; gap: 8px; }
.management-danger strong { color: var(--red); font-size: 13px; }
.management-danger p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.project-delete-row { display: flex; justify-content: flex-end; }
.analysis-title-editor { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.analysis-title-editor h1 { margin: 0; }
.analysis-title-input { width: min(620px, 72vw); height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; color: var(--ink); font: inherit; font-size: 28px; font-weight: 650; outline: none; background: var(--surface); }
.analysis-title-input:focus, .analysis-memo-input:focus, .analysis-project-form select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.analysis-memo-editor { margin-top: 8px; display: grid; gap: 8px; justify-items: start; }
.analysis-memo-editor p { margin: 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.memo-edit-button { height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.memo-edit-button:hover { color: var(--brand); border-color: var(--line-strong); background: var(--surface-2); }
.analysis-memo-input { width: min(720px, 72vw); min-height: 82px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; outline: none; background: var(--surface); }
.inline-edit-actions { display: inline-flex; align-items: center; gap: 6px; }
.inline-error { margin: 6px 0 0; color: var(--red); font-size: 12px; }
.analysis-project-form { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; max-width: 100%; }
.analysis-project-form span { color: var(--muted); font-size: 12px; font-weight: 650; }
.analysis-project-form select { height: 34px; min-width: 210px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--text); outline: none; }
.analysis-project-form .ui-button { flex: 0 0 auto; height: 38px; }

.run-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.run-setup { position: sticky; top: 86px; }
.run-setup.panel-card { overflow: visible; }
.run-upload-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.run-form { padding: 16px; display: grid; gap: 14px; }
.run-form label { display: grid; gap: 7px; min-width: 0; }
.run-form span { color: var(--muted); font-size: 12px; font-weight: 650; }
.run-form input, .run-form textarea, .run-form select { padding: 10px; }
.run-form .custom-select__menu { z-index: 120; }
.run-form input[readonly] { background: var(--surface-2); color: var(--muted); }
.form-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1.45; }
.run-drop { margin: 16px; min-height: 278px; border: 1px dashed var(--line-strong); border-radius: 12px; background: linear-gradient(180deg, #fbfcfd, #eff8f7); display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 28px; }
.run-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.run-drop strong { color: var(--ink); font-size: 17px; font-weight: 650; }
.run-drop span { max-width: 520px; color: var(--muted); font-size: 13px; }
.run-contact-sheet { padding: 0 16px 16px; min-height: 260px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.run-thumb { position: relative; height: 148px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; grid-template-rows: 1fr auto; gap: 5px; text-align: left; }
.run-thumb img { width: 100%; height: 92px; border-radius: 8px; object-fit: cover; background: #111827; }
.run-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.run-thumb button { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.92); color: #475467; font-weight: 650; cursor: pointer; }
.project-analysis-card { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; gap: 10px; }
.project-analysis-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.project-analysis-card__head label { display: grid; gap: 6px; }
.project-analysis-card__head span { color: var(--muted); font-size: 12px; font-weight: 650; }
.project-analysis-card__head input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; }
.project-analysis-card__head strong { min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; white-space: nowrap; }
.project-analysis-card__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-items: stretch; }
.project-analysis-thumb { position: relative; min-width: 0; height: 104px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); display: grid; grid-template-rows: 1fr auto; gap: 4px; }
.project-analysis-thumb img { width: 100%; height: 58px; border-radius: 6px; object-fit: cover; background: #111827; }
.project-analysis-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11px; }
.project-analysis-thumb button { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.92); color: #475467; font-weight: 650; cursor: pointer; }
.project-analysis-card__thumbs em { min-height: 104px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); display: grid; place-items: center; font-size: 12px; font-style: normal; }
.run-page[data-analysis-run-mode-value="project"] .run-contact-sheet { grid-template-columns: 1fr; }
.run-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(16,24,40,.46); backdrop-filter: blur(4px); display: grid; place-items: center; }
.run-overlay > div { width: min(380px, calc(100vw - 32px)); padding: 20px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); display: grid; gap: 10px; }
.run-overlay i { height: 8px; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.run-overlay b { display: block; height: 100%; background: var(--brand); }

.evidence-board { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "stage side" "sheet sheet"; gap: 14px; }
.evidence-board__stage { grid-area: stage; position: relative; min-height: 560px; aspect-ratio: 16 / 10; border-radius: 12px; background: #0d1218; overflow: hidden; }
.evidence-board__zoom-toolbar { position: absolute; top: 14px; right: 14px; z-index: 12; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #2d333b; }
.evidence-board__zoom-button { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: #4a5058; color: #f8fafc; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.evidence-board__zoom-button--reset { font-size: 12px; font-weight: 650; }
.evidence-board__zoom-scale { min-width: 52px; color: #f8fafc; font-size: 12px; font-weight: 650; text-align: center; }
.evidence-board__viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.evidence-board__media { position: absolute; inset: 0; }
.evidence-board__compare-window { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.evidence-board__compare-media { position: absolute; inset: 0; }
.evidence-board__compare-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.7) contrast(1.05); opacity: 0.96; pointer-events: none; }
.evidence-board__compare-handle { position: absolute; top: 0; bottom: 0; width: 0; transform: translateX(-50%); border: 0; background: none; cursor: ew-resize; z-index: 12; touch-action: none; }
.evidence-board__compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(17,24,39,.25); }
.evidence-board__compare-handle span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(13,18,24,.78); box-shadow: 0 10px 24px rgba(15,23,42,.28); }
.evidence-board__compare-handle span::before, .evidence-board__compare-handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.evidence-board__compare-handle span::before { left: 10px; transform: translateY(-50%) rotate(-135deg); }
.evidence-board__compare-handle span::after { right: 10px; transform: translateY(-50%) rotate(45deg); }
.evidence-board__stage img, .evidence-board__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.evidence-board__stage canvas { right: auto; bottom: auto; pointer-events: none; }
.evidence-board__side { grid-area: side; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 13px; display: grid; align-content: start; gap: 12px; }
.evidence-selected { display: grid; gap: 4px; }
.evidence-selected span { color: var(--muted); font-size: 12px; font-weight: 650; }
.evidence-selected strong { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-compare-note { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; gap: 4px; }
.evidence-compare-note strong { color: var(--ink); font-size: 13px; font-weight: 700; }
.evidence-compare-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.evidence-counts { display: grid; gap: 7px; }
.evidence-count-row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; grid-template-columns: 16px 9px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 12px; cursor: pointer; }
.evidence-count-row--all { grid-template-columns: 16px minmax(0, 1fr) auto auto; background: #f8fafc; border-color: #d8e1ea; }
.evidence-count-row__all { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, #4b5563, #94a3b8); }
.evidence-count-row input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); }
.evidence-count-row i { width: 9px; height: 9px; border-radius: 999px; }
.evidence-count-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-count-row strong { min-width: 26px; text-align: right; color: var(--ink); }
.evidence-count-row em { color: var(--muted); font-style: normal; }
.evidence-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evidence-nav button { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 650; cursor: pointer; }
.evidence-contact-sheet { grid-area: sheet; display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; }
.evidence-contact-sheet button { height: 128px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; grid-template-rows: 1fr auto; gap: 6px; text-align: left; cursor: pointer; }
.evidence-contact-sheet button.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.evidence-contact-sheet img { width: 100%; height: 84px; border-radius: 8px; object-fit: cover; background: #111827; }
.evidence-contact-sheet span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-count { color: var(--muted); font-size: 12px; }

td.admin-actions { display: table-cell; text-align: right; white-space: nowrap; }
td.admin-actions form { display: inline-block; margin: 0 0 0 6px; vertical-align: middle; }
.admin-actions { justify-content: flex-end; align-items: center; gap: 8px; }
.admin-table td strong { color: var(--ink); }
.admin-panel--attention { border-color: #f4c970; }

.work-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px; }
.work-modal.is-open { display: flex; }
.work-modal__backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.48); backdrop-filter: blur(5px); }
.work-modal__panel { position: relative; width: min(720px, 100%); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.work-modal__header { padding: 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.modal-kicker { color: var(--brand); font-size: 11px; font-weight: 620; text-transform: uppercase; }
.work-modal__header h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; font-weight: 650; }
.work-modal__header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.work-modal__close { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); text-decoration: none; font-size: 20px; }
.work-modal__options { padding: 16px; display: grid; gap: 12px; }
.work-option { min-height: 102px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; text-decoration: none; }
.work-option:hover { border-color: var(--brand); background: #fbffff; }
.work-option__icon { width: 52px; height: 44px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 620; }
.work-option strong { display: block; color: var(--ink); font-size: 15px; font-weight: 650; }
.work-option em { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; font-style: normal; }

.guest-shell { min-height: 100vh; background: var(--bg); display: grid; grid-template-rows: auto 1fr; }
.guest-header { height: 72px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: space-between; }
.guest-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; }
.guest-brand img { width: 128px; max-height: 42px; object-fit: contain; display: block; }
.guest-header nav { display: inline-flex; gap: 8px; }
.guest-header nav a { height: 36px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; color: #475467; text-decoration: none; font-size: 13px; font-weight: 650; }
.guest-header .guest-cta { background: var(--brand); color: #fff; }
.guest-content { display: grid; align-content: start; }
.auth-shell { min-height: calc(100vh - 72px); padding: 48px 20px; display: grid; place-items: center; }
.auth-card { width: min(420px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.auth-card__head { margin-bottom: 22px; text-align: center; }
.auth-card__icon { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 620; }
.auth-card h1 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.2; }
.auth-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 7px; }
.auth-field span { color: #344054; font-size: 12px; font-weight: 650; }
.auth-field input { height: 40px; padding: 0 11px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-row a, .auth-switch a { color: var(--brand); font-weight: 650; text-decoration: none; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-check input { width: 16px; height: 16px; }
.auth-submit { height: 40px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }
.auth-switch, .auth-note { margin-top: 18px !important; text-align: center; font-size: 13px !important; }
.auth-note { padding: 10px 12px; border-radius: 8px; background: #f8fafc; color: #475467 !important; }
.auth-errors { padding: 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fff0ee; color: var(--red); font-size: 13px; }
.auth-errors strong { display: block; margin-bottom: 6px; }
.auth-errors ul { margin: 0; padding-left: 18px; }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: relative; height: auto; }
  .app-content { width: min(100% - 32px, 980px); }
  .topbar { grid-template-columns: 1fr auto; }
  .global-search { display: none; }
  .page-head, .workbench-grid, .run-layout, .evidence-board { grid-template-columns: 1fr; grid-template-areas: none; }
  .evidence-board__stage, .evidence-board__side, .evidence-contact-sheet { grid-area: auto; }
  .run-setup { position: static; }
  .insight-grid, .analysis-group-grid, .basis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .management-grid, .management-form { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .app-content { width: min(100% - 24px, 980px); padding-top: 20px; }
  .topbar { height: 58px; padding: 0 16px; }
  .topbar__title span, .locale-toggle, .user-menu__button > span:not(.avatar) { display: none; }
  .page-head { align-items: start; }
  .page-actions { justify-content: stretch; flex-direction: column; }
  .insight-grid, .analysis-group-grid, .filter-bar, .basis-grid { grid-template-columns: 1fr; }
  .evidence-board__stage { min-height: 320px; }
  .process-notice { grid-template-columns: 1fr; }
  .process-notice i { min-width: 0; }
  .guest-header { height: 64px; padding: 0 16px; }
  .guest-brand img { width: 104px; max-height: 34px; }
  .guest-brand span { display: none; }
  .auth-shell { min-height: calc(100vh - 64px); padding: 28px 14px; }
  .auth-card { padding: 22px; }
}


/* Modern product polish: calmer visual hierarchy, brighter shell, consistent weights */
.app-shell { grid-template-columns: 252px minmax(0, 1fr); background: linear-gradient(180deg, #f9fafc 0%, #f4f7fa 100%); }
.app-sidebar { background: #fff; color: var(--text); border-right: 1px solid var(--line); box-shadow: none; }
.brand-block { border-bottom-color: var(--line); }
.brand-block--link:hover strong { color: var(--brand); }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: #151922; color: #fff; font-weight: 650; }
.brand-block strong { color: var(--ink); font-size: 16px; font-weight: 700; }
.brand-block span, .sidebar-note span { color: var(--muted); font-weight: 450; }
.primary-create { background: #151922; color: #fff; box-shadow: none; font-weight: 600; height: 38px; }
.side-nav__label { color: #98a2b3; font-weight: 600; }
.side-nav__link { color: #4b5565; font-size: 13px; font-weight: 500; }
.side-nav__link svg { color: #8894a3; }
.side-nav__link:hover { background: #f3f6f8; color: var(--ink); }
.side-nav__link.is-active { background: #eef0f3; color: #151922; box-shadow: none; font-weight: 620; }
.side-nav__link.is-active svg { color: #151922; }
.sidebar-note { border-color: var(--line); background: #f8fafc; }
.sidebar-note strong { color: #3b4655; font-size: 12px; font-weight: 520; }
.topbar { height: 60px; background: rgba(255,255,255,.88); border-bottom-color: var(--line); grid-template-columns: 190px minmax(260px, 520px) auto; }
.topbar__title span { font-size: 11px; font-weight: 450; }
.topbar__title strong { font-size: 15px; font-weight: 620; }
.avatar { background: #303846; font-weight: 650; }
.app-content { width: min(var(--content), calc(100vw - 252px - 56px)); padding-top: 26px; }
.page-stack { gap: 16px; }
.eyebrow { font-weight: 500; }
.page-head h1 { font-size: 25px; line-height: 1.24; font-weight: 680; }
.page-head p { font-size: 13px; max-width: 720px; }
.ui-button, .button { height: 36px; font-weight: 560; box-shadow: none; }
.insight-card, .panel-card, .lab-panel, .analysis-group-card { border-radius: 8px; box-shadow: none; }
.insight-card { min-height: 92px; }
.insight-card span { font-weight: 520; }
.insight-card strong { font-size: 21px; line-height: 1.08; font-weight: 680; }
.insight-card p { line-height: 1.42; }
.panel-card__header, .lab-panel__head { min-height: 56px; background: #fff; }
.panel-card__header h2, .lab-panel__head h2 { font-size: 14px; font-weight: 650; }
.panel-card__header p, .lab-panel__head p { font-size: 12px; }
.dense-item strong, .analysis-group-card strong, .data-table__primary { font-weight: 620; }
.status-pill, .tag, .readiness-chip { min-height: 22px; font-size: 11px; font-weight: 560; }
.data-table th, .comparison-table th, .result-matrix th { height: 40px; font-size: 11px; font-weight: 600; color: #667085; }
.data-table td, .comparison-table td, .result-matrix td { color: #3f4b59; }
.result-matrix td strong, .comparison-table td strong, .class-name strong { font-weight: 620; }
.filter-bar input, .filter-bar select, .global-search input { height: 36px; font-size: 13px; }
.work-modal__header h2 { font-size: 18px; font-weight: 650; }
.work-option strong { font-size: 14px; font-weight: 650; }
.work-option__icon { font-weight: 650; }
.run-drop { background: #fbfcfd; }
.run-drop strong { font-size: 15px; font-weight: 620; }


/* Evidence board must never overlap the side panel */
.evidence-board__stage { min-width: 0; width: 100%; height: 560px; min-height: 0; aspect-ratio: auto; }
.evidence-board__stage img, .evidence-board__stage canvas { max-width: 100%; max-height: 100%; }
@media (max-width: 1120px) { .evidence-board__stage { height: 520px; } }
@media (max-width: 680px) { .evidence-board__stage { height: 320px; } }

.group-cell-summary {
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.group-cell-summary b {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.class-name.compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.class-name.compact i,
.class-name.compact strong {
  margin-right: 0;
}
.data-table .is-number {
  white-space: nowrap;
}
.ui-link {
  color: var(--brand);
  font-size: 12px;
  font-weight: 620;
  text-decoration: none;
}
.ui-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Project-first workflow refresh */
.app-shell svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.primary-create,
.ui-button--primary {
  background: #151922;
  border-color: #151922;
}
.primary-create:hover,
.ui-button--primary:hover {
  background: #0b0f16;
  border-color: #0b0f16;
}
.page-head {
  padding: 4px 0 2px;
}


/* Unified controls: black primary actions, custom selects, modal confirms */
.primary-create,
.primary-create:hover,
.ui-button--primary,
.ui-button--primary:hover,
.auth-submit,
.guest-header .guest-cta {
  background: #151922;
  border-color: #151922;
  color: #fff;
}
.ui-button--primary:hover,
.primary-create:hover,
.auth-submit:hover {
  background: #0b0f16;
  border-color: #0b0f16;
}
.work-option__icon,
.work-option__icon--project {
  background: #151922;
  color: #fff;
}
.work-option b,
.work-option--project b,
.ui-link,
.group-card-footer em,
.modal-kicker {
  color: #151922;
}
.readiness-chip,
.project-analysis-card__head strong {
  background: #eef0f3;
  color: #151922;
}
.command-card--primary {
  background: linear-gradient(135deg, rgba(238, 240, 243, .95), rgba(255, 255, 255, .92)), #fff;
}
.command-card > span {
  color: #151922;
}
.analysis-import-row input {
  accent-color: #151922;
}
.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.filter-bar .custom-select {
  min-width: 170px;
}
.analysis-project-form .custom-select {
  flex: 0 1 300px;
  width: 300px;
  min-width: 210px;
}
.custom-select__button {
  width: 100%;
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.custom-select__button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__button svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform .14s ease;
}
.custom-select.is-open .custom-select__button,
.custom-select__button:focus {
  border-color: #151922;
  box-shadow: 0 0 0 3px rgba(21, 25, 34, .10);
  outline: none;
}
.custom-select.is-open .custom-select__button svg {
  transform: rotate(180deg);
}
.custom-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.custom-select.is-open .custom-select__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.custom-select__option {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.custom-select__option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__option svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  color: #151922;
}
.custom-select__option:hover,
.custom-select__option:focus {
  background: #f3f5f7;
  outline: none;
}
.custom-select__option.is-selected {
  background: #eef0f3;
  color: #151922;
  font-weight: 650;
}
.custom-select__option.is-selected svg {
  opacity: 1;
}
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-y: auto;
}
.confirm-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(8px);
}
.confirm-modal__stage {
  min-height: 100%;
  padding: 18px;
  display: grid;
  place-items: center;
}
.confirm-modal__panel {
  position: relative;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
  overflow: hidden;
}
.confirm-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.confirm-modal__close:hover {
  border-color: var(--line);
  background: #f8fafb;
  color: var(--ink);
}
.confirm-modal__close svg,
.confirm-modal__icon svg,
.confirm-modal__spinner {
  width: 18px;
  height: 18px;
}
.confirm-modal__body {
  padding: 24px 52px 22px 22px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
}
.confirm-modal__icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.confirm-modal__icon.is-danger {
  background: #fff0ed;
  color: var(--red);
}
.confirm-modal__icon.is-primary {
  background: #eef0f3;
  color: #151922;
}
.confirm-modal__body h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 680;
}
.confirm-modal__body p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-modal__actions {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #f8fafb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ui-button--danger-solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.ui-button--danger-solid:hover {
  background: #911b12;
  border-color: #911b12;
}
.confirm-modal__spinner {
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Neutralize legacy Tailwind indigo accents in older account/directory surfaces. */
.bg-indigo-500,
.hover\:bg-indigo-600:hover {
  background-color: #151922 !important;
}
.bg-indigo-50,
.bg-indigo-50\/30,
.bg-indigo-50\/40,
.bg-indigo-100,
.bg-indigo-100\/90 {
  background-color: #eef0f3 !important;
}
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.hover\:text-indigo-500:hover {
  color: #151922 !important;
}
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.focus\:border-indigo-500:focus {
  border-color: #151922 !important;
}
.ring-indigo-200,
.ring-indigo-300,
.ring-indigo-300\/60,
.ring-indigo-400,
.focus\:ring-indigo-300:focus,
.focus\:ring-indigo-500\/20:focus,
.focus\:ring-indigo-500\/50:focus {
  --tw-ring-color: rgba(21, 25, 34, .22) !important;
}

/* Keep the analysis intake page stable after the later product-polish rules. */
@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: relative;
    height: auto;
  }

  .app-content {
    width: min(100% - 32px, 980px);
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .run-layout {
    grid-template-columns: 1fr;
  }

  .run-setup {
    position: static;
  }
}

@media (max-width: 680px) {
  .app-content {
    width: min(100% - 24px, 980px);
    padding-top: 20px;
  }

  .topbar {
    height: 58px;
    padding: 0 16px;
  }

  .run-form {
    padding: 14px;
  }

  .run-drop {
    margin: 14px;
    min-height: 260px;
  }
}



/* ==== Restored: app rules that lived inside the old landing blocks ==== */
.page-head h1 {
  letter-spacing: 0;
}
.page-actions .ui-button {
  min-width: 104px;
}
.work-modal {
  padding: 20px;
}
.work-modal__backdrop {
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(10px);
}
.work-modal__panel {
  width: min(780px, 100%);
  border-radius: 18px;
  border-color: rgba(203, 213, 225, .9);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
}
.work-modal__header {
  padding: 24px 26px 20px;
  background:
    linear-gradient(180deg, rgba(237, 247, 247, .9), rgba(255, 255, 255, 1)),
    #fff;
}
.modal-kicker {
  letter-spacing: 0;
}
.work-modal__header h2 {
  font-size: 22px;
}
.work-modal__header p {
  max-width: 560px;
  font-size: 13px;
}
.work-modal__close {
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--line);
}
.work-modal__options { padding: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-option { min-height: 136px; grid-template-columns: 46px minmax(0, 1fr); align-content: start; border-radius: 12px; background: #fff; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.work-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}
.work-option--project:hover { background: #fff; }
.work-option__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #151922;
}
.work-option__icon--project {
  background: #293241;
}
.work-option__icon svg {
  width: 21px;
  height: 21px;
}
.work-option strong {
  font-size: 16px;
}
.work-option em { min-height: 42px; }
.work-option b { display: inline-flex; align-items: center; margin-top: 12px; color: var(--brand); font-size: 12px; font-weight: 650; }
.work-option--project b { color: #293241; }
.project-command-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: 14px;
  align-items: stretch;
}
.command-card {
  min-height: 236px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 10px;
}
.command-card--primary {
  background:
    linear-gradient(135deg, rgba(227, 243, 242, .95), rgba(255, 255, 255, .92)),
    #fff;
}
.command-card > span {
  color: #151922;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}
.command-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 680;
}
.command-card p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.command-card__actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.analysis-import-form {
  display: grid;
  gap: 12px;
}
.analysis-import-list {
  display: grid;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.analysis-import-row {
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.analysis-import-row:last-child {
  border-bottom: 0;
}
.analysis-import-row:hover {
  background: #f8fafb;
}
.analysis-import-row input {
  width: 16px;
  height: 16px;
  accent-color: #151922;
}
.analysis-import-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.analysis-import-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}
.analysis-import-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.analysis-import-row i {
  font-style: normal;
}
.project-new-page {
  max-width: 860px;
}
.project-create-panel {
  max-width: 680px;
}
.project-create-form {
  padding: 18px;
  display: grid;
  gap: 16px;
}
.field-block {
  display: grid;
  gap: 7px;
}
.field-block span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.field-block input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}
.field-block input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field-block em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.field-help {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.form-alert {
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f4;
  color: var(--red);
  font-size: 13px;
  font-weight: 560;
  display: grid;
  gap: 2px;
}
.form-alert strong {
  color: var(--red);
  font-weight: 650;
}
.form-alert span {
  color: #9f1f15;
  font-weight: 500;
}
.project-create-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.account-settings-page {
  max-width: 820px;
}
.account-settings-form {
  display: grid;
  gap: 14px;
}
.account-settings-panel {
  max-width: 680px;
}
.account-settings-fields {
  padding: 18px;
  display: grid;
  gap: 12px;
}
.account-settings-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 8px;
}
.account-settings-actions {
  max-width: 680px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.account-danger-panel {
  max-width: 680px;
  padding: 16px 18px;
  border-color: #fecaca;
  background: #fffafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.account-danger-panel h2 {
  margin: 0;
  color: var(--red);
  font-size: 15px;
  font-weight: 680;
}
.account-danger-panel p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.run-drop {
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff, #f4fbfa);
}
.run-thumb,
.project-analysis-card,
.project-analysis-thumb,
.evidence-board__side,
.evidence-contact-sheet button {
  border-radius: 8px;
}
.data-table tbody tr,
.dense-item,
.analysis-import-row {
  transition: background .14s ease;
}
@media (max-width: 1120px) {
  .project-command-grid,
  .work-modal__options {
    grid-template-columns: 1fr;
  }
  .project-command-grid {
    align-items: start;
  }
}
@media (max-width: 680px) {
  .work-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .work-modal__panel {
    border-radius: 16px;
  }
  .work-option {
    min-height: auto;
  }
  .project-command-grid {
    grid-template-columns: 1fr;
  }
  .analysis-import-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .analysis-import-row i {
    grid-column: 2;
    justify-self: start;
  }
  .analysis-project-form {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
  }
  .analysis-project-form > span {
    grid-column: 1 / -1;
  }
  .analysis-project-form .custom-select {
    width: 100%;
    min-width: 0;
  }
  .account-settings-fields--two {
    grid-template-columns: 1fr;
  }
  .account-danger-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .account-danger-panel .button_to,
  .account-danger-panel .ui-button {
    width: 100%;
  }
}
.cell {
  position: absolute;
  width: 0;
  height: 0;
}


/* ============================================================
   Auto Cell design system v5 (2026-07)
   One accent (indigo), dark instrument sidebar, calm data surfaces.
   Last layer in the file — it is the source of truth for looks.
   ============================================================ */

:root {
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;

  --bg: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f3f8;

  --ink: #0e1320;
  --text: #3b4557;
  --muted: #667085;
  --faint: #98a2b3;

  --line: #e6e9f0;
  --line-strong: #cdd4e0;

  --brand: #4f46e5;
  --brand-2: #4338ca;
  --brand-3: #312e81;
  --brand-soft: #eef2ff;
  --brand-line: #c7d2fe;

  --nav: #0e1320;
  --nav-2: #151b2c;
  --nav-line: rgba(255, 255, 255, .08);
  --nav-text: #aab3c7;
  --nav-muted: #6b748d;

  --green: #067647; --green-bg: #ecfdf3; --green-line: #a9efc5;
  --amber: #b54708; --amber-bg: #fffaeb; --amber-line: #fedf89;
  --red:   #b42318; --red-bg:   #fef3f2; --red-line:   #fecdca;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(14, 19, 32, .05);
  --shadow-md: 0 4px 16px -4px rgba(14, 19, 32, .10);
  --shadow: 0 24px 50px -16px rgba(14, 19, 32, .20);
  --ring: 0 0 0 3px rgba(79, 70, 229, .16);

  --content: 1340px;
  --sidebar: 244px;
}

html, body { background: var(--bg); }
body { color: var(--text); font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.006em; }
h1, h2, h3, strong, b { letter-spacing: -0.014em; }
::selection { background: rgba(79, 70, 229, .16); }
:focus-visible { outline: none; }

/* Korean text should wrap on word boundaries, not mid-word. */
h1, h2, h3, p, li, .lp, .page-head p, .empty-state p { word-break: keep-all; overflow-wrap: break-word; }


/* ============================ App shell ============================ */
.app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); background: var(--bg); }

.app-sidebar {
  padding: 16px 12px 18px;
  gap: 14px;
  background: var(--nav);
  border-right: 0;
  color: var(--nav-text);
}
.app-shell svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.brand-block { padding: 6px 8px 16px; border-bottom: 1px solid var(--nav-line); }
.brand-logo { width: 98px; max-height: 28px; filter: brightness(0) invert(1); opacity: .96; }
.brand-block strong, .brand-script { color: #fff; font-size: 15.5px !important; font-weight: 700 !important; }
.brand-block--link:hover strong, .brand-block--link:hover .brand-script { color: #c7d2fe; }

.primary-create {
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 620;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.primary-create:hover {
  background: #5b52ea;
  border-color: #5b52ea;
  box-shadow: 0 6px 18px -6px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.primary-create svg { width: 16px; height: 16px; }

.side-nav { gap: 2px; }
.side-nav__label {
  margin: 16px 10px 6px;
  color: #5f6a85;
  font-size: 10.5px;
  font-weight: 660;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.side-nav__link {
  position: relative;
  min-height: 38px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  color: var(--nav-text);
  font-size: 13.5px;
  font-weight: 520;
  transition: background .13s ease, color .13s ease;
}
.side-nav__link svg { color: #6b7690; transition: color .13s ease; }
.side-nav__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-nav__link:hover svg { color: #aab3c7; }
.side-nav__link.is-active { background: rgba(99, 102, 241, .17); color: #fff; font-weight: 620; }
.side-nav__link.is-active svg { color: #a5b4fc; }
.side-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: #818cf8;
}

.sidebar-note { margin-top: auto; border-color: var(--nav-line); background: rgba(255, 255, 255, .04); }
.sidebar-note span { color: #5f6a85; }
.sidebar-note strong { color: #c3cad9; }


/* ============================ Topbar ============================ */
.app-frame { min-width: 0; background: var(--bg); }
.topbar {
  height: 60px;
  padding: 0 28px;
  grid-template-columns: minmax(140px, 200px) minmax(240px, 480px) auto;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
}
.topbar__title strong { color: var(--ink); font-size: 14.5px; font-weight: 640; }

.global-search input {
  height: 36px;
  border-radius: var(--radius);
  border-color: var(--line);
  background: var(--surface-3);
  font-size: 13px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.global-search input:hover { border-color: var(--line-strong); }
.global-search input:focus { background: #fff; border-color: var(--brand); box-shadow: var(--ring); }

.locale-toggle { padding: 2px; border-radius: var(--radius); background: var(--surface-3); }
.locale-toggle a { height: 26px; min-width: 30px; border-radius: 7px; font-size: 11.5px; font-weight: 620; }
.locale-toggle a.is-active { background: #fff; color: var(--brand-2); box-shadow: var(--shadow-sm); }

.user-menu__button { height: 36px; border-radius: 999px; border-color: var(--line); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.user-menu__button:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.avatar { width: 28px; height: 28px; background: linear-gradient(140deg, #6366f1, #4338ca); font-weight: 660; }
.user-menu__content { padding: 6px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.user-menu__item, .user-menu__danger { border-radius: var(--radius-sm); font-weight: 540; transition: background .12s; }
.user-menu__item:hover { background: var(--surface-2); }
.user-menu__danger:hover { background: var(--red-bg); }


/* ============================ Page scaffolding ============================ */
.app-content { width: min(var(--content), calc(100vw - var(--sidebar) - 56px)); padding: 30px 0 72px; }
.page-stack { gap: 18px; }
.page-head { padding: 0 0 2px; align-items: end; }
.page-head h1 { margin-top: 8px; color: var(--ink); font-size: 27px; line-height: 1.2; font-weight: 720; letter-spacing: -0.022em; }
.page-head p { margin-top: 9px; max-width: 660px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.eyebrow { color: var(--faint); font-size: 12px; font-weight: 540; }
.eyebrow a { color: var(--muted); text-decoration: none; transition: color .13s; }
.eyebrow a:hover { color: var(--brand); }
.page-actions { gap: 8px; }


/* ============================ Buttons ============================ */
.ui-button, .button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 570;
  box-shadow: none;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.ui-button:hover, .button:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.ui-button:focus-visible { box-shadow: var(--ring); }
.ui-button--primary, .ui-button--primary:hover { color: #fff; }
.ui-button--primary { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); }
.ui-button--primary:hover { border-color: #5b52ea; background: #5b52ea; box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255, 255, 255, .16); }
.ui-button--ghost { background: #fff; }
.ui-button--ghost:hover { background: var(--surface-2); }
.ui-button--danger { color: var(--red); border-color: var(--red-line); background: #fff; }
.ui-button--danger:hover { color: var(--red); background: var(--red-bg); border-color: #fda29b; }
.ui-button--excel { border-color: #17734a; background: #1a8354; color: #fff; }
.ui-button--excel:hover { border-color: #116340; background: #14724a; color: #fff; }
.ui-button--excel svg { width: 15px; height: 15px; }
.ui-button.is-disabled { opacity: .45; pointer-events: none; }


/* ============================ Stat cards ============================ */
.insight-grid { gap: 12px; }
.insight-card {
  min-height: 94px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s;
}
.insight-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.insight-card span { color: var(--muted); font-size: 11px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.insight-card strong { color: var(--ink); font-size: 25px; line-height: 1.05; font-weight: 720; font-variant-numeric: tabular-nums; }
.insight-card p { margin-top: 7px; color: var(--faint); font-size: 12px; line-height: 1.45; }


/* ============================ Panels ============================ */
.panel-card, .lab-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-card__header, .lab-panel__head {
  min-height: 58px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.panel-card__header h2, .lab-panel__head h2 { color: var(--ink); font-size: 15px; font-weight: 670; }
.panel-card__header p, .lab-panel__head p { margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }


/* ============================ Tables ============================ */
.data-table th, .comparison-table th, .result-matrix th {
  height: 38px;
  background: var(--surface-2);
  border-bottom-color: var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 660;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.data-table td, .comparison-table td, .result-matrix td { color: var(--text); border-bottom-color: var(--line); }
.data-table tbody tr, .comparison-table tbody tr { transition: background .13s; }
.data-table tbody tr:hover td, .comparison-table tbody tr:hover td { background: #f8f9fe; }
.data-table__primary { color: var(--ink); font-weight: 620; transition: color .13s; }
.data-table__primary:hover { color: var(--brand-2); }
.metric-cell strong, .ratio-cell strong { font-variant-numeric: tabular-nums; }
.ratio-cell i { height: 4px; background: linear-gradient(90deg, var(--brand) var(--ratio), var(--surface-3) var(--ratio)); }
.table-meta { border-top: 0; border-bottom-color: var(--line); background: var(--surface-2); color: var(--muted); }
.pagination-bar { border-top-color: var(--line); }


/* ============================ Status pills ============================ */
.status-pill {
  min-height: 24px;
  padding: 0 10px 0 8px;
  gap: 6px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 590;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.is-complete   { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.is-processing { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.is-failed     { background: var(--red-bg);   border-color: var(--red-line);   color: var(--red); }
.is-waiting    { background: var(--surface-3); border-color: var(--line); color: #5b6678; }
.tag { min-height: 24px; background: var(--surface-3); color: var(--muted); font-size: 11.5px; font-weight: 570; }
.readiness-chip { min-height: 26px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-2); font-size: 11.5px; font-weight: 590; }


/* ============================ Lists ============================ */
.dense-item { transition: background .13s; }
.dense-item:hover { background: var(--surface-2); }
.dense-item:hover strong { color: var(--brand-2); }
.analysis-group-grid { padding: 16px; gap: 12px; }
.analysis-group-card {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.analysis-group-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.analysis-group-card strong { color: var(--ink); font-weight: 640; }
.group-card-footer em { color: var(--brand); }


/* ============================ Forms ============================ */
.filter-bar { padding: 16px; border-bottom-color: var(--line); }
.filter-bar input, .filter-bar select,
.run-form input, .run-form textarea, .run-form select,
.auth-field input, .management-form input, .management-form textarea, .management-form select,
.analysis-title-input, .analysis-memo-input, .editable-page-title input,
.project-analysis-card__head input, .analysis-project-form select {
  border-radius: var(--radius);
  border-color: var(--line-strong);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.filter-bar input, .filter-bar select { height: 38px; font-size: 13px; }
.filter-bar input:focus, .filter-bar select:focus,
.run-form input:focus, .run-form textarea:focus, .run-form select:focus,
.auth-field input:focus, .management-form input:focus, .management-form textarea:focus,
.management-form select:focus, .analysis-title-input:focus, .analysis-memo-input:focus,
.editable-page-title input:focus, .project-analysis-card__head input:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }

.custom-select__button { border-radius: var(--radius); border-color: var(--line-strong); transition: border-color .15s, box-shadow .15s; }
.custom-select.is-open .custom-select__button, .custom-select__button:focus { border-color: var(--brand); box-shadow: var(--ring); }
.custom-select__menu { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.custom-select__option { border-radius: var(--radius-sm); }
.custom-select__option:hover, .custom-select__option:focus { background: var(--surface-2); }
.custom-select__option.is-selected { background: var(--brand-soft); color: var(--brand-2); }
.custom-select__option.is-selected svg { color: var(--brand); }


/* ============================ Notices ============================ */
.process-notice { border-radius: var(--radius-lg); border-color: var(--amber-line); background: var(--amber-bg); }
.process-notice i { background: #f5e3b6; }
.process-notice b { background: var(--amber); }
.process-notice--danger { border-color: var(--red-line); background: var(--red-bg); }

.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.status-strip__item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: border-color .14s, box-shadow .14s;
}
.status-strip__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.status-strip__item strong { min-width: 0; color: var(--ink); font-size: 13.5px; font-weight: 610; }
.status-strip__item em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 560; white-space: nowrap; }
.status-strip__item:hover em { color: var(--brand); }
.status-strip__item.is-processing-tone { border-color: var(--amber-line); background: linear-gradient(90deg, var(--amber-bg), #fff 46%); }
.status-strip__item.is-failed-tone { border-color: var(--red-line); background: linear-gradient(90deg, var(--red-bg), #fff 46%); }

.empty-state {
  margin: 16px;
  padding: 32px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.empty-state strong { color: var(--ink); font-size: 14px; font-weight: 630; }
.empty-state p { margin: 0; max-width: 430px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.empty-state .ui-button { margin-top: 12px; }
.empty-state.compact { margin: 0; padding: 24px 16px; }
.data-table .empty-state, .comparison-table .empty-state { margin: 0; border: 0; background: none; padding: 34px 16px; }

.toast {
  position: fixed;
  top: 74px;
  right: 24px;
  z-index: 120;
  margin: 0;
  min-width: 250px;
  max-width: 380px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 540;
  animation: toast-in .26s cubic-bezier(.2, .9, .3, 1.2) both;
}
.toast--success { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.toast--error { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }


/* ============================ Modals ============================ */
.work-modal__panel { border-radius: var(--radius-xl); border-color: var(--line); box-shadow: var(--shadow); }
.work-modal__header { padding: 22px 22px 20px; border-bottom-color: var(--line); }
.work-modal__header h2 { font-size: 19px; font-weight: 690; }
.modal-kicker { color: var(--brand); font-size: 10.5px; letter-spacing: .09em; }
.work-option { border-radius: var(--radius-lg); border-color: var(--line); transition: border-color .15s, background .15s, box-shadow .15s; }
.work-option:hover { border-color: var(--brand-line); background: #fcfcff; box-shadow: var(--shadow-md); }
.work-option__icon { width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-2); }
.work-option--project .work-option__icon { border-color: rgba(255, 255, 255, .12); background: var(--ink); color: #a5b4fc; }
.work-option strong { font-size: 14.5px; font-weight: 660; }
.work-option em { color: var(--muted); font-size: 12.5px; }
.work-option span b { display: none; }
.confirm-modal__panel { border-radius: var(--radius-xl); box-shadow: var(--shadow); }


/* ============================ Analysis detail ============================ */
.report-head .analysis-project-form {
  margin-top: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.memo-edit-button, .title-edit-button { border-radius: var(--radius-sm); transition: color .13s, border-color .13s, background .13s; }
.memo-edit-button:hover, .title-edit-button:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

.evidence-board { padding: 18px; gap: 16px; }
.evidence-board__stage { border-radius: var(--radius-lg); background: #0a0d15; }
.evidence-board__zoom-toolbar {
  padding: 6px 8px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(10, 13, 21, .74);
  backdrop-filter: blur(10px);
}
.evidence-board__zoom-button { border-color: transparent; background: rgba(255, 255, 255, .1); transition: background .13s; }
.evidence-board__zoom-button:hover { background: rgba(255, 255, 255, .22); }
.evidence-board__compare-handle span { border-color: rgba(255, 255, 255, .38); background: rgba(10, 13, 21, .84); backdrop-filter: blur(4px); }

.evidence-board__side { border-radius: var(--radius-lg); border-color: var(--line); background: #fff; padding: 14px; gap: 12px; }
.evidence-selected span { color: var(--faint); font-size: 11px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.evidence-selected strong { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.evidence-side-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px 0; border-top: 1px solid var(--line); padding-top: 12px; }
.evidence-side-label span { color: var(--ink); font-size: 12.5px; font-weight: 640; }
.evidence-side-label em { color: var(--faint); font-size: 11.5px; font-style: normal; }
.evidence-counts { gap: 6px; }
.evidence-count-row { border-radius: var(--radius-sm); border-color: var(--line); transition: border-color .13s, background .13s; }
.evidence-count-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.evidence-count-row--all { background: var(--surface-2); font-weight: 620; }
.evidence-count-row--all span { color: var(--ink); }
.evidence-count-row strong { font-variant-numeric: tabular-nums; }
.evidence-nav { gap: 8px; }
.evidence-nav button {
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 570;
  transition: background .13s, border-color .13s;
}
.evidence-nav button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.evidence-nav button svg { width: 15px; height: 15px; color: var(--faint); }
.evidence-nav button:hover svg { color: var(--brand); }
.evidence-contact-sheet { gap: 10px; }
.evidence-contact-sheet button { border-radius: var(--radius); border-color: var(--line); transition: border-color .14s, box-shadow .14s; }
.evidence-contact-sheet button:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.evidence-contact-sheet button.is-selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }


/* ============================ New-analysis intake ============================ */
.run-drop { border-radius: var(--radius-lg); border-color: var(--line-strong); background: var(--surface-2); }
.run-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.run-drop strong { color: var(--ink); font-size: 15.5px; font-weight: 640; }
.run-thumb, .project-analysis-card, .project-analysis-thumb { border-radius: var(--radius); border-color: var(--line); }
.command-card { border-radius: var(--radius-lg); }
.command-card > span { color: var(--brand); letter-spacing: .08em; }
.analysis-import-row { transition: background .13s; }
.analysis-import-row:hover { background: var(--surface-2); }


/* ============================ Guest / auth ============================ */
.guest-header { border-bottom-color: var(--line); background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); }
.guest-header nav a { border-radius: var(--radius); font-weight: 570; }
.guest-header nav a:not(.guest-cta):hover { background: var(--surface-3); color: var(--ink); }
.guest-header .guest-cta { background: var(--brand); transition: background .14s; }
.guest-header .guest-cta:hover { background: #5b52ea; }

.auth-shell { background: radial-gradient(64% 46% at 50% 0%, rgba(79, 70, 229, .08), transparent 72%), var(--bg); }
.auth-card {
  width: min(438px, 100%);
  padding: 36px 34px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.auth-card__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(140deg, #6366f1, #4338ca);
  box-shadow: 0 10px 20px -8px rgba(79, 70, 229, .6);
  font-size: 13px;
  font-weight: 700;
}
.auth-card h1 { color: var(--ink); font-size: 21px; font-weight: 700; }
.auth-card p { color: var(--muted); font-size: 13.5px; }
.auth-field span { color: var(--text); font-size: 12.5px; font-weight: 590; }
.auth-field input { height: 42px; padding: 0 13px; }
.auth-field em.auth-hint, .auth-field em { display: block; margin-top: -1px; color: var(--faint); font-size: 12px; font-style: normal; }
.auth-submit {
  height: 42px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  font-size: 14px;
  font-weight: 620;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  transition: background .15s, box-shadow .15s;
}
.auth-submit:hover { background: #5b52ea; box-shadow: 0 8px 18px -6px rgba(79, 70, 229, .5); }
.auth-row a, .auth-switch a { color: var(--brand); font-weight: 610; }
.auth-row a:hover, .auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-note { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted) !important; }
.auth-errors { border-color: var(--red-line); background: var(--red-bg); border-radius: var(--radius); }


/* ============================ Landing (lp-*) ============================ */
.lp {
  --lp-ink: #0e1320;
  --lp-text: #3b4557;
  --lp-muted: #667085;
  --lp-line: #e5e8f1;
  --lp-accent: #4f46e5;
  --lp-accent-2: #4338ca;
  --lp-soft: #eef2ff;
  min-height: 100vh;
  background: #fbfbfe;
  color: var(--lp-text);
  font-family: var(--font-sans);
  line-height: 1.6;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; display: block; }
.lp-container { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }

.lp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--lp-line);
  background: rgba(251, 251, 254, .82);
  backdrop-filter: blur(16px);
}
.lp-header__inner { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink); text-decoration: none; }
.lp-brand img { width: 94px; height: 27px; object-fit: contain; }
.lp-brand strong { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.lp-nav { display: inline-flex; gap: 2px; }
.lp-nav a {
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--lp-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 540;
  transition: color .13s, background .13s;
}
.lp-nav a:hover { color: var(--lp-ink); background: #eef0f7; }
.lp-header__actions { display: inline-flex; align-items: center; gap: 8px; }

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--lp-ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 590;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.lp-btn:hover { background: #f5f6fb; border-color: #d6dbe8; }
.lp-btn--primary { border-color: var(--lp-accent); background: var(--lp-accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.lp-btn--primary:hover { background: #5b52ea; border-color: #5b52ea; color: #fff; box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .55); }
.lp-btn--lg { height: 48px; padding: 0 24px; border-radius: 12px; font-size: 14.5px; }
.lp-btn--ghost { background: transparent; border-color: transparent; color: var(--lp-muted); }
.lp-btn--ghost:hover { background: #eef0f7; border-color: transparent; color: var(--lp-ink); }
.lp-btn--inverse { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .1); color: #fff; }
.lp-btn--inverse:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); color: #fff; }
.lp-btn--white { border-color: #fff; background: #fff; color: var(--lp-ink); }
.lp-btn--white:hover { background: #e9ebf5; border-color: #e9ebf5; color: var(--lp-ink); }

/* Hero */
.lp-hero { position: relative; padding: 88px 0 34px; overflow: hidden; }
.lp-hero::before {
  content: "";
  position: absolute;
  inset: -46% -18% auto;
  height: 134%;
  background:
    radial-gradient(44% 40% at 27% 30%, rgba(99, 102, 241, .13), transparent 68%),
    radial-gradient(38% 36% at 76% 20%, rgba(56, 189, 248, .10), transparent 70%);
  pointer-events: none;
}
.lp-hero__inner { position: relative; display: grid; gap: 46px; justify-items: center; text-align: center; }
.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-muted);
  font-size: 12.5px;
  font-weight: 570;
  box-shadow: 0 1px 2px rgba(14, 19, 32, .04);
}
.lp-kicker i { width: 7px; height: 7px; border-radius: 999px; background: var(--lp-accent); }
.lp-hero h1 {
  margin: 20px auto 0;
  max-width: 18em;
  color: var(--lp-ink);
  font-size: clamp(33px, 5vw, 54px);
  line-height: 1.15;
  font-weight: 760;
  letter-spacing: -0.034em;
}
.lp-hero h1 em { font-style: normal; color: var(--lp-accent); }
.lp-hero__sub { margin: 22px auto 0; max-width: 30em; color: var(--lp-muted); font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.7; }
.lp-hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lp-hero__hint { margin: 16px 0 0; color: var(--faint); font-size: 12.5px; }

/* Product frame */
.lp-shot { position: relative; width: min(1000px, 100%); }
.lp-window {
  position: relative;
  border: 1px solid #e1e5ef;
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 19, 32, .05), 0 34px 68px -26px rgba(14, 19, 32, .24);
  overflow: hidden;
}
.lp-window__bar {
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--lp-line);
  background: #fafbfe;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lp-window__bar i { width: 10px; height: 10px; border-radius: 999px; }
.lp-window__bar i:nth-child(1) { background: #fda29b; }
.lp-window__bar i:nth-child(2) { background: #fedf89; }
.lp-window__bar i:nth-child(3) { background: #a9efc5; }
.lp-window__bar span {
  margin-inline: auto;
  padding: 4px 16px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 520;
}
.lp-window img { width: 100%; }

/* Stats band */
.lp-band { padding: 46px 0 0; }
.lp-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 19, 32, .04);
  overflow: hidden;
}
.lp-band__grid article { padding: 28px; text-align: center; }
.lp-band__grid article + article { border-left: 1px solid var(--lp-line); }
.lp-band__grid strong { display: block; color: var(--lp-ink); font-size: 27px; font-weight: 740; letter-spacing: -0.024em; }
.lp-band__grid span { display: block; margin-top: 7px; color: var(--lp-muted); font-size: 13px; }

/* Sections */
.lp-section { padding: 96px 0 0; }
.lp-section__head { max-width: 30em; margin: 0 auto 46px; text-align: center; }
.lp-eyebrow {
  display: block;
  margin-bottom: 13px;
  color: var(--lp-accent);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lp-section__head h2 { margin: 0; color: var(--lp-ink); font-size: clamp(26px, 3.3vw, 37px); line-height: 1.22; font-weight: 740; letter-spacing: -0.028em; }
.lp-section__head p { margin: 15px auto 0; color: var(--lp-muted); font-size: 15px; }

/* Feature cards */
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-feature {
  padding: 30px 28px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 19, 32, .04);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.lp-feature:hover { border-color: #d8ddee; box-shadow: 0 22px 46px -22px rgba(14, 19, 32, .2); transform: translateY(-3px); }
.lp-feature__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--lp-line);
  border-radius: 13px;
  background: var(--lp-soft);
  color: var(--lp-accent);
  display: grid;
  place-items: center;
}
.lp-feature__icon svg { width: 21px; height: 21px; }
.lp-feature strong { display: block; color: var(--lp-ink); font-size: 16.5px; font-weight: 690; letter-spacing: -0.014em; }
.lp-feature p { margin: 10px 0 0; color: var(--lp-muted); font-size: 13.5px; line-height: 1.68; }

/* Workflow steps */
.lp-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-step {
  position: relative;
  counter-increment: step;
  padding: 24px 22px 24px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: #fff;
}
.lp-step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 18px;
  color: var(--lp-accent);
  font-size: 13px;
  font-weight: 730;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.lp-step strong { display: block; color: var(--lp-ink); font-size: 15px; font-weight: 670; }
.lp-step p { margin: 9px 0 0; color: var(--lp-muted); font-size: 13px; line-height: 1.62; }

/* Deep dive (dark) */
.lp-deep {
  margin-top: 96px;
  padding: 72px 0;
  background:
    radial-gradient(46% 66% at 84% 12%, rgba(99, 102, 241, .24), transparent 62%),
    linear-gradient(180deg, #0e1320, #111a2e);
}
.lp-deep__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.lp-deep .lp-eyebrow { color: #a5b4fc; }
.lp-deep h2 { margin: 0; color: #fff; font-size: clamp(25px, 3vw, 33px); line-height: 1.24; font-weight: 730; letter-spacing: -0.024em; }
.lp-deep__copy > p { margin: 17px 0 0; color: #a8b1c7; font-size: 14.5px; line-height: 1.72; }
.lp-checks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.lp-checks li { display: flex; gap: 11px; color: #d3d9ea; font-size: 14px; line-height: 1.55; }
.lp-checks svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; color: #818cf8; }
.lp-deep .lp-window { border-color: rgba(255, 255, 255, .12); box-shadow: 0 44px 84px -32px rgba(0, 0, 0, .6); }
.lp-deep .lp-window__bar { background: #151d31; border-bottom-color: rgba(255, 255, 255, .08); }
.lp-deep .lp-window__bar span { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #8a93aa; }

/* CTA */
.lp-cta { padding: 104px 0; }
.lp-cta__panel {
  position: relative;
  padding: 72px 32px;
  border-radius: 26px;
  background:
    radial-gradient(58% 92% at 50% 0%, rgba(129, 140, 248, .38), transparent 70%),
    linear-gradient(158deg, #4338ca, #312e81);
  text-align: center;
  overflow: hidden;
}
.lp-cta__panel h2 { margin: 0 auto; max-width: 22em; color: #fff; font-size: clamp(25px, 3.1vw, 35px); line-height: 1.24; font-weight: 740; letter-spacing: -0.024em; }
.lp-cta__panel p { margin: 16px auto 0; max-width: 26em; color: #c7d2fe; font-size: 14.5px; }
.lp-cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Footer */
.lp-footer { border-top: 1px solid var(--lp-line); background: #fff; }
.lp-footer__inner { padding: 30px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.lp-footer__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--lp-muted); font-size: 13px; }
.lp-footer__brand img { width: 82px; height: 24px; object-fit: contain; }
.lp-footer__links { display: inline-flex; gap: 20px; }
.lp-footer__links a { color: var(--lp-muted); text-decoration: none; font-size: 13px; transition: color .13s; }
.lp-footer__links a:hover { color: var(--lp-ink); }


/* ============================ Responsive ============================ */
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: relative; height: auto; }
  .app-content { width: min(100% - 32px, 1000px); }
  .side-nav__link.is-active::before { display: none; }
  .lp-nav { display: none; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-deep__grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-band__grid { grid-template-columns: 1fr; }
  .lp-band__grid article + article { border-left: 0; border-top: 1px solid var(--lp-line); }
}
@media (max-width: 680px) {
  .app-content { width: min(100% - 24px, 1000px); padding-top: 22px; }
  .topbar { height: 56px; padding: 0 16px; }
  .page-head h1 { font-size: 23px; }
  .toast { left: 16px; right: 16px; top: 68px; max-width: none; }
  .status-strip__item { grid-template-columns: auto minmax(0, 1fr); }
  .status-strip__item em { grid-column: 2; }
  .lp-container { width: calc(100% - 32px); }
  .lp-hero { padding-top: 56px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-hero__cta .lp-btn, .lp-cta__actions .lp-btn { width: 100%; }
  .lp-header__actions .lp-btn--ghost { display: none; }
  .lp-section { padding-top: 68px; }
  .lp-deep { margin-top: 68px; padding: 56px 0; }
  .lp-cta { padding: 68px 0; }
  .lp-cta__panel { padding: 52px 20px; border-radius: 20px; }
}

/* ============================ v5 fixes ============================ */

/* Sidebar column stays dark for the full page height, not just the viewport. */
.app-shell { background: linear-gradient(90deg, var(--nav) 0, var(--nav) var(--sidebar), var(--bg) var(--sidebar)); }
@media (max-width: 1120px) { .app-shell { background: var(--bg); } }

/* Brand lockup: mark + wordmark. The ArtBlood PNG has an opaque plate, so it
   cannot be recoloured for the dark sidebar — use type instead. */
.brand-block { align-items: center; gap: 11px; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(140deg, #6366f1, #4338ca);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .8);
  flex: 0 0 auto;
}
.brand-meta { min-width: 0; display: grid; gap: 1px; }
.brand-block .brand-script { font-size: 15px !important; line-height: 1.15 !important; }
.brand-block .brand-meta > span {
  color: #5f6a85;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Class names like "Extruded Nucleus" collide when uppercased in fixed columns. */
.data-table th, .comparison-table th, .result-matrix th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  font-weight: 640;
}
.insight-card span { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Analysis detail header: tighter vertical rhythm. */
.report-head .analysis-memo-editor { margin-top: 10px; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 10px; }
.report-head .analysis-memo-editor > .analysis-memo-input,
.report-head .analysis-memo-editor > .inline-edit-actions,
.report-head .analysis-memo-editor > .inline-error { grid-column: 1 / -1; }
.report-head .analysis-memo-editor p { max-width: 620px; overflow: hidden; text-overflow: ellipsis; }

/* Landing headings need room so Korean phrases do not orphan a word. */
.lp-section__head { max-width: 640px; }
.lp-hero h1 { max-width: 880px; }
.lp-hero__sub { max-width: 560px; }

/* New-analysis drop zone: give it a real affordance. */
.run-drop { min-height: 300px; gap: 6px; }
.run-drop__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.run-drop__icon svg { width: 24px; height: 24px; }
.run-drop span { color: var(--muted); }
.run-drop__actions { margin-top: 16px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.run-drop.is-over .run-drop__icon { border-color: var(--brand); background: #fff; }

/* The intake column should hug its content instead of stretching. */
.run-layout { align-items: start; }
.run-intake { align-self: start; }

/* ============================ v5 final pass ============================ */

/* The generic .ui-button background above out-ranks the solid danger variant
   by source order, so restate it here (used by the confirm-modal OK button). */
.ui-button--danger-solid,
.ui-button--danger-solid:hover { color: #fff; }
.ui-button--danger-solid { border-color: var(--red); background: var(--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.ui-button--danger-solid:hover { border-color: #911b12; background: #911b12; box-shadow: 0 6px 16px -6px rgba(180, 35, 24, .5); }

.confirm-modal__panel { border-color: var(--line); }
.confirm-modal__icon.is-danger { background: var(--red-bg); color: var(--red); }
.confirm-modal__icon.is-primary { background: var(--brand-soft); color: var(--brand); }
.confirm-modal__actions { border-top: 1px solid var(--line); }

/* Project command cards: bring the legacy teal card into the indigo system. */
.command-card { border-color: var(--line); background: #fff; }
.command-card--primary { border-color: var(--brand-line); background: linear-gradient(160deg, var(--brand-soft), #fff 62%); }
.command-card h2 { color: var(--ink); }
.command-card p { color: var(--muted); }
.analysis-import-row { border-color: var(--line); }
.analysis-import-row strong { color: var(--ink); }
.analysis-import-form > .ui-button,
.analysis-import-form button[type=submit] { width: 100%; }

/* Intake: an empty contact sheet should not reserve a screen of blank space. */
.run-contact-sheet:empty { display: none; }
.run-contact-sheet { min-height: 0; }

/* Landing dark section: let the product shot carry more of the band. */
.lp-deep { padding: 64px 0; }
.lp-deep__grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 48px; }

/* Guest header logo sits on white, so it keeps its own colours. */
.guest-brand img { width: 118px; max-height: 34px; }

/* ---------- Mobile / tablet: sidebar becomes a compact top nav bar ---------- */
@media (max-width: 1120px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    padding: 10px 14px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--nav-line);
  }
  .app-sidebar::-webkit-scrollbar { display: none; }

  .brand-block { padding: 0; border-bottom: 0; flex: 0 0 auto; }
  .brand-meta > span { display: none; }

  .primary-create { flex: 0 0 auto; height: 34px; padding: 0 12px; font-size: 12.5px; order: 3; margin-left: auto; }
  .primary-create svg { width: 15px; height: 15px; }

  .side-nav { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; }
  .side-nav__label { display: none; }
  .side-nav__link { min-height: 34px; padding: 0 12px; white-space: nowrap; font-size: 13px; }
  .sidebar-note { display: none; }

  /* The topbar's sticky offset would collide with the nav bar above it. */
  .topbar { position: static; }
}
@media (max-width: 680px) {
  .app-sidebar { gap: 10px; }
  .brand-block .brand-script { font-size: 14px !important; }
  .side-nav__link { padding: 0 10px; }
  .primary-create span { display: none; }
}

/* Dates in the trailing column must not wrap onto two lines. */
.data-table td.is-right, .data-table th.is-right,
.comparison-table td.is-right, .comparison-table th.is-right { white-space: nowrap; }
.data-table--dashboard col:last-child, .data-table--analysis col:last-child { width: 11%; }

/* ============================ Brand lockups ============================ */

/* Sidebar top: ArtBlood (the company). Light variant, transparent PNG. */
.brand-block { display: flex; align-items: center; padding: 8px 8px 18px; border-bottom: 1px solid var(--nav-line); }
.brand-logo { width: 132px; height: auto; max-height: 26px; object-fit: contain; display: block; filter: none; opacity: 1; transition: opacity .14s ease; }
.brand-block--link:hover .brand-logo { opacity: .82; }

/* Sidebar bottom-left: Auto Cell (the product). */
.sidebar-product { margin-top: auto; padding: 16px 8px 2px; border-top: 1px solid var(--nav-line); }
.sidebar-product img { width: 104px; height: auto; object-fit: contain; display: block; opacity: .92; }

/* Landing + guest header/footer: Auto Cell in brand colours. */
.lp-brand img { width: 138px; height: auto; max-height: 34px; object-fit: contain; }
.lp-footer__brand img { width: 108px; height: auto; max-height: 26px; object-fit: contain; }
.guest-brand img { width: 138px; height: auto; max-height: 34px; object-fit: contain; }
@media (max-width: 680px) {
  .lp-brand img { width: 118px; }
  .guest-brand img { width: 118px; }
}

/* ============================ Audit fixes ============================ */

/* Analysis header: the memo row keeps the text and its edit button side by side
   in view mode, but the textarea must take the full row and stay inside the
   column (it was 720px wide inside a 642px container). */
.report-head .analysis-memo-editor {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 100%;
}
.report-head .analysis-memo-editor > p { margin: 0; max-width: 560px; }
.report-head .analysis-memo-editor > .analysis-memo-input,
.report-head .analysis-memo-editor > .inline-edit-actions,
.report-head .analysis-memo-editor > .inline-error { flex: 1 0 100%; }
.analysis-memo-input { width: 100%; max-width: 660px; min-height: 88px; }

/* Inline edit rows: the save/cancel pair should match the field it belongs to. */
.analysis-title-editor, .editable-page-title { flex-wrap: wrap; gap: 8px 10px; }
.analysis-title-input, .editable-page-title input { height: 46px; max-width: 100%; }
.analysis-title-editor .inline-edit-actions .ui-button,
.editable-page-title .inline-edit-actions .ui-button { height: 46px; }
.inline-edit-actions { gap: 8px; }

/* CLAUDE.md sets an 11px floor; the SD line under each ratio was 10px. */
.ratio-cell small { font-size: 11px; }

/* The v5 topbar grid sits after the old responsive override and was winning at
   narrow widths, so the hidden search still reserved a 240px track. */
@media (max-width: 1120px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .global-search { display: none; }
  /* The product mark belongs at the foot of the vertical rail, not in the
     horizontal mobile bar. */
  .sidebar-product { display: none; }
  .brand-logo { width: 104px; max-height: 22px; }
}
@media (max-width: 680px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px; }
  .brand-logo { width: 92px; max-height: 20px; }
  .page-actions { align-items: stretch; }
  .page-actions .ui-button { width: 100%; min-width: 0; }
}

/* Keep the inline title field narrow enough that save/cancel stay on the same
   row at the header's column width instead of wrapping below. */
.analysis-title-input, .editable-page-title input { width: min(460px, 100%); }

/* ============================================================
   Responsive overrides, last. Earlier passes appended plain rules
   after the media queries and silently won at narrow widths — keep
   every viewport-dependent override below everything else.
   ============================================================ */
@media (max-width: 1120px) {
  .lp-deep__grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-band__grid { grid-template-columns: 1fr; }
  .lp-band__grid article + article { border-left: 0; border-top: 1px solid var(--lp-line); }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .global-search { display: none; }
  .sidebar-product { display: none; }
}
@media (max-width: 680px) {
  .lp-deep { margin-top: 64px; padding: 52px 0; }
  .lp-cta { padding: 64px 0; }
  .lp-cta__panel { padding: 48px 20px; border-radius: 20px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-section { padding-top: 64px; }
  .lp-hero { padding-top: 52px; }
  .lp-hero__cta .lp-btn, .lp-cta__actions .lp-btn { width: 100%; }
  .lp-header__actions .lp-btn--ghost { display: none; }
  .lp-container { width: calc(100% - 32px); }
}

/* ============================================================
   Landing v2 — commercial SaaS tone.
   Left-aligned, restrained surfaces, no glow blobs or gradient
   hero panels (they read as generic AI-template design).
   ============================================================ */

.lp { background: #fff; }
.lp-container { width: min(1160px, calc(100% - 48px)); }

/* Brand lockups use the real logo files. */
.lp-brand img { width: 132px; height: auto; max-height: 30px; object-fit: contain; }
.lp-footer__brand img { width: 116px; height: auto; max-height: 27px; object-fit: contain; }
.guest-brand img { width: 132px; height: auto; max-height: 30px; object-fit: contain; }

.lp-header { background: rgba(255, 255, 255, .88); }
.lp-header__inner { height: 68px; }
.lp-nav a { font-size: 14px; }

/* ---------- Hero: asymmetric, no radial glows ---------- */
.lp-hero { position: relative; padding: 76px 0 0; overflow: hidden; background: linear-gradient(180deg, #f7f8fc 0%, #fff 78%); }
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 520px;
  background-image: radial-gradient(circle at 1px 1px, rgba(14, 19, 32, .07) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%);
  pointer-events: none;
}
.lp-hero__inner { display: block; text-align: left; }
.lp-hero__copy { position: relative; max-width: 720px; text-align: left; }
.lp-hero h1 {
  margin: 22px 0 0;
  max-width: none;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -0.032em;
}
.lp-hero__sub { margin: 20px 0 0; max-width: 620px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.72; }
.lp-hero__cta { margin-top: 30px; justify-content: flex-start; }
.lp-hero__points {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.lp-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-muted);
  font-size: 13.5px;
  font-weight: 540;
}
.lp-hero__points li::before {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--lp-soft) center / 9px 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.lp-hero__shot { position: relative; margin-top: 52px; padding-bottom: 8px; }

/* ---------- Sections ---------- */
.lp-section { padding: 96px 0 0; }
.lp-section--tight { padding-top: 84px; }
.lp-section__head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.lp-section__head--left { margin-left: 0; margin-right: 0; text-align: left; }
.lp-section__head--left p { margin-left: 0; margin-right: 0; }
.lp-section__head h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.026em; }

/* ---------- Before / after ---------- */
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-compare__col {
  padding: 26px 26px 28px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: #fbfbfd;
}
.lp-compare__col--after { border-color: var(--brand-line); background: #fafaff; }
.lp-compare__tag {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-muted);
  font-size: 12px;
  font-weight: 620;
}
.lp-compare__col--after .lp-compare__tag { border-color: var(--brand-line); color: var(--brand-2); background: var(--lp-soft); }
.lp-compare ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.lp-compare li { position: relative; padding-left: 26px; color: var(--lp-text); font-size: 14.5px; line-height: 1.6; }
.lp-compare li::before {
  content: "";
  position: absolute;
  left: 2px; top: .52em;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: #b6bccb;
}
.lp-compare__col--after li::before {
  top: .3em;
  width: 15px; height: 15px;
  background: center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Features: 3 x 2, flat cards ---------- */
.lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-feature { padding: 26px 24px 28px; border-radius: var(--radius-lg); box-shadow: none; background: #fbfbfd; }
.lp-feature:hover { transform: none; border-color: var(--line-strong); background: #fff; box-shadow: var(--shadow-md); }
.lp-feature__icon { width: 40px; height: 40px; margin-bottom: 18px; border-radius: 11px; }
.lp-feature__icon svg { width: 19px; height: 19px; }
.lp-feature strong { font-size: 15.5px; font-weight: 680; }
.lp-feature p { font-size: 13.5px; line-height: 1.68; }

/* ---------- Use cases ---------- */
.lp-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--lp-line);
  gap: 1px;
}
.lp-cases article { padding: 24px 24px 26px; background: #fff; }
.lp-cases strong { display: block; color: var(--lp-ink); font-size: 15px; font-weight: 670; }
.lp-cases p { margin: 8px 0 0; color: var(--lp-muted); font-size: 13.5px; line-height: 1.62; }

/* ---------- Steps: horizontal rail ---------- */
.lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--lp-line); }
.lp-step { padding: 26px 24px 4px; border: 0; border-radius: 0; background: none; }
.lp-step + .lp-step { border-left: 1px solid var(--lp-line); }
.lp-step::before {
  content: "0" counter(step);
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--lp-soft);
  color: var(--brand-2);
  font-size: 11.5px;
  font-weight: 700;
}
.lp-step strong { font-size: 15px; }
.lp-step p { font-size: 13.5px; }

/* ---------- Trust ---------- */
.lp-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-trust article { padding: 24px; border: 1px solid var(--lp-line); border-radius: var(--radius-lg); background: #fff; }
.lp-trust strong { display: block; color: var(--lp-ink); font-size: 15px; font-weight: 670; }
.lp-trust p { margin: 9px 0 0; color: var(--lp-muted); font-size: 13.5px; line-height: 1.66; }

/* ---------- FAQ ---------- */
.lp-faq { border-top: 1px solid var(--lp-line); }
.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq summary {
  padding: 20px 44px 20px 0;
  position: relative;
  color: var(--lp-ink);
  font-size: 15.5px;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5px;
  border-right: 2px solid #98a2b3;
  border-bottom: 2px solid #98a2b3;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-faq summary:hover { color: var(--brand-2); }
.lp-faq p { margin: -4px 0 0; padding: 0 48px 22px 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.74; }

/* ---------- CTA: bordered panel, not a purple gradient ---------- */
.lp-cta { padding: 96px 0; }
.lp-cta__panel {
  padding: 44px 44px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #f7f8fc, #fff);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  text-align: left;
}
.lp-cta__panel h2 {
  margin: 0;
  max-width: 22em;
  color: var(--lp-ink);
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.28;
  font-weight: 720;
  letter-spacing: -0.022em;
}
.lp-cta__panel p { margin: 11px 0 0; max-width: 30em; color: var(--lp-muted); font-size: 14.5px; }
.lp-cta__actions { margin: 0; justify-content: flex-start; }

/* ---------- Footer ---------- */
.lp-footer__inner { padding: 34px 0; align-items: center; }
.lp-footer__brand { flex-direction: column; align-items: flex-start; gap: 9px; }
.lp-footer__brand span { color: var(--lp-muted); font-size: 12.5px; }
.lp-footer__copy { color: var(--faint); font-size: 12.5px; }

/* Auth card: real logo instead of the "AC" placeholder tile. */
.auth-card__logo { width: 128px; height: auto; max-height: 30px; margin: 0 auto 18px; object-fit: contain; display: block; }
.auth-card__head { margin-bottom: 24px; }

/* Sidebar: the ArtBlood mark is the customer's brand, shown in solid white so
   it stays legible on the navy rail. */
.brand-logo { width: 124px; max-height: 24px; }
.sidebar-product img { width: 108px; opacity: .95; }

/* Landing responsive — must stay after every plain rule above. */
@media (max-width: 1120px) {
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-trust { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .lp-step { border-top: 1px solid var(--lp-line); }
  .lp-step:nth-child(odd) { border-left: 0; }
  .lp-step + .lp-step { border-left: 1px solid var(--lp-line); }
  .lp-deep__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .lp-compare { grid-template-columns: 1fr; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-cases { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-step, .lp-step + .lp-step { border-left: 0; }
  .lp-cta__panel { padding: 32px 24px; }
  .lp-cta__actions { width: 100%; }
  .lp-hero { padding-top: 52px; }
  .lp-hero__shot { margin-top: 36px; }
  .lp-section { padding-top: 64px; }
  .lp-cta { padding: 64px 0; }
  .lp-footer__inner { align-items: flex-start; }
}

/* ============================================================
   Landing v3 — interactive hero demo, bento features, rhythm
   ============================================================ */

/* Sidebar product mark: small and secondary to the customer logo above it. */
.sidebar-product { padding: 14px 8px 0; }
.sidebar-product img { width: 74px; opacity: .58; transition: opacity .15s ease; }
.app-sidebar:hover .sidebar-product img { opacity: .8; }

/* ---------- Hero demo ---------- */
.lpd { --lpd-line: #e6e9f0; }
.lpd__head {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--lpd-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.lpd__head h3 { margin: 0; color: var(--lp-ink); font-size: 14.5px; font-weight: 670; }
.lpd__head p { margin: 4px 0 0; color: var(--lp-muted); font-size: 12.5px; }
.lpd__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-2);
  font-size: 11.5px;
  font-weight: 620;
  white-space: nowrap;
}
.lpd__badge i { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }

.lpd__body { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 14px; }

.lpd__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: #0a0d15;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.lpd__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.lpd__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lpd__clip canvas { position: absolute; inset: 0; display: block; }

.lpd__label {
  position: absolute;
  top: 12px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 13, 21, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  pointer-events: none;
}
.lpd__label--before { left: 12px; }
.lpd__label--after { right: 12px; }

.lpd__divider {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 5;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px rgba(10, 13, 21, .28);
  pointer-events: none;
}
.lpd__handle {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(10, 13, 21, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  touch-action: none;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .7);
  transition: transform .12s ease, background .12s ease;
}
.lpd__handle:hover { background: rgba(10, 13, 21, .92); transform: translate(-50%, -50%) scale(1.06); }
.lpd__handle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(129, 140, 248, .7); }
.lpd__handle svg { width: 17px; height: 17px; }

.lpd__scalebar { position: absolute; right: 14px; bottom: 12px; z-index: 4; color: #fff; font-size: 10.5px; opacity: .85; text-align: right; pointer-events: none; }
.lpd__scalebar i { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: #fff; }
.lpd__hint {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 4;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--lp-ink);
  font-size: 11.5px;
  font-weight: 620;
  pointer-events: none;
  animation: lpd-nudge 2.6s ease-in-out infinite;
}
@keyframes lpd-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .lpd__hint { animation: none; } }

.lpd__side { border: 1px solid var(--lpd-line); border-radius: 12px; background: #fff; padding: 13px; display: grid; align-content: start; gap: 11px; }
.lpd__file span { display: block; color: var(--faint); font-size: 10.5px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.lpd__file strong { display: block; margin-top: 3px; color: var(--lp-ink); font-size: 14px; font-weight: 650; }
.lpd__rows { display: grid; gap: 6px; }
.lpd__row {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lpd-line);
  border-radius: 9px;
  background: #fff;
  display: grid;
  grid-template-columns: 16px 9px minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, opacity .13s ease;
}
.lpd__row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.lpd__row--all { grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-2); font-weight: 620; cursor: default; }
.lpd__row--all .lpd__name { color: var(--lp-ink); }
.lpd__check {
  width: 15px; height: 15px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .13s ease;
}
.lpd__check svg { width: 10px; height: 10px; }
.lpd__dot { width: 9px; height: 9px; border-radius: 999px; }
.lpd__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lp-text); }
.lpd__row strong { min-width: 26px; text-align: right; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lpd__row em { min-width: 38px; text-align: right; color: var(--lp-muted); font-style: normal; font-variant-numeric: tabular-nums; }
.lpd__row.is-off { opacity: .45; }
.lpd__row.is-off .lpd__check { background: #cdd4e0; }
.lpd__row.is-off .lpd__check svg { opacity: 0; }
.lpd__note { margin: 2px 0 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }

/* ---------- Bento features ---------- */
.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-bento .lp-feature { margin: 0; }
.lp-feature--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 26px;
  align-items: center;
}
.lp-feature--wide .lp-feature__body { min-width: 0; }

.lp-minitable {
  position: relative;
  padding: 14px 15px 30px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
.lp-minitable__head,
.lp-minitable__row { display: grid; grid-template-columns: minmax(0, 1fr) 1.15fr 1.15fr; gap: 12px; align-items: center; }
.lp-minitable__head { padding-bottom: 9px; border-bottom: 1px solid var(--lp-line); }
.lp-minitable__head span { color: var(--faint); font-size: 10.5px; font-weight: 640; }
.lp-minitable__head span + span { text-align: left; }
.lp-minitable__row { padding: 11px 0 0; }
.lp-minitable__name { color: var(--lp-ink); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-minitable__bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.lp-minitable__bar i { height: 6px; border-radius: 999px; box-shadow: inset 0 0 0 100px currentColor; }
.lp-minitable__bar em { color: var(--lp-muted); font-size: 11px; font-style: normal; }
.lp-minitable__foot { position: absolute; left: 15px; bottom: 10px; color: var(--faint); font-size: 10.5px; }

/* ---------- Use case icons ---------- */
.lp-cases article { display: grid; gap: 0; }
.lp-cases__icon {
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  background: #fbfbfd;
  color: var(--brand);
  display: grid;
  place-items: center;
}
.lp-cases__icon svg { width: 17px; height: 17px; }

/* ---------- Section rhythm: alternate surfaces ---------- */
.lp-section { padding: 92px 0; }
.lp-section--alt { background: #f7f8fc; border-block: 1px solid var(--lp-line); }
.lp-section--tight { padding: 84px 0; }
.lp-hero { padding-bottom: 84px; }
.lp-hero__shot { margin-top: 44px; }
.lp-deep { margin-top: 0; }
.lp-cta { padding: 92px 0; }

/* The stage clipped the drag handle once the divider reached an edge, so the
   handle could no longer be grabbed. Round the layers instead of the stage. */
.lpd__stage { overflow: visible; }
.lpd__stage img { border-radius: 12px; }
.lpd__clip { border-radius: 12px; }
.lpd__divider { top: 0; bottom: 0; }

/* Balance the demo: a shorter stage plus the note pinned low keeps the side
   panel from ending in a block of dead white space. */
.lpd__stage { aspect-ratio: 16 / 9; }
.lpd__side { align-content: stretch; grid-template-rows: auto auto 1fr; }
.lpd__note { margin-top: auto; padding-top: 4px; }

/* ---------- Landing v3 responsive (keep last) ---------- */
@media (max-width: 1120px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-feature--wide { grid-column: span 2; grid-template-columns: 1fr; gap: 22px; }
  .lpd__body { grid-template-columns: 1fr; }
  .lpd__side { grid-template-rows: none; align-content: start; }
  .lpd__note { margin-top: 0; }
}
@media (max-width: 760px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-feature--wide { grid-column: span 1; }
  /* Three tracks do not fit a phone: give the condition name its own line and
     let the two class bars share the row below it. */
  .lp-minitable__head { grid-template-columns: 1fr 1fr; }
  .lp-minitable__head span:first-child { display: none; }
  .lp-minitable__row { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .lp-minitable__name { grid-column: 1 / -1; }
  .lpd__stage { aspect-ratio: 4 / 3; }
  .lpd__label { font-size: 10.5px; padding: 3px 8px; }
  .lpd__hint { display: none; }
  .lpd__body { padding: 12px; }
}

/* ============================================================
   Accessibility pass — measured contrast + focus indicators
   Ratios below are against the surface each token actually sits on.
   ============================================================ */
:root {
  /* was #667085 → 4.45:1 on white, just under AA for body text */
  --muted: #5f6a80;   /* 5.44:1 */
  /* was #98a2b3 → 2.58:1, well under AA and used for real copy */
  --faint: #6b7587;   /* 4.65:1 */
}
.lp { --lp-muted: #5f6a80; }

/* Sidebar section labels sat at 3.43:1 on the navy rail. */
.side-nav__label { color: #8b95ad; }          /* 6.24:1 on #0e1320 */
.brand-block .brand-meta > span { color: #8b95ad; }
.sidebar-note span { color: #8b95ad; }

/* The avatar gradient's light end put white text at ~3.6:1. */
.avatar { background: linear-gradient(140deg, #4f46e5, #3730a3); }  /* 4.87:1 */

/* Class checkboxes in the evidence panel had no keyboard focus indicator. */
.evidence-count-row input:focus-visible,
.filter-bar input:focus-visible,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.evidence-count-row:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.evidence-contact-sheet button:focus-visible,
.dense-item:focus-visible,
.analysis-group-card:focus-visible,
.status-strip__item:focus-visible,
.work-option:focus-visible,
.lpd__row:focus-visible,
.lp-btn:focus-visible,
.lp-nav a:focus-visible,
.lp-faq summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--brand);
}
.data-table__primary:focus-visible,
.eyebrow a:focus-visible,
.lp-footer__links a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Table name links were 20px tall — thin to tap. Give them real vertical room. */
.data-table__primary { display: inline-block; padding: 3px 0; }

/* #6b7587 cleared AA on white (4.65) but not on the page background (4.26).
   #646f86 is the lightest grey that clears 4.5 on every surface we use:
   white 5.05 · surface-2 4.82 · alt 4.76 · bg 4.63. */
:root { --faint: #646f86; }
.lp { --lp-muted: #5f6a80; }

/* ============================================================
   Landing v4 — animated hero geometry, contact form, footer
   ============================================================ */

/* ---------- Hero decoration ---------- */
.lp-hero { position: relative; isolation: isolate; }
.lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: rgba(79, 70, 229, .18);
}
.lp-hero__rings {
  position: absolute;
  top: -170px; right: -150px;
  width: 760px; height: 760px;
  transform-origin: 50% 50%;
  animation: lp-spin 78s linear infinite;
}
.lp-hero__poly {
  position: absolute;
  top: 300px; right: 300px;
  width: 190px; height: 190px;
  color: rgba(14, 165, 233, .22);
  animation: lp-float 17s ease-in-out infinite, lp-spin-slow 120s linear infinite;
}
/* A soft band that travels across the field, echoing a detection pass. */
.lp-hero__sweep {
  position: absolute;
  top: 0; bottom: 0; left: -35%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(99, 102, 241, .12) 42%, rgba(56, 189, 248, .10) 58%, transparent);
  filter: blur(28px);
  animation: lp-sweep 15s ease-in-out infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-spin-slow { to { transform: rotate(-360deg); } }
@keyframes lp-float {
  0%, 100% { translate: 0 0; }
  50% { translate: -18px 26px; }
}
@keyframes lp-sweep {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero__rings, .lp-hero__poly, .lp-hero__sweep { animation: none; }
  .lp-hero__sweep { opacity: .5; left: 30%; }
}
@media (max-width: 900px) {
  .lp-hero__poly { display: none; }
  .lp-hero__rings { top: -220px; right: -300px; width: 620px; height: 620px; }
}

/* ---------- Contact section (replaces the old link-only CTA) ---------- */
.lp-contact { padding: 92px 0 96px; border-top: 1px solid var(--lp-line); background: linear-gradient(180deg, #f7f8fc, #fff 62%); }
.lp-contact__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: start; }
.lp-contact__copy h2 { margin: 0; color: var(--lp-ink); font-size: clamp(24px, 2.9vw, 33px); line-height: 1.24; font-weight: 730; letter-spacing: -0.024em; }
.lp-contact__copy > p { margin: 16px 0 0; max-width: 30em; color: var(--lp-muted); font-size: 14.5px; line-height: 1.72; }
.lp-contact__points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lp-contact__points li { display: flex; gap: 10px; color: var(--lp-text); font-size: 14px; line-height: 1.55; }
.lp-contact__points svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }
.lp-contact__points a { color: var(--brand-2); font-weight: 600; }

.lp-form-card {
  padding: 28px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(14, 19, 32, .05), 0 22px 48px -26px rgba(14, 19, 32, .18);
}
.lp-form { display: grid; gap: 15px; }
.lp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.lp-field { display: grid; gap: 7px; min-width: 0; }
.lp-field > span { color: var(--lp-text); font-size: 12.5px; font-weight: 600; }
.lp-field > span b { color: var(--brand); font-weight: 700; }
.lp-field input, .lp-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.lp-field input:hover, .lp-field textarea:hover { border-color: #b9c1d1; }
.lp-field input:focus, .lp-field textarea:focus { border-color: var(--brand); box-shadow: var(--ring); }
.lp-field input:invalid:not(:placeholder-shown) { border-color: var(--red-line); }
.lp-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-form__submit { width: 100%; margin-top: 3px; }
.lp-form__note { margin: 0; color: var(--faint); font-size: 12px; text-align: center; }

/* ---------- Footer ---------- */
.lp-footer__top {
  padding: 44px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
}
.lp-footer__brand { flex-direction: column; align-items: flex-start; gap: 14px; }
.lp-footer__brand p { margin: 0; color: var(--lp-muted); font-size: 13px; line-height: 1.65; }
.lp-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-footer__cols nav { display: grid; align-content: start; gap: 11px; }
.lp-footer__cols h3 { margin: 0 0 3px; color: var(--lp-ink); font-size: 12.5px; font-weight: 660; }
.lp-footer__cols a { color: var(--lp-muted); text-decoration: none; font-size: 13px; transition: color .13s ease; }
.lp-footer__cols a:hover { color: var(--brand-2); }
.lp-footer__bottom {
  padding: 18px 0 26px;
  border-top: 1px solid var(--lp-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.lp-footer__bottom small { color: var(--faint); font-size: 12.5px; }

/* Sidebar unhandled-inquiry count */
.side-nav__count {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

/* ---------- Landing v4 responsive (keep last) ---------- */
@media (max-width: 1120px) {
  .lp-contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-footer__top { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .lp-contact { padding: 64px 0 68px; }
  .lp-form-card { padding: 22px; }
  .lp-form__row { grid-template-columns: 1fr; }
  .lp-footer__cols { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .lp-footer__top { padding: 34px 0 28px; }
  .lp-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* FAQ ran 92px of padding into the contact section's 92px, leaving ~184px of
   dead space. The background change and border already mark the boundary. */
#faq.lp-section { padding-bottom: 72px; }
.lp-contact { padding-top: 72px; }
@media (max-width: 760px) {
  #faq.lp-section { padding-bottom: 52px; }
  .lp-contact { padding-top: 52px; }
}

/* ============================================================
   Entrance animations + section geometry (v5)
   ============================================================ */

/* ---------- Reveal on scroll ----------
   The `.reveal` class is added by reveal_controller at runtime, so content is
   never hidden when JS does not run. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .8, .28, 1), transform .55s cubic-bezier(.22, .8, .28, 1);
  will-change: opacity, transform;
}
.reveal--in { opacity: 1; transform: none; }
.reveal--in.reveal { will-change: auto; }

/* App shell reveals should feel instant, not cinematic. */
.app-content .reveal { transform: translateY(9px); transition-duration: .34s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--in { opacity: 1; transform: none; transition: none; }
}

/* ---------- Reusable geometric backdrop ---------- */
.geo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.geo > svg { position: absolute; display: block; }
.geo__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(79, 70, 229, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 70, 229, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(72% 60% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 60% at 50% 40%, #000, transparent 78%);
}
.geo__ring { color: rgba(79, 70, 229, .16); animation: lp-spin 96s linear infinite; transform-origin: 50% 50%; }
.geo__hex  { color: rgba(14, 165, 233, .20); animation: lp-float 20s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .geo__ring, .geo__hex { animation: none; }
}

/* Section-level placement. Content sits above the decoration. */
.lp-section, .lp-contact, .lp-deep { position: relative; }
.lp-section > .lp-container,
.lp-contact > .lp-container,
.lp-deep > .lp-container { position: relative; z-index: 1; }

.lp-section--alt .geo__ring { top: -240px; left: -180px; width: 620px; height: 620px; }
.lp-section--alt .geo__hex { right: 6%; bottom: -70px; width: 150px; height: 150px; }

#usecases .geo__ring { top: auto; bottom: -300px; left: auto; right: -160px; }
#security .geo__ring { top: -180px; left: auto; right: -220px; }

.lp-contact .geo__ring { top: -160px; right: -200px; width: 560px; height: 560px; }
.lp-contact .geo__hex { left: 4%; bottom: 40px; width: 120px; height: 120px; }

/* The dark workspace band gets light-on-dark geometry. */
.lp-deep .geo__grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
.lp-deep .geo__ring { color: rgba(165, 180, 252, .16); top: -260px; left: -140px; width: 640px; height: 640px; }
.lp-deep .geo__hex { color: rgba(129, 140, 248, .2); right: 3%; top: 40px; width: 130px; height: 130px; }

/* ---------- Auth pages ---------- */
.guest-shell { position: relative; overflow: hidden; }
.guest-shell > .guest-header, .guest-shell > .guest-content { position: relative; z-index: 1; }
.guest-shell .geo__grid { background-size: 58px 58px; mask-image: radial-gradient(64% 54% at 50% 34%, #000, transparent 76%); -webkit-mask-image: radial-gradient(64% 54% at 50% 34%, #000, transparent 76%); }
.guest-shell .geo__ring { top: 50%; left: 50%; width: 780px; height: 780px; margin: -390px 0 0 -390px; color: rgba(79, 70, 229, .13); }
.guest-shell .geo__hex { left: 12%; bottom: 12%; width: 150px; height: 150px; }
.guest-shell .geo__hex--two { left: auto; right: 11%; top: 16%; bottom: auto; width: 110px; height: 110px; animation-duration: 26s; animation-direction: reverse; }
@media (max-width: 760px) {
  .guest-shell .geo__hex, .guest-shell .geo__hex--two { display: none; }
  .guest-shell .geo__ring { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
  .lp-section--alt .geo__hex, .lp-contact .geo__hex, .lp-deep .geo__hex { display: none; }
}

/* ---------- Footer back-to-top ---------- */
.lp-footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 560;
  transition: color .13s ease;
}
.lp-footer__top-link svg { width: 14px; height: 14px; }
.lp-footer__top-link:hover { color: var(--brand-2); }

/* ---------- Hero entrance ----------
   CSS-only and fill-mode both, so it still plays if JS never runs. The reveal
   controller deliberately skips the hero: hiding above-the-fold content behind
   JS would risk a blank first paint and hurt LCP. */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}
.lp-hero__copy > *,
.lp-hero__shot { animation: lp-rise .68s cubic-bezier(.22, .8, .28, 1) both; }
.lp-hero__copy > .lp-kicker   { animation-delay: .04s; }
.lp-hero__copy > h1           { animation-delay: .11s; }
.lp-hero__copy > .lp-hero__sub { animation-delay: .19s; }
.lp-hero__copy > .lp-hero__cta { animation-delay: .27s; }
.lp-hero__copy > .lp-hero__points { animation-delay: .34s; }
.lp-hero__shot { animation-duration: .8s; animation-delay: .4s; }

/* Stagger the hero's capability chips individually. */
.lp-hero__points li { animation: lp-rise .5s cubic-bezier(.22, .8, .28, 1) both; }
.lp-hero__points li:nth-child(1) { animation-delay: .40s; }
.lp-hero__points li:nth-child(2) { animation-delay: .46s; }
.lp-hero__points li:nth-child(3) { animation-delay: .52s; }

/* Header drops in once, so the page does not feel like it snaps into place. */
.lp-header { animation: lp-fade .5s ease both; }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Auth card entrance. */
.auth-card { animation: lp-rise .6s cubic-bezier(.22, .8, .28, 1) both; animation-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero__copy > *, .lp-hero__shot, .lp-hero__points li,
  .lp-header, .auth-card { animation: none; }
}

/* The auth backdrop was rendering but at 13% alpha on a light surface it was
   effectively invisible. Raise it enough to read as intentional. */
.guest-shell .geo__ring { color: rgba(79, 70, 229, .26); }
.guest-shell .geo__hex { color: rgba(14, 165, 233, .30); }
.guest-shell .geo__grid {
  background-image:
    linear-gradient(to right, rgba(79, 70, 229, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 70, 229, .085) 1px, transparent 1px);
}
.guest-shell::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  z-index: 0;
  background:
    radial-gradient(42% 52% at 22% 32%, rgba(99, 102, 241, .16), transparent 68%),
    radial-gradient(38% 46% at 80% 22%, rgba(56, 189, 248, .13), transparent 70%);
  pointer-events: none;
}

/* Section geometry was equally faint against the tinted bands. */
.lp-section--alt .geo__ring, .lp-contact .geo__ring { color: rgba(79, 70, 229, .22); }
.lp-section--alt .geo__hex, .lp-contact .geo__hex { color: rgba(14, 165, 233, .26); }
.geo__grid {
  background-image:
    linear-gradient(to right, rgba(79, 70, 229, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 70, 229, .075) 1px, transparent 1px);
}

/* .auth-shell painted an opaque var(--bg) layer inside .guest-content (z-index 1),
   which sat directly on top of the decorative geometry and hid it completely.
   Keep only the translucent tint and let the backdrop show through. */
.auth-shell { background: radial-gradient(64% 46% at 50% 0%, rgba(79, 70, 229, .07), transparent 72%); }

/* Hairline strokes at 26% alpha were technically painted but read as nothing.
   Thicken and darken so the geometry is actually perceptible. */
.geo__ring circle { stroke-width: 1.7; }
.geo__hex polygon { stroke-width: 1.5; }
.guest-shell .geo__ring { color: rgba(79, 70, 229, .34); }
.guest-shell .geo__hex { color: rgba(14, 165, 233, .40); }
.lp-section--alt .geo__ring, .lp-contact .geo__ring { color: rgba(79, 70, 229, .26); }
.lp-section--alt .geo__hex, .lp-contact .geo__hex { color: rgba(14, 165, 233, .32); }
.lp-hero__rings circle { stroke-width: 1.6; }
.lp-hero__bg { color: rgba(79, 70, 229, .24); }
.lp-hero__poly { color: rgba(14, 165, 233, .30); }

/* ---------- Anchor scrolling ----------
   scroll-padding-top keeps a fragment target clear of the sticky header when
   the browser jumps on page load (e.g. the inquiry redirect to #contact).
   In-page clicks are animated by smooth_scroll_controller, which also honours
   prefers-reduced-motion; scroll-behavior is deliberately left off :root so
   Turbo's scroll restoration stays instant. */
html { scroll-padding-top: 88px; }
:target { scroll-margin-top: 88px; }
/* The section wrappers are focus targets for keyboard users after a jump. */
.lp section[id]:focus, .lp section[id]:focus-visible { outline: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  :target { scroll-margin-top: 76px; }
}