:root{
  --ub-navy:#0d1f33;
  --ub-navy2:#14395c;
  --ub-blue:#0096d6;
  --ub-blue2:#00aaee;
  --ub-border:#d0dce8;
  --ub-muted:#6b8caa;
  --ub-bg:#f4f7fa;
  --ub-ok:#16a34a;
  --ub-warn:#b45309;
  --ub-shadow:0 6px 24px rgba(13,31,51,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ub-bg);color:var(--ub-navy);font-family:'Barlow',sans-serif}
button,input,select,textarea,table{font-family:'Barlow',sans-serif}

/* Phase 1B: tighten the hero vertically, use more horizontal space, and
   visually integrate the top navigation with the stronger hero blue. */
.stf-topbar{
  background:var(--ub-navy2)!important;
  border-bottom-color:rgba(0,150,214,.24)!important;
}
.stf-hero{
  padding:22px 42px 24px!important;
}
.stf-hero-inner{
  max-width:1360px!important;
}
.stf-hero .stf-hero-logo{
  width:162px!important;
  height:52px!important;
  object-fit:cover;
  object-position:center;
  flex:0 0 162px;
}
.stf-eyebrow{
  margin-bottom:10px!important;
}
.stf-hero .stf-hero-title-row{
  gap:20px!important;
}
.stf-hero .stf-hero-title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:clamp(34px,4.8vw,58px)!important;
  line-height:.95!important;
  margin-bottom:8px!important;
}
.stf-hero .stf-hero-sub{
  max-width:760px!important;
  font-family:'Barlow',sans-serif;
  font-size:15px!important;
  line-height:1.45!important;
}

