/* ============================================================
   Derek App Shell — Magnum-aligned Design System
   GP-facing fund management: warm cream, professional, data-dense

   CRITICAL DESIGN DECISIONS:
   - Sidebar: CREAM background (var(--df-bg-base)), NOT dark
   - Active links: Gold accent (var(--df-accent)), NO left-border
   - Near-square radii: 4px (var(--df-radius))
   - 3-color discipline: cream / dark / gold only
   ============================================================ */

/* ============================================================
   1. APP LAYOUT
   ============================================================ */

.dk-app {
  display: flex;
  /* HARD viewport cap (2026-06-12): with only min-height, tall pages grew
     the whole shell and the BODY scrolled — the topbar slid off-screen on
     short windows (Safari AND Chrome). The app shell is fixed-height;
     .dk-content is the one and only scroller. */
  height: 100vh;
  overflow: hidden;
  background: var(--df-bg-base);
  color: var(--df-text-primary);
}

.dk-app--has-banner {
  padding-top: 36px;
}

.dk-app--has-banner .dk-sidebar {
  top: 36px;
  height: calc(100vh - 36px);
}

.dk-app--fullscreen .dk-sidebar,
.dk-app--fullscreen .dk-ai-panel {
  display: none;
}

.dk-app--fullscreen .dk-main {
  margin-left: 0;
}

.dk-app--fullscreen .dk-content {
  max-width: 100%;
}

/* ============================================================
   2. DEMO BANNER
   ============================================================ */

.dk-demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--df-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--df-space-3);
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-semibold);
  color: var(--df-bg-base);
  z-index: var(--df-z-sticky);
  letter-spacing: 0.02em;
}

.dk-demo-banner a {
  padding: 2px 10px;
  background: rgba(255, 254, 242, 0.15);
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-bold);
  color: var(--df-bg-base);
  transition: background var(--df-duration) var(--df-ease);
}

.dk-demo-banner a:hover {
  background: rgba(255, 254, 242, 0.25);
}

/* ============================================================
   3. SIDEBAR — CREAM BACKGROUND (CRITICAL)
   ============================================================ */

.dk-sidebar {
  width: var(--df-sidebar-width);
  background: var(--df-bg-base);
  border-right: 1px solid var(--df-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: var(--df-z-elevated);
  overflow: hidden;
  transition: width var(--df-duration-slow) var(--df-ease);
}

/* ── Sidebar Logo ── */
.dk-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  height: var(--df-topbar-height);
  padding: 0 var(--df-space-5);
  border-bottom: 1px solid var(--df-border);
  flex-shrink: 0;
}

.dk-sidebar__logo-icon {
  width: 28px;
  height: 28px;
  background: var(--df-text-primary);
  border-radius: var(--df-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dk-sidebar__logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dk-sidebar__logo-text {
  font-weight: var(--df-weight-bold);
  font-size: 1rem;
  color: var(--df-text-primary);
  letter-spacing: -0.02em;
}

.dk-sidebar__logo-sub {
  font-size: var(--df-text-label, 0.6875rem);
  color: var(--df-text-muted);
  font-weight: var(--df-weight-normal);
}

/* ── Sidebar Nav Container ── */
.dk-sidebar__nav {
  flex: 1;
  padding: var(--df-space-4) 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dk-sidebar__nav::-webkit-scrollbar {
  display: none;
}

/* ── Sidebar Nav Groups ── */
.dk-sidebar__group {
  margin-bottom: var(--df-space-2);
}

.dk-sidebar__group-label {
  padding: var(--df-space-2) var(--df-space-5);
  font-size: 0.6875rem;
  font-weight: var(--df-weight-bold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* ── Sidebar Nav Links ── */
.dk-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  padding: var(--df-space-2) var(--df-space-5);
  margin: 1px var(--df-space-2);
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-secondary);
  transition: all var(--df-duration-fast) var(--df-ease);
  cursor: pointer;
  text-decoration: none;
}

.dk-sidebar__link i {
  width: 18px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--df-text-tertiary);
  transition: color var(--df-duration-fast) var(--df-ease);
}

.dk-sidebar__link:hover {
  color: var(--df-text-primary);
  background: var(--df-bg-surface);
}

.dk-sidebar__link:hover i {
  color: var(--df-text-secondary);
}

.dk-sidebar__link:focus-visible {
  outline: 2px solid var(--df-text-primary);
  outline-offset: -2px;
}

/* Active link — gold accent, NO left border */
.dk-sidebar__link.active {
  color: var(--df-accent-text);
  background: var(--df-accent-subtle);
}

.dk-sidebar__link.active i {
  color: var(--df-accent-text);
}

/* ── Sidebar User Section ── */
.dk-sidebar__user {
  padding: 12px var(--df-space-5);
  border-top: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background var(--df-duration-fast) var(--df-ease);
}

.dk-sidebar__user:hover {
  background: var(--df-bg-surface);
}

.dk-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-bold);
  color: var(--df-text-primary);
  background: var(--df-accent);
  flex-shrink: 0;
}

.dk-sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.dk-sidebar__user-name {
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-sidebar__user-role {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-sidebar__menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--df-text-muted);
  padding: 4px;
  border-radius: var(--df-radius-sm);
  display: flex;
  align-items: center;
  transition: color var(--df-duration-fast), background var(--df-duration-fast);
  flex-shrink: 0;
}

.dk-sidebar__menu-btn:hover {
  color: var(--df-text-primary);
  background: var(--df-bg-elevated);
}

/* ── Sidebar Toggle Button ── */
.dk-sidebar__toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--df-radius);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--df-text-muted);
  transition: all var(--df-duration-fast) var(--df-ease);
  flex-shrink: 0;
  margin-left: auto;
}

.dk-sidebar__toggle:hover {
  background: var(--df-bg-hover);
  color: var(--df-text-primary);
}

/* ============================================================
   4. SIDEBAR COLLAPSED STATE (ICON-ONLY RAIL)
   ============================================================ */

.dk-sidebar.is-collapsed {
  width: 52px;
}

.dk-sidebar.is-collapsed .dk-sidebar__logo {
  padding: 0;
  justify-content: center;
  gap: 0;
}

.dk-sidebar.is-collapsed .dk-sidebar__logo img,
.dk-sidebar.is-collapsed .dk-sidebar__logo-icon,
.dk-sidebar.is-collapsed .dk-sidebar__logo-text,
.dk-sidebar.is-collapsed .dk-sidebar__logo-sub {
  display: none;
}

.dk-sidebar.is-collapsed .dk-sidebar__toggle {
  margin: 0 auto;
}

.dk-sidebar.is-collapsed .dk-sidebar__nav {
  padding: var(--df-space-2) 0;
}

.dk-sidebar.is-collapsed .dk-sidebar__group-label {
  display: none;
}

.dk-sidebar.is-collapsed .dk-sidebar__group {
  margin-bottom: 0;
}

.dk-sidebar.is-collapsed .dk-sidebar__link {
  justify-content: center;
  padding: 10px 0;
  margin: 1px 6px;
  overflow: hidden;
  font-size: 0;
  gap: 0;
}

.dk-sidebar.is-collapsed .dk-sidebar__link i {
  font-size: 0.9375rem;
  width: auto;
  min-width: auto;
}

.dk-sidebar.is-collapsed .dk-sidebar__user {
  justify-content: center;
  padding: var(--df-space-3) 0;
  gap: 0;
}

.dk-sidebar.is-collapsed .dk-sidebar__user-name,
.dk-sidebar.is-collapsed .dk-sidebar__user-role,
.dk-sidebar.is-collapsed .dk-sidebar__user-info,
.dk-sidebar.is-collapsed .dk-sidebar__menu-btn {
  display: none;
}

.dk-sidebar.is-collapsed .dk-sidebar__avatar {
  width: 28px;
  height: 28px;
  font-size: var(--df-text-nano);
}

.dk-sidebar.is-collapsed ~ .dk-main {
  margin-left: 56px;
}
.dk-app--sidebar-collapsed .dk-main {
  margin-left: 56px;
}

/* Collapsed: User menu repositioning */
.dk-sidebar.is-collapsed .dk-user-menu {
  position: fixed;
  left: 58px;
  bottom: 16px;
  top: auto;
  right: auto;
  width: 260px;
  margin-bottom: 0;
}

/* ── Sidebar Tooltip (for collapsed state) ── */
.dk-sidebar-tooltip {
  position: fixed;
  background: var(--df-text-primary);
  color: var(--df-bg-surface);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-semibold);
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--df-radius);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  box-shadow: var(--df-shadow-sm);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.12s ease;
}

.dk-sidebar-tooltip.is-visible {
  opacity: 1;
}

/* ============================================================
   5. USER POPUP MENU
   ============================================================ */

.dk-user-menu {
  position: absolute;
  bottom: 100%;
  left: var(--df-space-3);
  right: var(--df-space-3);
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  box-shadow: var(--df-shadow-lg);
  padding: 6px;
  z-index: 100;
  margin-bottom: 6px;
  animation: dk-menu-up 0.15s ease-out;
  display: none;
}

.dk-user-menu.is-open {
  display: block;
}

