/* Cloud White / Blue. Loaded after the legacy styles; no external font requests. */
:root,
.dashboard-page,
.login-page {
  --cloud-blue: #245ce6;
  --cloud-blue-hover: #1749c6;
  --cloud-bg: #f4f7fc;
  --cloud-ink: #182a49;
  --cloud-muted: #64748b;
  --cloud-line: #e1e8f2;
  --cloud-soft: #edf3ff;
  --cloud-shadow: 0 4px 18px rgba(31, 60, 109, .035);
  --bg: var(--cloud-bg);
  --surface: #fff;
  --panel: #fff;
  --ink: var(--cloud-ink);
  --muted: var(--cloud-muted);
  --line: var(--cloud-line);
  --accent: var(--cloud-blue);
  --accent-dark: var(--cloud-blue-hover);
  --accent-soft: var(--cloud-soft);
  --neu-bg: var(--cloud-bg);
  --neu-surface: #fff;
  --neu-surface-strong: #fff;
  --neu-ink: var(--cloud-ink);
  --neu-muted: var(--cloud-muted);
  --neu-line: var(--cloud-line);
  --neu-blue: var(--cloud-blue);
  --neu-blue-dark: var(--cloud-blue-hover);
  --neu-teal: #19886d;
  --neu-raised: var(--cloud-shadow);
  --neu-raised-small: none;
  --neu-inset: none;
  color: var(--cloud-ink);
  background: var(--cloud-bg);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
.dashboard-page button, .login-page button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.dashboard-page input[type="checkbox"],
.dashboard-page input[type="radio"] { accent-color: var(--cloud-blue); }
.dashboard-page :is(button, a, input, select, textarea):focus-visible,
.login-page :is(button, a, input):focus-visible { outline: 3px solid #a8c3ff; outline-offset: 3px; }
.dashboard-page ::selection, .login-page ::selection { color: #102c65; background: #dce8ff; }

/* Application frame and navigation. */
.dashboard-page .dashboard-shell { grid-template-columns: 228px minmax(0, 1fr); }
.dashboard-page :is(.dashboard-shell, .workspace-shell, .content-shell) { background: var(--cloud-bg); }
.dashboard-page .sidebar { padding: 21px 14px 28px; border-right: 1px solid var(--cloud-line); background: #fff; box-shadow: none; }
.dashboard-page .sidebar-header { min-height: 55px; margin: 0 2px 23px; padding: 0 9px; }
.dashboard-page .drawer-brand strong { font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.dashboard-page .drawer-brand small { margin-top: 4px; color: var(--cloud-muted); font-size: 11px; font-weight: 400; }
.dashboard-page .drawer-brand .brand-mark,
.dashboard-page .topbar-mobile-brand .brand-mark { border: 0; border-radius: 11px; background: var(--cloud-blue); box-shadow: none; }
.dashboard-page .side-nav { gap: 5px; margin-top: 14px; }
.dashboard-page .nav-item { min-height: 46px; height: 46px; gap: 12px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; color: #53657e; font-size: 15px; font-weight: 500; line-height: 1.25; box-shadow: none; }
.dashboard-page .nav-item svg { width: 19px; height: 19px; flex-basis: 19px; stroke-width: 1.7; }
.dashboard-page .nav-item:hover { color: var(--cloud-blue); background: #f5f8ff; box-shadow: none; }
.dashboard-page .nav-item.is-active { border-color: transparent; color: var(--cloud-blue); background: #eaf1ff; font-weight: 600; box-shadow: none; }
.dashboard-page .nav-count-badge { width: auto; min-width: 28px; height: 22px; padding: 0 6px; border: 0; border-radius: 6px; color: #5776a6; background: #f0f4fa; font-size: 12px; font-weight: 500; }
.dashboard-page .nav-item.is-active .nav-count-badge { color: var(--cloud-blue); background: #dbe7ff; }
.dashboard-page .topbar { border-bottom: 1px solid var(--cloud-line); background: rgba(255, 255, 255, .98); box-shadow: none; backdrop-filter: none; }
.dashboard-page .topbar-inner { min-height: 72px; padding: 0 34px; gap: 18px; }
.dashboard-page .topbar-breadcrumb { gap: 12px; font-size: 14px; }
.dashboard-page .topbar-breadcrumb strong { color: var(--cloud-ink); font-weight: 600; }
.dashboard-page .topbar-update { color: #76849a; font-size: 12px; }
.dashboard-page .platform-switcher-toggle { min-height: 40px; padding: 0 13px; border-color: #d8e3f5; border-radius: 8px; background: #f8faff; color: var(--cloud-ink); }
.dashboard-page .platform-switcher-toggle:hover { border-color: #b9cdf6; background: #eff5ff; }
.dashboard-page .platform-switcher-toggle strong { font-size: 14px; font-weight: 600; }
.dashboard-page .platform-switcher-label { font-size: 12px; color: var(--cloud-muted); }
.dashboard-page .platform-switcher-menu { padding: 7px; border-color: var(--cloud-line); border-radius: 12px; box-shadow: 0 12px 36px rgba(30, 55, 97, .13); }
.dashboard-page .platform-option { border: 0; border-radius: 7px; background: transparent; }
.dashboard-page .platform-option b { font-size: 14px; font-weight: 600; }
.dashboard-page .platform-option small { font-size: 12px; }
.dashboard-page .platform-option:hover, .dashboard-page .platform-option.is-current { background: var(--cloud-soft); }
.dashboard-page .platform-option.is-current i { color: var(--cloud-blue); }
.dashboard-page :is(.refresh-link, .menu-toggle, .sidebar-close, .language-toggle, .account-pill) { border: 1px solid var(--cloud-line); border-radius: 8px; color: #587091; background: #fff; box-shadow: none; }
.dashboard-page :is(.refresh-link, .menu-toggle, .sidebar-close, .language-toggle):hover { border-color: #bfd0f2; color: var(--cloud-blue); background: #f5f8ff; box-shadow: none; }
.dashboard-page .account-pill { border-radius: 20px; }
.dashboard-page .account-avatar { border: 0; background: #e7effe; box-shadow: none; }
.dashboard-page .account-avatar img { filter: brightness(0) saturate(100%) invert(34%) sepia(79%) saturate(3938%) hue-rotate(218deg) brightness(95%) contrast(89%); }
.dashboard-page .account-name { color: #435776; font-size: 13px; }
.dashboard-page .link-button { color: #697b93; font-size: 13px; }
.dashboard-page .content-shell { width: 100%; max-width: 1700px; padding: 30px 34px 42px; }
.dashboard-page #dashboard-data { width: 100%; max-width: 1632px; }
.dashboard-page .page-heading { align-items: center; gap: 20px; margin-bottom: 24px; }
.dashboard-page h1,
.dashboard-page #view-cards > .page-heading h1,
.dashboard-page #view-frozen-cards > .page-heading h1 { color: var(--cloud-ink); font-size: 28px; font-weight: 600; letter-spacing: -.5px; line-height: 1.35; }
.dashboard-page :is(h2, h3) { color: var(--cloud-ink); }
.dashboard-page .updated { font-size: 12px; color: #718199; }
.dashboard-page .eyebrow { color: #6c81a0; font-size: 12px; font-weight: 500; }
.dashboard-page :is(.template-page-heading, .autosub-page-heading, .operation-log-page-heading, .notification-page-heading) > div:first-child p { color: var(--cloud-muted); font-size: 14px; }

/* Card management heading and scoped, data-backed summary tiles. */
.dashboard-page .cloud-card-heading { align-items: center; margin-bottom: 24px; }
.dashboard-page .cloud-card-heading p { margin: 8px 0 0; color: var(--cloud-muted); font-size: 14px; }
.dashboard-page .cloud-heading-action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--cloud-blue); border-radius: 8px; color: #fff; background: var(--cloud-blue); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: 0 3px 8px rgba(36, 92, 230, .12); }
.dashboard-page .cloud-heading-action:hover { border-color: var(--cloud-blue-hover); background: var(--cloud-blue-hover); }
.dashboard-page .cloud-heading-action svg { width: 18px; height: 18px; }
.dashboard-page .cloud-card-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.dashboard-page .cloud-stat { min-width: 0; min-height: 106px; display: flex; align-items: center; gap: 17px; padding: 22px 24px; border: 1px solid var(--cloud-line); border-radius: 12px; background: #fff; box-shadow: var(--cloud-shadow); }
.dashboard-page .cloud-stat-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 11px; color: var(--cloud-blue); background: #eef4ff; }
.dashboard-page .cloud-stat-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.dashboard-page .cloud-stat:first-child { border-left: 3px solid var(--cloud-blue); }
.dashboard-page .cloud-stat-copy { min-width: 0; display: grid; gap: 4px; }
.dashboard-page .cloud-stat-copy :is(span, small, p) { margin: 0; color: var(--cloud-muted); font-size: 13px; font-weight: 400; }
.dashboard-page .cloud-stat-copy strong { color: var(--cloud-ink); font-size: 27px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.dashboard-page .cloud-stat-copy strong small { margin-left: 5px; font-size: 13px; letter-spacing: 0; }
.dashboard-page .cloud-stat-copy .cloud-stat-updated { color: #8493a8; font-size: 11px; line-height: 1.45; }
.dashboard-page .cards-data-panel + [data-lumin-operations] { margin-top: 24px; }

/* White surfaces with one quiet border, rather than nested heavy shadows. */
.dashboard-page :is(.metric, .trend-panel, .overview-panel, .fee-statistic-card, .notification-config-panel, .notification-log-panel, .operation-log-panel, .autosub-panel, .autosub-template-panel, .open-card-form, .open-card-balance-card, .open-card-estimate, .open-card-notes, .table-wrap, .transaction-filter-form, .cards-section-toolbar, .cards-data-panel, .frozen-cards-panel) { border-color: var(--cloud-line); border-radius: 12px; background: #fff; box-shadow: var(--cloud-shadow); }
.dashboard-page .cards-data-panel, .dashboard-page .frozen-cards-panel { padding: 20px 20px 14px; border: 1px solid var(--cloud-line); }
.dashboard-page .cards-data-panel .cards-section-toolbar,
.dashboard-page .frozen-cards-panel .cards-section-toolbar { min-height: 40px; margin-bottom: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dashboard-page .cards-data-panel .table-wrap,
.dashboard-page .frozen-cards-panel .table-wrap,
.dashboard-page :is(.notification-log-panel, .operation-log-panel, .autosub-panel) .table-wrap { border: 1px solid var(--cloud-line); border-radius: 8px; box-shadow: none; }
.dashboard-page .cards-data-panel .section-heading { flex: 0 0 auto; gap: 10px; }
.dashboard-page .cards-data-panel .section-heading h2,
.dashboard-page .frozen-cards-panel .section-heading h2 { font-size: 16px; font-weight: 600; }
.dashboard-page .cards-data-panel .section-heading span,
.dashboard-page .frozen-cards-panel .section-heading span { color: var(--cloud-muted); font-size: 13px; }
.dashboard-page .cards-toolbar-actions { flex-wrap: wrap; gap: 8px; }
.dashboard-page .card-search-field,
.dashboard-page .cards-data-panel .card-search-field { width: 218px; border: 0; background: transparent; box-shadow: none; }
.dashboard-page .card-search-field input,
.dashboard-page .cards-data-panel .card-search-field input { height: 40px; border: 1px solid #dce5f1; border-radius: 8px; background: #fbfcfe; color: var(--cloud-ink); font-size: 13px; }
.dashboard-page .cards-data-panel .card-search-submit { width: 40px; height: 40px; border-radius: 8px; }
.dashboard-page .cards-data-panel :is(.cards-export-action, .cards-remark-action, .cards-cancel-action) { min-height: 40px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.dashboard-page .cards-table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cfdbeb transparent; }
.dashboard-page table { color: var(--cloud-ink); font-variant-numeric: tabular-nums; }
.dashboard-page th { color: #60718b; background: #f7f9fd; font-size: 13px; font-weight: 500; }
.dashboard-page td { color: #2a3d59; font-size: 14px; }
.dashboard-page th, .dashboard-page td { border-color: #eaf0f7; }
.dashboard-page tbody tr:hover { background: #f7faff; }
.dashboard-page :is(.notification-log-table, .operation-log-table, .autosub-query-table) th { font-size: 13px; }
.dashboard-page :is(.notification-log-table, .operation-log-table, .autosub-query-table) td { font-size: 14px; line-height: 1.6; }
.dashboard-page :is(.sensitive-value, .frozen-card-number) { color: var(--cloud-ink); font-weight: 500; }
.dashboard-page .transaction-card-number { color: #3664a7; font-weight: 600; }
.dashboard-page .amount { color: #1b3155; font-weight: 600; font-variant-numeric: tabular-nums; }
.dashboard-page .card-note-value { color: #4b6181; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.dashboard-page .card-usage-count { color: #4d6383; font-weight: 500; }
.dashboard-page .card-usage-count.has-reversal { color: #bd7423; }
.dashboard-page .status { border: 0; border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 500; line-height: 1.35; box-shadow: none; }
.dashboard-page .status-ok { color: #158166; background: #eaf7f1; }
.dashboard-page .status-warn { color: #966013; background: #fff4dd; }
.dashboard-page .status-bad { color: #ba4350; background: #fceef0; }
.dashboard-page .status-neutral { color: #64748b; background: #eef2f7; }
.dashboard-page .sensitive-action { color: #527cbe; border-radius: 5px; }
.dashboard-page .sensitive-action:hover { background: #eaf1ff; }
.dashboard-page .pagination { gap: 12px; margin-top: 16px; }
.dashboard-page .pagination-summary,
.dashboard-page .cards-data-panel .pagination-summary { gap: 14px; color: var(--cloud-muted); font-size: 13px; }
.dashboard-page .pagination-summary strong { color: #49617f; font-weight: 500; }
.dashboard-page .pagination-button,
.dashboard-page .cards-data-panel .pagination-button { width: 34px; height: 34px; border-radius: 7px; font-size: 13px; }
.dashboard-page .pagination-size-select { min-height: 34px; border-radius: 7px; font-size: 13px; }
.dashboard-page .pagination-button.is-active { color: #fff; border-color: var(--cloud-blue); background: var(--cloud-blue); box-shadow: none; }

/* Inputs and action hierarchy shared by every operational view. */
.dashboard-page :is(.transaction-filter-field input, .transaction-filter-field select, .open-card-field input, .open-card-field select, .currency-input, .notification-field > input, .notification-amount-field > div, .autosub-field input, .autosub-field textarea, .autosub-template-output textarea, .card-funds-input input, .card-remark-input, .lumin-key-textarea, .lumin-private-key-field > textarea, .lumin-copy-row > input) { border: 1px solid #d9e3ef; border-radius: 8px; color: var(--cloud-ink); background: #fff; font-size: 14px; font-weight: 400; box-shadow: none; }
.dashboard-page :is(.transaction-filter-field input, .transaction-filter-field select, .open-card-field input, .open-card-field select, .notification-field > input, .autosub-field input, .card-funds-input input, .lumin-copy-row > input) { min-height: 44px; }
.dashboard-page :is(input, textarea)::placeholder { color: #8795a9; opacity: 1; }
.dashboard-page :is(.transaction-filter-field input, .transaction-filter-field select, .open-card-field input, .open-card-field select, .notification-field > input, .autosub-field input, .autosub-field textarea, .autosub-template-output textarea, .card-funds-input input, .card-remark-input, .lumin-key-textarea, .lumin-private-key-field > textarea, .lumin-copy-row > input, .card-search-field input):focus,
.dashboard-page :is(.currency-input, .notification-amount-field > div):focus-within { border-color: #739af1; outline: 0; box-shadow: 0 0 0 3px rgba(36, 92, 230, .1); }
.dashboard-page .currency-input input { border: 0; background: transparent; box-shadow: none; }
.dashboard-page :is(.notification-field, .autosub-field, .open-card-field > label, .transaction-filter-field > span, .autosub-template-modes legend, .lumin-environment-selector > legend) { color: #405572; font-size: 14px; font-weight: 500; }
.dashboard-page :is(.notification-field small, .autosub-field small, .open-card-field > small, .notification-panel-heading p, .autosub-panel-heading p, .lumin-key-heading p, .lumin-environment-card small, .notification-events > p) { color: #718198; font-size: 12px; font-weight: 400; line-height: 1.6; }
.dashboard-page :is(.notification-panel-heading h2, .autosub-panel-heading h2, .trend-heading h2, .overview-panel-heading h2) { color: var(--cloud-ink); font-size: 18px; font-weight: 600; }
.dashboard-page :is(.primary-action, .cards-export-action, .notification-action.is-primary, .autosub-primary-action, .card-funds-submit, .transaction-filter-submit, .card-search-submit),
.dashboard-page .open-card-form-footer .primary-action { border: 1px solid var(--cloud-blue); border-radius: 8px; color: #fff; background: var(--cloud-blue); font-size: 14px; font-weight: 500; box-shadow: none; }
.dashboard-page :is(.primary-action, .cards-export-action, .notification-action.is-primary, .autosub-primary-action, .card-funds-submit, .transaction-filter-submit, .card-search-submit):hover:not(:disabled),
.dashboard-page .open-card-form-footer .primary-action:hover:not(:disabled) { border-color: var(--cloud-blue-hover); color: #fff; background: var(--cloud-blue-hover); box-shadow: none; }
.dashboard-page :is(.notification-action:not(.is-primary), .autosub-secondary-action, .transaction-filter-reset, .card-record-action, .card-fund-action, .card-funds-cancel, .cards-remark-action, .card-remark-action, .pagination-size-select, .autosub-template-modes label) { border: 1px solid #d9e3ef; border-radius: 8px; color: #4a6385; background: #fff; font-size: 13px; font-weight: 500; box-shadow: none; }
.dashboard-page :is(.notification-action:not(.is-primary), .autosub-secondary-action, .transaction-filter-reset, .card-record-action, .card-fund-action, .card-funds-cancel, .cards-remark-action, .card-remark-action, .pagination-size-select, .autosub-template-modes label):hover:not(:disabled) { border-color: #b9cdf4; color: var(--cloud-blue); background: #f4f8ff; box-shadow: none; }
.dashboard-page .card-record-action { border-color: transparent; color: var(--cloud-blue); background: #f0f5ff; }
.dashboard-page .card-remark-action { min-height: 26px; margin-left: 5px; padding: 0 5px; border-color: transparent; color: var(--cloud-blue); background: transparent; font-size: 12px; }
.dashboard-page .cards-remark-action span { color: #5c7fae; background: #edf3fc; }
.dashboard-page .card-remark-submit { border-color: var(--cloud-blue); border-radius: 8px; color: #fff; background: var(--cloud-blue); font-size: 14px; font-weight: 500; }
.dashboard-page .card-remark-submit:hover:not(:disabled) { border-color: var(--cloud-blue-hover); background: var(--cloud-blue-hover); }
.dashboard-page .card-remark-cancel { border-color: var(--cloud-line); border-radius: 8px; color: #617694; background: #fff; font-size: 14px; font-weight: 500; }
.dashboard-page .card-remark-content input { border-color: #d9e3ef; border-radius: 8px; color: var(--cloud-ink); font-size: 14px; }
.dashboard-page .card-remark-content input:focus { border-color: #739af1; outline: 0; box-shadow: 0 0 0 3px rgba(36, 92, 230, .1); }
.dashboard-page :is(.cards-cancel-action, .card-cancel-action, .card-freeze-action) { border: 1px solid #f2d4d8; color: #bb4d59; background: #fff; font-size: 13px; font-weight: 500; box-shadow: none; }
.dashboard-page :is(.cards-cancel-action, .card-cancel-action, .card-freeze-action):hover:not(:disabled) { border-color: #e6aab2; color: #a3303e; background: #fff5f6; }
.dashboard-page :is(.primary-action, .cards-export-action, .cards-remark-action, .cards-cancel-action, .notification-action, .autosub-primary-action, .autosub-secondary-action, .card-funds-submit, .transaction-filter-submit, .pagination-button, .card-fund-action, .card-cancel-action):disabled { border-color: #e5eaf2; color: #9aa7ba; background: #f1f4f8; box-shadow: none; cursor: not-allowed; }
.dashboard-page .autosub-template-modes label:has(input:checked) { border-color: #bdd0fa; color: var(--cloud-blue); background: var(--cloud-soft); box-shadow: none; }
.dashboard-page .autosub-template-modes { flex-wrap: wrap; }
.dashboard-page .autosub-template-modes label { min-height: 40px; }
.dashboard-page :is(.autosub-field textarea, .autosub-template-output textarea) { min-height: 154px; padding: 14px; line-height: 1.8; }
.dashboard-page .lumin-key-textarea,
.dashboard-page .lumin-private-key-field > textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; }
.dashboard-page .lumin-key-textarea[readonly] { background: #f8faff; }
.dashboard-page .lumin-environment-card { border-color: #dce5f1; border-radius: 9px; background: #fbfcfe; }
.dashboard-page .lumin-environment-option > input:checked + .lumin-environment-card { border-color: #9fbaf3; background: #f0f5ff; box-shadow: 0 0 0 2px rgba(36, 92, 230, .07); }
.dashboard-page .lumin-environment-title strong, .dashboard-page .lumin-key-heading h3 { color: var(--cloud-ink); font-size: 15px; font-weight: 600; }
.dashboard-page .lumin-environment-notice { border-color: #dce6f7; background: #f4f8ff; color: #4d668c; font-size: 13px; }
.dashboard-page .lumin-environment-notice strong { color: #365e9f; }
.dashboard-page .lumin-environment-notice code { color: #52729c; font-size: 12px; }
.dashboard-page .lumin-environment-card code { font-size: 12px; }
.dashboard-page .notification-switch input:checked + span { background: var(--cloud-blue); box-shadow: none; }
.dashboard-page .notification-switch > span { background: #dce4f0; box-shadow: none; }
.dashboard-page .notification-switch b { color: #617694; font-size: 12px; }
.dashboard-page :is(.notification-log-status, .operation-log-status, .lumin-config-status) { font-size: 12px; font-weight: 500; }
.dashboard-page .transaction-filter-form { align-items: end; padding: 18px; gap: 12px; }
.dashboard-page .transaction-filter-actions button { min-height: 44px; font-size: 14px; font-weight: 500; }

/* Overview, open-card flow, and neutral supporting surfaces. */
.dashboard-page .metric { min-height: 136px; padding: 23px; }
.dashboard-page .metric span { margin-bottom: 12px; color: var(--cloud-muted); font-size: 14px; }
.dashboard-page .metric strong, .dashboard-page .metric.total strong { color: var(--cloud-ink); font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dashboard-page .metric.total strong { color: var(--cloud-blue); }
.dashboard-page .metric small { margin-top: 10px; color: #78889d; font-size: 12px; }
.dashboard-page .trend-chart-wrap { border: 0; background: #fff; box-shadow: none; }
.dashboard-page .trend-legend .is-purchase { background: var(--cloud-blue); }
.dashboard-page .trend-legend .is-fee { background: #a1b7de; }
.dashboard-page .trend-sync-state { color: var(--cloud-muted); font-size: 13px; }
.dashboard-page .period-control { border: 1px solid var(--cloud-line); background: #eef3fa; box-shadow: none; }
.dashboard-page .period-control button { color: var(--cloud-muted); font-size: 13px; }
.dashboard-page .period-control button.is-selected { color: var(--cloud-blue); background: #fff; box-shadow: 0 1px 4px rgba(41, 75, 125, .08); }
.dashboard-page .overview-panel-heading button { color: var(--cloud-blue); font-size: 13px; }
.dashboard-page :is(.overview-sync-chip, .operation-log-count, .autosub-provider-badge, .autosub-connection, .open-card-currency) { border: 1px solid #dfe8f6; color: #536f97; background: #f5f8fd; font-size: 12px; font-weight: 500; box-shadow: none; }
.dashboard-page :is(.fee-statistic-icon, .autosub-panel-icon, .open-card-network-icon, .open-card-wallet-icon) { border: 1px solid #e0eafa; color: var(--cloud-blue); background: #f0f5ff; box-shadow: none; }
.dashboard-page :is(.notification-event-grid label, .autosub-steps li, .open-card-readonly, .open-card-process, .autosub-status, .autosub-result, .server-status-item) { border-color: var(--cloud-line); background: #f8faff; box-shadow: none; }
.dashboard-page .notification-event-grid label { color: #516985; font-size: 13px; }
.dashboard-page .autosub-status { color: #5c7190; font-size: 13px; }
.dashboard-page .autosub-status.is-error { color: #b13f4b; background: #fff1f3; }
.dashboard-page .autosub-status.is-success { color: #197d65; background: #edf8f3; }
.dashboard-page .autosub-result dt { color: #6f819b; font-size: 12px; }
.dashboard-page .autosub-result dd { color: var(--cloud-ink); font-size: 14px; font-weight: 500; }
.dashboard-page .open-card-form { padding: 0; overflow: hidden; }
.dashboard-page .open-card-form-heading h2 { color: var(--cloud-ink); font-size: 21px; font-weight: 600; }
.dashboard-page .open-card-form-heading p { font-size: 12px; color: var(--cloud-muted); }
.dashboard-page .open-card-form .form-heading { border-bottom-color: var(--cloud-line); }
.dashboard-page .open-card-form .form-heading h2 { color: var(--cloud-ink); font-size: 21px; font-weight: 600; }
.dashboard-page .open-card-form .form-heading > div > p { color: var(--cloud-muted); font-size: 12px; font-weight: 400; }
.dashboard-page .open-card-field label span { font-size: 12px; font-weight: 400; }
.dashboard-page .open-card-field select { background: #fff; font-weight: 500; }
.dashboard-page .open-card-remark-presets { padding: 5px; border-color: var(--cloud-line); background: #f3f6fc; }
.dashboard-page .open-card-remark-presets button { color: #60708a; font-size: 14px; font-weight: 500; }
.dashboard-page .open-card-remark-presets button.is-selected { border-color: #cad9f7; color: var(--cloud-blue); background: #fff; box-shadow: 0 1px 4px rgba(36, 92, 230, .05); }
.dashboard-page .open-card-process div:first-child span { border-color: var(--cloud-blue); background: var(--cloud-blue); }
.dashboard-page .open-card-process div strong { color: #526886; font-size: 12px; font-weight: 500; }
.dashboard-page .open-card-form-footer { border-top-color: var(--cloud-line); background: #fbfcff; }
.dashboard-page .open-card-form-footer .primary-action { min-height: 46px; }
.dashboard-page .open-card-balance-card { border-color: #d8e5fc; background: #f0f5ff; }
.dashboard-page .open-card-balance-heading > span:first-child,
.dashboard-page .open-card-wallet-icon,
.dashboard-page .open-card-estimate-total dd { color: var(--cloud-blue); }
.dashboard-page .open-card-balance-card > strong { color: #22426f; font-weight: 600; font-variant-numeric: tabular-nums; }
.dashboard-page .open-card-balance-meta { border-top-color: #dce6f8; }
.dashboard-page .open-card-estimate dt, .dashboard-page .open-card-notes li { color: #667e9d; font-size: 13px; }
.dashboard-page .open-card-estimate dd { color: var(--cloud-ink); font-size: 14px; }
.dashboard-page .open-card-estimate-total dd { color: var(--cloud-blue); font-size: 22px; }
.dashboard-page .open-card-estimate h3, .dashboard-page .open-card-notes h3 { font-size: 16px; font-weight: 600; }
.dashboard-page .alert { border-radius: 9px; font-size: 14px; line-height: 1.65; box-shadow: none; }
.dashboard-page .alert-warning { border-color: #f0dfa9; color: #8f691b; background: #fffbef; }
.dashboard-page .alert-error { border-color: #f0d3d8; color: #a64350; background: #fff5f6; }

/* Dialog appearance only: retain each dialog's existing [hidden] behavior. */
.dashboard-page :is(.card-transactions-dialog, .card-funds-dialog, .card-remark-dialog, .card-cancel-progress-dialog) { border: 1px solid var(--cloud-line); border-radius: 14px; color: var(--cloud-ink); background: #fff; box-shadow: 0 24px 72px rgba(17, 41, 83, .18); }
.dashboard-page :is(.card-transactions-backdrop, .card-funds-backdrop, .card-remark-backdrop) { background: rgba(24, 42, 73, .3); backdrop-filter: blur(3px); }
.dashboard-page :is(.card-transactions-close, .card-funds-close, .card-remark-close) { color: #627798; border-color: var(--cloud-line); border-radius: 8px; background: #f5f8fd; }
.dashboard-page :is(.card-transactions-heading, .card-funds-heading, .card-remark-heading) h2 { color: var(--cloud-ink); font-size: 20px; font-weight: 600; }
.dashboard-page .card-funds-input input { font-variant-numeric: tabular-nums; }

/* Sign-in uses the same palette and crisp system typography. */
.login-page { --login-ink: var(--cloud-ink); --login-muted: var(--cloud-muted); --login-line: var(--cloud-line); --login-mint: #82aaff; background: #f5f8fd; }
.login-page .login-shell { color: var(--cloud-ink); background: #fff; }
.login-page .login-hero { border-color: var(--cloud-line); background-color: #f5f8ff; background-image: linear-gradient(rgba(212, 225, 246, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 225, 246, .35) 1px, transparent 1px); }
.login-page .login-header { border-color: var(--cloud-line); }
.login-page .login-logo-tile { background: var(--cloud-blue); border-color: var(--cloud-blue); border-radius: 11px; }
.login-page .login-wordmark { color: var(--cloud-ink); }
.login-page .login-wordmark-name strong { font-weight: 700; }
.login-page .login-wordmark-name small { color: #7388a5; }
.login-page :is(.login-eyebrow, .login-form-eyebrow) { color: #6b84a8; font-size: 12px; letter-spacing: 1.2px; }
.login-page .login-hero h1 { color: var(--cloud-ink); font-weight: 600; line-height: 1.15; letter-spacing: -1.4px; }
.login-page :is(.login-hero-copy, .login-form-subtitle) { color: #647b9b; font-size: 15px; line-height: 1.8; }
.login-page .login-entry { background: transparent; }
.login-page .login-form-shell { border-color: var(--cloud-line); background: #fff; }
.login-page .login-form-shell h2 { color: var(--cloud-ink); font-size: 27px; font-weight: 600; }
.login-page .login-form label { color: #405978; font-size: 14px; font-weight: 500; }
.login-page .login-form input,
.login-page .login-form .login-input-wrap input { height: 52px; border: 1px solid #d7e2f1; border-radius: 9px; color: var(--cloud-ink); background: #fbfcff; font-size: 15px; box-shadow: none; }
.login-page .login-form input:focus,
.login-page .login-form .login-input-wrap input:focus { border-color: #8cacfa; background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(36, 92, 230, .1); }
.login-page .login-input-wrap { border-color: #d7e2f1; border-radius: 9px; background: #fbfcff; }
.login-page .login-input-wrap input { margin-bottom: 0; }
.login-page .login-form .login-submit { min-height: 52px; border: 1px solid var(--cloud-blue); border-radius: 9px; color: #fff; background: var(--cloud-blue); font-size: 15px; font-weight: 500; box-shadow: 0 4px 12px rgba(36, 92, 230, .13); }
.login-page .login-form .login-submit:hover { border-color: var(--cloud-blue-hover); background: var(--cloud-blue-hover); }
.login-page .login-form .login-submit b { width: 38px; height: 38px; border-radius: 6px; color: #fff; background: rgba(255, 255, 255, .14); }
.login-page .password-toggle { height: 52px; color: #6e85a5; border-radius: 8px; }
.login-page .password-toggle:hover { color: var(--cloud-blue); background: #edf3ff; }
.login-page .login-visual-card { border-color: #507be3; background: linear-gradient(125deg, #254ba7, #3273ed); color: #fff; box-shadow: 0 20px 48px rgba(36, 92, 230, .17); }
.login-page .login-visual-card :is(strong, small, .login-card-number, .login-card-dots) { color: #fff; }
.login-page .login-card-divider { background: rgba(255, 255, 255, .2); }
.login-page .login-card-chip { border-color: #aac5f6; background: #dce8ff; }
.login-page .login-card-chip b { border-color: #aac5f6; }
.login-page .login-card-number { top: 62%; font-variant-numeric: tabular-nums; }
.login-page .login-card-dots { top: 43%; }
.login-page .login-hero-status > span:first-child { color: #47648e; }
.login-page :is(.login-security-note, .login-hero-status, .login-compliance, .login-password-heading span, .login-activation) { color: #74869e; font-size: 12px; }
.login-page :is(.login-activation a, .login-back-link) { color: var(--cloud-blue); }
.login-page .login-security-note > span:first-child { color: var(--cloud-blue); }

/* Keep the actual data table readable at desktop sizes, including all nine columns. */
@media (min-width: 681px) {
  .dashboard-page .cards-data-panel .cards-table { min-width: 1015px; }
  .dashboard-page .cards-data-panel .cards-table th { height: 46px; padding: 11px 12px; font-size: 13px; }
  .dashboard-page .cards-data-panel .cards-table td { height: 58px; padding: 10px 12px; font-size: 14px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(1) { width: 42px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(2) { width: 170px; }
  .dashboard-page .cards-data-panel .cards-table:has(td:nth-child(2) .sensitive-action.is-copy) th:nth-child(2) { width: 260px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(3) { width: 105px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(4) { width: 92px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(5) { width: 126px; text-align: right; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(6) { width: 108px; text-align: center; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(7) { width: 80px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(8) { width: 130px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) th:nth-child(9) { width: 194px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-cancel-action) { min-width: 1070px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-cancel-action) th:nth-child(9) { width: 247px; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) td:nth-child(5) { text-align: right; }
  .dashboard-page .cards-data-panel .cards-table:has(.card-select-column) td:nth-child(6) { text-align: center; }
  .dashboard-page .used-cards-panel .cards-table:has(.card-select-column) th:nth-child(9) { width: 247px; }
  .dashboard-page .cards-data-panel .card-select-column input { width: 16px; height: 16px; }
  .dashboard-page .cards-data-panel .sensitive-field { gap: 7px; }
  .dashboard-page .cards-data-panel .card-network-logo { width: 32px; height: 22px; }
  .dashboard-page .cards-data-panel .status { font-size: 12px; padding: 4px 8px; }
  .dashboard-page .cards-data-panel :is(.card-record-action, .card-fund-action, .card-freeze-action, .card-cancel-action) { min-height: 30px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; }
}
@media (max-width: 1180px) and (min-width: 821px) {
  .dashboard-page .dashboard-shell { grid-template-columns: 212px minmax(0, 1fr); }
  .dashboard-page .content-shell { padding: 26px 24px 36px; }
  .dashboard-page .topbar-inner { padding: 0 24px; }
  .dashboard-page .topbar-update { display: none; }
  .dashboard-page .nav-item { padding: 0 10px; gap: 10px; }
  .dashboard-page .cards-section-toolbar { flex-wrap: wrap; }
  .dashboard-page .cards-toolbar-actions { justify-content: flex-start; }
  .dashboard-page .cloud-stat { padding: 19px 18px; gap: 12px; }
  .dashboard-page .cloud-stat-copy strong { font-size: 25px; }
}
@media (max-width: 820px) {
  .dashboard-page .dashboard-shell { display: block; }
  .dashboard-page .sidebar { position: fixed; padding: 12px 16px 24px; background: #fff; box-shadow: 14px 0 38px rgba(17, 41, 83, .14); }
  .dashboard-page .sidebar-header { margin: 0 0 14px; min-height: 62px; }
  .dashboard-page .nav-item { min-height: 46px; }
  .dashboard-page .topbar-inner { min-height: 66px; padding: 0 16px; gap: 12px; }
  .dashboard-page .content-shell { padding: 24px 18px 36px; }
  .dashboard-page .platform-switcher-label { display: none; }
  .dashboard-page .platform-switcher-toggle { min-height: 38px; }
  .dashboard-page .cloud-card-summary { gap: 12px; }
  .dashboard-page .cloud-stat { min-height: 100px; padding: 17px; gap: 12px; }
  .dashboard-page .cloud-stat-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; }
  .dashboard-page .cloud-stat-copy strong { font-size: 23px; }
  .dashboard-page .cloud-stat-copy :is(span, small, p) { font-size: 12px; }
  .dashboard-page .cards-section-toolbar { flex-wrap: wrap; }
  .dashboard-page .cards-toolbar-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .dashboard-page .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .dashboard-page .topbar-leading { gap: 7px; }
  .dashboard-page .platform-switcher-toggle { padding: 0 9px; gap: 5px; }
  .dashboard-page .platform-switcher-toggle strong { font-size: 13px; }
  .dashboard-page .topbar-mobile-brand strong { font-size: 14px; }
  .dashboard-page .topbar-language-toggle { display: none; }
  .dashboard-page .top-actions { gap: 4px; }
  .dashboard-page .top-actions .account-pill { display: none; }
  .dashboard-page .top-actions :is(.refresh-link, .link-button) { width: 34px; min-height: 34px; height: 34px; }
  .dashboard-page .content-shell { padding: 22px 14px 30px; }
  .dashboard-page h1,
  .dashboard-page #view-cards > .page-heading h1,
  .dashboard-page #view-frozen-cards > .page-heading h1 { font-size: 24px; }
  .dashboard-page .cloud-card-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 18px; }
  .dashboard-page .cloud-card-heading p { font-size: 13px; }
  .dashboard-page .cloud-heading-action { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .dashboard-page .cloud-card-summary { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .dashboard-page .cloud-stat { min-height: 84px; padding: 17px 18px; }
  .dashboard-page .cloud-stat-copy { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .dashboard-page .cloud-stat-copy strong { font-size: 24px; }
  .dashboard-page .cloud-stat-copy > small { grid-column: 1 / -1; }
  .dashboard-page .cards-data-panel, .dashboard-page .frozen-cards-panel { padding: 15px 12px 12px; border-radius: 11px; }
  .dashboard-page .cards-data-panel .cards-section-toolbar { gap: 12px; margin-bottom: 14px; }
  .dashboard-page .cards-toolbar-actions { width: 100%; gap: 8px; }
  .dashboard-page .card-search-form { flex: 1 1 100%; }
  .dashboard-page .cards-data-panel .card-search-field { width: auto; flex: 1 1 auto; }
  .dashboard-page .cards-toolbar-actions > button { flex: 1 1 auto; }
  .dashboard-page .cards-data-panel .cards-table-wrap { border: 0; border-radius: 0; background: transparent; }
  .dashboard-page .cards-data-panel .cards-table { min-width: 0; }
  .dashboard-page tbody tr { border: 1px solid var(--cloud-line); border-radius: 10px; background: #fff; }
  .dashboard-page tbody tr:hover { background: #fbfdff; }
  .dashboard-page td { font-size: 14px; }
  .dashboard-page .cards-data-panel .active-cards-table :is(.sensitive-value, .amount, .card-usage-count) { font-size: 14px; }
  .dashboard-page .cards-data-panel .active-cards-table tbody td::before { color: #7487a0; font-size: 11px; }
  .dashboard-page .cards-data-panel .active-cards-table .status { font-size: 11px; }
  .dashboard-page .pagination { align-items: flex-start; }
  .dashboard-page .pagination-summary { flex-wrap: wrap; row-gap: 8px; }
  .dashboard-page :is(.metric, .trend-panel, .overview-panel, .notification-config-panel, .notification-log-panel, .operation-log-panel, .autosub-panel, .autosub-template-panel, .open-card-form, .open-card-balance-card, .open-card-estimate, .open-card-notes, .table-wrap, .transaction-filter-form) { box-shadow: var(--cloud-shadow); }
  .dashboard-page .metric { min-height: 126px; }
  .dashboard-page .notification-page-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-page .autosub-template-modes label { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .dashboard-page .open-card-form-heading h2 { font-size: 19px; }
  .dashboard-page .open-card-process div strong { font-size: 11px; }
  .dashboard-page .transaction-filter-form { padding: 14px; gap: 10px; }
  .dashboard-page .fee-records-section { min-width: 0; max-width: 100%; }
  .dashboard-page .fee-records-table-wrap { max-width: 100%; overflow-x: auto; }
  .dashboard-page .fee-records-table { width: 100%; min-width: 0; }
  .login-page .login-form-shell h2 { font-size: 24px; }
  .login-page .login-form input { min-height: 50px; }
  .login-page .login-card-number { top: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-page button, .login-page button { transition: none; }
}

/* Platinum overview: presentation only, scoped to the account overview. */
.dashboard-page .overview-platinum { --overview-line: #e3ebf7; --overview-muted: #637896; }
.dashboard-page .overview-platinum > .page-heading { margin-bottom: 24px; }
.dashboard-page .overview-platinum h1 { color: #10264b; font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.dashboard-page .overview-platinum .period-control { padding: 4px; border-color: var(--overview-line); border-radius: 12px; background: #edf2fb; }
.dashboard-page .overview-platinum .period-control button { min-height: 36px; min-width: 64px; border-radius: 8px; font-weight: 600; }
.dashboard-page .overview-platinum .period-control button.is-selected { color: #fff; background: #245cf2; box-shadow: 0 3px 8px rgba(36, 92, 242, .18); }
.dashboard-page .overview-platinum .metrics { gap: 18px; margin-bottom: 22px; }
.dashboard-page .overview-platinum .metric { display: flex; align-items: flex-start; gap: 15px; min-height: 148px; aspect-ratio: auto; padding: 23px 20px; border: 1px solid var(--overview-line); border-radius: 17px; background: #fff; box-shadow: 0 5px 22px rgba(40, 73, 128, .045); }
.dashboard-page .overview-platinum .overview-metric-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 44px; margin: 0; border-radius: 12px; color: #245cf2; background: #edf3ff; }
.dashboard-page .overview-platinum .overview-metric-icon svg { width: 25px; height: 25px; }
.dashboard-page .overview-platinum .metric-copy { min-width: 0; flex: 1; }
.dashboard-page .overview-platinum .metric-copy > span { margin: 0 0 12px; color: #536c8d; font-size: 14px; font-weight: 500; }
.dashboard-page .overview-platinum .metric-copy > strong { color: #10264b; font-size: clamp(24px, 2.1vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.dashboard-page .overview-platinum .metric-copy > small { display: block; margin-top: 10px; color: var(--overview-muted); font-size: 12px; line-height: 1.5; }
.dashboard-page .overview-platinum .metric.total { border-color: #3973f7; background: linear-gradient(135deg, #2f6af0 0%, #2058eb 100%); box-shadow: 0 8px 22px rgba(36, 92, 230, .16); }
.dashboard-page .overview-platinum .metric.total .overview-metric-icon { color: #fff; background: rgba(255, 255, 255, .15); }
.dashboard-page .overview-platinum .metric.total .metric-copy > :is(span, strong) { color: #fff; }
.dashboard-page .overview-platinum .metric.total .metric-copy > small { color: #fff; }
.dashboard-page .overview-platinum .overview-content-grid { grid-template-columns: minmax(0, 2.35fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.dashboard-page .overview-platinum :is(.trend-panel, .overview-panel) { padding: 24px; border: 1px solid var(--overview-line); border-radius: 17px; background: #fff; box-shadow: 0 5px 22px rgba(40, 73, 128, .04); }
.dashboard-page .overview-platinum .trend-panel { display: flex; flex-direction: column; }
.dashboard-page .overview-platinum :is(.trend-heading h2, .overview-panel-heading h2) { color: #10264b; font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.4; }
.dashboard-page .overview-platinum :is(.trend-heading .eyebrow, .overview-panel-heading p) { margin: 0 0 5px; color: var(--overview-muted); font-size: 13px; font-weight: 500; }
.dashboard-page .overview-platinum .trend-heading { align-items: center; gap: 16px; }
.dashboard-page .overview-platinum .trend-legend { gap: 15px; color: var(--overview-muted); font-size: 12px; }
.dashboard-page .overview-platinum .trend-legend i { width: 9px; height: 9px; }
.dashboard-page .overview-platinum .trend-legend .is-purchase { background: #2962ff; }
.dashboard-page .overview-platinum .trend-legend .is-fee { background: #8d9cb5; }
.dashboard-page .overview-platinum .trend-sync-state { margin: 8px 0 0; padding: 0; color: var(--overview-muted); font-size: 13px; }
.dashboard-page .overview-platinum .trend-chart-wrap { flex: 1; height: auto; min-height: 350px; margin-top: 22px; padding: 0; }
.dashboard-page .overview-platinum .overview-side-column { grid-template-rows: auto 1fr; gap: 18px; }
.dashboard-page .overview-platinum .overview-panel-heading { gap: 12px; }
.dashboard-page .overview-platinum .overview-panel-heading button { font-weight: 600; white-space: nowrap; }
.dashboard-page .overview-platinum .overview-sync-chip { padding: 5px 9px; border-radius: 8px; border-color: #dce7fc; color: #3769bd; background: #f5f8ff; font-size: 12px; }
.dashboard-page .overview-platinum .monthly-spend-value { gap: 8px; margin-top: 25px; flex-wrap: wrap; }
.dashboard-page .overview-platinum .monthly-spend-value strong { color: #10264b; font-size: 33px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.dashboard-page .overview-platinum .monthly-spend-value > span { color: var(--overview-muted); }
.dashboard-page .overview-platinum .monthly-spend-toggle { color: #526b8d; }
.dashboard-page .overview-platinum .monthly-spend-meta { gap: 12px; margin-top: 23px; padding-top: 17px; border-color: var(--overview-line); }
.dashboard-page .overview-platinum .monthly-spend-meta > div + div { padding-left: 14px; border-left: 1px solid var(--overview-line); }
.dashboard-page .overview-platinum .monthly-spend-meta span { color: var(--overview-muted); font-size: 11px; }
.dashboard-page .overview-platinum .monthly-spend-meta b { margin-top: 6px; color: #10264b; font-size: 15px; font-weight: 700; }
.dashboard-page .overview-platinum .overview-card-list { margin-top: 14px; }
.dashboard-page .overview-platinum .overview-card-row { min-height: 68px; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; border-color: var(--overview-line); }
.dashboard-page .overview-platinum .overview-card-row img { width: 34px; height: 24px; }
.dashboard-page .overview-platinum .overview-card-row div strong { color: #1a3558; font-size: 14px; font-weight: 600; }
.dashboard-page .overview-platinum .overview-card-row div small { color: var(--overview-muted); font-size: 11px; }
.dashboard-page .overview-platinum .overview-card-row > b { color: #10264b; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dashboard-page .overview-platinum .overview-empty { margin: 32px 0; font-size: 13px; }
.dashboard-page .overview-platinum .overview-server-status-panel { margin-top: 18px; padding: 22px 24px 18px; }
.dashboard-page .overview-platinum .server-status-system { max-width: 100%; color: #7689a6; font-size: 11px; overflow-wrap: anywhere; }
.dashboard-page .overview-platinum .server-status-heading-actions { flex-shrink: 0; gap: 12px; }
.dashboard-page .overview-platinum .server-status-metrics { gap: 16px; margin-top: 18px; }
.dashboard-page .overview-platinum .server-status-metric { padding: 16px 18px 13px; border-color: var(--overview-line); border-radius: 11px; background: #fff; box-shadow: none; }
.dashboard-page .overview-platinum .server-metric-label { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: #536c8d; font-size: 12px; }
.dashboard-page .overview-platinum .server-metric-label svg { width: 24px; height: 24px; flex-shrink: 0; color: #2962ff; }
.dashboard-page .overview-platinum [data-server-metric="memory"] .server-metric-label svg { color: #0ba993; }
.dashboard-page .overview-platinum .server-status-metric-heading strong { color: #10264b; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dashboard-page .overview-platinum .server-status-progress { height: 7px; margin: 13px 0 9px; background: #e8effa; }
.dashboard-page .overview-platinum .server-status-progress i { background: linear-gradient(90deg, #4180ff, #245cf2); }
.dashboard-page .overview-platinum .server-status-metric small { color: #6d809b; font-size: 11px; }
.dashboard-page .overview-platinum .server-status-footer { margin-top: 14px; color: #7486a0; font-size: 11px; }
@media (max-width: 1360px) and (min-width: 1181px) {
  .dashboard-page .overview-platinum .metric { gap: 11px; padding: 20px 16px; }
  .dashboard-page .overview-platinum .overview-metric-icon { flex-basis: 34px; width: 34px; height: 38px; }
  .dashboard-page .overview-platinum .metric-copy > strong { font-size: 26px; }
  .dashboard-page .overview-platinum :is(.trend-panel, .overview-panel) { padding: 21px; }
}
@media (max-width: 1180px) {
  .dashboard-page .overview-platinum .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-page .overview-platinum .overview-content-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-page .overview-platinum .overview-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .dashboard-page .overview-platinum .trend-chart-wrap { height: 350px; flex: auto; }
}
@media (max-width: 680px) {
  .dashboard-page .overview-platinum > .page-heading { align-items: center; margin-bottom: 18px; }
  .dashboard-page .overview-platinum h1 { font-size: 23px; letter-spacing: -.5px; }
  .dashboard-page .overview-platinum .period-control button { min-width: 44px; min-height: 32px; padding: 0 7px; font-size: 12px; }
  .dashboard-page .overview-platinum .metrics { gap: 12px; margin-bottom: 16px; }
  .dashboard-page .overview-platinum .metric { flex-direction: column; gap: 12px; min-height: 170px; padding: 18px 15px; border-radius: 14px; }
  .dashboard-page .overview-platinum .overview-metric-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; }
  .dashboard-page .overview-platinum .overview-metric-icon svg { width: 21px; height: 21px; }
  .dashboard-page .overview-platinum .metric-copy > span { margin-bottom: 9px; font-size: 13px; }
  .dashboard-page .overview-platinum .metric-copy > strong { font-size: 25px; }
  .dashboard-page .overview-platinum .metric-copy > small { margin-top: 8px; font-size: 11px; }
  .dashboard-page .overview-platinum .overview-side-column { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dashboard-page .overview-platinum :is(.trend-panel, .overview-panel) { padding: 20px 17px; border-radius: 14px; }
  .dashboard-page .overview-platinum :is(.trend-heading h2, .overview-panel-heading h2) { font-size: 19px; }
  .dashboard-page .overview-platinum .trend-heading { align-items: flex-start; gap: 8px; }
  .dashboard-page .overview-platinum .trend-legend { font-size: 10px; gap: 6px; }
  .dashboard-page .overview-platinum .trend-chart-wrap { min-height: 260px; height: 280px; margin-top: 20px; }
  .dashboard-page .overview-platinum .trend-sync-state { font-size: 12px; }
  .dashboard-page .overview-platinum .overview-server-status-panel { margin-top: 14px; }
  .dashboard-page .overview-platinum .overview-server-status-panel > .overview-panel-heading { flex-wrap: wrap; }
  .dashboard-page .overview-platinum .server-status-metrics { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dashboard-page .overview-platinum .server-status-footer { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 360px) {
  .dashboard-page .overview-platinum > .page-heading { flex-wrap: wrap; }
  .dashboard-page .overview-platinum .metric { padding: 15px 12px; }
  .dashboard-page .overview-platinum .metric-copy > strong { font-size: 22px; }
}