/* Money 3 finishing layer. Active pages share one surface and motion language.
   Keep layouts, record actions and the fixed account slot in their own files. */
body:is([data-vps-page], [data-account-page]) {
  --money3-action: #176b58;
  --money3-action-hover: #105443;
  --money3-focus: #367756;
  --money3-canvas: #f5f3ee;
  --money3-surface: #fffefb;
  --money3-line: #deddd3;
  --money3-line-soft: #eeece4;
  --money3-ink: #23362c;
  --money3-muted: #68736a;
  --money3-shadow: 0 2px 3px #263c2d03, 0 8px 24px #263c2d05;
  --bg: var(--money3-canvas);
  --panel: var(--money3-surface);
  --line: var(--money3-line);
  --line-soft: var(--money3-line-soft);
  --vps-canvas: var(--money3-canvas);
  --vps-surface: var(--money3-surface);
  --vps-line: var(--money3-line);
  --vps-line-soft: var(--money3-line-soft);
  --vps-action: #176b58;
  --vps-action-hover: #105443;
  --vps-action-soft: #e8f2ec;
  --money3-control-shadow: 0 1px 2px #183b2910, inset 0 1px 0 #ffffff24;
  background: var(--money3-canvas);
}
body:is([data-vps-page], [data-account-page]) :is(.main, .vps-main) {
  background: var(--money3-canvas);
}
body:is([data-vps-page], [data-account-page]) :is(h2, h3, h4) { text-wrap: balance; }
body:is([data-vps-page], [data-account-page]) :is(button, input, select, textarea, a, summary) {
  -webkit-tap-highlight-color: transparent;
}

