/* Reseller interface reform - neutral workspace, focused purple accents */
body[data-route="reseller"] {
  --rr-bg: #0a0c12;
  --rr-bg-soft: #0e1018;
  --rr-panel: #11141d;
  --rr-panel-raised: #151824;
  --rr-panel-hover: #191c28;
  --rr-border: rgba(225, 229, 242, .085);
  --rr-border-strong: rgba(225, 229, 242, .14);
  --rr-text: #f1f2f7;
  --rr-muted: #989cab;
  --rr-faint: #676b7a;
  --rr-accent: #b866e3;
  --rr-accent-strong: #ca73ef;
  --rr-accent-soft: rgba(184, 102, 227, .12);
  --rr-green: #5ce6a0;
  --rr-amber: #e4b86a;
  --rr-red: #ee7791;
  background: var(--rr-bg);
}

body[data-route="reseller"] > .noise { opacity: .035; }
body[data-route="reseller"] > .ambient { opacity: .08; filter: blur(110px); }

.dashboardShell-reseller {
  color: var(--rr-text);
  background:
    radial-gradient(circle at 78% 7%, rgba(104, 74, 145, .07), transparent 31%),
    linear-gradient(135deg, #0a0c12 0%, #0d0f17 58%, #0a0c12 100%);
}

.dashboardShell-reseller .dashboardSidebar {
  width: 264px;
  border-right: 1px solid var(--rr-border);
  background:
    linear-gradient(180deg, rgba(19, 21, 31, .98), rgba(11, 13, 20, .99)),
    radial-gradient(circle at 45% 15%, rgba(184, 102, 227, .08), transparent 35%);
  box-shadow: 18px 0 60px rgba(0, 0, 0, .18);
}

.dashboardShell-reseller .dashboardBrand {
  min-height: 94px;
  margin: 0 16px 10px;
  border: 0;
  border-bottom: 1px solid var(--rr-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dashboardShell-reseller .dashboardBrand img { width: 132px; filter: saturate(.9) brightness(1.08); }
.dashboardShell-reseller .dashboardRole { display: none; }
.dashboardShell-reseller .dashboardNav { gap: 8px; padding: 0 14px; }
.dashboardShell-reseller .dashboardNavGroup {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
}
.dashboardShell-reseller .dashboardNavGroup.active {
  border-color: var(--rr-border);
  background: rgba(255, 255, 255, .018);
}
.dashboardShell-reseller .dashboardNavGroupLabel {
  min-height: 44px;
  padding: 0 12px;
  color: #858997;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboardShell-reseller .dashboardNavGroup.active > .dashboardNavGroupLabel { color: #c7c9d3; }
.dashboardShell-reseller .dashboardNavGroupLabel > svg { width: 14px; height: 14px; color: #7f8390; }
.dashboardShell-reseller .dashboardNavGroupChevron svg { width: 12px; height: 12px; }
.dashboardShell-reseller .dashboardNavGroupItems { gap: 3px; padding: 0 7px 8px; }
.dashboardShell-reseller .dashboardNavSectionLabel { margin: 10px 7px 5px; color: #5d6170; font-size: 8px; letter-spacing: .13em; }
.dashboardShell-reseller .dashboardNavSectionLabel i { background: var(--rr-border); }
.dashboardShell-reseller .dashboardNavItem {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #898d9a;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.dashboardShell-reseller .dashboardNavItem:hover { color: #dfe1e8; background: rgba(255, 255, 255, .035); transform: translateX(2px); }
.dashboardShell-reseller .dashboardNavItem > svg {
  width: 17px;
  height: 17px;
  padding: 0;
  color: #767a89;
  background: transparent;
}
.dashboardShell-reseller .dashboardNavItem.active {
  border-color: rgba(184, 102, 227, .27);
  color: #f7f3fa;
  background: linear-gradient(100deg, rgba(184, 102, 227, .18), rgba(184, 102, 227, .06));
  box-shadow: inset 3px 0 0 var(--rr-accent);
}
.dashboardShell-reseller .dashboardNavItem.active > svg { color: var(--rr-accent-strong); }
.dashboardShell-reseller .dashboardNavItem b {
  min-width: 21px;
  height: 21px;
  color: #d9b6ec;
  background: rgba(184, 102, 227, .13);
  font-size: 9px;
}
.dashboardShell-reseller .dashboardSidebarFooter {
  margin: auto 14px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rr-border);
}
.dashboardShell-reseller .dashboardSidebarFooter .dashboardNavItem { min-height: 38px; }
.dashboardShell-reseller .dashboardLogout { color: #ba778a; }

.dashboardShell-reseller .dashboardWorkspace { background: transparent; scroll-padding-top: 84px; }
.dashboardShell-reseller .dashboardTopbar {
  min-height: 76px;
  padding: 0 30px;
  border-bottom: 1px solid var(--rr-border);
  background: rgba(10, 12, 18, .87);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .12);
  backdrop-filter: blur(18px);
}
.dashboardShell-reseller .dashboardGreeting { gap: 5px; padding-right: 17px; border-right: 1px solid var(--rr-border); }
.dashboardShell-reseller .dashboardGreeting small { color: #858997; }
.dashboardShell-reseller .dashboardGreeting strong { color: #d7a5ee; }
.dashboardShell-reseller .dashboardTopContext { color: #b5b8c3; }
.dashboardShell-reseller .dashboardTopContext svg { color: #777b89; }
.dashboardShell-reseller .dashboardRoleChip {
  min-height: 38px;
  border-color: var(--rr-border-strong);
  color: #b9bbc5;
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
}
.dashboardShell-reseller .dashboardAvatar { width: 39px; height: 39px; border-color: rgba(184, 102, 227, .42); }
.dashboardShell-reseller .dashboardMain { width: min(1540px, 100%); padding: 24px 34px 76px; }
.dashboardShell-reseller .dashboardPageHeading { display: none; }
.dashboardShell-reseller .resellerMainPanel { display: grid; gap: 20px; }

/* Universal panel language across overview, settings, loaders, branding and bot pages */
.dashboardShell-reseller :is(.resellerAnalyticsCard, .resellerAnalyticsMetric, .resellerAdminSwitch, .resellerPageBar, .resellerSettingsShell, .resellerSettingsTabs, .resellerLoaderCenter, .resellerBrandingWorkspace, .resellerBotWorkspace, .resellerStoreIntro, .resellerStoreProduct, .resellerManagerCard, .resellerCompactSummary, .card) {
  border-color: var(--rr-border);
  background: linear-gradient(145deg, rgba(19, 22, 32, .96), rgba(13, 15, 23, .96));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .14);
}
.dashboardShell-reseller :is(.resellerAnalyticsHead, .resellerPageBar) h2,
.dashboardShell-reseller :is(.resellerAnalyticsHead, .resellerPageBar) h3 { color: var(--rr-text); }
.dashboardShell-reseller :is(.resellerAnalyticsHead, .resellerPageBar) p { color: var(--rr-muted); }
.dashboardShell-reseller :is(.resellerAnalyticsHead, .resellerPageBar) > div:first-child > span,
.dashboardShell-reseller .resellerAnalyticsCardHead > span { color: #ad76c9; }
.dashboardShell-reseller .resellerAnalyticsMetric {
  min-height: 102px;
  border-color: var(--rr-border);
  background: linear-gradient(145deg, rgba(21, 24, 35, .95), rgba(14, 16, 24, .98));
}
.dashboardShell-reseller .resellerAnalyticsMetric i { color: var(--rr-accent); background: var(--rr-accent-soft); }
.dashboardShell-reseller .resellerAnalyticsMetric strong { color: var(--rr-text); }
.dashboardShell-reseller .resellerAnalyticsMetric :is(small, span) { color: var(--rr-muted); }
.dashboardShell-reseller .resellerAnalyticsCard { border-color: var(--rr-border); background: rgba(16, 18, 27, .95); }
.dashboardShell-reseller .resellerPerformancePlot { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }
.dashboardShell-reseller .resellerPerformanceBar.revenue { background: linear-gradient(180deg, #cb75ef, #8e3eb5); }
.dashboardShell-reseller .resellerPerformanceBar.profit { background: linear-gradient(180deg, #826397, #534460); }

/* New page header */
.resellerReformPageHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 70px;
}
.resellerReformPageHead > div:first-child { display: grid; gap: 5px; }
.resellerReformPageHead > div:first-child > span {
  color: #a875c2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.resellerReformPageHead h2 { margin: 0; color: var(--rr-text); font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.045em; }
.resellerReformPageHead p { margin: 0; color: var(--rr-muted); font-size: 12px; }
.resellerReformHeadActions { display: flex; gap: 10px; }
.resellerReformHeadActions :is(.btn, .ghostBtn) {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
}
.resellerReformHeadActions .btn { border-color: rgba(184, 102, 227, .42); background: linear-gradient(135deg, #764399, #5d337b); box-shadow: 0 12px 30px rgba(93, 51, 123, .24); }
.resellerReformHeadActions .ghostBtn { border-color: var(--rr-border-strong); color: #c8cad3; background: rgba(255, 255, 255, .025); }
.resellerReformHeadActions svg { width: 16px; height: 16px; }

/* Metric cards */
.resellerReformMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.resellerReformMetric {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--rr-border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(22, 25, 36, .96), rgba(14, 16, 24, .98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .13);
}
.resellerReformMetric > i {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(184, 102, 227, .16);
  border-radius: 12px;
  color: #bc79dc;
  background: linear-gradient(145deg, rgba(184, 102, 227, .16), rgba(184, 102, 227, .07));
}
.resellerReformMetric > i svg { width: 22px; height: 22px; }
.resellerReformMetric > div { display: grid; min-width: 0; gap: 2px; }
.resellerReformMetric span { color: #a7aab6; font-size: 10px; }
.resellerReformMetric strong { color: var(--rr-text); font-size: 25px; line-height: 1.05; }
.resellerReformMetric small { color: var(--rr-faint); font-size: 9px; }
.resellerReformMetric.positive > i { color: var(--rr-green); border-color: rgba(92, 230, 160, .14); background: rgba(92, 230, 160, .07); }
.resellerReformMetric.warning > i { color: var(--rr-amber); border-color: rgba(228, 184, 106, .14); background: rgba(228, 184, 106, .07); }
.resellerReformMetric.danger > i { color: var(--rr-red); border-color: rgba(238, 119, 145, .14); background: rgba(238, 119, 145, .07); }

/* Inventory / clients workspace */
.resellerReformWorkspace { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 16px; align-items: start; }
.resellerReformMain {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--rr-border);
  border-radius: 14px;
  background: rgba(14, 16, 24, .92);
  box-shadow: 0 24px 65px rgba(0, 0, 0, .14);
}
.resellerReformToolbar {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--rr-border);
  background: rgba(255, 255, 255, .012);
}
.resellerReformSearch {
  display: flex;
  flex: 1 1 360px;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--rr-border);
  border-radius: 9px;
  background: #0d0f17;
}
.resellerReformSearch:focus-within { border-color: rgba(184, 102, 227, .42); box-shadow: 0 0 0 3px rgba(184, 102, 227, .08); }
.resellerReformSearch svg { flex: 0 0 17px; width: 17px; height: 17px; color: #777b89; }
.resellerReformSearch input { width: 100%; border: 0; outline: 0; color: #e4e6ed; background: transparent; font-size: 10px; }
.resellerReformSearch input::placeholder { color: #5f6370; }
.resellerReformSelect { position: relative; flex: 0 1 170px; min-width: 145px; }
.resellerReformSelect > span { position: absolute; left: 12px; top: 7px; z-index: 1; color: #626674; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.resellerReformSelect select {
  width: 100%;
  height: 42px;
  padding: 14px 34px 3px 11px;
  border: 1px solid var(--rr-border);
  border-radius: 9px;
  outline: 0;
  color: #d2d4dc;
  background: #11131c;
  font-size: 9px;
}
.resellerReformSelect select:focus { border-color: rgba(184, 102, 227, .42); }
.resellerReformMoreFilters { position: relative; flex: 0 0 auto; }
.resellerReformMoreFilters > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--rr-border);
  border-radius: 9px;
  color: #c3c5ce;
  background: rgba(255, 255, 255, .022);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.resellerReformMoreFilters > summary::-webkit-details-marker { display: none; }
.resellerReformMoreFilters > summary svg { width: 15px; height: 15px; color: #8f93a0; }
.resellerReformMoreFilters > summary b { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 99px; color: #e1bff0; background: rgba(184, 102, 227, .16); font-size: 8px; }
.resellerReformMoreFilters[open] > summary { border-color: rgba(184, 102, 227, .4); color: #fff; background: var(--rr-accent-soft); }
.resellerReformFilterPopover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 12px;
  width: min(620px, calc(100vw - 340px));
  padding: 16px;
  border: 1px solid var(--rr-border-strong);
  border-radius: 13px;
  background: rgba(18, 20, 29, .99);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(18px);
}
.resellerReformFilterPopover .resellerFilterField { display: grid; gap: 7px; min-width: 0; }
.resellerReformFilterPopover .resellerFilterField > span { color: #7d818f; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.resellerReformFilterPopover :is(select, input) {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--rr-border);
  border-radius: 9px;
  outline: 0;
  color: #e1e2e8;
  background: #0e1018;
  font-size: 10px;
}
.resellerReformFilterPopover :is(select, input):focus { border-color: rgba(184, 102, 227, .48); box-shadow: 0 0 0 3px rgba(184, 102, 227, .07); }
.resellerReformFilterPopover .resellerFilterActions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.resellerReformFilterPopover .resellerFilterActions :is(.btn, .ghostBtn) { min-height: 39px; padding: 0 16px; border-radius: 8px; font-size: 9px; }

/* Dense directories */
.resellerReformMain :is(.resellerKeyDirectoryClean, .resellerClientDirectoryClean) {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.resellerReformMain .resellerKeyDirectoryClean :is(.resellerKeyDirectoryHead, .resellerKeyCleanRow) {
  grid-template-columns: minmax(135px, 1fr) minmax(160px, 1.18fr) minmax(125px, .9fr) minmax(82px, .55fr) minmax(82px, .56fr);
}
.resellerReformMain .resellerClientDirectoryClean :is(.resellerClientDirectoryHead, .resellerClientCleanRow) {
  grid-template-columns: minmax(150px, 1.15fr) minmax(130px, .9fr) minmax(115px, .78fr) minmax(82px, .52fr) minmax(48px, .32fr);
}
.resellerReformMain :is(.resellerKeyDirectoryHead, .resellerClientDirectoryHead) {
  min-height: 40px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--rr-border);
  color: #666a78;
  background: rgba(255, 255, 255, .012);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.resellerReformMain :is(.resellerKeyDirectoryRow, .resellerClientDirectoryRow) {
  min-height: 65px;
  padding-inline: 16px;
  border-bottom: 1px solid rgba(225, 229, 242, .055);
  background: transparent;
  transition: background .16s ease;
}
.resellerReformMain :is(.resellerKeyDirectoryRow, .resellerClientDirectoryRow):hover { background: rgba(255, 255, 255, .018); }
.resellerReformMain :is(.resellerKeyDirectoryProduct, .resellerClientPrimaryIdentity, .resellerKeyClient, .resellerClientDirectoryProduct, .resellerClientDirectoryFact) strong { color: #dfe1e8; font-size: 10px; }
.resellerReformMain :is(.resellerKeyDirectoryProduct, .resellerClientPrimaryIdentity, .resellerKeyClient, .resellerClientDirectoryProduct, .resellerClientDirectoryFact) :is(span, small) { color: #707482; font-size: 8px; }
.resellerReformMain .resellerKeyCode code {
  border: 1px solid rgba(225, 229, 242, .06);
  border-radius: 7px;
  color: #b9bdc9;
  background: #0b0d14;
  font-size: 8px;
}
.resellerReformMain .resellerEntityStatus { min-height: 23px; padding: 0 9px; border-radius: 99px; font-size: 7px; letter-spacing: .04em; }
.resellerReformMain .resellerEntityStatus.available,
.resellerReformMain .resellerEntityStatus.active { border-color: rgba(92, 230, 160, .2); color: var(--rr-green); background: rgba(92, 230, 160, .07); }
.resellerReformMain .copyBtn,
.resellerReformMain .resellerCopyAction,
.resellerReformMain .resellerRowMenu > summary { border-color: var(--rr-border-strong); color: #b6b9c4; background: rgba(255, 255, 255, .025); }
.resellerReformMain .copyBtn:hover,
.resellerReformMain .resellerCopyAction:hover,
.resellerReformMain .resellerRowMenu > summary:hover { border-color: rgba(184, 102, 227, .36); color: #fff; background: rgba(184, 102, 227, .1); }
.resellerReformTableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 9px 14px;
  color: #6f7380;
  font-size: 8px;
}
.resellerReformTableFooter nav { display: flex; align-items: center; gap: 5px; }
.resellerReformTableFooter nav > span { padding: 0 3px; }
.resellerReformTableFooter button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--rr-border);
  border-radius: 7px;
  color: #9296a3;
  background: rgba(255, 255, 255, .018);
  font-size: 10px;
  cursor: pointer;
}
.resellerReformTableFooter button:hover:not(:disabled) { border-color: rgba(184, 102, 227, .35); color: #fff; }
.resellerReformTableFooter button.active { border-color: rgba(184, 102, 227, .38); color: #fff; background: rgba(184, 102, 227, .18); }
.resellerReformTableFooter button:disabled { opacity: .28; cursor: default; }

/* Summary aside */
.resellerReformAside {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rr-border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 23, 33, .98), rgba(13, 15, 23, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
}
.resellerReformAside header { display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 0 16px; border-bottom: 1px solid var(--rr-border); color: #d6d8df; }
.resellerReformAside header svg { width: 17px; height: 17px; color: #aa70c7; }
.resellerReformAside header strong { font-size: 11px; }
.resellerReformAside > div { display: grid; gap: 3px; padding: 15px 16px; border-bottom: 1px solid rgba(225, 229, 242, .055); }
.resellerReformAside > div span { color: #858997; font-size: 9px; }
.resellerReformAside > div strong { color: var(--rr-text); font-size: 20px; }
.resellerReformAside > div small { color: #5f6371; font-size: 8px; }
.resellerReformAside > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  color: #bf85da;
  background: rgba(184, 102, 227, .035);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.resellerReformAside > button:hover { color: #e0b6f1; background: rgba(184, 102, 227, .075); }
.resellerReformAside > button svg { width: 14px; height: 14px; }

/* Modern dropdowns generated from native selects */
.dashboardShell-reseller .resellerReformToolbar .smartDropdown { width: 100%; height: 42px; }
.dashboardShell-reseller .resellerReformToolbar .smartDropdownTrigger {
  height: 42px;
  padding: 13px 34px 2px 11px;
  border-color: var(--rr-border);
  border-radius: 9px;
  color: #d2d4dc;
  background: #11131c;
  font-size: 9px;
}
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdown { width: 100%; }
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdownTrigger { min-height: 43px; border-color: var(--rr-border); border-radius: 9px; color: #e1e2e8; background: #0e1018; }
.dashboardShell-reseller .resellerReformToolbar .smartDropdownMenu,
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdownMenu {
  z-index: 80;
  border-color: var(--rr-border-strong);
  border-radius: 10px;
  background: #151722;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .48);
}
.dashboardShell-reseller .resellerReformToolbar .smartDropdownOption,
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdownOption { color: #aeb1bd; background: transparent; }
.dashboardShell-reseller .resellerReformToolbar .smartDropdownOption:hover,
.dashboardShell-reseller .resellerReformToolbar .smartDropdownOption.active,
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdownOption:hover,
.dashboardShell-reseller .resellerReformFilterPopover .smartDropdownOption.active { color: #fff; background: rgba(184, 102, 227, .13); }

/* Modal and buttons inherit the calmer workspace language */
body[data-route="reseller"] .modalCard {
  border-color: var(--rr-border-strong);
  background: linear-gradient(145deg, #151722, #0f1119);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .62);
}
body[data-route="reseller"] .modalCard :is(input, select, textarea) { border-color: var(--rr-border); color: var(--rr-text); background: #0d0f16; }

@media (max-width: 1500px) {
  .resellerReformWorkspace { grid-template-columns: 1fr; }
  .resellerReformAside { position: static; grid-template-columns: repeat(3, 1fr); }
  .resellerReformAside header { grid-column: 1 / -1; }
  .resellerReformAside > div { border-right: 1px solid rgba(225,229,242,.055); border-bottom: 0; }
  .resellerReformAside > button { grid-column: 1 / -1; border-top: 1px solid var(--rr-border); }
  .resellerReformFilterPopover { width: min(620px, calc(100vw - 330px)); }
}

@media (max-width: 980px) {
  .dashboardShell-reseller .dashboardSidebar { width: 225px; }
  .dashboardShell-reseller .dashboardMain { padding-inline: 22px; }
  .resellerReformMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resellerReformToolbar { flex-wrap: wrap; }
  .resellerReformSearch { flex-basis: 100%; }
  .resellerReformSelect { flex: 1 1 170px; }
  .resellerReformFilterPopover { width: min(560px, calc(100vw - 280px)); }
}

@media (max-width: 760px) {
  .dashboardShell-reseller { display: block; min-height: 100dvh; }
  .dashboardShell-reseller .dashboardSidebar {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--rr-border);
  }
  .dashboardShell-reseller .dashboardBrand {
    min-height: 64px;
    margin: 0 13px;
    border-bottom: 0;
  }
  .dashboardShell-reseller .dashboardBrand img { width: 112px; }
  .dashboardShell-reseller .dashboardNav { display: block; padding: 0 9px 9px; }
  .dashboardShell-reseller .dashboardNavGroup:not(.active) { display: none; }
  .dashboardShell-reseller .dashboardNavGroup.active { overflow: visible; border: 0; background: transparent; }
  .dashboardShell-reseller .dashboardNavGroupLabel,
  .dashboardShell-reseller .dashboardNavSectionLabel { display: none; }
  .dashboardShell-reseller .dashboardNavGroupItems,
  .dashboardShell-reseller .dashboardNavGroupItems.isSectioned,
  .dashboardShell-reseller .dashboardNavSectionItems {
    display: flex !important;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }
  .dashboardShell-reseller .dashboardNavGroupItems::-webkit-scrollbar { display: none; }
  .dashboardShell-reseller .dashboardNavSection { display: contents; }
  .dashboardShell-reseller .dashboardNavItem { flex: 0 0 auto; min-height: 38px; padding-inline: 12px; }
  .dashboardShell-reseller .dashboardNavItem.active { box-shadow: inset 0 -2px 0 var(--rr-accent); }
  .dashboardShell-reseller .dashboardSidebarFooter { display: none; }
  .dashboardShell-reseller .dashboardWorkspace { width: 100%; min-width: 0; }
  .dashboardShell-reseller .dashboardMain { padding: 18px 13px 60px; }
  .dashboardShell-reseller .dashboardTopbar { min-height: 64px; padding-inline: 14px; }
  .dashboardShell-reseller .dashboardGreeting { border-right: 0; padding-right: 0; }
  .dashboardShell-reseller .dashboardTopContext { display: none; }
  .resellerReformPageHead { align-items: stretch; flex-direction: column; }
  .resellerReformHeadActions { display: grid; grid-template-columns: 1fr 1fr; }
  .resellerReformMetrics { gap: 9px; }
  .resellerReformMetric { min-height: 90px; padding: 13px; gap: 10px; }
  .resellerReformMetric > i { flex-basis: 39px; width: 39px; height: 39px; }
  .resellerReformMetric > i svg { width: 18px; height: 18px; }
  .resellerReformMetric strong { font-size: 21px; }
  .resellerReformMetric small { display: none; }
  .resellerReformToolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .resellerReformSearch { grid-column: 1 / -1; min-width: 0; }
  .resellerReformSelect { min-width: 0; }
  .resellerReformMoreFilters { grid-column: 1 / -1; }
  .resellerReformMoreFilters > summary { width: 100%; }
  .resellerReformFilterPopover { position: fixed; inset: auto 12px 12px; width: auto; max-height: 72vh; overflow: auto; grid-template-columns: 1fr; }
  .resellerReformFilterPopover .resellerFilterActions { grid-column: 1; }
  .resellerReformMain :is(.resellerKeyDirectoryHead, .resellerClientDirectoryHead) { display: none; }
  .resellerReformMain :is(.resellerKeyCleanRow, .resellerClientDirectoryRow) { grid-template-columns: 1fr auto; gap: 10px; padding-block: 13px; }
  .resellerReformMain .resellerKeyCleanRow > :nth-child(2),
  .resellerReformMain .resellerKeyCleanRow > :nth-child(3),
  .resellerReformMain .resellerClientDirectoryRow > :nth-child(2),
  .resellerReformMain .resellerClientDirectoryRow > :nth-child(3) { grid-column: 1; }
  .resellerReformMain .resellerKeyCleanRow > :nth-child(4),
  .resellerReformMain .resellerClientDirectoryRow > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .resellerReformMain .resellerKeyCleanRow > :last-child,
  .resellerReformMain .resellerClientDirectoryRow > :last-child { grid-column: 2; grid-row: 2; }
  .resellerReformAside { grid-template-columns: 1fr; }
  .resellerReformAside header,
  .resellerReformAside > button { grid-column: 1; }
  .resellerReformAside > div { border-right: 0; border-bottom: 1px solid rgba(225,229,242,.055); }
  .resellerReformTableFooter { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .resellerReformMetrics { grid-template-columns: 1fr 1fr; }
  .resellerReformMetric { display: grid; grid-template-columns: 34px 1fr; padding: 11px; }
  .resellerReformMetric > i { width: 34px; height: 34px; }
  .resellerReformMetric span { font-size: 8px; }
  .resellerReformMetric strong { font-size: 18px; }
  .resellerReformHeadActions { grid-template-columns: 1fr; }
}