.ub-main{max-width:1660px;margin:0 auto;padding:26px 36px 64px}
.ub-toolbar,.ub-controls,.panel-head,.control-row,.ub-actions{display:flex;align-items:center}
.ub-toolbar{justify-content:space-between;gap:20px;margin-bottom:18px}
.ub-toolbar h1,.ub-panel h2,.modal-card h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:-.01em;color:var(--ub-navy)}
.ub-toolbar h1,.ub-panel h2{margin:3px 0 4px}
.ub-toolbar h1{font-size:31px;line-height:1.05}
.ub-panel h2{font-size:22px;line-height:1.08}
.ub-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--ub-blue)}
.ub-muted{color:var(--ub-muted);font-size:13px;line-height:1.45}
.ub-muted.small{font-size:12px;margin-top:6px}
.ub-actions{gap:10px}
.ub-btn{border:0;border-radius:10px;background:var(--ub-blue);color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;padding:11px 16px;cursor:pointer;transition:.18s ease;box-shadow:0 4px 12px rgba(0,150,214,.12)}
.ub-btn:hover{background:#0088c2;transform:translateY(-1px)}
.ub-btn.secondary{background:#fff;color:var(--ub-navy);border:1px solid var(--ub-border);box-shadow:none}
.ub-btn.secondary:hover{border-color:rgba(0,150,214,.5);color:var(--ub-blue);background:#fbfdff}
.ub-btn.small{padding:9px 12px}
.ub-btn.wide{width:100%;margin-top:16px}
.ub-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.ub-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.ub-status{background:#fff;border:1px solid var(--ub-border);border-radius:13px;padding:13px 15px;display:flex;gap:10px;align-items:center;box-shadow:0 2px 10px rgba(13,31,51,.025)}
.ub-status div{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:13px}
.ub-status b{font-weight:800}
.ub-status span:last-child{color:var(--ub-muted)}
.dot{width:10px;height:10px;border-radius:50%;background:#aab8c4}.dot.ok{background:var(--ub-ok)}.dot.bad{background:#d45252}.dot.checking{animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.35}}

.ub-controls{background:#fff;border:1px solid var(--ub-border);border-radius:14px;padding:16px 18px;justify-content:space-between;gap:24px;margin-bottom:18px;box-shadow:0 2px 10px rgba(13,31,51,.025)}
.ub-controls .control-group:first-child{flex:1 1 auto;min-width:0}
.control-group label,.modal-card label{display:block;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--ub-navy);margin-bottom:6px}
.control-row{gap:8px}
.control-group.right{margin-left:auto;display:flex;align-items:flex-end;justify-content:flex-end;min-width:310px;flex:0 0 310px}
.control-group.right .ub-btn{min-width:250px}
.ub-controls select,.ub-controls input,.modal-card input,.modal-card select,.modal-card textarea{border:1px solid var(--ub-border);border-radius:9px;padding:10px 11px;background:#fff;font:inherit;color:var(--ub-navy);outline:none;transition:.15s ease}
.ub-controls select:focus,.ub-controls input:focus,.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:var(--ub-blue);box-shadow:0 0 0 3px rgba(0,150,214,.10)}
.ub-controls input{width:105px}

.ub-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:18px}
.ub-metrics article{background:#fff;border:1px solid var(--ub-border);border-radius:14px;padding:18px;min-height:116px;box-shadow:var(--ub-shadow)}
.ub-metrics span{font-size:11px;font-weight:800;color:var(--ub-muted);text-transform:uppercase;letter-spacing:.08em}
.ub-metrics strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:31px;line-height:1;font-weight:800;color:var(--ub-navy);margin:11px 0 8px}
.ub-metrics small{color:var(--ub-muted);font-size:12px;line-height:1.35}

.ub-panel{background:#fff;border:1px solid var(--ub-border);border-radius:16px;padding:19px;margin-bottom:18px;box-shadow:var(--ub-shadow)}
.panel-head{justify-content:space-between;margin-bottom:13px}
.badge{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.badge.progress{background:rgba(37,99,235,.1);color:#2563eb;border:1px solid rgba(37,99,235,.22)}
.badge.active{background:rgba(22,163,74,.1);color:#168247;border:1px solid rgba(22,163,74,.18)}
.table-wrap{overflow:auto;border:1px solid #e1eaf2;border-radius:11px}
.table-wrap.compact{max-height:390px}
table{border-collapse:collapse;width:100%;font-size:13px}
th{background:#f4f8fb;color:#5a7187;text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:11px 12px;position:sticky;top:0}
td{padding:11px 12px;border-top:1px solid #edf2f6;color:#20364a}
.num{text-align:right;white-space:nowrap}.empty{text-align:center;color:var(--ub-muted);padding:24px!important}

.ub-two-col{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px}
.bucket-list{display:grid;gap:10px}.bucket-row{display:grid;grid-template-columns:70px 1fr 120px;align-items:center;gap:12px}.bucket-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;color:var(--ub-navy)}.bucket-track{height:9px;background:#edf3f7;border-radius:999px;overflow:hidden}.bucket-fill{height:100%;background:linear-gradient(90deg,var(--ub-blue),var(--ub-blue2));border-radius:999px}.bucket-value{text-align:right;font-weight:700;color:#29465f}.ub-note{font-size:12px;color:var(--ub-muted);line-height:1.5;margin:12px 2px 0}.review-row td{background:#fffaf0}

.ub-modal{position:fixed;z-index:9999;inset:0;background:rgba(9,25,42,.58);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.ub-modal.hidden{display:none}.modal-card{position:relative;background:#fff;border-radius:18px;width:min(560px,96vw);padding:27px;box-shadow:0 24px 70px rgba(0,0,0,.25);border:1px solid rgba(208,220,232,.8)}
.modal-card h2{margin:4px 0 20px;font-size:29px;line-height:1}
.modal-card label{margin-top:12px}.modal-card input,.modal-card select,.modal-card textarea{width:100%}.modal-card .close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-family:'Barlow',sans-serif;font-size:28px;color:#6f879d;cursor:pointer}.revenue-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.progress-text{font-size:12px;color:var(--ub-muted);margin-top:10px;text-align:center}
.toast{position:fixed;right:24px;bottom:24px;background:var(--ub-navy);color:#fff;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:10000;max-width:440px;font-weight:700}.toast.show{opacity:1;transform:none}.toast.error{background:#9d3030}

@media(max-width:1280px){
  .ub-main{max-width:1540px;padding:24px 24px 56px}
}
@media(max-width:1100px){.ub-metrics{grid-template-columns:repeat(2,1fr)}.ub-status-grid{grid-template-columns:1fr}.ub-two-col{grid-template-columns:1fr}.control-group.right{min-width:0;flex:0 1 auto}.control-group.right .ub-btn{min-width:220px}}
@media(max-width:700px){
  .stf-topbar{background:var(--ub-navy2)!important}
  .stf-hero{padding:26px 18px 24px!important}
  .stf-hero-inner{max-width:none!important}
  .stf-eyebrow{margin-bottom:8px!important}
  .stf-hero .stf-hero-title-row{gap:16px!important;align-items:center}
  .stf-hero .stf-hero-logo{width:118px!important;height:42px!important;flex-basis:118px}
  .stf-hero .stf-hero-title{font-size:clamp(32px,10vw,44px)!important;margin-bottom:6px!important}
  .stf-hero .stf-hero-sub{font-size:14px!important;line-height:1.4!important;max-width:none!important}
  .ub-main{padding:20px 14px 44px}.ub-toolbar,.ub-controls{align-items:stretch;flex-direction:column}.control-group.right{margin-left:0;min-width:0;flex:unset}.control-group.right .ub-btn{width:100%;min-width:0}.ub-metrics{grid-template-columns:1fr}.control-row{flex-wrap:wrap}.ub-toolbar h1{font-size:26px}.ub-panel h2{font-size:20px}
}


/* Phase 1C - visual correction based on production review.
   Reset default heading/paragraph margins inside the shared hero, which were
   keeping the title area much taller than intended. Expand the dashboard to
   the viewport and match the top bar to the darkest hero tone. */
.stf-topbar{
  background:#0d1f33!important;
  border-bottom-color:rgba(0,150,214,.20)!important;
}
.stf-hero{
  padding:14px 0 16px!important;
  min-height:0!important;
}
.stf-hero-inner{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:0 clamp(28px,3vw,56px)!important;
}
.stf-eyebrow{
  margin:0 0 5px!important;
}
.stf-hero .stf-hero-title-row{
  gap:18px!important;
  align-items:center!important;
}
.stf-hero .stf-hero-logo{
  width:158px!important;
  height:auto!important;
  object-fit:contain!important;
  flex:0 0 158px!important;
}
.stf-hero .stf-hero-title{
  font-family:'Barlow Condensed',sans-serif!important;
  font-weight:800!important;
  font-size:clamp(34px,4vw,52px)!important;
  line-height:.92!important;
  margin:0 0 5px!important;
}
.stf-hero .stf-hero-sub{
  max-width:760px!important;
  font-family:'Barlow',sans-serif!important;
  font-size:14px!important;
  line-height:1.35!important;
  margin:0!important;
}
.ub-main{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:24px clamp(28px,3vw,56px) 64px!important;
}
@media(max-width:700px){
  .stf-hero{padding:16px 0 17px!important}
  .stf-hero-inner{padding:0 16px!important}
  .stf-hero .stf-hero-logo{width:122px!important;flex-basis:122px!important}
  .stf-hero .stf-hero-title{font-size:clamp(30px,10vw,42px)!important}
  .stf-hero .stf-hero-sub{font-size:13px!important}
  .ub-main{padding:18px 14px 44px!important}
}


/* Phase 1D - hero gradient direction correction.
   Darkest blue at the top, transitioning vertically to the lighter hero blue
   at the bottom, per production visual review. */
.stf-hero{
  background:linear-gradient(180deg,#0d1f33 0%,#14395c 100%)!important;
}


/* Phase 2 - snapshot history + change analysis */
.ub-history-panel{padding:20px}
.ub-history-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ub-history-controls>div{display:flex;flex-direction:column;gap:6px;min-width:220px}
.ub-history-controls label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ub-muted)}
.ub-history-controls select{border:1px solid var(--ub-border);border-radius:9px;padding:10px 11px;background:#fff;font:inherit;color:var(--ub-navy);min-width:220px}
.ub-history-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ub-history-metrics article{background:#f8fbfd;border:1px solid #dce7f0;border-radius:13px;padding:15px 16px;min-height:98px}
.ub-history-metrics span{font-size:10px;font-weight:800;color:var(--ub-muted);text-transform:uppercase;letter-spacing:.08em}
.ub-history-metrics strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:27px;line-height:1;font-weight:800;color:var(--ub-navy);margin:10px 0 7px}
.ub-history-metrics small{font-size:11px;color:var(--ub-muted)}
.ub-history-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.ub-subhead{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:var(--ub-navy);margin:2px 0 9px}
.project-subhead{margin-top:18px}
.history-table{max-height:310px}
.project-change-wrap{max-height:360px}
.delta-positive{color:#a14b00;font-weight:800}
.delta-negative{color:#16704e;font-weight:800}
.delta-neutral{color:var(--ub-muted);font-weight:700}
.status-pill{display:inline-block;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.status-pill.new{background:#e3f5eb;color:#14724a}.status-pill.removed{background:#fde9e7;color:#a93b32}.status-pill.changed{background:#fff3d8;color:#936000}
.history-current td{background:#eef8fc}
@media(max-width:1100px){.ub-history-metrics{grid-template-columns:repeat(2,1fr)}.ub-history-grid{grid-template-columns:1fr}}
@media(max-width:700px){.ub-history-controls{align-items:stretch}.ub-history-controls>div,.ub-history-controls select{min-width:0;width:100%}.ub-history-controls .ub-btn{width:100%}.ub-history-metrics{grid-template-columns:1fr}}

/* Phase 2 Complete Interactive - tables/charts/downloads */
.panel-head-wrap{gap:16px;flex-wrap:wrap}
.panel-actions,.mini-actions,.subhead-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel-actions{justify-content:flex-end}
.subhead-row{justify-content:space-between;margin-bottom:9px}
.subhead-row .ub-subhead{margin:0}
.view-toggle{display:inline-flex;border:1px solid var(--ub-border);background:#f7fafc;border-radius:9px;padding:2px}
.view-toggle button{border:0;background:transparent;color:#58728a;font:inherit;font-size:11px;font-weight:800;padding:7px 10px;border-radius:7px;cursor:pointer}
.view-toggle button.active{background:#fff;color:var(--ub-blue);box-shadow:0 1px 5px rgba(13,31,51,.10)}
.icon-btn{border:1px solid var(--ub-border);background:#fff;color:var(--ub-navy);border-radius:8px;padding:7px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.icon-btn:hover{border-color:rgba(0,150,214,.5);color:var(--ub-blue)}
.view-pane.hidden{display:none}
.chart-shell{border:1px solid #e1eaf2;background:#fbfdff;border-radius:12px;padding:12px;min-height:250px;overflow:auto}
.chart-shell svg{display:block;width:100%;height:auto;min-width:620px}
.chart-empty{display:flex;align-items:center;justify-content:center;min-height:220px;color:var(--ub-muted);font-size:13px;text-align:center}
.chart-help{margin-top:7px;color:var(--ub-muted);font-size:11px}
.aging-chart{min-height:330px}
.trend-point{cursor:pointer;transition:r .12s ease}
.trend-point:hover{r:7}
.chart-axis{stroke:#cfdbe5;stroke-width:1}
.chart-grid{stroke:#e8eff5;stroke-width:1}
.chart-label{fill:#617b92;font-family:Arial,sans-serif;font-size:11px}
.chart-value{fill:#17314a;font-family:Arial,sans-serif;font-size:11px;font-weight:700}
.chart-title{fill:#0d1f33;font-family:Arial,sans-serif;font-size:13px;font-weight:700}
.chart-bar{fill:#0096d6}
.chart-bar-alt{fill:#34b7e5}
.chart-pos{fill:#b86718}
.chart-neg{fill:#16805a}
.chart-line{fill:none;stroke:#0096d6;stroke-width:3}
.chart-area{fill:rgba(0,150,214,.09)}
@media(max-width:700px){
  .panel-actions{width:100%;justify-content:flex-start}
  .subhead-row{align-items:flex-start}
  .chart-shell{padding:8px}
  .chart-shell svg{min-width:560px}
  .ub-actions{flex-wrap:wrap}
}

/* Phase 2B - filters, collapsible sections, chart legibility and native-control polish */
.ub-section-shell{background:#fff;border:1px solid var(--ub-border);border-radius:16px;margin-bottom:18px;box-shadow:var(--ub-shadow);overflow:hidden}
.section-toggle{width:100%;border:0;background:#fff;color:var(--ub-navy);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;text-align:left;cursor:pointer}
.section-toggle:hover{background:#fbfdff}
.section-toggle>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.section-toggle strong{font-family:'Barlow Condensed',sans-serif;font-size:24px;line-height:1.05;font-weight:800}
.section-toggle small{font-size:12px;color:var(--ub-muted);font-weight:500}
.section-toggle .chevron{font-size:24px;color:var(--ub-blue);line-height:1;transition:transform .18s ease}
.ub-section-shell.collapsed .section-toggle .chevron{transform:rotate(-90deg)}
.section-body{padding:0 18px 18px}
.section-body.hidden{display:none}

.filter-bar{display:grid;grid-template-columns:minmax(190px,.8fr) repeat(3,minmax(170px,1fr)) auto minmax(210px,1.1fr);gap:10px;align-items:end;background:#f7fafc;border:1px solid #dce7f0;border-radius:13px;padding:13px 14px;margin:2px 0 18px}
.filter-title{display:flex;flex-direction:column;gap:2px;align-self:center}
.filter-title>span{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--ub-navy)}
.filter-title small{font-size:11px;color:var(--ub-muted);line-height:1.3}
.filter-bar label{display:flex;flex-direction:column;gap:5px;min-width:0}
.filter-bar label>span{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ub-muted)}
.filter-bar select{width:100%;min-width:0;border:1px solid var(--ub-border);border-radius:9px;padding:10px 34px 10px 11px;background:#fff;color:var(--ub-navy);font:inherit;font-size:13px;outline:none}
.filter-bar select:focus{border-color:var(--ub-blue);box-shadow:0 0 0 3px rgba(0,150,214,.10)}
.filter-summary{align-self:center;font-size:11px;color:var(--ub-muted);line-height:1.35;text-align:right}
.panel-help,.subhelp{margin:4px 0 0;color:var(--ub-muted);font-size:11px;line-height:1.35;max-width:760px}
.subhelp{max-width:700px}
.comparison-note{font-size:12px;line-height:1.4;color:#496780;background:#eef7fb;border:1px solid #d8eaf3;border-radius:10px;padding:10px 12px;margin:2px 0 14px}
.history-top-actions{margin-bottom:0}
.project-movement-block{margin-top:20px}

/* Keep parallel chart/table areas visually balanced. */
.equal-charts>div{display:flex;flex-direction:column;min-width:0}
.equal-charts .view-pane{flex:1;min-width:0}
.comparison-chart{height:360px;min-height:360px;overflow:auto}
.comparison-chart svg{height:100%;min-height:330px}
.history-table,.movement-table{height:360px;max-height:360px}
.current-chart{min-height:330px}
.equal-panels>article{display:flex;flex-direction:column;min-height:430px}
.equal-panels .chart-shell,.equal-panels .table-wrap{flex:1}
.office-table{max-height:330px}

/* Use the Reporting Hub type system inside charts and keep values readable. */
.chart-label{fill:#526f88!important;font-family:'Barlow',sans-serif!important;font-size:13px!important;font-weight:600!important}
.chart-value{fill:#102b43!important;font-family:'Barlow Condensed',sans-serif!important;font-size:15px!important;font-weight:800!important}
.chart-title{fill:#0d1f33!important;font-family:'Barlow Condensed',sans-serif!important;font-size:16px!important;font-weight:800!important}
.chart-shell{overflow:auto}
.chart-shell svg{min-width:760px}
.chart-help{font-size:12px}

/* Replace the browser-default file chooser with a branded file control. */
.custom-file{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--ub-border);border-radius:10px;padding:8px;background:#f8fbfd;margin-bottom:8px;min-height:48px}
.file-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.file-button{display:inline-flex!important;align-items:center;justify-content:center;margin:0!important;padding:9px 13px;border-radius:8px;background:var(--ub-navy);color:#fff!important;font-size:12px!important;font-weight:800!important;cursor:pointer;white-space:nowrap}
.file-button:hover{background:#14395c}
#sourceFileName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5b758d;font-size:12px}

@media(max-width:1350px){
  .filter-bar{grid-template-columns:repeat(3,minmax(170px,1fr));}
  .filter-title,.filter-summary{grid-column:1/-1;text-align:left}
}
@media(max-width:900px){
  .filter-bar{grid-template-columns:1fr 1fr}
  .filter-title,.filter-summary{grid-column:1/-1}
  .equal-charts{grid-template-columns:1fr}
  .comparison-chart,.history-table,.movement-table{height:auto;min-height:330px;max-height:390px}
}
@media(max-width:620px){
  .filter-bar{grid-template-columns:1fr}
  .filter-title,.filter-summary{grid-column:auto}
  .section-toggle{padding:15px 14px}
  .section-body{padding:0 12px 12px}
  .section-toggle strong{font-size:21px}
  .custom-file{align-items:flex-start;flex-direction:column}
  #sourceFileName{width:100%}
}


/* Phase 2C - interactive Snapshot History chart */
.history-interactive-panel{position:relative;min-width:0}
.trend-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 9px;padding:9px 10px;border:1px solid #dfe9f1;border-radius:10px;background:#f8fbfd}
.trend-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:220px}
.trend-toolbar strong{font-size:12px;color:var(--ub-navy);font-weight:800}
.trend-toolbar span{font-size:11px;color:var(--ub-muted)}
.trend-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chart-control{min-width:34px;height:34px;padding:6px 10px;font-size:13px}
.chart-control.reset,.chart-control.expand{min-width:58px}
.chart-control:disabled{opacity:.4;cursor:not-allowed;color:var(--ub-muted);border-color:#dce6ee}
.zoom-readout{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:34px;border:1px solid var(--ub-border);border-radius:8px;background:#fff;color:var(--ub-navy)!important;font-family:'Barlow Condensed',sans-serif;font-size:13px!important;font-weight:800}
.interactive-chart-frame{position:relative;min-width:0}
.interactive-trend-chart{height:360px;min-height:360px;overflow:hidden!important;padding:8px 10px}
.interactive-trend-chart svg{width:100%!important;height:100%!important;min-width:0!important;display:block}
.trend-point{cursor:crosshair;transition:r .08s ease,stroke-width .08s ease}
.trend-point.is-hovered{stroke:#0d1f33;stroke-width:3}
.trend-hover-line{stroke:#91a9bb;stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.chart-tooltip{position:absolute;z-index:8;pointer-events:none;min-width:190px;max-width:250px;padding:10px 12px;border-radius:10px;background:#0d1f33;color:#fff;box-shadow:0 12px 28px rgba(13,31,51,.22);font-family:'Barlow',sans-serif;font-size:12px;line-height:1.35;transform:translate3d(0,0,0)}
.chart-tooltip.hidden{display:none}
.chart-tooltip strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:17px;line-height:1.05;margin-bottom:5px;color:#fff}
.chart-tooltip .tt-grid{display:grid;grid-template-columns:auto auto;gap:3px 12px}
.chart-tooltip .tt-grid span:nth-child(odd){color:rgba(255,255,255,.62)}
.chart-tooltip .tt-grid span:nth-child(even){text-align:right;font-weight:700;color:#fff}
.chart-tooltip .tt-delta.up{color:#ffc477!important}.chart-tooltip .tt-delta.down{color:#87e0bf!important}.chart-tooltip .tt-delta.flat{color:#d7e3eb!important}
.history-interactive-panel.is-expanded{position:fixed;inset:18px;z-index:12000;background:#fff;border:1px solid #cfdde8;border-radius:16px;padding:16px;box-shadow:0 28px 90px rgba(13,31,51,.34);display:flex;flex-direction:column}
.history-interactive-panel.is-expanded .trend-toolbar{flex:0 0 auto}
.history-interactive-panel.is-expanded .interactive-chart-frame{flex:1;min-height:0}
.history-interactive-panel.is-expanded .interactive-trend-chart{height:100%;min-height:520px}
body.chart-modal-open{overflow:hidden}
@media(max-width:700px){
  .trend-toolbar{align-items:flex-start}
  .trend-controls{width:100%}
  .chart-control.expand{margin-left:auto}
  .interactive-trend-chart{height:330px;min-height:330px}
  .history-interactive-panel.is-expanded{inset:8px;padding:10px}
  .history-interactive-panel.is-expanded .interactive-trend-chart{min-height:420px}
  .chart-tooltip{min-width:170px;max-width:210px;font-size:11px}
}