.briefing-card { background: var(--color-card); border: 1px solid var(--color-border-light); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
      .briefing-card .new-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
      .briefing-card .title { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
      .briefing-card .header-actions { display: flex; align-items: center; gap: 8px; }
      .briefing-card .view-seg { display: inline-flex; background: var(--color-bg-soft); border-radius: 8px; padding: 2px; min-height: 44px; }
      .briefing-card .view-seg button { font-size: var(--font-size-sm); padding: 5px 12px; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; border-radius: 6px; font-weight: 600; touch-action: manipulation; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
      .briefing-card .view-seg button.on { background: var(--color-card); color: var(--color-text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
      .briefing-card .edit-btn { font-size: var(--font-size-sm); padding: 5px 12px; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 6px; cursor: pointer; color: var(--color-text); min-height: 44px; display: inline-flex; align-items: center; }
      .briefing-card .edit-btn:hover { background: var(--color-bg); }

      /* ── Boss body (Operating Brief) ── */
      .briefing-card .boss-body { padding: 4px 0 4px; }
      .briefing-card .boss-body .hero { text-align: center; padding: 18px 0 4px; }
      .briefing-card .boss-body .hero-num { font-size: var(--font-size-hero); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
      .briefing-card .boss-body .hero-lbl { font-size: var(--font-size-lg); color: var(--color-text-muted); margin-top: 6px; font-weight: 500; }
      .briefing-card .boss-body .hero-warn { color: var(--color-warn-strong); font-weight: 700; margin-left: 2px; }
      .briefing-card .boss-body .hero-sub { text-align: center; font-size: var(--font-size-lg); color: var(--color-text-secondary); margin: 14px 0 4px; display: flex; gap: 10px; justify-content: center; align-items: baseline; flex-wrap: wrap; }
      .briefing-card .boss-body .hero-sub b { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
      .briefing-card .boss-body .hero-sub .dot { color: var(--color-text-muted); }
      .briefing-card .revenue-audit-banner {
        margin: 12px 0 8px;
        padding: 9px 12px;
        border-radius: 8px;
        border: 1px solid #fed7aa;
        background: #fff7ed;
        color: #9a3412;
        font-size: var(--font-size-sm);
        line-height: 1.45;
      }
      .briefing-card .revenue-audit-banner .ra-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
      }
      .briefing-card .revenue-audit-banner b {
        color: #7c2d12;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .revenue-audit-banner .ra-label {
        font-weight: 800;
        color: #c2410c;
      }
      .briefing-card .revenue-audit-banner .ra-diff {
        font-weight: 800;
        color: #b91c1c;
      }
      .briefing-card .revenue-audit-banner .ra-detail {
        margin-top: 4px;
        color: #7c2d12;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .finance-body .audit-subrow td {
        background: #fff7ed;
        color: #9a3412;
        font-size: var(--font-size-xs);
      }
      .briefing-card .prep-par-board {
        margin: 14px 0 10px;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: var(--color-card);
        box-shadow: var(--shadow-sm);
      }
      .briefing-card .ppb-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--color-border-light);
        flex-wrap: wrap;
      }
      .briefing-card .ppb-title {
        color: var(--color-text);
        font-size: var(--font-size-xl);
        font-weight: 800;
      }
      .briefing-card .ppb-sub,
      .briefing-card .ppb-status {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
      }
      .briefing-card .ppb-meta {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .briefing-card .ppb-meta span {
        border-radius: 999px;
        padding: 3px 8px;
        background: var(--color-bg-soft);
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        font-weight: 700;
        white-space: nowrap;
      }
      .briefing-card .ppb-meta span:last-child {
        background: var(--color-primary-light);
        color: var(--color-primary-strong);
      }
      .briefing-card .ppb-save {
        min-height: 36px;
        padding: 5px 12px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: var(--color-card);
        color: var(--color-text);
        font: inherit;
        font-size: var(--font-size-sm);
        font-weight: 700;
        cursor: pointer;
      }
      .briefing-card .ppb-save:hover { background: var(--color-bg-soft); }
      .briefing-card .ppb-save:disabled { opacity: 0.55; cursor: wait; }
      .briefing-card .ppb-list { display: grid; }
      .briefing-card .ppb-row {
        display: grid;
        gap: 8px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--color-border-light);
      }
      .briefing-card .ppb-row:last-child {
        border-bottom: 0;
      }
      .briefing-card .ppb-row-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
      .briefing-card .ppb-dish {
        min-width: 0;
        display: grid;
        gap: 3px;
      }
      .briefing-card .ppb-dish b {
        color: var(--color-text);
        font-size: var(--font-size-lg);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .briefing-card .ppb-dish span {
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .briefing-card .ppb-verdict {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--color-text-secondary);
        font-size: 17px;
        font-weight: 800;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-verdict b {
        font-size: var(--font-size-md);
        line-height: 1;
      }
      .briefing-card .ppb-left .ppb-verdict { color: var(--color-text-secondary); }
      .briefing-card .ppb-soldout .ppb-verdict,
      .briefing-card .ppb-over .ppb-verdict {
        color: var(--color-warn-strong);
      }
      .briefing-card .ppb-missing .ppb-verdict,
      .briefing-card .ppb-suppressed .ppb-verdict {
        color: #92400e;
      }
      .briefing-card .ppb-bullet {
        position: relative;
        height: 22px;
        margin: 2px 0 0;
        border-radius: 3px;
        background: var(--color-bg-soft);
        overflow: visible;
      }
      .briefing-card .ppb-measure {
        position: absolute;
        left: 0;
        top: 4px;
        height: 14px;
        border-radius: 3px;
        background: #334155;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
      }
      .briefing-card .ppb-measure.ppb-hot {
        background: var(--color-warn-strong);
      }
      .briefing-card .ppb-ghost {
        position: absolute;
        top: 4px;
        height: 14px;
        border-top: 1px dashed var(--color-warn-strong);
        border-bottom: 1px dashed var(--color-warn-strong);
        background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(217,119,6,.18) 3px, rgba(217,119,6,.18) 6px);
        -webkit-mask: linear-gradient(90deg, #000 40%, transparent);
        mask: linear-gradient(90deg, #000 40%, transparent);
      }
      .briefing-card .ppb-target {
        position: absolute;
        top: -3px;
        width: 2.5px;
        height: 28px;
        background: var(--color-text);
        border-radius: 2px;
      }
      .briefing-card .ppb-target::after {
        content: attr(data-label);
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--color-text);
        font-size: var(--font-size-2xs);
        font-weight: 800;
        white-space: nowrap;
      }
      .briefing-card .ppb-facts {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-facts b {
        color: var(--color-text);
        font-size: var(--font-size-base);
        font-weight: 800;
      }
      .briefing-card .ppb-sep {
        color: var(--color-text-faint);
        margin: 0 6px;
      }
      .briefing-card .ppb-result {
        border-radius: 6px;
        background: var(--color-bg-soft);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        line-height: 1.45;
        padding: 7px 9px;
      }
      .briefing-card .ppb-soldout .ppb-result,
      .briefing-card .ppb-over .ppb-result {
        background: #fff7ed;
        color: #9a3412;
      }
      .briefing-card .ppb-source {
        margin-top: 1px;
      }
      .briefing-card .ppb-source > summary {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        list-style: none;
        cursor: pointer;
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-weight: 700;
      }
      .briefing-card .ppb-source > summary::-webkit-details-marker {
        display: none;
      }
      .briefing-card .ppb-source > summary span {
        color: var(--color-text-muted);
        font-size: var(--font-size-2xs);
        transition: transform 0.15s ease;
      }
      .briefing-card .ppb-source[open] > summary {
        color: var(--color-text-muted);
      }
      .briefing-card .ppb-source[open] > summary span {
        transform: rotate(180deg);
      }
      .briefing-card .ppb-source-body {
        margin-top: 8px;
        padding: 9px 11px;
        border-radius: 6px;
        background: var(--color-bg-soft);
      }
      .briefing-card .ppb-source-body table {
        width: 100%;
        border-collapse: collapse;
      }
      .briefing-card .ppb-source-body td {
        padding: 4px 0;
        border-bottom: 1px solid var(--color-border);
        vertical-align: top;
        font-size: var(--font-size-md);
      }
      .briefing-card .ppb-source-body tr:last-child td {
        border-bottom: 0;
      }
      .briefing-card .ppb-src-k {
        color: var(--color-text-secondary);
        white-space: nowrap;
        padding-right: 12px;
      }
      .briefing-card .ppb-src-v {
        color: var(--color-text);
        font-weight: 800;
        white-space: nowrap;
        padding-right: 12px;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-src-note {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        line-height: 1.45;
      }
      .briefing-card .ppb-next {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 9px;
        border-top: 1px dashed var(--color-border);
        min-width: 0;
      }
      .briefing-card .ppb-next span {
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 700;
        white-space: nowrap;
      }
      .briefing-card .ppb-next input {
        width: 72px;
        min-height: 34px;
        border: 1.5px solid var(--color-border);
        border-radius: 6px;
        padding: 4px 6px;
        font: inherit;
        font-size: var(--font-size-lg);
        font-weight: 800;
        text-align: center;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-next input:focus {
        outline: 0;
        border-color: var(--color-primary);
        background: var(--color-primary-light);
      }
      .briefing-card .ppb-next input:disabled {
        background: var(--color-bg-soft);
        color: var(--color-text-muted);
      }
      .briefing-card .ppb-next em {
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-style: normal;
      }
      .briefing-card .ppb-stepper {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .briefing-card .ppb-step {
        width: 34px;
        min-height: 34px;
        border: 1.5px solid var(--color-border);
        border-radius: 6px;
        background: #fff;
        color: var(--color-text-secondary);
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .briefing-card .ppb-step:active { background: var(--color-bg-soft); }
      .briefing-card .ppb-step:disabled { opacity: 0.5; cursor: not-allowed; }

      /* 支付方式明细 折叠披露 (不在 .briefing-card 下, 选择器不限定) */
      .pay-summary {
        cursor: pointer;
        list-style: none;
        outline: none;
      }
      .pay-summary::-webkit-details-marker { display: none; }
      .pay-summary:hover { opacity: 0.82; }
      .pay-summary-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .pay-chevron {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        display: inline-block;
        transition: transform 0.15s ease;
      }
      .pay-details[open] .pay-chevron { transform: rotate(180deg); }
      .briefing-card .ppb-status {
        min-height: 18px;
        padding: 0 18px 12px;
        margin-top: 0;
      }
      @media (max-width: 640px) {
        .briefing-card .ppb-head,
        .briefing-card .ppb-row {
          padding-left: 12px;
          padding-right: 12px;
        }
        .briefing-card .ppb-meta {
          order: 3;
          width: 100%;
          margin-left: 0;
        }
        .briefing-card .ppb-save {
          margin-left: auto;
        }
        .briefing-card .ppb-row-top {
          align-items: flex-start;
        }
        .briefing-card .ppb-verdict {
          font-size: var(--font-size-base);
        }
        .briefing-card .ppb-next {
          flex-wrap: wrap;
        }
      }
      /* Compact admin-only prep adjustment console. It keeps the bullet/verdict
         visual language while optimizing repeated input and correction. */
      .briefing-card .prep-par-board {
        margin: 10px 0 8px;
        border: 1px solid var(--color-border-light);
        border-radius: 8px;
        box-shadow: none;
      }
      .briefing-card .ppb-head {
        padding: 7px 10px;
        gap: 8px;
      }
      .briefing-card .ppb-title {
        font-size: var(--font-size-sm);
      }
      .briefing-card .ppb-sub {
        font-size: var(--font-size-2xs);
      }
      .briefing-card .ppb-save {
        min-height: 28px;
        padding: 3px 9px;
      }
      .briefing-card .ppb-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
      }
      .briefing-card .ppb-mode {
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        min-height: 28px;
        padding: 2px;
        border: 1px solid var(--color-border-light);
        border-radius: 6px;
        background: var(--color-bg-soft);
      }
      .briefing-card .ppb-mode-btn {
        min-width: 74px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: var(--color-text-secondary);
        font: inherit;
        font-size: var(--font-size-xs);
        font-weight: 800;
        cursor: pointer;
      }
      .briefing-card .ppb-mode-btn.is-active {
        background: var(--color-card);
        color: var(--color-text);
        box-shadow: var(--shadow-sm);
      }
      .briefing-card .prep-par-board[data-mode="review"] [data-prep-view="bet"],
      .briefing-card .prep-par-board[data-mode="bet"] [data-prep-view="review"],
      .briefing-card .prep-par-board[data-mode="review"] .ppb-save {
        display: none;
      }
      .briefing-card .ppb-row {
        grid-template-columns: minmax(132px, 0.9fr) minmax(160px, 1.4fr) 80px 96px;
        min-height: 46px;
        padding: 4px 10px;
        gap: 8px;
        align-items: center;
      }
      .briefing-card .ppb-review-row {
        grid-template-columns: minmax(132px, 0.9fr) minmax(180px, 1.6fr) 88px;
      }
      .briefing-card .ppb-bet-row {
        grid-template-columns: minmax(132px, 0.9fr) minmax(160px, 1.35fr) 82px 96px;
      }
      .briefing-card .ppb-dish b {
        font-size: var(--font-size-sm);
      }
      .briefing-card .ppb-dish {
        position: relative;
      }
      .briefing-card .ppb-mix {
        grid-column: 1 / -1;
        margin-top: 2px;
      }
      .briefing-card .ppb-mix > summary {
        display: inline-flex;
        align-items: center;
        min-height: 14px;
        border-radius: 4px;
        padding: 1px 5px;
        background: var(--color-bg-soft);
        color: var(--color-text-muted);
        font-size: var(--font-size-2xs);
        font-weight: 800;
        line-height: 1;
        list-style: none;
        cursor: pointer;
        user-select: none;
      }
      .briefing-card .ppb-mix > summary::-webkit-details-marker {
        display: none;
      }
      .briefing-card .ppb-mix[open] > summary {
        color: var(--color-primary-strong);
        background: var(--color-primary-light);
      }
      .briefing-card .ppb-mix-list {
        margin-top: 4px;
        padding: 6px 8px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: var(--color-bg-soft);
      }
      .briefing-card .ppb-mix-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        min-height: 22px;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-mix-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .briefing-card .ppb-mix-item b {
        color: var(--color-primary-strong);
        font-size: var(--font-size-sm);
      }
      .briefing-card .ppb-mix-item + .ppb-mix-item {
        border-top: 1px solid var(--color-border-light);
      }
      .briefing-card .ppb-history {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 16px;
        margin-top: 2px;
        color: var(--color-text-muted);
        font-size: var(--font-size-2xs);
        overflow: hidden;
      }
      .briefing-card .ppb-history span {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        min-width: 0;
        border-radius: 4px;
        padding: 1px 4px;
        background: var(--color-bg-soft);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .ppb-history b {
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
      }
      .briefing-card .ppb-history-empty {
        white-space: nowrap;
      }
      .briefing-card .ppb-empty {
        min-height: 42px;
        padding: 12px 10px;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 700;
      }
      .briefing-card .ppb-graph {
        display: grid;
        gap: 5px;
        min-width: 0;
      }
      .briefing-card .ppb-bullet {
        height: 14px;
        margin: 0;
      }
      .briefing-card .ppb-measure,
      .briefing-card .ppb-ghost {
        top: 3px;
        height: 8px;
      }
      .briefing-card .ppb-target {
        top: 0;
        height: 14px;
      }
      .briefing-card .ppb-target::after {
        display: none;
      }
      .briefing-card .ppb-facts {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: var(--font-size-xs);
        line-height: 1;
        white-space: nowrap;
      }
      .briefing-card .ppb-facts b {
        font-size: var(--font-size-xs);
      }
      .briefing-card .ppb-verdict {
        justify-self: start;
        font-size: 16px;
        gap: 4px;
      }
      .briefing-card .ppb-left .ppb-verdict {
        color: #166534;
      }
      .briefing-card .ppb-soldout .ppb-verdict {
        color: #9a3412;
      }
      .briefing-card .ppb-over .ppb-verdict {
        color: #b91c1c;
      }
      .briefing-card .ppb-missing .ppb-verdict,
      .briefing-card .ppb-suppressed .ppb-verdict {
        color: #92400e;
      }
      .briefing-card .ppb-next {
        display: inline-flex;
        justify-content: flex-end;
        gap: 5px;
        padding-top: 0;
        border-top: 0;
      }
      .briefing-card .ppb-next span,
      .briefing-card .ppb-next em {
        font-size: var(--font-size-xs);
      }
      .briefing-card .ppb-next input {
        width: 50px;
        min-height: 26px;
        padding: 3px 6px;
        font-size: var(--font-size-sm);
        font-weight: 800;
      }
      .briefing-card .ppb-status {
        padding: 0 10px 7px;
        font-size: var(--font-size-xs);
      }
      @media (max-width: 640px) {
        .briefing-card .ppb-head,
        .briefing-card .ppb-row {
          padding-left: 10px;
          padding-right: 10px;
        }
        .briefing-card .ppb-actions {
          width: 100%;
          justify-content: space-between;
        }
        .briefing-card .ppb-mode {
          flex: 1;
        }
        .briefing-card .ppb-mode-btn {
          min-width: 0;
        }
        .briefing-card .ppb-row {
          grid-template-columns: minmax(72px, 0.8fr) minmax(82px, 1.2fr) 52px 56px;
          min-height: 44px;
          gap: 5px;
        }
        .briefing-card .ppb-review-row {
          grid-template-columns: minmax(72px, 0.8fr) minmax(96px, 1.4fr) 54px;
        }
        .briefing-card .ppb-bet-row {
          grid-template-columns: minmax(72px, 0.8fr) minmax(82px, 1.2fr) 52px 56px;
        }
        .briefing-card .ppb-facts {
          font-size: var(--font-size-2xs);
        }
        .briefing-card .ppb-mix > summary {
          padding-inline: 4px;
        }
        .briefing-card .ppb-dish b {
          white-space: normal;
          line-height: 1.15;
        }
        .briefing-card .ppb-history {
          flex-wrap: wrap;
          gap: 2px;
        }
        .briefing-card .ppb-history span {
          padding-inline: 3px;
        }
        .briefing-card .ppb-verdict {
          font-size: var(--font-size-sm);
        }
        .briefing-card .ppb-next input {
          width: 50px;
          min-height: 26px;
        }
        .briefing-card .ppb-next span,
        .briefing-card .ppb-next em {
          display: none;
        }
      }
      .briefing-card .product-sales-track {
        margin: 10px 0 8px;
        padding: 10px 12px;
        border: 1px solid var(--color-border-light);
        background: #ffffff;
        border-radius: 8px;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
      }
      .briefing-card .pst-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
        list-style: none;
        user-select: none;
      }
      .briefing-card .pst-head::-webkit-details-marker,
      .briefing-card .pst-group > summary::-webkit-details-marker {
        display: none;
      }
      .briefing-card .pst-title {
        color: var(--color-text);
        font-weight: 800;
      }
      .briefing-card .pst-count {
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
      }
      .briefing-card .pst-caret {
        font-weight: 800;
        color: var(--color-text-muted);
        transition: transform 0.15s ease;
      }
      .briefing-card .product-sales-track[open] .pst-caret {
        transform: rotate(180deg);
      }
      .briefing-card .pst-groups {
        display: grid;
        gap: 7px;
        margin-top: 9px;
      }
      .briefing-card .pst-group {
        border-top: 1px solid var(--color-border-light);
        padding-top: 7px;
      }
      .briefing-card .pst-group > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        cursor: pointer;
        color: var(--color-text);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .pst-group > summary span:last-child {
        color: var(--color-text-muted);
        font-weight: 600;
        text-align: right;
      }
      .briefing-card .pst-items {
        display: grid;
        gap: 4px;
        margin-top: 7px;
      }
      .briefing-card .pst-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 8px;
        align-items: center;
        min-height: 28px;
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .pst-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text);
      }
      .briefing-card .pst-qty {
        font-weight: 800;
        color: var(--color-primary-strong);
      }
      .briefing-card .pst-rev {
        color: var(--color-text-muted);
      }
      .briefing-card .pst-id {
        color: var(--color-text-muted);
        font-size: var(--font-size-2xs);
        border: 1px solid var(--color-border-light);
        border-radius: 4px;
        padding: 1px 4px;
      }
      .briefing-card .cost-backfill-queue {
        margin: 12px 0 10px;
        padding: 10px 12px;
        border: 1px solid #fde68a;
        background: #fffbeb;
        border-radius: 8px;
        color: #78350f;
        font-size: var(--font-size-sm);
      }
      .briefing-card .cbq-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
        list-style: none;
        user-select: none;
      }
      .briefing-card .cbq-head::-webkit-details-marker {
        display: none;
      }
      .briefing-card .cbq-title {
        font-weight: 800;
        color: #92400e;
      }
      .briefing-card .cbq-count {
        color: #a16207;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .cbq-caret {
        color: #92400e;
        font-weight: 800;
        transition: transform 0.15s ease;
      }
      .briefing-card .cost-backfill-queue[open] .cbq-caret {
        transform: rotate(180deg);
      }
      .briefing-card .cbq-list {
        display: grid;
        gap: 6px;
        margin-top: 8px;
      }
      .briefing-card .cbq-row {
        display: grid;
        grid-template-columns: minmax(112px, 1fr) minmax(0, 1.7fr) auto;
        align-items: center;
        gap: 8px;
      }
      .briefing-card .cbq-date,
      .briefing-card .cbq-fill {
        font: inherit;
        border-radius: 6px;
        cursor: pointer;
      }
      .briefing-card .cbq-date {
        text-align: left;
        border: 0;
        background: transparent;
        color: #78350f;
        font-weight: 700;
        padding: 2px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .briefing-card .cbq-date:hover { color: #111827; }
      .briefing-card .cbq-missing {
        color: #92400e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .briefing-card .cbq-fill {
        border: 1px solid #f59e0b;
        background: #fff7ed;
        color: #9a3412;
        font-weight: 700;
        padding: 4px 10px;
      }
      .briefing-card .cbq-fill:hover { background: #fed7aa; }
      .briefing-card .cbq-more {
        margin-top: 6px;
        color: #a16207;
        font-size: var(--font-size-xs);
      }
      /* Today Cost Composition strip — small chips between hero-sub and
         sparkline. Top-2 cost drivers clickable (drilldown handler);
         remaining lump shown as plain text since no single drilldown target. */
      .briefing-card .boss-body .today-breakdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
      .briefing-card .boss-body .td-chip { font-size: var(--font-size-sm); padding: 3px 9px; border-radius: 12px; cursor: pointer; font-family: var(--font); background: var(--color-bg-soft); border: 1px solid var(--color-border-light); color: var(--color-text-secondary); -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
      .briefing-card .boss-body .td-chip:hover { background: var(--color-card); border-color: var(--color-border); }
      .briefing-card .boss-body .td-chip b { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
      .briefing-card .boss-body .td-rest { color: var(--color-text-muted); font-size: var(--font-size-sm); }
      .briefing-card .boss-body .td-rest b { font-variant-numeric: tabular-nums; }
      /* Period Selector — preset chip group in card header (Temporal Anchor).
         Same shape as .view-seg for visual cohesion: pill container, button
         hover, .on for active. Wraps on narrow viewports. */
      .briefing-card .period-seg {
        display: inline-flex; background: var(--color-bg-soft);
        border-radius: 8px; padding: 2px; gap: 1px;
        flex-wrap: wrap;
      }
      .briefing-card .period-seg button {
        font-size: var(--font-size-sm); padding: 4px 10px;
        border: none; background: transparent;
        color: var(--color-text-secondary);
        border-radius: 6px; font-weight: 600; cursor: pointer;
        font-family: inherit; min-height: 36px;
        transition: background var(--duration), color var(--duration);
        white-space: nowrap;
      }
      .briefing-card .period-seg button:hover { color: var(--color-text); }
      .briefing-card .period-seg button.on {
        background: var(--color-card); color: var(--color-text);
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      }
      .briefing-card .period-seg button.period-nav {
        font-size: var(--font-size-lg); padding: 4px 8px;
        color: var(--color-text-muted); font-weight: 600;
        min-width: 28px;
      }
      @media (max-width: 640px) {
        .briefing-card .cbq-row {
          grid-template-columns: 1fr auto;
        }
        .briefing-card .cbq-missing {
          grid-column: 1 / -1;
        }
        .briefing-card .pst-head,
        .briefing-card .pst-group > summary {
          align-items: flex-start;
          flex-direction: column;
        }
        .briefing-card .pst-item {
          grid-template-columns: minmax(0, 1fr) auto;
        }
        .briefing-card .pst-rev,
        .briefing-card .pst-id {
          display: none;
        }
      }
      .briefing-card .period-seg button.period-nav:disabled {
        opacity: 0.35; cursor: not-allowed;
      }
      .briefing-card .period-seg .period-anchor {
        font-size: var(--font-size-xs); padding: 0 8px;
        color: var(--color-text-muted); font-variant-numeric: tabular-nums;
        display: inline-flex; align-items: center; cursor: help;
      }
      /* Native date picker — match seg button visual rhythm so it doesn't
         stick out. Strip default chrome borders/bg; keep system calendar
         icon. min-height 36 matches sibling buttons for touch. */
      .briefing-card .period-seg .period-date {
        font-family: inherit; font-size: var(--font-size-sm);
        background: transparent; border: 0; padding: 4px 6px;
        color: var(--color-text-secondary); min-height: 36px;
        border-radius: 6px; cursor: pointer;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .period-seg .period-date:hover {
        background: var(--color-card); color: var(--color-text);
      }
      .briefing-card .period-seg .period-date:focus-visible {
        outline: 2px solid var(--color-primary); outline-offset: -1px;
      }
      .briefing-card .boss-body .spark-row { padding: 14px 4px 10px; margin-top: 14px; border-top: 1px solid var(--color-border-light); }
      .briefing-card .boss-body .spark-lbl { font-size: var(--font-size-md); color: var(--color-text-muted); margin-bottom: 6px; }
      /* Sparkline layered render (Iter 54): SVG paints paths only with
         vector-effect:non-scaling-stroke so the line stays 1.8px regardless
         of container width. Dots + labels are HTML overlays positioned by
         left/top % of the wrap, so they keep their natural aspect (circles
         don't flatten, text doesn't horizontally stretch). */
      .briefing-card .boss-body .spark { position: relative; }
      /* Iter 88 — height 72→148 / 64→148. Pairs with sparkline.js SPARK_BOX
         growth for ~3× pixel precision. r4: SVG height now matches wrap
         exactly (both 148) so dot Y% (positioned against wrap) aligns with
         line Y (drawn inside SVG viewBox). Earlier 148/140 mismatch caused
         dot drift up to 6px at plot bottom (image #28). Callout labels
         rely on overflow: visible (default) to extend slightly above/below
         the SVG plot zone (PAD_T=14 / PAD_B=24 inside SVG provides room). */
      .briefing-card .boss-body .spark-wrap { position: relative; width: 100%; height: 148px; overflow: visible; }
      .briefing-card .boss-body .spark-svg { width: 100%; height: 148px; display: block; }
      /* Stock-Chart Crosshair — vertical dashed rule that follows the cursor
         on hover, snapping to nearest dot. Tooltip popup carries the day's
         full metadata. Mirrors the venues dashboard chart pattern so the
         gesture is consistent across the app. pointer-events: none keeps
         the overlay transparent to clicks so dot drill-through still works. */
      .briefing-card .boss-body .spark-crosshair {
        position: absolute;
        top: 0; height: 148px;
        width: 0;
        border-left: 1px dashed #475569;
        pointer-events: none;
        display: none;
        z-index: 2;
      }
      .briefing-card .boss-body .spark-tooltip {
        position: absolute;
        background: rgba(15, 23, 42, 0.92);
        color: #fff;
        padding: 6px 9px;
        border-radius: 4px;
        font-size: 0.82em;
        line-height: 1.4;
        pointer-events: none;
        display: none;
        white-space: nowrap;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        max-width: 380px;
      }
      .briefing-card .boss-body .spark-tooltip::after {
        content: '';
        position: absolute;
        bottom: -4px; left: 50%;
        transform: translateX(-50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba(15, 23, 42, 0.92);
      }
      /* Iter 90 r21 — Viewport-anchored flip variant. When `.below` is
         added by JS (scroll past sparkline top), tooltip re-anchors to
         the bottom edge of sparkWrap so it stays visible. Arrow flips
         to point up. translateY override cancels the default -100%. */
      .briefing-card .boss-body .spark-tooltip.below {
        /* top set by JS; class only flips ::after arrow direction */
      }
      .briefing-card .boss-body .spark-tooltip.below::after {
        top: -4px; bottom: auto;
        border-top: 0;
        border-bottom: 4px solid rgba(15, 23, 42, 0.92);
      }
      .briefing-card .boss-body .spark-dot {
        position: absolute; width: 8px; height: 8px; border-radius: 50%;
        background: var(--color-primary);
        transform: translate(-50%, -50%);
        cursor: pointer;
        /* Button reset — dot rendered as <button> for keyboard a11y but
           visually still a dot. Remove default chrome. */
        border: 0; padding: 0;
        transition: width 0.12s, height 0.12s, box-shadow 0.12s;
      }
      .briefing-card .boss-body .spark-dot:hover {
        width: 12px; height: 12px;
        box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
      }
      .briefing-card .boss-body .spark-dot:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.4);
      }
      .briefing-card .boss-body .spark-dot-neg:hover {
        box-shadow: 0 0 0 4px rgba(220,38,38,0.18);
      }
      .briefing-card .boss-body .spark-dot-neg:focus-visible {
        box-shadow: 0 0 0 3px rgba(220,38,38,0.45);
      }
      .briefing-card .boss-body .spark-dot-neg { background: var(--color-danger-strong); }
      /* Iter 90 r15 — Pinned dot: persistent ring indicating click-locked
         cursor. Distinct from hover (.spark-dot:hover) to signal "this is
         the locked position; click outside to release". */
      .briefing-card .boss-body .spark-dot.is-pinned {
        width: 14px; height: 14px;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.85), 0 0 0 5px rgba(255,255,255,0.85);
      }
      .briefing-card .boss-body .spark-dot-pulse {
        position: absolute; width: 8px; height: 8px; border-radius: 50%;
        background: var(--color-primary);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: spark-pulse 2s ease-out infinite;
        will-change: transform, opacity;
      }
      .briefing-card .boss-body .spark-dot-pulse-neg { background: var(--color-danger-strong); }
      /* Iter 90 r22 — Ripple-Continuity. Old keyframes started at
         opacity 0.45 and ended at 0; the implicit reset on loop snapped
         opacity 0 → 0.45 instantly, perceived as a flash, not a stable
         ripple. Fix: opacity 0 at BOTH endpoints with a peak in the
         fade-in window. Scale replaces width/height for GPU compositing
         + smoother growth; translate(-50%, -50%) must stay in the
         transform string or the dot decenters as scale grows. */
      @keyframes spark-pulse {
        0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0; }
        20%  { transform: translate(-50%, -50%) scale(1.25); opacity: 0.55; }
        100% { transform: translate(-50%, -50%) scale(2.75); opacity: 0; }
      }
      .briefing-card .boss-body .spark-peak-lbl {
        position: absolute; transform: translate(-50%, -130%);
        font-size: var(--font-size-xs); font-variant-numeric: tabular-nums;
        color: var(--color-accent-peak); font-weight: 600;
        white-space: nowrap; pointer-events: none;
        /* Iter 88 round-2 — halo against path overlap (image #24). White
           text-shadow + pill background combine for legibility regardless
           of where the line passes underneath the callout. */
        background: rgba(255, 255, 255, 0.82);
        padding: 0 4px; border-radius: 3px;
        text-shadow: 0 0 2px #fff, 0 0 3px #fff;
        z-index: 4;
      }
      /* Iter 88 round-3 — Trough callout BELOW dot (image #27). Geometry-aware
         asymmetry: at peak, line lives BELOW the dot so label above is clear.
         At trough, line lives ABOVE the dot so label below is clear. Mirror
         translate magnitude (+30% vs peak's -130%) for symmetric offset from
         dot center. Plot Y_BOT=116 / wrap=148 leaves ~32px below plot for
         label without clipping. */
      .briefing-card .boss-body .spark-trough-lbl {
        position: absolute; transform: translate(-50%, 30%);
        font-size: var(--font-size-xs); font-variant-numeric: tabular-nums;
        color: var(--color-danger-strong); font-weight: 600;
        white-space: nowrap; pointer-events: none;
        background: rgba(255, 255, 255, 0.82);
        padding: 0 4px; border-radius: 3px;
        text-shadow: 0 0 2px #fff, 0 0 3px #fff;
        z-index: 4;
      }
      /* Edge-flip variant for left-edge trough. Below-dot label collides
         with spark-start-lbl (5/1) at idx 0/1. Flip to above-dot (peakLabel
         symmetric) — halo + z-index keep callout readable over passing line. */
      .briefing-card .boss-body .spark-trough-lbl--above {
        transform: translate(-50%, -130%);
      }
      /* Break-even baseline label. Right-aligned at zeroY (matches dashed
         zeroLine in SVG). Subtle gray, white-halo backdrop so it floats
         above area fill / zone bands. One chart-level annotation
         (Chart-Scope Reference Frame); no per-row repetition. */
      .briefing-card .boss-body .spark-zero-lbl {
        position: absolute; right: 4px;
        transform: translateY(-50%);
        font-size: var(--font-size-xs);
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
        white-space: nowrap; pointer-events: none;
        background: rgba(255, 255, 255, 0.85);
        padding: 0 4px; border-radius: 3px;
        z-index: 3;
      }
      .briefing-card .boss-body .spark-start-lbl {
        position: absolute; bottom: 0;
        font-size: var(--font-size-xs); color: var(--color-text-muted);
        font-variant-numeric: tabular-nums; pointer-events: none;
      }
      .briefing-card .boss-body .spark-end-lbl {
        position: absolute; bottom: 0;
        font-size: var(--font-size-sm); color: var(--color-primary);
        font-weight: 700; font-variant-numeric: tabular-nums;
        pointer-events: none;
      }
      .briefing-card .boss-body .spark-end-lbl-neg { color: var(--color-danger-strong); }
      .briefing-card .boss-body .month-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px 4px; margin-top: 10px; border-top: 1px solid var(--color-border-light); font-size: var(--font-size-lg); gap: 8px; flex-wrap: wrap; }
      .briefing-card .boss-body .m-lbl { color: var(--color-text-secondary); font-weight: 500; }
      .briefing-card .boss-body .m-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
      .briefing-card .boss-body .m-rate { font-size: var(--font-size-md); color: var(--color-text-muted); }
      /* Per-Cart-Day ROI strip — sits beneath month-row, above forecast.
         Visual weight one step softer than month-row (smaller font, no bold
         label). The number IS the operational signal, not the rate; cart-day
         is the business atom. */
      .briefing-card .boss-body .per-cd-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 4px 0; font-size: var(--font-size-md); flex-wrap: wrap; }
      .briefing-card .boss-body .pcd-lbl { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
      .briefing-card .boss-body .pcd-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
      .briefing-card .boss-body .pcd-basis { font-size: var(--font-size-xs); color: var(--color-text-faint); }
      /* Boss View Forecast Annotation — italic + leading caret to flag
         projection-not-realization. Color one step softer than month-row
         so realized number stays primary signal; forecast is companion. */
      .briefing-card .boss-body .forecast-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 4px; font-size: var(--font-size-md); flex-wrap: wrap; font-style: italic; cursor: help; }
      .briefing-card .boss-body .forecast-row::before { content: '▸'; color: var(--color-text-faint); font-style: normal; margin-right: -4px; }
      .briefing-card .boss-body .fc-lbl { color: var(--color-text-muted); font-weight: 500; }
      .briefing-card .boss-body .fc-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; font-style: normal; }
      .briefing-card .boss-body .fc-rate { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: normal; }
      .briefing-card .boss-body .fc-basis { font-size: var(--font-size-xs); color: var(--color-text-faint); font-style: normal; margin-left: auto; }
      /* Forecast Confidence Band — band % chip sized between fc-num and
         fc-rate. Color shifts with confidence strength: tight (≤15%) =
         neutral, medium (15-30%) = soft warn, loose (>30%) = warn. Boss
         reads "±13%" as confident, "±45%" as month-just-started rough. */
      .briefing-card .boss-body .fc-band { font-size: var(--font-size-xs); font-weight: 600; padding: 1px 6px; border-radius: 3px; background: var(--color-bg-soft); color: var(--color-text-muted); font-style: normal; }
      .briefing-card .fin-table tr.forecast-row-fin .fc-band-fin { font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; background: var(--color-bg-soft); color: var(--color-text-muted); margin-left: 4px; font-style: normal; }
      /* Hero Anomaly Surfacing — chip ribbon. Border colour signals
         direction (up = warn red, down = success green); the label is
         category + Δ% so boss reads what + magnitude in one glance.
         Click drills down to the corresponding finance row (uses the
         same data-action="drilldown" handler as composition bars). */
      .briefing-card .boss-body .anomaly-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 4px; }
      .briefing-card .boss-body .anomaly-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; }
      .briefing-card .boss-body .anomaly-chip { font-size: var(--font-size-sm); padding: 4px 10px; border-radius: 14px; cursor: pointer; font-family: var(--font); font-weight: 600; background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); -webkit-tap-highlight-color: transparent; transition: transform 0.1s; }
      .briefing-card .boss-body .anomaly-chip:hover { transform: translateY(-1px); }
      .briefing-card .boss-body .anomaly-chip.a-up { border-color: var(--color-danger-strong); color: var(--color-danger-strong); background: var(--color-warn-bg); }
      .briefing-card .boss-body .anomaly-chip.a-down { border-color: var(--color-success); color: var(--color-success); background: var(--color-chip-auto-bg); }
      /* Weather Variance ribbon (Iter 49 — variance attribution from
         domain/weather DemandFactor). w-loss: rain expense reading;
         w-resid: scheduling residual (boss-controllable); w-factor: avg
         demand multiplier display. Same flex-wrap rhythm as anomaly-row
         for visual consistency. */
      .briefing-card .boss-body .weather-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 4px; }
      .briefing-card .boss-body .weather-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; }
      .briefing-card .boss-body .weather-chip { font-size: var(--font-size-sm); padding: 3px 9px; border-radius: 12px; font-weight: 600; background: var(--color-bg-soft); border: 1px solid var(--color-border); color: var(--color-text); }
      .briefing-card .boss-body .weather-chip.w-loss { border-color: var(--color-info, var(--color-text-muted)); color: var(--color-text-secondary); background: var(--color-bg); }
      .briefing-card .boss-body .weather-chip.w-resid.w-neg { border-color: var(--color-danger-strong); color: var(--color-danger-strong); }
      .briefing-card .boss-body .weather-chip.w-resid.w-pos { border-color: var(--color-success); color: var(--color-success); }
      .briefing-card .boss-body .weather-chip.w-factor.dim { background: transparent; border-style: dashed; color: var(--color-text-muted); }
      /* Permission Risk ribbon (Iter 50 — domain/permission expiry-tier).
         Tiered color: past → red; urgent → orange; warn → yellow; revoked
         → strikethrough. Click → opens venue permission management modal. */
      .briefing-card .boss-body .permission-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 4px; }
      .briefing-card .boss-body .permission-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; }
      .briefing-card .boss-body .permission-chip { font-size: var(--font-size-sm); padding: 4px 10px; border-radius: 14px; cursor: pointer; font-weight: 600; background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font); }
      .briefing-card .boss-body .permission-chip.p-past { border-color: var(--color-danger-strong); color: var(--color-danger-strong); background: var(--color-danger-light); }
      .briefing-card .boss-body .permission-chip.p-urgent { border-color: var(--color-warn-strong); color: var(--color-warn-strong); background: var(--color-warn-bg); }
      .briefing-card .boss-body .permission-chip.p-warn { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-chip-auto-bg); }
      .briefing-card .boss-body .permission-chip.p-revoked { border-color: var(--color-text-muted); color: var(--color-text-muted); text-decoration: line-through; background: var(--color-bg-soft); }
      .briefing-card .boss-body .permission-more { font-size: var(--font-size-sm); color: var(--color-text-muted); }
      /* Time-Slot Rollup ribbon (Iter 51 — domain/time-slot category
         aggregation). Tonal chip per category; click → future filter
         drill. Same row layout as anomaly / weather / permission. */
      .briefing-card .boss-body .timeslot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 4px; }
      .briefing-card .boss-body .timeslot-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 500; }
      .briefing-card .boss-body .timeslot-chip { font-size: var(--font-size-sm); padding: 4px 10px; border-radius: 14px; cursor: pointer; font-weight: 600; background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font); }
      .briefing-card .boss-body .timeslot-chip.ts-lunch  { background: var(--color-chip-auto-bg); border-color: var(--color-accent); color: var(--color-accent); }
      .briefing-card .boss-body .timeslot-chip.ts-dinner { background: var(--color-warn-bg);     border-color: var(--color-warn-strong); color: var(--color-warn-strong); }
      .briefing-card .boss-body .timeslot-chip.ts-late_night { background: var(--color-bg-soft); border-color: var(--color-text-muted); color: var(--color-text-secondary); }
      .briefing-card .boss-body .timeslot-chip.ts-all_day { background: var(--color-success-bg, var(--color-bg)); border-color: var(--color-success); color: var(--color-success); }
      /* Configuration Coverage — missing-cat chips. Dashed border signals
         "incomplete state" (matches the disclosure UX on missing inputs
         elsewhere in the app). One-tap → opens modal forced to monthly
         mode + focuses the budget input. */
      /* .missing-row / .missing-label / .missing-chip / .missing-cta
         retired in Iter 86 — per-row .wf-unset-cta button replaces the
         bottom-of-card ribbon. */
      /* Sparse Bookkeeping ribbon — solid yellow border (vs. missing's
         dashed red) signals 'configured but under-bookkept'. Different
         severity, different action: missing is a setup gap, sparse is
         a routine-discipline gap. */
      .briefing-card .boss-body .sparse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 4px; }
      .briefing-card .boss-body .sparse-label { font-size: var(--font-size-sm); color: var(--color-warn); font-weight: 600; }
      .briefing-card .boss-body .sparse-chip { font-size: var(--font-size-sm); padding: 4px 10px; border-radius: 14px; cursor: pointer; font-family: var(--font); font-weight: 600; background: var(--color-warn-bg); border: 1px solid var(--color-warn); color: var(--color-warn); -webkit-tap-highlight-color: transparent; transition: transform 0.1s; }
      .briefing-card .boss-body .sparse-chip:hover { transform: translateY(-1px); }
      .briefing-card .boss-body .sparse-cta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: auto; }
      .briefing-card .boss-body .boss-hint { margin-top: 10px; font-size: var(--font-size-sm); color: var(--color-warn-strong); line-height: 1.4; text-align: center; }
      /* Cost Composition Disclosure — top-3 cost categories. Tufte data-ink:
         the bar is the percentage; no separate gridlines or axes. ¥ amount +
         % share live in the same line as the bar to avoid eye-jump between
         a chart and a legend table. */
      .briefing-card .boss-body .cost-comp { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
      .briefing-card .boss-body .cost-comp-lbl { font-size: var(--font-size-md); color: var(--color-text-muted); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
      .briefing-card .boss-body .cost-comp-tot { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
      .briefing-card .boss-body .cost-comp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px; font-size: var(--font-size-md); border-radius: 6px; cursor: pointer; transition: background 0.15s; }
      .briefing-card .boss-body .cost-comp-row:hover,
      .briefing-card .boss-body .cost-comp-row:focus-visible { background: var(--color-bg-soft); outline: none; }
      .briefing-card .boss-body .cost-comp-row:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); }
      .briefing-card .boss-body .cost-comp-more { cursor: pointer; }
      .briefing-card .boss-body .cost-comp-more:hover { color: var(--color-text); }
      /* Flash highlight on drilldown target — pulsing background fades over
         1.5s. NN/g #1 Visibility of System Status: shows the user where the
         click landed when the row would otherwise be one of many. */
      @keyframes finRowFlash { 0% { background: var(--color-warn-bg); } 100% { background: transparent; } }
      .briefing-card .fin-table tr.flash td { animation: finRowFlash 1.5s ease-out; }
      .briefing-card .boss-body .cost-comp-bar-wrap { position: relative; flex: 1 1 auto; min-width: 0; height: 24px; background: var(--color-bg-soft); border-radius: 4px; overflow: hidden; display: flex; align-items: center; }
      .briefing-card .boss-body .cost-comp-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-chip-auto-bg); border-radius: 4px; }
      .briefing-card .boss-body .cost-comp-name { position: relative; z-index: 1; padding: 0 8px; color: var(--color-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .briefing-card .boss-body .cost-comp-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); white-space: nowrap; }
      .briefing-card .boss-body .cost-comp-pct { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-left: 6px; font-weight: 500; }
      /* Composition Share Drift — prev-month share suffix + arrow.
         Smaller font + faint color so it sits as companion data, not
         primary signal. Arrow color signals direction (red rising,
         green falling) since 'rising share' usually warrants attention
         while 'falling share' is benign or positive. */
      .briefing-card .boss-body .cc-prev { font-size: var(--font-size-2xs); color: var(--color-text-faint); margin-left: 6px; font-weight: 500; }
      .briefing-card .boss-body .cc-drift { margin-left: 2px; font-weight: 700; }
      .briefing-card .boss-body .cc-drift-up { color: var(--color-danger-strong); }
      .briefing-card .boss-body .cc-drift-down { color: var(--color-success); }
      .briefing-card .boss-body .cost-comp-more { margin-top: 6px; font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; }

      /* ── Finance body (Cross-Tab, data-ink dense) ── */
      .briefing-card table.fin-table { width: 100%; border-collapse: collapse; }
      .briefing-card .fin-table th { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 600; padding: 6px 0; text-align: right; border-bottom: 2px solid var(--color-border); }
      .briefing-card .fin-table th:first-child { text-align: left; }
      .briefing-card .fin-table td { font-size: var(--font-size-base); padding: 5px 0; color: var(--color-text); text-align: right; }
      .briefing-card .fin-table td:first-child { text-align: left; color: var(--color-text-muted); font-size: var(--font-size-md); }
      .briefing-card .fin-table td.cost-cell { white-space: nowrap; }
      .briefing-card .fin-table tr.subtotal td { font-weight: 700; color: var(--color-text); border-top: 1px solid var(--color-border-light); padding-top: 8px; }
      .briefing-card .fin-table tr.subregion td { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; padding: 14px 0 4px; border-top: 1px dashed var(--color-border-light); }
      .briefing-card .fin-table tr.profit-row td { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-text); border-top: 2px solid var(--color-border); padding-top: 10px; padding-bottom: 4px; }
      .briefing-card .fin-table tr.profit-rate-row td { font-size: var(--font-size-sm); color: var(--color-text-muted); padding-bottom: 6px; }
      .briefing-card .src { display: inline-block; font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px; margin-left: 4px; vertical-align: middle; }
      .briefing-card .src.auto { background: var(--color-chip-auto-bg); color: var(--color-primary-strong); }
      .briefing-card .src.calc { background: var(--color-warn-bg); color: var(--color-warn); }
      .briefing-card .daily-src { display: inline-block; font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; margin-right: 6px; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: middle; }
      .briefing-card .daily-src.default { background: var(--color-bg-soft); color: var(--color-text-secondary); }
      .briefing-card .daily-src.auto { background: var(--color-chip-auto-bg); color: var(--color-primary-strong); }
      .briefing-card .daily-src.empty { background: transparent; color: var(--color-text-faint); }
      .briefing-card .daily-src.no_event { background: var(--color-bg-soft); color: var(--color-text-muted); font-style: italic; }
      /* Operator Attribution chip — first-character circular avatar inline
         after the ¥amount. Hover/long-press surfaces full name + timestamp
         via title attribute. Sized to fit the row baseline without
         disrupting tabular alignment of ¥amounts in adjacent rows. */
      /* Day-Cell Anomaly Highlighting — visual signal at finance row level
         when today's cell value diverges from the running daily mean. Uses
         left-border accent (3px) over background tint so the row's
         tabular alignment isn't disturbed and the signal stays detectable
         on dense tables. Severity tone matches anomaly chip palette
         (over-budget = warn, under = success/may-need-attention). */
      .briefing-card .fin-table td.cost-cell.anom-high { border-left: 3px solid var(--color-danger-strong); padding-left: 5px; }
      .briefing-card .fin-table td.cost-cell.anom-low { border-left: 3px solid var(--color-success); padding-left: 5px; }
      .briefing-card .fin-table .fuel-month-diag { display: block; font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: 2px; font-weight: 400; }
      .briefing-card .attr-chip {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; border-radius: 50%;
        background: var(--color-chip-auto-bg); color: var(--color-primary-strong);
        font-size: var(--font-size-2xs); font-weight: 700;
        margin-left: 6px; vertical-align: middle;
        cursor: help; user-select: none;
        line-height: 1;
      }
      .briefing-card .daily-src.manual { background: var(--color-chip-manual-bg); color: var(--color-chip-manual-text); }
      .briefing-card .empty-cell { color: var(--color-text-faint); font-weight: 600; }
      /* Finance view forecast row — visual rhythm matches profit-row but
         softer color (italic, secondary text) so the realized number above
         stays primary. fc-basis-fin reads as a sub-label, fc-rate-fin
         floats inline next to ¥amount. */
      .briefing-card .fin-table tr.forecast-row-fin td { font-size: var(--font-size-md); color: var(--color-text-secondary); padding-top: 4px; padding-bottom: 6px; font-style: italic; }
      .briefing-card .fin-table tr.forecast-row-fin td:first-child { color: var(--color-text-muted); }
      .briefing-card .fin-table tr.forecast-row-fin .fc-basis-fin { font-size: var(--font-size-2xs); color: var(--color-text-faint); margin-left: 4px; font-style: normal; }
      .briefing-card .fin-table tr.forecast-row-fin .fc-rate-fin { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-left: 4px; font-style: normal; }
      .briefing-card .admin-hint { margin-top: 8px; font-size: var(--font-size-xs); color: var(--color-success); line-height: 1.4; }
      /* Approximate number — displayed when has_empty=true. Color step
         softer than var(--color-text); ≈ prefix carries the semantic. */
      .briefing-card .approx-num { color: var(--color-text-secondary); font-weight: 600; }
      .briefing-card .empty-star { font-size: var(--font-size-2xs); color: var(--color-warn-strong); font-weight: 700; margin-left: 2px; cursor: help; }

      /* ── View visibility toggle (CSS-driven, no re-render) ── */
      .briefing-card[data-view="boss"] .finance-body { display: none; }
      .briefing-card[data-view="finance"] .boss-body { display: none; }
      .briefing-card[data-view="boss"] .edit-btn { display: none; }

      .cost-modal { background: var(--color-card); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); width: 100%; max-width: min(640px, 95vw); max-height: 90vh; overflow-y: auto; }
      .cost-modal .hd { padding: 14px 18px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; background: var(--color-card); z-index: 3; }
      .cost-modal .hd .ttl { font-size: var(--font-size-lg); font-weight: 700; flex: 0 0 auto; }
      .cost-modal .hd .x { background: none; border: 1px solid var(--color-border); min-width: 44px; min-height: 44px; border-radius: 6px; cursor: pointer; font-size: var(--font-size-xl); line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
      /* Mode segment toggle — daily | monthly. Pattern mirrors briefing card
         boss/finance segment. CSS-driven visibility, no re-render. */
      .cost-modal .mode-seg { display: inline-flex; background: var(--color-bg-soft); border-radius: 8px; padding: 2px; flex: 1 1 auto; max-width: 280px; }
      .cost-modal .mode-seg button { flex: 1 1 0; font-size: var(--font-size-md); padding: 6px 12px; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; border-radius: 6px; font-weight: 600; min-height: 36px; }
      .cost-modal .mode-seg button.on { background: var(--color-card); color: var(--color-text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
      /* Dirty dot — visual cue that a non-visible mode has unsaved changes.
         Prevents silent-save surprise when admin edits in one mode + saves
         from another. */
      .cost-modal .mode-seg button.has-dirty::after { content: ' •'; color: var(--color-accent); font-weight: 700; }
      /* Mode visibility — hide opposite-mode column entirely. Visible col
         expands to fill the remaining table width via colgroup overrides. */
      .cost-modal[data-mode="daily"]   th.col-monthly,
      .cost-modal[data-mode="daily"]   td.param,
      .cost-modal[data-mode="daily"]   .copy-prev-btn,
      .cost-modal[data-mode="monthly"] th.col-daily,
      .cost-modal[data-mode="monthly"] td.override,
      .cost-modal[data-mode="monthly"] .date-pick { display: none; }
      /* Manual-form rows (路费) carry no monthly parameter — they're pure
         daily-event entry. In monthly mode the row would be a dead "—" cell.
         Hide entirely; admin doesn't need to scroll past empty rows. */
      .cost-modal[data-mode="monthly"] tr[data-form="manual"] { display: none; }
      /* Pure-monthly buckets (固定/其他 — operational fixed investments,
         no per-day semantic) hide in daily mode. Without this they showed
         a ¥— override input that boss read as "today's amount", confusing
         them with toll/fuel daily-event cats. material/labor stay visible
         in daily because they carry per-day BOM detail (lines-grid). */
      .cost-modal[data-mode="daily"] tr[data-cat="fixed"],
      .cost-modal[data-mode="daily"] tr[data-cat="other"] { display: none; }
      .cost-modal[data-mode="daily"]   colgroup col:nth-child(1) { width: 32%; }
      .cost-modal[data-mode="daily"]   colgroup col:nth-child(2) { width: 0; }
      .cost-modal[data-mode="daily"]   colgroup col:nth-child(3) { width: 68%; }
      .cost-modal[data-mode="monthly"] colgroup col:nth-child(1) { width: 32%; }
      .cost-modal[data-mode="monthly"] colgroup col:nth-child(2) { width: 68%; }
      .cost-modal[data-mode="monthly"] colgroup col:nth-child(3) { width: 0; }
      .cost-modal .body { padding: 14px 18px; }
      .cost-modal .meta-bar { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
      .cost-modal .meta-bar b { color: var(--color-text); font-weight: 700; }
      .cost-modal .meta-bar .date-pick { display: inline-flex; align-items: center; gap: 6px; }
      .cost-modal .meta-bar .date-pick input[type=date] { font: inherit; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); background: var(--color-card); min-height: 28px; }
      .cost-modal .meta-bar .date-pick input[type=date]:disabled { opacity: 0.6; cursor: not-allowed; }
      .cost-modal .meta-bar .copy-prev-btn { font: inherit; font-size: var(--font-size-sm); padding: 4px 10px; border: 1px solid var(--color-border); background: var(--color-card); border-radius: 6px; cursor: pointer; color: var(--color-text-secondary); min-height: 28px; margin-left: auto; }
      .cost-modal .meta-bar .copy-prev-btn:hover { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); }
      .cost-modal .ro-banner { font-size: var(--font-size-sm); color: var(--color-warn); background: var(--color-warn-bg); padding: 6px 10px; border-radius: 6px; margin-bottom: 10px; }
      /* First-time setup nudge — only matters in daily mode (monthly mode
         already shows the budget inputs). CSS hides it when monthly active. */
      .cost-modal .nudge-banner { font-size: var(--font-size-md); color: var(--color-primary-strong); background: var(--color-primary-light); padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .cost-modal .nudge-cta { font: inherit; font-weight: 600; padding: 4px 10px; border: 1px solid var(--color-accent); background: var(--color-card); color: var(--color-accent); border-radius: 6px; cursor: pointer; min-height: 28px; }
      .cost-modal .nudge-cta:hover { background: var(--color-accent); color: #fff; }
      .cost-modal[data-mode="monthly"] .nudge-banner { display: none; }
      .cost-modal table.cgrid { width: 100%; border-collapse: collapse; font-size: var(--font-size-md); table-layout: fixed; }
      .cost-modal table.cgrid colgroup col:nth-child(1) { width: 26%; }
      .cost-modal table.cgrid colgroup col:nth-child(2) { width: 28%; }
      .cost-modal table.cgrid colgroup col:nth-child(3) { width: 46%; }
      /* Sticky thead — when modal scrolls, column meanings stay visible. */
      .cost-modal .cgrid thead th { position: sticky; top: 0; background: var(--color-card); z-index: 2; }
      /* Param-stack: input on top, ÷N=¥X dim line beneath. Replaces the
         standalone 当日推算 column — same info, half the horizontal real estate. */
      .cost-modal .cgrid .param-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .cost-modal .cgrid .param-stack .day-calc { font-size: var(--font-size-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: 3px; padding-left: 2px; }
      .cost-modal .cgrid .param-stack .day-calc b { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
      .cost-modal .cgrid .param-stack .rate-unit { font-size: var(--font-size-xs); padding-left: 2px; }
      .cost-modal .cgrid th { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 8px; border-bottom: 2px solid var(--color-border); text-align: left; }
      .cost-modal .cgrid td { padding: 10px 8px; vertical-align: top; border-bottom: 1px solid var(--color-border-light); }
      /* Subregion break (Gestalt proximity grouping). 7 cat rows split into
         3 phases: monthly-budget, activity-driven, manual-event. Visual gap
         + cell bg tint signals "different cost mechanic" — particularly
         important for distinguishing 油费 (rate × qty pair) from 路费
         (single override input) which look superficially similar. */
      .cost-modal .cgrid tr[data-form="monthly"] + tr[data-form="activity"] td,
      .cost-modal .cgrid tr[data-form="activity"] + tr[data-form="manual"] td {
        padding-top: 16px; border-top: 1px solid var(--color-border);
      }
      /* Activity rows (餐盒/油费 — rate × qty pair) get subtle blue-gray tint.
         Manual rows (路费 — single override) stay neutral; the prior yellow
         tint #fefce8 read as "warning" without legend. Single-row category,
         tint adds confusion not signal — drop it. */
      .cost-modal .cgrid tr[data-form="activity"] td { background: var(--color-bg); }
      .cost-modal .cgrid td.label { color: var(--color-text); white-space: nowrap; }
      .cost-modal .cgrid input[type=number] { font: inherit; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; width: 100%; min-width: 0; box-sizing: border-box; }
      /* Spinner Affordance Overflow remediation (WCAG 2.2 target-size + Tufte
         data-ink). Native ↑↓ steppers are <10×6px (sub-AA), serve no data role,
         and visually crowd 8+ inputs in the modal. Hide; rely on keyboard +
         direct typing. Applied to every number input under .cost-modal. */
      .cost-modal input[type=number]::-webkit-outer-spin-button,
      .cost-modal input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
      }
      .cost-modal input[type=number] { -moz-appearance: textfield; appearance: textfield; }
      .cost-modal .cgrid input.qty-input { width: 100%; }
      .cost-modal .cgrid input:disabled { background: var(--color-bg); color: var(--color-text-muted); }
      /* Numfield: flex container glues ¥/×/input/unit on one line; input flex-shrinks
         instead of overflowing or wrapping. Replaces the calc(100% - 18px) hack
         that was unreliable when siblings (¥, /unit) had non-fixed widths. */
      .cost-modal .cgrid .numfield { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
      .cost-modal .cgrid .numfield > .ccy,
      .cost-modal .cgrid .numfield > .dim,
      .cost-modal .cgrid .numfield > .x-op,
      .cost-modal .cgrid .numfield > .src { flex: 0 0 auto; }
      .cost-modal .cgrid .numfield > input[type=number] { flex: 1 1 0; min-width: 0; width: auto; }
      .cost-modal .cgrid .calc-line { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
      .cost-modal .cgrid .calc-line b { font-variant-numeric: tabular-nums; }
      .cost-modal .cgrid .x-op { color: var(--color-text-muted); }
      .cost-modal .cgrid .ccy { font-size: var(--font-size-sm); color: var(--color-text-muted); }
      .cost-modal .cgrid .dim { color: var(--color-text-muted); font-size: var(--font-size-sm); }
      /* Effective Value hint — small dim line beneath the override input,
         showing what briefing card currently displays for this cell.
         Pattern parity with renderLinesCell's (按月) summary text. */
      .cost-modal .cgrid .effective-hint { font-size: var(--font-size-xs); margin-top: 3px; padding-left: 2px; line-height: 1.3; }
      /* Cost Variance Surface — realized vs planned. Color signals only at
         significance threshold (|delta| >= 5%) so within-noise variances
         render neutral. Tufte: ink earns its place via meaningful contrast,
         not chrome. */
      .cost-modal .cgrid .variance-line { font-size: var(--font-size-xs); display: flex; align-items: center; gap: 4px; padding-left: 2px; line-height: 1.3; margin-top: 2px; }
      .cost-modal .cgrid .variance-line b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
      .cost-modal .cgrid .variance-line .var-delta { font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; }
      .cost-modal .cgrid .variance-line.var-on-track .var-delta { background: var(--color-bg-soft); color: var(--color-text-muted); }
      .cost-modal .cgrid .variance-line.var-over .var-delta { background: var(--color-warn-bg); color: var(--color-danger-strong); }
      .cost-modal .cgrid .variance-line.var-under .var-delta { background: var(--color-chip-auto-bg); color: var(--color-success); }
      /* Run-Rate Forecast — linear projection to month-end. Italic +
         leading caret (▲▼) distinguishes 'projected' from 'realized' at a
         glance so admin doesn't conflate the two stacked lines. Same
         color logic as variance for consistent severity reading. */
      .cost-modal .cgrid .forecast-line { font-size: var(--font-size-xs); display: flex; align-items: center; gap: 4px; padding-left: 2px; line-height: 1.3; margin-top: 2px; font-style: italic; opacity: 0.92; }
      .cost-modal .cgrid .forecast-line::before { content: '▸ '; color: var(--color-text-muted); font-style: normal; margin-right: -2px; }
      .cost-modal .cgrid .forecast-line b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); font-style: normal; }
      .cost-modal .cgrid .forecast-line .var-delta { font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; font-style: normal; }
      .cost-modal .cgrid .forecast-line.var-on-track .var-delta { background: var(--color-bg-soft); color: var(--color-text-muted); }
      .cost-modal .cgrid .forecast-line.var-over .var-delta { background: var(--color-warn-bg); color: var(--color-danger-strong); }
      .cost-modal .cgrid .forecast-line.var-under .var-delta { background: var(--color-chip-auto-bg); color: var(--color-success); }
      .cost-modal .cgrid .forecast-line .fc-basis { font-size: var(--font-size-2xs); margin-left: auto; font-style: normal; }
      /* Period-over-Period baseline — same color logic as variance/forecast
         (over/on-track/under) but no leading caret since it's a comparison
         to historical fact, not a projection. Reads alongside the
         variance line as "vs budget" + "vs last month". */
      .cost-modal .cgrid .pop-line { font-size: var(--font-size-xs); display: flex; align-items: center; gap: 4px; padding-left: 2px; line-height: 1.3; margin-top: 2px; opacity: 0.92; }
      .cost-modal .cgrid .pop-line b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
      .cost-modal .cgrid .pop-line .var-delta { font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; }
      .cost-modal .cgrid .pop-line.var-on-track .var-delta { background: var(--color-bg-soft); color: var(--color-text-muted); }
      .cost-modal .cgrid .pop-line.var-over .var-delta { background: var(--color-warn-bg); color: var(--color-danger-strong); }
      .cost-modal .cgrid .pop-line.var-under .var-delta { background: var(--color-chip-auto-bg); color: var(--color-success); }
      /* Bookkeeping Coverage — recorded-days indicator. cov-full (≥80%)
         neutral; cov-partial (50-80%) soft warn; cov-sparse (<50%)
         danger — flags cats where forecast/variance signals are unreliable
         due to thin data. Distinct from variance/PoP color logic since
         this signals data-completeness, not value-correctness. */
      .cost-modal .cgrid .coverage-line { font-size: var(--font-size-xs); display: flex; align-items: center; gap: 4px; padding-left: 2px; line-height: 1.3; margin-top: 2px; cursor: help; }
      .cost-modal .cgrid .coverage-line b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }
      .cost-modal .cgrid .coverage-line .cov-pct { font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; }
      .cost-modal .cgrid .coverage-line.cov-full .cov-pct { background: var(--color-bg-soft); color: var(--color-text-muted); }
      .cost-modal .cgrid .coverage-line.cov-partial .cov-pct { background: var(--color-warn-bg); color: var(--color-warn); }
      .cost-modal .cgrid .coverage-line.cov-sparse .cov-pct { background: var(--color-warn-bg); color: var(--color-danger-strong); }
      /* Quick-Fill flash — same idea as finance row flash but inside the
         modal table. Helps admin see which row the chip landed them on. */
      @keyframes modalRowFlash { 0% { background: var(--color-warn-bg); } 100% { background: transparent; } }
      .cost-modal .cgrid tr.flash td { animation: modalRowFlash 1.5s ease-out; }
      /* Badge parity: CALC/AUTO/MANUAL forced to same min-width so the ¥ prefix
         in the next column lines up across rows. Right-margin prevents the
         badge edge from kissing the next cell's content (the "MANUAL—" glued
         look in the bug report). */
      .cost-modal .cgrid .src { display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-2xs); font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px; margin-left: 4px; margin-right: 2px; min-width: 36px; box-sizing: border-box; vertical-align: middle; }
      .cost-modal .cgrid .src.auto { background: var(--color-chip-auto-bg); color: var(--color-primary-strong); }
      .cost-modal .cgrid .src.calc { background: var(--color-warn-bg); color: var(--color-warn); }
      .cost-modal .cgrid td.label .lbl-line { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
      .cost-modal .cgrid td.label .lbl-line .lbl-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .cost-modal .cgrid td.label .audit-line { font-size: var(--font-size-2xs); color: var(--color-text-muted); margin-top: 2px; line-height: 1.2; display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
      .cost-modal .cgrid td.label .audit-line .audit-name { color: var(--color-text); font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .cost-modal .cgrid td.label .audit-line .audit-ts { flex: 0 0 auto; white-space: nowrap; }
      /* Sticky footer — primary action (保存) always reachable even when
         body scrolls past modal's max-height (90vh). Modal itself is the
         scroll container, so position:sticky with bottom:0 anchors here. */
      .cost-modal .ft { padding: 12px 18px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; position: sticky; bottom: 0; background: var(--color-card); z-index: 2; }
      .cost-modal .ft .meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
      .cost-modal .ft .actions { display: flex; gap: 8px; }
      .cost-modal .ft .btn { font-size: var(--font-size-md); padding: 6px 14px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-card); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
      .cost-modal .ft .btn.save { background: var(--color-bg-soft); color: var(--color-text-muted); border-color: var(--color-border); transition: background 0.15s, color 0.15s, border-color 0.15s; }
      .cost-modal .ft .btn.save.primed { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
      .cost-modal .ft .btn.save:disabled { opacity: 0.5; cursor: not-allowed; }

      /* ── Lines-grid (BOM line items inside override TD) ── */
      .cost-modal td.override-lines { padding: 4px 4px; }
      /* Progressive disclosure: collapsed by default. Summary chip shows total
         (or "点击展开" hint) + ingredient names. Click expands the grid. */
      .cost-modal .lines-disclosure { width: 100%; }
      .cost-modal .lines-disclosure > summary {
        list-style: none; cursor: pointer; padding: 6px 8px;
        border: 1px dashed var(--color-border); border-radius: 6px;
        display: flex; align-items: center; gap: 6px; min-height: 32px;
        font-size: var(--font-size-sm); transition: background 0.12s, border-color 0.12s;
      }
      .cost-modal .lines-disclosure > summary::-webkit-details-marker { display: none; }
      .cost-modal .lines-disclosure > summary:hover { background: var(--color-bg); border-color: var(--color-primary); }
      .cost-modal .lines-disclosure[open] > summary { border-style: solid; background: var(--color-bg); }
      .cost-modal .lines-disclosure .lines-total { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); flex: 0 0 auto; }
      .cost-modal .lines-disclosure .lines-total .dim { font-weight: 500; color: var(--color-text-muted); }
      .cost-modal .lines-disclosure .lines-hint { color: var(--color-text-muted); font-size: var(--font-size-xs); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
      /* Open state: rows + grid-foot already show the data. Hide summary text
         entirely so the disclosure shrinks to just a caret handle. Avoids the
         "未填 ▴" contradiction (saying "empty" while showing live rows). */
      .cost-modal .lines-disclosure[open] .lines-hint,
      .cost-modal .lines-disclosure[open] .lines-total { display: none; }
      .cost-modal .lines-disclosure[open] > summary { padding: 4px 8px; min-height: 24px; justify-content: flex-end; }
      .cost-modal .lines-disclosure .lines-caret { color: var(--color-text-muted); transition: transform 0.18s; flex: 0 0 auto; }
      .cost-modal .lines-disclosure[open] .lines-caret { transform: rotate(180deg); }
      .cost-modal .lines-disclosure .lines-grid { margin-top: 6px; }
      .cost-modal .lines-grid { display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; }
      .cost-modal .cost-source-note {
        font-size: var(--font-size-xs);
        color: var(--color-success);
        background: var(--color-success-bg);
        border: 1px solid rgba(4, 120, 87, 0.18);
        border-radius: 6px;
        padding: 5px 7px;
        line-height: 1.35;
      }
      .cost-modal .material-alloc {
        border: 1px solid var(--color-border-light);
        border-radius: 6px;
        background: #fff;
        padding: 0;
      }
      .cost-modal .material-alloc > summary {
        cursor: pointer;
        list-style: none;
        padding: 6px 8px;
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--color-primary-strong);
        user-select: none;
      }
      .cost-modal .material-alloc > summary::-webkit-details-marker { display: none; }
      .cost-modal .material-alloc[open] > summary { border-bottom: 1px solid var(--color-border-light); background: var(--color-primary-light); }
      .cost-modal .alloc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        padding: 8px;
      }
      .cost-modal .alloc-grid label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-size: var(--font-size-2xs);
        color: var(--color-text-muted);
        font-weight: 600;
      }
      .cost-modal .alloc-grid input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        padding: 4px 5px;
        font: inherit;
        color: var(--color-text);
      }
      .cost-modal .alloc-money {
        display: flex;
        align-items: center;
        gap: 3px;
        color: var(--color-text-muted);
      }
      .cost-modal .alloc-method {
        margin: 0 8px 6px;
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        font-weight: 600;
      }
      .cost-modal .alloc-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0 8px 8px;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        line-height: 1.35;
      }
      .cost-modal .alloc-preview span {
        border: 1px solid var(--color-border-light);
        background: var(--color-bg);
        border-radius: 4px;
        padding: 2px 5px;
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
      }
      /* Grid track min must be ≥ readable digit width — minmax(0, 1fr) lets
         tracks collapse below intrinsic content (input min-width on ELEMENT
         doesn't propagate to grid TRACK), causing the "vertical pill" look
         where 3-digit qty/rate inputs render at ~25px wide. Floor each
         numeric track at its min-readable width: qty 48px (3 digits + pad),
         rate 64px (4 digits + pad). Track may exceed 1fr share when needed. */
      .cost-modal .ln-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(48px, 1fr) 28px auto minmax(64px, 1fr) auto auto 28px; gap: 3px; align-items: center; font-size: var(--font-size-sm); }
      /* Labor variant adds 3 cells before "= amount": × | mult-input | 人 */
      .cost-modal .ln-row[data-show-mult="1"] { grid-template-columns: minmax(0, 1.3fr) minmax(40px, 0.8fr) 24px auto minmax(56px, 0.9fr) auto 38px auto auto auto 28px; }
      .cost-modal .ln-row input { font: inherit; padding: 4px 4px; border: 1px solid var(--color-border); border-radius: 4px; min-width: 0; box-sizing: border-box; width: 100%; font-variant-numeric: tabular-nums; }
      .cost-modal .ln-row input:disabled { background: var(--color-bg); color: var(--color-text-muted); }
      /* Empty Input Affordance — :placeholder-shown matches when value is
         empty + placeholder visible. Subtle bg tint signals "待填" without
         the noisy 4-cells-of-dashed-borders look that crowded ln-rows. */
      .cost-modal .ln-row input:placeholder-shown:not([readonly]):not(:disabled) {
        background: var(--color-bg);
      }
      /* Tame focus ring — webkit default outline:auto renders ~3px blue glow,
         visually overpowering at small input size. Use explicit thin solid. */
      .cost-modal .ln-row input:focus,
      .cost-modal .cgrid input:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: -1px;
      }
      /* Min-widths — prevent flex collapse below readable threshold (4-digit
         yen / 2-digit qty must remain visible even on narrow viewports). */
      .cost-modal .ln-row .ln-rate { min-width: 64px; }
      .cost-modal .ln-row .ln-qty  { min-width: 48px; }
      .cost-modal .ln-row .ln-unit { min-width: 40px; }
      /* Unit input is editable per row (kg / 式 / h vary by item) but visually
         it's metadata, not data. Suppress border + bg when not focused so it
         reads as a suffix tag, not a numeric input. Restore on focus to
         affordance "you can edit this". */
      .cost-modal .ln-row .ln-unit { border-color: transparent; background: transparent; color: var(--color-text-muted); text-align: center; font-size: var(--font-size-xs); }
      .cost-modal .ln-row .ln-unit:focus { border-color: var(--color-border); background: var(--color-card); color: var(--color-text); }
      .cost-modal .ln-row .ln-x, .cost-modal .ln-row .ln-eq { color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: center; }
      .cost-modal .ln-row .ln-mult { text-align: center; }
      .cost-modal .ln-row .ln-mult-suffix { color: var(--color-text-muted); font-size: var(--font-size-xs); }
      /* Amt is computed (read-only). Unit (transparent suffix) is metadata.
         Both render dim by default — distinguish via weight + color so amt
         reads as "the answer", unit as "label". */
      .cost-modal .ln-row .ln-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 2px; color: var(--color-text); }
      /* Del button: 28px ≥ WCAG 2.2 AA target-size (24px). */
      .cost-modal .ln-row .ln-del { background: none; border: 1px solid var(--color-border); border-radius: 4px; width: 28px; height: 28px; padding: 0; cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
      .cost-modal .ln-row .ln-del:hover { color: var(--color-danger-strong); border-color: var(--color-danger-strong); }
      .cost-modal .ln-row .ln-del:disabled { opacity: 0.4; cursor: not-allowed; }
      .cost-modal .ln-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px dashed var(--color-border-light); margin-top: 2px; gap: 6px; flex-wrap: nowrap; }
      /* min-width 80px ensures consistent hit target as items 加 → row count
         changes. Without it, button hugs text and shifts horizontally. */
      .cost-modal .ln-add { background: none; border: 1px dashed var(--color-border); border-radius: 4px; padding: 4px 10px; min-width: 80px; min-height: 28px; font-size: var(--font-size-sm); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
      .cost-modal .ln-total { white-space: nowrap; flex: 0 0 auto; }
      .cost-modal .ln-add:hover { color: var(--color-primary); border-color: var(--color-primary); }
      .cost-modal .ln-add:disabled { opacity: 0.4; cursor: not-allowed; }
      .cost-modal .ln-total { font-size: var(--font-size-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

      /* ── Mobile (≤480px): 4-col grid was truncating 5-6 digit yen values
         (¥385,000 rendered as "38500"). Root cause: width:100% input + sibling
         spans (¥, /unit) competing in the same inline flow. Fix: numfield flex
         layout (added above) makes input flex-shrink deterministically.
         This block only re-balances widths and shrinks fonts. ── */
      @media (max-width: 480px) {
        .cost-modal { max-width: 100vw; max-height: 100vh; border-radius: 0; }
        .cost-modal .body { padding: 10px 8px; }
        .cost-modal .hd { padding: 12px 12px; }
        .cost-modal .hd .ttl { font-size: var(--font-size-base); }
        .cost-modal .ft { padding: 10px 12px; flex-wrap: wrap; row-gap: 8px; }
        .cost-modal .ft .meta { font-size: var(--font-size-xs); flex: 1 1 100%; order: 2; }
        .cost-modal .ft .actions { order: 1; margin-left: auto; }
        .cost-modal table.cgrid { font-size: var(--font-size-sm); }
        .cost-modal[data-mode="daily"]   colgroup col:nth-child(1) { width: 36%; }
        .cost-modal[data-mode="daily"]   colgroup col:nth-child(3) { width: 64%; }
        .cost-modal[data-mode="monthly"] colgroup col:nth-child(1) { width: 36%; }
        .cost-modal[data-mode="monthly"] colgroup col:nth-child(2) { width: 64%; }
        .cost-modal .cgrid .param-stack .day-calc { font-size: var(--font-size-2xs); }
        /* Mobile mode-seg: stack below title (hd flex-wrap). */
        .cost-modal .hd { flex-wrap: wrap; }
        .cost-modal .mode-seg { max-width: none; flex: 1 1 100%; order: 3; }
        .cost-modal .cgrid th { padding: 5px 4px; font-size: var(--font-size-2xs); letter-spacing: 0.2px; }
        .cost-modal .cgrid td { padding: 8px 4px; }
        .cost-modal .cgrid tr[data-form="monthly"] + tr[data-form="activity"] td,
        .cost-modal .cgrid tr[data-form="activity"] + tr[data-form="manual"] td { padding-top: 12px; }
        .cost-modal .cgrid input[type=number] {
          padding: 4px 3px;
          font-size: var(--font-size-md);
          font-variant-numeric: tabular-nums;
        }
        .cost-modal .cgrid .numfield { gap: 2px; }
        .cost-modal .cgrid .calc-line { gap: 2px; font-size: var(--font-size-xs); }
        .cost-modal .cgrid .ccy { font-size: var(--font-size-xs); }
        .cost-modal .cgrid .dim { font-size: var(--font-size-xs); }
        .cost-modal .cgrid .x-op { font-size: var(--font-size-sm); }
        .cost-modal .cgrid .src { font-size: 8px; padding: 0 3px; margin-left: 2px; margin-right: 1px; min-width: 28px; }
        .cost-modal .cgrid td.label { white-space: normal; }
        /* lbl-line on mobile: allow chip to drop below label when narrow.
           "MANUAL" chip ~44px wide vs col1=36% × 360px - padding ≈ 114px;
           "固定成本" 4-char text + chip + gap squeezes lbl-text into ellipsis
           (固定... / 路...). flex-wrap drops chip to row 2 only when needed.
           lbl-text white-space:normal allows wrap inside its flex item too. */
        .cost-modal .cgrid td.label .lbl-line { gap: 3px; flex-wrap: wrap; row-gap: 2px; }
        .cost-modal .cgrid td.label .lbl-text { white-space: normal; }
        .cost-modal .cgrid td.label .audit-line { margin-top: 2px; font-size: 8px; gap: 2px; }
        .cost-modal .cgrid td.label .audit-line .audit-name { max-width: 60px; }

        /* Mobile lines-grid: 2-row stacked per line. Row 1 = name + del.
           Row 2 = qty | unit | rate | (mult) | amt.
           × operators dropped on mobile — column position implies the formula
           (Tufte: don't repeat in symbols what spatial layout already says).
           Avoids the "××¥×1人" cluster bug at <100px row width. */
        .cost-modal td.override-lines { padding: 4px 2px; }
        .cost-modal .ln-row .ln-x,
        .cost-modal .ln-row .ln-x-mult,
        .cost-modal .ln-row .ln-eq { display: none; }
        .cost-modal .ln-row {
          /* Floor qty/rate at 3-digit / 4-digit readable widths so they
             don't collapse to single-char "pill" inputs on narrow phones.
             Track may push amt right; ln-row scrolls horizontally as fallback. */
          grid-template-columns: minmax(48px, 1fr) auto minmax(56px, 1.1fr) auto 28px;
          grid-template-areas:
            "name name name name del"
            "qty  unit rate amt .";
          gap: 3px 5px;
          font-size: var(--font-size-xs);
          padding: 4px 3px;
          border: 1px solid var(--color-border-light);
          border-radius: 4px;
        }
        .cost-modal .ln-row .ln-name { grid-area: name; font-weight: 600; }
        .cost-modal .ln-row .ln-del  { grid-area: del; }
        .cost-modal .ln-row .ln-qty  { grid-area: qty; }
        /* min-width not width — multi-char unit (e.g. "袋装", "件") expands. */
        .cost-modal .ln-row .ln-unit { grid-area: unit; min-width: 36px; width: auto; text-align: center; }
        .cost-modal .ln-row .ln-rate { grid-area: rate; }
        .cost-modal .ln-row .ln-amt  { grid-area: amt; text-align: right; padding-left: 4px; }
        .cost-modal .ln-row input { padding: 4px 4px; font-size: var(--font-size-sm); }
        .cost-modal .ln-add { font-size: var(--font-size-2xs); padding: 2px 6px; }
        .cost-modal .ln-total { font-size: var(--font-size-xs); }
        .cost-modal .alloc-grid { grid-template-columns: 1fr; }

        /* Labor variant on mobile: row2 = qty | unit-h | rate | mult | 人 | amt */
        .cost-modal .ln-row[data-show-mult="1"] {
          grid-template-columns: minmax(44px, 1fr) auto minmax(56px, 1fr) 32px auto auto 28px;
          grid-template-areas:
            "name name name name name name del"
            "qty  unit rate mult mults amt .";
          gap: 3px 4px;
        }
        .cost-modal .ln-row[data-show-mult="1"] .ln-mult { grid-area: mult; }
        .cost-modal .ln-row[data-show-mult="1"] .ln-mult-suffix { grid-area: mults; font-size: var(--font-size-2xs); color: var(--color-text-muted); align-self: center; }
      }

      /* ── Waterfall (P&L Bridge) — Notion Subtle palette ── */
      /*
         Forged 2026-05-12 (Iter 53). Replaces .cost-comp Pareto bars with
         full P&L推演: revenue → operating deductions → contribution → costs
         → net profit. Each row paints a delta bar at its running-balance
         position so reader sees both magnitude AND accumulation order.
         Color choices: Notion-inspired desaturated palette (greens / reds /
         blues at ~60% saturation) for long-form readability — full-saturation
         RGB on financial data tires the eye over reporting sessions.
       */
      .briefing-card .boss-body .waterfall {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-light);
      }
      .briefing-card .boss-body .wf-head {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 8px;
        font-size: var(--font-size-md);
        color: var(--color-text-secondary);
        flex-wrap: wrap;
        gap: 6px;
      }
      .briefing-card .boss-body .wf-title { font-weight: 600; color: var(--color-text); }
      .briefing-card .boss-body .wf-meta  { color: var(--color-text-muted); font-weight: 400; }
      .briefing-card .boss-body .wf-rate  { color: var(--color-text-secondary); font-weight: 400; }
      .briefing-card .boss-body .wf-rate b { color: var(--color-text); font-weight: 700; }
      /* Iter 90 r21 — Pre-attentive Color Legend. Tooltip-only explanation
         of the prior/week/today opacity ladder is hover-bound, leaving
         mobile users without a discovery path. Always-on legend integrated
         into wf-head (flex-basis: 100% forces own-line wrap) gives
         desktop + mobile a single, glanceable mapping. Chips render the
         exact same rgba ladder used on wf-bar-pos.wf-seg-{prior,week,day}
         so eye matches chip → bar segment instantly. */
      .briefing-card .boss-body .wf-legend {
        flex-basis: 100%;
        display: flex; flex-wrap: wrap; gap: 4px 12px;
        font-size: 0.82em;
        color: var(--color-text-muted);
        font-weight: 400;
        margin-top: 2px;
      }
      .briefing-card .boss-body .wf-leg-item {
        display: inline-flex; align-items: center; gap: 5px;
      }
      .briefing-card .boss-body .wf-leg-chip {
        display: inline-block;
        width: 11px; height: 11px;
        border-radius: 2px;
        flex-shrink: 0;
      }
      .briefing-card .boss-body .wf-leg-chip.wf-leg-prior { background: rgba(74, 140, 74, 0.30); }
      .briefing-card .boss-body .wf-leg-chip.wf-leg-week  { background: rgba(74, 140, 74, 0.60); }
      .briefing-card .boss-body .wf-leg-chip.wf-leg-today { background: rgba(74, 140, 74, 1.00); }
      /* Default-State Minimization — sim opt-in trigger lives in the
         waterfall head. Click reveals slider + drawer; second click closes
         and clears any active sim so the next open starts clean. */
      .briefing-card .boss-body .wf-head-actions {
        display: flex; gap: 6px; align-items: center;
      }
      .briefing-card .boss-body .wf-sim-open {
        padding: 3px 10px;
        border: 1px solid #ddd;
        background: #fff;
        color: var(--color-text-secondary);
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85em;
      }
      .briefing-card .boss-body .wf-sim-open:hover { background: #fff5e6; border-color: #c97e3a; }
      .briefing-card .boss-body .wf-sim-open.on {
        background: #c97e3a; border-color: #c97e3a; color: #fff;
        font-weight: 600;
      }
      /* Sim Badge — visible only when sparkline crosshair is actively
         scrubbing a past day, indicating the displayed waterfall is a
         hover-driven simulation snapshot rather than the live anchor. */
      /* Plain-Language Variance Narrative — single-line ribbon below hero.
         Auto-shows only when profit delta exceeds signal floor (¥1000).
         Up vs Down state color codes the headline; per-factor chips colored
         by direction-to-profit (good = green, bad = red, regardless of
         whether the underlying variable went up or down). */
      .briefing-card .boss-body .variance-ribbon {
        margin: 6px 4px 8px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 0.88em;
        display: flex; gap: 10px; flex-wrap: wrap;
        align-items: center;
      }
      .briefing-card .boss-body .variance-ribbon.var-up {
        background: rgba(74, 140, 74, 0.08);
        border-left: 3px solid #4a8c4a;
      }
      .briefing-card .boss-body .variance-ribbon.var-down {
        background: rgba(196, 72, 72, 0.08);
        border-left: 3px solid #c44848;
      }
      .briefing-card .boss-body .var-head {
        display: inline-flex; gap: 4px; align-items: baseline;
        font-weight: 500; color: var(--color-text);
      }
      .briefing-card .boss-body .var-head b {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
      }
      .briefing-card .boss-body .var-up .var-head b { color: #4a8c4a; }
      .briefing-card .boss-body .var-down .var-head b { color: #c44848; }
      .briefing-card .boss-body .var-causes {
        color: var(--color-text-secondary);
        font-size: 0.92em;
      }
      .briefing-card .boss-body .vf {
        display: inline-block;
        padding: 1px 6px;
        border-radius: 3px;
        font-variant-numeric: tabular-nums;
        font-size: 0.95em;
      }
      .briefing-card .boss-body .vf-good {
        background: rgba(74, 140, 74, 0.12);
        color: #2e6b2e;
      }
      .briefing-card .boss-body .vf-bad {
        background: rgba(196, 72, 72, 0.12);
        color: #a83838;
      }
      /* Annotation Pins — boss-authored notes per date. Visual:
         • dot with note: small ring marker via pseudo-element
         • crosshair tooltip: note line at top, separated rule
         • variance ribbon: note chip inline before causes
         Right-click dot → prompt opens; empty input clears the note. */
      .briefing-card .boss-body .spark-dot[data-has-note="1"]::after {
        content: '';
        position: absolute;
        top: -4px; right: -4px;
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #ffd180;
        box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35);
        pointer-events: none;
      }
      .briefing-card .boss-body .spark-tip-note {
        font-size: 0.95em;
        font-weight: 600;
        padding-bottom: 4px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffd180;
      }
      /* Goal Compass — monthly net profit target + progress + pacing.
         Boss-set via right-click on hero number. Boss-pristine: no strip
         until a goal exists. Three signals stacked:
           • progress bar fills 0→100% of target
           • gap chip (still need / surpassed)
           • pacing chip (ahead / behind based on elapsed cart-days share) */
      .briefing-card .boss-body .goal-strip {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        gap: 10px; align-items: center;
        margin: 6px 4px 8px;
        padding: 6px 10px;
        background: #fafaf8;
        border: 1px solid #eee;
        border-radius: 6px;
        font-size: 0.88em;
      }
      .briefing-card .boss-body .goal-target {
        color: var(--color-text-secondary);
      }
      .briefing-card .boss-body .goal-target b {
        color: var(--color-text);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .boss-body .goal-progress {
        height: 8px;
        background: #eee;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
      }
      .briefing-card .boss-body .goal-fill {
        height: 100%;
        background: linear-gradient(90deg, #c97e3a, #d8a058);
        transition: width 0.4s ease;
      }
      .briefing-card .boss-body .goal-fill.gap-ahead {
        background: linear-gradient(90deg, #4a8c4a, #6aaf6a);
      }
      .briefing-card .boss-body .goal-gap {
        padding: 1px 8px;
        border-radius: 3px;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: 0.92em;
      }
      .briefing-card .boss-body .goal-gap.gap-behind {
        background: rgba(201, 126, 58, 0.14);
        color: #8a4f00;
      }
      .briefing-card .boss-body .goal-gap.gap-ahead {
        background: rgba(74, 140, 74, 0.14);
        color: #2e6b2e;
      }
      .briefing-card .boss-body .goal-pace {
        font-size: 0.85em;
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .boss-body .goal-pace.pace-ahead {
        color: #4a8c4a;
      }
      .briefing-card .boss-body .goal-pace.pace-behind {
        color: #c44848;
      }
      .briefing-card .boss-body .hero-num {
        cursor: context-menu;
      }
      .briefing-card .boss-body {
        position: relative;
      }
      /* Live Sale Pulse — floating "+¥X" rises over hero on revenue
         increment between renders. SWR-driven Square sync brings a new
         sale; without this animation the change is silent. */
      .briefing-card .boss-body .hero-pulse {
        position: absolute;
        top: 12px; left: 50%;
        transform: translateX(-50%);
        color: #4a8c4a;
        font-weight: 700;
        font-size: 1.3em;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
        animation: pulseRise 2.4s ease-out forwards;
        z-index: 5;
        white-space: nowrap;
      }
      @keyframes pulseRise {
        0%   { opacity: 0; transform: translate(-50%, 0); }
        15%  { opacity: 1; transform: translate(-50%, -12px); }
        100% { opacity: 0; transform: translate(-50%, -54px); }
      }
      .briefing-card .boss-body .hero {
        position: relative;
      }
      /* Pattern-Based Auto-Insight — system-surfaced "你周X最赚" ribbon.
         Self-suggests scheduling moves boss might otherwise miss. */
      .briefing-card .boss-body .insight-ribbon {
        display: flex; align-items: center; gap: 8px;
        margin: 4px 4px 8px;
        padding: 6px 10px;
        background: rgba(91, 125, 214, 0.06);
        border: 1px solid rgba(91, 125, 214, 0.25);
        border-radius: 6px;
        font-size: 0.88em;
      }
      .briefing-card .boss-body .ins-body {
        flex: 1;
        color: var(--color-text);
      }
      .briefing-card .boss-body .ins-best { color: #2e6b2e; font-weight: 600; }
      .briefing-card .boss-body .ins-worst { color: #c44848; font-weight: 600; }
      .briefing-card .boss-body .ins-gap {
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .boss-body .ins-dismiss {
        background: none; border: none;
        color: var(--color-text-muted);
        font-size: 1.1em; line-height: 1;
        cursor: pointer; padding: 0 4px;
      }
      .briefing-card .boss-body .ins-dismiss:hover { color: var(--color-text); }
      .briefing-card .boss-body .insight-ribbon.clickable {
        cursor: pointer;
        transition: transform 0.1s, box-shadow 0.15s;
      }
      .briefing-card .boss-body .insight-ribbon.clickable:hover {
        transform: translateX(2px);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      }
      .briefing-card .boss-body .ins-cta {
        font-size: 0.88em;
        color: #4f6fc2;
        font-weight: 600;
        white-space: nowrap;
      }
      .briefing-card .boss-body .insight-ribbon.ins-streak-up {
        background: rgba(74, 140, 74, 0.08);
        border-color: rgba(74, 140, 74, 0.3);
      }
      .briefing-card .boss-body .insight-ribbon.ins-streak-down {
        background: rgba(196, 72, 72, 0.08);
        border-color: rgba(196, 72, 72, 0.3);
      }
      .briefing-card .boss-body .ins-range,
      .briefing-card .boss-body .ins-total {
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
      }
      .briefing-card .boss-body .var-note {
        display: inline-block;
        padding: 1px 8px;
        background: #fff5e6;
        color: #8a4f00;
        border-radius: 3px;
        font-size: 0.9em;
        font-weight: 600;
        max-width: 280px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        vertical-align: 0.05em;
      }
      .briefing-card .boss-body .wf-sim-badge {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        background: #fff5e6;
        color: #c97e3a;
        border: 1px solid #c97e3a;
        border-radius: 3px;
        font-size: 0.8em;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        vertical-align: 0.05em;
      }

      .briefing-card .boss-body .wf-row {
        display: grid; grid-template-columns: 80px 1fr 170px;
        gap: 10px; align-items: center;
        padding: 5px 4px;
        font-size: var(--font-size-base);
        border-radius: 6px;
      }
      .briefing-card .boss-body .wf-val-cell {
        display: flex; flex-direction: column; align-items: flex-end;
        gap: 2px;
      }
      /* In-Bar Annotation (Iter 55) — segment labels embedded directly
         inside .wf-seg blocks. Replaces .wf-temporal side strip entirely.
         Label color uses currentColor with text-shadow so it reads on
         both faded (prior 0.30) and bright (today 1.00) segment opacities.
         Suppressed for segments narrower than 8% bar width (handled in
         _renderBarSegments). */
      .briefing-card .boss-body .wf-seg {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        overflow: visible;
        white-space: nowrap;
      }
      /* Bar-area is overflow:hidden (wf-bar-area rule) so labels still
         cannot escape the row's horizontal track — they just overflow
         within it across narrow neighbouring segments. */
      .briefing-card .boss-body .wf-seg-label {
        font-size: 0.78em;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #fff;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.65), 0 1px 1px rgba(0, 0, 0, 0.45);
        letter-spacing: 0.01em;
        line-height: 1;
      }
      /* Iter 85 — in-seg tag glyph (今/周/月) renders before the value
         at slightly lower weight; boss reads "今 ¥29.2k" rather than
         relying on seg position to know which time level. */
      .briefing-card .boss-body .wf-seg-tag {
        font-weight: 600;
        opacity: 0.85;
        margin-right: 3px;
      }
      /* Iter 85 — outside-pill tag glyph: same pattern, sits before
         the value inside the colored pill. */
      .briefing-card .boss-body .wf-out-tag {
        font-weight: 500;
        opacity: 0.75;
        margin-right: 2px;
      }
      /* Accumulator in-bar overlay (Iter 59) — today/week values
         embedded inside subtotal/final/loss solid bars. Sits left-aligned
         inside the bar (val-cell already shows month total on the right). */
      .briefing-card .boss-body .wf-acc-overlay {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0 6px;
        height: 100%;
        font-size: 0.75em;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #fff;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.65), 0 1px 1px rgba(0, 0, 0, 0.45);
        white-space: nowrap;
      }
      .briefing-card .boss-body .wf-acc-tag {
        opacity: 0.85;
        margin-right: 1px;
        font-weight: 500;
        font-size: 0.9em;
      }
      /* Iter 81 — full triplet 今 · 周 · 月. Freshness ladder
         mirrors seg alpha (today 1.0 / week 0.7 / month 0.5) so the
         eye reads "bright = today" cross-row. */
      .briefing-card .boss-body .wf-acc-today { opacity: 1; }
      .briefing-card .boss-body .wf-acc-week  { opacity: 0.75; }
      .briefing-card .boss-body .wf-acc-month { opacity: 0.55; }
      .briefing-card .boss-body .wf-acc-sep   { opacity: 0.55; margin: 0 2px; }
      @media (max-width: 480px) {
        .briefing-card .boss-body .wf-acc-overlay { font-size: 0.65em; padding: 0 4px; gap: 2px; }
      }
      @media (max-width: 480px) {
        .briefing-card .boss-body .wf-bar-area { height: 22px; }
        .briefing-card .boss-body .wf-seg { padding: 0 2px; }
        .briefing-card .boss-body .wf-seg-label { font-size: 0.68em; letter-spacing: 0; }
      }
      /* No per-segment label opacity boost needed — segment alpha lives
         in background rgba (above), so child labels stay at opacity 1. */
      /* Iter 62 — outside-bar labels for narrow cost rows. Anchored at
         the colored bar's left edge via inline style right:X%; extends
         leftward into the gray bar-area track. flex-direction:row-reverse
         so today (warm) sits closest to bar, prior (muted) furthest. */
      .briefing-card .boss-body .wf-outside-labels {
        position: absolute;
        top: 0; bottom: 0;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 6px;
        padding-right: 4px;
        font-size: 0.72em;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
      }
      .briefing-card .boss-body .wf-out {
        padding: 1px 4px;
        border-radius: 3px;
      }
      .briefing-card .boss-body .wf-out-day   { color: #b45309; background: rgba(217, 119, 6, 0.10); font-weight: 700; }
      .briefing-card .boss-body .wf-out-week  { color: #4f6fc2; background: rgba(91, 125, 214, 0.10); }
      .briefing-card .boss-body .wf-out-prior { color: var(--color-text-muted); background: rgba(100, 100, 100, 0.06); opacity: 0.75; }
      @media (max-width: 480px) {
        .briefing-card .boss-body .wf-outside-labels { font-size: 0.62em; gap: 3px; padding-right: 2px; }
        .briefing-card .boss-body .wf-out { padding: 1px 3px; }
      }
      /* Iter 51 — chip colour rule unified across rows. Previously the
         day chip (.wf-t-d) flipped between red and green by row kind
         (pos/neg/subtotal/final), which created a Conway's-Law-style
         cognitive load: boss had to remember per-row that "日 红 =
         成本日, 日 绿 = 营收日". After Iter 50 introduced a column
         header, the per-row colour information is redundant — column
         position alone says "this is the day chip".
         New rule: chip colour is determined by COLUMN ONLY (day=amber,
         week=blue, month=grey). Row polarity is carried by the bar
         direction + the main value text (already coloured), not by
         duplicating sign into every chip background. Tufte data-ink
         ratio improves: 3 stable colours × 9 rows = 3 hues to read,
         not 6.
         The hue ladder also encodes "freshness": amber (warm, recent)
         → blue (cool, week) → grey (neutral, reference). Matches the
         segment opacity ladder for cross-glyph coherence. */
      /* .wf-t-* chip palette + chip-base / chip-unknown variants retired
         in Iter 55 — in-bar annotation absorbs temporal info into segment
         labels, no separate chip strip remains. */
      /* wf-bar-seg-* retired — overlay slices removed with the granularity
         toggle. Bar = month baseline only. */
.briefing-card .boss-body .wf-row:hover { background: var(--color-bg-soft); }
      .briefing-card .boss-body .wf-row-subtotal {
        background: #f7f6f3; /* notion warm gray */
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
        margin: 4px 0;
        padding: 8px 4px;
      }
      .briefing-card .boss-body .wf-row-final {
        background: #fdf3e7; /* notion warm beige */
        border: 1px solid #f4d8a8;
        margin-top: 6px;
        padding: 8px 8px;
      }

      .briefing-card .boss-body .wf-name { color: var(--color-text); font-weight: 500; white-space: nowrap; }
      .briefing-card .boss-body .wf-row-subtotal .wf-name,
      .briefing-card .boss-body .wf-row-final .wf-name { font-weight: 700; }

      /* Operator gutter — fixed-width −/＝ column so every subtraction sign
         stacks into one vertical operator rail (一摞减号 = 连减). 营收 is the
         base anchor (empty sign, no rail mark). Sign color-coded: − red
         (cost), ＝ tier-colored (result), so the eye reads 营收 − … = 利润
         as arithmetic, not a flat list. */
      .briefing-card .boss-body .wf-sign {
        display: inline-block;
        width: 1.3em;
        margin-right: 3px;
        text-align: center;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
      }
      .briefing-card .boss-body .wf-row-neg .wf-sign,
      .briefing-card .boss-body .wf-row-unset .wf-sign,
      .briefing-card .boss-body .wf-row-loss .wf-sign { color: #c44848; }
      .briefing-card .boss-body .wf-row-subtotal .wf-sign { color: #4f6fc2; }
      .briefing-card .boss-body .wf-row-final .wf-sign { color: #c97e3a; }

      .briefing-card .boss-body .wf-bar-area {
        position: relative; height: 26px;
        background: #f1f1ef;
        border-radius: 3px;
        /* Iter 90 — overflow visible so .wf-day-highlight box can extend
           top/bottom past bar edge + host its above-bar value tip chip.
           Original overflow:hidden was for Iter 79 in-seg labels (removed
           in Iter 88), no longer needed. Segs by construction stay within
           [0, 100%] width so no horizontal escape. */
        overflow: visible;
      }
      .briefing-card .boss-body .wf-row-subtotal .wf-bar-area { background: #fff; }
      .briefing-card .boss-body .wf-row-final    .wf-bar-area { background: #fff; }
      /* Iter 90 — Sparkline Cursor ↔ Waterfall Slice Highlight (Pattern P6
         outline-only). When sparkline cursor scrubs to day D, each row's
         bar gets a meta-overlay box at that day's chronological slice
         position within the bar (row-local magnitude proportional). Outline
         + box-shadow keeps bar's underlying prior/week/today opacity ladder
         visible (layered information). */
      .briefing-card .boss-body .wf-day-highlight {
        position: absolute;
        top: -3px; bottom: -3px;
        /* min-width: absolute pixels so ultra-small day slices stay
           visible without distorting the % geometry. Lie factor is now
           bounded by a screen-pixel floor (data-independent) rather
           than a data-relative % floor that scaled with bar width. */
        min-width: 4px;
        pointer-events: none;
        z-index: 4;
        border: 2px solid #2a3550;
        background: transparent;
        border-radius: 3px;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.85),
          0 0 6px rgba(42, 53, 80, 0.45);
        transition: left 0.18s cubic-bezier(.22,.61,.36,1),
                    width 0.18s cubic-bezier(.22,.61,.36,1);
      }
      .briefing-card .boss-body .wf-day-highlight.is-loss-amplify {
        border: 2.5px solid #a83a3a;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.85),
          0 0 10px rgba(168, 58, 58, 0.6);
      }
      .briefing-card .boss-body .wf-day-tip {
        position: absolute;
        top: -22px; left: 50%;
        transform: translateX(-50%);
        background: #2a3550; color: #fff;
        padding: 1px 6px; border-radius: 3px;
        font-size: 10.5px; font-weight: 700;
        white-space: nowrap; pointer-events: none;
        font-variant-numeric: tabular-nums; line-height: 1.4;
        box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      }
      .briefing-card .boss-body .wf-day-tip::after {
        content: ''; position: absolute;
        bottom: -3px; left: 50%; transform: translateX(-50%);
        border: 3px solid transparent; border-top-color: #2a3550;
      }
      .briefing-card .boss-body .wf-day-highlight.is-loss-amplify .wf-day-tip { background: #a83a3a; }
      .briefing-card .boss-body .wf-day-highlight.is-loss-amplify .wf-day-tip::after { border-top-color: #a83a3a; }

      .briefing-card .boss-body .wf-bar {
        position: absolute; top: 2px; bottom: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        /* Scale-Invariant Glyph minimum — 油费 ¥-135 / 营收 ¥216,650 = 0.06%
           computes to sub-pixel width on mobile (bar-area ≈ 200px → 0.12px,
           invisible). Tufte ideal: proportional accuracy. Reality: silent
           data loss when a cost row goes unread. 3px floor preserves
           "presence" signal without overstating magnitude. Value text below
           carries the true magnitude. */
        min-width: 3px;
        /* No overflow: hidden here — would clip seg labels overflowing
           into adjacent seg territory. bar-area parent handles row-edge
           clipping. */
      }
      /* Subtotal/final/loss bars span full row height and use 100% width —
         min-width applies but is never active. Loss bars set width via
         barWidth=100 already. */
      .briefing-card .boss-body .wf-bar-pos       { background: #4a8c4a; opacity: 0.85; }
      .briefing-card .boss-body .wf-bar-neg       { background: #c44848; opacity: 0.78; }
      /* Temporal Nested Segments — fade ladder (prior / week / today)
         expressed via rgba alpha NOT opacity, so embedded labels
         (Iter 55 wf-seg-label) stay readable. Opacity property cascades
         multiplicatively to children, clamping label opacity to the
         segment's alpha. Switching to rgba background lets the label
         render at full opacity over a faded fill. */
      .briefing-card .boss-body .wf-bar-pos.wf-seg-prior { background: rgba(74, 140, 74, 0.30); opacity: 1; }
      .briefing-card .boss-body .wf-bar-pos.wf-seg-week  { background: rgba(74, 140, 74, 0.60); opacity: 1; }
      /* Iter 90 r7 — REVERT amber: restored same-hue opacity ladder so
         containment visual (prior ⊆ week ⊆ MTD via increasing intensity)
         reads correctly. r4 amber broke containment ladder (3 disjoint
         categorical colors); boss prefers the gradient encoding. */
      .briefing-card .boss-body .wf-bar-pos.wf-seg-day   { background: rgba(74, 140, 74, 1.00); opacity: 1; }
      .briefing-card .boss-body .wf-bar-neg.wf-seg-prior { background: rgba(196, 72, 72, 0.30); opacity: 1; }
      .briefing-card .boss-body .wf-bar-neg.wf-seg-week  { background: rgba(196, 72, 72, 0.60); opacity: 1; }
      .briefing-card .boss-body .wf-bar-neg.wf-seg-day   { background: rgba(196, 72, 72, 1.00); opacity: 1; }
      /* Chip↔segment :has() co-attention retired in Iter 55 — chips no
         longer exist as separate glyphs; the segment IS the answer. */
      /* Iter 59 — switch from opacity to rgba bg so the accumulator
         overlay text inside doesn't inherit a multiplicative fade
         (same fix pattern as wf-seg-prior/week/day in Iter 55). */
      .briefing-card .boss-body .wf-bar-subtotal  { background: rgba(91, 125, 214, 0.65); opacity: 1; top: 0; bottom: 0; height: 100%; overflow: hidden; }
      .briefing-card .boss-body .wf-bar-final     { background: rgba(201, 126, 58, 0.78); opacity: 1; top: 0; bottom: 0; height: 100%; overflow: hidden; }
      .briefing-card .boss-body .wf-bar-loss      { overflow: hidden; }
      /* wf-bar-unset retired — empty state renders as bar-less row with
         "未配置" text in value column; no decorative placeholder. */
      /* wf-bar-forecast retired — hatched forecast tail on progress bars
         violates "no auxiliary line on bar" rule. Month-end projection
         can resurface as a separate chip or row note, not as bar paint. */
      /* Today Increment Slice — bright block overlaying the right edge of
         the solid bar to mark today's daily share. Brighter saturation +
         left/top/bottom outline so the eye reads it as "the freshest slice
         of today's contribution" rather than a separate cost. Sits on top
         of wf-bar-neg via z-index. */
      /* wf-bar-today retired — duplicates segments.day slice (Scale-Invariant
         Glyph: one decoration per concept, granularity-stable). */
      /* Sensitivity Slider — Scenario Sim row. Hosts the range input +
         live label + reset. Sits between the title and the bars so the
         slider's effect on the rows below is spatially obvious. */
      .briefing-card .boss-body .wf-sim-row {
        display: flex; align-items: center; gap: 8px;
        padding: 6px 8px; margin-bottom: 4px;
        background: #fafafa; border-radius: 4px;
        font-size: 0.85em;
      }
      .briefing-card .boss-body .wf-sim-lbl {
        color: var(--color-text-secondary); font-weight: 500;
      }
      .briefing-card .boss-body .wf-sim-slider {
        flex: 1; max-width: 240px;
        accent-color: #c97e3a;
      }
      .briefing-card .boss-body .wf-sim-val {
        color: var(--color-text-secondary);
        font-variant-numeric: tabular-nums;
        min-width: 80px;
      }
      .briefing-card .boss-body .wf-sim-val.sim-on {
        color: #c97e3a; font-weight: 700;
      }
      .briefing-card .boss-body .wf-sim-reset {
        font-size: 0.85em; padding: 2px 8px;
        border: 1px solid #c97e3a; background: #fff;
        color: #c97e3a; border-radius: 3px;
        cursor: pointer;
      }
      .briefing-card .boss-body .wf-sim-reset:hover {
        background: #fff5e6;
      }
      .briefing-card .boss-body .wf-sim-toggle {
        background: none; border: 1px solid var(--color-border, #ddd);
        color: var(--color-text-secondary); border-radius: 3px;
        width: 22px; height: 22px; padding: 0;
        font-size: 0.9em; cursor: pointer;
        transition: transform 0.15s;
      }
      .briefing-card .boss-body .wf-sim-toggle:hover { background: #f5f5f5; }
      .briefing-card .boss-body .wf-sim-toggle.on {
        transform: rotate(180deg);
        background: #fff5e6;
        border-color: #c97e3a;
        color: #c97e3a;
      }
      /* Per-Cat Drawer — disaggregated sensitivity panel. One row per
         amortizable cat with its own slider. Overrides show in accent
         color; matches global takes over otherwise. */
      .briefing-card .boss-body .wf-sim-drawer {
        background: #fafaf8;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 6px 8px;
        margin-bottom: 6px;
        font-size: 0.85em;
      }
      .briefing-card .boss-body .wf-sim-cat-row {
        display: grid;
        grid-template-columns: 70px 1fr 50px 24px;
        align-items: center; gap: 8px;
        padding: 3px 0;
      }
      .briefing-card .boss-body .wf-sim-cat-name {
        color: var(--color-text); font-weight: 500;
      }
      .briefing-card .boss-body .wf-sim-cat-slider {
        accent-color: #5b7dd6;
      }
      .briefing-card .boss-body .wf-sim-cat-val {
        text-align: right;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-secondary);
      }
      .briefing-card .boss-body .wf-sim-cat-val.cat-override {
        color: #5b7dd6; font-weight: 700;
      }
      .briefing-card .boss-body .wf-sim-cat-reset {
        background: none; border: none;
        color: #5b7dd6; cursor: pointer;
        font-size: 1em; padding: 0;
        width: 24px; height: 22px;
      }
      .briefing-card .boss-body .wf-sim-cat-reset:hover { color: #3a5a9c; }
      .briefing-card .boss-body .wf-sim-drawer-foot {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dashed #eee;
        font-size: 0.85em;
        color: var(--color-text-secondary);
      }
      /* Loss Visualization — net profit row when negative. Striped red
         fills the bar-area as "loss zone"; value text bold red with 亏损
         tag. Proportional accuracy sacrificed for alarm clarity (Tufte's
         no-bar variant deferred). */
      .briefing-card .boss-body .wf-row-loss {
        background: #fff5f5;
      }
      .briefing-card .boss-body .wf-row-loss .wf-bar-area {
        background: repeating-linear-gradient(45deg,
          rgba(196, 72, 72, 0.22) 0,
          rgba(196, 72, 72, 0.22) 5px,
          rgba(232, 92, 92, 0.10) 5px,
          rgba(232, 92, 92, 0.10) 10px);
        border: 1px solid rgba(196, 72, 72, 0.45);
      }
      .briefing-card .boss-body .wf-bar-loss {
        background: transparent;
        top: 0; bottom: 0; height: 100%;
      }
      .briefing-card .boss-body .wf-val-loss {
        color: #c44848; font-weight: 800; font-size: var(--font-size-lg);
      }
      .briefing-card .boss-body .wf-loss-tag {
        display: inline-block;
        padding: 1px 6px; margin-right: 4px;
        background: #c44848; color: #fff;
        font-size: 0.75em; font-weight: 700;
        border-radius: 3px;
        vertical-align: 0.1em;
      }
      .briefing-card .boss-body .wf-row-loss .wf-name {
        color: #c44848; font-weight: 700;
      }

      .briefing-card .boss-body .wf-val {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-size: var(--font-size-base);
        color: var(--color-text);
      }
      .briefing-card .boss-body .wf-val-pos      { color: #4a8c4a; }
      .briefing-card .boss-body .wf-val-neg      { color: #c44848; }
      .briefing-card .boss-body .wf-val-subtotal { color: #4f6fc2; font-weight: 700; }
      .briefing-card .boss-body .wf-val-final    { color: #c97e3a; font-weight: 800; font-size: var(--font-size-lg); }
      .briefing-card .boss-body .wf-val-warn     { color: #c97e3a; font-style: italic; font-size: var(--font-size-md); }
      /* Iter 86 — wf-unset-cta turns the val-cell "未配置" text into a
         tappable button (replaces the bottom 缺配置 ribbon). Same
         data-action="quick-fill" contract as the old ribbon chips. */
      .briefing-card .boss-body .wf-unset-cta {
        background: none;
        border: 1px dashed #c97e3a;
        color: #c97e3a;
        font-style: italic;
        font-size: var(--font-size-md);
        padding: 2px 8px;
        border-radius: 6px;
        cursor: pointer;
        font-family: inherit;
      }
      .briefing-card .boss-body .wf-unset-cta:hover {
        background: rgba(201, 126, 58, 0.08);
        border-style: solid;
      }
      /* Period-over-Period delta chip — appended to cost-row value.
         ▲ (cost up vs prev period) = red · ▼ (cost down) = green.
         Semantic inversion vs revenue: cost going up is "bad" outcome. */
      .briefing-card .boss-body .wf-delta {
        display: inline-block; margin-left: 6px;
        font-size: var(--font-size-2xs); font-weight: 600;
        padding: 1px 5px; border-radius: 999px;
        font-variant-numeric: tabular-nums;
        cursor: help;
      }
      .briefing-card .boss-body .wf-delta-up   { background: #fde2e2; color: #b91c1c; }
      .briefing-card .boss-body .wf-delta-down { background: #dcfce7; color: #15803d; }
      /* Budget overrun chip — Iter 64. Surfaces when realized MTD
         exceeds the configured budget for this cat. Plain over% chip.
         Tooltip exposes the budget amount so boss can verify against
         admin config in one glance. */
      .briefing-card .boss-body .wf-overrun {
        display: inline-block; margin-left: 6px;
        font-size: var(--font-size-2xs); font-weight: 700;
        padding: 1px 6px; border-radius: 999px;
        background: #fff4e0; color: #b45309;
        border: 1px solid #f5c97e;
        font-variant-numeric: tabular-nums;
        cursor: help;
      }
      /* Neutral budget anchor — Iter 68. Shown on every monthly-form
         row that's WITHIN budget. Same shape as overrun chip but neutral
         hue so the anchor is always visible without triggering "warning"
         visual weight. Overrun chip takes priority when realized > budget. */
      .briefing-card .boss-body .wf-budget-anchor {
        display: inline-block; margin-left: 6px;
        font-size: var(--font-size-2xs); font-weight: 600;
        padding: 1px 6px; border-radius: 999px;
        background: #eef2f7; color: #475569;
        border: 1px solid #cbd5e1;
        font-variant-numeric: tabular-nums;
        cursor: help;
      }

      /* ── Mobile (≤480px): waterfall layout pass ────────────────────
         Desktop grid: 80px label + 1fr bar + 170px value.
         iPhone 390px: 80+170+padding ≈ 270 fixed → bar ≈ 110px (too narrow,
         small bars invisible). Plus temporal strip stacks 4 chips below
         the main value, doubling the value column's vertical footprint
         (the cropped right column the user flagged).
         Fix:
           - shrink label 80→62, value 170→104
           - drop the temporal strip on phones (kept on tablets)
           - shrink hero KPI 40px → 28px so it doesn't push content off-screen
           - collapse month KPI 2-col grid → 1-col stack */
      @media (max-width: 480px) {
        .briefing-card .boss-body .wf-row {
          grid-template-columns: 62px 1fr 104px;
          gap: 6px; padding: 4px 2px;
          font-size: var(--font-size-sm);
        }
        /* Iter 54 — adaptive single-cell .wf-temporal stays visible on
           phones; one chip + tag fits the narrower val column without
           overflow. Previous Iter 53 phone hide was for the 3-cell grid
           which truncated. */
        .briefing-card .boss-body .wf-val-cell { gap: 0; }
        .briefing-card .boss-body .wf-name {
          font-size: var(--font-size-sm); white-space: normal; line-height: 1.2;
        }
        /* Iter 90 r17 — budget anchor shrink on mobile to avoid wrap in
           the 104px val column. Drop "预算" prefix, compress to "¥55k 47%". */
        .briefing-card .boss-body .wf-budget-anchor {
          font-size: 10px; padding: 1px 5px; margin-left: 0;
          white-space: nowrap;
        }
      }

      /* Hero KPI + Monthly KPI grid — overrides inline styles set by
         overview/index.js. Selectors are id-anchored so they win over the
         element's style attribute on identical specificity (inline wins ties,
         so we still need `!important` here). Without this, 40px hero font +
         2-col 1fr 1fr month grid push the page below the fold on iPhone. */
      @media (max-width: 480px) {
        #kpi-today-rev { font-size: 28px !important; }
        #kpi-today-food { font-size: 20px !important; }
        #kpi-month-rev, #kpi-avg-rev { font-size: 20px !important; }
        /* Collapse 2-col to 1-col stack — see overview/index.js for the wrapper class. */
        .kpi-month-grid { grid-template-columns: 1fr !important; }
      }