:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --text:#142033;
  --muted:#687385;
  --line:#e4e9f0;
  --accent:#163a63;
  --accent-2:#245b94;
  --good:#1f7a4c;
  --warn:#8f5f14;
  --bad:#a43a3a;
  --shadow:0 10px 28px rgba(25,43,71,.08);
  --radius:18px;
  --on-accent:#ffffff;
  --card-title:#4d5c70;
  --control-text:#536174;
  --tab-active-text:var(--accent);
  --tab-active-bg:#eaf2fb;
  --tab-active-border:#cadcf0;
  --status-bg:#eef4fb;
  --status-good-bg:#edf7f1;
  --status-warn-bg:#fbf4e7;
  --status-bad-bg:#fbecec;
  --rank-bg:#eef3f8;
  --rank-text:#5f6e80;
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#111827;
  --panel:#1f2937;
  --panel-2:#182230;
  --text:#f3f4f6;
  --muted:#aab4c3;
  --line:#344256;
  --accent:#356fa8;
  --accent-2:#78addf;
  --good:#78d3a5;
  --warn:#e2b363;
  --bad:#e38181;
  --shadow:0 12px 30px rgba(0,0,0,.24);
  --card-title:#c2cbda;
  --control-text:#bdc7d6;
  --tab-active-text:#9cc8f0;
  --tab-active-bg:#263b53;
  --tab-active-border:#3d5d7d;
  --status-bg:#273b52;
  --status-good-bg:#213d34;
  --status-warn-bg:#443821;
  --status-bad-bg:#472b30;
  --rank-bg:#2a3748;
  --rank-text:#c5cfdd;
  color-scheme:dark;
}

[data-theme="outrun"]{
  --bg:#0f1224;
  --panel:#191d36;
  --panel-2:#14192f;
  --text:#f3f3fb;
  --muted:#a9aec8;
  --line:#303858;
  --accent:#674590;
  --accent-2:#63c1cf;
  --good:#62cda9;
  --warn:#e5ad65;
  --bad:#dc79a0;
  --shadow:0 14px 34px rgba(4,6,20,.34);
  --card-title:#c9cbe0;
  --control-text:#bdc1d8;
  --tab-active-text:#82d1dc;
  --tab-active-bg:#2b294e;
  --tab-active-border:#4b4775;
  --status-bg:#283353;
  --status-good-bg:#203d3b;
  --status-warn-bg:#453522;
  --status-bad-bg:#47283d;
  --rank-bg:#292f4d;
  --rank-text:#c8cbe1;
  color-scheme:dark;
}

[data-theme="sunfire"]{
  --bg:#f8f1e8;
  --panel:#fffdf9;
  --panel-2:#f9ecdf;
  --text:#39271e;
  --muted:#786659;
  --line:#ead6c3;
  --accent:#8b3f24;
  --accent-2:#b45b34;
  --good:#4f7756;
  --warn:#875712;
  --bad:#a64234;
  --shadow:0 10px 28px rgba(92,48,24,.10);
  --card-title:#684c3d;
  --control-text:#715b4d;
  --tab-active-text:var(--accent);
  --tab-active-bg:#f7e1d1;
  --tab-active-border:#debca4;
  --status-bg:#f4e2d4;
  --status-good-bg:#eaf3e9;
  --status-warn-bg:#f8edda;
  --status-bad-bg:#f8e4df;
  --rank-bg:#f2e3d6;
  --rank-text:#765c4d;
  color-scheme:light;
}