/* Quiet boxes: a single border, generous corners and one shadow depth. */
body[data-vps-page] :is(.vps-roster-section, .vps-priority-card, .vps-workspace-card),
body[data-vps-page="people"] .people-card-grid .person-card,
body[data-salary-page] :is(.salary-month-panel, .salary-list-panel),
body[data-account-page] .overview-panel.account-section {
  border: 1px solid var(--money3-line);
  border-radius: 16px;
  background: var(--money3-surface);
  box-shadow: var(--money3-shadow);
}
body[data-vps-page] .vps-priority-card.is-clear {
  border-color: #ccddd0;
  background: #f0f5ed;
}
body[data-vps-page] .vps-priority-card.is-attention { border-color: #e8cf9e; }
body[data-vps-page="servers"] :is(.vps-server-controls, .vps-card-grid) {
  border-radius: 16px;
  box-shadow: var(--money3-shadow);
}
body[data-vps-page="servers"] .vps-card-grid > .vps-card:first-child { border-radius: 15px 15px 0 0; }
body[data-vps-page="servers"] .vps-card-grid > .vps-card:last-child { border-radius: 0 0 15px 15px; }
body[data-vps-page="servers"] .vps-card-grid > .vps-card:only-child { border-radius: 15px; }
body[data-vps-page="servers"] .vps-card:focus-within { background-color: #f7faf5; }
body[data-vps-page="people"] .person-card-footer { background: #fafaf5; }
body[data-salary-page] .salary-list-heading { background: #f7f7f0; }
body[data-salary-page] .salary-person-row:focus-within { background: #f5f8f1; }
body[data-account-page] .settings-card-grid { gap: 10px; margin-top: 22px; }
body[data-account-page] .settings-card {
  padding: 18px;
  border: 1px solid var(--money3-line-soft);
  border-radius: 12px;
  background: #fafaf5;
}
body[data-account-page] .settings-card:hover { border-color: #c8d8c9; background: #f1f5ec; }

/* Filters remain compact; the selected collection reads as a tab. */
body[data-vps-page="servers"] .vps-lifecycle-switch {
  display: inline-flex;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--money3-line);
  border-radius: 12px;
  background: #eceee6;
}
body[data-vps-page="servers"] .vps-lifecycle-switch button {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #637067;
  font-size: 12px;
  font-weight: 600;
}
body[data-vps-page="servers"] .vps-lifecycle-switch button[aria-pressed="true"] {
  color: #174f42;
  border-color: #d4decf;
  background: #fffefb;
  box-shadow: 0 1px 4px #263c2d0a;
}
body[data-vps-page="servers"] .vps-lifecycle-switch button > span {
  padding: 1px 5px;
  border-radius: 5px;
  background: #dfe8db;
  color: #3f5c49;
  font-size: 10px;
}

/* Fields gain feedback without competing with the information in the form. */
body[data-vps-page] .vps-form-grid > .field {
  align-self: start;
  align-content: start;
}
body[data-vps-page] .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body[data-salary-page] :is(.salary-main, .salary-dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body[data-account-page] .account-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border-color: #d8ddd0;
  border-radius: 10px;
  background-color: #fdfdf8;
  box-shadow: inset 0 1px 2px #23362c03;
}
body:is([data-vps-page], [data-account-page]) :is(input, select, textarea):focus-visible {
  border-color: #759982;
  outline: 3px solid #b6cbb34d;
  outline-offset: 1px;
}
body[data-vps-page] .vps-password-control > input { border-radius: 10px 0 0 10px; }
body[data-vps-page] .vps-password-field > label:first-child { color: var(--money3-muted); font-size: 12px; font-weight: 500; }
body[data-vps-page] .vps-password-toggle {
  border-color: #d8ddd0;
  border-radius: 0 10px 10px 0;
  background: #f0f4ea;
  font-weight: 600;
}
body[data-vps-page] .vps-password-field[data-has-saved-password="true"] input::placeholder {
  opacity: 1;
  color: #657665;
  font-size: 18px;
  letter-spacing: 3px;
}
body[data-vps-page] .vps-password-status { margin: 0; color: #57735c; font-size: 11px; line-height: 1.4; }
body[data-vps-page] .vps-password-toggle:disabled { color: #798373; background: #f4f5ee; cursor: default; opacity: .65; }
body[data-vps-page] .vps-clear-secret {
  width: fit-content;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
}
body[data-vps-page] .vps-clear-secret input { min-height: 0; width: 14px; height: 14px; }

/* Form groups and dialogs use the same corners as the workspace cards. */
body[data-vps-page] .vps-drawer,
body[data-vps-page] .vps-secret-modal,
body[data-vps-page] .vps-verify-dialog,
body[data-salary-page] .salary-dialog {
  border-color: #d8ddd0;
  border-radius: 20px;
  background: var(--money3-surface);
  box-shadow: 0 24px 80px #1f352b30;
}
body[data-vps-page] .vps-form-section {
  border-color: var(--money3-line);
  border-radius: 13px;
  background: #fdfdf8;
}
body[data-vps-page] .vps-form-section-head { border-color: var(--money3-line-soft); }
body[data-vps-page] .broker-form-section { background: #f5f7ee; }
body[data-vps-page] .vps-sticky-actions { background: var(--money3-surface); border-top-color: var(--money3-line); }
body[data-vps-page] :is(.drawer-backdrop, .vps-modal-backdrop) { background: #1d302b59; }
body[data-salary-page] .salary-dialog::backdrop { background: #1d302b59; }
body[data-vps-page] .vps-verify-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px;
  color: var(--money3-ink);
}
body[data-vps-page] .vps-verify-dialog::backdrop { background: #1d302b59; }
body[data-vps-page] .vps-verify-form { display: grid; gap: 18px; }
body[data-vps-page] .vps-verify-heading { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.03em; }
body[data-vps-page] .vps-verify-description { margin: -9px 0 0; color: var(--money3-muted); font-size: 13px; line-height: 1.5; }
body[data-vps-page] .vps-verify-dialog [hidden] { display: none !important; }
body[data-vps-page] .vps-verify-error { margin: 0; padding: 10px 12px; color: #9d3e35; background: #fff0e8; border: 1px solid #ebc9bc; border-radius: 9px; font-size: 12px; }
body[data-vps-page] .vps-verify-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
body[data-vps-page] .vps-verify-actions button[type="submit"] {
  color: #fffefb;
  border-color: #176b58;
  background: #176b58;
}
body[data-vps-page] .vps-verify-actions button[type="submit"]:hover { background: #125544; }
body[data-vps-page] .vps-wizard-progress li:has(button[data-vps-step-target]) { display: block; }
body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] > span {
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #d5ddd0;
  border-radius: 50%;
  background: #f4f6ef;
  font-size: 11px;
  font-weight: 600;
}
body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] > strong { font-size: 12px; font-weight: 600; }
body[data-vps-page] .vps-wizard-progress li.is-active button[data-vps-step-target] > span { color: white; background: #176b58; border-color: #176b58; }

/* Match the Registry's warm desktop rail without moving the account controls. */
@media (min-width: 1025px) {
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]),
  body[data-workspace-navigation][data-workspace-page]:is([data-vps-page], [data-account-page]) {
    --account-slot-copy: #3f4942;
    --account-slot-line: #cfcfc0;
    --account-slot-hover: #e2e8dc;
  }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar {
    color: #334337;
    background: #eeeee4;
    border-right-color: #dbddcf;
  }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar .brand h1 { color: #273d2f; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar :is(.brand p, .sidebar-label, .side-card small, .mini-stat, .mini-stat strong) { color: #687466; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .brand-logo { background: #fffef8; border-color: #d7ddcb; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar .sidebar-primary-link { color: #566352; background: transparent; border-color: transparent; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar .sidebar-primary-link:hover { background: #e4eadc; border-color: #d4ddc9; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar .sidebar-primary-link.active { color: #23523c; background: #e0ead9; border-color: #c9d9be; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar :is(.nav-icon, .tool-icon) { color: #52704d; background: #f9fbf2; border-color: #d8e1cd; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar :is(.nav-icon, .tool-icon)::before { color: inherit; }
  body[data-workspace-navigation]:is([data-vps-page], [data-account-page]) .app-shell .sidebar .side-card { border-top-color: #d6decc; }
}

/* Interaction timing and reveal behavior live in money3-motion.css. */
@media (max-width: 640px) {
  body[data-vps-page="servers"] .vps-lifecycle-switch { display: flex; }
  body[data-vps-page="servers"] .vps-lifecycle-switch button { flex: 1; min-height: 42px; padding-inline: 6px; }
  body[data-vps-page="servers"] .vps-card-grid { border-radius: 0; box-shadow: none; }
  body[data-vps-page="servers"] .vps-card-grid > .vps-card,
  body[data-vps-page="servers"] .vps-card-grid > .vps-card:first-child,
  body[data-vps-page="servers"] .vps-card-grid > .vps-card:last-child { border-radius: 15px; box-shadow: var(--money3-shadow); }
  body[data-vps-page] .vps-drawer { border-radius: 0; }
  body[data-account-page] .settings-card { padding: 16px 12px; }
  body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] { gap: 5px; min-height: 36px; }
  body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] > span { flex-basis: 23px; width: 23px; height: 23px; }
  body[data-vps-page] .vps-wizard-progress button[data-vps-step-target] > strong { font-size: 10px; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"]) *,
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"]) *::before,
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"]) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* A useful home: one brand moment, real totals, then the next things to do. */
body[data-vps-page="overview"] .money3-overview-hero {
  position: relative;
  isolation: isolate;
  min-height: 214px;
  margin: 0 0 22px;
  padding: 28px 32px;
  overflow: hidden;
  color: #fffdf5;
  background: linear-gradient(112deg, #193f32 0%, #254f3d 68%, #355a40 100%);
  border: 1px solid #284d39;
  border-radius: 22px;
  box-shadow: 0 10px 28px #23413212;
}
body[data-vps-page="overview"] .money3-overview-hero::before {
  position: absolute;
  z-index: -1;
  top: -155px;
  right: -90px;
  width: 450px;
  height: 450px;
  content: "";
  border: 1px solid #c3d1a91a;
  border-radius: 50%;
  box-shadow: 0 0 0 48px #baceb005, 0 0 0 98px #baceb004;
}
body[data-vps-page="overview"] .money3-hero-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 75%;
}
body[data-vps-page="overview"] .money3-overview-hero .page-kicker {
  margin: 0 0 10px;
  color: #e1c98c !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
body[data-vps-page="overview"] .money3-overview-hero h2 {
  max-width: 590px;
  color: #fffdf5;
  font-size: clamp(28px, 3vw, 39px);
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}
body[data-vps-page="overview"] .money3-overview-hero .money3-hero-copy > p:last-of-type {
  margin: 12px 0 0;
  color: #d5e2d0;
  font-size: 13px;
  line-height: 1.5;
}
body[data-vps-page="overview"] .money3-overview-hero .top-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 22px;
}
body[data-vps-page="overview"] .money3-overview-hero .vps-primary-action {
  gap: 9px;
  min-height: 42px;
  padding: 10px 16px;
  color: #25402f !important;
  background: #f1dca7 !important;
  border-color: #f1dca7 !important;
}
body[data-vps-page="overview"] .money3-overview-hero .vps-primary-action:hover {
  background: #ffe9b5 !important;
  border-color: #ffe9b5 !important;
}
body[data-vps-page="overview"] .money3-overview-hero .vps-primary-action > span { font-size: 20px; font-weight: 400; line-height: 1; }
body[data-vps-page="overview"] .money3-overview-hero .vps-quiet-action {
  gap: 18px;
  min-height: 42px;
  padding: 10px 15px;
  color: #f7f7e9 !important;
  background: #ffffff0a !important;
  border-color: #c3d4bb47;
}
body[data-vps-page="overview"] .money3-overview-hero .vps-quiet-action:hover { color: #fff !important; background: #ffffff18 !important; border-color: #d8dfc780; }
body[data-vps-page="overview"] .money3-hero-tree {
  position: absolute;
  z-index: 0;
  right: 26px;
  bottom: -18px;
  width: 235px;
  height: 235px;
  pointer-events: none;
  object-fit: contain;
  opacity: .95;
}
body[data-vps-page="overview"] .money3-overview-metrics { gap: 12px; margin: 0 0 26px; }
body[data-vps-page="overview"] .vps-overview .money3-metric {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-rows: 32px auto auto auto;
  align-content: start;
  justify-content: start;
  gap: 0;
  min-width: 0;
  min-height: 155px;
  padding: 16px 18px;
  overflow: hidden;
  color: var(--money3-ink);
  text-decoration: none;
  background: #fffefb;
  border: 1px solid #dedfd1;
  border-radius: 16px;
  box-shadow: var(--money3-shadow);
}
body[data-vps-page="overview"] .money3-metric-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #32674d;
  background: #e4efdf;
  border-radius: 9px;
}
body[data-vps-page="overview"] .money3-metric-icon svg { width: 20px; height: 20px; }
body[data-vps-page="overview"] .vps-overview .money3-metric .panel-label {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 13px 0 4px;
  color: #5e6c60;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
}
body[data-vps-page="overview"] .vps-overview .money3-metric > strong {
  grid-column: 1 / -1;
  grid-row: 3;
  color: #234c36;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
body[data-vps-page="overview"] .vps-overview .money3-metric > small {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 6px;
  color: #6e786b;
  font-size: 11px;
  line-height: 1.4;
}
body[data-vps-page="overview"] .money3-metric-arrow { grid-column: 2; grid-row: 1; color: #71836d; font-size: 18px; text-align: right; }
body[data-vps-page="overview"] .vps-overview .money3-metric--due,
body[data-vps-page="overview"] .vps-overview .money3-metric--due[data-tone="muted"] { background: #fcf7e9; border-color: #e8dcc0; }
body[data-vps-page="overview"] .money3-metric--due .money3-metric-icon { color: #95712e; background: #f1e6c6; }
body[data-vps-page="overview"] .vps-overview .money3-metric--due > strong { color: #8a6526; }
body[data-vps-page="overview"] .vps-overview .money3-metric--overdue,
body[data-vps-page="overview"] .vps-overview .money3-metric--overdue[data-tone="muted"] { background: #fbf0e9; border-color: #ead8ca; }
body[data-vps-page="overview"] .money3-metric--overdue .money3-metric-icon { color: #ad6346; background: #f3dfd0; }
body[data-vps-page="overview"] .vps-overview .money3-metric--overdue > strong { color: #a2573f; }
body[data-vps-page="overview"] .vps-overview .money3-metric--people { background: #eef3e6; border-color: #d8e0cb; }
body[data-vps-page="overview"] .money3-metric--people .money3-metric-icon { color: #63753e; background: #e0e8cf; }
body[data-vps-page="overview"] .vps-overview .money3-metric:hover { border-color: #8eab8d; box-shadow: 0 5px 18px #274d3210; }
body[data-vps-page="overview"] .money3-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(295px, 1fr);
  grid-template-areas: "servers renewals" "servers links";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 22px;
}
body[data-vps-page="overview"] .money3-overview-grid > .vps-priority-focus { grid-area: renewals; min-width: 0; margin: 0; }
body[data-vps-page="overview"] .money3-overview-grid > .vps-roster-section { grid-area: servers; min-width: 0; margin: 0; align-self: stretch; }
body[data-vps-page="overview"] .money3-overview-grid > .vps-roster-section:has(.vps-roster-empty:not(.hidden)) { align-self: start; }
body[data-vps-page="overview"] .money3-overview-grid > .vps-management-section { grid-area: links; min-width: 0; margin: 0; }
body[data-vps-page="overview"] :is(.vps-priority-label, .vps-management-head) { margin: 0 0 11px; }
body[data-vps-page="overview"] :is(.vps-priority-label, .vps-management-head, .vps-roster-head) .panel-label { color: #74806f; font-size: 9px; letter-spacing: .08em; }
body[data-vps-page="overview"] :is(.vps-priority-label, .vps-management-head) h3 { color: #2c4935; font-size: 17px; }
body[data-vps-page="overview"] .vps-priority-card.is-clear { padding: 18px; border-color: #cddcc5; background: #eaf1e3; }
body[data-vps-page="overview"] .vps-alert-clear { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; min-height: 0; }
body[data-vps-page="overview"] .vps-alert-clear .vps-security-mark { width: 36px; height: 36px; color: #3f7150; background: #f8fbf0; border-color: #cfdfc1; border-radius: 50%; }
body[data-vps-page="overview"] .vps-alert-clear strong { font-size: 19px; line-height: 1.2; }
body[data-vps-page="overview"] .vps-alert-clear p:not(.panel-label) { margin-top: 6px; color: #5c6e55; font-size: 11px; line-height: 1.55; }
body[data-vps-page="overview"] .vps-alert-clear .vps-priority-action { grid-column: 2; justify-self: start; margin-top: 4px; }
body[data-vps-page="overview"] .vps-priority-action { color: #276244; background: #fffdf6; border-color: #bed0b4; font-size: 11px; }
body[data-vps-page="overview"] .vps-priority-action:hover { color: white; background: #246645; border-color: #246645; }
body[data-vps-page="overview"] .vps-alert-row { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px; }
body[data-vps-page="overview"] .vps-alert-icon { width: 28px; height: 28px; }
body[data-vps-page="overview"] .vps-alert-actions { grid-column: 2; justify-content: flex-start; margin-top: 2px; }
body[data-vps-page="overview"] .vps-alert-actions a { min-height: 32px; padding: 6px 10px; font-size: 11px; }
body[data-vps-page="overview"] .vps-priority-footer { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 14px; font-size: 10px; }
body[data-vps-page="overview"] .vps-priority-card .vps-section-head { min-height: 0; padding: 13px 14px; }
body[data-vps-page="overview"] .vps-priority-card .vps-section-head h3 { font-size: 17px; }
body[data-vps-page="overview"] .vps-roster-head { min-height: 76px; padding: 18px; background: #f9faf4; }
body[data-vps-page="overview"] .vps-roster-head h3 { color: #294832; font-size: 18px; }
body[data-vps-page="overview"] .vps-roster-head > a { gap: 12px; min-height: 34px; padding: 7px 10px; border-color: #d4dfcd; font-size: 11px; }
body[data-vps-page="overview"] .vps-roster-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; min-height: 113px; padding: 16px; border-left-width: 3px; }
body[data-vps-page="overview"] .vps-roster-identity { grid-column: 1; grid-row: 1; }
body[data-vps-page="overview"] .vps-roster-identity strong { font-size: 14px; }
body[data-vps-page="overview"] .vps-roster-identity > div > span { max-width: 270px; font-size: 10px; }
body[data-vps-page="overview"] .vps-roster-renewal { grid-column: 2; grid-row: 1; text-align: right; }
body[data-vps-page="overview"] .vps-roster-renewal > span { font-size: 9px; }
body[data-vps-page="overview"] .vps-roster-renewal > strong { font-size: 12px; }
body[data-vps-page="overview"] .vps-roster-brokers { grid-column: 1; grid-row: 2; gap: 10px; }
body[data-vps-page="overview"] .vps-roster-broker > strong { max-width: 110px; font-size: 10px; }
body[data-vps-page="overview"] .vps-roster-open { grid-column: 2; grid-row: 2; min-height: 32px; padding: 6px 13px; color: #2f6248; border-color: #c5d5be; background: #f0f5e9; font-size: 10px; }
body[data-vps-page="overview"] .vps-roster-open:hover { color: white; background: #176b58; border-color: #176b58; }
body[data-vps-page="overview"] .vps-roster-empty { display: flex; min-height: 270px; flex-direction: column; justify-content: center; align-items: center; gap: 15px; padding: 32px; background: radial-gradient(ellipse at center, #edf3e4, #fffefb 70%); }
body[data-vps-page="overview"] .vps-roster-empty > img { width: 74px; height: 74px; }
body[data-vps-page="overview"] .vps-roster-empty > p { margin: 0; max-width: 260px; color: #5f7058; font-size: 13px; text-align: center; }
body[data-vps-page="overview"] .vps-workspace-grid.vps-supporting-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body[data-vps-page="overview"] .vps-workspace-card { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; min-height: 113px; padding: 16px; background: #f8f6ed; border-color: #e2ddca; }
body[data-vps-page="overview"] .vps-workspace-card--people { background: #f0f3e8; border-color: #d8dfca; }
body[data-vps-page="overview"] .vps-workspace-step { width: 34px; height: 34px; color: #8b7135; background: #efe6ce; border-color: #e2d6b5; font-size: 17px; font-family: inherit; }
body[data-vps-page="overview"] .vps-workspace-card--people .vps-workspace-step { color: #59713e; background: #e1e8d2; border-color: #d1dcbe; }
body[data-vps-page="overview"] .vps-workspace-card h3 { margin: 2px 0 0; color: #304b36; font-size: 16px; }
body[data-vps-page="overview"] .vps-workspace-card-head .panel-label { color: #7a7e69; font-size: 9px; }
body[data-vps-page="overview"] .vps-workspace-card-head > strong { min-width: 22px; color: #657149; background: #fffef8; border-color: #d8ddcc; }
body[data-vps-page="overview"] .vps-workspace-card-copy > p { margin: 5px 0 9px; font-size: 11px; }
body[data-vps-page="overview"] .vps-workspace-card-action { font-size: 11px; }
body[data-vps-page="overview"] .vps-workspace-card:hover { color: #304b36; background: #f4f4e7; border-color: #b7c8a9; transform: none; }

/* Clickable surfaces share visible, restrained emerald affordances. */
body:is([data-vps-page], [data-account-page]) :is(button, a, summary) { touch-action: manipulation; }
body[data-vps-page] :is(.vps-secondary-button, .vps-quiet-action, .vps-roster-open, .vps-roster-head > a, .vps-alert-actions a) { color: #245f47; border-color: #c0d1bd; }
body[data-vps-page] :is(.vps-secondary-button, .vps-quiet-action, .vps-roster-open, .vps-roster-head > a):hover { color: #164e38; background: #e5efdf; border-color: #8cac8c; }
body[data-vps-page] :is(.vps-card-actions button, .credential-row button, .vps-password-toggle) { color: #356148; background: #f0f5e9; border-color: #c8d8bf; }
body[data-vps-page] :is(.vps-card-actions button, .credential-row button, .vps-password-toggle):hover { color: #204f37; background: #dfead5; border-color: #9eb795; }
body[data-vps-page] .vps-card-actions button.renew { color: #fff; background: #176b58; border-color: #176b58; }
body[data-vps-page] .vps-card-actions button.renew:hover { background: #105443; border-color: #105443; }
body:is([data-vps-page], [data-account-page]) :is(button, a, summary):focus-visible { outline: 3px solid #5c9b77; outline-offset: 3px; }
body:is([data-vps-page], [data-account-page]) :is(button, a, summary):disabled { cursor: not-allowed; }
body[data-vps-page="servers"] .vps-workspace-nav--quiet { position: relative; top: auto; z-index: auto; }
body[data-vps-page="servers"] .vps-lifecycle-switch[data-money3-scroll-shadow] {
  position: sticky;
  top: 12px;
  z-index: 15;
  width: fit-content;
  isolation: isolate;
  background: #e7ebdf;
  border-color: #cdd7c4;
}

/* Settings deserves the same hierarchy as the daily workspace. */
body[data-account-page] .settings-menu { gap: 6px; padding: 5px; margin-bottom: 24px; background: #e9ede2; border: 1px solid #d9e0cf; border-radius: 13px; }
body[data-account-page] .settings-option { gap: 7px; min-height: 40px; padding: 9px 14px; color: #64705e; border: 1px solid transparent; border-radius: 9px; }
body[data-account-page] .settings-option strong { font-size: 12px; }
body[data-account-page] .settings-option .tool-icon { display: block; flex: 0 0 15px; width: 15px; height: 15px; color: inherit; background: none; border: 0; }
body[data-account-page] .settings-option .tool-icon::before { width: 15px; height: 15px; color: inherit; }
body[data-account-page] .settings-option:hover { color: #285a3e; background: #f6f8ef; }
body[data-account-page] .settings-option.active { color: #fffef6; background: #236548; border-color: #236548; box-shadow: 0 2px 5px #264c2912; }
body[data-account-page] .overview-panel.account-section { padding: clamp(20px, 2.5vw, 32px); }
body[data-account-page] .settings-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 24px; }
body[data-account-page] .settings-card { grid-template-columns: 40px minmax(0, 1fr) 15px; min-height: 127px; padding: 21px; background: #f2f5eb; border: 1px solid #d7e0cb; border-radius: 14px; text-align: left; }
body[data-account-page] .settings-card strong { align-self: end; color: #30513a; font-size: 15px; }
body[data-account-page] .settings-card small { color: #6a7662; font-size: 12px; }
body[data-account-page] .settings-card > .tool-icon { width: 40px; height: 40px; color: #39704e; background: #e4edda; border-color: #d0dfc5; border-radius: 11px; }
body[data-account-page] .settings-card::after { color: #587a4c; font-size: 24px; }
body[data-account-page] .settings-card:hover { background: #eaf0e0; border-color: #a4bd95; }
body[data-account-page] .settings-card.migration-card { background: #fcf6e5; border-color: #e8dcb9; }
body[data-account-page] .settings-card.migration-card > .tool-icon { color: #8f6f2d; background: #f1e5be; border-color: #e4d49f; }
body[data-account-page] .settings-card.migration-card strong { color: #725b2a; }
body[data-account-page] .settings-card.migration-card:hover { background: #f8efd7; border-color: #c9b477; }
body[data-account-page] .settings-card[data-settings-jump="security"] { background: #e6f0e9; border-color: #c3d9cc; }
body[data-account-page] .settings-card[data-settings-jump="security"] > .tool-icon { color: #1f684b; background: #d4e6d9; border-color: #b9d4c0; }
body[data-account-page] .settings-card[data-settings-jump="security"]:hover { background: #dcebe0; border-color: #89b59a; }
body[data-account-page] .settings-card[data-settings-jump="system"] { background: #f7f7ee; border-color: #dedfcb; }
body[data-account-page] .settings-card.danger-zone { background: #fbf0e9; border-color: #ebd7c9; }
body[data-account-page] .settings-card.danger-zone strong { color: #9b5a40; }
body[data-account-page] .settings-card.danger-zone:hover { background: #f7e6dc; border-color: #d1aa90; }
body[data-account-page] .account-security-hero { display: flex; align-items: center; gap: 14px; padding: 19px 21px; margin-bottom: 24px; background: #edf3e6; border: 1px solid #cfdfc2; border-radius: 14px; }
body[data-account-page] .security-status-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 10px; color: #416542; background: #e3edda; border: 1px solid #cbdcbf; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
body[data-account-page] .security-status-pill::before { width: 6px; height: 6px; content: ""; background: currentColor; border-radius: 50%; }

@media (max-width: 1200px) {
  body[data-vps-page="overview"] .money3-overview-grid { grid-template-columns: minmax(0, 1.25fr) minmax(270px, 1fr); gap: 18px; }
  body[data-vps-page="overview"] .money3-hero-tree { right: 8px; width: 215px; height: 215px; }
  body[data-vps-page="overview"] .money3-overview-hero h2 { font-size: 32px; }
  body[data-vps-page="overview"] .vps-overview .money3-metric { padding: 15px; }
  body[data-account-page] .settings-option { padding-inline: 10px; }
}
@media (max-width: 900px) {
  body[data-vps-page="overview"] .money3-overview-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "renewals" "servers" "links"; gap: 22px; }
  body[data-vps-page="overview"] .vps-workspace-grid.vps-supporting-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-vps-page="overview"] .vps-alert-clear { grid-template-columns: 40px minmax(0, 1fr) auto; }
  body[data-vps-page="overview"] .vps-alert-clear .vps-priority-action { grid-column: 3; margin: 0; }
  body[data-vps-page="overview"] .money3-overview-hero { padding: 25px; }
  body[data-vps-page="overview"] .money3-overview-metrics { gap: 9px; }
  body[data-vps-page="overview"] .vps-overview .money3-metric { padding: 13px; }
  body[data-account-page] .settings-card { padding: 18px 15px; gap: 10px; }
}
@media (max-width: 640px) {
  body[data-vps-page="servers"] .vps-lifecycle-switch[data-money3-scroll-shadow] { top: 72px; width: 100%; }
  body[data-vps-page="overview"] .money3-overview-hero { min-height: 237px; padding: 24px 21px; margin-bottom: 20px; border-radius: 18px; }
  body[data-vps-page="overview"] .money3-hero-copy { max-width: 100%; }
  body[data-vps-page="overview"] .money3-overview-hero h2 { max-width: 250px; font-size: 29px; }
  body[data-vps-page="overview"] .money3-overview-hero .money3-hero-copy > p:last-of-type { max-width: 225px; font-size: 12px; }
  body[data-vps-page="overview"] .money3-hero-tree { right: -38px; bottom: -12px; width: 174px; height: 174px; opacity: .36; }
  body[data-vps-page="overview"] .money3-overview-hero .top-actions { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  body[data-vps-page="overview"] .money3-overview-hero .top-actions > a { flex: 0 0 auto; min-height: 40px; padding: 9px 12px; font-size: 11px; }
  body[data-vps-page="overview"] .vps-overview.money3-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 23px; }
  body[data-vps-page="overview"] .vps-overview .money3-metric { min-height: 151px; padding: 15px; border-radius: 14px; }
  body[data-vps-page="overview"] .vps-overview .money3-metric > strong { font-size: 29px; }
  body[data-vps-page="overview"] .vps-alert-clear { grid-template-columns: 36px minmax(0, 1fr); padding: 17px; }
  body[data-vps-page="overview"] .vps-alert-clear .vps-priority-action { grid-column: 2; margin-top: 5px; }
  body[data-vps-page="overview"] .vps-workspace-grid.vps-supporting-links { grid-template-columns: minmax(0, 1fr); }
  body[data-vps-page="overview"] .vps-roster-row { gap: 12px; padding: 15px 13px; }
  body[data-vps-page="overview"] .vps-roster-brokers { flex-wrap: wrap; }
  body[data-vps-page="overview"] .vps-roster-broker > strong { max-width: 98px; }
  body[data-vps-page="overview"] .vps-roster-empty { min-height: 230px; padding: 28px 20px; }
  body[data-account-page] .settings-menu { gap: 4px; padding: 4px; margin-bottom: 20px; }
  body[data-account-page] .settings-option { min-height: 39px; padding: 8px 10px; gap: 5px; }
  body[data-account-page] .settings-option .tool-icon { display: none; }
  body[data-account-page] .settings-option strong { font-size: 11px; }
  body[data-account-page] .settings-card-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
  body[data-account-page] .settings-card { min-height: 98px; padding: 18px 15px; column-gap: 13px; }
  body[data-account-page] .account-security-hero { flex-wrap: wrap; padding: 16px; }
}


/* Product controls: one weight, radius and focus language across real actions.
   Page-specific composition remains in the Registry/Account companions. */
body:is([data-vps-page], [data-account-page]) :is(.primary-button, .ghost-button, .danger-button, .salary-button, .session-block-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  box-shadow: var(--money3-control-shadow);
}
body:is([data-vps-page], [data-account-page]) :is(.primary-button, .salary-primary):not(.vps-secondary-button):not(.danger-button) {
  border-color: #176b58;
  color: #fffefb;
  background: #176b58;
  box-shadow: 0 2px 3px #174c3514, inset 0 1px 0 #ffffff24;
}
body:is([data-vps-page], [data-account-page]) :is(.primary-button, .salary-primary):not(.vps-secondary-button):not(.danger-button):hover:not(:disabled) {
  border-color: #105443;
  background: #105443;
}
body:is([data-vps-page], [data-account-page]) :is(.ghost-button, .vps-secondary-button, .salary-button:not(.salary-primary):not(.salary-danger)) {
  color: #365447;
  background: #fffefb;
  border: 1px solid #d6ddd0;
}
body:is([data-vps-page], [data-account-page]) :is(.ghost-button, .vps-secondary-button, .salary-button:not(.salary-primary):not(.salary-danger)):hover:not(:disabled) {
  color: #174f3e;
  border-color: #a7bba7;
  background: #f0f5eb;
}
body:is([data-vps-page], [data-account-page]) :is(.danger-button, .session-block-button, .salary-danger) {
  color: #934b3d;
  background: #fcf4ef;
  border: 1px solid #e7cfc2;
}
body:is([data-vps-page], [data-account-page]) :is(.danger-button, .session-block-button, .salary-danger):hover:not(:disabled) {
  color: #803d30;
  background: #f7e8df;
  border-color: #cba48f;
}
body:is([data-vps-page], [data-account-page]) :is(button, a, summary):focus-visible {
  outline: 3px solid var(--money3-focus);
  outline-offset: 3px;
}
body:is([data-vps-page], [data-account-page]) :is(.primary-button, .ghost-button, .danger-button, .salary-button, .session-block-button):disabled {
  opacity: .5;
  box-shadow: none;
  cursor: not-allowed;
}
body:is([data-vps-page], [data-account-page]) :is(.primary-button, .ghost-button, .danger-button, .salary-button) > .m3-icon {
  width: 16px;
  height: 16px;
}
body[data-vps-page] .person-card-footer button,
body[data-vps-page] .vps-card-menu-popover > button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 550;
}
body[data-vps-page] .person-card-footer button { border-radius: 8px; }
body[data-vps-page] .person-card-footer button[data-person-action="archive"] { color: #8f644b; }
body[data-vps-page] .vps-filter-disclosure > summary { border-radius: 10px; }
body[data-vps-page] .vps-password-toggle { min-width: 82px; }
body[data-vps-page] :is(.credential-row, .vps-inline-secret-row) button { display: inline-flex; align-items: center; justify-content: center; }
body[data-vps-page] .vps-card-actions button[data-vps-action="details"] { gap: 7px; }
body[data-vps-page] .vps-form-actions { gap: 10px; }
body[data-vps-page] .vps-wizard-progress button { box-shadow: none; }

/* Monthly salary keeps a compact ledger hierarchy with the same warm surfaces. */
body[data-salary-page] .salary-month-panel { padding: 25px; border-color: #d5dece; }
body[data-salary-page] .salary-month-heading h3 { font-size: 27px; color: #254834; }
body[data-salary-page] .salary-eyebrow { color: #687866; font-size: 11px; letter-spacing: .02em; }
body[data-salary-page] .salary-month-summary { border-top-color: #e6e9de; padding-top: 19px; }
body[data-salary-page] .salary-list-toolbar { padding: 19px 21px 14px; background: #fafbf6; }
body[data-salary-page] .salary-avatar { border: 1px solid #d9e3ce; color: #466544; background: #ebf1e2; border-radius: 12px; }
body[data-salary-page] .salary-person-row { padding-block: 21px; }
body[data-salary-page] .salary-list-heading { font-size: 11px; letter-spacing: .02em; }
body[data-salary-page] .salary-person-actions .salary-button { min-height: 36px; font-size: 11px; }
body[data-salary-page] .salary-local-nav { gap: 4px; padding: 4px; width: fit-content; border: 1px solid #dde3d5; border-radius: 10px; background: #eceedf; }
body[data-salary-page] .salary-local-nav a { padding: 7px 12px; font-size: 12px; }
body[data-salary-page] .salary-local-nav a[aria-current] { background: #fffefb; border-radius: 7px; box-shadow: 0 1px 3px #243a2010; }
body[data-salary-page] .salary-person-actions .salary-link { border-color: transparent; box-shadow: none; background: transparent; }
@media (max-width: 640px) {
  body[data-salary-page] .salary-month-panel { padding: 20px 17px; }
  body[data-salary-page] .salary-list-toolbar { flex-wrap: wrap; padding: 15px; }
  body[data-salary-page] .salary-list-toolbar > label { flex: 1 1 100%; min-width: 0; }
  body[data-salary-page] .salary-person-row { padding: 18px 15px; }
  body[data-salary-page] .salary-person-actions { flex-wrap: wrap; padding-left: 0; }
  body:is([data-vps-page], [data-account-page]) .form-actions { flex-wrap: wrap; }
}
@media (max-width: 1024px), (pointer: coarse) {
  body[data-vps-page] #vpsDrawer :is(input, select, textarea) { font-size: 16px; }
  body[data-salary-page] :is(.salary-main, .salary-dialog) :is(input, select) { font-size: 16px; }
  body[data-salary-page] .salary-person-actions .salary-button { min-height: 44px; }
  body[data-vps-page] .person-card-footer button { min-height: 44px; }
}