:root{ --sideW: 300px; }

.dash{
  min-height: 100vh;
  display:grid;
  grid-template-columns: var(--sideW) 1fr;
  gap: 18px;
  padding: 18px;
}

.dash__side{
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  padding: 16px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.dash__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--glassBg);
}
.dash__brand:hover{ background: color-mix(in srgb, var(--glassBg) 85%, transparent); }
.dash__brandName{ font-weight: 820; letter-spacing:.2px; color: var(--heading); }
.dash__brandTag{ font-size: 12px; color: var(--muted); }

.dashnav{ margin-top: 14px; display:flex; flex-direction:column; gap: 8px; }
.dashnav__link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--glassBg);
  color: color-mix(in srgb, var(--text) 95%, transparent);
}
.dashnav__link:hover{ background: color-mix(in srgb, var(--glassBg) 88%, transparent); }
.dashnav__link.is-active{
  border-color: var(--primaryBorder);
  background:
    radial-gradient(140% 140% at 0% 0%, var(--primarySoft), transparent 62%),
    var(--glassBg);
}
.dashnav__dot{ width: 10px; height:10px; border-radius:999px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.dashnav__link.is-active .dashnav__dot{
  background: var(--primary);
  box-shadow: 0 0 16px rgba(99,102,241,.32);
}

.dash__sideBottom{ margin-top:auto; display:flex; flex-direction:column; gap: 12px; }
.dash__balance{ padding: 14px; border-radius: 18px; }
.dash__balanceTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.dash__balanceValue{ font-size: 24px; font-weight: 820; margin-top: 6px; color: var(--heading); }
.dash__balanceActions{ margin-top: 10px; }

.dash__support{ display:flex; gap: 10px; align-items:center; justify-content:center; font-size: 13px; }
.dash__supportLink{ color: var(--muted); }
.dash__supportLink:hover{ color: var(--heading); }

.dash__main{ min-width: 0; }

.dashtop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 8px 10px;
}

.search{
  flex: 1;
  max-width: 680px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--glassBg);
}
.search__icon{ width: 16px; height: 16px; border-radius: 6px; background: var(--primarySoft); border: 1px solid var(--primaryBorder); }
.search__input{
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
  color: var(--heading);
}
.search__input::placeholder{ color: var(--placeholder); }

.dashtop__right{ display:flex; align-items:center; gap: 10px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glassBg);
  color: color-mix(in srgb, var(--text) 95%, transparent);
  font-size: 13px;
}

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

.kpi{ grid-column: span 3; padding: 16px; }
.kpi__label{ color: var(--muted); font-size: 13px; }
.kpi__value{ margin-top: 6px; font-size: 26px; font-weight: 860; color: var(--heading); letter-spacing: -.3px; }
.kpi__trend{ margin-top: 10px; font-size: 13px; color: var(--muted); }

.card{ padding: 16px; }
.card__title{ margin:0; font-size: 16px; color: var(--heading); }
.card__sub{ margin:6px 0 0; color: var(--muted); font-size: 13px; }

.chart{ grid-column: span 4; }
.chart__wrap{ margin-top: 12px; display:grid; grid-template-columns: 140px 1fr; gap: 12px; align-items:center; }
.donut{
  width: 140px; height: 140px;
  border-radius: 999px;
  background:
    conic-gradient(
      var(--primary) 0 35%,
      color-mix(in srgb, var(--muted) 35%, transparent) 35% 100%
    );
  box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--softSection) 55%, transparent);
  border: 1px solid var(--border);
}
.legend{ display:flex; flex-direction:column; gap: 10px; }
.legend__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; font-size: 13px; color: color-mix(in srgb, var(--text) 95%, transparent); }
.legend__dot{ width: 10px; height:10px; border-radius:999px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.legend__dot--primary{ background: var(--primary); box-shadow: 0 0 14px rgba(99,102,241,.30); }
.legend__dot--success{ background: var(--success); }
.legend__dot--danger{ background: var(--danger); }

.tblCard{ grid-column: span 8; }
.tbl{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  min-width: 760px;
}
.tbl th, .tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: top;
}
.tbl th{ text-align:left; color: color-mix(in srgb, var(--muted) 92%, transparent); font-weight: 760; background: color-mix(in srgb, var(--glassBg) 70%, transparent); position: sticky; top: 0; z-index: 1; }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glassBg);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 95%, transparent);
  white-space: nowrap;
}
.pill--ok{ border-color: var(--successBorder); background: var(--successSoft); color: var(--heading); }
.pill--warn{ border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); color: var(--heading); }
.pill--danger{ border-color: var(--dangerBorder); background: var(--dangerSoft); color: var(--heading); }

.tblWrap{ overflow:auto; border-radius: 16px; }

@media (max-width: 1100px){
  :root{ --sideW: 280px; }
  .kpi{ grid-column: span 6; }
  .chart{ grid-column: span 6; }
  .tblCard{ grid-column: span 12; }
}

@media (max-width: 980px){
  .dash{ grid-template-columns: 1fr; }
  .dash__side{ position: relative; top: auto; height: auto; }
  .tbl{ min-width: 640px; }
}