[data-theme="forest"]{
  --bg:#edf3ef;
  --panel:#fbfdfb;
  --panel-2:#f0f6f2;
  --text:#1d3026;
  --muted:#65766c;
  --line:#d4e0d7;
  --accent:#255b40;
  --accent-2:#3c795b;
  --good:#2b714c;
  --warn:#7f5f16;
  --bad:#a44848;
  --shadow:0 10px 28px rgba(28,62,43,.09);
  --card-title:#425f50;
  --control-text:#536a5d;
  --tab-active-text:var(--accent);
  --tab-active-bg:#dfede4;
  --tab-active-border:#bdd4c5;
  --status-bg:#e2eee6;
  --status-good-bg:#e3f1e8;
  --status-warn-bg:#f5efdd;
  --status-bad-bg:#f6e7e5;
  --rank-bg:#e4eee7;
  --rank-text:#536c5d;
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
}

.shell{
  max-width:1480px;
  margin:0 auto;
  padding:28px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:22px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:700;
  color:var(--accent-2);
  margin-bottom:7px;
}

h1{
  margin:0;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.02em;
}

.subtitle{
  margin:7px 0 0;
  color:var(--muted);
  font-size:14px;
}

.topbar-box{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:14px;
  padding:12px 14px;
  width:220px;
  min-height:74px;
}

.sync-box{
  text-align:right;
}

.connection-state{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
  color:var(--control-text);
  font-size:12px;
  font-weight:800;
  margin-bottom:7px;
}

.connection-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 0 3px var(--status-warn-bg);
}

.connection-state.connected .connection-dot{
  background:var(--good);
  box-shadow:0 0 0 3px var(--status-good-bg);
}

.connection-state.error .connection-dot{
  background:var(--bad);
  box-shadow:0 0 0 3px var(--status-bad-bg);
}

.connection-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:10px;
}

.connection-button{
  appearance:none;
  border:1px solid var(--accent);
  border-radius:8px;
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  font:inherit;
  font-size:11px;
  font-weight:800;
  padding:7px 10px;
}

.connection-button.subtle{
  background:transparent;
  color:var(--accent-2);
  border-color:var(--line);
}

.connection-button:focus-visible,
.metric-tab:focus-visible,
.company-tab:focus-visible,
.theme-select:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent-2) 34%, transparent);
  outline-offset:2px;
}

.sync-label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:2px;
}

.sync-time{
  font-weight:700;
  font-size:14px;
}

.theme-label{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  margin:0;
  white-space:nowrap;
}

.theme-select-wrap{
  position:relative;
  width:132px;
}

.theme-select-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  width:6px;
  height:6px;
  border-right:2px solid var(--accent-2);
  border-bottom:2px solid var(--accent-2);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.theme-select{
  appearance:none;
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:7px 32px 7px 10px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}

.theme-select:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  outline-offset:2px;
}

.control-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}

.theme-control{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:6px 8px 6px 13px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.company-tabs{
  display:flex;
  gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  width:max-content;
  box-shadow:var(--shadow);
  margin:0;
}

.company-tab{
  border:none;
  background:transparent;
  color:var(--muted);
  padding:10px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.company-tab.active{
  color:var(--on-accent);
  background:var(--accent);
}

.company-tab.disabled{
  cursor:not-allowed;
  opacity:.5;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin-bottom:14px;
}

.section-heading h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.01em;
}

.section-heading p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

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

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  min-height:250px;
  display:flex;
  flex-direction:column;
}

.card.wide{
  grid-column:span 2;
}

.card.full{
  grid-column:1/-1;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.card-title{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--card-title);
  font-weight:800;
}

.status{
  font-size:11px;
  font-weight:800;
  padding:5px 8px;
  border-radius:999px;
  white-space:nowrap;
  background:var(--status-bg);
  color:var(--accent-2);
}

.status.good{background:var(--status-good-bg);color:var(--good)}
.status.warn{background:var(--status-warn-bg);color:var(--warn)}
.status.bad{background:var(--status-bad-bg);color:var(--bad)}

.metric-card.under-construction{
  border-style:dashed;
}

.metric-card.under-construction .value{
  color:var(--muted);
}

.metric-card.under-construction .metric-tab{
  cursor:not-allowed;
  opacity:.58;
}

