/* Static HTML mapping of the supplied AI Workbench Button, Filter, Form,
   Table, Modal, Tabs and SideSheet specifications. Reuses the host tokens. */
.sample-page { height:100%; min-height:0; overflow-y:auto; padding:28px 32px 36px; background:var(--surface); }
.sample-page svg, .sample-overlay svg { width:16px; height:16px; flex-shrink:0; }
.sample-page h1 { font-size:20px; line-height:28px; font-weight:600; color:var(--ink-strong); }
.sample-page h2, .sample-overlay h2, .s-comparison h2 { font-size:16px; line-height:24px; font-weight:600; }
.sample-page h3, .sample-overlay h3 { font-size:14px; line-height:20px; font-weight:600; }
.s-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.s-title-group, .s-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.s-title-group { gap:12px; }
.s-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 12px; border-radius:8px; background:transparent; color:var(--ink); white-space:nowrap; cursor:pointer; font-weight:500; transition:background 160ms,transform 100ms; }
.s-button:hover { background:var(--surface-hover); }
.s-button:active { transform:scale(.97); }
.s-button.primary { background:linear-gradient(180deg,#323232,#222222); color:var(--surface); }
.s-button.primary:hover { opacity:.92; }
.s-button.outline { border:1px solid var(--rule); background:var(--surface); }
.s-button.outline:hover { background:var(--surface-soft); }
.s-button.link { color:var(--accent); height:28px; padding:0 6px; font-size:12px; }
.s-button.small { height:28px; font-size:12px; padding:0 8px; }
.s-button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.s-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; flex-shrink:0; }
.s-icon:hover { color:var(--accent); background:var(--accent-soft); }
.s-icon.stat { width:24px; height:24px; margin-left:4px; vertical-align:middle; color:var(--faint); }
.s-icon.stat:hover { color:var(--accent); }
.s-filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.s-search { display:flex; align-items:center; gap:8px; height:36px; min-width:200px; width:280px; padding:0 12px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--faint); }
.s-search:focus-within { border-color:var(--faint); box-shadow:0 0 0 2px var(--surface-active); }
.s-search input { width:100%; min-width:0; outline:0; border:0; background:transparent; font-size:14px; color:var(--ink); }
.s-search input:focus-visible { outline:0; }
.s-search input::placeholder { color:var(--faint); }
.s-search .s-icon { width:20px; height:20px; }
.s-select { position:relative; display:flex; align-items:center; min-width:0; }
.s-select select { appearance:none; height:36px; width:100%; padding:0 32px 0 12px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); outline:0; cursor:pointer; font-size:13px; color:var(--ink); }
.s-select select:focus { border-color:var(--faint); box-shadow:0 0 0 2px var(--surface-active); }
.s-select > svg { position:absolute; right:10px; width:14px; height:14px; pointer-events:none; color:var(--faint); }
.s-filter .s-select { min-width:140px; max-width:240px; }
.s-filter .s-result { margin-left:auto; color:var(--muted); font-size:12px; }
.s-result b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.sample-page.is-detail { --cl-text-0:#121827; --cl-text-1:rgba(18,24,39,.8); --cl-text-2:rgba(18,24,39,.6); --cl-border:rgba(85,96,139,.12); display:flex; min-height:0; flex-direction:column; overflow:hidden; padding:24px 28px 28px; color:var(--cl-text-1); }
.s-list-toolbar { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.s-list-search-row, .s-list-filters { display:flex; align-items:center; gap:8px; }
.s-list-search-row .s-search { width:min(360px,100%); }
.s-list-search-row .s-button { height:36px; margin-left:auto; }
.s-list-filters { min-height:34px; flex-wrap:wrap; }
.s-list-filters .s-result { margin-left:auto; color:var(--muted); font-size:12px; }
.s-list-filters .s-select select { height:32px; min-width:92px; border:0; padding-left:10px; background:transparent; font-size:14px; }
.s-list-filters .s-select:hover select { background:var(--surface-soft); }
.s-list-filters .s-select > svg { right:8px; }
.s-mine-filter { display:inline-flex; height:32px; align-items:center; gap:7px; padding:0 10px; border-radius:7px; color:var(--ink-soft); cursor:pointer; }
.s-mine-filter:hover { background:var(--surface-soft); }
.s-mine-filter input { width:14px; height:14px; accent-color:var(--accent); }
.s-list-shell { overflow:visible; background:transparent; }
.s-list { display:flex; flex-direction:column; gap:12px; }
.s-list-card { position:relative; display:flex; min-height:74px; align-items:center; gap:24px; padding:16px 24px; border:1px solid #f1f4ff; border-radius:12px; background:#fcfcfd; cursor:pointer; transition:background-color 160ms,border-color 160ms,box-shadow 160ms; }
.s-list-card:hover { z-index:1; border-color:#dfe5fb; background:var(--surface); box-shadow:0 4px 14px rgba(31,42,84,.06); }
.s-list-card:focus-visible { z-index:2; outline:2px solid var(--accent); outline-offset:-2px; }
.s-list-card > svg { width:16px; height:16px; color:var(--faint); }
.s-list-lead { display:flex; width:280px; min-width:0; flex:0 0 280px; align-items:center; gap:12px; }
.s-sample-mark, .s-detail-mark { display:inline-flex; width:40px; height:40px; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:#75ad66; }
.s-sample-mark svg, .s-detail-mark svg { width:20px; height:20px; }
.s-list-lead > div { min-width:0; }
.s-list-lead strong { display:block; overflow:hidden; color:var(--ink-strong); font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.s-list-lead small { display:flex; align-items:center; gap:5px; margin-top:3px; color:var(--muted); font-size:12px; }
.s-list-lead small svg { width:13px; height:13px; }
.s-list-fields { display:grid; min-width:0; flex:1; grid-template-columns:1.2fr .85fr .8fr 1fr 1.05fr; gap:18px; align-items:center; }
.s-list-fields > div { min-width:0; }
.s-list-fields dt { margin-bottom:3px; color:var(--muted); font-size:11px; white-space:nowrap; }
.s-list-fields dd { min-height:22px; overflow:hidden; color:var(--ink); font-size:13px; line-height:22px; text-overflow:ellipsis; white-space:nowrap; }
.s-label-stack { display:flex; min-width:0; align-items:center; gap:4px; overflow:hidden; }
.s-label-stack .s-tag { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-list-footer { display:flex; min-height:48px; align-items:center; justify-content:center; padding:12px 16px; color:var(--muted); font-size:12px; }
.s-detail-header { display:grid; flex:0 0 auto; grid-template-columns:32px 48px minmax(0,1fr) auto; gap:12px; align-items:start; padding-bottom:16px; }
.s-detail-back { display:flex; width:32px; height:32px; align-items:center; justify-content:center; margin-top:4px; border-radius:7px; background:transparent; color:var(--ink-soft); cursor:pointer; }
.s-detail-back:hover { background:var(--surface-hover); color:var(--ink); }
.s-detail-back svg { width:18px; height:18px; }
.s-detail-mark { width:48px; height:48px; border-color:var(--rule-soft); }
.s-detail-mark svg { width:22px; height:22px; }
.s-detail-heading { min-width:0; }
.s-detail-title-line { display:flex; min-width:0; align-items:center; gap:8px; }
.s-detail-title-line h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-detail-meta { display:flex; min-width:0; align-items:center; gap:6px; margin-top:6px; overflow:hidden; color:var(--muted); font-size:12px; white-space:nowrap; }
.s-detail-meta b { color:var(--ink-soft); font-weight:500; }
.s-detail-divider { width:1px; height:12px; flex:0 0 auto; margin:0 4px; background:var(--rule); }
.s-detail-heading > p { display:flex; min-width:0; gap:4px; margin-top:5px; overflow:hidden; color:var(--ink-soft); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.s-detail-heading > p span { flex:0 0 auto; color:var(--muted); }
.s-detail-actions { display:flex; align-items:center; gap:8px; padding-top:5px; }
.s-detail-workspace { display:grid; min-height:0; flex:1; grid-template-columns:284px minmax(0,1fr); gap:10px; }
.s-detail-side, .s-detail-main { min-height:0; border:1px solid var(--cl-border); border-radius:16px; background:#fff; }
.s-detail-side { display:flex; flex-direction:column; overflow:hidden; padding:16px; }
.s-detail-tabs { display:grid; flex:0 0 auto; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:8px; background:var(--surface-soft); }
.s-detail-tabs button { display:flex; height:32px; align-items:center; justify-content:center; gap:6px; border-radius:6px; background:transparent; color:var(--cl-text-2); cursor:pointer; font-size:14px; font-weight:500; }
.s-detail-tabs button:hover { color:var(--cl-text-0); }
.s-detail-tabs button[aria-selected=true] { background:#fff; color:var(--cl-text-0); box-shadow:0 1px 4px rgba(18,24,39,.10); }
.s-detail-tabs svg { width:15px; height:15px; }
.s-detail-side-scroll { min-height:0; overflow-y:auto; padding:12px 0 0; }
.s-distribution-total { display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.s-distribution-total span { color:var(--cl-text-0); font-size:14px; font-weight:500; }
.s-distribution-total strong { color:var(--cl-text-0); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.s-bar-group + .s-bar-group { margin-top:14px; }
.s-bar-group h3 { margin-bottom:4px; color:var(--cl-text-0); font-size:14px; font-weight:500; }
.s-bar-row { display:flex; width:calc(100% + 12px); min-height:24px; gap:6px; align-items:center; margin-left:-6px; padding:4px 6px; border-radius:4px; background:transparent; cursor:pointer; text-align:left; }
.s-bar-row:hover, .s-bar-row.active { background:#f7f8fa; }
.s-bar-label { width:64px; min-width:64px; overflow:hidden; color:var(--cl-text-1); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.s-bar-track { position:relative; display:flex; height:12px; min-width:0; flex:1; align-items:center; overflow:visible; background:#fcfcfd; }
.s-bar-track i { position:absolute; inset:0 auto 0 0; min-width:2px; background:#e8e9ed; transition:width 180ms ease,background-color 160ms; }
.s-bar-percent, .s-bar-action { position:absolute; top:50%; right:3px; color:var(--cl-text-2); font-size:12px; line-height:16px; transform:translateY(-50%); font-variant-numeric:tabular-nums; }
.s-bar-action { right:-1px; padding:2px 4px; border-radius:8px; background:#121827; color:#fff; font-weight:500; opacity:0; transition:opacity 120ms; }
.s-bar-row:hover .s-bar-percent, .s-bar-row.active .s-bar-percent { opacity:0; }
.s-bar-row:hover .s-bar-action, .s-bar-row.active .s-bar-action { opacity:1; }
.s-bar-row.active .s-bar-track i { background:#d7dae0; }
.s-sampling-intro { padding:14px; border-radius:8px; background:var(--surface-soft); }
.s-sampling-intro strong { font-size:13px; font-weight:600; }
.s-sampling-intro p { margin-top:6px; color:var(--ink-soft); font-size:12px; line-height:19px; }
.s-sampling-list { display:grid; grid-template-columns:1fr; gap:0; margin-top:12px; }
.s-sampling-list > div { padding:11px 2px; border-bottom:1px solid var(--rule-soft); }
.s-sampling-list dt { color:var(--muted); font-size:11px; }
.s-sampling-list dd { margin-top:4px; color:var(--ink); font-size:13px; word-break:break-word; }
.s-detail-main { display:flex; flex-direction:column; gap:10px; overflow:hidden; padding:12px 16px 0; color:var(--cl-text-1); }
.s-detail-main-head { display:flex; min-height:32px; flex:0 0 auto; align-items:center; gap:12px; padding:0; }
.s-detail-main-head > div { display:flex; width:100%; align-items:center; gap:12px; }
.s-detail-main-head h2 { color:var(--cl-text-0); font-size:16px; font-weight:500; }
.s-detail-main-head small, .s-detail-main-head > span { margin-left:auto; color:var(--cl-text-2); font-size:12px; text-align:right; }
.s-detail-main .s-case-filters { flex:0 0 auto; padding:12px 16px; }
.s-detail-main .s-case-filters .s-filter { margin:0; }
.s-detail-main .s-case-filters .s-search { width:min(360px,100%); }
.s-detail-main .s-case-filters .s-result { margin-left:auto; }
.s-detail-main .s-case-filters .s-select,
.s-detail-main .s-case-filters [data-s-action="more-filters"],
.s-detail-main .s-case-filters [data-s-action="reset-cases"],
.s-detail-main .s-case-filters .s-extra-filters,
.s-detail-main .s-case-filters .s-active-filters { display:none !important; }
.s-detail-main .s-case-filters .s-select { min-width:126px; }
.s-detail-main .s-case-filters .s-select select, .s-detail-main .s-case-filters .s-search { height:32px; }
.s-detail-main .s-case-filters .s-button { height:32px; }
.s-detail-main .s-extra-filters { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:180px; overflow-y:auto; }
.s-detail-table-wrap { min-height:0; flex:1; overflow:auto; }
.s-detail-table-wrap .s-table th { position:sticky; top:0; z-index:3; }
.s-detail-table-wrap .s-table.cases th:first-child { z-index:4; }
.s-detail-main > .s-table-footer { flex:0 0 auto; min-height:48px; border-top:0; padding:8px 0; }
.s-card { border:1px solid var(--rule); border-radius:12px; background:var(--surface); overflow:hidden; }
.s-table-scroll { overflow-x:auto; }
.s-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.s-table th { height:46px; padding:10px 14px; background:var(--surface-soft); color:var(--muted); border-bottom:1px solid var(--rule); font-size:12px; font-weight:500; white-space:nowrap; }
.s-table td { height:74px; padding:14px; border-bottom:1px solid var(--rule); vertical-align:middle; }
.s-table tr:last-child td { border-bottom:0; }
.s-table tbody tr[data-sample-id] { cursor:pointer; }
.s-table tbody tr:hover td { background:var(--surface-soft); }
.s-table tbody tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.s-table td strong { display:block; font-size:14px; font-weight:500; }
.s-table td small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.s-table td .s-note { display:-webkit-box; max-width:210px; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-soft); font-size:12px; line-height:20px; }
.s-table td .s-account-link { border:0; background:transparent; color:var(--ink); cursor:pointer; text-align:left; text-decoration:none; font-weight:500; font-size:14px; }
.s-table tr:hover .s-account-link, .s-account-link:hover { color:var(--accent); }
.s-table.samples { min-width:940px; }
.s-table.cases { min-width:1490px; }
.s-table.cases th:first-child, .s-table.cases td:first-child { position:sticky; left:0; z-index:1; background:var(--surface); min-width:225px; box-shadow:1px 0 0 var(--rule); }
.s-table.cases th:first-child { background:var(--surface-soft); z-index:2; }
.s-table.cases tbody tr:hover td:first-child { background:var(--surface-soft); }
.s-table.cases td:nth-child(2), .s-table.cases td:nth-child(3) { min-width:170px; max-width:200px; }
.s-table.cases td:nth-child(7) { min-width:220px; }
.s-detail-main .s-table { color:var(--cl-text-1); font-size:12px; }
.s-detail-main .s-table th { height:44px; padding:10px 14px; border-color:var(--cl-border); background:#fcfcfd; color:var(--cl-text-2); font-size:12px; font-weight:500; }
.s-detail-main .s-table td { height:74px; padding:12px 14px; border-color:var(--cl-border); color:var(--cl-text-1); }
.s-detail-main .s-table tbody tr:hover td { background:#fcfcfd; }
.s-detail-main .s-table td strong { color:var(--cl-text-0); font-size:12px; font-weight:500; }
.s-detail-main .s-table td small { margin-top:4px; color:var(--cl-text-2); font-size:12px; line-height:16px; }
.s-detail-main .s-table td .s-account-link { color:var(--cl-text-0); font-size:12px; font-weight:500; }
.s-detail-main .s-table td .s-account-link:hover { color:#3370ff; text-decoration:underline; text-underline-offset:3px; }
.s-detail-main .s-table.cases th:first-child { background:#fcfcfd; box-shadow:1px 0 0 var(--cl-border); }
.s-detail-main .s-table.cases td:first-child { background:#fff; box-shadow:1px 0 0 var(--cl-border); }
.s-detail-main .s-table.cases tbody tr:hover td:first-child { background:#fcfcfd; }
.sample-page,
.s-detail-side-scroll,
.s-detail-table-wrap {
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.sample-page::-webkit-scrollbar,
.s-detail-side-scroll::-webkit-scrollbar,
.s-detail-table-wrap::-webkit-scrollbar {
  width:6px;
  height:6px;
}
.sample-page::-webkit-scrollbar-track,
.s-detail-side-scroll::-webkit-scrollbar-track,
.s-detail-table-wrap::-webkit-scrollbar-track {
  background:transparent;
}
.sample-page::-webkit-scrollbar-thumb,
.s-detail-side-scroll::-webkit-scrollbar-thumb,
.s-detail-table-wrap::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:transparent;
}
.sample-page.is-scrolling,
.s-detail-side-scroll.is-scrolling,
.s-detail-table-wrap.is-scrolling {
  scrollbar-color:rgba(18,24,39,.28) transparent;
}
.sample-page.is-scrolling::-webkit-scrollbar-thumb,
.s-detail-side-scroll.is-scrolling::-webkit-scrollbar-thumb,
.s-detail-table-wrap.is-scrolling::-webkit-scrollbar-thumb {
  background:rgba(18,24,39,.28);
}
@media (min-width:1081px) {
  .s-detail-side { align-self:start; max-height:100%; }
}
.s-tag { display:inline-flex; align-items:center; min-height:22px; border-radius:6px; padding:2px 7px; font-size:12px; line-height:18px; background:var(--surface-tint); color:var(--ink-soft); max-width:100%; }
.s-tag.blue { color:var(--accent); background:var(--accent-soft); }
.s-tag.green { color:var(--success); background:var(--success-soft); }
.s-tag.amber { color:var(--warning); background:var(--warning-soft); }
.s-tag.red { color:var(--danger); background:var(--danger-soft); }
.s-tag.orange { color:#c45f32; background:#fff3eb; }
.s-number { font-variant-numeric:tabular-nums; }
.s-table-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; border-top:1px solid var(--rule); padding:10px 14px; font-size:12px; color:var(--muted); }
.s-pagination { display:flex; align-items:center; gap:6px; }
.s-pagination .s-select { width:92px; }
.s-pagination select { height:28px; padding-left:8px; font-size:12px; }
.s-pagination .s-button[aria-current=page] { color:var(--accent); background:var(--accent-soft); }
.s-empty { padding:48px 20px; text-align:center; color:var(--muted); }
.s-empty strong { display:block; margin-bottom:8px; color:var(--ink); font-weight:500; }
.s-breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:12px; color:var(--muted); }
.s-breadcrumb button { background:transparent; color:var(--muted); font:inherit; cursor:pointer; }
.s-breadcrumb button:hover { color:var(--accent); }
.s-breadcrumb svg { width:12px; height:12px; }
.s-description { color:var(--muted); margin-top:8px; font-size:13px; line-height:20px; }
.s-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 20px; border-bottom:1px solid var(--rule); }
.s-section-head small { color:var(--muted); font-size:12px; }
.s-info-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 24px; padding:20px; }
.s-info-grid dt { color:var(--muted); font-size:12px; margin-bottom:6px; }
.s-info-grid dd { color:var(--ink); font-size:14px; word-break:break-word; }
.s-info-grid dd.count { font-size:22px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.s-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0 24px; }
.s-chart-card { padding:18px 20px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); min-width:0; }
.s-chart-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; }
.s-chart-title span { font-size:12px; color:var(--muted); }
.s-distribution { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:center; min-height:170px; }
.s-donut { position:relative; width:150px; height:150px; }
.s-donut svg { width:150px; height:150px; transform:rotate(-90deg); }
.s-donut circle.segment { transition:stroke-width 140ms; cursor:default; }
.s-donut circle.segment:hover { stroke-width:20; }
.s-donut-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:none; }
.s-donut-label strong { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
.s-donut-label span { margin-top:4px; font-size:12px; color:var(--muted); }
.s-legend { display:flex; flex-direction:column; gap:11px; min-width:0; }
.s-legend-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; column-gap:8px; align-items:center; font-size:12px; }
.s-legend-dot { width:8px; height:8px; border-radius:2px; }
.s-legend-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
.s-legend-values { display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.s-legend-values small { color:var(--faint); min-width:30px; text-align:right; font-size:11px; }
.s-legend-values b { color:var(--ink); font-weight:500; min-width:44px; text-align:right; }
.s-chart-foot { margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); font-size:12px; color:var(--muted); }
.s-case-filters { padding:16px 20px; border-bottom:1px solid var(--rule); }
.s-case-filters .s-filter { margin-bottom:0; }
.s-extra-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; padding:16px; background:var(--surface-soft); border-radius:8px; }
.s-extra-filters label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.s-active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.s-filter-chip { display:flex; align-items:center; gap:4px; min-height:24px; border-radius:6px; padding:0 4px 0 8px; background:var(--surface-tint); font-size:12px; color:var(--ink-soft); }
.s-filter-chip button { width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--muted); border-radius:4px; cursor:pointer; }
.s-filter-chip button:hover { background:var(--surface-active); }
.s-filter-chip svg { width:12px; height:12px; }
.s-progress { display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:12px; }
.s-progress > span { width:48px; height:4px; background:var(--surface-tint); border-radius:4px; overflow:hidden; }
.s-progress i { display:block; height:100%; background:#73b7a5; }
.sample-overlay { position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(9,9,11,.28); backdrop-filter:blur(2px); }
.sample-overlay.s-sheet-layer { padding:0; justify-content:flex-end; }
.s-dialog { width:min(680px,100%); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-float); overflow:hidden; animation:s-enter 180ms ease; }
.s-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--rule); }
.s-dialog-head p { font-size:12px; line-height:20px; margin-top:4px; color:var(--muted); }
.s-dialog-body { min-height:0; overflow-y:auto; padding:24px; }
.s-dialog-foot { display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; gap:8px; padding:16px 24px; border-top:1px solid var(--rule); background:var(--surface); }
.s-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
.s-form-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.s-form-field.full { grid-column:1/-1; }
.s-form-field > label, .s-form-field > legend { color:var(--ink-soft); font-size:14px; font-weight:600; }
.s-form-field em { color:var(--danger); font-style:normal; }
.s-form-field input:not([type=file]), .s-form-field textarea { width:100%; border:1px solid var(--rule); border-radius:8px; padding:8px 12px; background:var(--surface); outline:0; font-size:14px; }
.s-form-field input:not([type=file]) { height:36px; }
.s-form-field input:focus, .s-form-field textarea:focus { border-color:var(--faint); box-shadow:0 0 0 2px var(--surface-active); }
.s-form-field input[readonly] { background:var(--surface-soft); color:var(--muted); }
.s-form-field textarea { min-height:108px; resize:vertical; font-size:13px; line-height:20px; }
.s-form-field small { font-size:12px; color:var(--muted); line-height:18px; }
.s-source-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.s-source-tab { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:12px 4px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); cursor:pointer; font-size:12px; color:var(--ink-soft); }
.s-source-tab[aria-selected=true] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.s-source-tab:hover { background:var(--surface-soft); }
.s-upload { position:relative; display:flex; min-height:124px; align-items:center; justify-content:center; flex-direction:column; gap:6px; border:1px dashed #d4d4d8; border-radius:8px; background:var(--surface); cursor:pointer; padding:16px; }
.s-upload:hover, .s-upload.dragover { background:var(--surface-soft); border-color:var(--accent); }
.s-upload:focus-within { outline:2px solid var(--focus-ring); outline-offset:2px; }
.s-upload svg { width:24px; height:24px; color:var(--muted); margin-bottom:4px; }
.s-upload span { font-size:13px; font-weight:500; }
.s-upload small { font-size:12px; color:var(--muted); }
.s-upload input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.s-import-preview { background:var(--surface-soft); border:1px solid var(--rule); border-radius:8px; padding:12px; font-size:12px; color:var(--muted); }
.s-import-preview strong { display:block; color:var(--ink); font-weight:500; margin-bottom:4px; }
.s-import-preview strong svg { display:inline-block; vertical-align:middle; margin-right:6px; color:var(--success); }
.s-import-preview .s-table td, .s-import-preview .s-table th { height:auto; padding:8px; font-size:12px; }
.s-import-preview .s-table { margin-top:8px; }
.s-form-error { color:var(--danger); background:var(--danger-soft); padding:10px 12px; border-radius:8px; font-size:12px; margin-top:16px; }
.s-form-note { display:flex; gap:8px; padding:12px; border-radius:8px; background:var(--accent-soft); color:var(--ink-soft); font-size:12px; line-height:20px; }
.s-form-note svg { margin-top:2px; color:var(--accent); }
.s-sheet { width:min(680px,100vw); height:100dvh; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--rule); box-shadow:var(--shadow-float); animation:s-slide 200ms ease; }
.s-sheet.history { width:min(420px,100vw); }
.s-sheet .s-dialog-head { min-height:64px; padding:14px 20px; }
.s-sheet .s-dialog-body { flex:1; padding:20px; }
.s-sheet.history .s-dialog-body { padding:14px 16px 22px; }
.s-sheet .s-sheet-meta { margin-top:4px; font-size:12px; color:var(--muted); font-weight:400; word-break:break-all; }
.s-case-tags { display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px; }
.s-tabs { display:flex; gap:20px; border-bottom:1px solid var(--rule); padding:0 20px; flex-shrink:0; }
.s-tabs button { background:transparent; padding:0 0 12px; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; font-size:13px; white-space:nowrap; }
.s-tabs button[aria-selected=true] { border-color:var(--accent); color:var(--accent); font-weight:500; }
.s-case-section + .s-case-section { margin-top:24px; }
.s-case-section h3 { margin-bottom:12px; }
.s-case-box { padding:14px 16px; border-radius:8px; background:var(--surface-soft); color:var(--ink-soft); font-size:13px; line-height:22px; }
.s-conclusion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.s-conclusion-grid span { font-size:12px; color:var(--muted); }
.s-conclusion-grid strong { display:block; font-size:16px; margin:6px 0; font-weight:500; color:var(--ink); }
.s-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.s-fact { display:flex; gap:8px; border:1px solid var(--rule); border-radius:8px; padding:12px; font-size:12px; color:var(--ink-soft); }
.s-fact b { color:var(--faint); font-weight:500; }
.s-agent-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); }
.s-agent-row > div { flex:1; }
.s-agent-row p { color:var(--muted); font-size:12px; margin-top:4px; line-height:20px; }
.s-rubric-row { display:grid; grid-template-columns:48px minmax(0,1fr) 80px 40px; align-items:center; gap:8px; padding:14px 0; border-bottom:1px solid var(--rule); font-size:13px; }
.s-rubric-row code { color:var(--muted); font-size:12px; }
.s-score-dots { display:flex; gap:4px; }
.s-score-dots i { width:10px; height:10px; border-radius:3px; background:var(--surface-tint); }
.s-score-dots i.active { background:#e4a084; }
.s-timeline { border-left:1px solid var(--rule); padding-left:20px; margin-left:5px; }
.s-timeline article { position:relative; padding-bottom:24px; }
.s-timeline article::before { content:""; position:absolute; top:7px; left:-25px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--surface); }
.s-timeline strong { font-size:13px; font-weight:500; }
.s-timeline p, .s-timeline small { color:var(--muted); font-size:12px; margin-top:5px; }
.s-snapshot-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.s-snapshot-fields dt { font-size:12px; color:var(--muted); }
.s-snapshot-fields dd { margin-top:4px; font-size:13px; color:var(--ink); }
.s-history-list { display:flex; flex-direction:column; gap:12px; }
.s-history-list .version-item .version-change span { display:inline; line-height:20px; }
.s-history-list .version-item strong { font-size:16px; }
.s-history-list .version-item .s-version-count { margin-top:10px; font-size:13px; color:var(--ink-soft); }
.s-historical-note { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 14px; margin-bottom:20px; border-radius:8px; background:var(--warning-soft); color:var(--warning); font-size:12px; }
.s-comparison { position:fixed; inset:0; z-index:110; background:#f5f6f8; display:flex; flex-direction:column; min-width:320px; }
.s-comparison-top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; padding:0 20px; background:var(--surface); border-bottom:1px solid var(--rule); flex-shrink:0; }
.s-comparison-top strong { font-size:16px; font-weight:600; }
.s-comparison-top small { font-size:12px; color:var(--muted); }
.s-comparison-body { flex:1; min-height:0; overflow-y:auto; padding:28px; }
.s-comparison-inner { width:min(1120px,100%); margin:0 auto; }
.s-comparison-inner h1 { font-size:20px; font-weight:600; }
.s-compare-selectors { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); gap:12px; align-items:end; padding:16px; margin:20px 0; border:1px solid var(--rule); border-radius:12px; background:var(--surface); }
.s-compare-selectors label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--muted); }
.s-compare-count { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding:20px; }
.s-compare-count span { font-size:12px; color:var(--muted); }
.s-compare-count strong { display:block; margin-top:8px; font-size:28px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.s-compare-count p { margin-top:6px; font-size:12px; color:var(--muted); }
.s-compare-section { margin-top:20px; }
.s-compare-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.s-compare-chart { padding:20px; min-width:0; }
.s-compare-chart + .s-compare-chart { border-left:1px solid var(--rule); }
.s-compare-chart > p { margin-bottom:16px; color:var(--muted); font-size:12px; }
.s-compare-bars { display:flex; min-height:170px; flex-direction:column; justify-content:center; gap:6px; }
.s-compare-chart .s-bar-row { width:100%; margin-left:0; padding:4px 0; }
.s-compare-chart .s-bar-label { width:116px; min-width:116px; }
.s-bar-row-readonly { cursor:default; }
.s-bar-row-readonly:hover { background:transparent; }
.s-bar-row-readonly:hover .s-bar-percent { opacity:1; }
.s-diff-table { border-top:1px solid var(--rule); }
.s-diff-table th, .s-diff-table td { height:40px; padding:10px 20px; font-size:12px; }
.s-diff-up { color:var(--danger); }
.s-diff-down { color:var(--success); }
.s-stat-context { color:var(--muted); font-size:12px; margin-bottom:20px; }
.s-stat-chart .s-distribution { grid-template-columns:180px 1fr; gap:28px; }
.s-stat-chart .s-donut, .s-stat-chart .s-donut svg { width:180px; height:180px; }
.s-stat-chart .s-legend { gap:14px; max-height:340px; overflow-y:auto; padding-right:4px; }
.s-stat-table { max-height:260px; overflow-y:auto; margin-top:24px; border:1px solid var(--rule); border-radius:8px; }
.s-stat-table th { position:sticky; top:0; }
.s-stat-table td { height:40px; padding:10px 14px; }
.s-mobile-nav { display:none; }
@keyframes s-enter { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes s-slide { from { transform:translateX(100%); } to { transform:translateX(0); } }
@media (max-width:1280px) {
  .sample-page { padding:24px; }
  .sample-page.is-detail { padding:20px; }
  .s-list-card { gap:18px; padding:14px 18px; }
  .s-list-lead { width:240px; flex-basis:240px; }
  .s-list-fields { gap:12px; }
  .s-detail-workspace { grid-template-columns:288px minmax(0,1fr); }
  .s-detail-side { padding:16px; }
  .s-distribution { grid-template-columns:130px minmax(0,1fr); gap:14px; }
  .s-donut, .s-donut svg { width:130px; height:130px; }
  .s-chart-card { padding:16px; }
}
@media (max-width:1080px) {
  .sample-page.is-detail { overflow-y:auto; }
  .s-list-card { align-items:flex-start; }
  .s-list-fields { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:10px; }
  .s-detail-header { grid-template-columns:32px 48px minmax(0,1fr); }
  .s-detail-actions { grid-column:3; padding-top:0; }
  .s-detail-workspace { display:flex; flex-direction:column; flex:0 0 auto; overflow:visible; }
  .s-detail-side { max-height:470px; flex:0 0 auto; }
  .s-detail-main { min-height:650px; flex:0 0 auto; }
  .s-distribution { grid-template-columns:1fr; justify-items:center; gap:16px; }
  .s-legend { width:100%; }
  .s-info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s-filter .s-result { margin-left:0; }
}
@media (max-width:760px) {
  .sample-page { height:calc(100dvh - 56px); overflow-y:auto; padding:20px 16px 32px; }
  .sample-page.is-detail { display:block; padding:16px 12px 28px; }
  .s-head { align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
  .s-list-head { width:100%; align-items:stretch; flex-direction:column; }
  .s-list-head .s-button { align-self:flex-start; }
  .s-list-search-row { align-items:flex-start; flex-direction:column; }
  .s-list-search-row .s-search { width:100%; }
  .s-list-search-row .s-button { align-self:flex-end; }
  .s-list-search-row .s-result { margin-left:0; }
  .s-list-filters { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .s-list-filters .s-select { width:100%; min-width:0; }
  .s-list-filters .s-select select { width:100%; }
  .s-list-filters .s-button { justify-self:start; }
  .s-list-filters .s-result { grid-column:1/-1; margin-left:0; }
  .s-list-card { flex-direction:column; gap:14px; padding:16px; }
  .s-list-card > svg { position:absolute; top:20px; right:14px; }
  .s-list-lead { width:100%; flex-basis:auto; padding-right:20px; }
  .s-list-fields { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
  .s-list-footer { align-items:center; flex-direction:row; }
  .s-detail-header { grid-template-columns:32px 42px minmax(0,1fr); padding-bottom:14px; }
  .s-detail-mark { width:42px; height:42px; }
  .s-detail-title-line { align-items:flex-start; flex-wrap:wrap; }
  .s-detail-title-line h1 { width:100%; overflow:visible; white-space:normal; }
  .s-detail-meta { flex-wrap:wrap; overflow:visible; white-space:normal; }
  .s-detail-divider { display:none; }
  .s-detail-heading > p { white-space:normal; }
  .s-detail-actions { width:100%; grid-column:1/-1; justify-content:flex-start; }
  .s-detail-actions .s-button { min-width:0; flex:1; }
  .s-detail-side { max-height:520px; margin-top:4px; }
  .s-detail-main { min-height:720px; margin-top:12px; }
  .s-detail-main-head { align-items:flex-start; flex-direction:column; }
  .s-detail-main .s-case-filters .s-search { width:100%; }
  .s-detail-main .s-case-filters .s-select { flex:1; min-width:132px; }
  .s-detail-main .s-extra-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .s-actions { gap:4px; }
  .s-filter .s-search { width:100%; }
  .s-filter .s-select { flex:1; min-width:130px; max-width:none; }
  .s-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; gap:16px; }
  .s-chart-grid { grid-template-columns:1fr; }
  .s-distribution { grid-template-columns:125px minmax(0,1fr); justify-items:stretch; gap:16px; }
  .s-donut, .s-donut svg { width:125px; height:125px; }
  .s-donut-label strong { font-size:20px; }
  .s-chart-card { padding:16px; }
  .s-legend-values { gap:4px; }
  .s-legend-values small { display:none; }
  .s-section-head, .s-case-filters { padding:14px 16px; }
  .s-section-head { flex-wrap:wrap; }
  .s-table-footer { flex-wrap:wrap; }
  .s-extra-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sample-overlay { padding:12px; }
  .s-dialog { max-height:calc(100dvh - 24px); border-radius:12px; }
  .s-dialog-head { padding:16px; }
  .s-dialog-body { padding:20px 16px; }
  .s-dialog-foot { padding:12px 16px; }
  .s-form-grid { grid-template-columns:1fr; gap:16px; }
  .s-source-tabs { grid-template-columns:repeat(2,1fr); }
  .s-sheet .s-dialog-body { padding:20px 16px; }
  .s-tabs { gap:16px; padding:0 16px; }
  .s-facts, .s-conclusion-grid { grid-template-columns:1fr; }
  .s-rubric-row { grid-template-columns:42px minmax(0,1fr) 64px 30px; font-size:12px; }
  .s-score-dots { gap:3px; }
  .s-score-dots i { width:9px; height:9px; }
  .s-comparison-top { padding:0 12px; }
  .s-comparison-top > small { display:none; }
  .s-comparison-body { padding:20px 12px; }
  .s-compare-count { gap:10px; padding:16px; }
  .s-compare-count strong { font-size:24px; }
  .s-compare-charts { grid-template-columns:1fr; }
  .s-compare-chart + .s-compare-chart { border-left:0; border-top:1px solid var(--rule); }
  .s-diff-table th, .s-diff-table td { padding:10px 12px; }
  .s-stat-chart .s-distribution { grid-template-columns:1fr; justify-items:center; }
  .s-stat-chart .s-legend { width:100%; max-height:220px; }
  .s-stat-chart .s-donut, .s-stat-chart .s-donut svg { width:150px; height:150px; }
  .s-mobile-nav { display:flex; gap:4px; margin-bottom:16px; padding:3px; border-radius:8px; background:var(--surface-tint); }
  .s-mobile-nav button { flex:1; background:transparent; padding:7px 4px; font-size:12px; border-radius:6px; color:var(--muted); cursor:pointer; }
  .s-mobile-nav button[aria-current=page] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
}
@media (prefers-reduced-motion:reduce) {
  .s-dialog, .s-sheet { animation:none; }
}