@keyframes dk-menu-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dk-user-menu__label {
  padding: 8px 10px 4px;
  font-size: var(--df-text-label, 0.6875rem);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dk-user-menu__divider {
  height: 1px;
  background: var(--df-border);
  margin: 4px 0;
}

.dk-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: background var(--df-duration-fast), color var(--df-duration-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dk-user-menu__item:hover {
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}

.dk-user-menu__item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
}

.dk-user-menu__item--active {
  color: var(--df-accent-text);
}

.dk-user-menu__item--active .dk-user-menu__check {
  color: var(--df-accent-text);
  margin-left: auto;
  font-size: 0.7rem;
}

.dk-user-menu__item--danger {
  color: var(--df-red);
}

.dk-user-menu__item--danger:hover {
  background: var(--df-red-glow);
}

/* ============================================================
   6. MAIN CONTENT AREA
   ============================================================ */

.dk-main {
  flex: 1;
  margin-left: var(--df-sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;       /* hard cap — pairs with .dk-app; content scrolls inside */
  min-height: 0;
  overflow: hidden;
  transition: margin-left var(--df-duration-slow) var(--df-ease);
  /* White content area (Wenli design-system pass 2026-06-11): the content
     canvas is pure WHITE; cards stay white with crisp borders. Secondary
     surfaces (elevated/hover/light/cream) are WARM-GREEN tints from the same
     hue family as the #F8F9F0 sidebar — this replaces the old neutral grays
     (#EFF0E5/#E7E8DB) and resolves the warm-vs-cool clash Wenli flagged.
     One hue family everywhere: sidebar #F8F9F0, canvas #ffffff,
     tints #EFF0E5/#E7E8DB, border #DEDFD7, accent marigold #FFB923. */
  --df-bg-deepest: #EEEFE3;
  --df-bg-base: #ffffff;
  --df-bg-surface: #ffffff;
  --df-bg-elevated: #EFF0E5;
  --df-bg-hover: #E7E8DB;
  --df-bg-light: #EFF0E5;
  --df-bg-white: #ffffff;
  --df-bg-cream: #EFF0E5;
  --df-bg-light-warm: #E7E8DB;
  --dk-bg-card: #ffffff;
  --dk-bg-warm: #ffffff;
  --df-bg-surface-2: #F8F9F0;
  background: var(--df-bg-base);
}

.dk-app--has-banner .dk-main {
  min-height: calc(100vh - 36px);
}

/* ============================================================
   7. TOPBAR
   ============================================================ */

.dk-topbar {
  height: var(--df-topbar-height);
  background: var(--df-bg-surface);
  border-bottom: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--df-space-6);
  flex-shrink: 0;
  box-shadow: var(--df-shadow-institutional);
}

.dk-topbar__left {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
}

.dk-topbar__breadcrumb {
  font-size: var(--df-text-small);
  color: var(--df-text-tertiary);
}

.dk-topbar__breadcrumb a {
  color: var(--df-text-tertiary);
  text-decoration: none;
  /* Wenli 巧思: underline wipes in from the left on hover */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color var(--df-duration-fast),
              background-size var(--df-duration) var(--df-ease);
}

.dk-topbar__breadcrumb a:hover {
  color: var(--df-text-primary);
  background-size: 100% 1px;
}

.dk-topbar__breadcrumb-sep,
.dk-breadcrumb-sep {
  margin: 0 var(--df-space-2);
  color: var(--df-text-muted);
}

.dk-topbar__breadcrumb-active,
.dk-breadcrumb-current {
  color: var(--df-text-primary);
  font-weight: var(--df-weight-semibold);
  white-space: nowrap;
}

.dk-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--df-space-4);
}

/* ── Topbar Search Button ── */
.dk-topbar__search {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  padding: var(--df-space-1) var(--df-space-3);
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  font-size: var(--df-text-micro);
  color: var(--df-text-muted);
  cursor: pointer;
  transition: border-color var(--df-duration) var(--df-ease);
}

.dk-topbar__search:hover {
  border-color: var(--df-border-3);
}

.dk-topbar__search kbd {
  padding: 1px 5px;
  background: var(--df-bg-elevated);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  font-family: var(--df-font-mono);
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
}

/* ── Topbar Icon Buttons ── */
.dk-topbar__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--df-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--df-text-tertiary);
  transition: all var(--df-duration-fast) var(--df-ease);
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.dk-topbar__icon-btn:hover {
  background: var(--df-bg-elevated);
  color: var(--df-text-secondary);
}

.dk-topbar__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: var(--df-red);
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--df-weight-bold);
  color: var(--df-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   7b. GLOBAL FOCUS-VISIBLE FOR INTERACTIVE ELEMENTS
   (DESIGN-BAR section 8: outline: 2px solid var(--df-accent); offset: 2px)
   ============================================================ */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
select:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}

/* ============================================================
   8. CONTENT SCROLL AREA
   ============================================================ */

.dk-content {
  flex: 1;
  /* Safari: a flex item's min-height defaults to its content size, so a
     too-tall page pushed .dk-main beyond the viewport and the BODY scrolled
     (topbar slid off-screen). min-height: 0 restores the inner scroll. */
  min-height: 0;
  /* always-on scroll track (not `auto` + scrollbar-gutter): layouts stop
     jumping sideways when a page crosses the overflow threshold, AND
     full-bleed bands (page-zone, gen-bottom) still run flush to the track —
     the reserved gutter left an 11px dead strip that cut every band short
     of the right edge (boss 2026-06-12 "什么鬼") */
  overflow-y: scroll;
  /* AI FAB hidden 2026-06-12 — the old 104px FAB clearance shrinks to a
     normal bottom rhythm */
  padding: var(--df-space-8) var(--df-space-8) var(--df-space-10);
  /* boss 2026-06-12: ONE width system — the content column is fluid
     full-width on every page, exactly like the embedded Derek2 iframe pages
     (the old 1400px left-hugged cap made shell pages stop short while
     Fund I/II/SPV/PortCos ran edge-to-edge). Page-local 1500/1560 frame
     caps were removed in the same pass. */
  max-width: none;
}

/* ============================================================
   9. PAGE HEADER
   ============================================================ */

/* ── Elevated page header: a white, edge-to-edge band anchored to the content
   top, expressing hierarchy purely through a 3-line typographic cadence (gold
   eyebrow / compact title / monospace provenance meta) terminated by a hairline
   + a short gold origin tab. NO tinted background (boss: right side = all white). */
.dk-page-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--df-space-3);
  background: var(--df-header-surface);
  padding: var(--df-space-6) var(--df-header-pad-x) var(--df-space-5);
  margin: calc(-1 * var(--df-space-8)) calc(-1 * var(--df-header-pad-x)) var(--df-space-5);
  border-bottom: 1px solid var(--df-border-hairline);
}

.dk-page-header__info {
  flex: 1;
  min-width: 0;
}

/* Optional eyebrow/kicker above the title (e.g. "Deal Lifecycle · Origination"). */
.dk-page-header__eyebrow {
  font-size: var(--df-text-label);
  font-weight: var(--df-weight-semibold);
  letter-spacing: var(--df-tracking-label);
  text-transform: uppercase;
  color: var(--df-accent-text);
  margin-bottom: 6px;
}

.dk-page-header__title {
  font-size: 1.5rem;                       /* 24px compact — boss: oversized titles waste space */
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  letter-spacing: var(--df-tracking-tight);
  line-height: var(--df-leading-snug);
  margin-bottom: 2px;
}

.dk-page-header__subtitle {
  font-size: var(--df-text-small);
  color: var(--df-text-muted);
  line-height: var(--df-leading-normal);
  letter-spacing: 0.01em;
}

/* Provenance/meta row — the institutional "data citation" voice.
   Dot-separated items, e.g. "16 prospects · 9 in diligence · As of Q1 2026".
   2026-06-11: JBM retired (A1) — Inter + tabular-nums for column-aligned numerics. */
.dk-page-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--df-font-body);
  font-size: var(--df-text-label);
  font-weight: var(--df-weight-meta);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--df-tracking-meta);
  color: var(--df-text-muted);
}

.dk-page-header__meta-dot {
  width: var(--df-meta-dot-size);
  height: var(--df-meta-dot-size);
  border-radius: 50%;
  background: var(--df-text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.dk-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  flex-shrink: 0;
  align-self: center;                      /* center against the title, not the eyebrow */
}

/* Short gold tab on the hairline at the left margin — page origin mark. */
.dk-page-header::after {
  content: '';
  position: absolute;
  left: var(--df-header-pad-x);
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: var(--df-accent);
  border-radius: 1px;
}

/* When the header flows directly into a KPI strip/row, drop the divider so the
   header + stats read as one continuous instrument panel. */
.dk-page-header--with-stats {
  margin-bottom: 0;
  border-bottom: none;
}
.dk-page-header--with-stats::after { display: none; }

/* Iframe-wrapper variant: a compact flush band above the embedded Derek2 frame
   (no outer margin, tighter vertical padding). */
.dk-page-header--iframe {
  margin: 0;
  padding: 20px var(--df-header-pad-x);
}

/* ── Shared iframe viewer layout — extracted from 8 iframe wrapper pages so any
   future change applies full-site (DESIGN-BAR section 10: zero fork). ── */
.dk-viewer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--df-header-pad-x);
  height: 44px;
  border-bottom: 1px solid var(--df-border-hairline);
  background: #ffffff;
}
.dk-viewer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-muted);
  text-decoration: none;
  transition: color var(--df-duration-fast) var(--df-ease);
}
.dk-viewer-back:hover { color: var(--df-text-primary); }
.dk-viewer-back i { font-size: 11px; }

/* When the iframe wrapper page is active, .dk-main locks to viewport height
   and hides overflow so the iframe fills the remaining space below the header. */
.dk-app--iframe .dk-main {
  height: 100vh;
  overflow: hidden;
}
.dk-app--iframe .dk-content {
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}

.dk-viewer-frame {
  position: relative;
  flex: 1;
  min-height: 0;
}
.dk-viewer-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Shimmer placeholder shown while iframe loads (DESIGN-BAR section 8: loading states).
   OPT-IN via the --shimmer modifier: the page MUST also wire iframe.onload to add
   .is-loaded on the container, otherwise the overlay would cover the loaded iframe
   forever. Plain .dk-viewer-frame (legacy wrapper pages) renders no overlay. */
.dk-viewer-frame--shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #EFF0E5 25%, #E7E8DB 50%, #EFF0E5 75%);
  background-size: 200% 100%;
  animation: dk-viewer-shimmer 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes dk-viewer-shimmer { to { background-position: -200% 0; } }
.dk-viewer-frame--shimmer.is-loaded::before { display: none; }

/* KPI strip band below the iframe page header */
.dk-iframe-strip {
  padding: var(--df-space-4) var(--df-header-pad-x);
  margin-bottom: 0;
  flex-shrink: 0;
  background: var(--df-bg-base);
}

/* ── Reusable premium "page zone" surface — the shell of .dk-page-header without
   the flex/title layout. For detail/profile heroes (LP, company, report) that
   keep rich custom content (avatar, badges, MOIC, pills) but need the SAME warm
   edge-to-edge surface + hairline + gold origin tab so the app reads as one. ── */
