/* NXT DEFEND - product stylesheet. Loaded only on NXT DEFEND pages (layout.ts adds /assets/p/defend.css
   after the shared layers). Personality: secure, technical, precise, intelligent - a command center.
   Black and white only: severity and state are drawn (solid block = high/fail/lost, hatching =
   medium/warning, dashed = unverified, ring = informational) and always labelled in words.
   Hexagon cells (the DEFEND motif) are the bullet and texture. Tokens only. */

@layer product {
  /* ---------- Identity ---------- */
  .p-defend { --df-hatch: repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 4px); --df-hex: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
  .df-kicker { margin: 0; font: 600 var(--t-overline)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
  .df-domain { font: 600 0.875rem/1.4 var(--font-mono); overflow-wrap: anywhere; }
  a.df-domain { color: var(--c-text); }
  .df-cell-domain { display: grid; gap: 4px; }
  .df-cell-domain .df-domain { white-space: nowrap; }
  .df-disclaimer { max-width: 80ch; margin-top: var(--s-6); }

  /* ---------- Score meter (10 cells + number + band word) ---------- */
  .df-score { display: inline-grid; grid-template-columns: auto auto auto; grid-template-areas: 'num cells band'; gap: 4px 8px; align-items: center; color: var(--c-text); vertical-align: middle; }
  .df-score-num { grid-area: num; font: 650 0.9375rem/1 var(--font-mono); }
  .df-score-num small { font-size: 0.7em; font-weight: 500; color: var(--c-muted); }
  .df-score-band { grid-area: band; font: 600 0.625rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
  .df-cells { grid-area: cells; display: grid; grid-template-columns: repeat(10, 6px); gap: 2px; }
  .df-cells i { height: 8px; border-radius: 1px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
  .df-cells i.on { background: currentColor; box-shadow: none; }
  .df-score.is-weak .df-cells i.on { background: var(--df-hatch); box-shadow: inset 0 0 0 1px currentColor; }
  .df-score.is-weak .df-score-band { color: var(--c-text); }
  .df-score-lg { grid-template-columns: auto auto; grid-template-areas: 'num num' 'cells band'; gap: 10px 14px; align-items: center; }
  .df-score-lg .df-score-num { font: 650 clamp(3rem, 2.2rem + 2.6vw, 4.5rem)/0.9 var(--font-display); letter-spacing: -0.04em; }
  .df-score-lg .df-score-num small { font: 500 1rem/1 var(--font-mono); letter-spacing: 0; margin-left: 4px; }
  .df-score-lg .df-cells { grid-template-columns: repeat(10, 14px); gap: 3px; }
  @media (max-width: 400px) { .df-score-lg { grid-template-areas: 'num' 'cells' 'band'; grid-template-columns: auto; gap: 8px; } }
  .df-score-lg .df-cells i { height: 14px; border-radius: 2px; }
  .df-score-lg .df-score-band { font-size: var(--t-caption); }

  /* ---------- Ownership, severity, criticality, tags ---------- */
  .df-verify { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--c-text); border-radius: var(--r-xs); font: 600 var(--t-caption)/18px var(--font-sans); color: var(--c-text); white-space: nowrap; }
  .df-verify.is-unverified { border-style: dashed; color: var(--c-muted); border-color: var(--c-muted); }
  .df-verify.is-lost { background: var(--c-text); color: var(--c-surface); }
  .df-sev { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--t-caption); }
  .df-sev.is-none { color: var(--c-muted); }
  .df-sev.is-clear { gap: 5px; font-weight: 600; }
  .df-sev-n { display: inline-flex; gap: 4px; align-items: baseline; padding: 1px 7px; border: 1px solid var(--c-border-strong); border-radius: var(--r-xs); line-height: 18px; white-space: nowrap; }
  .df-sev-n b { font: 700 0.75rem/1 var(--font-mono); }
  .df-sev-n.is-high { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .df-sev-n.is-medium { border: 1px dashed var(--c-text); background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-text) 14%, transparent) 0 1.5px, transparent 1.5px 4px); }
  .df-sev-n.is-low { color: var(--c-muted); }
  .df-crit { display: inline-block; padding: 1px 7px; border-radius: var(--r-xs); font: 600 0.6875rem/18px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--c-border-strong); color: var(--c-muted); }
  .df-crit.is-critical { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .df-crit.is-high { border: 2px solid var(--c-text); color: var(--c-text); line-height: 16px; }
  .df-crit.is-medium { border-color: var(--c-text); color: var(--c-text); }
  .df-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-xs); background: var(--c-surface2); border: 1px solid var(--c-border); font: 600 0.6875rem/18px var(--font-sans); color: var(--c-muted); white-space: nowrap; vertical-align: middle; }
  .df-tag.is-on { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface); }
  .df-trend { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); white-space: nowrap; }

  /* ---------- Command band ---------- */
  .df-command { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-5); padding: clamp(var(--s-5), 3vw, var(--s-8)); border-radius: var(--r-xl); border: 1px solid #262626;
    background: #0A0A0A; color: #F5F5F5; color-scheme: dark;
    --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-surface: #0A0A0A; --c-surface2: #000000; --c-border: #262626; --c-border-strong: #3D3D3D; --c-link: #FFFFFF; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-on-primary: #000000; }
  .df-command::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(60% 100% at 0% 0%, rgb(255 255 255 / 0.10), transparent 70%), linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
  @media (min-width: 900px) { .df-command { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); align-items: center; } }
  .df-command-score { display: grid; gap: var(--s-3); justify-items: start; }
  .df-command-score h2 { color: var(--c-muted); }
  .df-explain { font-size: var(--t-small); color: var(--c-muted); }
  .df-explain summary { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .df-explain p { margin: var(--s-2) 0 0; max-width: 52ch; }
  .df-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-border); overflow: hidden; }
  .df-readout div { padding: var(--s-3) var(--s-4); background: #0A0A0A; }
  .df-readout dt { font: 600 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
  @media (max-width: 400px) { .df-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .df-readout dd { margin: 6px 0 0; font: 650 1.75rem/1 var(--font-mono); }
  .df-readout dd small { font-size: 0.875rem; color: var(--c-muted); }
  .df-readout .is-high { background: #F5F5F5; } .df-readout .is-high dt, .df-readout .is-high dd { color: #0A0A0A; }
  .df-readout .is-medium { background: #0A0A0A repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.12) 0 1.5px, transparent 1.5px 5px); }

  /* ---------- Grids, panes, sections ---------- */
  .df-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: var(--s-5); }
  @media (min-width: 1180px) { .df-grid { grid-template-columns: minmax(0, 1fr) 320px; } .df-grid.df-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .df-main, .df-side { display: grid; gap: var(--s-5); min-width: 0; }
  .df-pane { min-width: 0; padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--c-border); border-top: 2px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  .df-pane-head, .df-section-head, .df-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-4); }
  .df-pane-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
  .df-pane-head h2::before, .df-section-head h2::before { content: ''; width: 10px; height: 10px; background: currentColor; clip-path: var(--df-hex); }
  .df-pane-tag { font: 500 var(--t-caption)/1.4 var(--font-mono); color: var(--c-muted); white-space: nowrap; text-decoration: none; }
  a.df-pane-tag:hover { color: var(--c-text); text-decoration: underline; }
  .df-section { margin-bottom: var(--s-5); min-width: 0; }
  .df-section-head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 640 var(--t-h3)/1.3 var(--font-display); letter-spacing: -0.01em; }
  .df-big { margin: 0 0 var(--s-2); font: 650 2rem/1 var(--font-mono); }
  .df-big small { font: 500 var(--t-small)/1 var(--font-sans); color: var(--c-muted); }
  .df-side .usage { margin-top: var(--s-4); }
  .df-more { margin: var(--s-3) 0 0; }
  .df-clear { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-2) 0; }
  .df-clear p { margin: 0; }

  /* ---------- Attention queue ---------- */
  .df-attn { list-style: none; margin: 0; padding: 0; display: grid; }
  .df-attn > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; }
  .df-attn > li + li { border-top: 1px solid var(--c-border); }
  .df-attn a:not(.btn) { color: var(--c-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
  .df-attn a:not(.btn):hover { text-decoration: underline; }
  .df-attn p { margin: 2px 0 0; font: 400 var(--t-caption)/1.5 var(--font-mono); color: var(--c-muted); overflow-wrap: anywhere; }
  .df-attn-mark { width: 12px; height: 12px; margin-top: 5px; background: var(--c-text); color: var(--c-text); }
  .is-warn > .df-attn-mark { background: var(--df-hatch); box-shadow: inset 0 0 0 1px var(--c-text); }
  .is-info > .df-attn-mark { background: transparent; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-muted); }
  @media (max-width: 520px) { .df-attn > li { grid-template-columns: auto minmax(0, 1fr); } .df-attn > li > .btn { grid-column: 2; justify-self: start; } }

  /* ---------- Asset tiles ---------- */
  .df-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .df-tile { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast); }
  .df-tile:hover { border-color: var(--c-text); transform: translateY(-2px); box-shadow: var(--e-2); }
  .df-tile.is-unverified { border-style: dashed; border-color: var(--c-border-strong); }
  .df-tile.is-lost { border: 2px solid var(--c-text); padding: calc(var(--s-4) - 1px); }
  .df-tile-head { display: flex; gap: var(--s-2); align-items: center; justify-content: space-between; min-width: 0; }
  .df-tile-domain { min-width: 0; font: 600 0.875rem/1.3 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .df-tile-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; }
  .df-tile-when { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }

  /* ---------- Area tallies ---------- */
  .df-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
  .df-areas li { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: 'name n' 'bar bar'; gap: 6px var(--s-3); align-items: center; font-size: var(--t-small); }
  .df-area-name { grid-area: name; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
  .df-area-n { grid-area: n; justify-self: end; font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .df-area-n b { color: var(--c-text); }
  .df-area-bar { grid-area: bar; display: block; height: 8px; border-radius: 1px; background: var(--df-hatch); color: var(--c-border-strong); overflow: hidden; }
  .df-area-bar i { display: block; height: 100%; background: var(--c-text); }
  .df-areas.is-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }

  /* ---------- Events ---------- */
  .df-events { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
  .df-events > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: 8px 0; }
  .df-events > li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 34px; bottom: -6px; width: 1px; background: var(--c-border-strong); }
  .df-ev-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-muted); }
  .is-alert > .df-ev-mark { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
  .df-events a { color: var(--c-text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
  .df-events a:hover { text-decoration: underline; }
  .df-events p { margin: 2px 0 0; font: 400 var(--t-caption)/1.5 var(--font-mono); color: var(--c-muted); }
  .df-ev-domain { color: var(--c-text); font-weight: 600; }
  .df-log { display: grid; margin-top: var(--s-5); border: 1px solid var(--c-border); border-top: 2px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  .df-log-day { display: grid; gap: var(--s-2) var(--s-5); padding: var(--s-4) var(--s-5); }
  .df-log-day + .df-log-day { border-top: 1px solid var(--c-border); }
  @media (min-width: 900px) { .df-log-day { grid-template-columns: 170px minmax(0, 1fr); } .df-log-date { position: sticky; top: calc(var(--layout-header) + var(--s-4)); align-self: start; padding-top: 12px; } }
  .df-log-date { margin: 0; font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }

  /* ---------- Asset / run hero ---------- */
  .df-asset-hero { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-5); padding: var(--s-5); border: 1px solid var(--c-border); border-top: 3px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  @media (min-width: 900px) { .df-asset-hero { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .df-asset-hero.is-run { grid-template-columns: auto minmax(0, 1fr) minmax(200px, 0.8fr); } }
  .df-asset-score, .df-asset-state, .df-asset-run { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
  .df-asset-score > p, .df-asset-state > p, .df-asset-run > p { margin: 0; }
  .df-asset-state > .df-kicker + p { margin-bottom: var(--s-2); }
  .df-run { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* ---------- Findings ---------- */
  .df-group { margin-top: var(--s-5); }
  .df-group-head { justify-content: flex-start; margin-bottom: var(--s-2); }
  .df-group-head h2, .df-group-head h3 { margin: 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .df-group-head .df-pane-tag { margin-left: auto; }
  .df-findings { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
  .df-finding + .df-finding { border-top: 1px solid var(--c-border); }
  .df-finding > details > summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 10px var(--s-4); min-height: 44px; cursor: pointer; list-style: none; }
  .df-finding > details > summary::-webkit-details-marker { display: none; }
  .df-finding > details > summary:hover { background: var(--c-surface2); }
  .df-finding.is-fail > details > summary { box-shadow: inset 4px 0 0 var(--c-text); }
  .df-finding.is-warn > details > summary { box-shadow: inset 4px 0 0 var(--c-border-strong); }
  .df-finding-title { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
  .df-finding-group, .df-finding-asset { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); white-space: nowrap; }
  .df-finding-body { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px dashed var(--c-border-strong); background: var(--c-surface2); }
  .df-finding-body p { margin: 0; }
  .df-finding-body pre { margin: 0; max-height: 240px; overflow: auto; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .df-label { font: 600 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
  .df-fix { max-width: 75ch; font-size: var(--t-small); }
  .df-mark { display: inline-flex; align-items: center; gap: 7px; font: 600 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
  .df-mark i { flex: none; width: 10px; height: 10px; background: var(--c-text); }
  .df-mark.is-pass i { border-radius: 50%; }
  .df-mark.is-warn i { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
  .df-mark.is-info i { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-muted); }
  .df-mark.is-pass, .df-mark.is-info { color: var(--c-muted); }
  .df-mark-sev { font-weight: 500; text-transform: none; color: var(--c-muted); }
  @media (max-width: 639px) { .df-finding > details > summary { grid-template-columns: minmax(0, 1fr) auto; } .df-finding-title { grid-column: 1 / -1; grid-row: 2; } }

  /* ---------- Runs history ---------- */
  .df-runs { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; }
  .df-runs li + li { border-top: 1px solid var(--c-border); }
  .df-runs a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto 40px; gap: var(--s-3); align-items: center; padding: 8px 4px; color: var(--c-text); text-decoration: none; font-size: var(--t-small); }
  .df-runs a:hover { background: var(--c-surface2); }
  .df-runs-when { font: 500 var(--t-caption)/1.4 var(--font-mono); }
  .df-runs-score { font: 650 0.875rem/1 var(--font-mono); text-align: right; }
  @media (max-width: 520px) { .df-runs a { grid-template-columns: minmax(0, 1fr) auto; } .df-runs a > span:nth-child(2), .df-runs a > span:nth-child(3) { display: none; } }
  .df-pane .chart-fig .chart, .df-pane .chart-axis { height: 120px; }

  /* ---------- Side rails ---------- */
  .df-side-form { display: grid; gap: var(--s-3); align-content: start; min-width: 0; padding-bottom: var(--s-5); }
  .df-side-form + .df-side-form { padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
  .df-side-form h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 0.75rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
  .df-side-form h2::before { content: ''; width: 10px; height: 10px; background: currentColor; clip-path: var(--df-hex); }
  .df-side-form > p { margin: 0; }
  .df-side-form .form { display: grid; gap: var(--s-3); }
  .df-side-form .row { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
  .df-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; font-size: var(--t-small); }
  .df-kv dt { margin-top: var(--s-2); font: 600 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
  .df-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .df-kv code { font-size: 0.75rem; overflow-wrap: anywhere; }
  .df-kv.is-wide { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: baseline; }
  .df-kv.is-wide dt { margin: 0; }
  .df-details > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; font-size: var(--t-small); }
  .df-details[open] > summary { margin-bottom: var(--s-3); }

  /* ---------- First run ---------- */
  .df-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .df-steps li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: 1px solid var(--c-border); border-top: 2px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  .df-steps-n { font: 600 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .df-steps h2 { margin: var(--s-2) 0 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .df-steps p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }

  /* ---------- Reports ---------- */
  .df-report-hero { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: center; margin-bottom: var(--s-6); padding: var(--s-6); border: 1px solid var(--c-border); border-top: 3px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  @media (min-width: 900px) { .df-report-hero { grid-template-columns: minmax(0, 1fr) auto; } }
  .df-report-hero h2 { margin: var(--s-1) 0 var(--s-2); }
  .df-report-hero p { margin: 0; max-width: 62ch; }
  .df-reports { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
  .df-reports li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); }
  @media (min-width: 720px) { .df-reports li { grid-template-columns: minmax(0, 1fr) 140px auto; } }
  .df-reports li + li { border-top: 1px solid var(--c-border); }
  .df-reports-main { display: grid; gap: 2px; min-width: 0; }
  .df-print-head { padding-bottom: var(--s-4); border-bottom: 3px solid var(--c-text); }
  .df-print-head h1 { margin: var(--s-1) 0; }
  .df-print-summary, .df-print-asset { padding: var(--s-5) 0; border-bottom: 1px solid var(--c-border); break-inside: avoid-page; }
  .df-print-asset-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
  .df-print-asset-head h2 { margin: 0; font: 600 1.25rem/1.3 var(--font-mono); }
  @media print { .df-noprint { display: none !important; } .df-finding details > summary { box-shadow: none !important; } }

  /* ---------- Tools ---------- */
  .df-tools { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; margin-top: var(--s-4); }
  .df-tools.is-single { grid-template-columns: minmax(0, 640px); }
  .df-tool { margin: 0; border-top: 2px solid var(--c-text); }
  .df-tool h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-h4); }
  .df-tool h2::before { content: ''; width: 10px; height: 10px; background: currentColor; clip-path: var(--df-hex); }
  .df-tool input[type='password'], .df-tool textarea, .df-tool input[type='text'] { font-family: var(--font-mono); }
  .df-tool pre[data-out]:empty { display: none; }
  .df-tool pre[data-out] { margin: 0; max-height: 300px; overflow: auto; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .df-kanon { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
  .df-kanon li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border-left: 1px solid var(--c-border); }
  .df-kanon li:first-child { border-left: 0; }
  .df-kanon .num { font: 600 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .df-kanon p { margin: 0; font-size: var(--t-small); }
  .df-kanon code { font-size: 0.6875rem; overflow-wrap: anywhere; }
  @media (max-width: 720px) { .df-kanon li { border-left: 0; border-top: 1px solid var(--c-border); } .df-kanon li:first-child { border-top: 0; } }

  .df-first .empty { margin-bottom: 0; }

  /* =========================== Landing page (dfl-*) =========================== */
  .dfl-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 96px);
    --c-bg: #050505; --c-surface: #0E0E0E; --c-surface2: #000000; --c-elevated: #1A1A1A; --c-border: #262626; --c-border-strong: #3D3D3D;
    --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-subtle: #6B6B6B; --c-link: #FFFFFF; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-primary-hover: #D6D6D6; --c-primary-soft: #262626; --c-on-primary: #000000; --c-accent: #FFFFFF; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000;
    --c-error: #FFFFFF; --c-on-error: #000000; --c-error-soft: #2B2B2B;
    background: var(--c-bg); color: var(--c-text); color-scheme: dark; }
  .dfl-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 55% at 78% 28%, rgb(255 255 255 / 0.10), transparent 70%), radial-gradient(30% 40% at 5% 95%, rgb(255 255 255 / 0.06), transparent 70%); }
  .dfl-hero .btn-secondary { --b-bg: transparent; --b-fg: #fff; --b-bd: rgb(255 255 255 / 0.35); --b-hover: rgb(255 255 255 / 0.08); }
  .dfl-hero .btn:not(.btn-secondary) { --b-bg: #fff; --b-fg: #0A0A0A; --b-hover: #E3E3E3; }
  .dfl-hero-grid { display: grid; gap: clamp(var(--s-8), 4vw, var(--s-12)); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1024px) { .dfl-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
  .dfl-hero-copy { display: grid; gap: var(--s-5); }
  .dfl-hero-copy .lede { margin: 0; color: var(--c-muted); }
  .dfl-id { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
  .dfl-name { font: 650 1.125rem/1 var(--font-display); letter-spacing: 0.08em; }
  .dfl-hero h1 { margin: 0; color: #fff; font-size: clamp(2.375rem, 1.3rem + 3.9vw, 4.75rem); }
  .dfl-dim { color: #8C8C8C; }
  .dfl-facts { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); color: var(--c-muted); font-size: var(--t-small); }
  .dfl-facts li { display: flex; gap: var(--s-2); align-items: center; margin: 0; }
  .dfl-facts .i { color: #fff; }
  .dfl-lattice { width: min(100%, 460px); justify-self: center; }
  .dfl-lattice > svg { display: block; width: 100%; height: auto; overflow: visible; }
  .dfl-hero .df-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
  .dfl-cell polygon { fill: rgb(255 255 255 / 0.02); stroke: rgb(255 255 255 / 0.22); stroke-width: 1; }
  .dfl-cell.has-label polygon { fill: rgb(255 255 255 / 0.06); stroke: rgb(255 255 255 / 0.5); }
  .dfl-cell text { font: 600 8.5px/1 var(--font-mono); letter-spacing: 0.06em; fill: #D6D6D6; text-anchor: middle; }
  .dfl-cell polygon { animation: dfl-lit 6s var(--ease-in-out) infinite; }
  .dfl-cell.c1 polygon { animation-delay: 0.8s; } .dfl-cell.c2 polygon { animation-delay: 1.6s; } .dfl-cell.c3 polygon { animation-delay: 2.4s; } .dfl-cell.c4 polygon { animation-delay: 3.2s; } .dfl-cell.c5 polygon { animation-delay: 4s; } .dfl-cell.c6 polygon { animation-delay: 4.8s; }
  @keyframes dfl-lit { 0%, 70%, 100% { fill: rgb(255 255 255 / 0.03); } 80% { fill: rgb(255 255 255 / 0.32); } }
  .dfl-sweep { fill: url(#none); fill: rgb(255 255 255 / 0.05); animation: dfl-sweep 6s linear infinite; }
  @keyframes dfl-sweep { from { transform: translateX(-80px); } to { transform: translateX(420px); } }
  .dfl-lattice-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; font: 500 var(--t-caption)/1.4 var(--font-mono); color: var(--c-muted); }
  .dfl-lattice-cap span { display: inline-flex; gap: 6px; align-items: center; }
  .dfl-hero-preview { margin-top: clamp(var(--s-10), 6vw, var(--s-16)); }
  .dfl-hero .preview { background: rgb(10 10 10 / 0.85); border-color: rgb(255 255 255 / 0.16); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8); }
  .dfl-hero .df-command { margin-bottom: var(--s-4); }
  .dfl-command { padding: var(--s-5); }
  .dfl-strong { font-weight: 600; overflow-wrap: anywhere; }
  .dfl-static { pointer-events: none; }
  .dfl-hero .df-tile { cursor: default; }
  .dfl-hero .df-tile:hover { transform: none; box-shadow: none; }

  .dfl-areas { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .dfl-areas > li { display: grid; gap: var(--s-2); align-content: start; margin: 0; padding: var(--s-5); border: 1px solid var(--c-border); border-top: 2px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  .dfl-area-icon { display: grid; place-items: center; width: 40px; height: 40px; background: var(--c-text); color: var(--c-surface); clip-path: var(--df-hex); }
  .dfl-areas h3 { margin: var(--s-2) 0 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .dfl-areas p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
  .dfl-areas ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 500 0.75rem/1.45 var(--font-mono); }
  .dfl-areas ul li { position: relative; margin: 0; padding-left: 16px; }
  .dfl-areas ul li::before { content: ''; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; background: currentColor; clip-path: var(--df-hex); }

  .dfl-duo { display: grid; gap: clamp(var(--s-8), 5vw, var(--s-16)); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1024px) { .dfl-duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .dfl-duo.is-reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .dfl-duo.is-reverse .dfl-duo-copy { order: 2; } }
  .dfl-duo-copy { display: grid; gap: var(--s-5); }
  .dfl-duo-visual { min-width: 0; }
  .dfl-score-box { padding: var(--s-4) var(--s-5); border: 1px solid var(--c-border); border-left: 4px solid var(--c-text); border-radius: var(--r-md); background: var(--c-surface); }
  .dfl-score-box p:last-child { margin: var(--s-2) 0 0; font-size: var(--t-small); }
  .dfl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
  .dfl-list li { display: flex; gap: var(--s-3); align-items: center; margin: 0; }
  .dfl-night .h-section { color: #fff; }
  .dfl-night .preview { background: #0E0E0E; }

  .dfl-flow { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; }
  .dfl-flow li { position: relative; display: grid; gap: var(--s-2); align-content: start; margin: 0; padding: var(--s-5); border-left: 1px solid var(--c-border); }
  .dfl-flow li:first-child { border-left: 0; }
  .dfl-flow li:nth-child(4), .dfl-flow li:nth-child(5) { background: var(--c-surface2); }
  @media (max-width: 1100px) { .dfl-flow li { border-left: 0; border-top: 1px solid var(--c-border); } .dfl-flow li:first-child { border-top: 0; } }
  .dfl-flow-n { font: 600 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .dfl-flow h3 { margin: var(--s-1) 0 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .dfl-flow p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
  .dfl-flow code { margin-top: var(--s-2); justify-self: start; font-size: 0.6875rem; overflow-wrap: anywhere; }

  .dfl-kanon { margin-top: var(--s-8); }
  .dfl-note { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--s-4) 0 0; }
  .dfl-never { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-5) var(--s-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .dfl-never li { display: grid; gap: var(--s-2); align-content: start; margin: 0; padding-top: var(--s-4); border-top: 2px solid var(--c-text); }
  .dfl-never h3 { margin: 0; font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .dfl-never p { margin: 0; color: var(--c-muted); font-size: var(--t-small); }

  @media (prefers-reduced-motion: reduce) { .dfl-cell polygon, .dfl-sweep { animation: none; } .dfl-sweep { display: none; } }

  @media (prefers-reduced-motion: reduce) { .df-tile { transition: none; } .df-tile:hover { transform: none; } }
}