/*
 * LISA Harbor — desktop design system (presentation layer only).
 * Loaded after lisa-visual-refresh.css. Scoped to desktop widths; mobile (.lm-*, #lisa-mobile-shell),
 * iOS and printed documents are not touched.
 *
 * Layers: tokens → shell (sidebar, top bar) → base components → page chrome (KPI bar, toolbar).
 */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/InterVariable.woff2") format("woff2")}

@media screen and (min-width:761px){
/* 1. Tokens -------------------------------------------------------------- */
:root{
  --hb-nav:#11252d;--hb-nav-2:#1a3540;--hb-nav-3:#1f4350;--hb-nav-line:#24414b;--hb-nav-text:#a9bcc2;--hb-nav-muted:#6f8890;--hb-nav-hi:#3ec5b5;
  --hb-accent:#0f766e;--hb-accent-hover:#0b5f58;--hb-accent-soft:#dcf1ee;--hb-accent-ink:#0b524c;
  --hb-info:#2563eb;--hb-violet:#7c3aed;--hb-orange:#c2410c;--hb-slate:#64748b;
  --hb-ok:#15803d;--hb-ok-soft:#dff3e5;--hb-warn:#b45309;--hb-warn-soft:#fdf0d5;--hb-danger:#c2362f;--hb-danger-soft:#fde8e6;
  --hb-sidebar:224px;--hb-sidebar-collapsed:64px;--hb-topbar:60px;
  --hb-r-sm:8px;--hb-r:9px;--hb-r-lg:14px;
  --hb-shadow-pop:0 12px 32px rgba(17,37,45,.16),0 2px 6px rgba(17,37,45,.08);
  --font-mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hb-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:var(--hb-font);--font-display:var(--hb-font);
}
.light{
  --bg:#f2f5f5;--bg2:#fff;--bg3:#f6f8f8;--bg4:#e9eff0;--panel:#fff;
  --border:#dde5e5;--border2:#c5d2d2;--row-border:#e8eeee;
  --text:#14202a;--text2:#24333d;--text3:#34454f;--text4:#566a73;--text5:#6a7e86;--muted:#5f737b;--faint:#8497a0;
  --green:#15803d;--teal:#0f766e;--blue:#2563eb;--blue2:#2563eb;--amber:#b45309;--red:#c2362f;--purple:#7c3aed;
  --command-green:#0f766e;--command-green-dark:#0b5f58;--command-green-soft:#dcf1ee;--command-line:#dde5e5;--command-line-2:#c5d2d2;--command-ink:#14202a;
}
html:not(.light){
  --bg:#0c181e;--bg2:#12232b;--bg3:#172c35;--bg4:#1d3641;--panel:#12232b;
  --border:#244049;--border2:#33545f;--row-border:#1c343d;
  --text:#eef4f5;--text2:#dbe6e8;--text3:#b9cacf;--text4:#98adb3;--text5:#7f949b;--muted:#8fa3aa;--faint:#6a7f87;
  --hb-accent:#2fb5a6;--hb-accent-hover:#46c9ba;--hb-accent-soft:#143a3a;--hb-accent-ink:#8fe3d8;
  --hb-ok:#4ade80;--hb-warn:#fbbf24;--hb-danger:#f87171;--hb-info:#7aa7ff;--hb-ok-soft:#12341f;--hb-warn-soft:#3a2a10;--hb-danger-soft:#3b1a19;
  --command-green:#2fb5a6;--command-green-soft:#143a3a;--command-line:#244049;
}

  html{font-family:var(--hb-font)}
  body,#app,#detail,#deal-view-overlay,#spotlight-box,#notif-panel{font-family:var(--hb-font);font-feature-settings:"tnum" 1,"cv11" 1,"ss03" 1;font-variant-numeric:tabular-nums;letter-spacing:-.003em}
  #app.lisa-atlas-shell{--command-sidebar:var(--hb-sidebar);--command-topbar:var(--hb-topbar);background:var(--bg);font-size:13px}
  #app.lisa-atlas-shell.sidebar-collapsed{--command-sidebar:var(--hb-sidebar-collapsed)}

  /* 2. Sidebar --------------------------------------------------------- */
  #app.lisa-atlas-shell>header{
    background:var(--hb-nav);color:var(--hb-nav-text);padding:16px 12px 12px;border:0;box-shadow:none
  }
  .light #app.lisa-atlas-shell>header{color:var(--hb-nav-text)}
  #app.lisa-atlas-shell>header::before,#app.lisa-atlas-shell>header::after{content:none;display:none}
  #app.lisa-atlas-shell .h-left{padding:0 4px 14px;border-bottom:1px solid var(--hb-nav-line);gap:8px;grid-template-columns:minmax(0,1fr) 30px;grid-template-areas:'brand collapse'}
  #app.lisa-atlas-shell .brand-logo.compact{height:30px;filter:brightness(0) invert(1);opacity:.95}
  #app.lisa-atlas-shell .sidebar-brand-monogram{background:var(--hb-accent);color:#fff;border-radius:8px}
  #app.lisa-atlas-shell .sidebar-collapse{width:30px;height:30px;border:1px solid var(--hb-nav-line);border-radius:7px;background:var(--hb-nav-2);color:var(--hb-nav-text)}
  #app.lisa-atlas-shell .sidebar-collapse:hover{background:var(--hb-nav-3);color:#fff}
  #app.lisa-atlas-shell .nav-arrow{border:1px solid var(--hb-nav-line);background:var(--hb-nav-2);color:var(--hb-nav-text);border-radius:6px}
  #app.lisa-atlas-shell .nav-arrow:hover:not(:disabled){background:var(--hb-nav-3);color:#fff}
  #app.lisa-atlas-shell .nav-arrow:disabled{opacity:.35}
  #app.lisa-atlas-shell .sidebar-nav-label{margin:18px 8px 5px;color:var(--hb-nav-muted);font-size:10px;font-weight:700;letter-spacing:.1em}
  #app.lisa-atlas-shell .h-shortcut,#app.lisa-atlas-shell .h-group{
    height:36px;min-height:36px;padding:0 10px;gap:10px;border-radius:7px;color:var(--hb-nav-text);font-size:13px;font-weight:500;letter-spacing:0
  }
  #app.lisa-atlas-shell .h-shortcut:hover,#app.lisa-atlas-shell .h-group:hover{background:var(--hb-nav-2);color:#fff}
  #app.lisa-atlas-shell .h-group.active,#app.lisa-atlas-shell .h-shortcut.active{background:var(--hb-nav-3);color:#fff;font-weight:600}
  #app.lisa-atlas-shell .h-group.active::after,#app.lisa-atlas-shell .h-shortcut.active::before{background:var(--hb-nav-hi)}
  #app.lisa-atlas-shell .h-shortcut svg,#app.lisa-atlas-shell .h-group svg{width:17px;height:17px;flex-basis:17px;stroke-width:1.9}
  #app.lisa-atlas-shell .sidebar-footer{border-top:1px solid var(--hb-nav-line)}
  #app.lisa-atlas-shell .sidebar-footer-label,#app.lisa-atlas-shell .sidebar-product-label{color:var(--hb-nav-muted)}
  #app.lisa-atlas-shell .h-tabs{background:var(--bg2);border:1px solid var(--border);border-radius:var(--hb-r-lg);box-shadow:var(--hb-shadow-pop)}
  #app.lisa-atlas-shell .h-tab{height:36px;border-radius:7px;color:var(--text3);font-size:13px;font-weight:500}
  #app.lisa-atlas-shell .h-tab:hover{background:var(--bg3);color:var(--text)}
  #app.lisa-atlas-shell .h-tab.active{background:var(--hb-accent-soft);color:var(--hb-accent-ink);font-weight:600}
  #app.lisa-atlas-shell .h-tab-heading{color:var(--text5);font-size:10px;letter-spacing:.08em}
  #app.lisa-atlas-shell.sidebar-collapsed .h-group.active,#app.lisa-atlas-shell.sidebar-collapsed .h-shortcut.active{background:var(--hb-nav-3)}
  #app.lisa-atlas-shell.sidebar-collapsed .sidebar-nav-label{background:var(--hb-nav-line)}

  /* 3. Top bar: page title · month KPIs · actions ----------------------- */
  #app.lisa-atlas-shell .h-right{
    left:var(--hb-sidebar);width:calc(100vw - var(--hb-sidebar));height:var(--hb-topbar);padding:0 24px;gap:8px;
    background:var(--bg2);border-bottom:1px solid var(--border)
  }
  #app.lisa-atlas-shell.sidebar-collapsed .h-right{left:var(--hb-sidebar-collapsed);width:calc(100vw - var(--hb-sidebar-collapsed))}
  #app.lisa-atlas-shell .h-context{
    position:fixed;z-index:496;top:0;left:calc(var(--command-sidebar) + 24px);height:var(--hb-topbar);display:flex!important;align-items:center;padding:0;pointer-events:none
  }
  #app.lisa-atlas-shell .h-context-top{display:flex;align-items:center;gap:8px}
  #app.lisa-atlas-shell .h-view-chip{white-space:nowrap;padding:0;border:0;background:transparent;color:var(--text);font-size:19px;font-weight:650;letter-spacing:-.02em;text-transform:none}
  #app.lisa-atlas-shell .h-filename{display:none}
  #app.lisa-atlas-shell .h-month-kpis{left:calc(var(--command-sidebar) + 300px);right:auto;max-width:calc(100vw - var(--command-sidebar) - 300px - 640px);gap:0;overflow:hidden}
  #app.lisa-atlas-shell .h-month-kpi{min-width:150px;height:36px;padding:0 16px;white-space:nowrap;border:0;border-left:1px solid var(--border);border-right:0;border-radius:0;background:transparent}
  #app.lisa-atlas-shell .h-month-kpi:first-child{border-left:1px solid var(--border)}
  #app.lisa-atlas-shell .h-month-kpi-label{color:var(--text5);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:none}
  #app.lisa-atlas-shell .h-month-kpi-value{color:var(--text);font-size:15px;font-weight:650;letter-spacing:-.01em;font-family:var(--hb-font)}
  #app.lisa-atlas-shell .h-right .reload-btn,#app.lisa-atlas-shell .h-right .theme-toggle,#app.lisa-atlas-shell .h-right .top-sync-status,
  #app.lisa-atlas-shell #notif-bell-btn,#lisa-sync-verify-button{
    height:28px!important;min-height:28px!important;padding:0 11px!important;border:1px solid transparent!important;border-radius:var(--hb-r)!important;
    color:var(--text4)!important;background:transparent!important;font:600 12px var(--hb-font)!important
  }
  #app.lisa-atlas-shell .h-right .reload-btn:hover,#app.lisa-atlas-shell .h-right .theme-toggle:hover,#app.lisa-atlas-shell #notif-bell-btn:hover,#lisa-sync-verify-button:hover{
    background:var(--bg4)!important;color:var(--text)!important
  }
  #app.lisa-atlas-shell .h-right .top-sync-status{border-color:var(--border)!important}
  #app.lisa-atlas-shell .h-right [onclick='openNewQuoteStudio()']{
    height:28px!important;min-height:28px!important;padding:0 16px!important;border:1px solid var(--hb-accent)!important;border-radius:var(--hb-r)!important;
    background:var(--hb-accent)!important;color:#fff!important;font:650 13px var(--hb-font)!important;order:-1;margin-right:6px
  }
  #app.lisa-atlas-shell .h-right [onclick='openNewQuoteStudio()']:hover{background:var(--hb-accent-hover)!important;border-color:var(--hb-accent-hover)!important}
  #app.lisa-atlas-shell .body-wrap{background:var(--bg)}
  #app.lisa-atlas-shell .content{padding:20px 24px 56px}
  #app.lisa-atlas-shell .content.panel-open{padding-right:calc(600px + 24px)}

  /* 4. Base components --------------------------------------------------- */
  #app .ui-btn,#app .state-btn-primary,#app .q-btn-primary,.light #app .ui-btn,.light #app .state-btn-primary,.light #app .q-btn-primary{
    min-height:28px;padding:0 14px;border:1px solid var(--hb-accent);border-radius:var(--hb-r);background:var(--hb-accent);color:#fff;font-weight:600;font-size:13px
  }
  #app .ui-btn:hover,#app .state-btn-primary:hover,#app .q-btn-primary:hover{background:var(--hb-accent-hover);border-color:var(--hb-accent-hover)}
  .ui-btn-subtle,.state-btn,.q-btn,.filter-chip{min-height:28px;border:1px solid var(--border2);border-radius:var(--hb-r);background:var(--bg2);color:var(--text3);font-weight:600;font-size:13px}
  .ui-btn-subtle:hover,.state-btn:hover,.q-btn:hover,.filter-chip:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
  .ui-btn-danger{min-height:28px;border-radius:var(--hb-r)}
  #app input,#app select,#app textarea,#app .q-input,#app .state-input,#app .state-select,#app .state-note,#app .ir-input,#app .planner-input,#app .mail-search-input{
    min-height:28px;border:1px solid var(--border2);border-radius:var(--hb-r);background:var(--bg2);color:var(--text);font-size:13px
  }
  #app input:focus,#app select:focus,#app textarea:focus,#app .q-input:focus{border-color:var(--hb-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--hb-accent) 18%,transparent);outline:0}
  #app input::placeholder,#app textarea::placeholder{color:var(--faint)}
  #app input[type=checkbox],#app input[type=radio]{min-height:0;accent-color:var(--hb-accent)}
  #app .cr-section{border:1px solid var(--border);border-radius:var(--hb-r-lg);background:var(--bg2);box-shadow:none}
  #app .cr-section-head{border-bottom:1px solid var(--row-border)}
  #app .cr-section-title{font-family:var(--hb-font);font-size:14px;font-weight:650;letter-spacing:-.005em;color:var(--text)}
  #app table th{color:var(--text5);font-size:11px;font-weight:650;letter-spacing:.03em;text-transform:none}
  #app .li-table th{background:var(--bg3);border-bottom:1px solid var(--border)}
  #app .li-table td{border-bottom:1px solid var(--row-border)}
  #app .li-table tr:hover td{background:var(--bg3)}

  /* 5. Page chrome: KPI bar, toolbar ------------------------------------- */
  .kpi-grid,#purpose-row,#wallet-share-row{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr))!important;gap:0!important;margin:0 0 12px!important;padding:0!important;
    border:1px solid var(--border);border-radius:var(--hb-r-lg);background:var(--bg2);overflow:hidden
  }
  #purpose-row{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .kpi-grid:empty,#purpose-row:empty,#wallet-share-row:empty{display:none}
  .kpi-card{min-height:0!important;padding:10px 14px 11px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:inset -1px -1px 0 var(--row-border)!important;display:block}
  .kpi-card:hover{background:var(--bg3)!important}
  .kpi-label{margin:0;color:var(--text5);font-size:11px;font-weight:600;letter-spacing:.01em;text-transform:none}
  .kpi-val{margin:3px 0 0;font-family:var(--hb-font);font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.15;color:var(--text)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
  .kpi-sub{margin-top:1px;color:var(--text5);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kpi-card .sparkbar{display:none}
  .filter-bar{
    min-height:48px;margin:0 0 14px;padding:6px 8px;gap:8px;border:1px solid var(--border);border-radius:var(--hb-r-lg);background:var(--bg2);box-shadow:none
  }
  .filter-bar .filter-label,.kanban-sort-label{display:none}
  .filter-bar #search{width:300px;padding-left:34px;background:var(--bg3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7e86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px 50%}
  .filter-bar select{padding:0 10px}
  .filter-count{min-height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--bg4);color:var(--text3);font-size:12px;font-weight:600;margin-left:auto}
  .deals-view-toolbar{padding:3px;border:0;border-radius:var(--hb-r);background:var(--bg4)}
  .deals-view-btn{min-height:22px;border-radius:8px;color:var(--text4);font-weight:600}
  .deals-view-btn.active{background:var(--bg2);color:var(--hb-accent-ink);box-shadow:0 1px 2px rgba(17,37,45,.12)}
  #app .ui-btn-subtle.focus-toggle,#app #needs-action-toggle{min-height:28px}
  #toggle-closed{min-height:28px!important;border-radius:var(--hb-r)!important}

  /* 6. Pipeline board ---------------------------------------------------- */
  #view-pipeline{--lane:var(--hb-slate)}
  #view-pipeline [data-lc='rfq']{--lane:var(--hb-slate)}
  #view-pipeline [data-lc='quoted']{--lane:var(--hb-accent)}
  #view-pipeline [data-lc='ordered']{--lane:var(--hb-info)}
  #view-pipeline [data-lc='confirmed']{--lane:var(--hb-violet)}
  #view-pipeline [data-lc='to-invoice']{--lane:var(--hb-orange)}
  #view-pipeline [data-lc='closed']{--lane:var(--hb-ok)}
  #view-pipeline .kanban-head-row,#view-pipeline .kanban{gap:8px}
  #view-pipeline .kanban-head-row{margin-bottom:8px}
  #view-pipeline .kanban-head-cell{min-height:0;padding:0;border:0;background:var(--bg)!important}
  #view-pipeline .kanban-head-cell .k-head{
    min-height:54px;padding:9px 26px 9px 20px;display:flex;flex-direction:column;justify-content:center;
    background:color-mix(in srgb,var(--lane) 11%,var(--bg2));
    clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%)
  }
  #view-pipeline .kanban-head-cell:first-child .k-head{padding-left:16px;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%)}
  #view-pipeline .kanban-head-cell .k-head-top{gap:8px}
  #view-pipeline .kanban-stage-dot{display:none}
  #view-pipeline .k-stage-name{font-family:var(--hb-font);font-size:14px;font-weight:700;letter-spacing:-.005em;color:var(--text)}
  #view-pipeline .k-head-sub{margin-top:2px;font-size:12px;font-weight:500;color:var(--text4)}
  #view-pipeline .k-col{padding:8px;border-radius:var(--hb-r-lg);background:color-mix(in srgb,var(--bg4) 55%,transparent)}
  #view-pipeline .k-body{padding:0;gap:8px}
  #view-pipeline .k-empty{padding:18px 8px;border:1px dashed var(--border2);border-radius:var(--hb-r);color:var(--faint);font-size:12px;text-align:center}

  #view-pipeline .k-card{
    position:relative;padding:11px 12px 0;border:1px solid var(--border);border-radius:10px;background:var(--bg2);overflow:hidden;
    box-shadow:0 1px 1px rgba(17,37,45,.04);transition:border-color .12s ease,box-shadow .12s ease
  }
  #view-pipeline .k-card::before{content:none!important}
  #view-pipeline .k-card:hover{border-color:var(--border2);box-shadow:0 4px 14px rgba(17,37,45,.10)}
  #view-pipeline .k-card.sel{border-color:var(--hb-accent);background:var(--bg2);box-shadow:0 0 0 2px color-mix(in srgb,var(--hb-accent) 22%,transparent)}
    #view-pipeline .k-card-head{align-items:flex-start;gap:8px}
  #view-pipeline .k-vessel{margin:0;font-family:var(--hb-font)!important;font-size:14px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text)}
  #view-pipeline .k-company{margin:1px 0 0;font-size:12px;color:var(--text4)}
  #view-pipeline .k-meta-row{margin-top:6px;font-family:var(--hb-font);font-size:11px;font-weight:500;color:var(--text5);letter-spacing:.01em}
  #view-pipeline .deal-activity-arrow{width:22px;height:22px;flex:0 0 22px;box-shadow:none}
  #view-pipeline .k-next{display:block;margin-top:6px;padding:0;border:0;border-radius:0;background:none;font-family:var(--hb-font);font-size:11.5px;font-weight:600;color:var(--text4)}
  #view-pipeline .k-next.overdue,#view-pipeline .k-next.hot{background:none;color:var(--hb-danger)}
  #view-pipeline .k-next.today{background:none;color:var(--hb-ok)}
  #view-pipeline .k-bottom{align-items:center;margin:9px 0 0!important}
  #view-pipeline .k-amount{margin:0;font-family:var(--hb-font);font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
  #view-pipeline .k-stage-age-pill{padding:0;border:0;border-radius:0;background:none;font-family:var(--hb-font);font-size:12px;font-weight:650;color:var(--text4)}
  #view-pipeline .k-stage-age-pill.ok{background:none;color:var(--text5)}
  #view-pipeline .k-stage-age-pill.warn{background:none;color:var(--hb-warn)}
  #view-pipeline .k-stage-age-pill.hot{background:none;color:var(--hb-danger)}
  #view-pipeline .k-task-footer{
    margin:10px -12px 0;padding:8px 12px;border:0;border-top:1px solid var(--row-border);background:var(--bg3);
    display:flex;flex-direction:column;align-items:flex-start;gap:1px;cursor:pointer
  }
  #view-pipeline .k-task-footer:hover{background:var(--bg4)}
  #view-pipeline .k-task-footer span{max-width:100%;min-width:0;font-family:var(--hb-font);font-size:12px;font-weight:600;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #view-pipeline .k-task-footer small{flex:none;margin:0;font-family:var(--hb-font);font-size:11px;font-weight:600;color:var(--text5)}
  #view-pipeline .k-task-footer.hot span,#view-pipeline .k-task-footer.hot small{color:var(--hb-danger)}
  #view-pipeline .k-task-footer.today span,#view-pipeline .k-task-footer.today small{color:var(--hb-ok)}
  #view-pipeline .k-card:not(:has(.k-task-footer)){padding-bottom:11px}
  #view-pipeline .k-shipment-badge{border-radius:999px;font-family:var(--hb-font)}
  #view-pipeline .deal-activity-arrow{background:var(--bg4)!important;border:1px solid var(--border2);color:var(--text4)}
  #view-pipeline .deal-activity-arrow svg{stroke:currentColor}
  #view-pipeline .deal-activity-arrow.past{color:var(--hb-danger);background:var(--hb-danger-soft)!important;border-color:color-mix(in srgb,var(--hb-danger) 35%,transparent)}
  #view-pipeline .deal-activity-arrow.today{color:var(--hb-ok);background:var(--hb-ok-soft)!important;border-color:color-mix(in srgb,var(--hb-ok) 35%,transparent)}
  #view-pipeline .deal-activity-arrow:hover{filter:brightness(.96)}


  /* 7. Deal detail panel — single-column record view ------------------- */
  body:not(.lisa-mobile-active) #detail{
    top:var(--hb-topbar);width:min(700px,calc(100vw - var(--command-sidebar) - 60px));padding:0;background:var(--bg2);
    border-left:1px solid var(--border);box-shadow:-18px 0 44px rgba(17,37,45,.14);overflow-y:auto
  }
  #app.lisa-atlas-shell .content.panel-open{padding-right:calc(min(700px,100vw - var(--command-sidebar) - 60px) + 24px)}
  body:not(.lisa-mobile-active) #detail .d-close,body:not(.lisa-mobile-active) #detail .d-expand{top:14px;border:1px solid var(--border)!important;border-radius:var(--hb-r)!important;background:var(--bg2)!important;color:var(--text3)!important}
  #detail #detail-body{display:flex;flex-direction:column;padding:22px 32px 48px;gap:0}
  #detail #detail-body>style{display:none}
  #detail #detail-body>*{order:20}
  #detail #detail-body>.d-rfq{order:1}
  #detail #detail-body>.d-vessel{order:2}
  #detail #detail-body>.d-pills{order:3}
  #detail #detail-body>.d-top-actions{order:4}
  #detail #detail-body>.d-amount-box{order:5}
  #detail #detail-body>.d-section-card:has(.d-flow-wrap){order:6}
  #detail #detail-body>.d-section-card:has(.d-rows){order:7}
  #detail #detail-body>.d-section-card:has(.timeline-item){order:8}
  #detail #detail-body>.correspondence-section{order:9}
  #detail #detail-body>#detail-heavy-sections{order:30}

  /* header */
  #detail #detail-body .d-rfq{margin:0 44px 4px 0;display:flex;align-items:center;gap:6px;color:var(--text5)!important;font:600 12px var(--hb-font);letter-spacing:.03em}
  #detail #detail-body .d-vessel{margin:0 0 10px;font:700 28px/1.15 var(--hb-font)!important;letter-spacing:-.025em;color:var(--text)!important}
  #detail #detail-body .d-pills{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;padding:0;border:0}
  #detail #detail-body .d-pills>span:not(.pill){margin:0!important;display:inline-flex!important;flex-direction:row!important;align-items:baseline!important;gap:6px!important}
  #detail #detail-body .d-pills>span:not(.pill)>span{font-family:var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;font-size:12px!important;font-weight:600!important}
  #detail #detail-body .d-pills>span:not(.pill)>span:nth-child(1){color:var(--text5)!important;font-weight:500!important}
  #detail #detail-body .d-pills>span:not(.pill)>span:nth-child(2){font-size:14px!important;font-weight:700!important}
  #detail #detail-body .d-top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--border)}
  #detail #detail-body .d-top-actions>button{min-height:28px;padding:0 14px;border:1px solid var(--border2)!important;border-radius:var(--hb-r);background:var(--bg2)!important;color:var(--text2);font:600 13px var(--hb-font)}
  #detail #detail-body .d-top-actions>button:hover{background:var(--bg4)!important}
  #detail #detail-body .d-top-actions>button:nth-of-type(2){border-color:var(--hb-accent)!important;background:var(--hb-accent)!important;color:#fff!important}
  #detail #detail-body .d-top-actions>button:nth-of-type(2):hover{background:var(--hb-accent-hover)!important}
  #detail #detail-body .d-top-actions>button:nth-of-type(3){background:var(--hb-ok-soft)!important;border-color:color-mix(in srgb,var(--hb-ok) 30%,transparent)!important;color:var(--hb-ok)!important;opacity:1}
  #detail #detail-body .d-top-actions>button:nth-of-type(4){background:var(--hb-danger-soft)!important;border-color:color-mix(in srgb,var(--hb-danger) 30%,transparent)!important;color:var(--hb-danger)!important;opacity:1}
  #detail #detail-body .d-top-actions>div{margin-left:auto}

  /* value stat */
  #detail #detail-body .d-amount-box{display:flex;align-items:baseline;gap:10px;margin:0 0 22px;padding:0;border:0!important;background:none!important;box-shadow:none!important;text-align:left}
  #detail #detail-body .d-amount-label{order:-1;margin:0;font:600 12px var(--hb-font)!important;letter-spacing:0;color:var(--text5)!important;text-transform:none}
  #detail #detail-body .d-amount-val{margin:0;font:700 34px/1.1 var(--hb-font)!important;letter-spacing:-.03em;color:var(--text)!important;-webkit-text-fill-color:currentColor}
  #detail #detail-body .d-amount-box>div:last-child{font-size:12px;color:var(--text5)}
  #detail #detail-body .d-amount-box [data-deal-outcome],#detail #detail-body .d-amount-box[data-deal-outcome]{background:none!important}

  /* sections: flat, divided, airy */
  #detail #detail-body .d-section-card{margin:0;padding:20px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}
  #detail #detail-body .d-section-head{margin:0 0 14px;padding:0;border:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
  #detail #detail-body .d-section-title{font:700 11px var(--hb-font)!important;letter-spacing:.07em!important;color:var(--text5)!important;text-transform:uppercase!important}
  #detail #detail-body .d-section-sub{font-size:13px;line-height:1.55;color:var(--text4)}
  #detail #detail-body .d-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
  #detail #detail-body .d-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:0;min-width:0}
  #detail #detail-body .d-row-wide{grid-column:1/-1}
  #detail #detail-body .d-row-label{font:600 11px var(--hb-font)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--text5)!important}
  #detail #detail-body .d-row-val{display:block;max-width:100%;text-align:left!important;font-size:13.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
  #detail #detail-body .timeline-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--row-border);font-size:13px}
  #detail #detail-body .alert-box{margin-top:12px;border-radius:var(--hb-r);font-size:12.5px}
  #detail #detail-body button.ui-btn-subtle{border-radius:var(--hb-r)}
  #detail #detail-body #detail-heavy-sections .d-section-card:first-child{border-top:1px solid var(--border)}

  /* 7b. Panel: Pipedrive/Salesforce-style record layout ------------------ */
  #detail #detail-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-content:start}
  #detail #detail-body>*{grid-column:1/-1}
  #detail #detail-body>.d-rfq{grid-column:1;grid-row:1}
  #detail #detail-body>.d-vessel{grid-column:1;grid-row:2;margin-bottom:8px}
  #detail #detail-body>.d-pills{grid-column:1;grid-row:3}
  #detail #detail-body>.d-amount-box{grid-column:2;grid-row:1/span 3;align-self:end;flex-direction:column;align-items:flex-end;gap:2px;margin:0 0 16px;text-align:right}
  #detail #detail-body>.d-amount-box .d-amount-label{order:-1;font-size:11px!important}
  #detail #detail-body>.d-amount-box .d-amount-val{font-size:30px!important}
  #detail #detail-body>.d-top-actions{grid-row:4;margin-bottom:18px;padding-bottom:0;border:0}
  /* stage path */
  #detail #detail-body>.d-section-card:has(.d-flow-wrap){grid-row:5;padding:0 0 22px;border:0}
  #detail #detail-body>.d-section-card:has(.d-flow-wrap) .d-section-head,#detail #detail-body .d-flow-wrap>div:not(.d-flow-track){display:none}
  #detail #detail-body .d-flow-wrap{margin:0;padding:0;border:0;background:none}
  #detail #detail-body .d-flow-track{display:flex;gap:3px;padding:0;border:0;background:none;box-shadow:none}
  #detail #detail-body .d-flow-step{
    flex:1;min-width:0;height:34px;position:relative;display:flex;align-items:center;justify-content:center;padding:0 10px 0 16px;border:0!important;border-radius:0!important;
    background:var(--bg4)!important;color:var(--text4)!important;box-shadow:none!important;font:600 12px var(--hb-font);
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%)
  }
  #detail #detail-body .d-flow-step:first-child{padding-left:10px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
  #detail #detail-body .d-flow-step svg{display:none}
  #detail #detail-body .d-flow-step::after{content:'';white-space:nowrap}
  #detail #detail-body .d-flow-step:nth-child(1)::after{content:'RFQ'}
  #detail #detail-body .d-flow-step:nth-child(2)::after{content:'Quoted'}
  #detail #detail-body .d-flow-step:nth-child(3)::after{content:'Ordered'}
  #detail #detail-body .d-flow-step:nth-child(4)::after{content:'Confirmed'}
  #detail #detail-body .d-flow-step:nth-child(5)::after{content:'To Invoice'}
  /* Closed remains an internal lifecycle state; WON/LOST is shown elsewhere in the deal panel. */
  #detail #detail-body .d-flow-step:nth-child(6){display:none}
  #detail #detail-body .d-flow-step.done{background:var(--hb-accent-soft)!important;color:var(--hb-accent-ink)!important}
  #detail #detail-body .d-flow-step.active{background:var(--hb-accent)!important;color:#fff!important}
  #detail #detail-body .d-flow-step.clickable:hover:not(.active){filter:brightness(.95)}
  /* order of record sections */
  #detail #detail-body>.d-section-card:has(.timeline-item){order:7;grid-row:auto}
  #detail #detail-body>.d-section-card:has(.d-rows){order:6;grid-row:auto}
  #detail #detail-body>.correspondence-section{order:8;grid-row:auto}
  /* details as a property list */
  #detail #detail-body .d-rows{display:block}
  #detail #detail-body .d-row{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--row-border)}
  #detail #detail-body .d-row:last-child{border-bottom:0}
  #detail #detail-body .d-row-label{font:500 13px var(--hb-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--text5)!important}
  #detail #detail-body .d-row-val{font-size:13px;font-weight:500}
  #detail #detail-body .d-row-val>span:nth-child(2){display:inline!important;margin:0 0 0 8px!important;font-size:11.5px!important;font-weight:500!important}
  /* timeline: calm */
  #detail #detail-body .d-section-card:has(.timeline-item) span[style*="font-size:32px"]{font-size:20px!important;color:var(--text)!important;letter-spacing:-.02em!important}
  #detail #detail-body .d-section-card:has(.timeline-item) div[style*="background:rgba"],
  #detail #detail-body .d-section-card:has(.timeline-item) span[style*="background:rgba"]{background:var(--bg3)!important;border-color:var(--border)!important;color:var(--text3)!important}
  #detail #detail-body .d-section-card:has(.timeline-item) div[style*="border-left"]{border-left-color:var(--border2)!important}
  #detail #detail-body .d-section-card:has(.timeline-item) [style*="color:#f97316"],#detail #detail-body .d-section-card:has(.timeline-item) [style*="color:#3b82f6"]{color:var(--text2)!important}
  #detail #detail-body .d-section-card:has(.timeline-item) [style*="gradient"],#detail #detail-body .d-section-card:has(.timeline-item) [style*="border-left"]{background:var(--bg3)!important;border:1px solid var(--border)!important;border-radius:var(--hb-r)!important}
  #detail #detail-body .alert-box{background:var(--bg3)!important;border:1px solid var(--border)!important;color:var(--text4)!important}
  #detail #detail-body .timeline-item{margin:0!important;padding:7px 0!important;min-height:0}

  /* 8. Deal board — working surface -------------------------------------- */
  /* the summary strips are shown or hidden by the app's own Focus Mode button */
  #app.lisa-atlas-shell .content{padding-top:14px}

  /* toolbar: one tight row, sticky above the stage ribbon */
  #app.lisa-atlas-shell .filter-bar{min-height:0;margin:0 0 10px;padding:0;gap:8px;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0;align-items:center;flex-wrap:nowrap}
  #app.lisa-atlas-shell .filter-bar .filter-group{gap:6px}
  .filter-bar #search{width:210px;min-height:28px;background-color:var(--bg2)}
  #app .filter-bar #needs-action-toggle,#app .filter-bar #focus-toggle,#app .filter-bar #toggle-closed{min-height:28px;font-size:13px}
  .deals-view-toolbar{display:inline-flex;gap:2px;padding:3px;background:var(--bg4);border-radius:var(--hb-r)}
  .deals-view-btn{display:inline-flex;align-items:center;gap:6px;height:22px;min-height:22px;padding:0 10px;font-size:12.5px;font-weight:600}
  #deals-view-kanban::after{content:'Board'}
  #deals-view-pending::after,#deals-view-list::after,#deals-view-forecast::after{content:none}
  #deals-view-list::after{content:'List'}#deals-view-forecast::after{content:'Forecast'}#deals-view-controlmap::after{content:'Map'}
  #deals-view-pending{font-size:12.5px}
  .kanban-sort-wrap{display:inline-flex;align-items:center;gap:6px}
  #kanban-sort-select{min-height:28px;padding:0 28px 0 12px;font-size:13px}
  .filter-count{margin-left:auto;background:none;padding:0;min-height:0;color:var(--text4);font:600 12.5px var(--hb-font)}

  /* stage ribbon */
  #view-pipeline .kanban-head-row{top:var(--kanban-head-top,calc(var(--kanban-sticky-top,58px) - 22px))}
  #view-pipeline .kanban-head-cell .k-head{min-height:46px;padding:7px 24px 7px 20px}
  #view-pipeline .k-stage-name{font-size:13.5px}
  #view-pipeline .k-head-sub{font-size:11.5px;margin-top:1px}

  /* columns & drag feedback (painted by pseudo-elements further down: a column must never change size while a card is dragged over it) */
  #view-pipeline .k-col.k-col-drop-ok .k-body,#view-pipeline .k-col.k-col-drop-denied .k-body{background:transparent!important;outline:0!important;box-shadow:none!important}
  #view-pipeline .k-card[draggable=true]{cursor:grab}

  /* cards: three tight tiers — who / what / next */
  #view-pipeline .k-card{padding:10px 12px 0;border-radius:9px}
  #view-pipeline .k-card-head{margin:0}
  #view-pipeline .k-vessel{font-size:13.5px;line-height:1.25}
  #view-pipeline .k-company{margin:1px 0 0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #view-pipeline .k-card-main{min-width:0}
  #view-pipeline .k-meta-row{margin-top:5px;font-size:11px;color:var(--text5)}
  #view-pipeline .k-next{margin-top:2px;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view-pipeline .k-next.overdue,#view-pipeline .k-next.hot{font-weight:600}
  #view-pipeline .k-bottom{margin:8px 0 0!important}
  #view-pipeline .k-amount{font-size:15px}
  #view-pipeline .k-stage-age-pill{font-size:11.5px}
  #view-pipeline .k-task-footer{margin:9px -12px 0;padding:7px 12px;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 10px}
  #view-pipeline .k-task-footer span{flex:1 1 auto;min-width:0;max-width:100%;font-size:12px;white-space:normal}
  #view-pipeline .k-task-footer small{flex:none;font-size:11px;white-space:nowrap}
  #view-pipeline .k-shipment-badge{margin-top:6px}
  #view-pipeline .k-missing-email-dot{top:10px;right:38px}
  .deals-view-btn{width:auto!important;flex:none;white-space:nowrap}
  .deals-view-toolbar{flex:none}

  /* ribbon spans the full column; chevrons nest into each other */
  #view-pipeline .kanban-head-cell{display:block}
  #view-pipeline .kanban-head-cell .k-head{width:100%;box-sizing:border-box}
  #view-pipeline .kanban-head-cell:not(:first-child) .k-head{margin-left:-13px;width:calc(100% + 13px);padding-left:30px}
  #detail #detail-body .d-flow-track{gap:0}
  #detail #detail-body .d-flow-step:not(:first-child){margin-left:-9px;padding-left:20px}

  #kanban-compact-toggle{display:none!important}
  #app.lisa-atlas-shell .filter-bar>*{flex:none}
  #app.lisa-atlas-shell .filter-bar #filter-extras{display:flex;align-items:center;gap:8px;flex:none}
  #kanban-sort-select{max-width:170px}

  /* toolbar: compact, labels only where they earn their space */
  .filter-bar #search{width:250px}
  .deals-view-btn:not(.active)::after{display:none}
  .deals-view-btn:not(.active):not(#deals-view-pending){padding:0 9px}
  #kanban-sort-select{max-width:none;width:auto}
  #app.lisa-atlas-shell .filter-bar{position:sticky;top:-14px;z-index:320;padding:14px 0 8px;margin:-14px 0 0;background:var(--bg)!important}

  /* Pipedrive-style stage ribbon: one neutral family, joined chevrons, no per-stage tint */
  #view-pipeline .kanban-head-row{gap:0;margin:0 0 10px;padding:0;background:var(--bg)!important}
  #view-pipeline .kanban{gap:8px}
  #view-pipeline .kanban-head-row>.kanban-head-cell{min-width:0}
  #view-pipeline .kanban-head-cell .k-head,
  #view-pipeline .kanban-head-cell:not(:first-child) .k-head{
    min-height:50px;margin-left:0;width:100%;padding:8px 22px 8px 28px;background:#e4eaeb;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
    transition:background .12s ease
  }
  #view-pipeline .kanban-head-cell:first-child .k-head{padding-left:18px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
  #view-pipeline .kanban-head-cell:not(:first-child){margin-left:-2px}
  #view-pipeline .kanban-head-cell .k-head:hover{background:#d7e0e2}
  #view-pipeline .k-stage-name{font-size:13.5px;font-weight:700;color:var(--text)}
  #view-pipeline .k-head-sub{font-size:12px;color:var(--text4)}
  html:not(.light) #view-pipeline .kanban-head-cell .k-head{background:var(--bg4)}
  #view-pipeline .kanban-head-row{gap:8px}
  #view-pipeline .kanban-head-cell:not(:first-child){margin-left:0}
  #view-pipeline .kanban-head-cell .k-head,#view-pipeline .kanban-head-cell:not(:first-child) .k-head{width:calc(100% + 6px)}
  #view-pipeline .kanban-head-cell:last-child .k-head,#view-pipeline .kanban-head-cell:last-child:not(:first-child) .k-head{width:100%}

  /* Compact card: who / client+age / reference+value / signals / next step */
  #view-pipeline .k-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;row-gap:1px;align-items:baseline;padding:10px 12px 0}
  #view-pipeline .k-card-head,#view-pipeline .k-card-main,#view-pipeline .k-bottom{display:contents}
  #view-pipeline .k-vessel{grid-column:1/3;grid-row:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view-pipeline .k-card-head>div:not(.k-card-main){grid-column:3;grid-row:1;align-self:center;display:flex}
  #view-pipeline .k-company{grid-column:1;grid-row:2;margin:0}
  #view-pipeline .k-stage-age-pill{grid-column:2/4;grid-row:2;justify-self:end;margin:0}
  #view-pipeline .k-meta-row{grid-column:1;grid-row:3;margin:6px 0 0;align-self:center;white-space:nowrap}
  #view-pipeline .k-amount{grid-column:2/4;grid-row:3;margin:6px 0 0;text-align:right;font-size:15px;white-space:nowrap}
  #view-pipeline .k-next,#view-pipeline .k-shipment-badge{grid-column:1/-1;margin:3px 0 0;font-size:11px}
  #view-pipeline .k-task-footer{grid-column:1/-1;margin:9px -12px 0}
  #view-pipeline .k-card:not(:has(.k-task-footer)){padding-bottom:10px}
  #view-pipeline .k-body{gap:7px}

  /* 10. Panel: tabs ------------------------------------------------------ */
  #detail #detail-body>.d-section-card:has(.d-flow-wrap){grid-row:5}
  #detail #detail-body>#hb-detail-tabs{grid-column:1/-1;grid-row:6;order:0;position:sticky;top:0;z-index:5;display:flex;gap:22px;margin:0 -32px 8px;padding:0 32px;background:var(--bg2);border-bottom:1px solid var(--border)}
  #hb-detail-tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0;border:0;background:none;color:var(--text4);font:600 13px var(--hb-font);cursor:pointer}
  #hb-detail-tabs button:hover{color:var(--text)}
  #hb-detail-tabs button.is-active{color:var(--hb-accent-ink)}
  #hb-detail-tabs button.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--hb-accent)}
  #hb-detail-tabs em{font:600 11px var(--hb-font);font-style:normal;padding:1px 7px;border-radius:999px;background:var(--bg4);color:var(--text4)}
  #hb-detail-tabs em:empty{display:none}
  #hb-detail-tabs button[data-hb-tab='items'] em:empty{display:inline-block;visibility:hidden;min-width:22px;padding:1px 0}
  #detail #detail-body[data-hb-active='overview'] [data-hb-pane]:not([data-hb-pane='overview']),
  #detail #detail-body[data-hb-active='items'] [data-hb-pane]:not([data-hb-pane='items']),
  #detail #detail-body[data-hb-active='insights'] [data-hb-pane]:not([data-hb-pane='insights']),
  #detail #detail-body[data-hb-active='pylot'] [data-hb-pane]:not([data-hb-pane='pylot']),
  #detail #detail-body[data-hb-active='activity'] [data-hb-pane]:not([data-hb-pane='activity']){display:none!important}
  #detail #detail-body>[data-hb-pane],#detail #detail-body>#detail-heavy-sections{grid-row:auto}
  #view-pipeline .k-meta-row{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #view-pipeline .k-amount{flex:none}
  body:not(.lisa-mobile-active) #detail{z-index:700}
  #app.lisa-atlas-shell .content.panel-open .filter-bar{flex-wrap:wrap;row-gap:6px}
  #app.lisa-atlas-shell .content.panel-open .filter-count{margin-left:0}

  /* 11. Panel — finish: floating sheet, quiet typography, one accent ------ */
  body:not(.lisa-mobile-active) #detail{top:calc(var(--hb-topbar) + 10px);right:12px;bottom:12px;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 64px rgba(17,37,45,.20),0 2px 8px rgba(17,37,45,.08);background:var(--bg2)}
  body:not(.lisa-mobile-active) #detail:not(.open){transform:translateX(calc(100% + 40px))}
  #detail #detail-body{padding:56px 32px 56px}
  #hb-detail-nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 100px 0 32px;pointer-events:none}
  #hb-detail-nav>*{pointer-events:auto}
  .hb-crumb{font:500 12.5px var(--hb-font);color:var(--text5);white-space:pre}
  .hb-step{display:inline-flex;gap:2px}
  .hb-step button{width:28px;height:28px;border:1px solid var(--border);border-radius:7px;background:var(--bg2);color:var(--text3);font:600 13px var(--hb-font);cursor:pointer}
  .hb-step button:hover:not(:disabled){background:var(--bg4);color:var(--text)}
  .hb-step button:disabled{opacity:.35;cursor:default}
  body:not(.lisa-mobile-active) #detail .d-close,body:not(.lisa-mobile-active) #detail .d-expand{top:12px;z-index:7;width:28px;height:28px;border-radius:7px!important}
  body:not(.lisa-mobile-active) #detail .d-close{right:14px}
  body:not(.lisa-mobile-active) #detail .d-expand{right:48px}

  /* header chips and actions */
  #detail #detail-body .d-rfq{font:500 12.5px var(--hb-font);letter-spacing:0;color:var(--text5)!important}
  #detail #detail-body .d-vessel{font:700 26px/1.15 var(--hb-font)!important;letter-spacing:-.025em}
  #detail #detail-body .pill.d-pill-stage{padding:3px 10px;border:0!important;border-radius:999px;background:var(--bg4)!important;color:var(--text2)!important;font:600 12px var(--hb-font)!important;text-transform:none;letter-spacing:0}
  #detail #detail-body .d-pills span[style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:500!important}
  #detail #detail-body .lisa-so-btn{background:var(--bg2)!important;border-color:var(--border2)!important;color:var(--text2)!important}
  #detail #detail-body .lisa-so-btn img{width:14px;height:14px}
  #detail #detail-body .d-top-actions>button{min-height:30px;padding:0 12px;font-size:12.5px}

  /* section typography: sentence case, one scale */
  #detail #detail-body .d-section-title{font:650 14px var(--hb-font)!important;letter-spacing:-.005em!important;color:var(--text)!important;text-transform:none!important}
  #detail #detail-body .d-section-sub{font-size:12.5px;color:var(--text5)}
  #detail #detail-body .d-section-card{padding:22px 0}
  #detail #detail-body .d-section-card [style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:600!important;color:var(--text4)!important}

  /* properties */
  #detail #detail-body .d-row{grid-template-columns:150px minmax(0,1fr);padding:9px 0}
  #detail #detail-body .d-row-label{font:400 13px var(--hb-font)!important;color:var(--text5)!important}
  #detail #detail-body .d-row-val{font:500 13px var(--hb-font)}
  #detail #detail-body [style*="color:var(--blue2)"],#detail #detail-body a{color:var(--hb-accent-ink)!important}

  /* timeline & follow-up: neutral, small, legible */
  #detail #detail-body .tl-val{font-family:var(--hb-font)!important;font-size:13px;font-weight:500;color:var(--text2)!important}
  #detail #detail-body .tl-label{font-size:13px;color:var(--text4)}
  #detail #detail-body .tl-dot{width:7px;height:7px;background:var(--hb-accent)!important}
  #detail #detail-body .d-section-card span[style*="font-size:32px"],#detail #detail-body .d-section-card div[style*="font-size:26px"]{font-size:15px!important;font-weight:650!important;letter-spacing:-.01em!important;color:var(--text)!important}
  #detail #detail-body .d-section-card div[style*="background:rgba("],#detail #detail-body .d-section-card div[style*="background:#f59e0b0d"]{background:var(--bg3)!important;border:1px solid var(--border)!important;border-radius:10px!important}
  #detail #detail-body .d-section-card span[style*="border-radius:999px"]{background:var(--bg4)!important;border:0!important;color:var(--text3)!important;font-weight:600!important}
  #detail #detail-body .d-section-card [style*="color:#f59e0b"],#detail #detail-body .d-section-card [style*="color:#f97316"],#detail #detail-body .d-section-card [style*="color:#3b82f6"]{color:var(--text2)!important}
  #detail #detail-body .d-section-card span[style*="border-radius:999px"][style*="color:#f59e0b"],#detail #detail-body .d-section-card span[style*="border-radius:999px"][style*="color:#f97316"]{color:var(--hb-warn)!important}
  #detail #detail-body button[style*="background:#3b82f6"],#detail #detail-body button[style*="#2563eb"]{background:var(--hb-accent)!important;border-color:var(--hb-accent)!important;color:#fff!important;border-radius:var(--hb-r)!important}
  #detail #detail-body .d-guidance-stack [style*="font-size:18px"]{font-size:15px!important;font-weight:700!important}
  #detail #detail-body input.q-input{height:28px!important;min-height:28px!important;border-radius:var(--hb-r)!important;font-size:13.5px!important}
  #detail #detail-body .d-section-card button.ui-btn-subtle[style*="height:40px"]{height:28px!important;min-height:28px!important;border-radius:var(--hb-r)!important;font-size:12.5px!important}
  body:not(.lisa-mobile-active) #detail .d-close svg,body:not(.lisa-mobile-active) #detail .d-expand svg{width:15px;height:15px}
  body:not(.lisa-mobile-active) #detail .d-close,body:not(.lisa-mobile-active) #detail .d-expand{display:inline-flex;align-items:center;justify-content:center;padding:0}
  #detail #detail-body .d-vessel,#detail #detail-body .d-vessel a{color:var(--text)!important}

  /* 12. Panel — action bar, rhythm, tables ------------------------------- */
  /* actions live in a sticky bar at the bottom of the sheet */
  #detail #detail-body>.d-top-actions{grid-row:auto;order:99;position:sticky;bottom:0;z-index:8;margin:20px -32px -56px;padding:14px 32px;border:0;border-top:1px solid var(--border);background:var(--bg2);box-shadow:0 -10px 24px rgba(17,37,45,.06)}
  #detail #detail-body .d-top-actions #detail-deal-menu{top:auto!important;bottom:calc(100% + 6px)}
  #detail #detail-body>.d-pills{margin-bottom:18px}
  /* sections: spacing, no stacked rules */
  #detail #detail-body .d-section-card[data-hb-pane]{border-top:1px solid var(--border);padding:22px 0}
  #detail #detail-body .d-section-card[data-hb-first],
  #detail #detail-body #detail-heavy-sections .d-section-card[data-hb-first]{border-top:0;padding-top:12px}
  #detail #detail-body .d-section-card:has(.hb-dates){border-top:0}
  #detail #detail-body .d-section-head{margin-bottom:12px}
  #detail #detail-body .d-row-val>span:nth-child(2){display:block!important;margin:2px 0 0!important;font-size:11.5px!important;color:var(--text5)!important}
  #detail #detail-body .d-row{align-items:start}

  /* timeline as a stepper */
  #detail #detail-body .timeline-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 8px 22px;border:0}
  #detail #detail-body .timeline-item .tl-dot{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;box-shadow:0 0 0 3px var(--bg2)}
  #detail #detail-body .timeline-item+.timeline-item::before{content:'';position:absolute;left:3px;top:-50%;height:100%;width:1px;background:var(--border2)}

  /* line items */
  #detail #detail-body .li-wrap{border:1px solid var(--border);border-radius:var(--hb-r-lg);overflow:hidden;background:var(--bg2)}
  #detail #detail-body .li-table{width:100%;border-collapse:collapse}
  #detail #detail-body .li-table thead th{padding:10px 12px;background:var(--bg3);border-bottom:1px solid var(--border);font:600 12px var(--hb-font)!important;color:var(--text4)!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
  #detail #detail-body .li-table td{padding:11px 12px;border-bottom:1px solid var(--row-border);font-size:13px;color:var(--text2)}
  #detail #detail-body .li-table tbody tr:last-child td{border-bottom:0}
  #detail #detail-body .li-table .right{text-align:right;font-variant-numeric:tabular-nums}
  #detail #detail-body .li-partno,#detail #detail-body .li-partno a{color:var(--text)!important;font-weight:600;font-family:var(--hb-font)!important}
  #detail #detail-body .li-discount{color:var(--text4)!important}
  #detail #detail-body .li-total{font-weight:650;color:var(--text)!important}
  #detail #detail-body .li-table td span[style*="background:#22c55e18"]{background:var(--hb-accent-soft)!important;border:0!important;color:var(--hb-accent-ink)!important;border-radius:999px!important;padding:2px 8px!important;font-size:11px!important}
  #detail #detail-body .li-wrap [style*="font-weight:700"][style*="color:#2563eb"],#detail #detail-body .li-wrap tfoot *{color:var(--text)!important}
  #detail #detail-body .li-wrap tfoot td,#detail #detail-body .li-wrap [class*="total"]{font-weight:700}
  #detail #detail-body>.d-pills{grid-row:3/span 2}
  #detail #detail-body .timeline-item{padding-left:22px!important}
  #detail #detail-body{padding-bottom:0}
  #detail #detail-body>.d-top-actions{margin-bottom:0}

  /* 13. Panel — next step as one grouped card; empty states --------------- */
  #detail #detail-body .hb-step-card{margin:0!important;border-radius:0!important;border:1px solid var(--border)!important;border-top-width:0!important;background:var(--bg3)!important}
  #detail #detail-body .hb-step-card[data-hb-pos='first']{border-top-width:1px!important;border-radius:10px 10px 0 0!important;margin-top:4px!important}
  #detail #detail-body .hb-step-card[data-hb-pos='last']{border-radius:0 0 10px 10px!important}
  #detail #detail-body .hb-step-card[data-hb-pos='first']:last-child,#detail #detail-body .hb-step-card[data-hb-pos='first'][data-hb-solo]{border-radius:10px!important}
  #detail #detail-body .hb-step-card>div[style*="gap"]{align-items:center}
  #detail #detail-body .corr-empty{padding:26px 16px;border:1px dashed var(--border2);border-radius:10px;text-align:center;color:var(--text5);font-size:13px}
  #detail #detail-body .d-section-card[data-hb-pane='items']:not(:has(.li-wrap)):not(:has(.d-rows)){padding-bottom:6px}
  #detail #detail-body .d-section-card>div[style*="font-weight:800"][style*="text-transform"]{display:inline}

  /* 14. Panel — new components (key dates, next step, insights) ----------- */
  #detail #detail-body .hb-old{display:none!important}
  #detail #detail-body .hb-block-title{margin:0 0 14px;font:650 14px var(--hb-font);color:var(--text)}
  #detail #detail-body .d-section-card:has(.hb-dates){display:flex;flex-direction:column}
  .hb-dates{order:1;margin-bottom:22px}
  .hb-dates-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none}
  .hb-date{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:24px;min-width:0}
  .hb-date::before{content:'';position:absolute;left:12px;right:-12px;top:6px;height:2px;background:var(--border2)}
  .hb-date:last-child::before{display:none}
  .hb-date.is-done::before{background:var(--hb-accent)}
  .hb-date.is-before-pending::before{background:repeating-linear-gradient(to right,var(--border2) 0 5px,transparent 5px 10px)}
  .hb-date-dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:2px solid var(--border2);box-sizing:border-box;z-index:1}
  .hb-date-gap{position:absolute;top:7px;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 4px;box-sizing:border-box;border:1px solid var(--hb-accent);border-radius:999px;background:var(--bg2);color:var(--hb-accent-ink);font:650 11px var(--hb-font);font-variant-numeric:tabular-nums;white-space:nowrap}
  .hb-date:not(.is-done) .hb-date-gap{border-color:var(--border2);color:var(--text4)}
  .hb-date.is-done .hb-date-dot{background:var(--hb-accent);border-color:var(--hb-accent)}
  .hb-date.is-overdue .hb-date-dot{background:var(--hb-danger);border-color:var(--hb-danger)}
  .hb-date.is-pending .hb-date-dot{background:var(--bg2);border-style:dashed}
  .hb-date.is-planned .hb-date-dot,.hb-date.is-planned-today .hb-date-dot,.hb-date.is-planned-overdue .hb-date-dot{background:var(--bg2);border-color:var(--hb-accent)}
  .hb-date.is-planned-today .hb-date-dot{border-color:var(--hb-warn)}
  .hb-date.is-planned-overdue .hb-date-dot{border-color:var(--hb-danger)}
  .hb-date.is-planned .hb-date-note{color:var(--hb-accent-ink)}
  .hb-date.is-planned-today .hb-date-note{color:var(--hb-warn)}
  .hb-date.is-planned-overdue .hb-date-note{color:var(--hb-danger)}
  .hb-date.is-next .hb-date-dot{border-color:var(--hb-accent);box-shadow:0 0 0 4px var(--hb-accent-soft)}
  .hb-date-label{font:500 12px var(--hb-font);color:var(--text5)}
  .hb-date-value{font:650 13.5px var(--hb-font);color:var(--text);font-variant-numeric:tabular-nums}
  .hb-date-note{font:600 11.5px var(--hb-font);color:var(--text4)}
  .hb-date.is-next .hb-date-label{color:var(--hb-accent-ink);font-weight:650}
  .hb-date.is-next .hb-date-note{color:var(--hb-warn)}
  .hb-date.is-overdue .hb-date-note{color:var(--hb-danger);font-weight:650}
  .hb-date.is-pending .hb-date-value{color:var(--text5);font-weight:550}
  .hb-next{order:2;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);box-shadow:0 1px 2px rgba(17,37,45,.04)}
  .hb-next-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .hb-next-title{font:650 14px var(--hb-font);color:var(--text)}
  .hb-next-chip{padding:2px 10px;border-radius:999px;background:var(--hb-warn-soft);color:var(--hb-warn);font:600 12px var(--hb-font)}
  .hb-next-copy{margin:0;font:400 13px/1.55 var(--hb-font);color:var(--text3)}
  .hb-next-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--row-border)}
  .hb-next-action{min-height:30px;padding:0 14px;border:1px solid var(--hb-accent);border-radius:var(--hb-r);background:var(--hb-accent);color:#fff;font:600 12.5px var(--hb-font);cursor:pointer}
  .hb-next-action:hover{background:var(--hb-accent-hover)}
  .hb-next-action.is-secondary{border-color:var(--border);background:var(--bg2);color:var(--text2)}
  .hb-next-action.is-secondary:hover{background:var(--bg3);color:var(--text)}
  .hb-next-meta{font:500 12px var(--hb-font);color:var(--text5)}
  #detail #detail-body .hb-validity{order:3;display:flex;flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px!important;margin:0!important;padding:0!important}
  #detail #detail-body .hb-validity::before{content:'Quote valid until';font:500 13px var(--hb-font);color:var(--text4)}
  #detail #detail-body .hb-validity>div{margin-left:auto}

  .hb-guidance{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 20px;border:1px solid var(--border);border-radius:12px;background:var(--bg2)}
  .hb-ring{position:relative;flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--hb-accent) calc(var(--pct)*1%),var(--bg4) 0)}
  .hb-ring::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--bg2)}
  .hb-ring-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 19px var(--hb-font);letter-spacing:-.02em;color:var(--text)}
  .hb-guidance-text{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
  .hb-guidance-label{font:650 14px var(--hb-font);color:var(--text)}
  .hb-guidance-copy{margin:0;font:400 13px/1.55 var(--hb-font);color:var(--text3)}
  .hb-guidance-more{align-self:flex-start;padding:0;border:0;background:none;color:var(--hb-accent-ink);font:600 12.5px var(--hb-font);cursor:pointer}
  .hb-guidance-more:hover{text-decoration:underline}
  .hb-guidance>[id^='ds-detail-']{flex-basis:100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--row-border);font-size:12.5px}


  /* 15. Panel — docked action bar, overview order ------------------------- */
  body:not(.lisa-mobile-active) #detail{display:flex;flex-direction:column}
  #detail #detail-body{flex:1 0 auto;width:100%;box-sizing:border-box}
  #detail>.d-top-actions.hb-docked{position:sticky;bottom:0;z-index:8;flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg2);box-shadow:0 -10px 24px rgba(17,37,45,.06);border-radius:0 0 16px 16px}
  #detail>.d-top-actions.hb-docked>button{min-height:30px;padding:0 12px;border:1px solid var(--border2)!important;border-radius:var(--hb-r);background:var(--bg2)!important;color:var(--text2);font:600 12.5px var(--hb-font);opacity:1}
  #detail>.d-top-actions.hb-docked>button:hover{background:var(--bg4)!important}
  #detail>.d-top-actions.hb-docked>button.lisa-so-btn{display:inline-flex;align-items:center;gap:6px}
  #detail>.d-top-actions.hb-docked>button:nth-of-type(2){border-color:var(--hb-accent)!important;background:var(--hb-accent)!important;color:#fff!important}
  #detail>.d-top-actions.hb-docked>button:nth-of-type(2):hover{background:var(--hb-accent-hover)!important}
  #detail>.d-top-actions.hb-docked>button:nth-of-type(3){background:var(--hb-ok-soft)!important;border-color:color-mix(in srgb,var(--hb-ok) 30%,transparent)!important;color:var(--hb-ok)!important}
  #detail>.d-top-actions.hb-docked>button:nth-of-type(4){background:var(--hb-danger-soft)!important;border-color:color-mix(in srgb,var(--hb-danger) 30%,transparent)!important;color:var(--hb-danger)!important}
  #detail>.d-top-actions.hb-docked>div{flex:none;margin-left:0!important;position:relative}
  #detail>.d-top-actions.hb-docked #detail-deal-menu{top:auto!important;bottom:calc(100% + 6px)}
  #detail #detail-body>.d-section-card:has(.timeline-item),#detail #detail-body>.d-section-card[data-hb-enhanced]{order:6}
  #detail #detail-body>.d-section-card:has(.d-rows){order:7}
  body:not(.lisa-mobile-active) #detail>.d-close,body:not(.lisa-mobile-active) #detail>.d-expand{position:absolute!important;top:12px!important;float:none!important;left:auto!important;margin:0!important}
  body:not(.lisa-mobile-active) #detail>.d-close{right:14px!important}
  body:not(.lisa-mobile-active) #detail>.d-expand{right:48px!important}

  #detail .lisa-so-logo{display:inline-block!important;width:16px;height:16px;flex:none}
  #detail>.d-top-actions.hb-docked>button.lisa-so-btn{gap:7px}

  /* 16. Board — let it breathe: no panels inside panels ------------------- */
  #view-pipeline .k-col{padding:0;background:transparent;border:0;border-radius:0}
  /* every column spans the full board height, so the whole stage area is a drop target and the highlight covers it */
  #view-pipeline .kanban{align-items:stretch}
  /* drop feedback: overlays only, no padding, border or size change on the column or its cards */
  #view-pipeline .k-col.k-col-drop-ok,#view-pipeline .k-col.k-col-drop-denied{position:relative;isolation:isolate}
  #view-pipeline .k-col.k-col-drop-ok::before,#view-pipeline .k-col.k-col-drop-denied::before,
  #view-pipeline .k-col.k-col-drop-ok::after,#view-pipeline .k-col.k-col-drop-denied::after{content:'';position:absolute;inset:-6px -5px;border-radius:14px;pointer-events:none}
  #view-pipeline .k-col.k-col-drop-ok::before{z-index:-1;background:var(--hb-accent-soft)}
  #view-pipeline .k-col.k-col-drop-ok::after{z-index:4;border:1.5px dashed var(--hb-accent)}
  #view-pipeline .k-col.k-col-drop-denied::before{z-index:-1;background:var(--hb-danger-soft)}
  #view-pipeline .k-col.k-col-drop-denied::after{z-index:4;border:1.5px dashed var(--hb-danger)}
  #view-pipeline .k-body{gap:10px;padding:2px 0 12px}
  #view-pipeline .k-card{padding:14px 16px 0;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(17,37,45,.05)}
  #view-pipeline .k-card:hover{box-shadow:0 6px 18px rgba(17,37,45,.09);border-color:var(--border2)}
  #view-pipeline .k-card{row-gap:3px}
  #view-pipeline .k-meta-row{margin-top:8px}
  #view-pipeline .k-amount{margin-top:8px}
  #view-pipeline .k-task-footer{margin:12px -16px 0;padding:10px 16px 11px;background:transparent;border-top:1px solid var(--row-border);border-radius:0 0 12px 12px}
  #view-pipeline .k-task-footer:hover{background:var(--bg3)}
  #view-pipeline .k-card:not(:has(.k-task-footer)){padding-bottom:14px}
  #view-pipeline .kanban,#view-pipeline .kanban-head-row{column-gap:14px}

  /* 17. Card state: one signal. Everything else is neutral ---------------- */
  #view-pipeline .k-stage-age-pill,#view-pipeline .k-stage-age-pill.warn,#view-pipeline .k-stage-age-pill.hot,#view-pipeline .k-stage-age-pill.ok{color:var(--text5)!important;font-weight:500}
  #view-pipeline .k-next,#view-pipeline .k-next.overdue,#view-pipeline .k-next.hot,#view-pipeline .k-next.today{color:var(--text5)!important;font-weight:500}
  #view-pipeline .k-meta-row{color:var(--text5)}
  #view-pipeline .k-task-footer span,#view-pipeline .k-task-footer.hot span,#view-pipeline .k-task-footer.today span{color:var(--text)!important;font-weight:600}
  #view-pipeline .k-task-footer small{font-weight:600}
  #view-pipeline .k-task-footer.hot small{color:var(--hb-danger)!important}
  #view-pipeline .k-task-footer.today small{color:var(--hb-ok)!important}
  #view-pipeline .k-task-footer:not(.hot):not(.today) small{color:var(--text5)!important}
  #view-pipeline .k-amount{color:var(--text)}
  #view-pipeline .k-card.sel .k-amount{color:var(--text)!important}

  /* 18. Top bar ------------------------------------------------------------ */
  #app.lisa-atlas-shell .h-right{gap:6px;padding:0 20px 0 300px}
  #hb-global-search{order:-2;display:inline-flex;align-items:center;gap:10px;width:min(360px,28vw);height:28px;min-height:28px;margin-right:auto;padding:0 10px 0 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg3);color:var(--text5);font:500 13px var(--hb-font);cursor:text;text-align:left}
  #hb-global-search:hover{border-color:var(--border2);background:var(--bg2)}
  #hb-global-search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #hb-global-search kbd{padding:1px 6px;border:1px solid var(--border2);border-radius:5px;background:var(--bg2);color:var(--text4);font:600 11px var(--hb-font)}
  #app.lisa-atlas-shell .h-context{left:calc(var(--command-sidebar) + 24px)}
  #app.lisa-atlas-shell .h-month-kpis{display:flex;left:calc(var(--command-sidebar) + 300px + min(360px,28vw) + 16px);right:auto;max-width:calc(100vw - var(--command-sidebar) - 300px - min(360px,28vw) - 460px)}
  #app.lisa-atlas-shell .h-month-kpi{min-width:0;padding:0 14px}
  #app.lisa-atlas-shell .h-month-kpi-label{display:none}
  #app.lisa-atlas-shell .h-month-kpi-value{font-size:14px}
  #app.lisa-atlas-shell .h-right .theme-toggle{font-size:0!important;width:28px;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
  #app.lisa-atlas-shell .h-right .theme-toggle svg,#app.lisa-atlas-shell .h-right .theme-toggle i{width:17px!important;height:17px!important;font-size:17px}
  #app.lisa-atlas-shell .h-right .top-sync-status,#lisa-sync-verify-button{height:28px!important;min-height:28px!important;border-radius:999px!important;font-size:12px!important;font-weight:600!important;border:1px solid var(--border)!important;color:var(--text4)!important;background:var(--bg2)!important}
  #app.lisa-atlas-shell .h-right .top-sync-status::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--hb-ok)}

  /* 19. Sidebar ----------------------------------------------------------- */
  #app.lisa-atlas-shell>header{padding:18px 14px 14px}
  #app.lisa-atlas-shell .h-left{padding-bottom:18px}
  #app.lisa-atlas-shell .brand-logo.compact{height:34px}
  #app.lisa-atlas-shell .sidebar-nav-label{margin:22px 10px 6px;font-size:11px;letter-spacing:.06em;font-weight:600;color:var(--hb-nav-muted);text-transform:none}
  #app.lisa-atlas-shell .h-shortcut,#app.lisa-atlas-shell .h-group{height:36px;min-height:36px;padding:0 14px;border-radius:9px;font-size:13px}
  #app.lisa-atlas-shell .h-group.active,#app.lisa-atlas-shell .h-shortcut.active{background:rgba(255,255,255,.09);color:#fff}
  #app.lisa-atlas-shell .h-group.active::after,#app.lisa-atlas-shell .h-shortcut.active::before{left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--hb-nav-hi)}
  #app.lisa-atlas-shell .sidebar-footer{padding-top:14px}
  @media (max-width:1699px){
    #app.lisa-atlas-shell .h-right{padding-left:190px}
    #hb-global-search{width:230px}
    #hb-global-search kbd{display:none}
    #app.lisa-atlas-shell .h-month-kpis{left:calc(var(--command-sidebar) + 190px + 230px + 14px);max-width:230px}
    #app.lisa-atlas-shell .h-month-kpi{padding:0 10px}
    #app.lisa-atlas-shell .h-month-kpi-value{font-size:13px}
  }

  /* page title in top bar: tighter, aligned with search */
  #app.lisa-atlas-shell .h-view-chip{font-size:18px;font-weight:650;letter-spacing:-.02em}
  #detail #detail-body input.q-input,#detail #detail-body .hb-validity button{background:var(--bg2)!important;color:var(--text)!important;border-color:var(--border2)!important}
  #detail>.d-top-actions.hb-docked>button.lisa-so-btn{color:var(--text2)!important}
  #detail>.d-top-actions.hb-docked>button.lisa-so-btn.lisa-so-missing-link{border-color:color-mix(in srgb,var(--hb-danger) 40%,var(--border2))!important}

  /* 20. Polish pass: avatars, hierarchy, motion, scrollbars, skeletons ----- */
  .hb-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;
    background:hsl(var(--hue) 55% 93%);color:hsl(var(--hue) 55% 28%);font:650 11.5px var(--hb-font);letter-spacing:.02em;user-select:none}
  html:not(.light) .hb-av{background:hsl(var(--hue) 35% 22%);color:hsl(var(--hue) 70% 82%)}

  /* card grid with avatar */
  #view-pipeline .k-card{grid-template-columns:32px minmax(0,1fr) auto auto;column-gap:10px;row-gap:2px}
  #view-pipeline .k-card-head>.hb-av{grid-column:1;grid-row:1/span 2;align-self:start;margin-top:1px}
  #view-pipeline .k-vessel{grid-column:2/4;grid-row:1}
  #view-pipeline .k-card-head>div:not(.k-card-main){grid-column:4;grid-row:1}
  #view-pipeline .k-company{grid-column:2;grid-row:2;font-size:12px}
  #view-pipeline .k-stage-age-pill{grid-column:3/5;grid-row:2}
  #view-pipeline .k-meta-row{grid-column:1/4;grid-row:3;margin-top:10px}
  #view-pipeline .k-amount{grid-column:3/5;grid-row:3;margin-top:10px;font-size:15.5px;letter-spacing:-.025em}
  #view-pipeline .k-next,#view-pipeline .k-shipment-badge{grid-column:1/-1}
  #view-pipeline .k-vessel{font-size:13.5px;font-weight:650;letter-spacing:-.012em;text-transform:none}
  #view-pipeline .k-card{transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
  #view-pipeline .k-card:hover{transform:translateY(-1px)}
  #view-pipeline .k-card:active{transform:none}
  #view-pipeline .k-card.sel{border-color:var(--hb-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--hb-accent) 16%,transparent),0 6px 18px rgba(17,37,45,.09)}
  #view-pipeline .k-card[draggable=true]:active{cursor:grabbing;box-shadow:0 14px 32px rgba(17,37,45,.18);transform:rotate(-.6deg)}
  #view-pipeline .k-meta-row{font-variant-numeric:tabular-nums}

  /* stage ribbon: counts as a chip */
  #view-pipeline .k-head-sub{display:flex;align-items:center;gap:8px}
  #view-pipeline .k-stage-name{font-size:13.5px;letter-spacing:-.01em}

  /* scrollbars */
  *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text5) 38%,transparent) transparent}
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text5) 34%,transparent);border-radius:999px;border:3px solid transparent;background-clip:content-box}
  *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text5) 55%,transparent);border:3px solid transparent;background-clip:content-box}
  *::-webkit-scrollbar-track{background:transparent}

  /* focus */
  #app :is(button,a,input,select,textarea,[role=button]):focus-visible{outline:2px solid var(--hb-accent);outline-offset:2px;border-radius:8px}

  /* panel header */
  #detail #detail-body .d-rfq{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  #detail #detail-body .d-rfq .hb-av{width:28px;height:28px;border-radius:8px;font-size:10.5px}
  #detail #detail-body .hb-rfq-customer{font:600 13px var(--hb-font);color:var(--text2)}
  #detail #detail-body .hb-rfq-customer::after{content:'/';margin-left:10px;color:var(--border2)}
  #detail #detail-body .d-vessel{font-size:28px;letter-spacing:-.03em}
  #detail #detail-body .d-amount-val{font-size:32px;letter-spacing:-.035em}
  #detail #detail-body>.d-amount-box::before{content:'';display:block}

  /* tabs: animated underline feel + sticky shadow */
  #hb-detail-tabs{box-shadow:0 1px 0 var(--border)}
  #hb-detail-tabs button{transition:color .15s ease}
  #hb-detail-tabs button::after{transition:transform .2s ease;transform-origin:left}
  #hb-detail-tabs button:not(.is-active)::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--hb-accent);transform:scaleX(0)}

  /* loading state: skeleton instead of plain text */
  #detail #detail-body #detail-heavy-sections>.d-section-card:only-child:not([data-hb-pane]){position:relative;min-height:130px;color:transparent;overflow:hidden;border:0}
  #detail #detail-body #detail-heavy-sections>.d-section-card:only-child:not([data-hb-pane])>*{opacity:0}
  #detail #detail-body #detail-heavy-sections>.d-section-card:only-child:not([data-hb-pane])::before{content:'';position:absolute;inset:22px 0 auto 0;height:86px;border-radius:10px;
    background:linear-gradient(90deg,var(--bg4) 0%,var(--bg3) 40%,var(--bg4) 80%);background-size:200% 100%;animation:hb-shimmer 1.2s linear infinite}
  @keyframes hb-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

  /* toasts and menus */
  .toast{border-radius:12px!important;border:1px solid var(--border)!important;box-shadow:var(--hb-shadow-pop)!important;font-family:var(--hb-font)}
  #detail-deal-menu{border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:var(--hb-shadow-pop)!important;padding:4px}
  #detail-deal-menu button{border-radius:8px!important}
  #view-pipeline .k-card{grid-template-columns:28px minmax(0,1fr) auto auto;column-gap:9px;padding-left:14px;padding-right:14px}
  #view-pipeline .k-card .hb-av{width:28px;height:28px;border-radius:8px;font-size:10.5px}
  #view-pipeline .k-task-footer{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  #view-pipeline .k-vessel,#view-pipeline .k-company{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
  #detail #detail-body .hb-rfq-customer::after{content:none}
  #detail #detail-body .hb-rfq-customer{order:-1}
  #view-pipeline .k-meta-row{padding-right:8px}

  /* avatars removed by request: restore the plain two-column card */
  .hb-av{display:none!important}
  #view-pipeline .k-card{grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}
  #view-pipeline .k-vessel{grid-column:1/3;grid-row:1}
  #view-pipeline .k-card-head>div:not(.k-card-main){grid-column:3;grid-row:1}
  #view-pipeline .k-company{grid-column:1;grid-row:2}
  #view-pipeline .k-stage-age-pill{grid-column:2/4;grid-row:2}
  #view-pipeline .k-meta-row{grid-column:1;grid-row:3}
  #view-pipeline .k-amount{grid-column:2/4;grid-row:3}

  /* 21. From the Pipedrive deal page: days-in-stage on the path, foldable sections */
  #detail #detail-body .d-flow-step.active[data-hb-text]::after{content:attr(data-hb-text)}
  #detail #detail-body .d-section-head[data-hb-fold]{cursor:pointer;user-select:none}
  #detail #detail-body .d-section-head[data-hb-fold] .d-section-title::before{content:'';display:inline-block;width:7px;height:7px;margin:0 10px 2px 2px;border-right:2px solid var(--text5);border-bottom:2px solid var(--text5);transform:rotate(45deg);transition:transform .15s ease}
  #detail #detail-body .hb-folded>.d-section-head .d-section-title::before{transform:rotate(-45deg)}
  #detail #detail-body .hb-folded>:not(.d-section-head){display:none!important}
  #detail #detail-body .hb-folded{padding-bottom:18px}
  #detail #detail-body .hb-folded>.d-section-head{margin-bottom:0}

  /* 22. Efficiency: sticky panel header, overdue cards, keyboard focus ---- */
  #hb-detail-nav{position:sticky;top:0;flex:none;height:52px;margin:0;padding:0 100px 0 32px;background:var(--bg2);z-index:9;border-radius:16px 16px 0 0;transition:box-shadow .15s ease}
  #detail.hb-scrolled #hb-detail-nav{box-shadow:0 1px 0 var(--border),0 8px 16px rgba(17,37,45,.05)}
  #detail #detail-body{padding-top:4px}
  #detail #detail-body>#hb-detail-tabs{top:52px}
  .hb-compact{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(6px);opacity:0;pointer-events:none;font:650 14px var(--hb-font);color:var(--text);white-space:nowrap;transition:opacity .15s ease,transform .15s ease}
  #detail.hb-scrolled .hb-compact{opacity:1;transform:translate(-50%,-50%)}
  #detail.hb-scrolled .hb-crumb{opacity:0}
  .hb-crumb{transition:opacity .15s ease}
  body:not(.lisa-mobile-active) #detail>.d-close,body:not(.lisa-mobile-active) #detail>.d-expand{z-index:10}

  /* every card stays white; the filled activity circle (below) says what is due */
  body:not(.lisa-mobile-active) #detail>.d-close,body:not(.lisa-mobile-active) #detail>.d-expand{position:fixed!important}
  body:not(.lisa-mobile-active) #detail.open>.d-close{top:12px!important;right:14px!important}
  body:not(.lisa-mobile-active) #detail.open>.d-expand{top:12px!important;right:48px!important}

  /* 23. Density: the board shows ~2x more deals per screen ----------------- */
  #view-pipeline .k-next{display:none}
  #view-pipeline .k-card{padding-top:12px;row-gap:1px}
  #view-pipeline .k-meta-row{margin-top:6px}
  #view-pipeline .k-amount{margin-top:6px;font-size:14.5px}
  #view-pipeline .k-task-footer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;padding-bottom:9px}
  #view-pipeline .k-task-footer span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
  #view-pipeline .k-task-footer small{flex:none;white-space:nowrap;font-size:11.5px}
  #view-pipeline .k-shipment-badge{margin-top:4px}
  #view-pipeline .k-body{gap:8px}

  /* activity circles: heavier ring and arrow */
  #view-pipeline .deal-activity-arrow{border-width:2px;width:24px;height:24px;flex-basis:24px}
  #view-pipeline .deal-activity-arrow svg,#view-pipeline .deal-activity-arrow i{stroke-width:3.2!important;width:13px;height:13px}
  /* due today = solid green, overdue = solid red, with a white arrow; later stays a grey ring */
  #view-pipeline .deal-activity-arrow.today{background:#22c55e!important;border-color:#22c55e;color:#fff}
  #view-pipeline .deal-activity-arrow.past{background:#ef4444!important;border-color:#ef4444;color:#fff}

  /* top bar fixes */
  #app.lisa-atlas-shell .h-month-kpi{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
  #app.lisa-atlas-shell .h-month-kpi-trend{position:static!important;display:inline-flex;align-items:center;margin:0;font-size:10.5px}
  #app.lisa-atlas-shell .h-month-kpis{overflow:visible;max-width:none}
  #app.lisa-atlas-shell .h-right{padding-left:215px}
  #hb-global-search{width:210px}
  @media (max-width:1699px){#app.lisa-atlas-shell .h-month-kpis{left:calc(var(--command-sidebar) + 215px + 210px + 14px)}}
  /* narrow desktop windows: the month figures give way before they collide with the actions */
  @media (max-width:1379px){#app.lisa-atlas-shell .h-month-kpis{display:none}}
  /* The search grows into the free space of the top bar (210 to 440 px) and the month figures follow it.
     1108 px = title 215 + gaps 56 + month figures 260 + right-hand actions 577. */
  #app.lisa-atlas-shell{--hb-search-w:clamp(210px,calc(100vw - var(--command-sidebar) - 1108px),440px)}
  #hb-global-search{width:var(--hb-search-w)}
  #app.lisa-atlas-shell .h-month-kpis{left:calc(var(--command-sidebar) + 215px + var(--hb-search-w) + 24px)}
  /* They need sidebar + 1310 px; with the full sidebar that is 1534 px, so below it they give way
     instead of sliding under New Quote (they overlapped it from 1380 to 1533 px). */
  @media (max-width:1533px){#app.lisa-atlas-shell:not(.sidebar-collapsed) .h-month-kpis{display:none}}
  /* Without the month figures the search takes their room too: 816 px = title 215 + gap 24 + actions 577. */
  @media (max-width:1533px){#app.lisa-atlas-shell:not(.sidebar-collapsed){--hb-search-w:clamp(210px,calc(100vw - var(--command-sidebar) - 816px),440px)}}
  @media (max-width:1379px){#app.lisa-atlas-shell{--hb-search-w:clamp(210px,calc(100vw - var(--command-sidebar) - 816px),440px)}}
  @media (max-width:1379px){#app.lisa-atlas-shell .filter-bar{flex-wrap:wrap;row-gap:6px}#app.lisa-atlas-shell .filter-count{margin-left:0}}
  #app.lisa-atlas-shell .h-context{max-width:200px}
  #app.lisa-atlas-shell .h-view-chip{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 25. Navigation by workflow ---------------------------------------------- */
  #app.lisa-atlas-shell .h-groups,#app.lisa-atlas-shell .h-tabs{display:none!important}
  #app.lisa-atlas-shell .h-nav{display:block;flex:1;min-height:0;padding:14px 0 0;overflow-y:auto;overflow-x:hidden}
  #hb-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:12px}
  .hb-nav-section{display:flex;flex-direction:column}
  .hb-nav-head{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;margin-top:10px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--hb-nav-muted);font:600 11.5px var(--hb-font);letter-spacing:.02em;cursor:pointer;text-align:left}
  .hb-nav-section:first-child .hb-nav-head{margin-top:0}
  .hb-nav-head:hover{color:#fff}
  .hb-nav-head svg{transition:transform .15s ease;opacity:.8}
  .hb-nav-section:not(.is-open) .hb-nav-head svg{transform:rotate(-90deg)}
  .hb-nav-section.has-active:not(.is-open) .hb-nav-head{color:var(--hb-nav-hi)}
  .hb-nav-list{display:none;flex-direction:column;gap:1px}
  .hb-nav-section.is-open .hb-nav-list{display:flex}
  .hb-nav-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--hb-nav-text);font:500 13.5px var(--hb-font);cursor:pointer;text-align:left;transition:background .12s ease,color .12s ease}
  .hb-nav-item svg{width:17px;height:17px;flex:none;stroke-width:1.9;opacity:.9}
  .hb-nav-item:hover{background:var(--hb-nav-2);color:#fff}
  .hb-nav-item.is-active{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
  .hb-nav-item.is-active::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--hb-nav-hi)}
  .hb-nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hb-nav-badge{flex:none;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--hb-nav-hi);color:#08262a;font:700 11px/18px var(--hb-font);text-align:center}
  /* collapsed rail: icons only */
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-head{height:1px;margin:10px 14px;padding:0;overflow:hidden;background:var(--hb-nav-line);font-size:0;pointer-events:none}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-head svg{display:none}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-section:first-child .hb-nav-head{display:none}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-list{display:flex}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-section:not(.is-open) .hb-nav-list{display:none}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-item{justify-content:center;padding:0;width:44px;margin:0 auto}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-label{display:none}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 3px;font-size:9px;line-height:14px}
  #app.lisa-atlas-shell.sidebar-collapsed .hb-nav-item.is-active::before{left:-10px}
  #view-pipeline .k-task-footer{gap:8px}
  #view-pipeline .k-task-footer span{font-size:11.5px}
  #view-pipeline .k-task-footer small{font-size:11px}

  /* stability: reserve scrollbar space, move the board smoothly when the panel opens */
  body:not(.lisa-mobile-active) #detail{scrollbar-gutter:stable}
  #app.lisa-atlas-shell .content{transition:padding-right .25s cubic-bezier(.4,0,.2,1)}
}