.dk-page-zone {
  position: relative;
  background: var(--df-header-surface);
  /* boss 2026-06-12: kill the double top gap — the zone pulls up to cancel
     .dk-content's 32px top padding, so the title sits ~20px under the topbar
     (same rhythm as the headerless listing pages) */
  padding: var(--df-space-5) var(--df-header-pad-x) var(--df-space-5);
  margin: calc(-1 * var(--df-space-8)) calc(-1 * var(--df-header-pad-x)) var(--df-space-5);
  border-bottom: 1px solid var(--df-border-hairline);
}
.dk-page-zone::after {
  content: '';
  position: absolute;
  left: var(--df-header-pad-x);
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: var(--df-accent);
  border-radius: 1px;
}

/* ============================================================
   10. KPI ROW & KPI CARDS
   ============================================================ */

.dk-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--df-space-4);
  margin-bottom: var(--df-space-6);
}

.dk-kpi-card {
  background: var(--dk-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  padding: var(--df-space-5) var(--df-space-6);
  transition: box-shadow var(--df-duration) var(--df-ease);
  position: relative;
}

.dk-kpi-card:hover {
  box-shadow: var(--df-shadow);
}

.dk-kpi-card__label {
  font-size: var(--df-text-label, 0.6875rem);
  color: rgba(25, 25, 24, 0.65);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-label, 0.08em);
  margin-bottom: var(--df-space-2);
  font-weight: var(--df-weight-medium);
}

.dk-kpi-card__value {
  font-family: var(--df-font-body);
  font-size: var(--df-text-kpi, 2rem);
  font-weight: var(--df-weight-semibold);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--df-text-primary);
  line-height: var(--df-leading-kpi, 1.0);
  letter-spacing: -0.02em;
}

.dk-kpi-card__change {
  font-size: var(--df-text-nano);
  margin-top: var(--df-space-2);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--df-font-body);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

.dk-kpi-card__change--up {
  color: var(--df-green-text);
}

.dk-kpi-card__change--down {
  color: var(--df-red);
}

.dk-kpi-card__change--neutral {
  color: var(--df-text-muted);
}

/* ============================================================
   11. DATA CARDS
   ============================================================ */

.dk-data-card {
  background: var(--dk-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  overflow: hidden;
  transition: box-shadow var(--df-duration) var(--df-ease);
}

.dk-data-card:hover {
  box-shadow: var(--df-shadow-sm);
}

.dk-data-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--df-space-4) var(--df-space-5);
  border-bottom: 1px solid var(--df-border);
  gap: var(--df-space-3);
}

.dk-data-card__title {
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
}

.dk-data-card__actions {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
}

.dk-data-card__body {
  padding: var(--df-space-5);
}

.dk-data-card__body--flush {
  padding: 0;
}

/* ============================================================
   12. TABLES
   ============================================================ */

.dk-table {
  width: 100%;
  border-collapse: collapse;
}

.dk-table th {
  text-align: left;
  padding: var(--df-space-3) var(--df-space-3);
  font-size: var(--df-text-nano);
  font-family: var(--df-font-body);    /* DESIGN-BAR §1/§2: table headers = Inter always, even on .numeric cols (JBM prohibited for labels) */
  font-weight: var(--df-weight-medium);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-label, 0.08em);
  border-bottom: 2px solid var(--df-border);
  background: transparent;
}

.dk-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.dk-table th.sortable:hover {
  color: var(--df-text-primary);
}

.dk-table th.sortable i {
  margin-left: 4px;
  font-size: var(--df-text-label, 0.6875rem);
  opacity: 0.5;
}

.dk-table th.sortable.sorted i {
  opacity: 1;
  color: var(--df-accent-text);
}

.dk-table td {
  padding: var(--df-space-3);
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  border-bottom: 1px solid var(--df-border);
  vertical-align: middle;
}

.dk-table tbody tr:nth-child(even) td {
  background: var(--df-bg-elevated);
}

.dk-table tbody tr:hover td {
  background: rgba(255, 185, 35, 0.03);   /* DESIGN-BAR §3: gold-tint row hover (<=0.05 opacity) */
}

.dk-table .numeric {
  font-family: var(--df-font-body);
  text-align: right;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--df-weight-semibold);
}

/* DESIGN-BAR §1/§2: table headers ALWAYS Inter — .numeric sets tnum on td but
   headers are labels, not data. This rule ensures th stays unstyled Inter. */
.dk-table th.numeric {
  font-family: var(--df-font-body);
  font-weight: var(--df-weight-medium);
}

.dk-table .positive {
  color: var(--df-green-text);
}

.dk-table .negative {
  color: var(--df-red);
}

/* ============================================================
   13. TILE GRID (PORTFOLIO COMPANIES)
   ============================================================ */

.dk-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--df-space-4);
}

/* ============================================================
   14. COMPANY TILES
   ============================================================ */

.dk-tile {
  background: var(--dk-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--df-duration) var(--df-ease),
              box-shadow var(--df-duration) var(--df-ease),
              border-color var(--df-duration) var(--df-ease);
  position: relative;
}

.dk-tile:hover {
  border-color: var(--df-border-3);
  box-shadow: var(--df-shadow);
  transform: translateY(-2px);
}

.dk-tile:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}

/* Tile accent bar (3px top border by tier) */
.dk-tile-accent {
  height: 3px;
  width: 100%;
}

.dk-tile-accent--top {
  background: var(--dk-tier-top);
}

.dk-tile-accent--moderate {
  background: var(--dk-tier-moderate);
}

.dk-tile-accent--below {
  background: var(--dk-tier-below);
}

.dk-tile-accent--loss {
  background: var(--dk-tier-loss);
}

/* Legacy border-top approach (fallback) */
.dk-tile--top {
  border-top: 3px solid var(--dk-tier-top);
}

.dk-tile--moderate {
  border-top: 3px solid var(--dk-tier-moderate);
}

.dk-tile--below {
  border-top: 3px solid var(--dk-tier-below);
}

.dk-tile--loss {
  border-top: 3px solid var(--dk-tier-loss);
}

/* Tile internal structure */
.dk-tile__content {
  padding: var(--df-space-5);
}

.dk-tile__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--df-space-3);
}

.dk-tile__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--df-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--df-weight-bold);
  color: var(--df-bg-surface);
  flex-shrink: 0;
}

/* MOIC badge (large, prominent) */
.dk-tile__moic {
  font-family: var(--df-font-body);
  font-size: 1.5rem;
  font-weight: var(--df-weight-bold);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 4px 12px;
  border-radius: var(--df-radius);
}

.dk-tile__moic--top {
  background: var(--dk-tier-top-bg);
  color: var(--dk-tier-top);
}

.dk-tile__moic--moderate {
  background: var(--dk-tier-moderate-bg);
  color: var(--dk-tier-moderate);
}

.dk-tile__moic--below {
  background: var(--dk-tier-below-bg);
  color: var(--dk-tier-below);
}

.dk-tile__moic--loss {
  background: var(--dk-tier-loss-bg);
  color: var(--dk-tier-loss);
}

.dk-tile__name {
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  margin-bottom: 2px;
}

.dk-tile__meta {
  font-size: var(--df-text-micro);
  color: var(--df-text-muted);
  margin-bottom: var(--df-space-3);
}

/* Tile metrics grid */
.dk-tile__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--df-space-2);
}

.dk-tile__metric {
  text-align: center;
}

.dk-tile__metric-value {
  font-family: var(--df-font-body);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--df-text-primary);
}

.dk-tile__metric-label {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-wide);
}

/* Tile injections (collapsible section) */
.dk-tile__injections {
  border-top: 1px solid var(--df-border);
  margin-top: var(--df-space-3);
  padding-top: var(--df-space-3);
}

.dk-tile__injections-toggle {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  font-size: var(--df-text-micro);
  color: var(--df-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.dk-tile__injections-toggle:hover {
  color: var(--df-text-primary);
}

.dk-tile__injections-toggle:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}

.dk-tile__injections-content {
  margin-top: var(--df-space-2);
  display: none;
}

.dk-tile__injections-content.is-open {
  display: block;
}

/* Tile footer */
.dk-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--df-space-3) var(--df-space-5);
  border-top: 1px solid var(--df-border);
  background: var(--df-bg-elevated);
}

.dk-tile__footer-left {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
}

.dk-tile__footer-link {
  font-size: var(--df-text-micro);
  color: var(--df-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Wenli 巧思: underline wipes in from the left (was an instant underline) */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--df-duration) var(--df-ease);
}

.dk-tile__footer-link:hover {
  background-size: 100% 1px;
}

/* ============================================================
   15. SECTION HEADERS (WITH COLORED DOT)
   ============================================================ */

.dk-section-header {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  margin-bottom: var(--df-space-4);
}

.dk-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dk-section-dot--top {
  background: var(--dk-tier-top);
}

.dk-section-dot--moderate {
  background: var(--dk-tier-moderate);
}

.dk-section-dot--below {
  background: var(--dk-tier-below);
}

.dk-section-dot--loss {
  background: var(--dk-tier-loss);
}

.dk-section-header__title {
  font-size: var(--df-text-body);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
}

.dk-section-header__count {
  font-size: var(--df-text-micro);
  color: var(--df-text-muted);
  margin-left: auto;
}

/* ============================================================
   16. FILTER BAR
   ============================================================ */

.dk-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  margin-bottom: var(--df-space-4);
  flex-wrap: wrap;
}

.dk-filter-btn {
  /* boss 2026-06-11: filter pills run COMPACT — unified 4px 11px padding +
     11px text across every pill family (.dk-filter-btn / .rpt-pill / .fbtn
     / page-local forks) */
  padding: 4px 11px;
  /* canvas-era resting state (2026-06-10): white + solid border — the elevated
     gray resting bg became invisible once the page canvas moved to #F8F9F0 */
  background: #ffffff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: all var(--df-duration-fast) var(--df-ease);
}

.dk-filter-btn:hover {
  border-color: var(--df-border-3);
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}

.dk-filter-btn.active,
.dk-filter-btn--active {
  background: #191918;
  border-color: #191918;
  color: #ffffff;
  font-weight: var(--df-weight-semibold);
}

.dk-filter-btn:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}

