:root {
  --bg: #f0f2f5;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #1677ff;
  --primary-dark: #0958d9;
  --primary-light: #e6f4ff;
  --danger: #ff4d4f;
  --border: #e5e7eb;
  --border-light: #f0f0f0;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
  --sidebar-w: 200px;
  --topbar-h: 60px;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Microsoft YaHei UI", "Segoe UI", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.web-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, #eef2ff 0, #f8fafc 48%, #eef2f7 100%);
}

.web-auth-gate.hidden { display: none; }

.web-auth-card {
  width: min(410px, 100%);
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

.web-auth-brand {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.web-auth-card h1 { margin: 0 0 8px; font-size: 24px; }
.web-auth-card > p { margin: 0 0 22px; color: #667085; }
.web-auth-card .field { margin-bottom: 12px; }
.web-auth-card .btn { width: 100%; min-height: 42px; }
.web-auth-card .web-auth-error { min-height: 20px; margin: 0 0 8px; color: #b42318; font-size: 13px; }

.hidden { display: none !important; }

/* ── Login overlay ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.login-card {
  width: 380px;
  padding: 32px;
}

.login-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.login-card input {
  width: 100%;
  margin: 16px 0 12px;
}

.login-card .btn {
  width: 100%;
}

/* ── App shell layout ── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.brand-sub {
  font-size: 12px;
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-nav-toggle { display: none; }

.change-password-modal { width: min(460px, calc(100vw - 32px)); }
.change-password-modal form { display: grid; gap: 14px; }
.change-password-modal .form-actions { margin-top: 2px; }

/* ── Sidebar navigation ── */
.sidebar {
  grid-area: sidebar;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.side-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: none;
}

.side-tabs .tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  border-bottom: none;
  transition: background 0.15s, color 0.15s;
}

.side-tabs .tab:hover {
  background: var(--bg);
  color: var(--text);
}

.side-tabs .tab.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  border-bottom: none;
}

.tab-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Main content ── */
.content {
  grid-area: content;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ── Control panel ── */
.control-panel {
  padding: 14px 20px;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.toolbar-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 2px;
}

.toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

.merchant-login-wrap {
  position: relative;
}

.login-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  min-width: 280px;
}

.login-popover-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.login-popover-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.login-popover .field {
  margin-bottom: 10px;
}

.login-popover .field input {
  width: 100%;
}

.login-popover-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.login-popover-actions .btn.primary {
  flex: 1;
}

.role-account-wrap {
  min-width: 280px;
}

.account-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.account-picker-trigger:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.account-picker-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-picker-arrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

.account-picker-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.account-picker-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.account-picker-modal-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.account-picker-modal-head p {
  margin: 0;
  font-size: 13px;
}

.account-picker-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
}

.account-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.account-picker-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.12);
}

.account-picker-card.role-bound:not(.active) {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 1px #fcd34d;
}

.account-picker-card.role-bound.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, #fffbeb 0%, var(--primary-light) 100%);
  box-shadow: 0 0 0 1px var(--primary);
}

.account-picker-card-binding.current-role {
  color: #b45309;
  font-weight: 600;
}

.account-picker-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}

.account-picker-card.active::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-picker-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.account-picker-count {
  font-size: 13px;
  color: var(--muted);
}

.account-picker-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-picker-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-picker-card-head strong {
  font-size: 14px;
  word-break: break-all;
}

.account-picker-card-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.account-picker-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.account-picker-card-badge.shelf-on {
  background: #e6f4ff;
  color: #0958d9;
}

.account-picker-card-badge.shelf-off {
  background: #fff7e6;
  color: #d46b08;
}

.account-picker-card-badge.renting {
  background: #ecfdf5;
  color: #047857;
}

.account-picker-card-badge.idle {
  background: #eef2ff;
  color: #4338ca;
}

.account-picker-card-remark {
  font-size: 12px;
  color: var(--muted);
  min-height: 18px;
}

.account-picker-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--muted);
}

.account-picker-card-binding {
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
  font-size: 12px;
  color: #4338ca;
  line-height: 1.5;
}

.account-picker-card-binding.unbound {
  color: var(--muted);
}

.account-picker-empty {
  grid-column: 1 / -1;
  padding: 48px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #fafafa;
}

.field-inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.field-inline label {
  white-space: nowrap;
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.field label {
  font-size: 12px;
  color: var(--muted);
}

.field-sm { width: 90px; }
.field-lg { flex: 1; min-width: 200px; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  color: var(--muted);
  font-size: 13px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52c41a;
  flex-shrink: 0;
}

/* ── Form elements ── */
label { color: var(--muted); font-size: 13px; }

input, select, button { font: inherit; }

input, select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-size: 13px;
}

.btn:hover { border-color: var(--primary); color: var(--primary); }

.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.btn.danger {
  color: var(--danger);
  border-color: #ffccc7;
  background: #fff2f0;
}

.btn.danger:hover {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn.ghost:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 500;
}

/* ── Summary metrics ── */
.summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.metric {
  padding: 16px 20px;
  border-right: 1px solid var(--border-light);
}

.metric:last-child { border-right: none; }

