:root {
      --brand: #2CC0ED;
      --brand2: #1AADD4;
      --gold: #FCDE41;
      --gold2: #E8CC30;
      --gray: #838488;
      --navy: #1A3A5C;
      --navy2: #142E4A;
      --red: #E53E3E;
      --amber: #E67E22;
      --green: #27AE60;
      --bg: #FFFFFF;
      --bg2: #FFFFFF;
      --bg3: #EEF7FC;
      --ink: #1A3A5C;
      --text: #3A5468;
      --text2: #6D7B88;
      --text3: #838488;
      --white: #FFFFFF;
      --border: #DDE8EE;
      --border2: #BED0DB;
      --shadow-sm: 0 2px 8px rgba(26, 58, 92, 0.08);
      --shadow-md: 0 4px 16px rgba(26, 58, 92, 0.12);
      --font-body: 'Inter', -apple-system, sans-serif;
      --font-brand: 'Outfit', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      font-size: 13px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* HEADER */
    .app-header {
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
      height: 64px;
      flex-shrink: 0;
      border-bottom: 3px solid var(--brand);
      box-shadow: 0 2px 8px rgba(44, 192, 237, 0.10);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .brand-logo img {
      height: 40px;
      width: auto;
      display: block;
    }

    .brand-divider {
      width: 1px;
      height: 32px;
      background: var(--border);
      flex-shrink: 0;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
    }

    .brand-name {
      font-family: var(--font-brand);
      font-size: 13px;
      font-weight: 700;
      color: var(--gray);
      letter-spacing: 0.02em;
    }

    .brand-sub {
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--brand);
      font-weight: 600;
      margin-top: 2px;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .deal-type-badge {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1.5px solid;
    }

    .deal-type-badge.light {
      color: #1a6b2f;
      background: #e8f9ee;
      border-color: #27AE60;
    }

    .deal-type-badge.heavy {
      color: #7a4000;
      background: #fff3e0;
      border-color: #E67E22;
    }

    .deal-type-badge.distressed {
      color: #7a0000;
      background: #fdeaea;
      border-color: #E53E3E;
    }

    .deal-type-badge.newbuild {
      color: #1a3a7a;
      background: #e8f0ff;
      border-color: #2CC0ED;
    }

    /* TABS */
    .tab-nav {
      background: var(--brand);
      display: flex;
      flex-shrink: 0;
      padding: 0 8px;
      gap: 2px;
      overflow-x: auto;
    }

    .tab {
      background: transparent;
      border: none;
      color: #FFF;
      opacity: .78;
      padding: 10px 12px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      -webkit-font-smoothing: antialiased;
      transition: opacity .15s;
    }

    .tab:hover {
      opacity: 1;
    }

    .tab.active {
      color: #4a4b4e;
      background: var(--white);
      border-radius: 6px 6px 0 0;
      opacity: 1;
      margin-bottom: -1px;
      padding-bottom: 11px;
    }

    .tab .tab-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      margin-left: 5px;
      vertical-align: middle;
      transition: background .2s;
    }

    .tab.active .tab-dot {
      background: rgba(74, 75, 78, 0.3);
    }

    .tab.tab-done .tab-dot {
      background: #27AE60;
    }

    .tab.tab-partial .tab-dot {
      background: #FCDE41;
    }

    /* CONTENT */
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 18px 22px;
      background: var(--bg);
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 15px;
      border-radius: 7px;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all .14s;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--brand);
      color: var(--white);
      box-shadow: 0 4px 12px rgba(39, 181, 229, .25);
    }

    .btn-primary:hover {
      background: var(--brand2);
    }

    .btn-ghost {
      background: transparent;
      border: 1.5px solid rgba(39, 181, 229, .45);
      color: var(--brand);
    }

    .btn-ghost:hover {
      background: rgba(39, 181, 229, .10);
      border-color: var(--brand);
    }

    .btn-secondary {
      background: var(--bg2);
      border: 1.5px solid var(--border2);
      color: var(--text);
    }

    .btn-secondary:hover {
      border-color: var(--brand2);
      color: var(--brand2);
    }

    .btn-sm {
      padding: 4px 10px;
      font-size: 11px;
      border-radius: 5px;
    }

    .btn-xs {
      padding: 3px 8px;
      font-size: 10px;
      border-radius: 4px;
    }

    .btn-gold {
      background: var(--gold);
      color: #5a3e00;
      font-weight: 700;
    }

    .btn-gold:hover {
      background: var(--gold2);
    }

    /* STAT CARDS */
    .stat-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .stat-card {
      background: var(--bg2);
      border-radius: 10px;
      padding: 14px 16px;
      box-shadow: var(--shadow-sm);
      border-left: 4px solid var(--border);
      transition: box-shadow .15s;
    }

    .stat-card:hover {
      box-shadow: var(--shadow-md);
    }

    .stat-card.brand {
      border-left-color: var(--brand);
    }

    .stat-card.gold {
      border-left-color: var(--gold);
    }

    .stat-card.green {
      border-left-color: var(--green);
    }

    .stat-card.amber {
      border-left-color: var(--amber);
    }

    .stat-card.red {
      border-left-color: var(--red);
    }

    .stat-card.gray {
      border-left-color: var(--gray);
    }

    .stat-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text2);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .stat-value {
      font-family: var(--font-brand);
      font-size: 22px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
    }

    .stat-sub {
      font-size: 10px;
      color: var(--text2);
      margin-top: 4px;
    }

    .stat-delta {
      font-size: 10px;
      font-weight: 600;
      margin-top: 3px;
    }

    .stat-delta.up {
      color: var(--green);
    }

    .stat-delta.down {
      color: var(--red);
    }

    /* CARDS */
    .card {
      background: var(--bg2);
      border-radius: 10px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 16px;
      overflow: hidden;
    }

    .card-header {
      background: var(--gray);
      color: var(--white);
      font-family: var(--font-brand);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 9px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-header .accent {
      color: var(--gold);
    }

    .card-body {
      padding: 16px;
    }

    /* GRID LAYOUTS */
    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    /* FORM ELEMENTS */
    .form-group {
      margin-bottom: 14px;
    }

    .form-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .form-control {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--ink);
      background: var(--bg);
      transition: border-color .15s;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(44, 192, 237, .12);
    }

    .form-control.calc {
      background: #f0fbff;
      font-weight: 600;
      color: var(--brand);
    }

    select.form-control {
      cursor: pointer;
    }

    .input-group {
      display: flex;
      align-items: center;
    }

    .input-prefix,
    .input-suffix {
      padding: 8px 10px;
      background: var(--bg3);
      border: 1.5px solid var(--border);
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      white-space: nowrap;
    }

    .input-prefix {
      border-right: none;
      border-radius: 6px 0 0 6px;
    }

    .input-suffix {
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    .input-group .form-control {
      border-radius: 0;
    }

    .input-group .form-control:first-child {
      border-radius: 6px 0 0 6px;
    }

    .input-group .form-control:last-child {
      border-radius: 0 6px 6px 0;
    }

    /* TABLES */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .data-table th {
      background: var(--bg3);
      color: var(--text2);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 8px 10px;
      text-align: left;
      border-bottom: 2px solid var(--border);
    }

    .data-table td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      color: var(--ink);
      vertical-align: middle;
    }

    .data-table tr:last-child td {
      border-bottom: none;
    }

    .data-table tr:hover td {
      background: rgba(44, 192, 237, .04);
    }

    .data-table .total-row td {
      font-weight: 700;
      background: var(--bg3);
      border-top: 2px solid var(--border2);
    }

    .data-table .subtotal-row td {
      font-weight: 600;
      color: var(--brand);
    }

    .data-table input {
      width: 100%;
      padding: 5px 7px;
      border: 1.5px solid var(--border);
      border-radius: 4px;
      font-size: 12px;
      color: var(--ink);
      background: transparent;
    }

    .data-table input:focus {
      outline: none;
      border-color: var(--brand);
      background: #f0fbff;
    }

    .data-table .calc-cell {
      color: var(--brand);
      font-weight: 600;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    /* DEAL TYPE SELECTOR */
    .deal-type-selector {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .deal-type-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: 2px solid var(--border);
      background: var(--bg);
      color: var(--text2);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .deal-type-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .deal-type-btn.active-light {
      border-color: var(--green);
      background: #e8f9ee;
      color: #1a6b2f;
    }

    .deal-type-btn.active-heavy {
      border-color: var(--amber);
      background: #fff3e0;
      color: #7a4000;
    }

    .deal-type-btn.active-distressed {
      border-color: var(--red);
      background: #fdeaea;
      color: #7a0000;
    }

    .deal-type-btn.active-newbuild {
      border-color: var(--brand);
      background: #e8f7ff;
      color: var(--navy);
    }

    /* SCENARIO CARDS */
    .scenario-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .scenario-card {
      border-radius: 10px;
      padding: 16px;
      text-align: center;
      border: 2px solid;
    }

    .scenario-card.bear {
      border-color: #E53E3E;
      background: #fdeaea;
    }

    .scenario-card.base {
      border-color: var(--brand);
      background: #e8f7ff;
    }

    .scenario-card.bull {
      border-color: var(--green);
      background: #e8f9ee;
    }

    .scenario-label {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .scenario-card.bear .scenario-label {
      color: #E53E3E;
    }

    .scenario-card.base .scenario-label {
      color: var(--brand);
    }

    .scenario-card.bull .scenario-label {
      color: var(--green);
    }

    .scenario-metric {
      font-family: var(--font-brand);
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
    }

    .scenario-sub {
      font-size: 10px;
      color: var(--text2);
      margin-top: 3px;
    }

    /* WATERFALL / RETURN BARS */
    .return-bar-wrap {
      margin-bottom: 10px;
    }

    .return-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text);
      margin-bottom: 4px;
    }

    .return-bar {
      height: 8px;
      background: var(--bg3);
      border-radius: 4px;
      overflow: hidden;
    }

    .return-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .5s ease;
    }

    /* SECTION DIVIDER */
    .section-label {
      font-family: var(--font-brand);
      font-size: 11px;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 18px 0 10px;
      padding-bottom: 6px;
      border-bottom: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-label::before {
      content: '';
      display: block;
      width: 3px;
      height: 14px;
      background: var(--brand);
      border-radius: 2px;
    }

    /* TOOLTIP HINT */
    .hint {
      font-size: 10px;
      color: var(--text2);
      margin-top: 3px;
      font-style: italic;
    }

    /* PROGRESS INDICATOR */
    .uw-progress {
      display: flex;
      gap: 4px;
      margin-bottom: 18px;
    }

    .uw-step {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--border);
    }

    .uw-step.done {
      background: var(--green);
    }

    .uw-step.active {
      background: var(--brand);
    }

    /* CHART CONTAINERS */
    .chart-wrap {
      position: relative;
      height: 240px;
    }

    .chart-wrap-sm {
      position: relative;
      height: 160px;
    }

    /* ALERT / INFO BANNERS */
    .info-banner {
      background: rgba(44, 192, 237, .08);
      border: 1px solid rgba(44, 192, 237, .3);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px;
      color: var(--navy);
      margin-bottom: 14px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .warn-banner {
      background: rgba(230, 126, 34, .08);
      border: 1px solid rgba(230, 126, 34, .3);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px;
      color: #7a4000;
      margin-bottom: 14px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    /* DIVIDER */
    hr.divider {
      border: none;
      border-top: 1.5px solid var(--border);
      margin: 14px 0;
    }

    /* TWO-COL TABLE LAYOUT */
    .kv-table {
      width: 100%;
      border-collapse: collapse;
    }

    .kv-table td {
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }

    .kv-table td:first-child {
      color: var(--text2);
      font-weight: 500;
      width: 55%;
    }

    .kv-table td:last-child {
      font-weight: 700;
      color: var(--ink);
      text-align: right;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .kv-table tr:last-child td {
      border-bottom: none;
    }

    .kv-table .highlight td {
      background: rgba(44, 192, 237, .07);
    }

    .kv-table .highlight td:first-child {
      color: var(--brand);
    }

    .kv-table .highlight td:last-child {
      color: var(--brand);
      font-size: 13px;
    }

    /* TABS WITHIN TABS (sub-tabs) */
    .sub-tab-nav {
      display: flex;
      gap: 4px;
      margin-bottom: 14px;
      border-bottom: 2px solid var(--border);
    }

    .sub-tab {
      background: transparent;
      border: none;
      color: var(--text2);
      padding: 8px 14px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: all .15s;
    }

    .sub-tab:hover {
      color: var(--brand);
    }

    .sub-tab.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }

    .sub-pane {
      display: none;
    }

    .sub-pane.active {
      display: block;
    }

    /* CHECKLIST */
    .checklist {
      list-style: none;
    }

    .checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }

    .checklist li:last-child {
      border-bottom: none;
    }

    .check-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .check-icon.done {
      background: var(--green);
      color: #fff;
    }

    .check-icon.warn {
      background: var(--amber);
      color: #fff;
    }

    .check-icon.miss {
      background: var(--border);
      color: var(--text2);
    }


    /* ══ PIPELINE MODAL ══════════════════════════════════════════════════════ */
    .pipeline-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 9000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .pipeline-overlay.open {
      display: flex;
    }

    .pipeline-modal {
      background: #fff;
      border-radius: 12px;
      width: 700px;
      max-width: 95vw;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }

    .pipeline-modal-header {
      background: var(--brand);
      color: #fff;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .pipeline-modal-header h2 {
      font-family: var(--font-brand);
      font-size: 16px;
      font-weight: 700;
      margin: 0;
    }

    .pipeline-modal-header button {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pipeline-modal-header button:hover {
      background: rgba(255, 255, 255, 0.35);
    }

    .pipeline-search-bar {
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
      flex-shrink: 0;
    }

    .pipeline-search-bar input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
    }

    .pipeline-search-bar input:focus {
      border-color: var(--brand);
    }

    .pipeline-prop-list {
      overflow-y: auto;
      flex: 1;
      padding: 8px 0;
    }

    .pipeline-prop-card {
      padding: 12px 18px;
      cursor: pointer;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.12s;
    }

    .pipeline-prop-card:hover {
      background: #f0fbfe;
    }

    .pipeline-prop-card.selected {
      background: #e0f6fd;
    }

    .pipeline-prop-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .pipeline-prop-icon.has-drive {
      background: var(--green);
    }

    .pipeline-prop-info {
      flex: 1;
      min-width: 0;
    }

    .pipeline-prop-name {
      font-family: var(--font-brand);
      font-size: 13px;
      font-weight: 700;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pipeline-prop-addr {
      font-size: 11.5px;
      color: #6b7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pipeline-prop-meta {
      display: flex;
      gap: 8px;
      margin-top: 3px;
      flex-wrap: wrap;
    }

    .pipeline-prop-pill {
      font-size: 10.5px;
      padding: 2px 7px;
      border-radius: 10px;
      background: #f3f4f6;
      color: #374151;
      font-family: var(--font-body);
    }

    .pipeline-prop-pill.stage {
      background: #e0f6fd;
      color: #0e7490;
    }

    .pipeline-prop-pill.drive {
      background: #dcfce7;
      color: #15803d;
    }

    .pipeline-prop-right {
      text-align: right;
      flex-shrink: 0;
    }

    .pipeline-prop-price {
      font-family: var(--font-brand);
      font-size: 13px;
      font-weight: 700;
      color: var(--brand);
    }

    .pipeline-prop-units {
      font-size: 11px;
      color: #9ca3af;
    }

    .pipeline-modal-footer {
      padding: 12px 18px;
      background: #f9fafb;
      border-top: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .pipeline-modal-footer .count {
      font-size: 12px;
      color: #6b7280;
    }

    .pipeline-status {
      padding: 16px;
      text-align: center;
      color: #6b7280;
      font-size: 13px;
    }

    .pipeline-selected-banner {
      padding: 10px 18px;
      background: #f0fdf4;
      border-bottom: 1px solid #bbf7d0;
      display: none;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .pipeline-selected-banner.show {
      display: flex;
    }

    .pipeline-selected-banner .sel-name {
      font-family: var(--font-brand);
      font-weight: 700;
      font-size: 13px;
      color: #166534;
    }

    .pipeline-selected-banner .sel-addr {
      font-size: 12px;
      color: #6b7280;
      flex: 1;
    }

    .pipeline-drive-section {
      padding: 12px 18px;
      background: #f0fdf4;
      border-top: 1px solid #bbf7d0;
      display: none;
      flex-shrink: 0;
    }

    .pipeline-drive-section.show {
      display: block;
    }

    .pipeline-drive-section h3 {
      font-family: var(--font-brand);
      font-size: 12px;
      font-weight: 700;
      color: #15803d;
      margin: 0 0 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .pipeline-drive-files {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 140px;
      overflow-y: auto;
    }

    .pipeline-drive-file {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      background: #fff;
      border: 1px solid #d1fae5;
      border-radius: 6px;
      text-decoration: none;
      color: #166534;
      font-size: 12px;
    }

    .pipeline-drive-file:hover {
      background: #dcfce7;
    }

    .pipeline-drive-file .file-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .pipeline-drive-folder-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      color: #2563eb;
      text-decoration: none;
      font-family: var(--font-body);
    }

    .pipeline-drive-folder-link:hover {
      text-decoration: underline;
    }

    .btn-pipeline {
      background: linear-gradient(135deg, #2CC0ED, #1aa8d4);
      color: #fff;
      border: none;
      padding: 7px 14px;
      border-radius: 7px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.15s;
    }

    .btn-pipeline:hover {
      opacity: 0.88;
    }

    .pipeline-cfg-note {
      font-size: 11px;
      color: #9ca3af;
      margin-top: 8px;
      text-align: center;
    }

    .pipeline-cfg-note a {
      color: var(--brand);
    }

    /* ══ LOGIN ═══════════════════════════════════════════════════════════════ */
    .login-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(135deg, #1a3a5c 0%, #0e2440 60%, #0a1628 100%);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-overlay.hidden {
      display: none;
    }

    .login-box {
      background: #fff;
      border-radius: 16px;
      padding: 40px 44px;
      width: 400px;
      max-width: 92vw;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
      text-align: center;
    }

    .login-logo {
      margin-bottom: 20px;
    }

    .login-logo img {
      height: 40px;
    }

    .login-title {
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: 12px;
      color: #9ca3af;
      margin-bottom: 28px;
    }

    .login-field {
      margin-bottom: 14px;
      text-align: left;
    }

    .login-field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 5px;
      font-family: 'Inter', sans-serif;
    }

    .login-field input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: border-color 0.15s;
    }

    .login-field input:focus {
      border-color: #2CC0ED;
    }

    .login-btn {
      width: 100%;
      padding: 11px;
      background: linear-gradient(135deg, #2CC0ED, #1aa8d4);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      margin-top: 6px;
      transition: opacity 0.15s;
    }

    .login-btn:hover {
      opacity: 0.88;
    }

    .login-err {
      color: #e53e3e;
      font-size: 12px;
      margin-top: 8px;
      font-family: 'Inter', sans-serif;
      min-height: 16px;
    }

    .login-hint {
      font-size: 10.5px;
      color: #9ca3af;
      margin-top: 14px;
      font-family: 'Inter', sans-serif;
    }

    /* User pill in header */
    .user-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #f3f4f6;
      border: 1.5px solid #e5e7eb;
      border-radius: 20px;
      padding: 4px 10px 4px 5px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .user-pill:hover {
      background: #e5e7eb;
    }

    .user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      font-family: 'Outfit', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .user-name {
      font-size: 11.5px;
      font-weight: 600;
      color: #374151;
      font-family: 'Inter', sans-serif;
    }

    .user-role {
      font-size: 10px;
      color: #9ca3af;
      font-family: 'Inter', sans-serif;
    }

    /* ══ TASKS PANEL ═══════════════════════════════════════════════════════════ */
    .tasks-panel {
      position: fixed;
      top: 0;
      right: -400px;
      width: 380px;
      height: 100vh;
      background: #fff;
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
      z-index: 8000;
      transition: right 0.3s cubic-bezier(.4, 0, .2, 1);
      display: flex;
      flex-direction: column;
    }

    .tasks-panel.open {
      right: 0;
    }

    .tasks-panel-header {
      background: var(--gray);
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .tasks-panel-header h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      margin: 0;
    }

    .tasks-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tasks-close:hover {
      background: rgba(255, 255, 255, 0.35);
    }

    .tasks-deal-label {
      padding: 8px 14px;
      background: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
      font-size: 11.5px;
      color: #6b7280;
      font-family: 'Inter', sans-serif;
      flex-shrink: 0;
    }

    .tasks-deal-label strong {
      color: #374151;
    }

    .tasks-add-row {
      padding: 10px 14px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .tasks-add-row input {
      flex: 1;
      padding: 7px 10px;
      border: 1.5px solid #d1d5db;
      border-radius: 7px;
      font-size: 12.5px;
      font-family: 'Inter', sans-serif;
      outline: none;
    }

    .tasks-add-row input:focus {
      border-color: var(--brand);
    }

    .tasks-add-row select {
      padding: 7px 6px;
      border: 1.5px solid #d1d5db;
      border-radius: 7px;
      font-size: 11.5px;
      font-family: 'Inter', sans-serif;
      outline: none;
      color: #374151;
    }

    .tasks-add-row button {
      padding: 7px 12px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .tasks-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;
    }

    .task-item {
      padding: 10px 14px;
      border-bottom: 1px solid #f3f4f6;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .task-item:hover {
      background: #f9fafb;
    }

    .task-item.done .task-text {
      text-decoration: line-through;
      color: #9ca3af;
    }

    .task-check {
      width: 18px;
      height: 18px;
      border: 2px solid #d1d5db;
      border-radius: 4px;
      cursor: pointer;
      flex-shrink: 0;
      margin-top: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .task-check.checked {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .task-body {
      flex: 1;
      min-width: 0;
    }

    .task-text {
      font-size: 12.5px;
      color: #1a1a1a;
      font-family: 'Inter', sans-serif;
      line-height: 1.4;
    }

    .task-meta {
      display: flex;
      gap: 6px;
      margin-top: 3px;
      flex-wrap: wrap;
    }

    .task-pill {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
    }

    .task-pill.p-high {
      background: #fee2e2;
      color: #dc2626;
    }

    .task-pill.p-med {
      background: #fef3c7;
      color: #d97706;
    }

    .task-pill.p-low {
      background: #dcfce7;
      color: #16a34a;
    }

    .task-pill.due {
      background: #f3f4f6;
      color: #6b7280;
    }

    .task-pill.assignee {
      background: #e0f6fd;
      color: #0e7490;
    }

    .task-del {
      background: none;
      border: none;
      color: #d1d5db;
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      flex-shrink: 0;
    }

    .task-del:hover {
      color: #e53e3e;
    }

    .tasks-empty {
      text-align: center;
      padding: 32px 20px;
      color: #9ca3af;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
    }

    .tasks-footer {
      padding: 10px 14px;
      border-top: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11.5px;
      color: #6b7280;
      font-family: 'Inter', sans-serif;
      flex-shrink: 0;
    }

    .btn-tasks {
      position: relative;
      background: var(--gray);
      color: #fff;
      border: none;
      padding: 7px 14px;
      border-radius: 7px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-tasks:hover {
      opacity: 0.88;
    }

    .task-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--gold);
      color: #1a1a1a;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 9px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
    }

    .task-badge.show {
      display: flex;
    }

    .tasks-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.2);
      z-index: 7999;
      display: none;
    }

    .tasks-overlay.open {
      display: block;
    }

    /* ══ GANTT TAB ════════════════════════════════════════════════════════════ */
    .gantt-header-strip {
      background: var(--brand);
      color: #fff;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8px;
      margin-bottom: 14px;
    }

    .gantt-deal-title {
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      font-weight: 700;
    }

    .gantt-countdown {
      font-size: 12px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.2);
      padding: 4px 12px;
      border-radius: 20px;
    }

    .gantt-controls {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      align-items: center;
      flex-wrap: wrap;
    }

    .gantt-zoom-btn {
      padding: 5px 12px;
      border: 1.5px solid #d1d5db;
      background: #fff;
      border-radius: 6px;
      font-size: 11.5px;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      color: #374151;
      transition: all 0.12s;
    }

    .gantt-zoom-btn.active,
    .gantt-zoom-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: #f0fbfe;
    }

    .gantt-wrap {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
    }

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

    .gantt-label-col {
      width: 200px;
      min-width: 200px;
    }

    .gantt-date-header {
      background: #f9fafb;
      border-bottom: 2px solid #e5e7eb;
    }

    .gantt-date-header th {
      font-size: 10px;
      font-weight: 700;
      color: #9ca3af;
      text-align: center;
      padding: 5px 2px;
      border-right: 1px solid #f3f4f6;
      font-family: 'Inter', sans-serif;
    }

    .gantt-date-header th.today-col {
      background: #fff8e0;
      color: #d97706;
    }

    .gantt-date-header th.label-th {
      background: #f9fafb;
      border-right: 2px solid #e5e7eb;
      text-align: left;
      padding-left: 12px;
      font-size: 11px;
      color: #6b7280;
    }

    .gantt-phase-row {
      border-bottom: 1px solid #f3f4f6;
      transition: background 0.1s;
    }

    .gantt-phase-row:hover {
      background: #f9fafb;
    }

    .gantt-phase-row.milestone-row {
      background: #fffbeb;
    }

    .gantt-phase-label {
      padding: 8px 12px;
      border-right: 2px solid #e5e7eb;
      vertical-align: middle;
    }

    .gantt-phase-name {
      font-size: 12px;
      font-weight: 600;
      color: #1a1a1a;
      font-family: 'Inter', sans-serif;
    }

    .gantt-phase-dates {
      font-size: 10.5px;
      color: #9ca3af;
      margin-top: 2px;
      font-family: 'JetBrains Mono', monospace;
    }

    .gantt-phase-owner {
      font-size: 10px;
      color: #6b7280;
      margin-top: 2px;
    }

    .gantt-cell {
      position: relative;
      vertical-align: middle;
      height: 36px;
    }

    .gantt-bar {
      position: absolute;
      top: 8px;
      height: 18px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding: 0 6px;
      font-size: 9px;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      transition: filter 0.12s;
    }

    .gantt-bar:hover {
      filter: brightness(1.1);
    }

    .gantt-today-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--gold);
      z-index: 5;
      pointer-events: none;
    }

    .gantt-milestone {
      position: absolute;
      top: 8px;
      width: 18px;
      height: 18px;
      background: var(--gold);
      transform: rotate(45deg);
      z-index: 4;
      cursor: pointer;
    }

    .gantt-edit-row {
      background: #f0fbfe;
    }

    .gantt-edit-row td {
      padding: 6px 12px;
    }

    .gantt-date-input {
      padding: 4px 8px;
      border: 1.5px solid #d1d5db;
      border-radius: 6px;
      font-size: 11.5px;
      font-family: 'Inter', sans-serif;
      outline: none;
    }

    .gantt-date-input:focus {
      border-color: var(--brand);
    }

    .gantt-summary-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }

    .gantt-sum-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 12px;
      text-align: center;
    }

    .gantt-sum-label {
      font-size: 10.5px;
      color: #9ca3af;
      font-family: 'Inter', sans-serif;
      margin-bottom: 4px;
    }

    .gantt-sum-val {
      font-family: 'Outfit', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: #1a1a1a;
    }

    .gantt-sum-val.green {
      color: var(--green);
    }

    .gantt-sum-val.amber {
      color: var(--amber);
    }

    .gantt-sum-val.red {
      color: var(--red);
    }

    .gantt-add-btn {
      padding: 6px 12px;
      background: #fff;
      border: 1.5px dashed #d1d5db;
      border-radius: 6px;
      font-size: 11.5px;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      color: #6b7280;
    }

    .gantt-add-btn:hover {
      border-color: var(--brand);
      color: var(--brand);
    }

    .milestone-diamond {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: var(--gold);
      transform: rotate(45deg);
      margin-right: 4px;
    }

    @media print {

      /* Hide chrome */
      body.printing .app-header,
      body.printing .tab-nav,
      body.printing .tasks-panel,
      body.printing #loginOverlay,
      body.printing .dev-banner,
      body.printing .pipeline-overlay,
      body.printing #compareModal,
      body.printing #benchmarkModal,
      body.printing .btn-pipeline,
      body.printing #btn-save-sheet,
      body.printing #tasksBtn {
        display: none !important;
      }

      /* Unlock scroll lock so all content renders */
      body.printing,
      body.printing .content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
      }

      /* Show all tab panes */
      body.printing .tab-pane {
        display: block !important;
      }

      /* Section title labels inserted by JS */
      body.printing .print-section-title {
        display: flex !important;
      }

      /* Keep cards together when possible */
      body.printing .card {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #dde8ee;
      }

      body.printing .kpi-strip,
      body.printing .stat-row {
        page-break-inside: avoid;
      }

      body.printing .chart-wrap,
      body.printing .chart-wrap-sm {
        page-break-inside: avoid;
      }

      /* Page break before each tab section */
      body.printing .print-tab-section {
        page-break-before: always;
      }

      body.printing .print-tab-section:first-child {
        page-break-before: auto;
      }

      @page {
        margin: 0.5in;
        size: letter landscape;
      }
    }

    /* Print section title — hidden in normal view, shown during print */
    .print-section-title {
      display: none;
      align-items: center;
      gap: 10px;
      font-family: var(--font-brand);
      font-size: 14px;
      font-weight: 800;
      color: var(--brand);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-bottom: 3px solid var(--brand);
      padding-bottom: 8px;
      margin-bottom: 16px;
    }

    /* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px) + MOBILE (≤ 540px)
   ═══════════════════════════════════════════════════════════════ */

    /* ── Tablet ── */
    @media (max-width:900px) {

      /* Header: compress button row, allow wrap */
      .app-header {
        padding: 0 12px;
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .brand-logo img {
        height: 32px;
      }

      .brand-name {
        font-size: 11px;
      }

      .brand-sub {
        font-size: 9px;
      }

      .header-right {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      /* Hide low-priority header items on tablet */
      .deal-type-badge {
        display: none;
      }

      .user-pill .user-role {
        display: none;
      }

      /* Tabs: smaller, scrollable */
      .tab {
        padding: 8px 10px;
        font-size: 10px;
      }

      /* Content: tighter padding */
      .content {
        padding: 12px 14px;
      }

      /* Grids: 2-col stays at tablet, but inner grids collapse */
      .grid-3 {
        grid-template-columns: 1fr 1fr;
      }

      .grid-4 {
        grid-template-columns: 1fr 1fr;
      }

      /* Charts: slightly shorter */
      .chart-wrap {
        height: 200px;
      }

      .chart-wrap-sm {
        height: 140px;
      }

      /* KPI strip: allow 2-col wrap */
      .stat-row {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      }

      /* Tables: force horizontal scroll on small cards */
      .card-body {
        overflow-x: auto;
      }

      .data-table {
        min-width: 480px;
      }

      .kv-table {
        min-width: 0;
      }

      /* kv-tables are fine */

      /* Scenario row */
      .scenario-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    /* ── Mobile ── */
    @media (max-width:540px) {

      /* Header: stack brand + buttons */
      .app-header {
        padding: 8px 10px;
      }

      .brand {
        gap: 10px;
      }

      .brand-logo img {
        height: 28px;
      }

      .header-right {
        width: 100%;
        gap: 5px;
      }

      /* Hide Tasks button + user pill text on mobile — keep just avatar */
      #tasksBtn {
        display: none;
      }

      .user-pill .user-name {
        display: none;
      }

      /* Button text trimming: keep icons, shorten labels */
      #btn-save-sheet::after {
        content: '';
      }

      .btn-pipeline {
        font-size: 11px;
        padding: 6px 10px;
      }

      .btn.btn-primary.btn-sm {
        padding: 6px 10px;
        font-size: 11px;
      }

      .btn.btn-secondary.btn-sm {
        padding: 6px 8px;
        font-size: 11px;
      }

      /* Tabs: icon-only feel */
      .tab {
        padding: 8px 8px;
        font-size: 10px;
        letter-spacing: 0.02em;
      }

      /* Content: minimal padding */
      .content {
        padding: 10px 10px;
      }

      /* ALL grids go single column */
      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr !important;
      }

      /* KPI strip: 2 per row on phone */
      .stat-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .stat-value {
        font-size: 18px;
      }

      .stat-card {
        padding: 10px 12px;
      }

      /* Card body: tighter */
      .card-header {
        font-size: 10px;
        padding: 8px 12px;
      }

      .card-body {
        padding: 12px;
      }

      /* Charts: shorter on phone */
      .chart-wrap {
        height: 180px;
      }

      .chart-wrap-sm {
        height: 120px;
      }

      /* Table scroll wrapper */
      .data-table {
        min-width: 420px;
        font-size: 11px;
      }

      .data-table th,
      .data-table td {
        padding: 6px 7px;
      }

      /* KV tables: comfortable on phone */
      .kv-table td {
        font-size: 11px;
        padding: 5px 0;
      }

      /* Sub-tab nav: scrollable */
      .sub-tab-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
      }

      .sub-tab {
        white-space: nowrap;
      }

      /* Modals: full screen on phone */
      .pipeline-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0;
        max-height: 100vh;
      }

      #compareModal>div {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0;
        padding: 14px;
      }

      #benchmarkModal>div {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0;
      }

      /* Form elements: full-width friendly */
      .form-group {
        margin-bottom: 10px;
      }

      .form-control {
        font-size: 14px;
      }

      /* prevent iOS zoom on focus */
      select.form-control {
        font-size: 14px;
      }

      /* Tasks panel: full width */
      .tasks-panel {
        width: 100vw;
        right: -100vw;
      }

      .tasks-panel.open {
        right: 0;
      }

      /* Scenario cards */
      .scenario-row {
        grid-template-columns: 1fr !important;
      }

      .scenario-card {
        padding: 12px;
      }

      /* Gantt inner: already has overflow-x:auto, reduce min-width */
      #ganttInner table {
        min-width: 560px;
      }

      /* Input groups: stack prefix/input on very small */
      .input-prefix {
        min-width: 28px;
        font-size: 11px;
      }

      .input-suffix {
        min-width: 28px;
        font-size: 11px;
      }
    }

    /* Prevent iOS font size bumping on input focus */
    @media (max-width:540px) {

      input[type="number"],
      input[type="text"],
      input[type="email"],
      input[type="password"],
      select,
      textarea {
        font-size: 16px !important;
      }
    }

    /* ═══════ UW GUIDE PANEL ═══════ */
    .guide-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 58, 92, 0.25);
      z-index: 7850;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .guide-overlay.open {
      opacity: 1;
      pointer-events: none;
    }

    .guide-panel {
      position: fixed;
      top: 0;
      right: -440px;
      width: 420px;
      height: 100vh;
      background: #fff;
      box-shadow: -6px 0 32px rgba(26, 58, 92, 0.18);
      z-index: 7900;
      transition: right 0.3s cubic-bezier(.4, 0, .2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .guide-panel.open {
      right: 0;
    }

    .guide-panel-hdr {
      background: var(--navy);
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .guide-panel-hdr h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      margin: 0;
    }

    .guide-close-btn {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
      padding: 2px 6px;
    }

    .guide-close-btn:hover {
      color: #fff;
    }

    .guide-body {
      flex: 1;
      overflow-y: auto;
    }

    .guide-section {
      padding: 10px 16px 12px;
      border-bottom: 1px solid var(--border);
    }

    .guide-section-title {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text2);
      margin-bottom: 8px;
    }

    .guide-progress {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .gp-tab {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 600;
      background: var(--bg3);
      color: var(--text2);
      border: 1.5px solid var(--border);
    }

    .gp-tab.gp-done {
      background: #e8f9ee;
      color: #1a6b2f;
      border-color: #27AE60;
    }

    .gp-tab.gp-active {
      background: #e6f7fd;
      color: #1a5f7a;
      border-color: var(--brand);
      font-weight: 800;
    }

    .guide-coach {
      margin: 0 0 10px;
      background: #f0f7fd;
      border-radius: 8px;
      border-left: 3px solid var(--brand);
      padding: 11px 12px;
    }

    .guide-coach-text {
      font-size: 12px;
      color: var(--text);
      line-height: 1.55;
    }

    .guide-coach-steps {
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .guide-coach-steps li {
      font-size: 11px;
      color: var(--text);
      padding: 2px 0;
      display: flex;
      gap: 6px;
    }

    .guide-coach-steps li::before {
      content: '→';
      color: var(--brand);
      font-weight: 700;
      flex-shrink: 0;
    }

    .guide-docs-block {
      margin: 0;
      background: #fffbea;
      border-radius: 8px;
      border-left: 3px solid #E67E22;
      padding: 10px 12px;
    }

    .guide-docs-label {
      font-size: 9px;
      font-weight: 700;
      color: #E67E22;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 6px;
    }

    .guide-doc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 0;
    }

    .guide-doc-name {
      font-size: 11px;
      color: var(--text);
    }

    .guide-doc-req {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 3px;
    }

    .guide-doc-req.req {
      background: #fff3e0;
      color: #E67E22;
    }

    .guide-doc-req.opt {
      background: #f0f0f0;
      color: #838488;
    }

    .guide-crit-rows {
      padding: 0;
    }

    .guide-crit-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .guide-crit-row:last-child {
      border-bottom: none;
    }

    .guide-crit-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .guide-crit-icon.pass {
      background: #e8f9ee;
      color: #27AE60;
    }

    .guide-crit-icon.warn {
      background: #fff3e0;
      color: #E67E22;
    }

    .guide-crit-icon.fail {
      background: #fdeaea;
      color: #E53E3E;
    }

    .guide-crit-icon.na {
      background: #f0f0f0;
      color: #838488;
    }

    .guide-crit-info {
      flex: 1;
    }

    .guide-crit-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--ink);
    }

    .guide-crit-target {
      font-size: 10px;
      color: var(--text2);
    }

    .guide-crit-val {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 700;
    }

    .guide-crit-val.pass {
      color: #27AE60;
    }

    .guide-crit-val.warn {
      color: #E67E22;
    }

    .guide-crit-val.fail {
      color: #E53E3E;
    }

    .guide-crit-val.na {
      color: #838488;
    }

    .guide-verdict {
      margin: 12px 16px 14px;
      padding: 12px 14px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .guide-verdict.go {
      background: #e8f9ee;
      border-left: 4px solid #27AE60;
    }

    .guide-verdict.cond {
      background: #fff3e0;
      border-left: 4px solid #E67E22;
    }

    .guide-verdict.nogo {
      background: #fdeaea;
      border-left: 4px solid #E53E3E;
    }

    .guide-verdict.na {
      background: #f5f5f5;
      border-left: 4px solid #838488;
    }

    .verdict-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .verdict-text {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 13px;
    }

    .verdict-sub {
      font-size: 10px;
      color: var(--text2);
      margin-top: 2px;
      line-height: 1.4;
    }

    .btn-guide {
      background: var(--navy);
      color: #fff;
      border: none;
      padding: 7px 14px;
      border-radius: 7px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background .14s;
    }

    .btn-guide:hover {
      background: var(--navy2);
    }

    @media print {

      .guide-panel,
      .guide-overlay,
      .btn-guide {
        display: none !important;
      }
    }

/* ── DEAL TYPE BADGE ──────────────────────────────────────── */
.deal-type-badge { display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;background:#fff;border:2px solid var(--gray);color:var(--gray);letter-spacing:.04em; }
.deal-type-badge.light { border-color:var(--brand);color:var(--brand); }
.deal-type-badge.heavy { border-color:var(--amber);color:var(--amber); }
.deal-type-badge.distressed { border-color:var(--red);color:var(--red); }
.deal-type-badge.newbuild { border-color:var(--green);color:var(--green); }

/* ── BUTTON OVERRIDES ─────────────────────────────────────── */
.btn-guide { background:var(--gray) !important;color:#fff !important; }
.btn-pipeline { background:var(--brand) !important;color:#fff !important; }

/* ── SAVE META BADGE ──────────────────────────────────────── */
.save-meta-badge { font-size:10px;color:var(--gray);cursor:pointer;text-align:right;margin-top:2px;font-family:'Inter',sans-serif; }
.save-meta-badge:hover { color:var(--brand);text-decoration:underline; }

/* ── REALTIME BANNER ──────────────────────────────────────── */
.realtime-banner { display:none;align-items:center;gap:10px;padding:8px 18px;background:#fff8e1;border-bottom:2px solid var(--gold);font-size:13px;font-family:'Inter',sans-serif;color:#7c6200; }
.realtime-banner.show { display:flex; }
.realtime-banner button { background:var(--brand);color:#fff;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:12px;font-weight:700; }
.realtime-banner .dismiss { background:transparent;color:var(--gray);font-size:16px;padding:0 6px; }

/* ── HISTORY PANEL ────────────────────────────────────────── */
.history-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1100; }
.history-overlay.open { display:block; }
.history-panel { position:fixed;top:0;right:0;width:340px;height:100vh;background:#fff;z-index:1101;transform:translateX(100%);transition:transform .25s ease;box-shadow:-4px 0 24px rgba(0,0,0,.15);display:flex;flex-direction:column; }
.history-panel.open { transform:translateX(0); }
.history-panel-hdr { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--gray);color:#fff; }
.history-panel-hdr h3 { margin:0;font-family:'Outfit',sans-serif;font-size:15px; }
.history-panel-hdr button { background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1; }
.history-list { flex:1;overflow-y:auto;padding:12px; }
.history-item { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:8px; }
.history-meta { font-size:12px;color:var(--gray);font-family:'Inter',sans-serif; }

/* Metric tooltip system */
.metric-tip{display:inline-block;vertical-align:middle;margin-left:4px;cursor:help;line-height:1;position:relative;}
.metric-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--brand);color:#fff;font-size:9px;font-weight:700;font-family:var(--font-body);font-style:normal;line-height:1;user-select:none;transition:background .12s,transform .12s;}
.metric-tip:hover .metric-tip-icon,.metric-tip.active .metric-tip-icon{background:var(--brand2);transform:scale(1.12);}
.metric-tip-popup{position:absolute;display:none;max-width:340px;min-width:240px;background:#fff;border-left:4px solid var(--brand);border-radius:8px;padding:14px;font-family:var(--font-body);font-size:12px;line-height:1.55;color:var(--text);box-shadow:0 8px 28px rgba(26,58,92,0.18),0 2px 6px rgba(26,58,92,0.08);z-index:9999;pointer-events:auto;}
.metric-tip-popup.show{display:block;}
.metric-tip-popup .tip-title{font-family:var(--font-brand);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:0.01em;}
.metric-tip-popup .tip-formula{font-family:var(--font-mono);font-size:11px;background:var(--bg3);color:var(--ink);padding:6px 9px;border-radius:5px;margin-bottom:8px;border:1px solid var(--border);word-wrap:break-word;}
.metric-tip-popup .tip-thresholds{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.metric-tip-popup .tip-threshold{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:0.02em;line-height:1.3;}
.metric-tip-popup .tip-threshold.good{background:#e8f9ee;color:#1a6b2f;border:1px solid #b6e8c4;}
.metric-tip-popup .tip-threshold.ok{background:#fff8e1;color:#7a5800;border:1px solid #f3dc7a;}
.metric-tip-popup .tip-threshold.weak{background:#fdeaea;color:#7a0000;border:1px solid #f4bcbc;}
.metric-tip-popup .tip-why{font-style:italic;font-size:11.5px;color:var(--text2);line-height:1.5;border-top:1px dashed var(--border);padding-top:8px;margin-top:2px;}
@media print{.metric-tip,.metric-tip-popup{display:none!important;}}

/* IRR Sensitivity Grid */
.sens-grid{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:12px;background:var(--white);}
.sens-grid th{background:var(--gray);color:var(--white);font-family:var(--font-brand);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:8px 10px;text-align:center;border:1px solid var(--gray);}
.sens-grid th.sens-corner{background:var(--gray);}
.sens-grid td{padding:8px 10px;text-align:center;border:1px solid #e3e6ea;font-weight:600;color:var(--ink);}
.sens-grid td.sens-rowhead{background:var(--gray);color:var(--white);font-family:var(--font-brand);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
.sens-grid td.sens-good{background:#e8f9ee;color:#1a6b2f;}
.sens-grid td.sens-mid{background:#fff8e1;color:#7a5800;}
.sens-grid td.sens-bad{background:#fdeaea;color:#7a0000;}

/* BETA banner — remove once back-tests pass */
.uw-beta-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: linear-gradient(90deg, #FCDE41 0%, #E67E22 100%); color: #2c1900; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-align: center; padding: 6px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; gap: 10px; }
.uw-beta-banner .beta-tag { background: #2c1900; color: #FCDE41; padding: 2px 7px; border-radius: 3px; font-size: 9px; letter-spacing: 0.08em; }
.uw-beta-banner .beta-msg { font-weight: 600; opacity: 0.9; }
.uw-beta-banner button { background: rgba(0,0,0,0.18); border: none; color: #2c1900; font-weight: 700; padding: 2px 7px; border-radius: 3px; cursor: pointer; font-size: 10px; margin-left: 6px; }
.uw-beta-banner button:hover { background: rgba(0,0,0,0.3); }
body.has-uw-beta-banner { padding-top: 28px; }
/* Disclaimer footer · institutional safety */
.uw-disclaimer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99998; background: rgba(255,255,255,0.97); border-top: 1px solid var(--border); padding: 5px 16px; font-family: 'Inter', sans-serif; font-size: 9.5px; line-height: 1.4; color: var(--text2); text-align: center; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); }
.uw-disclaimer strong { color: var(--ink); font-weight: 700; }
.uw-disclaimer .uw-d-close { background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 10px; margin-left: 8px; padding: 0 4px; }
.uw-disclaimer .uw-d-close:hover { color: var(--red); }
body.has-uw-disclaimer { padding-bottom: 32px; }


/* ═══════ QUICK LOOK PANEL ═══════════════════════════════════ */
.ql-overlay {
  position: fixed; inset: 0;
  background: rgba(26,58,92,0.25);
  z-index: 7850; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.ql-overlay.open { opacity: 1; pointer-events: none; }

.ql-panel {
  position: fixed; top: 0; right: -440px; width: 420px; height: 100vh;
  background: #fff; box-shadow: -6px 0 32px rgba(26,58,92,0.18);
  z-index: 7900; transition: right 0.3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.ql-panel.open { right: 0; }

.ql-panel-hdr {
  background: #1e6b3c;
  color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ql-panel-hdr h3 {
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; margin: 0; flex: 1;
}
.ql-panel-sub { font-size: 11px; opacity: 0.75; }

.ql-body { flex: 1; overflow-y: auto; }

.ql-section { padding: 10px 16px 12px; border-bottom: 1px solid var(--border); }
.ql-sec-title {
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 0 8px; opacity: 0.85;
}
.ql-title-kpi  { color: var(--navy); }
.ql-title-opp  { color: #1e6b3c; }
.ql-title-risk { color: var(--amber); }

.ql-krow {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
}
.ql-krow:last-child { border-bottom: none; }
.ql-klabel { color: var(--text2); font-family: 'Inter', sans-serif; }
.ql-kval   { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); }
.ql-krow.ql-good .ql-kval { color: var(--green); }
.ql-krow.ql-ok   .ql-kval { color: var(--ink); }
.ql-krow.ql-warn .ql-kval { color: var(--amber); }
.ql-krow.ql-bad  .ql-kval { color: var(--red); }

.ql-flag {
  font-size: 12px; line-height: 1.45; padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04); font-family: 'Inter', sans-serif;
}
.ql-flag:last-child { border-bottom: none; }

.ql-verdict {
  margin: 14px 16px; padding: 12px 16px; border-radius: 8px;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
  text-align: center;
}
.ql-verdict-green { background: #e8f7ee; color: #1e6b3c; }
.ql-verdict-amber { background: #fff4e5; color: #a0510b; }
.ql-verdict-red   { background: #fde8e8; color: #c0392b; }

.ql-disclaimer {
  font-size: 10px; color: var(--text3); text-align: center;
  padding: 0 16px 20px; font-style: italic; line-height: 1.4;
}

/* Quick Look header button */
.btn-ql {
  background: var(--green); color: #fff; border: none;
  padding: 7px 14px; border-radius: 7px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s; position: relative;
}
.btn-ql:hover { background: #219150; }
.btn-ql.ql-has-data::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); animation: ql-dot-pulse 2s infinite;
}
@keyframes ql-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}
@media print { .ql-panel, .ql-overlay, .btn-ql { display: none !important; } }