/* ============================================================
   17. SEARCH INPUT
   ============================================================ */

.dk-search {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  padding: var(--df-space-2) var(--df-space-3);
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  width: 240px;
}

.dk-search i {
  color: var(--df-text-muted);
  font-size: 0.8125rem;
}

.dk-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--df-text-small);
  color: var(--df-text-primary);
}

.dk-search input::placeholder {
  color: var(--df-text-muted);
}

.dk-search:focus-within {
  border-color: rgba(255, 185, 35, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 185, 35, 0.10);
}

/* ============================================================
   18. BADGES
   ============================================================ */

.dk-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-wide);
}

.dk-badge--gold {
  background: var(--df-accent-subtle);
  color: var(--df-text-primary);
}

.dk-badge--green {
  background: var(--df-green-glow);
  color: var(--df-green-text);
}

.dk-badge--amber {
  background: var(--df-amber-glow);
  color: var(--df-accent-text);
}

.dk-badge--red {
  background: var(--df-red-glow);
  color: var(--df-red);
}

.dk-badge--gray {
  background: var(--df-bg-elevated);
  color: var(--df-text-muted);
}

/* Tier badges */
.dk-badge--top {
  background: var(--dk-tier-top-bg);
  color: var(--dk-tier-top);
}

.dk-badge--moderate {
  background: var(--dk-tier-moderate-bg);
  color: var(--dk-tier-moderate);
}

.dk-badge--below {
  background: var(--dk-tier-below-bg);
  color: var(--dk-tier-below);
}

.dk-badge--loss {
  background: var(--dk-tier-loss-bg);
  color: var(--dk-tier-loss);
}

/* ============================================================
   19. TREEMAP
   ============================================================ */

.dk-treemap {
  display: grid;
  gap: 2px;
  border-radius: var(--df-radius);
  overflow: hidden;
}

.dk-treemap-cell {
  border-radius: var(--df-radius);
  padding: var(--df-space-3);
  color: var(--df-bg-surface);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  cursor: pointer;
  transition: transform var(--df-duration-fast) var(--df-ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dk-treemap-cell:hover {
  transform: scale(1.02);
  z-index: 1;
}

.dk-treemap-cell--top {
  background: var(--dk-tier-top);
}

.dk-treemap-cell--moderate {
  background: var(--dk-tier-moderate);
}

.dk-treemap-cell--below {
  background: var(--dk-tier-below);
}

.dk-treemap-cell--loss {
  background: var(--dk-tier-loss);
}

.dk-treemap-cell__name {
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-treemap-cell__value {
  font-family: var(--df-font-body);
  font-size: var(--df-text-nano);
  opacity: 0.85;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   20. ACTIVITY FEED
   ============================================================ */

.dk-activity-feed {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dk-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--df-space-3);
  padding: var(--df-space-3) 0;
  border-bottom: 1px solid var(--df-border);
}

.dk-activity-item:last-child {
  border-bottom: none;
}

.dk-activity-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  flex-shrink: 0;
  background: var(--df-bg-elevated);
  color: var(--df-text-muted);
}

.dk-activity-item__icon--gold {
  background: var(--df-accent-subtle);
  color: var(--df-accent-text);
}

.dk-activity-item__icon--green {
  background: var(--df-green-glow);
  color: var(--df-green-text);
}

.dk-activity-item__icon--red {
  background: var(--df-red-glow);
  color: var(--df-red);
}

.dk-activity-item__content {
  flex: 1;
  min-width: 0;
}

.dk-activity-item__text {
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  line-height: 1.4;
}

.dk-activity-item__text strong {
  color: var(--df-text-primary);
  font-weight: var(--df-weight-semibold);
}

.dk-activity-item__time {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  margin-top: 2px;
}

/* ============================================================
   21. AI PANEL (RIGHT SIDEBAR)
   ============================================================ */

.dk-ai-panel {
  width: var(--df-ai-panel-width);
  background: var(--df-bg-base);
  border-left: 1px solid var(--df-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: var(--df-z-elevated);
  transform: translateX(100%);
  transition: transform var(--df-duration-slow) var(--df-ease);
}

.dk-ai-panel.is-open {
  transform: translateX(0);
}

.dk-app--has-banner .dk-ai-panel {
  top: 36px;
  height: calc(100vh - 36px);
}

.dk-ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--df-space-4) var(--df-space-5);
  border-bottom: 1px solid var(--df-border);
  flex-shrink: 0;
}

.dk-ai-panel__title {
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
}

.dk-ai-panel__title i {
  color: var(--df-accent-text);
}

.dk-ai-panel__close {
  width: 28px;
  height: 28px;
  border-radius: var(--df-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--df-text-muted);
  transition: all var(--df-duration-fast);
}

.dk-ai-panel__close:hover {
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}

.dk-ai-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--df-space-4);
}

/* AI message bubbles */
.dk-ai-message {
  margin-bottom: var(--df-space-3);
}

.dk-ai-message--user {
  text-align: right;
}

.dk-ai-message__bubble {
  display: inline-block;
  max-width: 85%;
  padding: var(--df-space-3) var(--df-space-4);
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  line-height: 1.5;
}

.dk-ai-message--user .dk-ai-message__bubble {
  background: var(--df-accent);
  color: var(--df-text-primary);
}

.dk-ai-message--assistant .dk-ai-message__bubble {
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  color: var(--df-text-secondary);
}

.dk-ai-panel__input {
  padding: var(--df-space-4);
  border-top: 1px solid var(--df-border);
  flex-shrink: 0;
}

.dk-ai-panel__input-wrap {
  display: flex;
  gap: var(--df-space-2);
}

.dk-ai-panel__input input {
  flex: 1;
  padding: var(--df-space-2) var(--df-space-3);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  outline: none;
  background: var(--df-bg-surface);
  color: var(--df-text-primary);
}

.dk-ai-panel__input input:focus {
  border-color: rgba(255, 185, 35, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 185, 35, 0.10);
}

/* ============================================================
   22. DECK SLIDES
   ============================================================ */

.dk-deck {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
}

.dk-deck-slide {
  min-height: 80vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--df-space-8);
}

.dk-deck-cover {
  background: var(--df-text-primary);
  color: var(--df-bg-base);
  text-align: center;
}

.dk-deck-cover__title {
  font-size: var(--df-text-h1);
  font-weight: var(--df-weight-bold);
  margin-bottom: var(--df-space-4);
}

.dk-deck-cover__subtitle {
  font-size: var(--df-text-body);
  color: var(--df-text-muted);
  opacity: 0.7;
}

.dk-deck-nav {
  position: fixed;
  right: var(--df-space-6);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--df-space-2);
  z-index: var(--df-z-sticky);
}

.dk-deck-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-border);
  cursor: pointer;
  transition: all var(--df-duration-fast);
}

.dk-deck-nav__dot:hover {
  background: var(--df-text-muted);
}

.dk-deck-nav__dot.is-active {
  background: var(--df-accent);
  transform: scale(1.25);
}

/* ============================================================
   23. MODAL
   ============================================================ */

.dk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 25, 24, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--df-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
}

.dk-modal-overlay.is-open {
  display: flex;
  animation: dk-overlay-in 0.15s ease-out;
}

@keyframes dk-overlay-in {
  from {
    opacity: 0;
  }
}

.dk-modal {
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--dk-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  box-shadow: var(--df-shadow-lg);
  overflow: hidden;
  animation: dk-modal-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dk-modal-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.dk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--df-space-5);
  border-bottom: 1px solid var(--df-border);
}

.dk-modal__title {
  font-size: var(--df-text-body);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
}

.dk-modal__close {
  width: 28px;
  height: 28px;
  border-radius: var(--df-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--df-text-muted);
  transition: all var(--df-duration-fast);
}

.dk-modal__close:hover {
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}

.dk-modal__body {
  padding: var(--df-space-5);
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

.dk-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--df-space-2);
  padding: var(--df-space-4) var(--df-space-5);
  border-top: 1px solid var(--df-border);
  background: var(--df-bg-elevated);
}

/* ============================================================
   24. COMMAND PALETTE
   ============================================================ */

.dk-palette-overlay,
.dk-cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 25, 24, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--df-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: dk-overlay-in 0.15s ease-out;
}

.dk-palette,
.dk-cmd-palette {
  width: 560px;
  max-height: 420px;
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border-2);
  border-radius: var(--df-radius-lg);
  box-shadow: var(--df-shadow-lg);
  overflow: hidden;
  animation: dk-modal-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.dk-palette-input-wrap,
.dk-cmd-palette__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  padding: var(--df-space-4) var(--df-space-5);
  border-bottom: 1px solid var(--df-border);
}

.dk-palette-input-wrap i,
.dk-cmd-palette__input-wrap i {
  color: var(--df-text-muted);
}

.dk-palette-input,
.dk-cmd-palette__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: var(--df-text-body);
  color: var(--df-text-primary);
}

.dk-palette-input::placeholder,
.dk-cmd-palette__input::placeholder {
  color: var(--df-text-muted);
}

.dk-palette-results,
.dk-cmd-palette__results {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--df-space-2);
}

.dk-palette-group-label,
.dk-cmd-palette__group-label {
  padding: var(--df-space-2) var(--df-space-3);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-bold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dk-palette-item,
.dk-cmd-palette__item {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  padding: var(--df-space-2) var(--df-space-3);
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--df-duration-fast) var(--df-ease);
}

.dk-palette-item:hover,
.dk-palette-item.is-active,
.dk-cmd-palette__item:hover,
.dk-cmd-palette__item.is-active {
  background: var(--df-accent-subtle);
  color: var(--df-text-primary);
}

.dk-palette-item i,
.dk-cmd-palette__item i {
  width: 18px;
  text-align: center;
  color: var(--df-text-muted);
  font-size: 0.8125rem;
}

.dk-palette-item:hover i,
.dk-cmd-palette__item:hover i {
  color: var(--df-accent-text);
}

/* ============================================================
   25. TOAST NOTIFICATIONS
   ============================================================ */

.dk-toast-container {
  position: fixed;
  bottom: var(--df-space-6);
  right: var(--df-space-6);
  z-index: var(--df-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--df-space-2);
}

