*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green-950: #0b2f27; --green-900: #123f34; --green-800: #185747;
  --green-700: #1d7158; --green-600: #16835f; --green-500: #1e9b70;
  --green-100: #dff5eb; --green-50: #f0fbf6;
  --ink: #17211d; --muted: #66736d; --line: #dce7e1;
  --surface: #fff; --canvas: #f4f7f5; --orange: #d97706; --orange-bg: #fff4df;
  --red: #c73b3b; --red-bg: #fff0f0; --blue: #2563eb;
  --primary: var(--green-600); --primary-dark: var(--green-700); --primary-light: var(--green-500);
  --sidebar-bg: var(--green-950); --bg: var(--canvas); --card: var(--surface);
  --text: var(--ink); --text-secondary: var(--muted); --border: var(--line);
  --success: var(--green-600); --warning: var(--orange); --danger: var(--red); --info: var(--blue);
  --radius: 12px; --card-radius: 18px; --shadow: 0 12px 34px rgba(14,58,46,.09);
}
html { font-size: 14px; }
body { font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 228px;
  background: var(--sidebar-bg);
  color: #bfcbd9;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
  transition: width .3s;
  box-shadow: 2px 0 16px rgba(0,0,0,.12);
}
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar .logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.18);
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 16px;
  text-align: center;
  line-height: 1.35;
}
.sidebar .logo img { height: 28px; margin-right: 8px; }
.sidebar .nav-group {
  padding: 10px 0 20px;
}
.sidebar .nav-section-title {
  padding: 18px 26px 7px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  letter-spacing: 1px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 6px;
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  margin: 0 12px;
  padding: 14px 16px;
  color: #c5d0dc;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all .22s ease;
  border-left: none;
  border-radius: 8px;
  position: relative;
}
.sidebar .nav-item + .nav-item {
  margin-top: 4px;
}
.sidebar .nav-item + .nav-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent 100%);
  pointer-events: none;
}
.sidebar .nav-item i {
  margin-right: 12px;
  font-size: 18px;
  width: 22px;
  text-align: center;
  opacity: .92;
}
.sidebar .nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.sidebar .nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(64,158,255,.28), rgba(64,158,255,.12));
  box-shadow: inset 3px 0 0 var(--primary);
}
.main { margin-left: 228px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Top header */
.header { height: 50px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 50; }
.header .tabs { display: flex; gap: 0; height: 100%; }
.header .tab-item { display: flex; align-items: center; padding: 0 16px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.header .tab-item.active { color: var(--primary); border-bottom-color: var(--primary); }
.header .tab-item .tab-close { margin-left: 6px; font-size: 12px; color: #c0c4cc; cursor: pointer; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.header .tab-item .tab-close:hover { background: var(--red); color: #fff; }
.header .user-area { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.header .user-area .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.header .user-area .logout-btn { cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 4px 8px; border-radius: var(--radius); }
.header .user-area .logout-btn:hover { color: var(--danger); }

/* Page content */
.page-content { flex: 1; padding: 16px 20px; overflow-y: auto; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--text); padding-bottom: 12px; border-bottom: 1px solid var(--border); }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.stat-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; position: relative; overflow: hidden; }
.stat-card .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.stat-card .stat-label { font-size: 13px; color: var(--text-secondary); }
.stat-card .stat-tag { font-size: 11px; padding: 2px 8px; border-radius: 2px; background: #ecf5ff; color: var(--primary); }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.stat-card .stat-value .unit { font-size: 14px; font-weight: 400; margin-left: 2px; color: var(--text-secondary); }
.stat-card .stat-footer { font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between; }
.stat-card .stat-footer span { color: var(--text); font-weight: 500; }
.stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; }
.stat-card.blue::after { background: var(--primary); }
.stat-card.green::after { background: var(--success); }
.stat-card.orange::after { background: var(--warning); }
.stat-card.red::after { background: var(--danger); }

/* Operations cockpit cards */
.ops-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 16px 0; }
.ops-stat-card { border: 1px solid #e5ebe7; border-radius: 12px; padding: 16px; background: linear-gradient(145deg, #fff, #f6fbf8); cursor: pointer; min-height: 92px; box-shadow: 0 4px 14px rgba(24,94,58,.06); transition: all .18s ease; }
.ops-stat-card:hover { border-color: #55a779; transform: translateY(-1px); }
.ops-stat-label { color: #667085; font-size: 13px; margin-bottom: 8px; }
.ops-stat-value { color: #17643a; font-size: 24px; font-weight: 700; line-height: 1.25; }
.ops-stat-note { color: #98a2b3; font-size: 12px; margin-top: 5px; }
.ops-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ops-panel-title { font-size:18px; font-weight:700; color:#1f2937; }
.ops-config-grid { display:grid; gap:18px; margin-top:18px; }
.ops-config-section { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px; }
.ops-config-section h3 { margin:0 0 16px; color:#0f6940; font-size:18px; }
.ops-check-row { display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:16px; }
.ops-check { display:inline-flex; align-items:center; gap:7px; color:#334155; font-size:14px; }
.ops-check input { width:17px; height:17px; accent-color:#168b55; }
.ops-config-section .form-group > span { display:block; font-size:13px; font-weight:600; color:#475569; margin-bottom:6px; }
.ops-config-section .form-group small { display:block; color:#94a3b8; margin-top:5px; }
.ops-asset-upload { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px; background:#f8fafc; border-radius:10px; }
.ops-asset-upload .form-control { width:auto; min-width:180px; }
.ops-actions-sticky { position:sticky; bottom:0; z-index:4; display:flex; justify-content:flex-end; gap:10px; padding:18px 0 8px; background:linear-gradient(180deg,rgba(245,248,246,0),var(--canvas) 30%); }
.mini-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:22px; margin:20px 0; }
.mini-phone { max-width:330px; margin:auto; width:100%; padding:12px; background:#111827; border-radius:30px; box-shadow:0 18px 45px rgba(15,23,42,.18); }
.mini-phone-screen { min-height:570px; background:#f7faf8; border-radius:22px; padding:16px; overflow:hidden; }
.mini-preview-banner { width:100%; height:118px; object-fit:cover; border-radius:15px; background:#e2e8f0; }
.mini-notice { font-size:12px; color:#64748b; min-height:20px; }
.mini-service { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #dce9e1; border-radius:14px; padding:14px; margin:12px 0; }
.mini-service b,.mini-service small { display:block; }.mini-service small { margin-top:5px; color:#64748b; }.mini-service img { width:80px; height:70px; object-fit:contain; }
.mini-preview-map { height:210px; border-radius:15px; background:linear-gradient(145deg,#d8efe1,#b7dbca); display:flex; align-items:center; justify-content:center; color:#17613f; margin:15px 0; }
.mini-preview-line { padding:10px 0; border-bottom:1px solid #e2e8f0; color:#475569; }
.mini-chip-list { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }.mini-chip-list span { padding:6px 9px; background:#e8f5ed; color:#17613f; border-radius:999px; font-size:12px; }
.ops-json-preview { white-space:pre-wrap; background:#0f172a; color:#d9fbe7; padding:18px; border-radius:12px; max-height:420px; overflow:auto; }
.ops-error-state { text-align:center; padding:48px; color:#b91c1c; background:#fff7f7; border:1px solid #fecaca; border-radius:12px; }
.ops-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.mini-drop-contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.mini-drop-contact-grid .form-group { min-width:0; }
.mini-drop-contact-grid .form-group--full { grid-column:1 / -1; }
.ops-alert { margin-top:14px; padding:12px 14px; border-radius:8px; font-size:13px; line-height:1.7; }
.ops-alert-warning { color:#92400e; background:#fffbeb; border:1px solid #fde68a; }
@media(max-width:1050px){.mini-preview-grid{grid-template-columns:1fr}.mini-phone{max-width:360px}}
@media(max-width:900px){.ops-form-grid,.mini-drop-contact-grid{grid-template-columns:1fr}.mini-drop-contact-grid .form-group--full{grid-column:auto}}

/* Chart grid */
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.chart-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.chart-card .chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.chart-card .chart-box { width: 100%; height: 220px; }

/* Finance card */
.finance-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.finance-card .finance-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.finance-card .finance-total { text-align: center; margin-bottom: 16px; }
.finance-card .finance-total .amount { font-size: 24px; font-weight: 700; color: var(--primary); }
.finance-card .finance-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.finance-card .finance-row .label { color: var(--text-secondary); }
.finance-card .finance-row .val { font-weight: 600; }
.finance-card .channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.finance-card .channel { text-align: center; }
.finance-card .channel .ch-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.finance-card .channel .ch-title.wechat { color: var(--green-600); }
.finance-card .channel .ch-title.cash { color: var(--orange); }
.finance-card .channel .ch-row { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.finance-card .channel .ch-row span { color: var(--text); font-weight: 500; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #fafafa; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-size: 12px; }
tr:hover td { background: var(--green-50); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 500; transition: all .2s; line-height: 1; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #85ce61; border-color: #85ce61; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #f78989; border-color: #f78989; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-outline { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: #ecf5ff; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--muted); }
.form-control { width: 100%; padding: 8px 12px; border: 1px solid #dcdfe6; border-radius: var(--radius); font-size: 13px; outline: none; transition: border .2s; color: var(--text); }
.form-control:focus { border-color: var(--primary); }
select.form-control { appearance: auto; }

@media (max-width: 760px) {
  .ops-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ops-stat-value { font-size: 19px; }
  .ops-stat-card { min-height: 80px; padding: 12px; }
}

/* Filter bar */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .form-control { width: auto; min-width: 150px; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; font-size: 13px; }
.pagination button { padding: 5px 12px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); cursor: pointer; font-size: 12px; color: var(--muted); }
.pagination button:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination .page-info { color: var(--text-secondary); font-size: 12px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #fff; border-radius: var(--radius); padding: 24px; min-width: 450px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Badge */
.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 500; }
.badge-success { background: #e5f5ee; color: var(--green-700); border: 1px solid #cbe9dc; }
.badge-warning { background: #fff4df; color: var(--orange); border: 1px solid #f2ddb1; }
.badge-danger { background: #fff0f0; color: var(--red); border: 1px solid #f2cccc; }
.badge-info { background: #edf4ff; color: var(--blue); border: 1px solid #ceddfa; }

/* Toast */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { padding: 12px 20px; border-radius: var(--radius); color: #fff; font-size: 13px; margin-bottom: 8px; animation: slideIn .3s; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Login page */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #3a7afe 0%, #6dd5ed 100%); }
.login-box { background: #fff; border-radius: 8px; padding: 40px 36px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.login-box h1 { text-align: center; font-size: 20px; color: var(--text); margin-bottom: 6px; }
.login-box p { text-align: center; color: var(--text-secondary); margin-bottom: 28px; font-size: 13px; }
.login-box .form-control { padding: 10px 14px; font-size: 14px; }
.login-box .btn { width: 100%; padding: 11px; font-size: 15px; margin-top: 8px; justify-content: center; }

/* Footer */
.footer { text-align: center; padding: 12px; font-size: 12px; color: #c0c4cc; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}

/* Regional operations theme: shares the visual language of the regional portal while
   retaining the total platform's existing routes, tabs and business components. */
html, body { min-height: 100%; background: var(--canvas); }
body { font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; font-synthesis: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted) !important; }
.eyebrow { margin: 0 0 5px; color: var(--green-600); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Branded shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.app-shell .sidebar { position: sticky; inset: auto; top: 0; width: auto; height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 22px 14px; background: var(--green-950); color: #d8eee5; box-shadow: none; z-index: 40; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand strong, .brand small { display: block; }
.brand strong { color: #fff; font-size: 15px; }
.brand small { color: #8eb4a6; font-size: 10px; margin-top: 3px; letter-spacing: .08em; }
.brand-mark { width: 68px; height: 68px; border-radius: 20px; background: rgba(238,255,248,.92); border: 1px solid rgba(255,255,255,.38); display: grid; place-items: center; overflow: hidden; padding: 7px; flex: none; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; padding: 5px; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-logo-fallback { font-weight: 900; color: var(--green-800); font-size: 13px; line-height: 1; text-align: center; }
.sidebar .nav-group { flex: 1; overflow-y: auto; padding: 16px 0; }
.sidebar .nav-group::-webkit-scrollbar { width: 5px; }
.sidebar .nav-group::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 99px; }
.sidebar .nav-section-title { margin: 13px 10px 4px; padding: 12px 3px 6px; border-top: 1px solid rgba(255,255,255,.09); color: #789f91; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sidebar .nav-item { display: flex; align-items: center; gap: 11px; margin: 3px 0 0; padding: 11px 13px; border: 0; border-radius: 11px; color: #b9d4ca; font-size: 14px; font-weight: 500; letter-spacing: 0; transition: .15s; }
.sidebar .nav-item + .nav-item::before { display: none; }
.sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar .nav-item.active { color: #fff; background: var(--green-600); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.sidebar .nav-item .nav-icon { width: 20px; text-align: center; font-size: 17px; flex: none; }
.sidebar .nav-item .nav-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.account-mini { display: flex; align-items: center; gap: 10px; padding: 7px; }
.account-mini span:last-child { min-width: 0; }
.account-mini strong, .account-mini small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-mini small { color: #8eb4a6; margin-top: 3px; }
.avatar { width: 36px; height: 36px; border-radius: 12px; background: #d9f3e9; color: var(--green-800); font-weight: 800; display: grid; place-items: center; flex: none; }

.main-shell { min-width: 0; margin-left: 0; display: flex; flex-direction: column; }
.topbar.header { height: 84px; padding: 0 28px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.topbar-title { min-width: 0; }
.topbar-title h1 { margin: 0; font-size: 22px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.secure-pill { padding: 8px 11px; background: var(--green-50); color: var(--green-700); border: 1px solid #caeade; border-radius: 999px; font-size: 12px; font-weight: 700; }
.icon-btn { border: 0; background: transparent; color: var(--ink); font-size: 22px; padding: 8px; border-radius: 9px; }
.mobile-only { display: none !important; }
.tabs-bar { min-height: 43px; padding: 0 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 84px; z-index: 29; overflow-x: auto; scrollbar-width: thin; }
.tabs-bar .tabs { display: flex; align-items: stretch; min-width: max-content; height: 42px; gap: 5px; }
.tabs-bar .tab-item { display: flex; align-items: center; gap: 7px; padding: 0 13px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tabs-bar .tab-item:hover { color: var(--green-700); background: var(--green-50); }
.tabs-bar .tab-item.active { color: var(--green-700); border-bottom-color: var(--green-600); }
.tabs-bar .tab-close { width: 17px; height: 17px; margin-left: 1px; border-radius: 50%; color: #96a39d; display: inline-flex; align-items: center; justify-content: center; }
.tabs-bar .tab-close:hover { color: #fff; background: var(--red); }
.page-content { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 26px; overflow: visible; outline: none; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 14px 26px 20px; color: #93a099; }
.admin-loading { min-height: 280px; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #d7e6df; border-top-color: var(--green-600); animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sidebar-mask { display: none; }

/* Components */
.card, .chart-card, .finance-card, .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 3px 15px rgba(24,63,50,.035); }
.card { padding: 20px; }
.card-title { color: var(--ink); border-bottom-color: var(--line); font-size: 16px; }
.chart-card, .finance-card, .stat-card { padding: 18px; }
.chart-card[style] { border-radius: var(--card-radius) !important; box-shadow: 0 3px 15px rgba(24,63,50,.035) !important; }
.chart-card .chart-title { color: var(--ink); font-size: 14px; }
.stat-grid { gap: 16px; }
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-value, .stat-card .value { color: var(--ink); }
.stat-card .label, .stat-card .stat-label { color: var(--muted); font-weight: 700; }
.stat-card .corner { position: absolute; right: 16px; top: 15px; width: 35px; height: 35px; border-radius: 11px; background: var(--green-50); display: grid; place-items: center; font-size: 18px; }
.dashboard-stat { min-height: 126px; background: var(--surface) !important; border-color: color-mix(in srgb, var(--stat-color) 24%, var(--line)); }
.dashboard-stat .stat-label, .dashboard-stat .stat-value { color: var(--stat-color); }
.dashboard-stat .corner { background: var(--stat-bg); }
.dashboard-stat--environmental-gold .stat-value { margin-left: 6px; }
.dashboard-stat--environmental-gold small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.dashboard-stat--users small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.dashboard-stat.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.dashboard-stat.clickable:hover { transform: translateY(-2px); border-color: var(--stat-color); box-shadow: var(--shadow); }
.dashboard-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ops-stat-card { border-color: var(--line); border-radius: 14px; background: linear-gradient(145deg,#fff,var(--green-50)); }
.ops-stat-card:hover { border-color: var(--green-500); }
.ops-stat-value, .ops-config-section h3 { color: var(--green-700); }
.ops-config-section { border-color: var(--line); border-radius: 14px; }
.ops-check input { accent-color: var(--green-600); }
.ops-alert { border-radius: 12px; }

.btn { min-height: 38px; padding: 9px 14px; border-radius: 10px; font-weight: 700; line-height: 1.2; transition: .15s; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary, .btn-success { color: #fff; background: var(--green-600); border-color: var(--green-600); }
.btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled) { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.btn-outline, .btn-ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-outline:hover, .btn-ghost:hover { color: var(--green-700); background: var(--green-50); border-color: #a8c4b7; }
.btn-danger { color: var(--red); background: var(--red-bg); border-color: #ffd2d2; }
.btn-danger:hover:not(:disabled) { color: #fff; background: var(--red); border-color: var(--red); }
.btn-warning { color: #fff; background: var(--orange); border-color: var(--orange); }
.btn-sm { min-height: 31px; padding: 6px 10px; font-size: 12px; }
.btn-block { width: 100%; }

.form-group label, .field > span { color: #47554e; font-weight: 700; }
.form-control, .field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #cad8d1; border-radius: 12px; outline: none; }
.field { display: block; margin: 22px 0; }
.field > span { display: block; margin-bottom: 8px; }
.field textarea { min-height: 96px; resize: vertical; }
.form-control:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(30,155,112,.12); }
.filter-bar { align-items: end; gap: 10px; }
.order-agent-filter { display: grid; grid-template-columns: auto minmax(220px,360px) minmax(240px,1fr); align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 12px 14px; background: linear-gradient(135deg,var(--green-50),#f7fbf9); border: 1px solid #cfe5da; border-radius: 14px; }
.order-agent-filter-label { color: var(--green-800); font-size: 13px; font-weight: 800; }
.order-agent-select { min-width: 220px; font-size: 13px; }
.order-agent-filter-note { grid-column: 3; color: var(--muted); font-size: 11px; line-height: 1.5; }
.point-owner-cell { min-width: 140px; }
.point-owner-name { display: block; color: var(--green-800); font-weight: 800; }
.point-owner-name.ownership-platform_direct { color: var(--muted); }
.point-owner-name.ownership-ownership_unknown,
.point-owner-name.ownership-agent_record_missing { color: var(--orange); }
.point-owner-code { display: block; max-width: 190px; margin-top: 3px; overflow: hidden; color: var(--muted); font-family: monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.point-owner-empty { color: var(--muted); }

.table-wrap { width: 100%; overflow: auto; border-radius: 13px; }
table { min-width: 720px; }
th, td { padding: 13px 15px; border-bottom-color: #edf1ef; vertical-align: middle; }
th { color: var(--muted); background: #fafcfb; }
tr:hover td { background: #fbfdfc; }
.pagination { align-items: center; gap: 8px; }
.pagination button { min-height: 34px; padding: 7px 11px; color: var(--ink); border-color: var(--line); border-radius: 8px; }
.pagination button:hover:not(:disabled) { color: var(--green-700); border-color: var(--green-500); background: var(--green-50); }

.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge-success { color: var(--green-700); background: var(--green-100); border-color: #caeade; }
.badge-warning { color: #9a5a00; background: var(--orange-bg); border-color: #f5dbaa; }
.badge-danger { color: var(--red); background: var(--red-bg); border-color: #ffd1d1; }
.badge-info { color: #315fa9; background: #edf4ff; border-color: #cfe0ff; }
.modal-overlay { padding: 20px; background: rgba(6,31,24,.6); }
.modal { width: min(680px, 100%); min-width: 0; padding: 24px; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.modal-title { color: var(--ink); border-bottom-color: var(--line); }
.modal-actions { border-top-color: var(--line); }
.toast-container { top: 96px; right: 20px; width: min(360px, calc(100vw - 40px)); }
.toast { padding: 13px 15px; border-radius: 12px; background: var(--green-700); box-shadow: var(--shadow); line-height: 1.55; }
.toast-success { background: var(--green-700); }
.toast-error { background: #9d2929; }

/* Login */
.login-body { min-height: 100vh; background: radial-gradient(circle at 12% 8%,#296e57 0,#123f34 36%,#092920 100%); display: grid; place-items: center; padding: 28px; }
.login-shell { width: min(1050px,100%); min-height: 620px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; background: #fff; box-shadow: 0 32px 90px rgba(0,0,0,.3); }
.login-brand { padding: 68px; color: #fff; background: linear-gradient(145deg,rgba(8,48,37,.93),rgba(20,106,78,.9)),radial-gradient(circle at 80% 10%,#48c497,#092d23); }
.login-brand > .brand-mark .brand-logo-fallback { font-size: 14px; }
.login-brand .eyebrow { color: #a8e4cf; margin-top: 62px; }
.login-brand h1 { margin: 8px 0 18px; font-size: 42px; line-height: 1.2; }
.login-lead { max-width: 480px; color: #d7eee6; line-height: 1.9; font-size: 16px; }
.login-feature-grid { margin-top: 62px; display: grid; gap: 12px; }
.login-feature-grid div { padding: 15px 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 14px; display: flex; justify-content: space-between; gap: 15px; }
.login-feature-grid span { color: #bcded2; text-align: right; }
.login-card { padding: 68px 54px; display: flex; flex-direction: column; justify-content: center; }
.login-card h2 { margin: 4px 0 8px; font-size: 30px; }
.login-card form { margin-top: 2px; }
.login-card .btn { padding: 12px 15px; }
.login-note { margin: 25px 0 0; color: #83908a; font-size: 12px; line-height: 1.7; }
.mobile-brand { display: none; align-items: center; gap: 10px; }

/* SUPER regional-station business report: dense rows, phone two-line list and 12-month charts. */
.page-content.admin-agent-report-page { max-width: 1760px; }
.admin-agent-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.admin-agent-report-head h2 { margin: 0; font-size: 22px; }
.admin-agent-report-head p { margin: 4px 0 0; color: var(--muted); }
.admin-agent-report-head-actions { display: flex; gap: 8px; flex: none; }
.admin-agent-report-filter-card { margin-bottom: 8px; padding: 11px 13px 9px; border-radius: 8px; box-shadow: none; }
.admin-agent-report-filter-bar { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-agent-report-filter-bar > label { display: grid; flex: 1 1 126px; min-width: 126px; gap: 4px; }
.admin-agent-report-filter-bar > label > span { color: #47554e; font-size: 12px; font-weight: 800; }
.admin-agent-report-filter-bar .form-control { min-height: 36px; padding: 7px 9px; border-radius: 7px; }
.admin-agent-report-filter-keyword { flex-basis: 230px !important; }
.admin-agent-report-filter-point { flex-basis: 190px !important; }
.admin-agent-report-filter-date { flex-basis: 145px !important; }
.admin-agent-report-filter-actions { display: flex; align-items: center; gap: 8px; }
.admin-agent-report-filter-actions .btn { min-height: 36px; padding: 7px 12px; }
.admin-agent-report-filter > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.admin-agent-report-export-note { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #d99622; background: #fff9ec; color: #86520b; font-size: 12px; line-height: 1.55; }
.admin-agent-report-summary { display: flex; align-items: center; gap: 0; margin-bottom: 8px; padding: 9px 12px; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; color: var(--muted); white-space: nowrap; }
.admin-agent-report-summary span { display: inline-flex; align-items: center; }
.admin-agent-report-summary span + span::before { content: '｜'; margin: 0 12px; color: #c5d0ca; }
.admin-agent-report-summary strong { margin-left: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-agent-report-results { background: #fff; }
.admin-agent-report-table-wrap { width: 100%; max-height: 68vh; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-agent-report-table { width: 100%; min-width: 1600px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.admin-agent-report-table th, .admin-agent-report-table td { padding: 10px 12px; border-bottom: 1px solid #e8eeeb; text-align: left; vertical-align: middle; font-size: 13px; }
.admin-agent-report-table th { position: sticky; top: 0; z-index: 3; background: #f5f9f7; color: #526159; font-size: 12px; white-space: nowrap; }
.admin-agent-report-table tbody tr { background: #fff; }
.admin-agent-report-table tbody tr:nth-child(even) { background: #fbfdfc; }
.admin-agent-report-table tbody tr:hover { background: #f2f8f5; }
.admin-agent-report-table tbody tr:last-child td { border-bottom: 0; }
.admin-agent-report-table th:nth-child(1) { width: 270px; }
.admin-agent-report-table th:nth-child(2) { width: 150px; }
.admin-agent-report-table th:nth-child(3) { width: 190px; }
.admin-agent-report-table th:nth-child(4) { width: 105px; }
.admin-agent-report-table th:nth-child(5) { width: 105px; }
.admin-agent-report-table th:nth-child(6) { width: 170px; }
.admin-agent-report-table th:nth-child(7) { width: 180px; }
.admin-agent-report-table th:nth-child(8) { width: 200px; }
.admin-agent-report-table th:nth-child(9) { width: 130px; }
.admin-agent-report-table th:nth-child(10) { width: 76px; }
.admin-agent-report-table th:first-child, .admin-agent-report-table td:first-child { position: sticky; left: 0; background: inherit; box-shadow: 1px 0 0 #e2eae6; }
.admin-agent-report-table th:last-child, .admin-agent-report-table td:last-child { position: sticky; right: 0; background: inherit; box-shadow: -1px 0 0 #e2eae6; }
.admin-agent-report-table th:first-child, .admin-agent-report-table th:last-child { z-index: 5; background: #f5f9f7; }
.admin-agent-report-table td > small, .admin-agent-report-table td > strong, .admin-agent-report-table td > span, .admin-agent-report-table td > code { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.admin-agent-report-table td > strong:first-child, .admin-agent-report-table td > span:first-child { margin-top: 0; }
.admin-agent-report-order-cell strong, .admin-agent-report-order-cell code, .admin-agent-report-point-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-agent-report-order-cell code { color: #435049; font-family: inherit; font-weight: 700; }
.admin-agent-report-order-cell small, .admin-agent-report-point-cell small, .admin-agent-report-time small { color: var(--muted); white-space: nowrap; }
.admin-agent-report-type { font-weight: 800; color: #245c9d; }
.admin-agent-report-status { display: inline-flex !important; align-items: center; width: max-content; max-width: 100%; margin-top: 5px !important; padding: 3px 7px; border: 1px solid var(--admin-agent-report-status); border-radius: 999px; color: var(--admin-agent-report-status); font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.admin-agent-report-funding { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; white-space: normal; }
.admin-agent-report-number { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-agent-report-money { color: #c56d05; font-weight: 800; }
.admin-agent-report-time span, .admin-agent-report-time small { white-space: nowrap; }
.admin-agent-report-action { text-align: center !important; }
.admin-agent-report-empty, .admin-agent-report-mobile-empty, .admin-agent-report-load-error { display: grid; justify-items: center; gap: 5px; padding: 30px; color: var(--muted); }
.admin-agent-report-empty strong, .admin-agent-report-mobile-empty strong, .admin-agent-report-load-error strong { color: var(--ink); }
.admin-agent-report-mobile-list { display: none; }
.admin-agent-report-pagination { padding: 10px 4px 12px; }
.admin-agent-report-history, .admin-agent-report-charts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-agent-report-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.admin-agent-report-section-head h3 { margin: 0; font-size: 16px; }
.admin-agent-report-section-head span { color: var(--muted); font-size: 12px; }
.admin-agent-report-history .table-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.admin-agent-report-history small { color: var(--muted); }
.admin-agent-report-history-empty { text-align: center; color: var(--muted); }
.admin-agent-report-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.admin-agent-report-chart-grid > .chart-card { min-width: 0; }
.admin-agent-report-chart-grid .chart-box { min-width: 0; height: 280px; overflow: hidden; }
.admin-agent-report-chart-error { height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; }
.admin-agent-report-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; margin-top: 14px; }
.admin-agent-report-detail-grid > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-agent-report-detail-grid span, .admin-agent-report-detail-grid strong { display: block; }
.admin-agent-report-detail-grid span { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.admin-agent-report-detail-grid strong { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chart-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-bottom-grid { grid-template-columns: 1fr; }
  .admin-agent-report-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .login-body { padding: 0; background: #fff; }
  .login-shell { min-height: 100vh; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .login-brand { display: none; }
  .login-card { min-height: 100vh; padding: 42px 24px; }
  .mobile-brand { display: flex; margin-bottom: 68px; color: var(--green-700); font-weight: 800; }
  .login-card h2 { font-size: 26px; }

  .app-shell { display: block; }
  .app-shell .sidebar { display: flex; position: fixed; left: -268px; top: 0; width: 258px; height: 100vh; transition: left .2s; box-shadow: 10px 0 35px rgba(0,0,0,.2); }
  .app-shell .sidebar.open { left: 0; }
  .sidebar-mask { display: block; position: fixed; inset: 0; background: rgba(7,28,22,.5); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-mask.open { opacity: 1; pointer-events: auto; }
  .mobile-only { display: inline-flex !important; }
  .main-shell { margin-left: 0; }
  .topbar.header { height: 76px; padding: 0 14px; }
  .topbar-title h1 { font-size: 18px; }
  .topbar .eyebrow, .secure-pill { display: none; }
  .top-actions .btn { min-height: 34px; padding: 8px 10px; }
  .tabs-bar { top: 76px; padding: 0 8px; }
  .tabs-bar .tab-item { padding: 0 11px; }
  .page-content { padding: 15px; }
  .footer { padding: 12px 15px 18px; flex-direction: column; gap: 4px; }
  .stat-grid, .chart-grid, .dashboard-bottom-grid, .ops-form-grid { grid-template-columns: 1fr; }
  .card, .chart-card, .finance-card, .stat-card { border-radius: var(--card-radius); }
  .order-agent-filter { display: block; padding: 11px 12px; }
  .order-agent-filter-label { display: block; padding: 0 0 8px; }
  .order-agent-select { width: 100%; min-width: 0; }
  .order-agent-filter-note { display: block; margin-top: 6px; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-bar .form-control, .filter-bar .btn { width: 100% !important; }
  table { min-width: 640px; }
  .pagination { justify-content: center; flex-wrap: wrap; }
  .pagination .page-info { width: 100%; text-align: center; }
  .modal-overlay { align-items: flex-end; padding: 10px; }
  .modal { width: 100%; max-width: none; max-height: 88vh; padding: 20px; border-radius: 20px 20px 12px 12px; }
  .toast-container { top: 84px; right: 12px; width: calc(100vw - 24px); }
  .admin-agent-report-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-agent-report-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-agent-report-filter-card { padding: 11px; border-left: 0; border-right: 0; }
  .admin-agent-report-filter-bar { display: grid; grid-template-columns: 1fr; }
  .admin-agent-report-filter-bar > label { min-width: 0; }
  .admin-agent-report-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-agent-report-filter-actions .btn { width: 100%; }
  .admin-agent-report-export-note { margin-bottom: 6px; }
  .admin-agent-report-summary { margin-bottom: 0; padding: 8px 2px; }
  .admin-agent-report-summary span + span::before { margin: 0 8px; }
  .admin-agent-report-table-wrap, .admin-agent-report-table { display: none; }
  .admin-agent-report-mobile-list { display: block; border-top: 1px solid var(--line); }
  .admin-agent-report-mobile-item { padding: 10px 0; border-bottom: 1px solid #e4ebe7; }
  .admin-agent-report-mobile-item:last-child { border-bottom: 0; }
  .admin-agent-report-mobile-primary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; min-width: 0; }
  .admin-agent-report-mobile-primary code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #435049; font-family: inherit; font-size: 12px; }
  .admin-agent-report-mobile-primary .admin-agent-report-status { max-width: 108px; margin-top: 0 !important; }
  .admin-agent-report-mobile-primary > strong { color: #c56d05; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .admin-agent-report-mobile-secondary { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
  .admin-agent-report-mobile-secondary > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .admin-agent-report-mobile-secondary .btn { flex: none; padding: 5px 8px; }
  .admin-agent-report-mobile-empty { border-bottom: 1px solid var(--line); }
  .admin-agent-report-history, .admin-agent-report-charts { margin-top: 14px; }
  .admin-agent-report-section-head { flex-direction: column; gap: 3px; }
  .admin-agent-report-chart-grid .chart-box { height: 260px; }
  .admin-agent-report-detail-grid { grid-template-columns: 1fr; }
}
.clearance-detail-modal .cd-modal-close-card {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  border: 1px solid #c8dad4;
  border-radius: 14px;
  background: #f6fbf9;
  color: #126d57;
  box-shadow: 0 3px 10px rgba(20, 74, 62, .14);
  font-size: 30px;
  line-height: 42px;
  cursor: pointer;
}
.clearance-detail-modal .cd-modal-close-card:hover { background: #e8f6f1; color: #0b5543; }

/* Cash payout order workbench. Scoped so existing administration filters keep their layout. */
.cash-payout-workbench .cash-payout-filter {
  display: grid;
  grid-template-columns: minmax(210px,1.35fr) minmax(130px,.75fr) minmax(165px,1fr) minmax(155px,.95fr) 150px 150px auto minmax(180px,.9fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cash-payout-workbench .cash-payout-filter .form-control,
.cash-payout-workbench .cash-payout-filter .btn { width: 100%; min-width: 0; }
.cash-payout-workbench .cash-payout-filter .btn { white-space: nowrap; }
.cash-payout-workbench .cash-payout-orders-table { min-width: 1320px; }
.cash-payout-workbench .cash-order-user { min-width: 180px; line-height: 1.65; }
.cash-payout-workbench .cash-order-user small,
.cash-payout-workbench .cash-order-point small { color: var(--muted); }
.cash-payout-workbench .cash-order-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 170px; }
.cash-payout-workbench .cash-payout-blocked { display: block; max-width: 220px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.cash-payout-workbench .balance-payout-card { margin-top: 18px; }
.cash-payout-workbench .balance-payout-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cash-payout-workbench .balance-payout-title { margin: 0; color: var(--ink); font-size: 17px; }
.cash-payout-workbench .balance-payout-search { display: flex; align-items: center; gap: 10px; width: min(430px,100%); }
.cash-payout-workbench .balance-payout-search .form-control { min-width: 0; }
.cash-payout-workbench .balance-payout-table { min-width: 820px; }
.cash-payout-workbench .cash-payout-modal-summary { padding: 14px 16px; border: 1px solid #cfe5da; border-radius: 12px; background: var(--green-50); color: var(--green-800); line-height: 1.8; }

@media (max-width: 1600px) {
  .cash-payout-workbench .cash-payout-filter { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 1050px) {
  .cash-payout-workbench .cash-payout-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .cash-payout-workbench .cash-payout-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cash-payout-workbench .balance-payout-head { align-items: stretch; flex-direction: column; }
  .cash-payout-workbench .balance-payout-search { width: 100%; }
}

@media (max-width: 760px) {
  .cash-payout-workbench .cash-payout-filter { grid-template-columns: 1fr; }
  .cash-payout-workbench .balance-payout-search { align-items: stretch; flex-direction: column; }
  .cash-payout-workbench .balance-payout-search .btn { width: 100%; }
}

/* Unified payout history. Scoped so the compact nine-control header does not
   change legacy filter bars elsewhere in the total administration portal. */
.payout-history-workbench .payout-history-filter {
  display: grid;
  grid-template-columns: minmax(220px,1.35fr) minmax(130px,.72fr) minmax(165px,.9fr) minmax(190px,1.05fr) 150px 150px auto minmax(180px,.9fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.payout-history-workbench .payout-history-filter .form-control,
.payout-history-workbench .payout-history-filter .btn { width: 100%; min-width: 0; }
.payout-history-workbench .payout-history-filter .btn { white-space: nowrap; }
.payout-history-workbench .payout-history-table { min-width: 1440px; }
.payout-history-workbench .payout-history-time { min-width: 150px; color: #374151; font-size: 12px; white-space: nowrap; }
.payout-history-workbench .payout-history-user { min-width: 170px; line-height: 1.65; }
.payout-history-workbench .payout-history-user small,
.payout-history-workbench .payout-history-point small { color: var(--muted); }
.payout-history-workbench .payout-history-point { min-width: 150px; line-height: 1.65; }
.payout-history-workbench .payout-history-order { max-width: 230px; overflow-wrap: anywhere; }
.payout-history-workbench .payout-history-remark { min-width: 160px; max-width: 280px; color: var(--muted); overflow-wrap: anywhere; }
.payout-history-workbench .payout-history-warning { margin-top: 5px; color: #9a6700; font-size: 12px; line-height: 1.45; }
.payout-history-workbench .payout-history-empty { padding: 36px; text-align: center; color: var(--muted); }

@media (max-width: 1600px) {
  .payout-history-workbench .payout-history-filter { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 1050px) {
  .payout-history-workbench .payout-history-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .payout-history-workbench .payout-history-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .payout-history-workbench .payout-history-filter { grid-template-columns: 1fr; }
}

/* SUPER-only Carbon Benefit account and synchronization details workbench. */
.carbon-benefit-points-page { display: grid; gap: 16px; }
.carbon-benefit-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  border: 1px solid #cfe7dc;
  border-radius: 16px;
  background: linear-gradient(135deg,#f2fbf7 0%,#fff 64%,#f6fbf9 100%);
  box-shadow: 0 8px 26px rgba(18,109,87,.07);
}
.carbon-benefit-hero h2 { margin: 5px 0 7px; color: var(--green-800); font-size: 24px; }
.carbon-benefit-hero p { max-width: 900px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.carbon-benefit-hero .carbon-benefit-hero-detail { margin-top: 6px; }
.carbon-benefit-eyebrow { color: var(--green-700); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.carbon-benefit-safety-pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #b9dfcd;
  border-radius: 999px;
  background: #fff;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.carbon-benefit-tabs {
  display: inline-flex;
  width: fit-content;
  padding: 4px;
  border: 1px solid #d7e5de;
  border-radius: 12px;
  background: #f5f9f7;
}
.carbon-benefit-tab {
  min-width: 138px;
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5b6d65;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.carbon-benefit-tab:hover { color: var(--green-700); }
.carbon-benefit-tab.active { background: #fff; color: var(--green-700); box-shadow: 0 2px 8px rgba(16,91,72,.12); }
.carbon-benefit-panel[hidden], .carbon-benefit-linked-person[hidden] { display: none !important; }
.carbon-benefit-panel { display: grid; gap: 14px; }
.carbon-benefit-card { padding: 18px; }
.carbon-benefit-linked-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid #bcded0;
  border-radius: 11px;
  background: #effaf5;
  color: #1e5e4d;
  font-size: 13px;
}
.carbon-benefit-query-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #d8e5df;
  border-radius: 12px;
  background: #fff;
}
.carbon-benefit-context-main { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; color: #56675f; font-size: 12px; }
.carbon-benefit-context-main b { color: #293c34; }
.carbon-benefit-context-status { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.carbon-benefit-context-status.is-ready { background: #e7f7ef; color: #08734e; }
.carbon-benefit-context-status.is-blocked { background: #fff4df; color: #9a6700; }
.carbon-benefit-summary-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.carbon-benefit-summary-card {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #e0e9e4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(26,66,54,.04);
}
.carbon-benefit-summary-card span { display: block; min-height: 34px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.carbon-benefit-summary-card strong { display: block; margin-top: 6px; color: #263a32; font-size: 23px; }
.carbon-benefit-summary-card.is-success { border-color: #bee3d0; background: #f3fbf7; }
.carbon-benefit-summary-card.is-success strong { color: #08734e; }
.carbon-benefit-summary-card.is-warning { border-color: #f0d7aa; background: #fffaf0; }
.carbon-benefit-summary-card.is-warning strong { color: #a46608; }
.carbon-benefit-summary-card.is-danger { border-color: #f0c4c4; background: #fff7f7; }
.carbon-benefit-summary-card.is-danger strong { color: #b42318; }
.carbon-benefit-filter-grid { display: grid; align-items: end; gap: 12px; margin-bottom: 16px; }
.carbon-benefit-account-filter { grid-template-columns: minmax(230px,1.5fr) repeat(3,minmax(135px,.8fr)) repeat(2,minmax(155px,.9fr)) auto; }
.carbon-benefit-order-filter { grid-template-columns: minmax(230px,1.35fr) repeat(4,minmax(135px,.78fr)) repeat(2,minmax(155px,.9fr)) auto; }
.carbon-benefit-field { display: grid; min-width: 0; gap: 6px; }
.carbon-benefit-field > span { color: #52645c; font-size: 12px; font-weight: 700; }
.carbon-benefit-field .form-control { width: 100%; min-width: 0; }
.carbon-benefit-filter-actions { display: flex; align-items: center; gap: 8px; }
.carbon-benefit-filter-actions .btn { min-height: 38px; white-space: nowrap; }
.carbon-benefit-readonly-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #88bba8;
  border-radius: 0 8px 8px 0;
  background: #f4f8f6;
  color: #5d6d66;
  font-size: 12px;
  line-height: 1.65;
}
.carbon-benefit-table-wrap { margin: 0 -2px; }
.carbon-benefit-table { width: 100%; }
.carbon-benefit-account-table { min-width: 1520px; }
.carbon-benefit-order-table { min-width: 1720px; }
.carbon-benefit-table th { white-space: nowrap; }
.carbon-benefit-table td { vertical-align: top; line-height: 1.6; }
.carbon-benefit-user-cell { display: grid; min-width: 180px; gap: 2px; }
.carbon-benefit-user-cell > span, .carbon-benefit-user-cell > small { color: var(--muted); font-size: 12px; }
.carbon-benefit-points-value { color: var(--green-700); font-size: 18px; font-weight: 800; }
.carbon-benefit-cell-note, .carbon-benefit-cell-error { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.carbon-benefit-cell-note.is-blocked, .carbon-benefit-cell-error { max-width: 250px; color: #b42318; }
.carbon-benefit-cell-note.is-test { color: #8a5a00; font-weight: 700; }
.carbon-benefit-state { display: inline-flex; align-items: center; max-width: 250px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.45; }
.carbon-benefit-state-success { background: #e7f7ef; color: #08734e; }
.carbon-benefit-state-warning { background: #fff3d9; color: #946000; }
.carbon-benefit-state-danger { background: #feecec; color: #b42318; }
.carbon-benefit-state-info { background: #edf4ff; color: #245ca7; }
.carbon-benefit-state-muted { background: #eef2f0; color: #5b6a64; }
.carbon-benefit-text-button { width: fit-content; margin: 3px 0 0; padding: 0; border: 0; background: none; color: var(--green-700); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.carbon-benefit-text-button:hover { color: var(--green-800); }
.carbon-benefit-nowrap { white-space: nowrap; }
.carbon-benefit-empty { padding: 34px !important; color: var(--muted); text-align: center; }
.carbon-benefit-empty.is-error { color: #b42318; }
.carbon-benefit-denied { max-width: 620px; margin: 30px auto; padding: 28px; text-align: center; }
.carbon-benefit-denied h3 { margin: 0 0 8px; color: #9f2525; }
.carbon-benefit-denied p { margin: 0; color: var(--muted); }

@media (max-width: 1600px) {
  .carbon-benefit-account-filter, .carbon-benefit-order-filter { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .carbon-benefit-field-wide { grid-column: span 2; }
}

@media (max-width: 1100px) {
  .carbon-benefit-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .carbon-benefit-account-filter, .carbon-benefit-order-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .carbon-benefit-query-context { align-items: stretch; flex-direction: column; }
  .carbon-benefit-context-status { width: fit-content; }
}

@media (max-width: 760px) {
  .carbon-benefit-hero { align-items: stretch; flex-direction: column; padding: 18px; }
  .carbon-benefit-hero h2 { font-size: 21px; }
  .carbon-benefit-safety-pill { width: fit-content; white-space: normal; }
  .carbon-benefit-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .carbon-benefit-tab { min-width: 0; padding: 8px 10px; }
  .carbon-benefit-linked-person { align-items: stretch; flex-direction: column; }
  .carbon-benefit-linked-person .btn { width: 100%; }
  .carbon-benefit-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .carbon-benefit-account-filter, .carbon-benefit-order-filter { grid-template-columns: 1fr; }
  .carbon-benefit-field-wide { grid-column: auto; }
  .carbon-benefit-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .carbon-benefit-filter-actions .btn { width: 100%; }
  .carbon-benefit-card { padding: 14px; }
}

/* Admin UI display adjustments: order filters, point actions and carbon-reduction placeholder. */
.order-filter-bar {
  display: grid;
  gap: 8px;
  align-items: stretch;
}
.order-filter-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.order-filter-date-separator { color: #66736d; }
.order-filter-export-divider {
  height: 24px;
  margin: 0 6px;
  border-left: 1px solid #dce7e1;
}
.order-filter-export-note { color: #53615a; font-size: 14px; }

.point-action-cell {
  width: 1%;
  min-width: 132px;
  white-space: nowrap;
}
.point-action-stack {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.point-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.point-action-stack .point-agent {
  padding-left: 7px;
  padding-right: 7px;
}

.carbon-reduction-placeholder {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}
.carbon-reduction-placeholder-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-50);
  font-size: 32px;
}
.carbon-reduction-placeholder h2 {
  color: var(--green-800);
  font-size: 24px;
}
.carbon-reduction-placeholder > p:last-child {
  max-width: 520px;
  color: var(--muted);
}
.carbon-reduction-placeholder.is-denied h2 { color: var(--red); }

/* Independent carbon-reduction report.  It reuses the total-backend card/table language while
   keeping the report hierarchy readable on a dense desktop screen and a narrow mobile screen. */
.dashboard-point-volume-chart { grid-column: 1 / -1; min-width: 0; }
.dashboard-point-volume-scroll { overflow-x: auto; overflow-y: hidden; }
.carbon-reduction-page { display: grid; gap: 16px; }
.carbon-reduction-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #d6ebe0;
  border-radius: 14px;
  background: linear-gradient(135deg, #effaf4 0%, #ffffff 75%);
}
.carbon-reduction-hero h2 { margin: 3px 0 7px; color: var(--green-800); font-size: 23px; }
.carbon-reduction-hero p:last-child { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.7; }
.carbon-reduction-hero-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.carbon-reduction-policy {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #bfe0cf;
  border-radius: 999px;
  background: #fff;
  color: var(--green-700);
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.carbon-reduction-card { padding: 18px; }
.carbon-reduction-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}
.carbon-reduction-field { display: grid; min-width: 0; gap: 6px; }
.carbon-reduction-field > span { color: #53615a; font-size: 12px; font-weight: 700; }
.carbon-reduction-field .form-control { min-width: 0; }
.carbon-reduction-actions { display: flex; gap: 8px; align-items: end; min-height: 35px; }
.carbon-reduction-actions .btn { justify-content: center; white-space: nowrap; }
.carbon-reduction-filter-note { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.carbon-reduction-message { min-height: 18px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.carbon-reduction-message.is-error { color: #b42318; font-weight: 600; }
.carbon-reduction-table-wrap { margin-top: 8px; border: 1px solid #e2ece6; border-radius: 10px; }
.carbon-reduction-table { min-width: 860px; }
.carbon-reduction-table td { vertical-align: middle; }
.carbon-reduction-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.carbon-reduction-table code { color: #334155; font-size: 11px; white-space: nowrap; }
.carbon-reduction-time { white-space: nowrap; color: #53615a; font-variant-numeric: tabular-nums; }
.carbon-reduction-category { display: inline-block; min-width: 150px; color: #17613f; font-weight: 600; }
.carbon-reduction-number { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.carbon-reduction-value { color: var(--green-700); font-weight: 800; }
.carbon-reduction-total-row td {
  background: #f0faf4 !important;
  border-top: 2px solid #bfe0cf;
  color: #17613f;
  font-weight: 800;
}
.carbon-reduction-empty { padding: 38px !important; color: var(--muted); text-align: center; }
.carbon-reduction-empty.is-error { color: #b42318; }

/* Local, read-only carbon-benefit points.  This intentionally shares the user-card language
   without surfacing account balances, remote points, or redemption actions. */
.carbon-benefit-local-page { display: grid; gap: 16px; }
.carbon-benefit-local-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px 24px; border: 1px solid #dceee5; border-radius: 16px;
  background: linear-gradient(125deg, #f3fbf7 0%, #fbfffd 68%);
}
.carbon-benefit-local-hero h2 { margin: 3px 0 7px; color: var(--green-800); font-size: 23px; }
.carbon-benefit-local-policy {
  flex: 0 0 auto; border: 1px solid #c8e7d8; border-radius: 999px; padding: 7px 10px;
  color: var(--green-700); background: #f8fffb; font-size: 12px; font-weight: 700;
}
.carbon-benefit-local-filter-card { padding: 18px; }
.carbon-benefit-local-filter-grid { display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(2, minmax(160px, 1fr)) auto; gap: 12px; align-items: end; }
.carbon-benefit-local-field { display: grid; min-width: 0; gap: 6px; }
.carbon-benefit-local-field > span { color: #53615a; font-size: 12px; font-weight: 700; }
.carbon-benefit-local-field .form-control { min-width: 0; }
.carbon-benefit-local-actions { display: flex; min-height: 35px; gap: 8px; align-items: end; }
.carbon-benefit-local-actions .btn { justify-content: center; white-space: nowrap; }
.carbon-benefit-local-filter-note { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.carbon-benefit-local-message { min-height: 18px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.carbon-benefit-local-message.is-error { color: #b42318; font-weight: 600; }
.carbon-benefit-local-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px;
}
.carbon-benefit-local-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 156px; gap: 12px;
  padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
.carbon-benefit-local-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 24px; }
.carbon-benefit-local-name { color: #1f2937; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.carbon-benefit-local-badge { border-radius: 4px; padding: 2px 8px; color: #17613f; background: #edf9f2; font-size: 11px; font-weight: 700; }
.carbon-benefit-local-identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6b7280; font-size: 13px; }
.carbon-benefit-local-identity b { min-width: 0; color: #374151; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.carbon-benefit-local-value {
  display: flex; align-items: end; justify-content: space-between; margin-top: auto;
  padding-top: 13px; border-top: 1px solid #e5efe9; color: #53615a; font-size: 13px;
}
.carbon-benefit-local-value b { color: var(--green-700); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.carbon-benefit-local-value small { margin-left: 5px; color: #5f7569; font-size: 12px; font-weight: 600; }
.carbon-benefit-local-empty { grid-column: 1 / -1; padding: 34px 16px; color: var(--muted); text-align: center; }
.carbon-benefit-local-empty.is-error { color: #b42318; font-weight: 600; }

@media (max-width: 1320px) {
  .carbon-benefit-local-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .carbon-benefit-local-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .order-filter-line {
    align-items: stretch;
    flex-direction: column;
  }
  .order-filter-line .form-control,
  .order-filter-line .btn {
    width: 100% !important;
  }
  .order-filter-date-separator,
  .order-filter-export-divider {
    display: none;
  }
  .carbon-reduction-hero { flex-direction: column; padding: 18px; }
  .carbon-reduction-hero-actions { width: 100%; justify-content: space-between; }
  .carbon-reduction-policy { width: fit-content; }
  .carbon-reduction-card { padding: 14px; }
  .carbon-reduction-filter-grid { grid-template-columns: 1fr; }
  .carbon-reduction-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .carbon-reduction-actions .btn { width: 100%; }
  .carbon-benefit-local-hero { flex-direction: column; padding: 18px; }
  .carbon-benefit-local-policy { width: fit-content; }
  .carbon-benefit-local-filter-card { padding: 14px; }
  .carbon-benefit-local-filter-grid { grid-template-columns: 1fr; }
  .carbon-benefit-local-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .carbon-benefit-local-actions .btn { width: 100%; }
  .carbon-benefit-local-cards { grid-template-columns: 1fr; }
}