:root {
  --vs-green:#16804c;
  --vs-green-dark:#125c3b;
  --vs-bg:#f5f7f8;
  --vs-text:#253b35;
  --console-border:#e4eae7;
}

body {
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:14px;
  color:var(--vs-text);
  background:var(--vs-bg);
}

a {
  color:#127044;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #77bda0;
  outline-offset:3px;
}

.console-sidebar {
  width:234px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--console-border);
  display:flex;
  flex-direction:column;
  z-index:1050;
  padding:26px 16px 18px;
  overflow-y:auto;
}

.console-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0 15px;
  text-decoration:none;
}

.console-brand img {
  width:156px;
  height:52px;
  object-fit:contain;
  object-position:left center;
}

.console-brand>span {
  font-size:9px;
  letter-spacing:1.65px;
  color:#7f8e87;
  margin-top:9px;
}

.console-workspace {
  display:flex;
  align-items:center;
  gap:10px;
  background:#f7f9f8;
  border:1px solid var(--console-border);
  border-radius:10px;
  padding:12px 10px;
  margin:27px 0 26px;
}

.workspace-icon {
  background:#e1f0e7;
  color:#137544;
  border-radius:8px;
  padding:7px 11px;
  font-weight:750;
}

.console-workspace strong {
  font-size:12px;
}

.console-workspace small {
  display:block;
  font-size:10px;
  color:#77857e;
  margin-top:3px;
}

.console-nav {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.nav-label {
  font-size:10px;
  color:#89968f;
  font-weight:700;
  letter-spacing:1.25px;
  padding:0 13px 9px;
}

.nav-second {
  margin-top:26px;
}

.console-nav a {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:43px;
  padding:10px 12px;
  border-radius:8px;
  color:#64736c;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}

.console-nav a>span {
  font-size:21px;
  width:22px;
  text-align:center;
  line-height:1;
}

.console-nav a:hover {
  background:#f2f7f4;
  color:#166941;
}

.console-nav a.active {
  background:#e8f4ed;
  color:#107241;
  box-shadow:inset 3px 0 #188650;
}

.sidebar-bottom {
  margin-top:auto;
  padding:40px 10px 0;
  font-size:10px;
  color:#63766b;
}

.sidebar-bottom small {
  display:block;
  margin-top:7px;
  font-size:9px;
  color:#8a9991;
}

.brand-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#20975c;
  border-radius:50%;
  margin-right:5px;
}

.console-shell {
  margin-left:234px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.console-shell.console-guest {
  margin-left:0;
}

.console-guest .btn.w-100 {
  color:#fff;
}

.console-topbar {
  height:72px;
  min-height:72px;
  background:#fff;
  border-bottom:1px solid var(--console-border);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 32px;
}

.topbar-context {
  font-size:12px;
  color:#89958f;
}

.topbar-context span {
  padding:0 12px;
  color:#c2ccc6;
}

.topbar-context strong {
  color:#52655a;
  font-weight:500;
}

.topbar-account {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-size:12px;
}

.topbar-account>a {
  margin-left:16px;
  color:#7c8981;
  text-decoration:none;
}

.account-avatar {
  background:#eaf2ed;
  border:1px solid #d4e4db;
  border-radius:50%;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  color:#207548;
  font-weight:700;
}

.menu-toggle {
  display:none;
  border:1px solid #d9e4dd;
  background:white;
  color:#18673f;
  border-radius:7px;
  padding:4px 10px;
  font-size:21px;
}

.console-shell main.wrap {
  max-width:1740px;
  padding:0 32px;
  margin:30px auto;
  min-width:0;
}

.console-footer {
  display:flex;
  justify-content:space-between;
  padding:16px 32px;
  border-top:1px solid var(--console-border);
  color:#8b9690;
  font-size:10px;
  margin-top:auto;
}

.guest-brand {
  padding:0;
}

.card {
  border:1px solid var(--console-border);
  box-shadow:0 2px 5px #173c2710;
}

.btn:hover {
  color:inherit;
}

.btn.gray:hover,.btn.red:hover,.btn-success:hover,.btn-primary:hover,.btn-danger:hover {
  color:white;
}

.muted {
  color:#7c8881;
}

.badge {
  background:var(--bs-badge-bg, #edf1ee);
}

.dash-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:25px;
}

.dash-eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:700;
  color:#75867c;
  margin-bottom:8px;
}

.dash-heading h1 {
  font-size:28px;
  letter-spacing:-.8px;
  font-weight:650;
  margin:0 0 7px;
  color:#203e2f;
}

.dash-heading p {
  font-size:12px;
  color:#7a8880;
  margin:0;
}

.dash-date {
  border:1px solid #dde5e0;
  background:#fff;
  padding:9px 13px;
  border-radius:8px;
  font-size:11px;
  white-space:nowrap;
  color:#62736a;
}

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

.metric {
  background:#fff;
  border:1px solid var(--console-border);
  border-radius:12px;
  padding:19px 20px;
  position:relative;
  min-height:137px;
  box-shadow:0 2px 3px #20392b03;
}

.metric-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#708176;
  gap:8px;
}