.dk-toast {
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border-2);
  border-radius: var(--df-radius);
  padding: var(--df-space-3) var(--df-space-5);
  box-shadow: var(--df-shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  min-width: 300px;
  transform: translateX(120%);
  transition: transform var(--df-duration) var(--df-ease-out);
  position: relative;
  overflow: hidden;
}

.dk-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--df-accent);
  border-radius: var(--df-radius) var(--df-radius) 0 0;
}

.dk-toast--visible {
  transform: translateX(0);
  animation: dk-toast-in 0.3s var(--df-ease-out);
}

@keyframes dk-toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dk-toast--success::before {
  background: var(--df-green);
}

.dk-toast--error::before {
  background: var(--df-red);
}

.dk-toast--info::before {
  background: var(--df-accent);
}

.dk-toast__icon {
  font-size: 1rem;
}

.dk-toast--success .dk-toast__icon {
  color: var(--df-green-text);
}

.dk-toast--error .dk-toast__icon {
  color: var(--df-red);
}

.dk-toast--info .dk-toast__icon {
  color: var(--df-accent-text);
}

.dk-toast__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--df-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--df-radius-sm);
  transition: all var(--df-duration-fast);
}

.dk-toast__close:hover {
  color: var(--df-text-primary);
  background: var(--df-bg-elevated);
}

/* ============================================================
   26. EMPTY STATE
   ============================================================ */

.dk-empty-state {
  text-align: center;
  padding: var(--df-space-12) var(--df-space-6);
}

.dk-empty-state__icon {
  font-size: 3rem;
  color: var(--df-text-muted);
  margin-bottom: var(--df-space-4);
  opacity: 0.5;
}

.dk-empty-state__title {
  font-size: var(--df-text-body);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  margin-bottom: var(--df-space-2);
}

.dk-empty-state__text {
  font-size: var(--df-text-small);
  color: var(--df-text-muted);
  max-width: 320px;
  margin: 0 auto var(--df-space-5);
}

/* ============================================================
   27. BUTTONS
   ============================================================ */

.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--df-space-2);
  font-family: var(--df-font-body);
  font-weight: var(--df-weight-semibold);
  border-radius: var(--df-radius);
  transition: all var(--df-duration) var(--df-ease);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: none;
}

.dk-btn--primary {
  padding: 10px 24px;
  background: var(--df-text-primary);
  color: var(--df-bg-base);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  border: 1px solid var(--df-text-primary);
  border-radius: var(--df-radius-full);
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -12px rgba(25, 25, 24, 0.55);
}

.dk-btn--primary:hover {
  background: var(--dk-ink);
  box-shadow: 0 6px 16px -12px rgba(25, 25, 24, 0.55), var(--df-shadow-sm);
  transform: translateY(-1px);
}

.dk-btn--gold {
  padding: 10px 24px;
  background: var(--df-accent);
  color: var(--df-text-primary);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  border: 1px solid var(--df-accent-dim);
  border-radius: var(--df-radius-full);
  box-shadow: 0 6px 16px -12px rgba(255, 185, 35, 0.55);
}

.dk-btn--gold:hover {
  background: var(--df-accent-bright);
  box-shadow: 0 6px 16px -12px rgba(255, 185, 35, 0.55), var(--df-shadow-sm);
  transform: translateY(-1px);
}

.dk-btn--ghost {
  padding: 10px 24px;
  /* white resting bg (not transparent) — stays a visible control on the
     #F8F9F0 canvas and inside white cards via the solid border */
  background: #ffffff;
  color: var(--df-text-primary);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-full);
}

.dk-btn--ghost:hover {
  border-color: var(--df-border-3);
  background: var(--df-bg-elevated);
}

.dk-btn--sm {
  padding: 4px 12px;
  font-size: var(--df-text-micro);
}

.dk-btn--icon {
  padding: 6px;
  width: 28px;
  height: 28px;
}

/* ── dk-btn-new: create-action CTA (Wenli 2026-06-11, promoted from her
   library redesign) — near-black pill with a MARIGOLD plus icon ("PDF
   identity"); icon rotates 90° on hover. Use for page-level create actions
   (New report / Create Template / Add LP). ── */
.dk-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 13px;
  background: #14130F;
  color: #F8F9F0;
  border: none;
  border-radius: var(--df-radius);
  font-family: var(--df-font-body);
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-semibold);
  letter-spacing: -0.004em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--df-duration) var(--df-ease),
              transform var(--df-duration) var(--df-ease);
}
.dk-btn-new i {
  font-size: 11px;
  color: var(--df-accent);
  transition: transform var(--df-duration) var(--df-ease);
}
.dk-btn-new:hover { background: #000; transform: translateY(-1px); }
.dk-btn-new:hover i { transform: rotate(90deg); }
.dk-btn-new--inline { padding: 9px 17px 9px 14px; font-size: var(--df-text-small); }

/* ── rpt-view-toggle: grid↔list view switch (Wenli 2026-06-11, promoted
   from her library redesign) — elevated tray, white active card. This is
   the canonical VIEW-MODE toggle; .dk-seg stays for content tabs. ── */
.rpt-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--df-bg-elevated);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
}
.rpt-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 27px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--df-text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: background var(--df-duration-fast) var(--df-ease),
              color var(--df-duration-fast) var(--df-ease);
}
.rpt-view-btn:hover { color: var(--df-text-primary); }
.rpt-view-btn.active {
  background: #ffffff;
  color: var(--df-text-primary);
  box-shadow: var(--df-shadow-xs);
}

.dk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   28. PROGRESS BAR
   ============================================================ */

.dk-progress {
  height: 4px;
  background: var(--df-bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.dk-progress__bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s var(--df-ease);
}

.dk-progress__bar--gold {
  background: var(--df-accent);
}

.dk-progress__bar--green {
  background: var(--df-green);
}

.dk-progress__bar--amber {
  background: var(--df-amber);
}

.dk-progress__bar--gradient {
  background: linear-gradient(90deg, var(--df-accent-dim), var(--df-accent));
}

/* ============================================================
   29. FORM ELEMENTS
   ============================================================ */

.dk-form-group {
  margin-bottom: var(--df-space-4);
}

.dk-form-label {
  display: block;
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-secondary);
  margin-bottom: var(--df-space-1);
}

.dk-form-input,
.dk-form-select {
  width: 100%;
  padding: var(--df-space-2) var(--df-space-3);
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  font-size: var(--df-text-small);
  color: var(--df-text-primary);
  outline: none;
  transition: border-color var(--df-duration-fast), box-shadow var(--df-duration-fast);
}

.dk-form-input:focus,
.dk-form-select:focus {
  border-color: rgba(255, 185, 35, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 185, 35, 0.10);
}

.dk-form-input::placeholder {
  color: var(--df-text-muted);
}

.dk-form-textarea {
  resize: vertical;
  min-height: 100px;
}

.dk-form-hint {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  margin-top: var(--df-space-1);
}

.dk-form-error {
  font-size: var(--df-text-nano);
  color: var(--df-red);
  margin-top: var(--df-space-1);
}

/* ── dk-select: custom dropdown replacing native <select> (Aaron 2026-06-12:
   "下拉框不要用浏览器自带的"). The native select stays in the DOM hidden as
   the value/form carrier; window.dkEnhanceSelect (app-shell.js) builds this
   UI from its options and keeps the two in sync. ── */
.dk-select {
  position: relative;
  width: 100%;
}
.dk-select__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--df-space-2) var(--df-space-3);
  background: #ffffff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  font-family: var(--df-font-body);
  font-size: var(--df-text-small);
  color: var(--df-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--df-duration-fast), box-shadow var(--df-duration-fast);
}
.dk-select__btn:hover {
  border-color: var(--df-border-3);
}
.dk-select.open .dk-select__btn,
.dk-select__btn:focus-visible {
  outline: none;
  border-color: rgba(255, 185, 35, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 185, 35, 0.10);
}
.dk-select__caret {
  font-size: 10px;
  color: var(--df-text-muted);
  flex-shrink: 0;
  transition: transform var(--df-duration-fast) var(--df-ease);
}
.dk-select.open .dk-select__caret {
  transform: rotate(180deg);
}
.dk-select__menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  box-shadow: var(--df-shadow-lg);
  padding: 5px;
  max-height: 264px;
  overflow-y: auto;
  z-index: 60;
  display: none;
}
.dk-select.open .dk-select__menu {
  display: block;
}
.dk-select__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  cursor: pointer;
}
.dk-select__opt:hover,
.dk-select__opt.is-hl {
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}
.dk-select__opt.is-selected {
  color: var(--df-text-primary);
  font-weight: var(--df-weight-semibold);
}
.dk-select__opt .dk-select__check {
  font-size: 10px;
  color: var(--df-accent-text);
  visibility: hidden;
  flex-shrink: 0;
}
.dk-select__opt.is-selected .dk-select__check {
  visibility: visible;
}

/* ============================================================
   30. TABS
   ============================================================ */

.dk-tabs {
  display: flex;
  gap: var(--df-space-1);
  border-bottom: 1px solid var(--df-border);
  margin-bottom: var(--df-space-4);
}

.dk-tab {
  padding: var(--df-space-2) var(--df-space-4);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--df-duration-fast);
  margin-bottom: -1px;
}

.dk-tab:hover {
  color: var(--df-text-primary);
}

.dk-tab:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}

.dk-tab.is-active {
  color: var(--df-accent-text);
  border-bottom-color: var(--df-accent);
}

.dk-tab-panel {
  display: none;
}

.dk-tab-panel.is-active {
  display: block;
}

/* ============================================================
   31. DROPDOWN
   ============================================================ */

.dk-dropdown {
  position: relative;
  display: inline-block;
}

.dk-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow-lg);
  padding: var(--df-space-1);
  z-index: var(--df-z-overlay);
  display: none;
  margin-top: 4px;
}

.dk-dropdown.is-open .dk-dropdown__menu {
  display: block;
  animation: dk-dropdown-in 0.15s ease-out;
}

@keyframes dk-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.dk-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  padding: var(--df-space-2) var(--df-space-3);
  font-size: var(--df-text-small);
  color: var(--df-text-secondary);
  border-radius: var(--df-radius-sm);
  cursor: pointer;
  transition: background var(--df-duration-fast);
}

