/* Extracted from platform-demo.html */

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root {
    --bg:        #F5F6F4;
    --paper:     #FFFFFF;
    --paper-2:   #FAFBF9;
    --line:      #E6E8E4;
    --line-2:    #D6DAD4;
    --ink:       #1A2421;
    --ink-2:     #3A4541;
    --ink-3:     #6B7570;
    --ink-4:     #9AA39E;
    --ink-5:     #C5CCC7;

    --green:        #1F7A4D;
    --green-bright: #2F9F6A;
    --green-pale:   #E8F2EC;
    --green-soft:   #F0F7F2;

    --scope1:    #6E5BB5; /* purple */
    --scope2:    #5BA8B5; /* teal */
    --scope3:    #C58A2E; /* amber */

    --waste-rec: #1F7A4D;
    --waste-dis: #C4546A;

    --slate:     #4A5258;
    --orange:    #E37A4A;
    --blue:      #4F88B8;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:'Inter', sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
  body { animation: __klappir_fade_in 500ms ease both; display:flex; align-items:center; justify-content:center; }
  @keyframes __klappir_fade_in { from { opacity:0; } to { opacity:1; } }
  body.fade-out { opacity:0; transition:opacity 600ms ease; }

  /* ========= Scaling stage — preserves design proportions across iframe sizes ========= */
  .scale-stage {
    width:1280px; height:800px;
    flex:none;
    position:relative;
    transform-origin: center center;
    background:var(--bg);
  }

  /* ========= App shell ========= */
  .app {
    position:absolute; inset:0;
    background:var(--bg);
    display:grid;
    grid-template-columns:188px 1fr;
    grid-template-rows:52px 1fr;
  }

  /* Topbar */
  .topbar {
    grid-column:1 / -1;
    background:white;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center;
    padding:0 18px 0 14px;
    gap:14px;
    z-index:5;
  }
  .topbar-collapse { color:var(--ink-3); padding:6px; display:flex; }
  .topbar-collapse svg { width:14px; height:14px; }
  .topbar-logo { display:flex; align-items:center; gap:8px; }
  .topbar-logo img.klappir-mark {
    height:26px; width:auto; display:block;
  }
  .topbar-logo .super {
    font-family:'Inter'; font-size:9px; font-weight:500; color:var(--ink-3);
    letter-spacing:0.02em;
    align-self:flex-start;
    margin-top:2px;
  }
  .topbar-spacer { flex:1; }
  .topbar-pill {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:white;
    font-size:12px; color:var(--ink-2);
    font-weight:500;
  }
  .topbar-pill .platform-glyph {
    width:14px; height:14px;
  }
  .topbar-pill .chev { color:var(--ink-4); font-size:9px; margin-left:1px; }
  .topbar-pill .flag {
    width:20px; height:14px; border-radius:2px; overflow:hidden; display:inline-block;
  }
  .topbar-pill .flag svg { width:100%; height:100%; display:block; }

  /* ========= Sidebar ========= */
  .sidebar {
    background:white;
    border-right:1px solid var(--line);
    padding:14px 0 14px 0;
    display:flex; flex-direction:column;
    gap:0;
    z-index:4;
    overflow-y:auto;
  }
  .nav-item {
    display:flex; align-items:center; gap:10px;
    padding:7px 14px 7px 16px;
    color:var(--ink-2); font-size:12.5px; font-weight:500;
    cursor:default;
    transition: background 200ms ease, color 200ms ease;
    position:relative;
  }
  .nav-item .ico {
    width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:none;
    color:var(--ink-3);
  }
  .nav-item .ico svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }
  .nav-item .lbl { flex:1; }
  .nav-item .chev { color:var(--ink-4); font-size:9px; }
  .nav-item.active {
    background:var(--green-pale); color:var(--green); font-weight:600;
  }
  .nav-item.active .ico { color:var(--green); }
  .nav-item.active::before {
    content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px;
    background:var(--green); border-radius:0 2px 2px 0;
  }
  .nav-sub {
    display:none;
    flex-direction:column;
    padding:2px 0 4px 0;
  }
  .nav-sub.open { display:flex; }
  .nav-sub-item {
    padding:6px 14px 6px 44px;
    font-size:11.5px; color:var(--ink-3); font-weight:500;
  }
  .nav-sub-item.active { color:var(--green); font-weight:600; background:var(--green-soft); }
  .nav-spacer { flex:1; }
  .nav-divider { border-top:1px solid var(--line); margin:6px 14px; }

  /* ========= Main canvas ========= */
  .main {
    overflow:hidden;
    position:relative;
    background:var(--bg);
  }
  .stage {
    position:absolute; inset:0;
    padding:18px 24px 24px;
    display:flex; flex-direction:column;
    gap:14px;
    opacity:0;
    transition: opacity 480ms ease;
    pointer-events:none;
    overflow:hidden;
  }
  .stage.show { opacity:1; pointer-events:auto; }

  /* Page header (matches real product) */
  .page-h {
    display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  }
  .page-h h1 {
    font-family:'Inter'; font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-0.01em;
    line-height:1.15;
  }
  .page-h .sub {
    font-family:'Inter'; font-size:12px; color:var(--ink-3); margin-top:3px;
  }
  .page-h .crumb {
    font-family:'Inter'; font-size:11px; color:var(--ink-3); margin-bottom:4px;
    display:flex; align-items:center; gap:6px;
  }
  .page-h .crumb a { color:var(--ink-3); }
  .page-h .crumb .sep { color:var(--ink-5); }
  .page-h .crumb .here { color:var(--green); }

  /* Year tabs */
  .year-tabs {
    display:inline-flex;
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
    background:white;
  }
  .year-tab {
    padding:6px 14px;
    font-family:'Inter'; font-size:12px; font-weight:500;
    color:var(--ink-3);
    border-right:1px solid var(--line);
    transition: background 220ms ease, color 220ms ease;
  }
  .year-tab:last-child { border-right:none; }
  .year-tab.active { background:var(--green-pale); color:var(--green); font-weight:600; }

  /* ========= STAGE 1 · Dashboard ========= */
  .dash-grid {
    flex:1; min-height:0;
    display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:1fr 1fr;
    gap:14px;
  }
  .chart-card {
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:8px;
    overflow:hidden;
    min-height:0;
  }
  .chart-card .ch-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .chart-card .ch-title {
    display:flex; align-items:center; gap:7px;
    font-family:'Inter'; font-weight:600; font-size:13.5px; color:var(--ink);
  }
  .chart-card .ch-title .ic { color:var(--ink-3); display:flex; }
  .chart-card .ch-title .ic svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }
  .chart-card .ch-tags {
    display:flex; gap:5px; align-items:center;
  }
  .scope-pill {
    font-family:'Inter'; font-size:9.5px; font-weight:600;
    padding:2px 7px; border-radius:99px;
    color:white;
  }
  .scope-pill.s1 { background:var(--scope1); }
  .scope-pill.s2 { background:var(--scope2); }
  .scope-pill.s3 { background:var(--scope3); }
  .ch-tag {
    font-family:'Inter'; font-size:9.5px; font-weight:600;
    padding:2px 8px; border-radius:99px;
  }
  .ch-tag.rec { background:var(--green-pale); color:var(--green); }
  .ch-tag.dis { background:#FBE7EB; color:var(--waste-dis); }
  .ch-tag.unit { background:#F0F2EE; color:var(--ink-3); }

  .ch-body { flex:1; min-height:0; position:relative; }
  .ch-body svg { display:block; width:100%; height:100%; overflow:visible; }
  .ch-axis-y { font-family:'Inter'; font-size:9px; fill:var(--ink-4); }
  .ch-axis-x { font-family:'Inter'; font-size:9px; fill:var(--ink-4); }
  .ch-grid line { stroke:#EFF1ED; stroke-width:1; }
  .ch-bar { transition: height 700ms cubic-bezier(0.4, 0.05, 0.2, 1), y 700ms cubic-bezier(0.4, 0.05, 0.2, 1); }

  /* ========= STAGE 1.5 · KPI deep-dive ========= */
  .kpi-toolbar {
    display:flex; align-items:center; gap:10px;
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:9px 12px;
    font-size:11.5px;
  }
  .kpi-toolbar .field {
    display:flex; flex-direction:column; gap:3px;
    min-width:0;
  }
  .kpi-toolbar .field .lab {
    font-size:9.5px; color:var(--ink-3); font-weight:600; letter-spacing:0.02em;
  }
  .kpi-toolbar .field .pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 9px; border:1px solid var(--line); border-radius:5px;
    font-size:11px; color:var(--ink-2); font-weight:500;
    background:white; white-space:nowrap;
  }
  .kpi-toolbar .field .pill .chev { color:var(--ink-4); font-size:9px; }
  .kpi-toolbar .field .chips {
    display:flex; gap:4px; flex-wrap:nowrap; overflow:hidden;
  }
  .kpi-toolbar .field .chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 7px; border:1px solid var(--scope2); border-radius:4px;
    font-size:10px; color:var(--scope2); font-weight:500; background:rgba(91,168,181,0.06);
    white-space:nowrap;
  }
  .kpi-toolbar .field .chip .x { color:var(--ink-4); font-size:11px; line-height:1; }
  .kpi-toolbar-spacer { flex:1; }

  .kpi-card {
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 18px;
    flex:1; min-height:0;
    display:flex; flex-direction:column; gap:10px;
    position:relative;
    overflow:hidden;
  }
  .kpi-card .h1 {
    font-family:'Inter'; font-weight:600; font-size:15px; color:var(--ink);
  }
  .kpi-card .h1 .sub-ce { color:var(--ink); font-weight:600; }
  .kpi-card .ctrls {
    display:flex; gap:14px; align-items:center;
    padding:6px 0;
  }
  .kpi-card .ctrls .ctrl {
    display:flex; flex-direction:column; gap:3px;
  }
  .kpi-card .ctrls .ctrl .lab {
    font-size:9.5px; color:var(--ink-3); font-weight:600;
  }
  .kpi-card .ctrls .ctrl .pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border:1px solid var(--line); border-radius:5px;
    font-size:11px; color:var(--ink-2); font-weight:500;
  }
  .kpi-card .ctrls .ctrl .pill .chev { color:var(--ink-4); font-size:9px; }
  .kpi-card .ctrls .spacer { flex:1; }
  .kpi-card .ctrls .show-all {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; color:var(--ink-3); font-weight:500;
  }
  .kpi-card .ctrls .show-all .box {
    width:11px; height:11px; border:1.4px solid var(--ink-4); border-radius:2px;
  }

  .kpi-chart-wrap {
    flex:1; min-height:0; position:relative;
  }
  .kpi-chart-wrap svg { width:100%; height:100%; display:block; overflow:visible; }

  /* Pinpoint cursor */
  .kpi-cursor {
    position:absolute;
    width:24px; height:24px;
    pointer-events:none;
    opacity:0;
    transition: opacity 200ms ease, left 900ms cubic-bezier(.5,.1,.25,1), top 900ms cubic-bezier(.5,.1,.25,1);
    z-index:6;
  }
  .kpi-cursor.show { opacity:1; }
  .kpi-cursor svg { width:100%; height:100%; display:block; }

  /* Callout flag from cursor */
  .kpi-callout {
    position:absolute;
    background:#1A2421;
    color:white;
    border-radius:6px;
    padding:9px 12px 10px;
    font-family:'Inter';
    font-size:11px;
    line-height:1.4;
    box-shadow: 0 8px 24px -6px rgba(22,31,27,0.35);
    z-index:7;
    opacity:0;
    transform: translateY(-4px) scale(0.95);
    transform-origin: top left;
    transition: opacity 240ms ease, transform 280ms cubic-bezier(.2,.7,.25,1.4);
    pointer-events:none;
    width:230px;
  }
  .kpi-callout.show { opacity:1; transform: translateY(0) scale(1); }
  .kpi-callout::before {
    content:'';
    position:absolute;
    top:-6px; left:18px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #1A2421;
  }
  .kpi-callout .row1 {
    display:flex; align-items:center; gap:6px;
    color:#FF6B6B; font-weight:600; font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
    margin-bottom:4px;
  }
  .kpi-callout .row1 .dot {
    width:6px; height:6px; border-radius:50%; background:#FF6B6B;
    box-shadow: 0 0 0 0 rgba(255,107,107,0.6);
    animation: kpiAlertPulse 1.4s ease-out infinite;
  }
  @keyframes kpiAlertPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,107,107,0.7); }
    70%  { box-shadow: 0 0 0 5px rgba(255,107,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
  }
  .kpi-callout .h {
    font-weight:600; font-size:12px; color:white; margin-bottom:3px;
  }
  .kpi-callout .meta {
    font-size:10px; color:rgba(255,255,255,0.65); margin-bottom:8px;
  }
  .kpi-callout .delta {
    font-family:'IBM Plex Mono';
    font-size:13px; color:#FF8A6B; font-weight:600;
    margin-bottom:8px;
  }
  .kpi-callout .delta .vs {
    font-family:'Inter'; font-size:9.5px; color:rgba(255,255,255,0.55); font-weight:400; margin-left:4px;
  }
  .kpi-callout .actions {
    display:flex; gap:6px; margin-top:6px;
  }
  .kpi-callout .actions .a {
    flex:1;
    padding:5px 8px; border-radius:4px;
    font-size:10px; font-weight:600; text-align:center;
    background:rgba(255,255,255,0.08); color:white;
    border:1px solid rgba(255,255,255,0.12);
  }
  .kpi-callout .actions .a.primary {
    background:var(--green-bright); border-color:var(--green-bright); color:white;
  }

  /* Action confirmation toast */
  .kpi-action-toast {
    position:absolute;
    background:white;
    border:1px solid var(--green);
    border-left:3px solid var(--green);
    border-radius:6px;
    padding:9px 12px;
    font-family:'Inter';
    box-shadow: 0 8px 24px -6px rgba(31,122,77,0.25);
    z-index:7;
    opacity:0;
    transform: translateY(6px);
    transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.25,1.4);
    width:260px;
  }
  .kpi-action-toast.show { opacity:1; transform: translateY(0); }
  .kpi-action-toast .lab {
    font-size:9.5px; color:var(--green); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    display:flex; align-items:center; gap:5px;
    margin-bottom:3px;
  }
  .kpi-action-toast .lab .ic {
    width:11px; height:11px; border-radius:50%; background:var(--green);
    display:inline-flex; align-items:center; justify-content:center;
    color:white; font-size:8px; font-weight:700;
  }
  .kpi-action-toast .h {
    font-size:12px; color:var(--ink); font-weight:600; margin-bottom:2px;
  }
  .kpi-action-toast .meta {
    font-size:10.5px; color:var(--ink-3);
  }

  /* Realized-savings chip */
  .kpi-savings-chip {
    position:absolute;
    background:var(--green-pale);
    border:1px solid var(--green);
    border-radius:8px;
    padding:10px 14px;
    font-family:'Inter';
    z-index:7;
    opacity:0;
    transform: translateY(8px) scale(0.95);
    transition: opacity 320ms ease, transform 380ms cubic-bezier(.2,.7,.25,1.4);
    box-shadow: 0 8px 24px -6px rgba(31,122,77,0.18);
  }
  .kpi-savings-chip.show { opacity:1; transform: translateY(0) scale(1); }
  .kpi-savings-chip .lab {
    font-size:9.5px; color:var(--green); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    margin-bottom:4px;
  }
  .kpi-savings-chip .v {
    font-family:'IBM Plex Mono'; font-size:18px; font-weight:600; color:var(--green); letter-spacing:-0.01em;
    line-height:1;
  }
  .kpi-savings-chip .meta {
    font-size:10px; color:var(--ink-3); margin-top:4px;
  }

  /* Bar styling for KPI chart */
  .kpi-bar { transition: height 700ms cubic-bezier(.4,.05,.2,1), y 700ms cubic-bezier(.4,.05,.2,1), fill 400ms ease, opacity 400ms ease; }
  .kpi-bar.ghost { fill:none; stroke-width:1.2; stroke-dasharray:2 2; opacity:0; transition: opacity 400ms ease; }
  .kpi-bar.ghost.in { opacity:0.55; }
  .kpi-trend-line { fill:none; stroke:var(--ink-4); stroke-width:1.2; stroke-dasharray:3 3; opacity:0; transition: opacity 320ms ease; }
  .kpi-trend-line.in { opacity:0.7; }
  .kpi-projection-line { fill:none; stroke:#FF6B6B; stroke-width:1.4; stroke-dasharray:3 3; opacity:0; transition: opacity 320ms ease; }
  .kpi-projection-line.in { opacity:0.85; }
  .kpi-savings-wedge { fill:rgba(31,122,77,0.14); opacity:0; transition: opacity 480ms ease; }
  .kpi-savings-wedge.in { opacity:1; }

  /* ========= STAGE 2 · Value chain ========= */
  .vc-toolbar {
    display:flex; align-items:center; gap:10px;
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:9px 12px;
  }
  .vc-search {
    flex:1; display:flex; align-items:center; gap:8px;
    color:var(--ink-4); font-size:12px;
  }
  .vc-search svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; }
  .vc-filter {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; border:1px solid var(--line); border-radius:5px;
    font-size:11.5px; color:var(--ink-2); font-weight:500;
  }
  .vc-filter svg { width:12px; height:12px; }

  .vc-action-row {
    display:flex; align-items:center; gap:14px;
    padding:0 4px;
    font-size:12px; color:var(--ink-3);
  }
  .vc-count { color:var(--ink); font-weight:500; }
  .vc-act { display:inline-flex; align-items:center; gap:5px; color:var(--ink-3); font-size:11.5px; font-weight:500; }
  .vc-act.green { color:var(--green); }
  .vc-act svg { width:12px; height:12px; }
  .vc-spacer { flex:1; }
  .vc-toggle-views {
    display:inline-flex; gap:4px;
  }
  .vc-toggle-views .v {
    width:24px; height:22px; border:1px solid var(--line); border-radius:4px;
    display:flex; align-items:center; justify-content:center; color:var(--ink-3);
  }
  .vc-toggle-views .v svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.6; }
  .vc-toggle-views .v.active { background:var(--green-pale); color:var(--green); border-color:var(--green-pale); }

  .vc-table {
    background:white; border:1px solid var(--line); border-radius:8px;
    flex:1; min-height:0; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .vc-thead, .vc-trow {
    display:grid;
    grid-template-columns: 28px 1.9fr 2.2fr 1.1fr 1fr 0.7fr 0.7fr 1.05fr;
    gap:10px; align-items:center;
    padding:9px 14px;
    font-size:11.5px;
    position:relative;
  }
  .vc-thead {
    background:#FAFBF9;
    border-bottom:1px solid var(--line);
    color:var(--ink-3); font-weight:600; font-size:10.5px;
    text-transform:none;
  }
  .vc-thead .col { display:flex; align-items:center; gap:4px; }
  .vc-thead .col .gr { color:var(--ink-5); font-size:9px; }
  .vc-trow {
    border-bottom:1px solid #F0F2ED;
    transition: background 320ms ease;
  }
  .vc-trow.added { background:rgba(31,122,77,0.04); }
  .vc-trow .check {
    width:14px; height:14px; border:1.5px solid var(--ink-5); border-radius:3px;
  }
  .vc-trow .name {
    display:flex; align-items:center; gap:8px;
    color:var(--ink); font-weight:500;
  }
  .vc-trow .name .av {
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter'; font-size:9px; font-weight:600; color:white;
    flex:none;
    position:relative;
    overflow:hidden;
  }
  .vc-trow .name .av .initials {
    transition: opacity 200ms ease;
    line-height:1;
  }
  .vc-trow .name .av .logo {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;
    padding:1px;
    background:white;
    opacity:0;
    transition: opacity 240ms ease;
  }
  .vc-trow .name .av.loaded { background:white !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
  .vc-trow .name .av.loaded .initials { opacity:0; }
  .vc-trow .name .av.loaded .logo { opacity:1; }
  .vc-trow .sector { color:var(--ink-3); }
  .vc-trow .country { display:flex; align-items:center; gap:6px; color:var(--ink-2); }
  .vc-trow .country .flg {
    width:18px; height:13px; border-radius:1.5px; flex:none; overflow:hidden; display:inline-block;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
  }
  .vc-trow .country .flg svg { width:100%; height:100%; display:block; }
  .vc-trow .conn {
    display:flex; gap:3px;
    opacity:0;
    transition: opacity 320ms ease;
  }
  .vc-trow .conn .dot { width:8px; height:8px; border-radius:50%; background:var(--blue); }
  .vc-trow.connected .conn { opacity:1; }
  .vc-trow .sdg {
    font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink); font-weight:500;
    opacity:0; transition: opacity 320ms ease;
  }
  .vc-trow.scored .sdg { opacity:1; }
  .vc-trow .disc {
    font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-2); font-weight:500;
    opacity:0; transition: opacity 320ms ease;
  }
  .vc-trow.disclosed .disc { opacity:1; }

  /* hover-style highlight to show connection insertion */
  .vc-trow.highlight {
    background:rgba(91,168,181,0.08);
    box-shadow: inset 3px 0 0 var(--scope2);
  }
  .vc-trow .conn-tooltip {
    position:absolute;
    background:#3A4541; color:white;
    font-size:10.5px; font-weight:500;
    padding:5px 10px; border-radius:4px;
    pointer-events:none;
    opacity:0;
    transition: opacity 220ms ease;
    z-index:10;
    white-space:nowrap;
  }
  .vc-trow .conn-tooltip .small { font-size:9.5px; color:rgba(255,255,255,0.7); display:block; margin-top:1px; }
  .vc-trow.tooltip-on .conn-tooltip { opacity:1; }

  /* Activate-data-stream button */
  .vc-trow .activate {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 9px;
    border:1px solid var(--line-2);
    border-radius:5px;
    background:white;
    color:var(--ink-2);
    font-family:'Inter'; font-size:10.5px; font-weight:600;
    letter-spacing:0.01em;
    cursor:default;
    transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
    white-space:nowrap;
    line-height:1;
  }
  .vc-trow .activate .pulse {
    width:7px; height:7px; border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 0 0 rgba(79,136,184,0.5);
    animation: actPulse 1.6s ease-out infinite;
    flex:none;
  }
  @keyframes actPulse {
    0% { box-shadow: 0 0 0 0 rgba(79,136,184,0.55); }
    70% { box-shadow: 0 0 0 6px rgba(79,136,184,0); }
    100% { box-shadow: 0 0 0 0 rgba(79,136,184,0); }
  }
  .vc-trow .activate.armed {
    background:rgba(79,136,184,0.10);
    border-color:rgba(79,136,184,0.45);
    color:var(--blue);
  }
  .vc-trow .activate.armed .pulse { animation-duration: 0.7s; }
  .vc-trow.streaming .activate {
    background:var(--green-pale);
    color:var(--green);
    border-color:rgba(31,122,77,0.30);
  }
  .vc-trow.streaming .activate .pulse {
    background:var(--green-bright);
    animation-duration: 1.0s;
    box-shadow:0 0 0 0 rgba(47,159,106,0.45);
  }
  .vc-trow .activate.unavailable {
    color:var(--ink-4);
    border-style:dashed;
    border-color:#E6E8E4;
  }
  .vc-trow .activate.unavailable .pulse { display:none; }

  /* row-level data-flow visual when streaming */
  .vc-trow.streaming {
    background:linear-gradient(90deg, rgba(47,159,106,0.08) 0%, rgba(47,159,106,0.02) 100%);
  }
  .vc-trow.streaming::after {
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--green-bright);
    animation: flowGlow 1.4s ease-in-out infinite;
  }
  @keyframes flowGlow {
    0%, 100% { opacity:0.4; }
    50% { opacity:1; }
  }

  /* ========= STAGE 2.5 · Data enrichment ========= */
  .enrich-status {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter'; font-size:13px; color:var(--green); font-weight:500;
    margin-left:14px; vertical-align:middle;
  }
  .enrich-status .pulse {
    width:7px; height:7px; border-radius:50%; background:var(--green);
    animation: enrichPulse 1.4s ease-in-out infinite;
  }
  @keyframes enrichPulse {
    0%,100% { opacity:0.4; transform:scale(0.85); }
    50% { opacity:1; transform:scale(1.1); }
  }
  .enrich-meta {
    display:flex; align-items:center; gap:14px;
    font-family:'Inter'; font-size:11.5px; color:var(--ink-3);
  }
  .enrich-meta .progress {
    width:140px; height:5px; background:var(--line); border-radius:3px; overflow:hidden;
  }
  .enrich-meta .progress-fill {
    height:100%; background:var(--green); width:0%;
    transition:width 380ms ease;
  }
  .enrich-chart {
    height:46px; background:rgba(58,164,108,0.04); border-radius:6px;
    display:flex; align-items:flex-end; gap:1.5px; padding:6px 8px;
    margin-top:8px;
  }
  .enrich-chart .b {
    flex:1; background:rgba(58,164,108,0.45); border-radius:1px 1px 0 0;
    transform:scaleY(0.05); transform-origin:bottom;
    transition:transform 600ms ease, background 320ms ease;
  }
  .enrich-chart.live .b { transform:scaleY(var(--h)); }
  .enrich-chart .b.spike { background:rgba(217,121,87,0.7); }
  .enrich-wrap {
    flex:1; min-height:0; margin-top:8px;
    display:flex; flex-direction:column; overflow:hidden;
    border:1px solid var(--line); border-radius:6px; background:white;
  }
  .enrich-scroll { overflow:auto; flex:1; min-height:0; }
  .enrich-grid {
    display:grid;
    grid-template-columns:
      120px 88px 110px 130px 150px 90px 130px 110px 130px 110px 130px 96px 72px 78px 80px 70px 80px;
    font-family:'Inter'; font-size:10.5px; color:var(--ink-2);
    min-width:max-content;
  }
  .enrich-head {
    position:sticky; top:0; z-index:2;
    background:#fafbfb; border-bottom:1px solid var(--line);
  }
  .enrich-head .cell {
    padding:8px; font-size:10px; color:var(--ink-3); font-weight:600;
    letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-right:1px solid var(--line);
    transition: background 320ms ease, color 320ms ease;
  }
  .enrich-head .cell:last-child { border-right:none; }
  .enrich-head .cell.numeric { text-align:right; }
  .enrich-head .cell.enriching { background:rgba(58,164,108,0.14); color:var(--green); }
  .enrich-head .cell.done { background:rgba(58,164,108,0.05); color:var(--ink-2); }
  .enrich-row { display:contents; }
  .enrich-row .cell {
    padding:7px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-right:1px solid #f1f3f3; border-bottom:1px solid #f1f3f3;
    background:white;
    transition: background 320ms ease, color 320ms ease;
  }
  .enrich-row .cell:last-child { border-right:none; }
  .enrich-row .cell.numeric { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500; }
  .enrich-row .cell.empty { color:var(--ink-3); opacity:0.45; }
  .enrich-row .cell.empty::before { content:'—'; }
  .enrich-row .cell.filling {
    background:rgba(58,164,108,0.18); color:var(--green); font-weight:600;
  }
  .enrich-row .cell.filled { animation: enrichFlash 700ms ease-out; }
  @keyframes enrichFlash {
    0% { background:rgba(58,164,108,0.30); }
    100% { background:white; }
  }
  .enrich-row.total .cell {
    font-weight:600; color:var(--ink); background:rgba(58,164,108,0.05);
    border-bottom:1px solid var(--line);
  }
  .enrich-row.total .cell.numeric { color:var(--green); }
  /* ========= STAGE 3 · Insights · Waste ========= */
  .ins-grid {
    flex:1; min-height:0;
    display:grid; grid-template-rows:auto 1fr; gap:14px;
  }
  .ins-tabs {
    display:flex; gap:14px; align-items:center;
    border-bottom:1px solid var(--line);
    padding-bottom:0;
  }
  .ins-tab {
    padding:7px 0;
    font-size:12px; color:var(--ink-3); font-weight:500;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    transition: color 240ms ease, border-color 240ms ease;
  }
  .ins-tab.active { color:var(--green); border-color:var(--green); font-weight:600; }
  .ins-spacer { flex:1; }
  .ins-tab-meta { font-family:'Inter'; font-size:11px; color:var(--ink-3); }

  .ins-body {
    display:grid; grid-template-rows:0.9fr 1.1fr; grid-template-columns:1fr 1fr; gap:14px;
    min-height:0;
  }
  .ins-card {
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:10px;
    overflow:hidden;
  }
  .ins-card-head { display:flex; align-items:center; justify-content:space-between; }
  .ins-card-head .h { font-family:'Inter'; font-weight:600; font-size:13px; color:var(--ink); }
  .ins-card-head .meta { font-family:'Inter'; font-size:11px; color:var(--ink-3); }
  .ins-card-body { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:18px; }

  /* Donut */
  .donut-wrap { position:relative; width:180px; height:180px; flex:none; }
  .donut-wrap svg { width:100%; height:100%; transform:rotate(-90deg); }
  .donut-wrap .total {
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Inter';
  }
  .donut-wrap .total .v { font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; line-height:1; }
  .donut-wrap .total .u { font-size:11px; color:var(--ink-3); margin-top:3px; }

  .donut-legend {
    display:flex; flex-direction:column; gap:10px;
    font-size:12px;
  }
  .donut-legend .row { display:flex; align-items:center; gap:8px; color:var(--ink-2); }
  .donut-legend .sw { width:9px; height:9px; border-radius:50%; }
  .donut-legend .row .pct { font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-3); margin-left:6px; }

  /* CO2e bar */
  .co2-bar-wrap {
    flex:1; height:100%;
    display:flex; flex-direction:column; gap:6px;
  }

  /* Sankey */
  .sankey-card {
    grid-column:1 / -1;
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:8px;
    overflow:hidden;
    min-height:0;
  }
  .sankey-card svg { width:100%; flex:1; min-height:0; display:block; }

  /* ========= STAGE 4 · Reports ========= */
  .rep-grid {
    flex:1; min-height:0;
    display:grid; grid-template-columns:1fr 1.4fr; gap:14px;
  }
  .rep-list-card {
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:10px;
    overflow:hidden;
  }
  .rep-list-card .h { font-family:'Inter'; font-weight:600; font-size:13px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; }
  .rep-list-card .h .meta { font-family:'Inter'; font-size:11px; color:var(--ink-3); font-weight:500; }
  .rep-row {
    display:grid; grid-template-columns: 36px 1fr auto; gap:10px;
    align-items:center;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:6px;
    background:white;
    font-size:12px;
    transition: background 320ms ease, border-color 320ms ease;
  }
  .rep-row .ic {
    width:34px; height:34px; border-radius:6px;
    background:#F0F2ED; color:var(--ink-2);
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter'; font-size:9.5px; font-weight:700; letter-spacing:0.04em;
  }
  .rep-row .name { color:var(--ink); font-weight:500; line-height:1.2; }
  .rep-row .name .sub { display:block; font-family:'Inter'; font-size:10.5px; color:var(--ink-3); margin-top:2px; font-weight:400; }
  .rep-row .status {
    display:flex; align-items:center; gap:6px;
    font-family:'Inter'; font-size:10.5px; color:var(--ink-3); font-weight:500;
  }
  .rep-row .spinner {
    width:11px; height:11px; border-radius:50%;
    border:2px solid #E6E8E4; border-top-color:var(--green);
    animation: spin 0.8s linear infinite;
    display:none;
  }
  @keyframes spin { to { transform:rotate(360deg); } }
  .rep-row .dot { width:7px; height:7px; border-radius:50%; background:#E6E8E4; }
  .rep-row.generating .spinner { display:inline-block; }
  .rep-row.generating .dot { display:none; }
  .rep-row.generating { border-color:rgba(31,122,77,0.30); background:var(--green-soft); }
  .rep-row.generating .status { color:var(--green); }
  .rep-row.done { background:var(--green-pale); border-color:rgba(31,122,77,0.30); }
  .rep-row.done .ic { background:var(--green); color:white; }
  .rep-row.done .spinner { display:none; }
  .rep-row.done .dot { display:inline-block; background:var(--green); }
  .rep-row.done .status { color:var(--green); }

  .rep-preview-card {
    background:white; border:1px solid var(--line); border-radius:8px;
    padding:14px 16px;
    display:flex; flex-direction:column; gap:10px;
    overflow:hidden;
    position:relative;
  }
  .rep-preview-card .h { font-family:'Inter'; font-weight:600; font-size:13px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; }
  .rep-preview-stage {
    flex:1; min-height:0;
    background:linear-gradient(180deg, #EFF1ED 0%, #E2E6E0 100%);
    border-radius:6px;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .doc {
    position:absolute;
    width:78%; height:88%;
    left:50%; top:50%;
    background:white;
    border:1px solid var(--line-2);
    border-radius:3px;
    box-shadow:0 12px 28px -10px rgba(22,31,27,0.22), 0 2px 6px rgba(22,31,27,0.06);
    padding:18px 22px 16px;
    transform-origin:center;
    opacity:0;
    transition: opacity 380ms ease, transform 600ms cubic-bezier(0.2, 0.6, 0.25, 1);
    overflow:hidden;
    display:flex; flex-direction:column;
    gap:10px;
  }
  .doc.in { opacity:1; }
  .doc-top {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:8px;
    border-bottom:1.5px solid var(--ink);
  }
  .doc-top .left {
    font-family:'Inter'; font-weight:700; font-size:11px; color:var(--ink); letter-spacing:0.01em;
  }
  .doc-top .right {
    font-family:'Inter'; font-size:8.5px; color:var(--ink-3); letter-spacing:0.10em; text-transform:uppercase; font-weight:600;
  }
  .doc-section { display:flex; flex-direction:column; gap:5px; }
  .doc-section-h {
    font-family:'Inter'; font-weight:700; font-size:9.5px; color:var(--ink);
    margin-bottom:1px;
  }
  /* report-table — visual rhythm of the user's screenshot */
  .doc-table {
    border:1px solid var(--line);
    overflow:hidden;
    border-radius:1px;
  }
  .doc-thead {
    display:grid; grid-template-columns: 1fr 90px 50px;
    background:#0E2A38; /* dark teal/navy */
    color:white;
    padding:5px 9px;
    font-family:'Inter'; font-weight:700; font-size:8.5px;
    letter-spacing:0.01em;
    align-items:center;
  }
  .doc-thead .th-unit { text-align:left; }
  .doc-thead .th-yr { text-align:right; }
  .doc-trow {
    display:grid; grid-template-columns: 1fr 90px 50px;
    padding:4px 9px;
    font-family:'Inter'; font-size:8.5px; color:var(--ink-2);
    border-top:1px solid #F2F4F0;
    align-items:center;
  }
  .doc-trow:first-of-type { border-top:none; }
  .doc-trow .unit { color:var(--ink-3); }
  .doc-trow .val { text-align:right; font-family:'IBM Plex Mono'; color:var(--ink); font-weight:500; }
  .doc-trow .val.dash { color:var(--ink-4); }
  .doc-tfoot {
    background:#CFE3D5; /* mint band */
    height:7px;
  }
  .doc-tfoot.notes {
    background:#CFE3D5;
    padding:4px 9px;
    height:auto;
    font-family:'Inter'; font-size:8px; font-style:italic; color:#2D4F3A; font-weight:500;
  }
  /* big circular stamp — mimics the Port demo style */
  .doc-stamp {
    position:absolute;
    bottom:18px; right:22px;
    width:108px; height:108px;
    border-radius:50%;
    border:2px solid var(--green);
    color:var(--green);
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(-9deg) scale(0.85);
    opacity:0;
    transition: opacity 320ms ease, transform 380ms cubic-bezier(.2,.7,.25,1.4);
    pointer-events:none;
    z-index:5;
  }
  .doc-stamp::before, .doc-stamp::after {
    content:''; position:absolute; inset:5px;
    border-radius:50%;
    border:1px solid var(--green);
  }
  .doc-stamp::after { inset:9px; border-style:dashed; opacity:0.6; }
  .doc-stamp .stamp-inner {
    text-align:center;
    font-family:'IBM Plex Mono'; font-weight:700;
    color:var(--green);
    line-height:1.05;
    letter-spacing:0.04em;
    z-index:1;
  }
  .doc-stamp .stamp-inner .v {
    font-size:18px; letter-spacing:0.12em;
  }
  .doc-stamp .stamp-inner .div {
    height:1px; background:var(--green); margin:3px 12px;
  }
  .doc-stamp .stamp-inner .s {
    font-size:7.5px; letter-spacing:0.18em;
  }
  .doc-stamp .stamp-inner .d {
    font-size:6.5px; letter-spacing:0.14em;
    margin-top:2px; opacity:0.85;
  }
  .doc.stamped .doc-stamp { opacity:0.92; transform:rotate(-9deg) scale(1); }

  /* ========= "View your impact" pill ========= */
  .impact-pill {
    position:absolute; bottom:16px; right:16px;
    background:white; border:1px solid var(--line);
    border-radius:999px;
    padding:7px 14px 7px 8px;
    display:flex; align-items:center; gap:10px;
    box-shadow:0 4px 14px -4px rgba(22,31,27,0.14);
    z-index:6;
  }
  .impact-pill .av {
    width:24px; height:24px; border-radius:50%;
    background:var(--green); color:white;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter'; font-size:10px; font-weight:700;
  }
  .impact-pill .lbl { font-family:'Inter'; font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.15; }
  .impact-pill .lbl .sub { display:block; font-weight:400; color:var(--ink-3); font-size:10px; margin-top:1px; }
  .impact-pill .progress {
    width:50px; height:3px; background:#E6E8E4; border-radius:99px; overflow:hidden;
  }
  .impact-pill .progress .fill { height:100%; background:var(--green); border-radius:99px; transition: width 600ms ease; }
  .help-bubble {
    position:absolute; bottom:16px; right:230px;
    width:34px; height:34px; border-radius:50%;
    background:var(--green); color:white;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px -2px rgba(31,122,77,0.4);
    z-index:6;
  }
  .help-bubble svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
  .help-bubble .badge {
    position:absolute; top:-2px; right:-2px;
    width:8px; height:8px; border-radius:50%; background:var(--waste-dis);
    border:1.5px solid white;
  }