:root {
  --v2-bg: #f8fafc;
  --v2-surface: #ffffff;
  --v2-ink: #0f172a;
  --v2-muted: #64748b;
  --v2-line: #e2e8f0;
  --v2-soft: #f1f5f9;
  --v2-primary: #2563eb;
  --v2-primary-soft: #eff6ff;
  --v2-success: #16a34a;
  --v2-success-soft: #f0fdf4;
  --v2-warning: #d97706;
  --v2-warning-soft: #fffbeb;
  --v2-danger: #dc2626;
  --v2-danger-soft: #fef2f2;
  --v2-radius: 14px;
}

* { -webkit-tap-highlight-color: transparent; }
body { background: var(--v2-bg); color: var(--v2-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }

ui-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--v2-line); border-radius: 10px; background: var(--v2-surface); color: var(--v2-ink); cursor: pointer; font: inherit; font-weight: 650; line-height: 1; user-select: none; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
ui-button:hover { border-color: #cbd5e1; background: #f8fafc; }
ui-button:active { transform: scale(.98); }
ui-button:focus-visible { outline: 3px solid #bfdbfe; outline-offset: 2px; }
ui-button[disabled], ui-button[aria-disabled="true"] { opacity: .55; cursor: wait; pointer-events: none; }
ui-button.primary { border-color: var(--v2-primary); background: var(--v2-primary); color: #fff; }
ui-button.primary:hover { border-color: #1d4ed8; background: #1d4ed8; }
ui-button.warning { border-color: #f4d6a2; background: var(--v2-warning-soft); color: #a16207; }
ui-button.danger { border-color: #fecaca; background: var(--v2-danger-soft); color: #b91c1c; }
ui-button.small { min-height: 34px; padding: 0 11px; font-size: 12px; }
ui-button.icon-button { width: 38px; min-height: 38px; padding: 0; border-radius: 999px; background: var(--v2-soft); color: var(--v2-primary); font-size: 20px; }

.state, .loading { max-width: none; margin: 0; min-height: 100vh; display: grid; place-content: center; padding: 28px; border: 0; border-radius: 0; background: var(--v2-bg); }
.state h1, .state h2 { color: var(--v2-ink); letter-spacing: -.03em; }
.state p { color: var(--v2-muted); }
.state ui-button { margin: 12px auto 0; }

.app-shell { min-height: 100vh; padding: 0 0 calc(82px + env(safe-area-inset-bottom)); background: var(--v2-bg); }
.app-topbar { position: sticky; top: 0; z-index: 10; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid rgba(226,232,240,.9); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--v2-ink); color: #fff; font-weight: 800; }
.app-topbar h1 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.app-topbar h1 small { color: var(--v2-primary); font-size: 11px; font-weight: 800; }
.app-user { margin-top: 3px; color: var(--v2-muted); font-size: 11px; }
#view { width: 100%; max-width: 680px; margin: 0 auto; padding: 16px 14px 22px; }

.overview-view .wrap { max-width: none; padding: 0; }
.overview-view .header { align-items: flex-end; margin: 4px 0 16px; }
.overview-view .header .eyebrow, .overview-view .header h1 { display: block; }
.overview-view .header h1 { margin: 0; font-size: 25px; letter-spacing: -.045em; }
.overview-view .eyebrow { margin-bottom: 5px; color: var(--v2-primary); font-size: 11px; }
.overview-view .subline { margin-top: 6px; color: var(--v2-muted); font-size: 11px; }
.overview-view .actions { display: flex; gap: 8px; }
.overview-view .actions ui-button { min-height: 34px; padding: 0 11px; font-size: 12px; }
.overview-view .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.overview-view .stat { min-height: 86px; padding: 13px 14px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); background: var(--v2-surface); box-shadow: 0 2px 8px rgba(15,23,42,.025); }
.overview-view .stat label { display: block; overflow: hidden; margin-bottom: 7px; color: var(--v2-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-view .stat strong { font-size: 19px; letter-spacing: -.04em; }
.overview-view .stat .small { margin-top: 5px; color: var(--v2-muted); font-size: 10px; }
.overview-view .legend { display: none; }
.overview-view .toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.overview-view .toolbar input, .page-search, #switch-search { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--v2-line); border-radius: 12px; outline: 0; background: var(--v2-surface); color: var(--v2-ink); box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.overview-view .toolbar input:focus, .page-search:focus, #switch-search:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px #dbeafe; }
.overview-view .toolbar span { color: var(--v2-muted); font-size: 11px; white-space: nowrap; }
.quick-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 -14px 13px; padding: 2px 14px 3px; scrollbar-width: none; }
.quick-filters::-webkit-scrollbar { display: none; }
.quick-filters .filter { min-height: 32px; padding: 0 12px; border-color: var(--v2-line); border-radius: 999px; background: var(--v2-surface); color: var(--v2-muted); font-size: 12px; white-space: nowrap; }
.quick-filters .filter.active { border-color: var(--v2-ink); background: var(--v2-ink); color: #fff; }
.quick-filters .filter.overdue { color: var(--v2-danger); }
.quick-filters .filter.pending { color: var(--v2-success); }
.quick-filters .filter.active.overdue, .quick-filters .filter.active.pending { color: #fff; }

.overview-view .table-card { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.overview-view .table { overflow: visible; }
.overview-view .table table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; }
.overview-view .table thead { display: none; }
.overview-view .table tbody { display: block; }
.overview-view .old-agent-row { display: grid; grid-template-columns: 1fr 1fr; margin: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-surface); box-shadow: 0 2px 8px rgba(15,23,42,.035); }
.overview-view .old-agent-row td { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--v2-line); white-space: normal; font-size: 14px; }
.overview-view .old-agent-row td::before { color: var(--v2-muted); font-size: 11px; font-weight: 650; }
.overview-view .old-agent-row .agent-name { grid-column: 1 / -1; justify-content: flex-start; gap: 7px; min-height: 54px; background: #fcfdff; font-size: 16px; }
.overview-view .old-agent-row .agent-name::before { display: none; }
.overview-view .old-agent-row .agent-name b { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-view .old-agent-row td:nth-child(2)::before { content: '预付余额'; }
.overview-view .old-agent-row td:nth-child(3)::before { content: '今日充值'; }
.overview-view .old-agent-row td:nth-child(4) { grid-column: 1 / -1; justify-content: flex-start; gap: 28px; font-weight: 800; }
.overview-view .old-agent-row td:nth-child(4)::before { content: '当前应结'; }
.overview-view .old-agent-row td:nth-child(5) { grid-column: 1 / -1; justify-content: flex-start; gap: 28px; }
.overview-view .old-agent-row td:nth-child(5)::before { content: '银行卡'; }
.overview-view .old-agent-row td:nth-child(6)::before { content: '代付金额'; }
.overview-view .old-agent-row td:nth-child(7)::before { content: '代付笔数'; }
.overview-view .old-agent-row td:nth-child(8) { grid-column: 1 / -1; justify-content: flex-start; gap: 28px; border-bottom: 0; font-weight: 800; }
.overview-view .old-agent-row td:nth-child(8)::before { content: '今日应结算'; }
.overview-view .old-agent-row .expand { grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--v2-line); border-bottom: 0; background: #f8fafc; color: var(--v2-primary); font-size: 12px; }
.overview-view .old-agent-row .expand::before { content: '点击展开明细'; margin-right: 8px; color: var(--v2-muted); }
.overview-view .old-agent-row.overdue { border-color: #fecaca; }
.overview-view .old-agent-row.pending { border-color: #bbf7d0; }
.overview-view .details { display: block; margin: -10px 0 10px; border: 1px solid var(--v2-line); border-top: 0; border-radius: 0 0 14px 14px; background: #fbfdff; }
.overview-view .details td { display: block; padding: 0; border: 0; }
.overview-view .details .detail { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
.overview-view .details table { display: table; min-width: 0; width: 100%; border-collapse: collapse; }
.overview-view .details thead { display: table-header-group; }
.overview-view .details tbody { display: table-row-group; }
.overview-view .details tr { display: table-row; }
.overview-view .details th, .overview-view .details td { display: table-cell; padding: 7px 5px; border-bottom: 1px solid var(--v2-line); font-size: 11px; }
.overview-view .details td::before { display: none; }
.overview-view .formula { padding: 12px; border: 1px solid #bfdbfe; border-radius: 12px; background: var(--v2-primary-soft); color: var(--v2-muted); }
.overview-view .formula strong { color: var(--v2-primary); font-size: 18px; }
.bank-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.bank { display: inline-flex; padding: 4px 7px; border: 1px solid #dbeafe; border-radius: 999px; background: var(--v2-primary-soft); color: #1d4ed8; font-size: 10px; font-weight: 700; }
.pill { display: inline-flex; padding: 3px 7px; border: 1px solid var(--v2-line); border-radius: 999px; color: var(--v2-muted); font-size: 10px; }
.pill.online { border-color: #bbf7d0; background: var(--v2-success-soft); color: var(--v2-success); }
.status-text { display: inline-flex; color: var(--v2-danger); font-size: 10px; }
.table-footer { padding: 6px 2px; color: var(--v2-muted); font-size: 11px; }

.page-head { align-items: center; margin: 6px 0 14px; }
.page-head h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.page-head p { margin: 5px 0 0; color: var(--v2-muted); font-size: 11px; }
.refresh-btn { min-height: 34px; border-color: #bfdbfe; background: var(--v2-primary-soft); color: var(--v2-primary); font-size: 12px; }
.order-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 12px; }
.order-summary > div { padding: 10px 8px; border: 1px solid var(--v2-line); border-radius: 12px; background: var(--v2-surface); color: var(--v2-muted); font-size: 11px; text-align: center; }
.order-summary b { display: block; margin: 3px 0 0; color: var(--v2-ink); font-size: 17px; }
.order-summary .red b { color: var(--v2-danger); }
.orders-list, .switch-list { gap: 9px; }
.order-card { padding: 14px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-surface); box-shadow: 0 2px 8px rgba(15,23,42,.035); }
.order-card.overdue { border-color: #fecaca; background: var(--v2-danger-soft); }
.order-card.unsent { border-color: #bfdbfe; background: var(--v2-primary-soft); }
.order-head strong { font-size: 13px; }
.order-head small { color: var(--v2-muted); font-size: 11px; }
.order-head > span { color: var(--v2-success); font-size: 11px; }
.order-card.overdue .order-head > span { color: var(--v2-danger); }
.order-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 13px; }
.order-detail-grid span { color: var(--v2-muted); font-size: 10px; }
.order-detail-grid strong { margin-top: 3px; font-size: 12px; }
.order-actions { gap: 6px; margin-top: 13px; padding-top: 11px; border-top-color: var(--v2-line); }
.order-actions ui-button { min-height: 32px; padding: 0 9px; font-size: 11px; }
.confirm-layer { background: rgba(15,23,42,.42); backdrop-filter: blur(3px); }
.confirm-box { width: min(360px, 100%); padding: 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.24); }
.confirm-box h3 { font-size: 16px; }
.confirm-box p { font-size: 12px; }
.confirm-box > div { gap: 7px; }

.agent-select { width: 100%; height: 44px; margin-bottom: 10px; padding: 0 12px; border: 1px solid var(--v2-line); border-radius: 12px; background: var(--v2-surface); color: var(--v2-ink); font: inherit; }
.notice { margin: 0 0 11px; padding: 11px 12px; border: 1px solid #fde68a; border-radius: 12px; background: var(--v2-warning-soft); color: #92400e; font-size: 11px; line-height: 1.6; }
.switch-card { align-items: flex-start; padding: 14px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-surface); box-shadow: 0 2px 8px rgba(15,23,42,.035); }
.switch-card.current { border-color: #86efac; background: var(--v2-success-soft); }
.switch-card strong { font-size: 13px; }
.switch-card p { margin: 6px 0 0; color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.switch-card ui-button { flex: 0 0 auto; }
.card-state { padding-top: 8px; color: var(--v2-muted); font-size: 11px; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(226,232,240,.95); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); box-shadow: 0 -8px 24px rgba(15,23,42,.06); }
.bottom-nav ui-button { flex: 1; flex-direction: column; gap: 4px; max-width: 150px; min-height: 54px; padding: 5px 8px; border-color: transparent; border-radius: 12px; background: transparent; color: var(--v2-muted); font-size: 11px; font-weight: 550; }
.bottom-nav ui-button.active { border-color: #dbeafe; background: var(--v2-primary-soft); color: var(--v2-primary); font-weight: 750; }
.nav-icon { font-size: 19px; line-height: 1; }

@media (min-width: 681px) {
  #view { max-width: 520px; }
  .app-topbar { padding-left: max(16px, calc((100vw - 520px) / 2)); padding-right: max(16px, calc((100vw - 520px) / 2)); }
  .bottom-nav { left: 50%; right: auto; width: 520px; transform: translateX(-50%); border-left: 1px solid rgba(226,232,240,.95); border-right: 1px solid rgba(226,232,240,.95); }
}

/* Effect-image aligned overview */
body { overflow-x: hidden; background: #f8fafc; }
.app-shell { min-height: 100vh; padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.app-topbar { position: relative; min-height: 96px; padding: 20px 16px 10px; border-bottom: 0; background: #fff; backdrop-filter: none; }
.telegram-topbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; }
.telegram-title h1 { margin: 0; color: #111827; font-size: 21px; letter-spacing: -.045em; }
.telegram-title h1 small { color: #111827; font-size: inherit; font-weight: 700; }
.telegram-title span { display: block; margin-top: 4px; color: #8b95a7; font-size: 13px; }
ui-button.top-close, ui-button.top-menu { min-height: 42px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #111827; }
ui-button.top-close { justify-content: flex-start; font-size: 40px; font-weight: 300; line-height: .7; }
ui-button.top-menu { justify-content: flex-end; font-size: 22px; letter-spacing: 3px; }
#view { max-width: none; padding: 0 16px 28px; }
.overview-v2 { margin: 0; }
.v2-overview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 20px; }
.v2-eyebrow { display: none; }
.v2-overview-heading h2 { margin: 0; color: #111827; font-size: 30px; letter-spacing: -.06em; }
ui-button.v2-date { min-height: 42px; padding: 0 13px; border-color: #d8dee8; border-radius: 11px; background: #fff; color: #374151; font-size: 14px; font-weight: 500; white-space: nowrap; }
.v2-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.v2-kpi { position: relative; display: flex; min-height: 106px; justify-content: space-between; gap: 6px; padding: 14px 12px; overflow: hidden; border: 1px solid #e4e8ef; border-radius: 15px; background: #fff; box-shadow: 0 3px 12px rgba(31,41,55,.035); }
.v2-kpi span, .v2-kpi em { display: block; color: #7a8495; font-size: 11px; font-style: normal; white-space: nowrap; }
.v2-kpi b { display: block; margin: 9px 0 8px; color: #182234; font-size: 17px; letter-spacing: -.045em; white-space: nowrap; }
.v2-kpi em { font-size: 10px; }
.v2-kpi i { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 17px; font-style: normal; font-weight: 800; }
.v2-kpi.blue i { background: #3b82f6; }.v2-kpi.blue em { color: #159669; }
.v2-kpi.green i { background: #22a06b; }.v2-kpi.green em { color: #159669; }
.v2-kpi.amber i { background: #f59e0b; }.v2-kpi.amber em { color: #e88a00; }
.v2-kpi.red i { background: #ef4444; }.v2-kpi.red em { color: #ef4444; }
.v2-search-row { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.v2-search { display: flex; align-items: center; flex: 1; min-width: 0; height: 50px; padding: 0 13px; border: 1px solid #d9dfe9; border-radius: 13px; background: #fff; }
.v2-search > span { margin-right: 10px; color: #697588; font-size: 27px; line-height: 1; transform: rotate(-20deg); }
.v2-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #1f2937; font: inherit; font-size: 14px; }
.v2-search input::placeholder { color: #a0a8b7; }
ui-button.v2-filter-icon { width: 50px; min-height: 50px; padding: 0; border-color: #d9dfe9; border-radius: 13px; background: #fff; color: #374151; font-size: 24px; }
.v2-filters { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 17px; padding: 0 16px 2px; scrollbar-width: none; }
.v2-filters::-webkit-scrollbar { display: none; }
ui-button.v2-filter { min-height: 38px; padding: 0 18px; border-color: #d9dfe9; border-radius: 999px; background: #fff; color: #374151; font-size: 14px; font-weight: 500; white-space: nowrap; }
ui-button.v2-filter.active { border-color: #2563eb; background: #eef5ff; color: #2563eb; }
.v2-agent-list { display: grid; gap: 15px; }
.v2-agent-card { padding: 14px 14px 12px; border: 1px solid #e2e7ee; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(31,41,55,.04); }
.v2-agent-card.overdue { border-color: #f0d5d5; }.v2-agent-card.pending { border-color: #ebdfc9; }
.v2-agent-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 13px; }
.v2-agent-identity { display: flex; align-items: center; min-width: 0; gap: 10px; }
.v2-avatar { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: #eaf0ff; color: #3b6fd8; font-size: 24px; font-weight: 700; }
.v2-agent-card.pending .v2-avatar { background: #e8f7f0; color: #2d9e79; }.v2-agent-card.overdue .v2-avatar { background: #ffebed; color: #ef4444; }
.v2-agent-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.v2-agent-title h3 { max-width: 128px; margin: 0; overflow: hidden; color: #192231; font-size: 16px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.v2-agent-title .v2-status { padding: 4px 7px; border-radius: 6px; background: #eaf0ff; color: #3170dd; font-size: 11px; white-space: nowrap; }
.v2-status.pending { background: #fff1da; color: #de8a0b; }.v2-status.overdue { background: #ffe8ea; color: #e64747; }
.v2-agent-identity p { margin: 5px 0 0; color: #8a94a5; font-size: 11px; white-space: nowrap; }.v2-agent-identity p i { color: #c6ccd5; font-style: normal; }
.v2-agent-total { padding-right: 12px; text-align: right; white-space: nowrap; }.v2-agent-total strong { display: block; color: #209b68; font-size: 17px; letter-spacing: -.035em; }.pending .v2-agent-total strong { color: #df8b0a; }.overdue .v2-agent-total strong { color: #ed4141; }.v2-agent-total span { display: block; margin-top: 5px; color: #7a8495; font-size: 11px; }
.v2-chevron { color: #7c8797; font-size: 28px; line-height: 1; }
.v2-agent-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 12px 7px; border: 1px solid #e8ecf2; border-radius: 12px; }
.v2-agent-metrics > div { min-width: 0; padding: 0 8px; border-right: 1px solid #edf0f4; }.v2-agent-metrics > div:first-child { padding-left: 0; }.v2-agent-metrics > div:last-child { padding-right: 0; border-right: 0; }
.v2-agent-metrics span { display: block; overflow: hidden; color: #7d8797; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.v2-agent-metrics b { display: block; margin-top: 6px; overflow: hidden; color: #202a39; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.v2-agent-metrics b.danger { color: #ef4444; }
.v2-bank-row { display: flex; align-items: center; gap: 8px; padding-top: 12px; color: #293241; font-size: 12px; }.v2-bank-row > span:first-child { flex: 0 0 auto; }.v2-bank-chip { display: inline-flex; align-items: center; min-width: 0; gap: 6px; padding: 6px 9px; border-radius: 999px; background: #f4f6f9; color: #334155; font-size: 12px; white-space: nowrap; }.v2-bank-chip b { color: #9aa4b3; font-size: 18px; font-weight: 400; }.v2-bank-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #376fe2; color: #fff; font-size: 11px; }.v2-bank-row > .v2-chevron { margin-left: auto; font-size: 23px; }
.v2-empty { padding: 28px 12px; border: 1px dashed #d9dfe9; border-radius: 15px; background: #fff; color: #8b95a7; text-align: center; }.v2-end { margin: 16px 0 0; color: #8b95a7; font-size: 13px; text-align: center; }
#admin:has(tbody:empty) { display: none; }
@media (min-width: 681px) { #view { max-width: 780px; padding-left: 22px; padding-right: 22px; } .app-topbar { padding-left: max(16px, calc((100vw - 780px) / 2)); padding-right: max(16px, calc((100vw - 780px) / 2)); } .v2-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Switch-card screen aligned to the supplied GP Ops data. */
#view:has(#switch-list) { padding-top: 14px; }
#view:has(#switch-list) .page-head { margin: 0 0 16px; }
#view:has(#switch-list) .page-head h2 { font-size: 24px; letter-spacing: -.045em; }
#view:has(#switch-list) .page-head p { max-width: 235px; line-height: 1.45; }
#view:has(#switch-list) .refresh-btn { min-width: 56px; border-radius: 10px; }
#view:has(#switch-list) .page-search { margin-bottom: 10px; }
#view:has(#switch-list) .agent-select { height: 46px; margin-bottom: 13px; border-color: #d6dce7; background: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
#view:has(#switch-list) .notice { margin-bottom: 13px; border-color: #fde2a6; background: #fff8e8; color: #9a6700; }
#view:has(#switch-list) .switch-list { display: grid; gap: 12px; }
#view:has(#switch-list) .switch-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.045); }
#view:has(#switch-list) .switch-card.current { border-color: #b5e4c8; background: #f0fbf4; }
#view:has(#switch-list) .switch-card.frozen { border-color: #e4e8ef; background: #fff; }
#view:has(#switch-list) .switch-card-main { min-width: 0; }
#view:has(#switch-list) .switch-card-title { display: block; color: #172033; font-size: 14px; line-height: 1.35; }
#view:has(#switch-list) .switch-card-pid { margin: 8px 0 0; color: #647084; font-size: 12px; }
#view:has(#switch-list) .switch-card-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 10px 0 0; color: #687386; font-size: 11px; line-height: 1.45; }
#view:has(#switch-list) .switch-card.current .switch-card-meta { color: #3c7e59; }
#view:has(#switch-list) .card-state { flex: 0 0 auto; padding-top: 2px; color: #7f8998; font-size: 11px; white-space: nowrap; }
#view:has(#switch-list) .switch-card.current .card-state { color: #3d9b61; font-weight: 700; }