.dk-dropdown__item:hover {
  background: var(--df-bg-elevated);
  color: var(--df-text-primary);
}

.dk-dropdown__item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--df-text-muted);
}

.dk-dropdown__divider {
  height: 1px;
  background: var(--df-border);
  margin: var(--df-space-1) 0;
}

/* ============================================================
   32. AVATAR
   ============================================================ */

.dk-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-bold);
  background: var(--df-accent);
  color: var(--df-text-primary);
  flex-shrink: 0;
}

.dk-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: var(--df-text-nano);
}

.dk-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--df-text-body);
}

.dk-avatar--xl {
  width: 64px;
  height: 64px;
  font-size: var(--df-text-h3);
}

.dk-avatar-group {
  display: flex;
}

.dk-avatar-group .dk-avatar {
  border: 2px solid var(--df-bg-surface);
  margin-left: -8px;
}

.dk-avatar-group .dk-avatar:first-child {
  margin-left: 0;
}

/* ============================================================
   33. SKELETON LOADING
   ============================================================ */

.dk-skeleton {
  background: linear-gradient(
    90deg,
    var(--df-bg-elevated) 25%,
    var(--df-bg-hover) 50%,
    var(--df-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: dk-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--df-radius);
}

@keyframes dk-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.dk-skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
}

.dk-skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}

.dk-skeleton--card {
  height: 200px;
}

/* ============================================================
   34. UTILITY ANIMATIONS
   ============================================================ */

@keyframes dk-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes dk-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dk-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.dk-animate-pulse {
  animation: dk-pulse 2s ease-in-out infinite;
}

.dk-animate-spin {
  animation: dk-spin 1s linear infinite;
}

.dk-animate-bounce {
  animation: dk-bounce 1s ease-in-out infinite;
}

/* ============================================================
   34b. SECTION LABEL EYEBROW (opt-in via .dk-section-label)
   ============================================================ */

/* Institutional section eyebrow (opt-in) */
.dk-section-label {
  font-size: var(--df-text-label, 0.6875rem);
  font-weight: var(--df-weight-semibold);
  letter-spacing: var(--df-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--df-accent-text);
  margin-bottom: var(--df-space-3);   /* >= 12px breathing room before the block below */
}

/* ============================================================
   34c. SCROLL REVEAL (opt-in via .dk-fade-up)
   ============================================================ */

.dk-fade-up {
  opacity: 0;
  transform: translateY(12px);   /* subtle — large offsets read as broken/stacked layout mid-flight */
  transition: opacity 0.45s var(--df-ease-reveal, cubic-bezier(0.2,0.8,0.2,1)),
              transform 0.45s var(--df-ease-reveal, cubic-bezier(0.2,0.8,0.2,1));
}

.dk-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dk-fade-up-d1 { transition-delay: 0.06s; }
.dk-fade-up-d2 { transition-delay: 0.12s; }
.dk-fade-up-d3 { transition-delay: 0.18s; }
.dk-fade-up-d4 { transition-delay: 0.24s; }
.dk-fade-up-d5 { transition-delay: 0.30s; }
.dk-fade-up-d6 { transition-delay: 0.36s; }

/* ============================================================
   34c-2. REPORT FILTER PILLS (shared .rpt-pill / .rpt-filter-group)
   Canonical filter pill pattern used by library.html, templates.html,
   and any future Reports-section pages.  Extracted from page-level
   <style> blocks so there is a single source of truth.
   ============================================================ */

.rpt-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.rpt-filter-label {
  font-size: var(--df-text-label);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-label);
}

.rpt-pill {
  padding: 4px 11px; /* boss 2026-06-11: compact filter pills, unified */
  background: #ffffff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: all var(--df-duration-fast) var(--df-ease);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rpt-pill:hover {
  background: var(--df-bg-elevated);
  border-color: var(--df-border-3);
  color: var(--df-text-primary);
}

.rpt-pill.active {
  background: #191918;
  border-color: #191918;
  color: #ffffff;
  font-weight: var(--df-weight-semibold);
}

/* ── .rpt-toolbar: contained white filter bar (library/templates) ──
   Controls live ON a surface instead of loose on the canvas. Groups are
   atomic; the bar wraps BETWEEN groups, left-aligned. The status seg only
   right-aligns when everything fits on one row. */
.rpt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--df-space-5);
  row-gap: var(--df-space-3);
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: 10px 14px;
}

.rpt-toolbar__divider {
  width: 1px;
  height: 22px;
  background: var(--df-border);
  flex-shrink: 0;
}

/* inside the white bar, resting pills sit on elevated gray so the bar
   reads as one instrument (active stays dark) */
.rpt-toolbar .rpt-pill {
  background: var(--df-bg-elevated);
  border-color: transparent;
}
.rpt-toolbar .rpt-pill:hover {
  background: var(--df-bg-hover);
  border-color: transparent;
}
.rpt-toolbar .rpt-pill.active {
  background: #191918;
  border-color: #191918;
}
.rpt-toolbar .dk-seg {
  border-color: transparent;
  background: var(--df-bg-elevated);
}

.rpt-filter-group--status { margin-left: 0; }
@media (min-width: 1760px) {
  .rpt-filter-group--status { margin-left: auto; }
}

/* ============================================================
   34c-3. SHARED FILTER BUTTON (.fbtn)
   Canonical filter pill used by deal-sourcing, investment-committee,
   funds, lps, and other listing pages.  Consolidated from 4 page-local
   copies — resting state = WHITE bg + solid border (canvas-era rule:
   gray-on-gray invisible on #F8F9F0 canvas).
   ============================================================ */

.fbtn {
  padding: 4px 11px; /* boss 2026-06-11: compact filter pills, unified */
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-label);
  font-weight: var(--df-weight-semibold);
  border: 1px solid var(--df-border);
  background: #ffffff;                    /* WHITE resting bg — not elevated gray */
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: all var(--df-duration) var(--df-ease);
}
.fbtn:hover {
  background: var(--df-bg-elevated);
  border-color: var(--df-border-3);
  color: var(--df-text-primary);
}
.fbtn:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
}
.fbtn.active {
  background: var(--dk-dark-1, #191918);
  border-color: var(--dk-dark-1, #191918);
  color: var(--dk-text-on-dark, #fffef2);
  font-weight: var(--df-weight-semibold);
}

/* ============================================================
   34d. STAT STRIP (dense KPI grid, ThunderScan pattern)
   ============================================================ */

/* ── Canonical KPI stat strip (the ONE every page converges to) — fused cells,
   hairline dividers, a centered gold top-accent per cell, flat (no shadow).
   Auto-equal columns for ANY cell count, so pages need no per-strip modifier. ── */
.dk-stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-md);
  overflow: hidden;
  background: var(--dk-bg-card);
}

.dk-stat-strip__cell {
  position: relative;
  padding: 16px 18px;
  border-right: 1px solid var(--df-border-hairline);
  text-align: center;
}

.dk-stat-strip__cell:last-child {
  border-right: none;
}

.dk-stat-strip__label {
  font-size: var(--df-text-label, 0.6875rem);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--df-tracking-label, 0.08em);
  margin-bottom: 6px;
}

.dk-stat-strip__value {
  font-family: var(--df-font-body);
  font-size: 1.375rem;
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--df-text-primary);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.dk-stat-strip__value--lg   { font-size: 1.625rem; }
/* Wenli 2026-06-11: KPI numbers are ONE color — primary ink. Per-cell gold/
   green values read as random ("AI 乱七八糟的颜色"). Semantic color lives in
   the delta/note rows only, where it has a reason. Modifiers kept as no-ops
   so existing markup stays valid. */
.dk-stat-strip__value--gold { color: var(--df-text-primary); }
.dk-stat-strip__value--green{ color: var(--df-text-primary); }
.dk-stat-strip__value--muted{ color: var(--df-text-muted); }

/* Unit suffix inside stat-strip values (e.g. "M", "x", "%") — smaller, lighter,
   baseline-aligned.  Promoted from fund-i.html inline style. */
.dk-stat-strip__unit {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--df-text-muted);
  margin-left: 2px;
}

.dk-stat-strip__note {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  margin-top: 2px;
}

/* ── dk-val-suffix: shared inline value suffix (e.g. "M", "x", "%")
   Promoted from company.html — keeps the suffix visually subordinate
   to the main number while staying on the same baseline. ── */
.dk-val-suffix {
  font-size: 50%;
  font-weight: 500;
  color: var(--df-text-muted);
  margin-left: 4px;
}

/* ── dk-doc-link--placeholder: disabled/pending document link ── */
.dk-doc-link--placeholder {
  cursor: default;
  pointer-events: none;
  border-style: dashed;
}
.dk-doc-link--placeholder:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--df-border);
}

/* ============================================================
   34e. TABULAR NUMBERS + PROGRESS GRADIENT UTILITIES
   2026-06-11: JBM retired app-wide (A1) — class kept for pages that
   reference it, but now renders Inter + tabular-nums instead.
   ============================================================ */

/* Tabular numbers (apply to any financial figure) */
.dk-mono-num {
  font-family: var(--df-font-body);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   35. SIDEBAR.JS COMPATIBLE STYLES
   ============================================================ */

/* These styles match the classes generated by sidebar.js */

.dk-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--df-topbar-height);
  padding: 0 var(--df-space-4);
  border-bottom: 1px solid var(--df-border);
  flex-shrink: 0;
}

.dk-sidebar-logo-link {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  text-decoration: none;
}

.dk-sidebar-logo-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.dk-sidebar-logo-text {
  font-weight: var(--df-weight-bold);
  font-size: 0.9375rem;
  color: var(--df-text-primary);
  letter-spacing: 0.06em;
}

.dk-sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--df-radius);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--df-text-muted);
  transition: all var(--df-duration-fast) var(--df-ease);
  flex-shrink: 0;
}

.dk-sidebar-toggle:hover {
  background: var(--df-bg-hover);
  color: var(--df-text-primary);
}