.construction-note{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.value{
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  margin:4px 0 12px;
}

.metric-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:14px;
}

.metric-tab{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--control-text);
  padding:6px 9px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.metric-tab.active{
  background:var(--tab-active-bg);
  color:var(--tab-active-text);
  border-color:var(--tab-active-border);
}

.explain{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin:0 0 14px;
}

.support{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.support-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}

.support-row span:first-child{color:var(--muted)}
.support-row strong{font-weight:800}

.trend-up{color:var(--good)}
.trend-down{color:var(--bad)}
.trend-neutral{color:var(--muted)}

.liability-card,
.ar-card{
  min-height:310px;
}

.liability-layout,
.ar-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:start;
  flex:1;
}

.ar-layout{
  grid-template-columns:.95fr 1.05fr;
  gap:24px;
}

.liability-list,
.ar-list{
  border-left:1px solid var(--line);
  padding-left:24px;
}

.liability-list h4,
.ar-list h4{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--card-title);
}

.detail-caption{
  margin:3px 0 8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.liability-item{
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:8px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

.liability-item:last-child{border-bottom:none}

.ar-items{
  list-style:none;
  margin:0;
  padding:0;
}

.ar-item{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.ar-item:last-child{border-bottom:none}

.ar-account strong,
.ar-balance strong{
  display:block;
  font-size:13px;
  line-height:1.3;
}

.ar-account span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.ar-balance{
  text-align:right;
}

.age-badge{
  display:inline-flex;
  margin-top:4px;
  padding:4px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.age-badge.current{background:var(--status-good-bg);color:var(--good)}
.age-badge.warn{background:var(--status-warn-bg);color:var(--warn)}
.age-badge.bad{background:var(--status-bad-bg);color:var(--bad)}

.rank{
  width:22px;height:22px;
  border-radius:7px;
  background:var(--rank-bg);
  display:grid;
  place-items:center;
  color:var(--rank-text);
  font-size:11px;
  font-weight:800;
}

.bottom-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:"exposure exposure retainage budget";
  gap:16px;
  align-items:stretch;
}

.bottom-retainage-card{
  grid-area:retainage;
}

.exposure-card{
  grid-area:exposure;
}

.budget-card{
  grid-area:budget;
}

.exposure-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  flex:1;
}

.exposure-layout .support{
  margin-top:0;
  justify-content:center;
  border-top:none;
  border-left:1px solid var(--line);
  padding:0 0 0 24px;
}

.coming-soon{
  display:none;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:42px;
  text-align:center;
  box-shadow:var(--shadow);
}

.coming-soon h3{
  margin:0 0 8px;
  font-size:24px;
}

.coming-soon p{
  margin:0;
  color:var(--muted);
}

.footer-note{
  color:var(--muted);
  font-size:12px;
  text-align:center;
  margin:24px 0 4px;
}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.wide{grid-column:span 2}
  .bottom-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "exposure exposure"
      "retainage budget";
  }
}

@media (max-width:700px){
  .shell{padding:18px}
  .topbar{flex-direction:column}
  .topbar-box{width:100%}
  .sync-box{text-align:left}
  .connection-state,.connection-actions{justify-content:flex-start}
  .control-row{flex-direction:column;align-items:stretch}
  .company-tabs{width:100%}
  .company-tab{flex:1;padding:10px 8px}
  .theme-control{justify-content:space-between}
  .theme-select-wrap{flex:1;width:auto;max-width:180px}
  .grid{grid-template-columns:1fr}
  .card.wide,.card.full{grid-column:span 1}
  .bottom-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "exposure"
      "retainage"
      "budget";
  }
  .liability-layout,.ar-layout,.exposure-layout{grid-template-columns:1fr}
  .liability-list,.ar-list{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  .exposure-layout .support{border-left:none;border-top:1px solid var(--line);padding:18px 0 0}
  h1{font-size:25px}
  .value{font-size:29px}
}