.metric-icon {
  color:#328257;
  background:#eef6f1;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  font-size:17px;
}

.metric-value {
  font-size:clamp(22px,2.15vw,34px);
  font-weight:650;
  letter-spacing:-1px;
  line-height:1.3;
  margin:9px 0 10px;
  font-variant-numeric:tabular-nums;
}

.metric-foot {
  font-size:10px;
  color:#87938c;
}

.metric-foot a {
  text-decoration:none;
  font-weight:600;
}

.metric-primary {
  background:#176f47;
  border-color:#176f47;
  color:#fff;
}

.metric-primary .metric-head,.metric-primary .metric-foot {
  color:#d4e8dd;
}

.metric-primary .metric-icon {
  background:#ffffff1a;
  color:#d9f4e6;
}

.metric-warn .metric-value {
  color:#ba6b38;
}

.insight-grid {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);
  gap:20px;
  margin-bottom:22px;
}

.dash-panel {
  border:1px solid var(--console-border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  min-width:0;
  box-shadow:0 2px 3px #20392b03;
}

.panel-heading {
  padding:20px 22px 0;
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:15px;
}

.panel-heading h2 {
  font-size:14px;
  font-weight:650;
  color:#2b4436;
  margin:0 0 6px;
}

.panel-heading p {
  font-size:10px;
  color:#839087;
  margin:0;
}

.panel-tag {
  border:1px solid #e1e9e3;
  border-radius:5px;
  padding:4px 8px;
  font-size:9px;
  color:#708175;
  white-space:nowrap;
}

.receipt-chart {
  height:200px;
  display:flex;
  align-items:stretch;
  gap:13px;
  padding:22px 24px 0;
  margin:14px 20px 0;
  background:repeating-linear-gradient(to top,transparent 0,transparent 47px,#f0f3f1 48px,#f0f3f1 49px);
}

.chart-column {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  position:relative;
}

.chart-value {
  font-size:9px;
  color:#687e70;
  white-space:nowrap;
  margin-bottom:7px;
}

.chart-bar {
  width:min(68%,50px);
  border-radius:5px 5px 0 0;
  background:#d5e9de;
  min-height:2px;
  max-height:150px;
}

.chart-column.current .chart-bar {
  background:#258459;
}

.chart-label {
  font-size:10px;
  color:#87948c;
  height:24px;
  margin-top:8px;
}

.chart-note {
  font-size:9px;
  color:#88958d;
  padding:13px 22px 19px;
  margin:0;
}

.segment-list {
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.segment-label {
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:11px;
}

.segment-label a {
  text-decoration:none;
  color:#63796a;
}

.segment-label strong {
  font-weight:650;
  color:#35523f;
}

.segment-track {
  height:6px;
  border-radius:8px;
  background:#f0f4f1;
  overflow:hidden;
}

.segment-fill {
  height:100%;
  background:#4c9970;
  border-radius:8px;
}

.segment-item:nth-child(2) .segment-fill {
  background:#8bbca0;
}

.segment-item:nth-child(3) .segment-fill {
  background:#b2c6a4;
}

.segment-item:nth-child(4) .segment-fill {
  background:#c9d8ce;
}

.segment-foot {
  padding:0 22px 19px;
  font-size:9px;
  color:#88958d;
}

.attention-strip {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  border:1px solid var(--console-border);
  border-radius:11px;
  overflow:hidden;
  background:var(--console-border);
  margin-bottom:25px;
}

.attention-item {
  background:#fff;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 20px;
  text-decoration:none;
  color:#596d60;
}

.attention-item:hover {
  background:#f8fbf9;
  color:#166b40;
}

.attention-number {
  font-size:22px;
  font-weight:600;
  color:#3d7352;
  min-width:26px;
}

.attention-item strong {
  display:block;
  font-size:11px;
  font-weight:600;
}

.attention-item small {
  font-size:9px;
  color:#87948b;
}

.attention-arrow {
  margin-left:auto;
  font-size:17px;
  color:#9faea3;
}

.client-section {
  scroll-margin-top:20px;
}

.client-heading {
  padding:20px 22px 17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.client-heading h2 {
  font-size:15px;
  margin:0 0 5px;
}

.client-heading p {
  font-size:10px;
  color:#8b968e;
  margin:0;
}

.results-count {
  font-size:10px;
  background:#f1f6f3;
  color:#62796a;
  padding:5px 9px;
  border-radius:5px;
}

.client-filters {
  padding:0 22px 18px;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.client-filters input,.client-filters select {
  border:1px solid #dee6e0;
  border-radius:7px;
  padding:9px 10px;
  font:inherit;
  font-size:11px;
  color:#5a6b60;
  background:#fff;
  min-width:0;
}

.client-filters input {
  flex:1;
  min-width:180px;
}

.client-filters .btn {
  font-size:11px;
  padding:8px 14px;
}

.client-table-scroll {
  overflow:auto;
}

.client-table {
  min-width:830px;
  margin:0;
}

.client-table thead th {
  background:#f8faf9;
  color:#8a978e;
  font-size:9px;
  font-weight:600;
  letter-spacing:.65px;
  padding:12px 20px;
  white-space:nowrap;
}

.client-table td {
  padding:15px 20px;
  border-color:#edf1ee;
  font-size:11px;
  vertical-align:middle;
}

.client-table tbody tr:hover {
  background:#fbfdfb;
}

.client-name {
  display:flex;
  align-items:center;
  gap:10px;
}

.client-initial {
  width:32px;
  height:32px;
  flex-shrink:0;
  border-radius:9px;
  background:#edf4ef;
  color:#658370;
  display:grid;
  place-items:center;
  font-weight:650;
}

.client-name a {
  color:#385640;
  text-decoration:none;
  font-weight:650;
}

.client-table small {
  display:block;
  font-size:9px;
  color:#8b978f;
  margin-top:4px;
}

.client-table .status-badge {
  font-size:9px;
  font-weight:550;
  padding:4px 7px;
  border:0;
  white-space:nowrap;
}

.billing-success {
  color:#2d7e51;
  background:#edf7f0;
}

.billing-warning {
  color:#9e7b32;
  background:#fbf5e8;
}

.billing-danger {
  color:#b66b43;
  background:#fbefe8;
}

.billing-secondary,.status-cancelled {
  color:#7d8781;
  background:#eff2f0;
}

.client-actions {
  display:flex;
  gap:9px;
  align-items:center;
}

.client-actions a {
  white-space:nowrap;
  text-decoration:none;
  font-size:10px;
}

.client-actions a:first-child {
  padding:6px 9px;
  border:1px solid #dce6df;
  border-radius:6px;
}

.client-pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 22px;
  color:#88968c;
  font-size:10px;
  gap:10px;
}

.client-pagination nav {
  display:flex;
  align-items:center;
  gap:12px;
}

.client-pagination a {
  text-decoration:none;
  border:1px solid #dce5df;
  padding:5px 8px;
  border-radius:5px;
}

.client-empty {
  text-align:center!important;
  padding:40px!important;
  color:#829286;
}

.setup-filter-note {
  padding:0 22px 14px;
  color:#7c6a47;
  font-size:11px;
}

@media(min-width:1600px) {
  .metric-value {
    font-size:34px;
  }
  .receipt-chart {
    height:230px;
  }
  .chart-bar {
    max-height:180px;
  }
}

@media(max-width:1190px) {
  .console-sidebar {
    width:210px;
    padding-inline:12px;
  }
  .console-shell {
    margin-left:210px;
  }
  .console-shell main.wrap {
    padding:0 22px;
  }
  .console-topbar {
    padding:0 22px;
  }
  .metric-grid {
    gap:10px;
  }
  .metric {
    padding:15px 12px;
  }
  .metric-value {
    font-size:24px;
  }
  .insight-grid {
    grid-template-columns:1.4fr 1fr;
  }
  .receipt-chart {
    padding-inline:8px;
    margin-inline:10px;
    gap:5px;
  }
  .chart-value {
    font-size:8px;
  }
  .attention-item {
    padding:14px 12px;
  }
}

@media(max-width:940px) {
  .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .insight-grid {
    grid-template-columns:1fr;
  }
  .segment-list {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .attention-strip {
    grid-template-columns:1fr;
  }
  .attention-item {
    padding:13px 20px;
  }
  .metric-value {
    font-size:28px;
  }
}

@media(max-width:700px) {
  .console-sidebar {
    display:none;
    top:64px;
    width:234px;
    box-shadow:10px 0 35px #173c2720;
  }
  .console-sidebar.is-open {
    display:flex;
  }
  .console-shell {
    margin-left:0;
  }
  .menu-toggle {
    display:block;
  }
  .console-topbar {
    height:64px;
    min-height:64px;
    padding:0 16px;
  }
  .topbar-context {
    font-size:10px;
  }
  .topbar-context span {
    padding:0 5px;
  }
  .topbar-account>span:not(.account-avatar) {
    display:none;
  }
  .topbar-account>a {
    margin-left:0;
  }
  .console-shell main.wrap {
    padding:0 16px;
    margin-top:24px;
  }
  .dash-heading {
    align-items:flex-start;
  }
  .dash-heading h1 {
    font-size:25px;
  }
  .dash-heading p {
    max-width:220px;
    line-height:1.6;
  }
  .dash-date {
    font-size:9px;
    padding:7px;
  }
  .metric {
    min-height:125px;
  }
  .metric-value {
    font-size:23px;
    letter-spacing:-.8px;
  }
  .metric-head {
    font-size:10px;
  }
  .metric-foot {
    font-size:9px;
  }
  .metric-icon {
    width:22px;
    height:22px;
    font-size:14px;
  }
  .panel-heading,.client-heading {
    padding:17px 16px 0;
  }
  .client-heading {
    padding-bottom:17px;
  }
  .client-filters {
    padding:0 16px 16px;
  }
  .client-filters select {
    flex:1;
  }
  .client-filters input {
    flex-basis:100%;
  }
  .receipt-chart {
    margin-top:14px;
  }
  .console-footer {
    padding:16px;
    font-size:9px;
    gap:20px;
  }
  .client-pagination {
    padding:14px 16px;
  }
  .chart-value {
    font-size:8px;
  }
  .segment-list {
    padding:20px 16px;
  }
  .panel-heading p {
    line-height:1.5;
  }
}