.dk-sidebar-nav {
  flex: 1;
  padding: var(--df-space-3) 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dk-sidebar-nav::-webkit-scrollbar {
  display: none;
}

.dk-sidebar-group {
  margin-bottom: var(--df-space-1);
}

.dk-sidebar-group-label {
  padding: var(--df-space-3) var(--df-space-4) var(--df-space-2);
  font-size: 0.6875rem;
  font-weight: var(--df-weight-bold);
  color: var(--df-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.dk-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  padding: var(--df-space-2) var(--df-space-3);
  margin: 1px var(--df-space-2);
  border-radius: var(--df-radius);
  font-size: var(--df-text-micro);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-secondary);
  transition: all var(--df-duration-fast) var(--df-ease);
  cursor: pointer;
  text-decoration: none;
}

.dk-sidebar-item-icon {
  width: 18px;
  text-align: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
  color: var(--df-text-tertiary);
}

.dk-sidebar-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-sidebar-item:hover {
  color: var(--df-text-primary);
  background: var(--df-bg-elevated);
}

.dk-sidebar-item:hover .dk-sidebar-item-icon {
  color: var(--df-text-secondary);
}

.dk-sidebar-item:focus-visible {
  outline: 2px solid var(--df-text-primary);
  outline-offset: -2px;
}

.dk-sidebar-item--active {
  color: var(--df-accent-text);
  background: var(--df-accent-subtle);
}

.dk-sidebar-item--active .dk-sidebar-item-icon {
  color: var(--df-accent-text);
}

/* ── IR hub sub-nav: groups the LP tools (Capital Calls, Reporting, LP Portal,
   Comms, Tax Center) under the LP Directory hub instead of a long sidebar list.
   Lets the sidebar IR group stay at four items (Isaac: "凡是 LP 都归进去, 别那么长"). ── */
.ir-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--df-space-4) 0 var(--df-space-5);
}
.ir-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* boss 2026-06-12: subnav pills follow the same compact spec as filter
     pills (4px 11px / 11px) — "这种改动都需要统一改" */
  padding: 4px 11px;
  border-radius: var(--df-radius-full);
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-medium);
  color: var(--df-text-secondary);
  text-decoration: none;
  border: 1px solid var(--df-border);
  background: var(--dk-bg-card);
  transition: color var(--df-duration-fast) var(--df-ease),
              border-color var(--df-duration-fast) var(--df-ease),
              transform var(--df-duration-fast) var(--df-ease),
              box-shadow var(--df-duration-fast) var(--df-ease);
}
.ir-subnav a:hover {
  color: var(--df-text-primary);
  border-color: var(--df-border-3);
  transform: translateY(-1px);
  box-shadow: var(--df-shadow-xs);
}
.ir-subnav a i { font-size: 10px; color: var(--df-text-tertiary); }
.ir-subnav a:hover i { color: var(--df-accent-text); }
/* active (dark) pill: icon follows the pill's light text — never dark-on-dark */
.ir-subnav a[aria-current="page"] i,
.ir-subnav a[aria-current="page"]:hover i { color: inherit; }

/* ── Investment Lifecycle group: a subtle stepper "spine" connecting the four
   stages (Deal Sourcing → IC → PortCos → Exits & DPI) so the menu itself reads
   as the deal journey. The connector runs through the icon nodes. ── */
.dk-sidebar-group--lifecycle {
  position: relative;
}
.dk-sidebar-group--lifecycle::before {
  content: "";
  position: absolute;
  /* centered on the icon nodes (half of the 22px node) — Wenli 2026-06-11:
     dotted journey line instead of a solid gradient bar */
  left: calc(var(--df-space-2) + var(--df-space-3) + 11px - 1px);
  top: 52px;     /* first node center */
  bottom: 22px;  /* last node center */
  width: 0;
  border-left: 1.5px dotted var(--df-border-3);
  z-index: 0;
}
.dk-sidebar-group--lifecycle .dk-sidebar-item {
  position: relative;
  z-index: 1;
}
/* Icon node sits ON the spine, masking the line behind it — ringed 22px
   circles (Wenli): inset ring resting, stronger ring on hover, gold ring
   when active */
.dk-sidebar-group--lifecycle .dk-sidebar-item-icon {
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--df-bg-base);
  border-radius: var(--df-radius-full);
  box-shadow: inset 0 0 0 1px var(--df-border-2);
  transition: box-shadow var(--df-duration-fast) var(--df-ease),
              background var(--df-duration-fast) var(--df-ease);
}
.dk-sidebar-group--lifecycle .dk-sidebar-item:hover .dk-sidebar-item-icon {
  background: var(--df-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--df-border-3);
}
.dk-sidebar-group--lifecycle .dk-sidebar-item--active .dk-sidebar-item-icon {
  background: var(--df-accent-subtle);
  box-shadow: inset 0 0 0 1px var(--df-accent-border);
}

/* ── Wenli micro-interaction: trailing-arrow nudge on hover (subtle, signature) ── */
.dk-fund-tile__link i, .dk-dash-panel__link i, .fo-tile__link i,
.fo-spv-row__link i, .dk-link-arrow i, .rpt-tile__link i {
  transition: transform var(--df-duration) var(--df-ease);
}
.dk-fund-tile__link:hover i, .dk-dash-panel__link:hover i, .fo-tile__link:hover i,
.fo-spv-row__link:hover i, .dk-link-arrow:hover i, .rpt-tile__link:hover i {
  transform: translateX(3px);
}

/* ── Wenli 巧思: NAV sparkline on fund tiles (gold trend, faint area) ── */
.dk-spark {
  display: block;
  width: 100%;
  height: 30px;
}
.dk-spark__line {
  fill: none;
  stroke: var(--df-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;   /* crisp 1.5px regardless of stretch */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dk-spark__area {
  fill: var(--df-accent);
  opacity: 0.07;
  stroke: none;
}
/* Shared sparkline slot — fixed height keeps tiles equal-height even when a
   Raising fund has no NAV history (it shows the centered label instead). */
.dk-fund-tile__spark,
.fo-tile__spark {
  height: 30px;
  margin-top: var(--df-space-3);
  padding-top: var(--df-space-3);
  border-top: 1px solid var(--df-border-hairline);
  display: flex;
  align-items: center;
}
.dk-spark__empty {
  width: 100%;
  text-align: center;
  font-size: var(--df-text-label);
  letter-spacing: var(--df-tracking-label);
  text-transform: uppercase;
  color: var(--df-text-muted);
}

.dk-sidebar-user {
  padding: var(--df-space-3) var(--df-space-4);
  border-top: 1px solid var(--df-border);
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  flex-shrink: 0;
}

.dk-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--df-text-nano);
  font-weight: var(--df-weight-bold);
  color: var(--df-text-primary);
  background: var(--df-accent);
  flex-shrink: 0;
}

.dk-sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.dk-sidebar-user-name {
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-semibold);
  color: var(--df-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dk-sidebar-user-role {
  font-size: var(--df-text-nano);
  color: var(--df-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar collapsed state (sidebar.js class) */
.dk-sidebar--collapsed {
  width: 56px;
}

.dk-sidebar--collapsed .dk-sidebar-logo {
  padding: 0;
  justify-content: center;
}

.dk-sidebar--collapsed .dk-sidebar-logo-link {
  display: none;
}

.dk-sidebar--collapsed .dk-sidebar-toggle {
  margin: 0;
}

.dk-sidebar--collapsed .dk-sidebar-toggle i::before {
  content: "\f101"; /* angles-right */
}

.dk-sidebar--collapsed .dk-sidebar-nav {
  padding: var(--df-space-2) 0;
}

.dk-sidebar--collapsed .dk-sidebar-group-label {
  display: none;
}

.dk-sidebar--collapsed .dk-sidebar-group {
  margin-bottom: 0;
}

/* Hide the lifecycle stepper spine when the rail is collapsed (icons re-center) */
.dk-sidebar--collapsed .dk-sidebar-group--lifecycle::before {
  display: none;
}

.dk-sidebar--collapsed .dk-sidebar-item {
  justify-content: center;
  padding: var(--df-space-2) 0;
  margin: 2px var(--df-space-1);
}

.dk-sidebar--collapsed .dk-sidebar-item-icon {
  font-size: 1rem;
  width: auto;
}

.dk-sidebar--collapsed .dk-sidebar-item-label {
  display: none;
}

.dk-sidebar--collapsed .dk-sidebar-user {
  justify-content: center;
  padding: var(--df-space-3) 0;
}

.dk-sidebar--collapsed .dk-sidebar-user-info {
  display: none;
}

.dk-sidebar--collapsed .dk-sidebar-user-avatar {
  width: 28px;
  height: 28px;
  font-size: var(--df-text-label, 0.6875rem);
}

.dk-sidebar--collapsed ~ .dk-main {
  margin-left: 56px;
}
.dk-app--sidebar-collapsed .dk-main {
  margin-left: 56px;
}

/* ============================================================
   35b. THOR-ELEVATION SHARED COMPONENTS (2026-06-10)
   Canonical reusable patterns extracted from Thor standalone study.
   These classes are the ONLY way to render their respective concepts —
   page agents MUST use these, never fork local variants.
   ============================================================ */

/* ── dk-delta: canonical inline delta badge (up/down/flat) ──
   Compatible with dashboard.html local copy (which will be removed). */
.dk-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--df-font-body);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.dk-delta--up   { color: var(--df-green-text); }
.dk-delta--down { color: var(--df-red); }
.dk-delta--flat { color: var(--df-text-muted); }

/* Pill variant (with tinted background) */
.dk-delta--pill {
  padding: 2px 7px;
  border-radius: 4px;
}
.dk-delta--pill.dk-delta--up   { background: var(--df-green-glow); }
.dk-delta--pill.dk-delta--down { background: var(--df-red-glow); }
.dk-delta--pill.dk-delta--flat { background: var(--df-bg-elevated); }

/* ── dk-stat-strip__delta: delta row inside stat-strip cells ── */
.dk-stat-strip__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--df-font-body);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  line-height: 1.3;
}
.dk-stat-strip__delta--up   { color: var(--df-green-text); }
.dk-stat-strip__delta--down { color: var(--df-red); }
.dk-stat-strip__delta--flat { color: var(--df-text-muted); }

/* ── dk-meta-chip: inline metadata chip with optional icon ── */
.dk-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--df-bg-elevated);
  color: var(--df-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.dk-meta-chip svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
  flex-shrink: 0;
}