.metric.highlight {
  background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
}

.metric-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.metric.highlight .metric-value {
  color: var(--primary);
  font-size: 22px;
}

/* ── Main content card ── */
.main-card {
  padding: 0;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.panel {
  display: none;
  padding: 20px 24px 24px;
}

.panel.active { display: block; }

.panel-header {
  margin-bottom: 16px;
}

.panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.panel-header .muted {
  margin: 0;
  font-size: 13px;
}

.panel-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-header-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Sub-tabs (stats) ── */
.subtabs {
  display: flex;
  gap: 6px;
  padding: 0;
  margin-bottom: 16px;
  border-bottom: none;
  flex-wrap: wrap;
}

.subtab {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 6px 14px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 999px;
  font-size: 13px;
  transition: all 0.15s;
}

.subtab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.subtab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 500;
}

.stats-panel { display: none; }
.stats-panel.active { display: block; }

/* ── Tables ── */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}

th {
  background: #fafafa;
  position: sticky;
  top: 0;
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fbff; }

.empty-row {
  text-align: center;
  color: var(--muted);
  padding: 20px !important;
}

.order-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 42px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.order-pagination label { display: inline-flex; align-items: center; gap: 6px; }
.order-pagination select { height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; background: #fff; color: var(--text); }
.order-pagination strong { min-width: 76px; text-align: center; color: var(--text); }

@media (max-width: 600px) {
  .order-pagination { justify-content: flex-start; flex-wrap: wrap; }
  #platform-orders-total { flex: 1 1 100%; }
}

#role-summary-table tbody tr {
  cursor: pointer;
}

#role-summary-table tbody tr:hover {
  background: var(--primary-light);
}

#role-summary-table .tree-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

#role-summary-table .role-summary-row.is-expanded {
  background: #f0f7ff;
}

#role-summary-table .role-summary-row.is-expanded .role-summary-preview {
  color: var(--primary);
}

#role-summary-table .role-account-row td:first-child {
  font-weight: 500;
}

#role-summary-table .role-bound-row {
  background: #fffbeb;
}

#role-summary-table .role-bound-row:hover {
  background: #fef3c7;
}

#role-summary-table .role-summary-preview {
  color: var(--muted);
}

/* ── Info blocks ── */
.stats-summary, .inline-metrics {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #fafafa;
  border-radius: 8px;
  line-height: 1.7;
  font-size: 13px;
  border: 1px solid var(--border-light);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.stat-card {
  background: #fafafa;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.stat-card strong {
  font-size: 18px;
  font-weight: 700;
}

/* ── Forms in panels ── */
.form-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.managed-account-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.managed-account-summary > div {
  border: 1px solid var(--border-light);
  background: var(--bg);
  padding: 12px;
  border-radius: 6px;
}

.managed-account-summary span,
.managed-account-summary strong {
  display: block;
}

.managed-account-summary span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.managed-account-summary strong { font-size: 17px; }

.managed-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.managed-account-grid .field { min-width: 0; }

.managed-account-grid input,
.managed-account-grid select,
.managed-account-grid textarea {
  width: 100%;
  box-sizing: border-box;
}

.password-input-wrap {
  position: relative;
  width: 100%;
}

.managed-account-grid .password-input-wrap input {
  padding-right: 58px;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  min-width: 42px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
  background: var(--primary-light);
  outline: none;
}

.managed-account-notes { grid-column: span 2; }

.managed-account-checkbox {
  align-self: end;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.managed-account-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 20px 24px 24px;
}

.managed-account-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.managed-account-modal-head h3 { margin: 0 0 4px; font-size: 18px; }
.managed-account-modal-head p { margin: 0; font-size: 13px; }

#managed-account-form-host {
  max-height: calc(100vh - 152px);
  overflow-y: auto;
  padding-right: 4px;
}

#managed-account-form-host .managed-account-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.icon-btn:hover { color: var(--text); background: var(--bg); }

.managed-account-vault-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #ffccc7;
  background: #fff2f0;
  color: #a8071a;
  border-radius: 6px;
}

.managed-account-aggregation-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.managed-account-aggregation-summary:empty { display: none; }
.managed-account-aggregation-summary small { color: var(--warning, #b7791f); }

.managed-account-searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.managed-account-search-input-wrap {
  display: flex;
  flex: 1 1 520px;
  max-width: 720px;
  gap: 8px;
}

.managed-account-search-input-wrap input {
  min-width: 0;
  flex: 1 1 auto;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.managed-account-search-input-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
}

.managed-account-search-input-wrap .btn { flex: 0 0 auto; }
.managed-account-searchbar > .muted { flex: 0 0 auto; font-size: 13px; }

.managed-account-table-wrap {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.045);
  scrollbar-gutter: stable;
}

.managed-account-list-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
  font-size: 11px;
}

.managed-account-list-table th,
.managed-account-list-table td {
  border-right: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  padding: 10px 11px;
  text-align: left;
  vertical-align: middle;
}

.managed-account-list-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 42px;
  background: #f6f8fb;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.managed-account-list-table tbody tr:last-child td { border-bottom: 0; }