/* ── dk-status: status pill with colored dot ── */
.dk-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--df-radius-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.dk-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dk-status--published {
  background: rgba(21, 128, 61, 0.08);
  color: var(--df-green-text);
}
.dk-status--published .dk-status__dot { background: var(--df-green-text); }
.dk-status--draft {
  background: var(--df-bg-elevated);
  color: var(--df-text-secondary);
}
.dk-status--draft .dk-status__dot { background: var(--df-text-muted); }
.dk-status--archived {
  background: var(--df-bg-elevated);
  color: var(--df-text-muted);
}
.dk-status--archived .dk-status__dot { background: var(--df-border); }

/* ── dk-findings: numbered key-findings card section ── */
.dk-findings {
  padding: 0;
}
.dk-finding {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}
.dk-finding + .dk-finding {
  border-top: 1px solid var(--df-border-hairline);
}
.dk-finding__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 185, 35, 0.10);
  border: 1px solid rgba(255, 185, 35, 0.22);
  color: var(--df-accent-text);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.dk-finding__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--df-text-secondary);
}
.dk-finding__text b,
.dk-finding__text strong {
  color: var(--df-text-primary);
  font-weight: 600;
}

/* ── dk-avstack: overlapping avatar monogram stack ── */
.dk-avstack {
  display: inline-flex;
  align-items: center;
}
.dk-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  border: 2px solid #ffffff;
  flex-shrink: 0;
}
.dk-av + .dk-av {
  margin-left: -8px;
}
/* Color rotation for monogram circles */
.dk-av:nth-child(4n+1) { background: #191918; }
.dk-av:nth-child(4n+2) { background: #8A5E07; }
.dk-av:nth-child(4n+3) { background: #5f5e58; }
.dk-av:nth-child(4n+4) { background: #FFB923; color: #191918; }
/* Overflow "+N" chip */
.dk-av--more {
  background: var(--df-bg-elevated);
  color: var(--df-text-secondary);
  font-weight: 600;
}

/* ── dk-icon-pane: rounded icon tile with tint variants ── */
.dk-icon-pane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}
.dk-icon-pane--lg {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.dk-icon-pane--gold {
  background: rgba(255, 185, 35, 0.10);
  border: 1px solid rgba(255, 185, 35, 0.22);
  color: var(--df-accent-text);
}
.dk-icon-pane--dark {
  background: rgba(25, 25, 24, 0.08);
  border: 1px solid rgba(25, 25, 24, 0.18);
  color: var(--df-text-primary);
}
.dk-icon-pane--green {
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.18);
  color: var(--df-green-text);
}

/* ── dk-seg: segmented control ── */
.dk-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid var(--df-border);
}
.dk-seg__btn {
  padding: 5px 14px;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: all var(--df-duration-fast) var(--df-ease);
}
.dk-seg__btn:hover {
  color: var(--df-text-primary);
}
.dk-seg__btn.is-active {
  background: #191918;
  color: #ffffff;
  box-shadow: none;
}

/* ── dk-period-pill: date/period selector pill ── */
.dk-period-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--df-radius-full);
  background: #ffffff;
  border: 1px solid var(--df-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--df-text-secondary);
  cursor: pointer;
  transition: border-color var(--df-duration-fast) var(--df-ease);
}
.dk-period-pill:hover {
  border-color: var(--df-border-3);
}
.dk-period-pill svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
  flex-shrink: 0;
  color: var(--df-text-muted);
}

/* ── dk-freshness: data freshness indicator with gold dot ── */
.dk-freshness {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--df-font-body);
  font-size: 11px;
  color: var(--df-text-muted);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.dk-freshness__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 0 3px rgba(255, 185, 35, 0.14);
  flex-shrink: 0;
}

/* ── dk-deck-header-row: GP chrome band on deck/doc viewer pages
      (canonical — was duplicated in deck.html + deck-q1/q4 wrappers) ── */
.dk-deck-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  background: var(--dk-canvas, #F8F9F0);
  border-bottom: 1px solid var(--df-border, #DEDFD7);
  flex-shrink: 0;
}
.dk-deck-header-row__spacer { flex: 1; }
.dk-deck-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--df-text-secondary, #44423d);
  background: #ffffff;
  border: 1px solid var(--df-border, #DEDFD7);
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s var(--df-ease);
}
.dk-deck-export-btn:hover {
  background: var(--df-bg-hover, #E7E8DB);
  border-color: var(--df-border-3, #c8c6bc);
  color: var(--df-text-primary, #191918);
}
.dk-deck-export-btn i { font-size: 12px; }
.dk-app--lpview .dk-deck-header-row { display: none !important; }

/* ── LP-view mode: shared banner + sidebar/topbar/margin reset
   (was duplicated inline in deck-q1, deck-q4, deck.html, doc-view) ── */
.dk-shared-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--df-space-5);
  background: var(--df-accent-subtle);
  border-bottom: 1px solid var(--df-accent-border);
  font-size: var(--df-text-nano);
  color: var(--df-accent-text);
  font-weight: var(--df-weight-medium);
}
.dk-shared-banner b {
  color: var(--df-text-primary);
  font-weight: var(--df-weight-semibold);
}
.dk-app--lpview #dk-sidebar-root,
.dk-app--lpview .dk-viewer-topbar {
  display: none !important;
}
.dk-app--lpview .dk-main {
  margin-left: 0 !important;
}

/* ============================================================
   36. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   37. RESPONSIVE: TABLET (< 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .dk-sidebar {
    width: 52px;
  }

  .dk-sidebar .dk-sidebar__logo {
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .dk-sidebar .dk-sidebar__logo img,
  .dk-sidebar .dk-sidebar__logo-icon,
  .dk-sidebar .dk-sidebar__logo-text,
  .dk-sidebar .dk-sidebar__logo-sub {
    display: none;
  }

  .dk-sidebar .dk-sidebar__toggle {
    margin: 0 auto;
  }

  .dk-sidebar .dk-sidebar__nav {
    padding: var(--df-space-2) 0;
  }

  .dk-sidebar .dk-sidebar__group-label {
    display: none;
  }

  .dk-sidebar .dk-sidebar__group {
    margin-bottom: 0;
  }

  .dk-sidebar .dk-sidebar__link {
    justify-content: center;
    padding: 10px 0;
    margin: 1px 6px;
    overflow: hidden;
    font-size: 0;
    gap: 0;
  }

  .dk-sidebar .dk-sidebar__link i {
    font-size: 0.9375rem;
    width: auto;
    min-width: auto;
  }

  .dk-sidebar .dk-sidebar__user {
    justify-content: center;
    padding: var(--df-space-3) 0;
    gap: 0;
  }

  .dk-sidebar .dk-sidebar__user-name,
  .dk-sidebar .dk-sidebar__user-role,
  .dk-sidebar .dk-sidebar__user-info,
  .dk-sidebar .dk-sidebar__menu-btn {
    display: none;
  }

  .dk-sidebar .dk-sidebar__avatar {
    width: 28px;
    height: 28px;
    font-size: var(--df-text-nano);
  }

  .dk-main {
    margin-left: 52px;
  }

  .dk-tile-grid {
    grid-template-columns: 1fr;
  }

  .dk-ai-panel {
    width: 100%;
    max-width: 380px;
  }
}

/* ============================================================
   38. RESPONSIVE: MOBILE (< 768px)
   ============================================================ */

@media (max-width: 768px) {
  .dk-content {
    padding: var(--df-space-4);
  }

  .dk-page-header {
    --df-header-pad-x: var(--df-space-4);   /* match mobile .dk-content padding so the bleed doesn't overflow */
    flex-direction: column;
    align-items: stretch;
    margin: calc(-1 * var(--df-space-4)) calc(-1 * var(--df-space-4)) var(--df-space-5);
  }

  .dk-page-zone {
    --df-header-pad-x: var(--df-space-4);
    margin: 0 calc(-1 * var(--df-space-4)) var(--df-space-5);
  }

  .dk-page-header__actions {
    margin-top: var(--df-space-3);
    align-self: stretch;
  }

  .dk-kpi-row {
    grid-template-columns: 1fr;
  }

  /* Stat strip wraps to 2 columns on mobile (auto-column would cramp 4–8 cells) */
  .dk-stat-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
  .dk-stat-strip__cell { border-bottom: 1px solid var(--df-border-hairline); }
  .dk-stat-strip__cell:nth-child(2n) { border-right: none; }

  .dk-kpi-card {
    min-width: 100%;
  }

  .dk-filter-bar {
    flex-wrap: wrap;
  }

  .dk-search {
    width: 100%;
  }

  .dk-topbar__search {
    display: none;
  }

  .dk-table {
    display: block;
    overflow-x: auto;
  }

  .dk-modal {
    width: 95%;
    max-width: none;
  }

  .dk-palette,
  .dk-cmd-palette {
    width: 95%;
    max-width: none;
  }

  .dk-toast-container {
    left: var(--df-space-4);
    right: var(--df-space-4);
    bottom: var(--df-space-4);
  }

  .dk-toast {
    min-width: auto;
    width: 100%;
  }
}

/* ============================================================
   39. PRINT STYLES
   ============================================================ */

@media print {
  .dk-sidebar,
  .dk-topbar,
  .dk-ai-panel,
  .dk-demo-banner,
  .dk-toast-container {
    display: none !important;
  }

  .dk-main {
    margin-left: 0 !important;
  }

  .dk-content {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .dk-tile,
  .dk-data-card,
  .dk-kpi-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ── Isaac 2026-06-12 fused strip: stat-strip + findings read as one box ── */
.dk-stat-strip--fused {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dk-strip-findings {
  border: 1px solid var(--df-border);
  border-top: 1px solid var(--df-border-light);
  border-radius: 0 0 var(--df-radius-md) var(--df-radius-md);
  margin-top: -1px;
  background: var(--dk-bg-card);
  padding: 12px 18px;
}
.dk-strip-findings .dk-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 24px;
}
.dk-strip-findings .dk-finding {
  padding: 8px 0;
}
.dk-strip-findings .dk-finding + .dk-finding {
  border-top: none;
}

/* ============================================================
   END OF FILE
   ============================================================ */