.managed-account-list-table th:last-child,
.managed-account-list-table td:last-child { border-right: 0; }
.managed-account-list-table tbody tr:hover td { background: #f8fbff; }
.managed-account-list-table tbody tr.is-disabled td { background: #fafafa; color: #7b8494; }
.managed-account-list-table tbody tr.is-incomplete td { background: #fffaf2; }

.managed-account-list-table th:first-child,
.managed-account-list-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 170px;
  max-width: 220px;
  background: #fff;
  box-shadow: 1px 0 0 #edf0f5;
}

.managed-account-list-table th:first-child { z-index: 5; background: #f6f8fb; }
.managed-account-list-table tbody tr:hover td:first-child { background: #f8fbff; }
.managed-account-list-table tbody tr.is-disabled td:first-child { background: #fafafa; }
.managed-account-list-table tbody tr.is-incomplete td:first-child { background: #fffaf2; }

.managed-account-list-table th:nth-child(1) { width: 13%; }
.managed-account-list-table th:nth-child(2) { width: 7%; }
.managed-account-list-table th:nth-child(3) { width: 6%; }
.managed-account-list-table th:nth-child(4) { width: 16%; }
.managed-account-list-table th:nth-child(5),
.managed-account-list-table th:nth-child(6) { width: 8%; }
.managed-account-list-table th:nth-child(7) { width: 7%; }
.managed-account-list-table th:nth-child(8) { width: 9%; }
.managed-account-list-table th:nth-child(9) { width: 12%; }
.managed-account-list-table th:nth-child(10) { width: 6%; }
.managed-account-list-table th:nth-child(11) { width: 8%; }

.managed-account-list-identity strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.managed-account-list-identity span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.managed-account-list-mono,
.managed-account-secret-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.managed-account-list-wrap { overflow-wrap: anywhere; }
.managed-account-list-money { white-space: nowrap; font-weight: 600; }
.managed-account-list-money.is-income { color: #047857; }
.managed-account-list-duration,
.managed-account-list-time { color: #475467; overflow-wrap: anywhere; }

.managed-account-list-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.managed-account-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--primary);
  background: #fff;
  cursor: pointer;
}

.managed-account-list-action:hover { background: var(--primary-light); }
.managed-account-list-action.is-danger { color: #cf1322; }
.managed-account-list-action.is-danger:hover { border-color: #ffccc7; background: #fff1f0; }
.managed-account-list-action svg { width: 14px; height: 14px; }

.managed-account-profile-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.managed-account-profile-status.is-complete { color: #047857; background: #ecfdf5; }
.managed-account-profile-status.is-incomplete { color: #92400e; background: #fffbeb; }

.managed-account-list-inventory {
  max-width: none;
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.managed-account-secret-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
}

.managed-account-secret-value {
  min-width: 62px;
  max-width: 132px;
  overflow-wrap: anywhere;
  white-space: normal;
  color: #344054;
  font-size: 11px;
}

.managed-account-secret-toggle {
  flex: 0 0 auto;
  border: 0;
  padding: 2px 4px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.managed-account-secret-toggle:hover { text-decoration: underline; }
.managed-account-secret-toggle:disabled { opacity: 0.55; cursor: wait; }
.managed-account-secret-empty,
.managed-account-platform-empty { color: var(--muted); }
.managed-account-setting-status {
  display: inline-flex;
  min-width: 46px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
}
.managed-account-setting-status.is-set { color: #047857; background: #ecfdf5; }
.managed-account-setting-status.is-empty { color: #667085; background: #f2f4f7; }

.managed-account-platform-tags {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.managed-account-platform-entry {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.managed-account-platform-entry small {
  color: #667085;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.managed-account-platform-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.managed-account-platform-tag.is-renting { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.managed-account-platform-tag.is-listed { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.managed-account-platform-tag.is-off-shelf { color: #667085; border-color: #e4e7ec; background: #f8fafc; }
.managed-account-platform-tag.is-unknown { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.managed-account-list-edit { min-height: 30px; padding: 4px 9px; font-size: 11px; white-space: nowrap; }

.managed-automation-control {
  position: relative;
  display: inline-grid;
  grid-template-columns: 34px auto;
  grid-template-rows: 20px auto;
  align-items: center;
  gap: 3px 7px;
  min-width: 142px;
  cursor: pointer;
}

.managed-automation-control input {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 20px;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

.managed-automation-switch {
  position: relative;
  display: block;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #cbd5e1;
  transition: background 0.15s;
}

.managed-automation-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: transform 0.15s;
}

.managed-automation-control input:checked + .managed-automation-switch { background: #16a34a; }
.managed-automation-control input:checked + .managed-automation-switch::after { transform: translateX(14px); }
.managed-automation-control input:focus-visible + .managed-automation-switch { box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.18); }
.managed-automation-control.is-disabled { cursor: not-allowed; opacity: 0.62; }
.managed-automation-text { grid-column: 1 / -1; color: #667085; font-size: 10px; white-space: nowrap; }

.managed-account-list-empty {
  padding: 48px 18px;
  color: var(--muted);
  text-align: center;
  background: #fafafa;
}

.managed-account-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 12px;
  align-items: start;
}

.managed-account-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.055);
  padding: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.managed-account-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #52c41a;
}

.managed-account-card.is-disabled::before { background: #bfbfbf; }
.managed-account-card.is-incomplete::before { background: #fa8c16; }

.managed-account-card:hover {
  border-color: #c9d8f5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.managed-account-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.managed-account-card-identity { min-width: 0; }
.managed-card-eyebrow,
.managed-card-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.managed-account-card-identity h4 {
  margin: 3px 0 2px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.managed-account-card-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.managed-account-card-statuses {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.managed-account-state,
.managed-profile-ready {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.managed-account-state.is-enabled { color: #237804; background: #f6ffed; }
.managed-account-state.is-disabled { color: #595959; background: #f5f5f5; }
.managed-profile-ready { color: #0958d9; background: #e6f4ff; }
.managed-account-card-statuses .managed-profile-status { margin-top: 0; }
.managed-account-card-statuses .managed-account-complete-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.managed-account-card-statuses .managed-account-complete-btn:hover {
  background: #ffedd5;
  color: #9a3412;
}

.managed-account-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
}

.managed-account-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.managed-account-platform-block {
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px;
  background: #fafbfc;
}

.managed-account-platform-block.is-fivee { border-top: 2px solid #818cf8; }

.managed-account-platform-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.managed-account-platform-block .managed-platform-link {
  min-width: 0;
  padding: 0;
}

.managed-account-platform-block .managed-platform-link strong,
.managed-account-platform-block .managed-platform-link span,
.managed-account-platform-block .managed-platform-link small {
  overflow-wrap: anywhere;
}

.managed-account-card-details {
  margin-top: 9px;
  border-top: 1px solid var(--border-light);
}

.managed-account-card-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.managed-account-card-details summary::-webkit-details-marker { display: none; }
.managed-account-card-details summary::after {
  content: "展开详情 ›";
  color: var(--primary);
  font-size: 12px;
}

.managed-account-card-details[open] summary::after { content: "收起详情 ⌃"; }
.managed-account-card-extra { padding-top: 1px; }

.managed-account-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: var(--border-light);
}

.managed-account-card-metrics > div {
  min-width: 0;
  padding: 10px 11px;
  background: #fff;
}

.managed-account-card-metrics dt {
  color: var(--muted);
  font-size: 11px;
}

.managed-account-card-metrics dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.managed-account-card-metrics .managed-income-value { color: #047857; }

.managed-account-inventory-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
}

.managed-account-inventory-note span { color: var(--muted); font-size: 11px; }
.managed-account-inventory-note p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.managed-account-card-empty {
  grid-column: 1 / -1;
  padding: 40px 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  background: #fafafa;
}

.managed-platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.managed-platform-badge,
.managed-profile-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.managed-platform-badge.is-fivee { background: #eef2ff; color: #4338ca; }
.managed-profile-status { margin-top: 5px; background: #fff7ed; color: #c2410c; }

.managed-profile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.managed-profile-actions .managed-profile-status { margin-top: 0; }
.managed-account-complete-btn { padding: 3px 8px; font-size: 12px; }




.managed-platform-link {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.managed-platform-link + .managed-platform-link {
  border-top: 1px dashed var(--border-light);
  margin-top: 4px;
  padding-top: 8px;
}

.managed-platform-link span,
.managed-platform-link small { color: var(--muted); font-size: 12px; }











.status-warn { color: #ad6800; font-weight: 600; }



.account-card-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.account-card-filters button { border: 1px solid var(--border); background: #fff; color: var(--muted); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.account-card-filters button.active { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.account-card-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.account-card-columns h4 { margin: 0 0 10px; font-size: 14px; }
.account-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.account-card-error { grid-column: 1 / -1; margin: 0; padding: 12px 14px; color: #b42318; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 6px; }
.account-state-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: #fff; min-height: 150px; }
.account-state-card.status-renting { border-left: 3px solid #fa8c16; }
.account-state-card.status-unmatched { border-left: 3px solid #cf1322; }
.account-state-card header { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.account-state-card header span { color: var(--primary); white-space: nowrap; }
.account-state-card p { margin: 10px 0; min-height: 18px; color: var(--muted); font-size: 12px; }
.account-state-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.account-state-card dt { color: var(--muted); font-size: 11px; }
.account-state-card dd { margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .account-card-columns { grid-template-columns: 1fr; } }

.operations-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

#panel-access .form-card {
  margin-bottom: 16px;
}

#panel-access .form-card h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

#system-user-table td:first-child strong,
#system-user-table td:first-child small {
  display: block;
}

#system-user-table td:first-child small {
  margin-top: 3px;
  color: var(--muted);
}

#system-user-table td:last-child {
  white-space: nowrap;
}

#system-user-table td:last-child .btn + .btn {
  margin-left: 6px;
}

.access-audit-filters { align-items: end; }
.access-audit-filters #access-audit-count { min-width: 70px; padding-bottom: 8px; text-align: right; }
.access-audit-table-wrap table { min-width: 980px; }
.access-audit-table-wrap td:nth-child(1),
.access-audit-table-wrap td:nth-child(5) { white-space: nowrap; }
.access-audit-table-wrap td:nth-child(3) small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.audit-result { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 5px; font-size: 12px; }
.audit-result.success { color: #237804; background: #f6ffed; }
.audit-result.failed { color: #b42318; background: #fff2f0; }
.audit-result.blocked { color: #ad6800; background: #fffbe6; }

.operations-toolbar label { display: grid; gap: 5px; min-width: 130px; }
.operations-toolbar label > span { font-size: 11px; color: var(--muted); }
.operations-toolbar input,
.operations-toolbar select,
#daily-report-date { height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 0 9px; background: #fff; color: var(--text); }
.operations-toolbar .operations-grow { flex: 1 1 240px; }
.operations-toolbar .operations-check { display: flex; flex-direction: row; align-items: center; min-width: 150px; height: 34px; }
.operations-toolbar .operations-check input { width: 16px; height: 16px; }

.operations-summary,
.report-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}
.operations-summary > div,
.report-band > div { padding: 12px 14px; border-right: 1px solid var(--border-light); background: #fafafa; }
.operations-summary span,
.report-band span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.operations-summary strong,
.report-band strong { font-size: 15px; }

.operation-status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 5px; background: #f0f2f5; color: #434343; font-size: 11px; }
.status-matched, .status-scheduled { background: #f6ffed; color: #237804; }
.status-pending, .status-due_soon, .severity-warning { background: #fff7e6; color: #ad4e00; }
.status-discrepancy, .status-duplicate, .status-overdue, .severity-critical { background: #fff1f0; color: #a8071a; }
.amount-negative { color: #cf1322; font-weight: 600; }

.recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px; }
.recovery-item { min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 13px; background: #fff; }
.recovery-item.recovered { border-left: 3px solid #389e0d; }
.recovery-item header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.recovery-item header span { color: var(--primary); font-size: 12px; }
.recovery-progress { height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.recovery-progress span { display: block; height: 100%; background: #1677ff; }
.recovery-item.recovered .recovery-progress span { background: #389e0d; }
.recovery-item dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; }
.recovery-item dt { color: var(--muted); font-size: 11px; }
.recovery-item dd { margin: 2px 0 0; font-size: 13px; }

@media (max-width: 980px) {
  .managed-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .managed-account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .managed-account-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .managed-account-grid,
  .managed-account-summary { grid-template-columns: 1fr; }
  .managed-account-notes { grid-column: auto; }
  .managed-account-card { padding: 13px; }
  .managed-account-card-head { flex-direction: column; }
  .managed-account-card-statuses { flex-direction: row; align-items: center; }
  .managed-account-platform-grid { grid-template-columns: 1fr; }
  .managed-account-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .managed-account-searchbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .managed-account-search-input-wrap { flex-basis: auto; max-width: none; }
  .managed-account-searchbar > .muted { text-align: left; }
  .managed-account-table-wrap { max-height: none; border-radius: 8px; }
  .managed-account-list-table { min-width: 1180px; }
  .operations-toolbar { align-items: stretch; }
  .operations-toolbar label,
  .operations-toolbar .operations-grow { flex: 1 1 100%; min-width: 100%; }
  .operations-summary,
  .report-band { grid-template-columns: 1fr 1fr; }
}

/* ── Charts ── */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.chart-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
}

.chart-box {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}

.section-divider {
  height: 1px;
  background: var(--border-light);
  margin: 16px 0;
}

.panel-subsection {
  margin-top: 4px;
}

.panel-subsection h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

/* ── Tree table ── */
.tree-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
}

.tree-toggle:hover { color: var(--primary); }

.tree-toggle .arrow {
  display: inline-block;
  width: 14px;
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.15s ease;
}

.tree-toggle.expanded .arrow { transform: rotate(90deg); }

.tree-row.collapsed-child { display: none; }
.tree-row.level-account td:first-child { padding-left: 28px; }
.tree-row.level-order td:first-child { padding-left: 52px; }

.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 20px; margin-top: 8px; }

/* ── 信息概览页 ── */
.card-inner {
  background: #fafafa;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.info-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.chart-box-hourly {
  height: 220px;
}

.chart-box-hourly canvas {
  width: 100% !important;
  height: 220px !important;
}

.info-summary-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.info-card {
  background: #fafafa;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
}

.info-card.highlight {
  background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
  border-color: #91caff;
}

.info-card.warn {
  background: #fff7e6;
  border-color: #ffd591;
}

.info-card.renting {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.info-card.idle {
  background: #f5f5f5;
}

.info-card.off-shelf {
  background: #fff7e6;
  border-color: #ffd591;
}

.info-card-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.info-card-value {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}

.info-card-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.info-section {
  margin-bottom: 20px;
}

.info-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.info-account-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  font: inherit;
  color: inherit;
}

.info-account-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.12);
  transform: translateY(-1px);
}

.info-account-card.renting {
  border-color: #b7eb8f;
  background: #fcfff8;
}

.info-account-card.idle {
  border-color: var(--border);
  background: #fafafa;
}

.info-account-card.off-shelf {
  border-color: #ffd591;
  background: #fffdf8;
}

.info-account-badge.shelf-off {
  background: #fff7e6;
  color: #d46b08;
}

.info-account-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.info-account-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.info-account-eta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.info-account-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: text;
}

.info-account-cost span {
  white-space: nowrap;
}

.info-account-cost-input {
  width: 72px;
  height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  background: #fff;
}

.info-account-cost-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.info-account-payback {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid var(--border-light);
}

.info-account-payback.paid {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.info-account-payback.pending {
  background: #fff7e6;
  border-color: #ffd591;
}

.info-account-payback.unset {
  background: #f5f5f5;
}

.info-account-payback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.info-account-payback-head b {
  font-size: 12px;
  color: var(--text);
  text-align: right;
  line-height: 1.4;
}

.info-account-payback.paid .info-account-payback-head b {
  color: #047857;
}

.info-account-payback.pending .info-account-payback-head b {
  color: #d46b08;
}

.info-account-payback-income {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.info-account-payback-bar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.info-account-payback-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1677ff, #52c41a);
}

.info-account-payback.paid .info-account-payback-bar span {
  background: #52c41a;
}

.info-account-payback.pending .info-account-payback-bar span {
  background: #faad14;
}

.info-account-payback.unset .info-account-payback-bar span {
  width: 0 !important;
}

.info-account-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.info-account-head strong {
  font-size: 13px;
  word-break: break-all;
}

.info-account-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  white-space: nowrap;
}

.info-account-card.renting .info-account-badge {
  background: #f6ffed;
  color: #389e0d;
}

.info-account-remark {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 18px;
}

.info-account-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.info-account-metrics span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.info-account-metrics b {
  font-size: 15px;
}

.info-account-metrics.cumulative {
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.info-account-metrics.cumulative b {
  font-size: 14px;
  color: #1677ff;
}

.info-account-footer {
  font-size: 11px;
  color: var(--muted);
}

.info-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 24px;
  background: #fafafa;
  border-radius: 10px;
  border: 1px dashed var(--border);
}

.account-orders-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.account-orders-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.account-orders-modal-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.account-orders-modal-head p {
  margin: 0;
  font-size: 13px;
}

.account-orders-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid var(--border-light);
}

.account-orders-cost {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: text;
}

.account-orders-cost span:first-child {
  font-weight: 600;
}

.account-orders-cost input {
  width: 120px;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.account-orders-cost input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.account-orders-cost-hint {
  font-size: 12px;
}

.account-orders-payback {
  flex: 1 1 240px;
  min-width: 220px;
}

.account-orders-payback .info-account-payback {
  margin-bottom: 0;
}

.account-orders-table-wrap {
  max-height: calc(100vh - 180px);
  overflow: auto;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .toolbar-divider { display: none; }
  .info-summary-cards { grid-template-columns: repeat(3, 1fr); }
  .summary {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric:nth-child(4),
  .metric:nth-child(5) {
    border-top: 1px solid var(--border-light);
  }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; --topbar-h: 104px; }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    width: 220px;
    height: calc(100vh - var(--topbar-h));
    z-index: 90;
    box-shadow: var(--shadow);
  }

  .sidebar.open { display: block; }

  .topbar {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: 40px 40px;
    gap: 8px;
    padding: 8px 12px;
  }

  .mobile-nav-toggle { display: inline-flex; grid-column: 1; grid-row: 1; align-self: center; }
  .brand { grid-column: 2; grid-row: 1; min-width: 0; }
  .brand-sub { display: none; }
  .topbar-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .btn { flex: 0 0 auto; padding: 6px 9px; font-size: 12px; }
  #system-user-badge { flex: 0 1 auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

  .content { padding: 12px 16px 24px; }

  .summary { grid-template-columns: repeat(2, 1fr); }
  .info-summary-cards { grid-template-columns: repeat(2, 1fr); }

  .metric { border-right: none; }
  .metric:nth-child(odd) { border-right: 1px solid var(--border-light); }

  .split-layout { grid-template-columns: 1fr; }

  .panel { padding: 16px; }
}

/* ── 2026 operations console visual system ── */
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #6c778c;
  --primary: #595be7;
  --primary-dark: #4547c8;
  --primary-light: #eeefff;
  --danger: #e5484d;
  --border: #e3e7ef;
  --border-light: #edf0f5;
  --shadow: 0 7px 24px rgba(31, 42, 68, 0.055);
  --sidebar-w: 236px;
  --topbar-h: 72px;
  --radius: 8px;
}

html, body { height: 100%; max-width: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }

.app-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
}

.sidebar {
  display: flex;
  position: static;
  top: auto;
  height: auto;
  min-height: 0;
  padding: 22px 14px 16px;
  flex-direction: column;
  overflow-y: auto;
  border-right: 0;
  color: #d7deea;
  background: #111a2a;
}
.sidebar-brand {
  display: flex;
  min-height: 48px;
  padding: 0 8px;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}
.sidebar-brand .brand-icon { width: 36px; height: 36px; border-radius: 8px; background: #5b5de8; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 15px; }
.sidebar-brand small { margin-top: 2px; color: #8794aa; font-size: 10px; }
.side-tabs { flex: 1; gap: 4px; margin-top: 30px; }
.side-tabs .tab {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 7px;
  color: #95a1b5;
  font-size: 13px;
}
.side-tabs .tab:hover { color: #fff; background: #19253a; }
.side-tabs .tab.active { color: #fff; background: #5759e7; font-weight: 600; }
.tab-icon { display: grid; width: 20px; place-items: center; font-size: 0; }
.tab-icon svg { width: 17px; height: 17px; }
.sidebar-user {
  display: flex;
  min-height: 62px;
  padding: 11px;
  align-items: center;
  gap: 10px;
  border: 1px solid #243149;
  border-radius: 8px;
  background: #172236;
}
.sidebar-avatar, .topbar-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6567ec;
}
.sidebar-avatar svg { width: 16px; }
.sidebar-user-meta { min-width: 0; }
.sidebar-user-meta strong, .sidebar-user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-meta strong { color: #fff; font-size: 12px; }
.sidebar-user-meta span { max-width: 140px; margin-top: 3px; color: #8c98ac; font-size: 10px; }

.topbar {
  display: flex;
  min-width: 0;
  padding: 0 28px;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.97);
}
.page-heading { min-width: 0; }
.page-heading span { display: block; margin-bottom: 2px; color: #8a94a6; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-size: 20px; line-height: 1.15; }
.topbar-actions { gap: 10px; }
.icon-btn {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #5c6679;
  background: #fff;
  text-decoration: none;
}
.icon-btn:hover { border-color: #cdd1ff; color: var(--primary); background: #f8f8ff; }
.status-badge { display: inline-flex; min-height: 32px; padding: 0 12px; align-items: center; border-radius: 6px; }
.user-menu { position: relative; }
.user-menu summary {
  display: flex;
  min-width: 104px;
  height: 38px;
  padding: 0 8px 0 4px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #344054;
  background: #fff;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary > svg { width: 14px; margin-left: auto; }
.topbar-avatar { width: 28px; height: 28px; font-size: 12px; }
.user-menu-popover {
  position: absolute;
  z-index: 300;
  top: calc(100% + 8px);
  right: 0;
  width: 168px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(31, 42, 68, .14);
}
.user-menu-popover button {
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  color: #475467;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}
.user-menu-popover button:hover { color: var(--primary); background: var(--primary-light); }
.user-menu-popover button svg { width: 15px; }

.topbar { position: static; }
.content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 18px; padding: 22px 28px 36px; }
.card { border: 1px solid var(--border-light); border-radius: 8px; box-shadow: var(--shadow); }
.control-panel {
  display: flex;
  min-height: 48px;
  padding: 7px 10px 7px 14px;
  align-items: center;
  justify-content: space-between;
  border-color: #e6e7ff;
  box-shadow: none;
}
.status-bar { margin: 0; padding: 8px 10px; }
.btn { min-height: 34px; border-radius: 6px; }
.btn.primary { background: var(--primary); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.summary { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; overflow: visible; background: transparent; }
#panel-info > .summary { margin-bottom: 18px; }
.metric {
  display: flex;
  min-height: 112px;
  padding: 20px;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.metric.highlight { background: #fff; }
.metric-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #5759e7;
  background: #eeeeff;
}
.metric-icon.neutral { color: #516176; background: #f0f3f7; }
.metric-icon.cyan { color: #078fa8; background: #e7f8fb; }
.metric-icon.green { color: #16824f; background: #eaf8f0; }
.metric-icon.amber { color: #b46d00; background: #fff4df; }
.metric-label { margin: 0 0 7px; font-size: 11px; }
.metric-value, .metric.highlight .metric-value { font-size: 21px; color: #172033; }

.main-card { min-width: 0; max-width: 100%; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.panel { min-width: 0; max-width: 100%; padding: 0; }
#panel-info > .panel-header { display: none; }
.panel > .panel-header:not(:first-child) { margin-top: 0; }
.panel-header { margin-bottom: 18px; }
.panel-header h3 { font-size: 18px; }
.panel-header .muted { margin-top: 5px; color: #7b8597; font-size: 12px; }
.overview-primary-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, .9fr); gap: 18px; }
.card-inner { padding: 20px; border: 1px solid var(--border-light); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.info-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.info-section-title small { color: #9aa3b2; font-size: 10px; font-weight: 400; }
.chart-box-hourly { height: 318px; }
.status-overview { min-width: 0; }
.market-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.market-toolbar .btn.active { color: #fff; border-color: #5759e7; background: #5759e7; }
.market-measure-toolbar { margin-top: -4px; }
#fivee-market-time { margin-left: auto; font-size: 12px; }
.market-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.market-metric { min-width: 0; padding: 14px; border: 1px solid var(--border-light); border-radius: 8px; background: #fff; }
.market-metric .market-metric-name, .market-metric small { display: block; color: #7b8597; font-size: 12px; }
.market-metric strong { display: block; margin: 5px 0; color: #182338; font-size: 22px; }
.market-metric small.up { color: #0f8c6b; }
.market-metric small.down { color: #d65579; }
.market-activity-value { font-variant-numeric: tabular-nums; }
.market-activity-value.is-rented, .market-line-key .is-rented { color: #d65579; }
.market-activity-value.is-added, .market-line-key .is-added { color: #0f8c6b; }
.market-activity-value.is-unchanged, .market-activity-value.is-missing { color: #7b8597; }
.market-line-key { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: -4px 2px 8px; color: #687386; font-size: 12px; }
.market-line-key span { display: inline-flex; align-items: center; gap: 7px; }
.market-line-key strong { font-size: 16px; line-height: 1; }
.market-chart { min-width: 0; height: 390px; margin-bottom: 16px; }
.market-table-wrap { max-height: 420px; }
.status-chart-wrap { height: 146px; margin: 4px auto 12px; }
.info-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.info-card { min-height: 62px; padding: 9px 10px; border-radius: 6px; box-shadow: none; }
.info-card-value { margin-top: 2px; font-size: 16px; }
.info-card-label { font-size: 9px; }
.info-card-sub { margin-top: 0; font-size: 9px; }
.info-section { margin-top: 18px; padding: 20px; border: 1px solid var(--border-light); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.info-account-grid { margin-top: 14px; }

.table-wrap { border-color: var(--border-light); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.managed-account-table-wrap { width: 100%; min-width: 0; max-width: 100%; }
.managed-account-list-edit { min-height: 26px; padding: 3px 8px; }
th { padding: 11px 14px; color: #697386; background: #fafbfc; font-size: 11px; }
td { padding: 11px 14px; }
.managed-account-list-table th,
.managed-account-list-table td { padding: 7px 10px; }
tbody tr:hover { background: #f8f8ff; }
.form-card, .stats-summary, .inline-metrics, .operations-toolbar, .operations-summary {
  border-color: var(--border-light);
  background: #fff;
  box-shadow: var(--shadow);
}
input, select, textarea { border-radius: 6px; }
.badge, .status-badge, .managed-card-badge, .order-platform-badge { border-radius: 5px; }
.subtab { border-radius: 6px; background: #fff; }
.account-state-card, .managed-account-card, .info-account-card { border-radius: 8px; box-shadow: none; }
.overlay { background: rgba(12, 19, 33, .58); }
.web-auth-gate { background: #eef1f7; }
.web-auth-card { border-radius: 8px; box-shadow: 0 26px 70px rgba(31,42,68,.16); }
.web-auth-brand { border-radius: 8px; background: var(--primary); }

@media (max-width: 1280px) {
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-primary-grid { grid-template-columns: 1fr; }
  .status-overview { display: grid; grid-template-columns: minmax(200px, .65fr) minmax(320px, 1.35fr); gap: 14px 24px; }
  .status-overview > .info-section-title { grid-column: 1 / -1; }
  .status-chart-wrap { width: 100%; margin: 0; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 210px; }
  .topbar { padding: 0 20px; }
  .content { padding: 18px 20px 30px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; --topbar-h: 64px; }
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .sidebar {
    display: none;
    position: fixed;
    z-index: 220;
    top: 0;
    left: 0;
    width: min(280px, 86vw);
    height: 100vh;
    padding: 18px 14px;
    box-shadow: 20px 0 60px rgba(8, 15, 29, .28);
  }
  .sidebar.open { display: flex; }
  .topbar {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 0 14px;
  }
  .mobile-nav-toggle { display: inline-grid; grid-column: 1; grid-row: 1; }
  .page-heading { grid-column: 2; grid-row: 1; }
  .page-heading span { display: none; }
  .page-heading h1 { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { grid-column: 3; grid-row: 1; width: auto; overflow: visible; }
  .topbar-actions > .icon-btn, .topbar-actions > .status-badge { display: none; }
  .user-menu summary { min-width: 36px; width: 36px; padding: 3px; border: 0; }
  .user-menu-label, .user-menu summary > svg { display: none; }
  .content { padding: 14px 14px 24px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { min-height: 96px; padding: 14px; gap: 10px; }
  .metric-icon { width: 32px; height: 32px; }
  .metric-icon svg { width: 15px; }
  .metric-value, .metric.highlight .metric-value { font-size: 17px; }
  .control-panel { align-items: flex-start; }
  .status-overview { display: block; }
  .status-chart-wrap { margin: 8px 0 14px; }
  .panel { padding: 0; }
  .card-inner, .info-section { padding: 15px; }
  .chart-box-hourly { height: 270px; }
}

@media (max-width: 480px) {
  .summary { grid-template-columns: 1fr; }
  .metric { min-height: 78px; align-items: center; }
  .info-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-primary-grid { gap: 12px; }
  #fivee-market-time { width: 100%; margin-left: 0; }
  .market-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-chart { height: 280px; padding: 12px; }
  .panel-header-actions { align-items: stretch; flex-direction: column; }
  .panel-header-btns { width: 100%; }
  .panel-header-btns .btn { flex: 1; }
}

@media (max-width: 340px) {
  .market-metrics { grid-template-columns: 1fr; }
}