:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-strong: #eef3fb;
  --text: #142033;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #dbe3ee;
  --line-soft: #edf1f7;
  --primary: #111827;
  --primary-hover: #020617;
  --accent: #a8ff1a;
  --accent-soft: #ecffd2;
  --success: #0f9f6e;
  --success-soft: #e8f7f0;
  --warning: #b7791f;
  --warning-soft: #fff7e6;
  --danger: #c2413d;
  --danger-soft: #fff0f0;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --space-2: 8px;
  --control-height-sm: 32px;
  --font-size-xs: 12px;
  --account-source-email-min: 230px;
  --account-source-status-width: 78px;
  --account-source-config-min: 170px;
  --account-source-actions-min: 180px;
  --account-source-status-control-min: 92px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, .08);
  --focus-ring: rgba(37, 99, 235, .24);
  --focus-ring-soft: rgba(37, 99, 235, .22);
  --input-focus-ring: rgba(37, 99, 235, .10);
  --sidebar: 268px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* auto ui-review color tokens start */
  --color-auto-001-80daf7: rgba(255,255,255,.82);
  --color-auto-002-d14f90: #fff;
  --color-auto-003-e65a35: rgba(255,255,255,.14);
  --color-auto-004-db1dbe: rgba(255,255,255,.68);
  --color-auto-005-2ec689: #0b1220;
  --color-auto-006-0fe0e3: rgba(255,255,255,.92);
  --color-auto-007-e87318: #ccd6e3;
  --color-auto-008-42ccb1: #82aaf7;
  --color-auto-009-0fbd2a: #a5b0bf;
  --color-auto-010-56a172: #ffd0d0;
  --color-auto-011-75f6a5: #1457d9;
  --color-auto-012-11f94f: #eef2ff;
  --color-auto-013-ef7369: #4f46e5;
  --color-auto-014-24433d: rgba(255,255,255,.94);
  --color-auto-015-b36634: #334155;
  --color-auto-016-e6c6f1: rgba(255,255,255,.72);
  --color-auto-017-ab4bb1: #b9c8dc;
  --color-auto-018-ea9f20: #7fa5e6;
  --color-auto-019-2d8370: #f2f7ff;
  --color-auto-020-047f3e: rgba(15, 23, 42, .18);
  --color-auto-021-01ab04: rgba(15, 23, 42, .9);
  --color-auto-022-c769e3: #dbeafe;
  --color-auto-023-2b4533: rgba(15, 23, 42, .32);
  --color-auto-024-e9d14b: rgba(148, 163, 184, .22);
  --color-auto-025-8ffe8d: rgba(255, 255, 255, .03);
  --color-auto-026-d59bfe: #e5edf8;
  --color-auto-027-f60cdf: #94a3b8;
  --color-auto-028-d834bc: rgba(148, 163, 184, .28);
  --color-auto-029-08e149: rgba(255, 255, 255, .06);
  --color-auto-030-e66b9d: #cbd5e1;
  --color-auto-031-61afa1: #667085;
  --color-auto-032-4cc9cd: #edf3fb;
  --color-auto-033-0305fa: rgba(15, 23, 42, .08);
  --color-auto-034-dac05c: #0f131b;
  --color-auto-035-0fa161: rgba(216,255,62,.18);
  --color-auto-036-0f1c00: rgba(255,255,255,.08);
  --color-auto-037-87efa9: rgba(12, 17, 26, .96);
  --color-auto-038-54fa5c: #d6dde8;
  --color-auto-039-bdbe0b: rgba(255,255,255,.07);
  --color-auto-040-bf8951: #0b0f16;
  --color-auto-041-5775cb: rgba(214,221,232,.58);
  --color-auto-042-0c6375: rgba(214,221,232,.72);
  --color-auto-043-d06a56: #cfd8e5;
  --color-auto-044-daee10: #101828;
  --color-auto-045-a1b220: #7aa2ff;
  --color-auto-046-4b4713: rgba(47,109,246,.14);
  --color-auto-047-da4c05: #d7dfeb;
  --color-auto-048-ce3983: #111827;
  --color-auto-049-6f143c: #f7f9fc;
  --color-auto-050-af5bdb: rgba(216,255,62,.16);
  --color-auto-051-749dc7: #121722;
  --color-auto-052-2e91f8: #0f141e;
  --color-auto-053-7b76d0: #edf2f8;
  --color-auto-054-d26878: rgba(15, 23, 42, .16);
  --color-auto-055-f3c119: rgba(237,242,248,.50);
  --color-auto-056-0d41ca: rgba(255,255,255,.18);
  --color-auto-057-59becc: rgba(237,242,248,.86);
  --color-auto-058-525f58: rgba(255,255,255,.11);
  --color-auto-059-2c686b: rgba(237,242,248,.60);
  --color-auto-060-c9db95: rgba(237,242,248,.70);
  --color-auto-061-2e318c: rgba(238,242,247,0);
  --color-auto-062-baa335: rgba(255,255,255,.76);
  --color-auto-063-042510: #475467;
  --color-auto-064-964cbd: rgba(255,255,255,.84);
  --color-auto-065-ef8535: #526071;
  --color-auto-066-307c8e: #d9e2ec;
  --color-auto-067-22a62e: #f0f4f8;
  --color-auto-068-bd4331: #7a8594;
  --color-auto-069-87ef6d: #eef2f7;
  --color-auto-070-0aad90: #e1e7f0;
  --color-auto-071-04322c: #fbfcfe;
  --color-auto-072-333c0f: #697586;
  --color-auto-073-cc762d: #f3f6fa;
  --color-auto-074-b2683d: #f2f5f9;
  --color-auto-075-64529f: #edf1f6;
  --color-auto-076-556568: rgba(255,255,255,.78);
  --color-auto-077-5654d3: #edf2f7;
  --color-auto-078-91315e: #dce4ee;
  --color-auto-079-d0d52e: rgba(255,255,255,.88);
  --color-auto-080-2a2f78: #1f5ff2;
  --color-auto-081-499668: #f8fafc;
  --color-auto-082-c0e111: #080d16;
  --color-auto-083-661e9e: rgba(255,255,255,.10);
  --color-auto-084-c366e4: rgba(0,0,0,.34);
  --color-auto-085-96f3a4: #d7e0eb;
  --color-auto-086-0563f6: #eef3f8;
  --color-auto-087-31b6fa: #cdd8e6;
  --color-auto-088-069d90: rgba(255,255,255,.9);
  --color-auto-089-68743e: #98aac0;
  --color-auto-090-8a601f: #344054;
  --color-auto-091-da3d8a: rgba(255,255,255,.96);
  --color-auto-092-376ac9: rgba(15,23,42,.12);
  --color-auto-093-2e8cbc: #067647;
  --color-auto-094-fdb6b8: #b42318;
  --color-auto-095-b50837: #eef2f6;
  --color-auto-096-08d051: #4338ca;
  --color-auto-097-3de0ed: #0f172a;
  --color-auto-098-b001a3: rgba(15, 23, 42, .22);
  /* auto ui-review color tokens end */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mobile-header, .mobile-nav-backdrop, .sidebar-mobile-heading { display: none; }
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 14px; border-right: 1px solid var(--line); background: var(--color-auto-001-80daf7); backdrop-filter: blur(14px); overflow-y: auto; }
.brand-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-md); text-decoration: none; background: var(--primary); color: var(--color-auto-002-d14f90); box-shadow: var(--shadow-md); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: var(--color-auto-003-e65a35); font-weight: 800; }
.brand-card strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand-card small { display: block; margin-top: 2px; color: var(--color-auto-004-db1dbe); font-size: 12px; }
.side-nav { display: grid; gap: 4px; margin-top: 18px; }
.side-nav a { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 14px; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.side-nav a span { font-weight: 650; color: var(--text); }
.side-nav a small { color: var(--faint); font-size: 12px; white-space: nowrap; }
.side-nav a:hover { background: var(--surface-soft); border-color: var(--line-soft); }
.side-nav a.active { background: var(--accent); border-color: var(--accent); color: var(--color-auto-005-2ec689); }
.side-nav a.active span, .side-nav a.active small { color: var(--color-auto-005-2ec689); }
.content { width: 100%; max-width: 1480px; padding: 32px clamp(18px, 3vw, 44px) 56px; }
.page, .wide-page { max-width: none; }
.page-stack { display: grid; gap: 18px; }
.page-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.page-header h1 { margin: 4px 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
.page-header p { margin: 0; max-width: 720px; color: var(--muted); line-height: 1.7; }
.page-marker { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.header-actions, .action-row, .row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: minmax(300px, .84fr) minmax(420px, 1.16fr); gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards, .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 14px; }
.card, .form-card, .table-card, .panel-card, .toolbar-card, .list-card, .metric-card, .empty-state { background: var(--color-auto-006-0fe0e3); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card, .metric-card { padding: 18px; }
.card h2, .metric-card span { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.card strong, .metric-card strong { display: block; font-size: 34px; letter-spacing: -.04em; }
.card small, .metric-card small { color: var(--faint); }
.form-card, .panel-card { padding: 20px; margin-bottom: 18px; }
.section-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.form-card h2, .panel-card h2, .table-card h2, .compact-list h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.form-card .lead, .panel-card .lead { margin: 6px 0 0; color: var(--muted); line-height: 1.65; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 14px 0; }
.form-grid.tight { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field-block, .form-grid label, .filter-bar label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--color-auto-007-e87318); border-radius: 14px; padding: 10px 12px; color: var(--text); background: var(--color-auto-002-d14f90); outline: none; transition: border-color .16s, box-shadow .16s, background .16s; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-auto-008-42ccb1); box-shadow: 0 0 0 4px var(--input-focus-ring); }
input::placeholder, textarea::placeholder { color: var(--color-auto-009-0fbd2a); }
.button, .form-card button, .row-actions button, .button-link, .link-button.action-like { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; border: 1px solid var(--line); background: var(--color-auto-002-d14f90); color: var(--text); padding: 9px 13px; text-decoration: none; cursor: pointer; font-weight: 750; font-size: 14px; }
.button.primary, .form-card button[type="submit"] { border-color: var(--primary); background: var(--primary); color: var(--color-auto-002-d14f90); }
.button.primary:hover, .form-card button[type="submit"]:hover { background: var(--primary-hover); }
.button.secondary { background: var(--surface-soft); }
.button.ghost { background: transparent; }
.button.danger, button.danger, .row-actions button.danger { border-color: var(--color-auto-010-56a172); color: var(--danger); background: var(--danger-soft); }
.button:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.link-button { border: 0; background: transparent; color: var(--color-auto-011-75f6a5); padding: 0; min-height: auto; font-weight: 750; cursor: pointer; text-align: left; }
.link-button:hover { text-decoration: underline; }
.link-button:active { transform: translateY(1px); filter: brightness(.92); }
.link-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.form-status { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-size: 13px; }
.form-status.success { color: var(--success); }
.form-status.warning { color: var(--warning); }
.form-status.error { color: var(--danger); }
.details-card, details.advanced { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-soft); }
.details-card summary, details.advanced summary { padding: 13px 14px; cursor: pointer; color: var(--muted); font-weight: 800; }
.details-card-body, details.advanced .advanced-body { padding: 0 14px 14px; }
.hint-box { margin-top: 10px; padding: 11px 12px; border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 13px; line-height: 1.6; }
.hint-box code { color: var(--text); word-break: break-all; }
.pill, .status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: var(--surface-strong); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.status-running, .status-available, .status-subscribed, .status-completed, .status-success, .status-enabled { background: var(--success-soft); color: var(--success); }
.status-locked, .status-waiting, .status-paused, .status-interrupted { background: var(--warning-soft); color: var(--warning); }
.status-failed, .status-error, .status-blocked, .status-invalid, .status-disabled { background: var(--danger-soft); color: var(--danger); }
.status-registered, .status-no_trial, .status-free { background: var(--color-auto-012-11f94f); color: var(--color-auto-013-ef7369); }
.team-operation-warning { border-left: 4px solid var(--warning); }
.team-operation-confirm-row { display: flex; gap: 9px; align-items: center; margin: 6px 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
.team-operation-confirm-row input { width: 18px; min-height: 18px; }
.team-operation-list { display: grid; gap: 0; padding: 14px 18px 18px; }
.team-operation-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.team-operation-row:last-child { border-bottom: 0; }
.team-operation-main { display: grid; gap: 5px; min-width: 0; }
.team-operation-main > span { color: var(--muted); font-size: 13px; word-break: break-all; }
.team-operation-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.team-operation-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.team-operation-actions .button { min-height: 34px; padding: 7px 10px; }
.team-operation-steps { display: grid; gap: 8px; margin-bottom: 16px; }
.team-operation-step { display: grid; grid-template-columns: auto minmax(110px, 160px) 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-soft); color: var(--muted); font-size: 13px; }
.team-operation-step strong { color: var(--text); }
.team-operation-log { display: grid; gap: 6px; max-height: 360px; overflow: auto; padding: 12px; border-radius: 14px; background: var(--surface-soft); }
.team-operation-log-row { display: grid; grid-template-columns: 190px auto 1fr; gap: 8px; align-items: start; color: var(--muted); font-size: 12px; line-height: 1.5; }
.team-operation-log-row time { color: var(--faint); }
@media (max-width: 760px) {
  .team-operation-row { display: grid; }
  .team-operation-actions { justify-content: flex-start; }
  .team-operation-step, .team-operation-log-row { grid-template-columns: 1fr; gap: 4px; }
}
.tabs, .quick-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.tabs a, .quick-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--color-auto-002-d14f90); text-decoration: none; font-weight: 800; font-size: 13px; }
.tabs a.active, .quick-tabs a.active { color: var(--color-auto-002-d14f90); background: var(--primary); border-color: var(--primary); }
.table-card { overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); background: var(--surface-soft); font-weight: 800; }
.data-table tr:last-child td { border-bottom: 0; }
.list-stack, .email-list, .run-list, .account-list, .template-list, .gopay-list, .instance-list { display: grid; gap: 12px; }
.item-row, .email-row, .run-row, .account-row, .template-row, .gopay-row, .instance-row, .log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--color-auto-014-24433d); box-shadow: var(--shadow-sm); }
.item-title, .email-title-line, .account-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-title strong, .email-address, .account-title-line strong, .account-email-copy { font-size: 16px; }
.item-meta, .email-meta-line, .account-meta, .run-meta, .log-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font-size: 13px; }
.inline-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--color-auto-015-b36634); }
.empty-state { display: grid; gap: 6px; padding: 28px; color: var(--muted); border-style: dashed; }
.empty-state strong { color: var(--text); font-size: 18px; }
.filter-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.filter-bar label { min-width: 180px; flex: 1 1 180px; }
.toolbar-card { padding: 14px; margin-bottom: 14px; }
.metric-primary { padding: 18px; border-radius: var(--radius-md); background: var(--primary); color: var(--color-auto-002-d14f90); }
.metric-primary span { color: var(--color-auto-016-e6c6f1); font-weight: 800; }
.metric-primary strong { display: block; margin-top: 8px; font-size: 46px; letter-spacing: -.06em; }
.metric-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 12px; }
.metric-grid.compact div { padding: 12px; border-radius: 14px; background: var(--surface-soft); }
.metric-grid.compact span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.metric-grid.compact b { display: block; margin-top: 4px; font-size: 22px; }
.email-workbench { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.email-side-panel { display: grid; gap: 16px; }
.email-card-line { margin-top: 10px; color: var(--muted); }
.email-card-line summary { cursor: pointer; font-weight: 800; }
.text-danger { color: var(--danger); }
.compact-list { padding: 18px; margin-top: 18px; }
.compact-list p { margin: 8px 0 0; color: var(--muted); }
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: grid; gap: 10px; width: min(360px, calc(100vw - 48px)); }
.toast { padding: 12px 14px; border-radius: 16px; color: var(--color-auto-002-d14f90); background: var(--primary); box-shadow: var(--shadow-md); font-weight: 750; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
.toast.warning { background: var(--warning); }
.account-export-result { flex-basis: 100%; display: grid; gap: 8px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-soft); color: var(--text); font-weight: 750; }
.account-export-result[hidden] { display: none; }
.account-export-result.success { border-color: color-mix(in srgb, var(--success) 38%, var(--line-soft)); }
.account-export-result.warning { border-color: color-mix(in srgb, var(--warning) 42%, var(--line-soft)); }
.account-export-result.error { border-color: color-mix(in srgb, var(--danger) 42%, var(--line-soft)); }
.account-export-result small { color: var(--muted); font-weight: 700; line-height: 1.55; word-break: break-all; }
.account-export-result ul { margin: 0; padding-left: 18px; color: var(--muted); font-weight: 700; }
@media (max-width: 1040px) {
  .app-shell { grid-template-columns: 1fr; }
  .mobile-header { position: sticky; top: 0; z-index: 34; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(18px); }
  .mobile-nav-button, .mobile-theme-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; }
  .mobile-brand { display: inline-flex; align-items: center; justify-self: center; gap: 9px; min-width: 0; color: var(--text); text-decoration: none; }
  .mobile-brand .brand-mark { width: 32px; height: 32px; border-radius: 11px; background: var(--primary); color: white; font-size: 14px; }
  .mobile-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 40; display: block; border: 0; background: rgba(15, 23, 42, .48); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 41; width: min(86vw, 330px); height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); border-right: 1px solid var(--line); background: var(--surface); transform: translateX(-104%); transition: transform .2s ease; box-shadow: 24px 0 64px rgba(15, 23, 42, .18); }
  .sidebar-mobile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin-bottom: 10px; color: var(--muted); }
  .sidebar-mobile-heading button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--text); font-size: 24px; cursor: pointer; }
  .brand-card { margin-bottom: 10px; }
  .side-nav { display: grid; overflow: visible; margin-top: 12px; padding-bottom: 8px; }
  .side-nav a { width: 100%; }
  body.mobile-nav-open { overflow: hidden; }
  body.mobile-nav-open .sidebar { transform: translateX(0); }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  .content { padding-top: 20px; }
  .grid-2, .email-workbench { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-header, .item-row, .email-row, .run-row, .account-row, .template-row, .gopay-row, .instance-row, .log-row { grid-template-columns: 1fr; display: grid; }
  .page-header { gap: 12px; }
  .header-actions, .row-actions { justify-content: flex-start; }
  .content { padding: 16px 12px calc(34px + env(safe-area-inset-bottom)); }
  .form-card, .panel-card { padding: 16px; }
  .card, .metric-card { padding: 15px; }
  .form-grid, .form-grid.tight { grid-template-columns: 1fr; }
  .button, .form-card button, .row-actions button, .button-link, .link-button.action-like { min-height: 44px; }
  .header-actions > .button, .action-row > .button, .row-actions > .button { flex: 1 1 140px; }
  .toast-stack { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}
.file-list { display: grid; gap: 10px; margin-top: 14px; }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-soft); }
.file-row strong { display: block; word-break: break-all; }
.file-row small { display: block; margin-top: 4px; color: var(--muted); }
.compact-empty { padding: 16px; margin-top: 12px; }

.button:active, .form-card button:active, .row-actions button:active, .button-link:active { transform: translateY(1px); filter: brightness(.96); }
.button:focus-visible, .form-card button:focus-visible, .row-actions button:focus-visible, .button-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.file-picker { display: grid; gap: 8px; padding: 18px; border: 1px dashed var(--color-auto-017-ab4bb1); border-radius: var(--radius-md); background: var(--surface-soft); cursor: pointer; }
.file-picker input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.file-picker span { font-size: 18px; font-weight: 850; color: var(--text); }
.file-picker small, .file-selection { color: var(--muted); }
.file-picker:hover { border-color: var(--color-auto-018-ea9f20); background: var(--color-auto-019-2d8370); }
.file-selection { margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); word-break: break-all; }
.bulk-action-bar {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bulk-action-bar .bulk-select-row {
  margin-bottom: 0;
}

.bulk-select-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 12px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.bulk-select-row input,
.account-select input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}


.account-export-terminal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: var(--color-auto-020-047f3e);
}
.account-export-terminal-backdrop[hidden] { display: none; }
.account-export-terminal {
  position: fixed;
  left: max(18px, calc(var(--sidebar) + 24px));
  right: 24px;
  bottom: 22px;
  z-index: 40;
  max-height: min(46vh, 420px);
  overflow: hidden;
  border: 1px solid var(--color-auto-021-01ab04);
  border-radius: 10px;
  background: var(--color-auto-005-2ec689);
  color: var(--color-auto-022-c769e3);
  box-shadow: 0 24px 70px var(--color-auto-023-2b4533);
}
.account-export-terminal[hidden] { display: none; }
.account-export-terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-auto-024-e9d14b);
  background: var(--color-auto-025-8ffe8d);
}
.account-export-terminal-head > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.account-export-terminal-head strong {
  color: var(--color-auto-026-d59bfe);
  font-size: 13px;
  font-weight: 850;
}
.account-export-terminal-head span {
  overflow: hidden;
  color: var(--color-auto-027-f60cdf);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-export-terminal-actions {
  display: inline-flex;
  gap: 8px;
  flex: 0 0 auto;
}
.account-export-terminal-actions button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--color-auto-028-d834bc);
  border-radius: 10px;
  background: var(--color-auto-029-08e149);
  color: var(--color-auto-030-e66b9d);
  font-size: 12px;
  font-weight: 800;
}
.account-export-terminal pre {
  min-height: 120px;
  max-height: calc(min(46vh, 420px) - 52px);
  margin: 0;
  overflow: auto;
  padding: 12px;
  color: var(--color-auto-022-c769e3);
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (max-width: 1040px) {
  .account-export-terminal { left: 16px; right: 16px; }
}

.account-export-form {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.account-export-status {
  display: none;
  min-height: 22px;
  margin: -6px 0 2px;
  padding: 0 2px;
  color: var(--color-auto-031-61afa1);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}
.account-export-status:not(:empty) { display: block; }

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: auto;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.inline-check input {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

.account-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.account-select {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.export-format-field {
  min-width: 180px;
  flex: 0 0 180px;
  display: inline-flex;
}

.export-format-field select {
  min-height: 40px;
  border-radius: 999px;
  padding: 8px 38px 8px 14px;
}

.compact-select {
  display: inline-flex;
  align-items: center;
}

.compact-select select {
  min-width: 124px;
  min-height: 40px;
}

.account-status-tags {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-exported { background: var(--success-soft); color: var(--success); }
.status-sold { background: var(--color-auto-012-11f94f); color: var(--color-auto-013-ef7369); }
.status-invalid { background: var(--danger-soft); color: var(--danger); }
.status-failed { background: var(--warning-soft); color: var(--warning); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .account-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-row > .row-actions {
    grid-column: 1 / -1;
  }
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.account-summary-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}

.account-summary-card span,
.account-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-summary-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.05em;
}

.account-summary-card.summary-primary {
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
}

.account-summary-card.summary-primary span,
.account-summary-card.summary-primary small {
  color: var(--color-auto-016-e6c6f1);
}

.account-tabs a {
  gap: 8px;
}

.account-tabs a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-auto-032-4cc9cd);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.account-tabs a.active span {
  background: var(--color-auto-002-d14f90);
  color: var(--primary);
  border: 1px solid var(--color-auto-033-0305fa);
}

.account-tabs.export-tabs a.active span {
  background: var(--color-auto-002-d14f90);
  color: var(--primary);
  border: 1px solid var(--color-auto-033-0305fa);
}


/* Compact settings pages */
.settings-page { gap: 14px; }
.compact-page-header { margin-bottom: 8px; }
.compact-page-header h1 { font-size: clamp(24px, 2.4vw, 34px); }
.compact-page-header p { max-width: 760px; }
.quick-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(150px, .75fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}
.quick-card label,
.inline-edit-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.quick-card input,
.quick-card select,
.inline-edit-form input,
.inline-edit-form select {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 10px;
}
.quick-card .quick-main-field { min-width: 260px; }
.quick-card .form-status {
  grid-column: 1 / -1;
  min-height: 22px;
}
.quick-card .form-status:empty { display: none; }
.quick-proxy-form { grid-template-columns: minmax(420px, 1fr) 150px minmax(220px, .6fr) auto; }
.quick-instance-form { grid-template-columns: minmax(260px, 1fr) minmax(220px, .8fr) minmax(180px, .7fr) auto; }
.quick-instance-form .compact-advanced { grid-column: 1 / -1; }
.compact-list-stack { gap: 10px; }
.editable-row {
  display: block;
  padding: 14px;
  border-radius: var(--radius-md);
}
.editable-row .item-title { margin-bottom: 10px; }
.inline-edit-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto auto auto;
  gap: 9px;
  align-items: end;
}
.inline-edit-form .wide-field { grid-column: span 2; }
.workflow-inline-form { grid-template-columns: minmax(160px, 1fr) minmax(170px, 1fr) 120px minmax(150px, 1fr) minmax(150px, 1fr) 105px 105px auto auto auto; }
.instance-inline-form { grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) minmax(160px, 1fr) 130px 130px 100px auto auto auto auto; }
.inline-edit-form .form-status {
  grid-column: 1 / -1;
  min-height: 22px;
}
.inline-edit-form .form-status:empty { display: none; }
.compact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}
.compact-meta span,
.compact-meta button { word-break: break-all; }
.compact-advanced {
  margin-top: 10px;
  border-radius: var(--radius-sm);
  background: transparent;
}
.compact-advanced summary { padding: 10px 12px; }
.proxy-config-row .item-title strong,
.workflow-row .item-title strong,
.instance-config-row .item-title strong { font-size: 15px; }

.start-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}
.start-card p {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.9;
  font-weight: 800;
  letter-spacing: -.03em;
}
.start-card select {
  display: inline-flex;
  width: auto;
  min-width: 180px;
  max-width: 280px;
  margin: 0 4px;
  border-radius: 999px;
  font-size: .9em;
  font-weight: 850;
  vertical-align: middle;
}
.start-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.status-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.status-board div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}
.status-board .wide { grid-column: span 2; }
.status-board span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.status-board strong {
  display: block;
  min-height: 24px;
  color: var(--text);
  font-size: 18px;
  word-break: break-all;
}
.config-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}
.config-section .quick-card {
  margin: 0 0 12px;
  box-shadow: none;
}
.config-list {
  display: grid;
  gap: 8px;
}
.config-list article {
  display: grid;
  grid-template-columns: minmax(180px,.45fr) minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-soft);
}
.config-list article span {
  color: var(--muted);
  word-break: break-all;
}
.account-search-line,
.log-filter-line {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-auto-014-24433d);
  box-shadow: var(--shadow-sm);
}
.account-search-line input[type="search"] { flex: 1; }
.log-filter-line input[type="search"] { flex: 1.5; }
.log-filter-line select,
.log-filter-line input:not([type="search"]) { flex: .45; min-width: 160px; }
.account-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.account-toolbar .account-export-form {
  flex: 1 1 720px;
}
.payment-profile-form { grid-template-columns: repeat(4, minmax(150px,1fr)) auto; }
@media (max-width: 1180px) {
  .quick-card,
  .quick-proxy-form,
  .payment-profile-form,
  .quick-instance-form,
  .inline-edit-form,
  .workflow-inline-form,
  .instance-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-card .quick-main-field,
  .inline-edit-form .wide-field { grid-column: 1 / -1; }
  .quick-card button,
  .inline-edit-form button { width: 100%; }
}
@media (max-width: 720px) {
  .quick-card,
  .quick-proxy-form,
  .payment-profile-form,
  .quick-instance-form,
  .inline-edit-form,
  .workflow-inline-form,
  .instance-inline-form { grid-template-columns: 1fr; }
  .status-board { grid-template-columns: 1fr; }
  .status-board .wide { grid-column: auto; }
  .config-list article { grid-template-columns: 1fr; }
  .account-search-line,
  .log-filter-line { flex-direction: column; }
  .start-card p { font-size: 20px; }
  .start-card select { width: 100%; max-width: none; margin: 6px 0; }
}

/* UI polish v2: dense tooling shell */
:root {
  color-scheme: light;
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-strong: #e9eef5;
  --text: #111827;
  --muted: #667085;
  --faint: #98a2b3;
  --line: #d8e0ea;
  --line-soft: #e8edf3;
  --primary: #0f1724;
  --primary-hover: #060a12;
  --accent: #2f6df6;
  --accent-soft: #eaf1ff;
  --signal: #b9f52f;
  --success: #079455;
  --success-soft: #e8f6ef;
  --warning: #b76e00;
  --warning-soft: #fff5df;
  --danger: #c73832;
  --danger-soft: #fff0ef;
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 20px 48px rgba(16, 24, 40, .10);
  --sidebar: 214px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1118;
  --surface: #121821;
  --surface-soft: #161d28;
  --surface-strong: #1c2633;
  --text: #e6edf6;
  --muted: #9aa8ba;
  --faint: #748295;
  --line: #253141;
  --line-soft: #1e2937;
  --primary: #e6edf6;
  --primary-hover: #ffffff;
  --accent: #b9f52f;
  --accent-soft: rgba(185, 245, 47, .14);
  --signal: #b9f52f;
  --success: #37c58f;
  --success-soft: rgba(55, 197, 143, .13);
  --warning: #e2a344;
  --warning-soft: rgba(226, 163, 68, .14);
  --danger: #ff6b66;
  --danger-soft: rgba(255, 107, 102, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, .36);
  --focus-ring: rgba(185, 245, 47, .26);
  --focus-ring-soft: rgba(185, 245, 47, .18);
  --input-focus-ring: rgba(185, 245, 47, .12);
  --color-auto-001-80daf7: rgba(18,24,33,.88);
  --color-auto-002-d14f90: #121821;
  --color-auto-005-2ec689: #0b0f16;
  --color-auto-006-0fe0e3: #121821;
  --color-auto-007-e87318: #253141;
  --color-auto-008-42ccb1: #b9f52f;
  --color-auto-009-0fbd2a: #748295;
  --color-auto-010-56a172: rgba(255,107,102,.28);
  --color-auto-011-75f6a5: #9fd5ff;
  --color-auto-012-11f94f: rgba(127,145,255,.16);
  --color-auto-013-ef7369: #aebaff;
  --color-auto-014-24433d: #121821;
  --color-auto-015-b36634: #c9d4e3;
  --color-auto-017-ab4bb1: #36465c;
  --color-auto-019-2d8370: #121821;
  --color-auto-020-047f3e: rgba(0,0,0,.42);
  --color-auto-021-01ab04: rgba(230,237,246,.92);
  --color-auto-022-c769e3: rgba(127,145,255,.16);
  --color-auto-023-2b4533: rgba(230,237,246,.22);
  --color-auto-024-e9d14b: rgba(148,163,184,.18);
  --color-auto-025-8ffe8d: rgba(255,255,255,.03);
  --color-auto-026-d59bfe: #253141;
  --color-auto-027-f60cdf: #748295;
  --color-auto-028-d834bc: rgba(148,163,184,.18);
  --color-auto-029-08e149: rgba(255,255,255,.06);
  --color-auto-030-e66b9d: #3a4658;
  --color-auto-031-61afa1: #9aa8ba;
  --color-auto-032-4cc9cd: #151c26;
  --color-auto-033-0305fa: rgba(0,0,0,.22);
  --color-auto-034-dac05c: #080c12;
  --color-auto-035-0fa161: rgba(185,245,47,.10);
  --color-auto-036-0f1c00: rgba(255,255,255,.08);
  --color-auto-037-87efa9: rgba(8,12,18,.98);
  --color-auto-038-54fa5c: #d7dfeb;
  --color-auto-039-bdbe0b: rgba(255,255,255,.06);
  --color-auto-040-bf8951: #080c12;
  --color-auto-041-5775cb: rgba(215,223,235,.62);
  --color-auto-042-0c6375: rgba(215,223,235,.78);
  --color-auto-043-d06a56: #2c394c;
  --color-auto-044-daee10: #e6edf6;
  --color-auto-045-a1b220: #b9f52f;
  --color-auto-046-4b4713: rgba(185,245,47,.14);
  --color-auto-047-da4c05: #2c394c;
  --color-auto-048-ce3983: #e6edf6;
  --color-auto-049-6f143c: #161d28;
  --color-auto-051-749dc7: #111822;
  --color-auto-052-2e91f8: #0c1118;
  --color-auto-053-7b76d0: #e6edf6;
  --color-auto-054-d26878: rgba(0,0,0,.44);
  --color-auto-062-baa335: rgba(230,237,246,.82);
  --color-auto-063-042510: #9aa8ba;
  --color-auto-064-964cbd: rgba(18,24,33,.92);
  --color-auto-065-ef8535: #aab6c6;
  --color-auto-066-307c8e: #2c394c;
  --color-auto-067-22a62e: #151c26;
  --color-auto-068-bd4331: #8b98ab;
  --color-auto-069-87ef6d: #151c26;
  --color-auto-070-0aad90: #2c394c;
  --color-auto-071-04322c: #121821;
  --color-auto-072-333c0f: #9aa8ba;
  --color-auto-073-cc762d: #161d28;
  --color-auto-074-b2683d: #161d28;
  --color-auto-075-64529f: #1b2430;
  --color-auto-076-556568: rgba(18,24,33,.86);
  --color-auto-077-5654d3: #161d28;
  --color-auto-078-91315e: #2c394c;
  --color-auto-079-d0d52e: rgba(18,24,33,.94);
  --color-auto-080-2a2f78: #9fd5ff;
  --color-auto-081-499668: #121821;
  --color-auto-085-96f3a4: #2c394c;
  --color-auto-086-0563f6: #161d28;
  --color-auto-087-31b6fa: #344256;
  --color-auto-088-069d90: rgba(18,24,33,.92);
  --color-auto-089-68743e: #748295;
  --color-auto-090-8a601f: #c9d4e3;
  --color-auto-091-da3d8a: #121821;
  --color-auto-092-376ac9: rgba(0,0,0,.32);
  --color-auto-093-2e8cbc: #37c58f;
  --color-auto-094-fdb6b8: #ff6b66;
  --color-auto-095-b50837: #151c26;
  --color-auto-096-08d051: #aebaff;
  --color-auto-097-3de0ed: #e6edf6;
  --color-auto-098-b001a3: rgba(230,237,246,.20);
}
html { background: var(--color-auto-034-dac05c); }
body {
  background:
    radial-gradient(circle at 36% -10%, var(--color-auto-035-0fa161), transparent 24rem),
    linear-gradient(90deg, var(--color-auto-034-dac05c) 0, var(--color-auto-034-dac05c) var(--sidebar), var(--bg) var(--sidebar), var(--bg) 100%);
  color: var(--text);
  font-size: 14px;
}
button, input, select, textarea { font-family: inherit; }
.app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar {
  padding: 18px 12px;
  border-right: 1px solid var(--color-auto-036-0f1c00);
  background: var(--color-auto-037-87efa9);
  color: var(--color-auto-038-54fa5c);
  backdrop-filter: none;
}
.brand-card {
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-auto-036-0f1c00);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-auto-039-bdbe0b), var(--color-auto-025-8ffe8d));
  box-shadow: none;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--signal);
  color: var(--color-auto-040-bf8951);
  font-weight: 900;
}
.brand-card strong { font-size: 14px; letter-spacing: -.02em; }
.brand-card small { color: var(--color-auto-041-5775cb); }
.side-nav { gap: 6px; margin-top: 18px; }
.side-nav a {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-auto-042-0c6375);
  border-color: transparent;
}
.side-nav a span { color: inherit; font-weight: 700; }
.side-nav a:hover { background: var(--color-auto-029-08e149); border-color: var(--color-auto-029-08e149); }
.side-nav a.active {
  background: var(--signal);
  border-color: transparent;
  color: var(--color-auto-040-bf8951);
}
.side-nav a.active span { color: var(--color-auto-040-bf8951); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  padding: 8px 11px;
  border: 1px solid var(--color-auto-036-0f1c00);
  border-radius: 10px;
  background: var(--color-auto-029-08e149);
  color: var(--color-auto-042-0c6375);
  cursor: pointer;
  font-weight: 750;
}
.theme-toggle:hover { border-color: var(--color-auto-083-661e9e); color: var(--color-auto-038-54fa5c); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle span:first-child { font-size: 15px; line-height: 1; }
.content {
  max-width: 1520px;
  padding: 28px clamp(18px, 2.5vw, 38px) 48px;
}
.page-stack, .config-page, .start-page { display: grid; gap: 14px; }
.page-marker {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--color-auto-031-61afa1);
  font: 800 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em;
}

/* shared controls */
input, select, textarea {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--color-auto-043-d06a56);
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-044-daee10);
  padding: 8px 10px;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-auto-045-a1b220);
  box-shadow: 0 0 0 3px var(--color-auto-046-4b4713);
}
.button, .form-card button, .row-actions button, .button-link, .quick-card button, .account-export-terminal-actions button {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--color-auto-047-da4c05);
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
  padding: 8px 12px;
  font-weight: 760;
  font-size: 13px;
  box-shadow: none;
}
.button.primary, .form-card button[type="submit"], .quick-card button[type="submit"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.button.secondary { background: var(--color-auto-049-6f143c); }
.button:hover, .row-actions button:hover, .button-link:hover, .quick-card button:hover { transform: translateY(-1px); }
.button:active, .row-actions button:active, .button-link:active, .quick-card button:active { transform: translateY(0); }
.button:disabled, button:disabled { opacity: .5; transform: none; }
.button.is-soft-disabled {
  opacity: .58;
  box-shadow: none;
}
.form-status { color: var(--color-auto-031-61afa1); font-size: 13px; }
.form-status.error { color: var(--danger); }
.form-status.success { color: var(--success); }
.status-pill, .pill {
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

/* start page */
.launch-panel {
  overflow: hidden;
  border: 1px solid var(--color-auto-036-0f1c00);
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--color-auto-050-af5bdb), transparent 32%),
    linear-gradient(180deg, var(--color-auto-051-749dc7), var(--color-auto-052-2e91f8));
  color: var(--color-auto-053-7b76d0);
  box-shadow: 0 18px 40px var(--color-auto-054-d26878);
}
.launch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 8px;
}
.launch-head h1 {
  margin: 0;
  color: var(--color-auto-002-d14f90);
  font: 760 clamp(28px, 3.8vw, 48px)/.98 -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: -.055em;
}
.launch-head .page-marker { color: var(--color-auto-055-f3c119); }
.launch-submit {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border-color: var(--signal) !important;
  background: var(--signal) !important;
  color: var(--color-auto-040-bf8951) !important;
  font-size: 15px;
}
.launch-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.launch-actions .button.secondary {
  min-height: 42px;
  border-color: var(--color-auto-056-0d41ca);
  background: var(--color-auto-036-0f1c00);
  color: var(--color-auto-057-59becc);
}
.launch-lines {
  display: grid;
  gap: 1px;
  padding: 14px 18px 20px;
}
.launch-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 14px 10px;
  border-top: 1px solid var(--color-auto-039-bdbe0b);
  color: var(--color-auto-057-59becc);
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.45;
  font-weight: 680;
  letter-spacing: -.035em;
}
.line-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--color-auto-058-525f58);
  border-radius: 999px;
  color: var(--color-auto-059-2c686b);
  font: 800 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em;
}
.launch-line select,
.launch-line input {
  width: auto;
  min-width: 160px;
  max-width: 260px;
  min-height: 42px;
  margin: 0;
  border-color: var(--color-auto-003-e65a35);
  border-radius: 999px;
  background: var(--color-auto-036-0f1c00);
  color: var(--color-auto-002-d14f90);
  font-size: .86em;
  font-weight: 760;
}
.launch-line input {
  padding-inline: 16px;
}
.launch-line input::placeholder { color: var(--color-auto-059-2c686b); }
.launch-line select option { color: var(--color-auto-044-daee10); }
.launch-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-auto-058-525f58);
  border-radius: 999px;
  background: var(--color-auto-036-0f1c00);
  color: var(--color-auto-057-59becc);
  font-size: .72em;
  font-weight: 720;
  letter-spacing: -.02em;
  cursor: pointer;
}
.launch-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-auto-002-d14f90);
}
.launch-check:focus-within {
  border-color: var(--color-auto-003-e65a35);
  box-shadow: 0 0 0 3px var(--color-auto-055-19f42f);
}
.launch-check--compact {
  min-height: 34px;
  padding-inline: 10px;
  border-color: var(--color-auto-039-bdbe0b);
  background: transparent;
  font-size: .58em;
}
.launch-check--compact input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 14px;
  inline-size: 14px;
  block-size: 14px;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 0;
  max-height: 14px;
  padding: 0;
  border: 1px solid var(--color-auto-083-661e9e);
  border-radius: var(--radius-xs);
  background: var(--color-auto-036-0f1c00);
  box-shadow: inset 0 1px 0 var(--color-auto-083-661e9e);
}
.launch-check--compact input:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.launch-check--compact input:checked::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}
.launch-check--compact input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.launch-foot { min-height: 34px; padding: 0 24px 20px; }
.launch-foot .form-status { color: var(--color-auto-060-c9db95); }
.extension-health-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.extension-health-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}
.extension-health-main strong {
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.extension-health-main span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extension-health-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.extension-health-actions .button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.task-list-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-auto-006-0fe0e3);
  box-shadow: var(--shadow-sm);
}
.task-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.task-list-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.02em;
}
.task-list-head span { color: var(--muted); font-size: 13px; font-weight: 760; }
.task-list { display: grid; }
.task-row {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(520px, 1.6fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.task-row:last-child { border-bottom: 0; }
.task-row .button:active { transform: translateY(0); }
.task-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.task-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.task-actions .button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 12px;
}
.task-empty { margin: 16px; }

/* config page */
.config-page { gap: 12px; }
.config-topline {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: -6px 0 4px;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, var(--bg) 70%, var(--color-auto-061-2e318c));
}
.config-topline h1 {
  margin: 0;
  font: 760 34px/.96 -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: -.045em;
}
.config-jump {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.config-jump a {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--color-auto-047-da4c05);
  border-radius: 999px;
  background: var(--color-auto-062-baa335);
  color: var(--color-auto-063-042510);
  text-decoration: none;
  font-weight: 760;
  font-size: 12px;
}
.config-stack { display: grid; gap: 10px; }

.config-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.config-tab {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--color-auto-047-da4c05);
  border-radius: 999px;
  background: var(--color-auto-064-964cbd);
  color: var(--color-auto-065-ef8535);
  font: 760 12px/1 inherit;
  cursor: pointer;
}
.config-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.config-panel {
  display: grid;
  gap: 10px;
}
.config-panel[hidden] { display: none !important; }
.config-section {
  padding: 0;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
  background: var(--color-auto-001-80daf7);
  box-shadow: none;
  overflow: hidden;
}
.config-section summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
}
.config-section summary::-webkit-details-marker { display: none; }
.config-section summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-auto-067-22a62e);
  color: var(--color-auto-031-61afa1);
  font-weight: 900;
}
.config-section[open] summary::after { content: "−"; background: var(--primary); color: var(--color-auto-002-d14f90); }
.config-section summary span {
  color: var(--color-auto-048-ce3983);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.config-section summary small {
  flex: 1;
  color: var(--color-auto-068-bd4331);
  font-size: 12px;
  font-weight: 650;
}
.config-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--color-auto-069-87ef6d);
}
.config-actions { display: flex; justify-content: flex-end; padding-top: 10px; }
.quick-card {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  margin: 0;
  border: 1px solid var(--color-auto-070-0aad90);
  border-radius: 10px;
  background: var(--color-auto-071-04322c);
  box-shadow: none;
}
.quick-card label, .inline-edit-form label {
  gap: 4px;
  color: var(--color-auto-072-333c0f);
  font-size: 11px;
  font-weight: 820;
}
.quick-card .wide-field { grid-column: span 2; }
.quick-card .check-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
}
.quick-card .check-field input {
  width: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--primary);
}
.quick-card .form-status { grid-column: 1 / -1; min-height: 20px; }
.file-selection {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-auto-073-cc762d);
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
}
.compact-meta {
  display: flex;
  gap: 8px;
  margin: 0;
}
.compact-meta span,
.compact-meta button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: var(--color-auto-074-b2683d);
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 780;
}
.compact-meta button {
  cursor: pointer;
}
.compact-meta button.is-active {
  background: var(--primary);
  color: var(--primary-contrast);
}
.config-list { gap: 6px; }
.config-panel .inline-config-form[hidden] { display: none !important; }
.config-list article {
  grid-template-columns: minmax(170px, .36fr) minmax(0,1fr) auto;
  min-height: 44px;
  padding: 8px 10px;
  border-color: var(--color-auto-075-64529f);
  border-radius: 10px;
  background: var(--color-auto-002-d14f90);
}
.config-list article strong { font-size: 13px; font-weight: 780; }
.config-list article span { color: var(--color-auto-031-61afa1); font-size: 12px; }
.config-list article .item-title { min-width: 0; }
.config-list article .status-pill { word-break: normal; }
.config-list article .status-available { background: var(--success-soft); color: var(--success); }
.config-list article .status-disabled { background: var(--danger-soft); color: var(--danger); }
.inline-config-form { margin: -2px 0 8px; }
.payment-profile-form { grid-template-columns: repeat(6, minmax(120px,1fr)) auto; }
.credit-card-editor-form { grid-template-columns: minmax(220px, 1.2fr) repeat(6, minmax(125px, .75fr)) auto; }
.credit-card-bulk-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.credit-card-bulk-bar .bulk-select-row { margin: 0; }
.credit-card-bulk-count { align-self: center; color: var(--muted); font-size: 13px; font-weight: 750; }
.credit-card-bulk-limit,
.credit-card-bulk-field { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.credit-card-bulk-limit input,
.credit-card-bulk-field input,
.credit-card-bulk-field select { width: 150px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text); }
.credit-card-bulk-bar .form-status { flex-basis: 100%; min-height: 0; }
.credit-card-bulk-bar .form-status:empty { display: none; }
.config-list.credit-card-list article { grid-template-columns: auto minmax(170px, .36fr) minmax(0, 1fr) auto; }
.credit-card-select { display: inline-flex; align-items: center; }
.credit-card-select input { width: 18px; height: 18px; margin: 0; }
.credit-card-details { min-width: 0; display: grid; gap: 3px; }
.config-list article .credit-card-usage-accounts { color: var(--text); overflow-wrap: anywhere; }
.credit-card-reservations { display: grid; gap: 5px; margin-top: 3px; }
.credit-card-reservation-label { color: var(--muted); font-size: 12px; font-weight: 800; }
.credit-card-reservation { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.credit-card-reservation code { max-width: min(520px, 100%); overflow-wrap: anywhere; color: var(--text); }
.credit-card-reservation .form-status { min-height: 0; }
.config-list article .status-reserved { background: var(--warning-soft); color: var(--warning); }
.config-list article .status-exhausted { background: var(--warning-soft); color: var(--warning); }

.card-vault-page .settings-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-vault-page .section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card-vault-page .section-head h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.card-vault-page .section-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.card-provider-form { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; }
.card-provider-form .task-template-check { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; }
.card-provider-form .task-template-check input { width: 16px; min-height: 16px; margin: 0; padding: 0; }
.card-provider-list .card-provider-row { grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr) auto; }
.card-provider-details { min-width: 0; }
.card-provider-balances {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
  color: var(--text);
}
.card-provider-balances-label {
  margin-right: 10px;
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
}
.card-provider-balance-item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 7px;
  min-width: 112px;
  padding: 0 12px;
  border-left: 1px solid var(--line-soft);
}
.card-provider-balance-currency {
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: .04em;
}
.card-provider-balance-amount {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.card-provider-balance-detail {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.card-provider-balance-error {
  color: var(--danger);
  font-weight: 700;
}
.card-vault-page .table-scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.card-vault-page .data-table { min-width: 860px; font-size: 12px; }
.card-vault-page .data-table th,
.card-vault-page .data-table td { padding: 9px 10px; vertical-align: middle; }
.card-vault-page .error-text { color: var(--danger); overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .card-provider-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-provider-form .wide-field { grid-column: 1 / -1; }
}

/* Real subscription protocol test */
.subscription-test-page { max-width: 1180px; margin: 0 auto; padding-bottom: 48px; }
.subscription-test-header { align-items: stretch; gap: 20px; }
.subscription-test-header h1 { margin: 5px 0 7px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.subscription-test-header p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.6; }
.danger-kicker { display: inline-flex; color: var(--danger); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.subscription-test-warning { display: grid; align-content: center; gap: 4px; min-width: 280px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: var(--radius-md); background: var(--danger-soft); }
.subscription-test-warning strong { color: var(--danger); font-size: 15px; }
.subscription-test-warning span { max-width: 320px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.subscription-test-form { display: grid; gap: 14px; }
.subscription-test-card, .subscription-test-submit-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.subscription-test-card { display: grid; gap: 18px; padding: 20px; }
.subscription-test-section-head { display: flex; align-items: flex-start; gap: 12px; }
.subscription-test-section-head > span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 11px; background: var(--primary); color: var(--surface); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.subscription-test-section-head h2 { margin: 0; color: var(--text); font-size: 18px; letter-spacing: -.02em; }
.subscription-test-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.subscription-test-card label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.subscription-test-card input, .subscription-test-card select, .subscription-test-card textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text); }
.subscription-test-card input, .subscription-test-card select { min-height: 42px; padding: 9px 11px; }
.subscription-test-card textarea { min-height: 132px; padding: 11px 12px; resize: vertical; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; }
.subscription-test-card input:focus, .subscription-test-card select:focus, .subscription-test-card textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.subscription-test-grid { display: grid; gap: 12px; }
.subscription-test-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subscription-test-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subscription-test-grid .span-two { grid-column: span 2; }
.subscription-test-grid .span-three { grid-column: 1 / -1; }
.subscription-test-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.subscription-test-identity, .subscription-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--line-soft); }
.subscription-test-identity > div, .subscription-result-grid > div { display: grid; gap: 5px; min-width: 0; padding: 13px 14px; background: var(--surface-soft); }
.subscription-test-identity span, .subscription-result-grid span { color: var(--muted); font-size: 11px; font-weight: 750; }
.subscription-test-identity strong, .subscription-result-grid strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.subscription-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.subscription-mode-grid label { position: relative; display: block; cursor: pointer; }
.subscription-mode-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.subscription-mode-grid label > span { display: grid; gap: 4px; min-height: 84px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.subscription-mode-grid strong { color: var(--text); font-size: 14px; }
.subscription-mode-grid small { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.45; }
.subscription-mode-grid input:checked + span { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.subscription-mode-grid label:hover > span { transform: translateY(-1px); }
.subscription-amount-note { align-self: end; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 11px; font-weight: 700; line-height: 1.45; }
.subscription-amount-note.success { background: var(--success-soft); color: var(--success); }
.subscription-amount-note.error { background: var(--danger-soft); color: var(--danger); }
.subscription-test-submit-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); }
.subscription-test-submit-card > div { display: grid; gap: 4px; }
.subscription-test-submit-card strong { color: var(--text); font-size: 14px; }
.subscription-test-submit-card span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.subscription-test-submit-card .button { min-width: 150px; }
.subscription-test-result [data-subscription-result-message].success { color: var(--success); }
.subscription-test-result [data-subscription-result-message].error { color: var(--danger); }
.subscription-test-result pre { margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); white-space: pre-wrap; overflow-wrap: anywhere; }
.subscription-task-list { display: grid; gap: 12px; }
.subscription-task-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.subscription-task-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.subscription-task-card-header > div { display: grid; gap: 4px; min-width: 0; }
.subscription-task-card-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.subscription-task-account-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.subscription-task-account-badge.current { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: var(--success-soft); color: var(--success); }
.subscription-task-account-badge.history { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); background: var(--warning-soft); color: var(--warning); }
.subscription-task-card-header strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; }
.subscription-task-card-header span:not(.status-pill) { color: var(--muted); font-size: 12px; line-height: 1.45; }
.subscription-task-card-header span.success { color: var(--success); }
.subscription-task-card-header span.error { color: var(--danger); }
.subscription-task-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.subscription-task-scope { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--muted); font-size: 12px; }
.subscription-task-scope label { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 750; cursor: pointer; white-space: nowrap; }
.subscription-task-scope input { width: 15px; height: 15px; accent-color: var(--primary); }
.subscription-task-logs { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.subscription-task-logs summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 750; }
.subscription-task-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.subscription-task-log-toolbar span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.subscription-task-log-toolbar .button { min-height: 30px; padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.subscription-task-logs pre { max-height: 300px; margin-top: 8px; border-color: var(--line); background: var(--surface); color: var(--text); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.65; overflow: auto; overflow-wrap: anywhere; user-select: text; white-space: pre-wrap; }
.subscription-confirm-dialog { width: min(680px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(15, 23, 42, .28); }
.subscription-confirm-dialog::backdrop { background: rgba(15, 23, 42, .58); backdrop-filter: blur(4px); }
.subscription-confirm-shell { display: grid; gap: 18px; padding: 22px; }
.subscription-confirm-shell header h2 { margin: 5px 0 4px; font-size: 24px; letter-spacing: -.03em; }
.subscription-confirm-shell header p { margin: 0; color: var(--muted); font-size: 12px; }
.subscription-confirm-shell dl { display: grid; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--line-soft); }
.subscription-confirm-shell dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: var(--surface-soft); }
.subscription-confirm-shell dt { color: var(--muted); font-size: 12px; font-weight: 750; }
.subscription-confirm-shell dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-weight: 700; }
.subscription-confirm-check { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.subscription-confirm-check input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--danger); }
.subscription-confirm-shell .dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
@media (max-width: 860px) {
  .subscription-test-header, .subscription-test-submit-card { flex-direction: column; align-items: stretch; }
  .subscription-test-grid.two-columns, .subscription-test-grid.three-columns, .subscription-mode-grid { grid-template-columns: 1fr; }
  .subscription-test-grid .span-two, .subscription-test-grid .span-three { grid-column: auto; }
  .subscription-test-identity, .subscription-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-test-warning { min-width: 0; }
}
@media (max-width: 520px) {
  .subscription-test-identity, .subscription-result-grid { grid-template-columns: 1fr; }
  .subscription-confirm-shell dl > div { grid-template-columns: 1fr; gap: 3px; }
  .subscription-confirm-shell .dialog-actions { flex-direction: column-reverse; }
  .subscription-task-log-toolbar { align-items: stretch; flex-direction: column; }
}
@media (max-width: 640px) {
  .card-provider-form { grid-template-columns: 1fr; }
  .card-provider-form .wide-field { grid-column: auto; }
  .card-provider-list .card-provider-row { grid-template-columns: 1fr; align-items: start; }
}



/* accounts page */
.accounts-page { gap: 10px; }
.tabs, .quick-tabs {
  gap: 6px;
  margin: 0;
}
.tabs a, .quick-tabs a {
  min-height: 34px;
  border-radius: 999px;
  background: var(--color-auto-076-556568);
  border-color: var(--color-auto-066-307c8e);
  color: var(--color-auto-065-ef8535);
  font-size: 12px;
  font-weight: 820;
}
.tabs a.active, .quick-tabs a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.account-tabs a span {
  min-width: 27px;
  min-height: 22px;
  padding: 0 7px;
  font-size: 12px;
  background: var(--color-auto-077-5654d3);
}
.account-tabs a.active span { color: var(--color-auto-048-ce3983); }
.account-search-line, .log-filter-line {
  padding: 8px;
  border-radius: 10px;
  background: var(--color-auto-001-80daf7);
  box-shadow: none;
}
.account-search-line {
  /* The account page has several optional filters.  Let them wrap instead of
     shrinking the actual keyword search to zero width/off-screen. */
  flex-wrap: wrap;
  align-items: center;
}
.account-search-line input[type="search"] {
  min-height: 38px;
  border: 0;
  background: transparent;
  font-size: 14px;
}
.account-search-line [name="q"] {
  order: -1;
  flex: 1 1 360px;
  min-width: min(360px, 100%);
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.account-search-line [name="customer"] {
  flex: 1 1 180px;
  min-width: 180px;
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.account-search-line select,
.account-bulk-status-select {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
  background: var(--color-auto-076-556568);
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}
.account-search-line select {
  flex: 0 0 150px;
}
.account-bulk-status-select {
  flex: 0 0 118px;
}
.account-toolbar {
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
  background: var(--color-auto-076-556568);
}
.bulk-select-row {
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-auto-002-d14f90);
  font-size: 12px;
}
.account-toolbar .account-export-form { flex: 0 0 auto; }
.account-list { gap: 8px; }
.account-row {
  grid-template-columns: 28px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-color: var(--color-auto-078-91315e);
  border-radius: 10px;
  background: var(--color-auto-079-d0d52e);
  box-shadow: none;
}
.account-row > div { min-width: 0; }
.account-title-line { gap: 7px; }
.account-email-copy {
  color: var(--color-auto-080-2a2f78);
  font-size: 15px;
  font-weight: 820;
}
.account-email-copy[data-copy-text] {
  cursor: pointer;
}
.account-info-copy {
  font-size: 12px;
  font-weight: 760;
}
.account-meta {
  gap: 8px 12px;
  margin-top: 7px;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
}
.account-password-display {
  color: var(--color-auto-090-8a601f);
}
.account-password-display code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--color-auto-078-91315e);
  border-radius: 8px;
  background: var(--color-auto-081-499668);
  color: var(--color-auto-097-3de0ed);
  font: 800 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.account-totp-link {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2);
}
.account-totp-link b {
  flex: 0 0 auto;
  color: var(--text);
}
.account-totp-link a {
  max-width: min(560px, 48vw);
  overflow: hidden;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-totp-link .link-button {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
}
.account-payment-detail {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-inline-form {
  grid-template-columns: 112px 170px 128px minmax(180px, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-auto-078-91315e);
}
.account-inline-form input,
.account-inline-form select {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: var(--radius-xs);
  font-size: 12px;
}
.account-inline-form button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
}
.account-row-actions {
  grid-column: 2;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.account-row-actions button, .account-row-actions .button-link {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.account-otp-result {
  max-width: 180px;
}
.account-totp-result.success {
  color: var(--success);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 800;
}
.account-totp-result.error {
  color: var(--danger);
}
.account-select input, .bulk-select-row input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--accent);
}
.email-card-line summary { font-size: 12px; }
.account-export-result {
  margin-top: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--color-auto-081-499668);
  font-size: 12px;
}
.account-export-terminal {
  left: calc(var(--sidebar) + 28px);
  right: 28px;
  bottom: 24px;
  border-radius: 10px;
  background: var(--color-auto-082-c0e111);
  border-color: var(--color-auto-083-661e9e);
  box-shadow: 0 22px 54px var(--color-auto-084-c366e4);
}
.account-export-terminal-head { padding: 9px 11px; }
.account-export-terminal pre { font-size: 12px; line-height: 1.55; }

@media (max-width: 1180px) {
   .quick-card, .quick-proxy-form, .payment-profile-form, .quick-instance-form, .inline-edit-form, .workflow-inline-form, .instance-inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-card .wide-field, .inline-edit-form .wide-field { grid-column: 1 / -1; }
  .quick-card button, .inline-edit-form button { width: auto; }
}
@media (max-width: 1040px) {
  body { background: var(--bg); }
  .sidebar { background: var(--color-auto-034-dac05c); }
  .content { padding-top: 18px; }
  .account-export-terminal { left: 16px; right: 16px; }
}
@media (max-width: 720px) {
  .launch-head, .config-topline { align-items: stretch; flex-direction: column; }
  .launch-line { font-size: 18px; }
  .launch-line select, .launch-check { width: 100%; max-width: none; }
  .extension-health-panel { grid-template-columns: 1fr; }
  .extension-health-main { align-items: flex-start; flex-wrap: wrap; }
  .extension-health-actions { justify-content: flex-start; flex-wrap: wrap; }
  .config-section summary { align-items: center; }
  .config-section summary small { display: none; }
  .quick-card, .quick-proxy-form, .payment-profile-form, .quick-instance-form, .inline-edit-form, .workflow-inline-form, .instance-inline-form { grid-template-columns: 1fr; }
  .config-list article, .account-row { grid-template-columns: 1fr; }
  .account-row > .row-actions { grid-column: auto; }
  .account-inline-form { grid-template-columns: 1fr; }
  .account-inline-form button { width: 100%; }
}

/* account/config cleanup pass */
.accounts-page > .account-tabs:first-of-type {
  padding: 0;
  gap: 8px;
}
.accounts-page > .account-tabs:first-of-type a {
  min-height: 40px;
  padding: 7px 14px;
  border-color: var(--color-auto-085-96f3a4);
  font-size: 13px;
  background: var(--color-auto-002-d14f90);
}
.accounts-page > .account-tabs:first-of-type a.active {
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.subscription-source-tabs {
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}
.subscription-source-tabs a {
  min-height: 38px;
  border-color: var(--color-auto-085-96f3a4);
  background: var(--color-auto-002-d14f90);
  font-size: 13px;
}
.subscription-source-tabs a.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--text);
}
.subscription-source-tabs a.active span {
  background: var(--accent);
  color: var(--color-auto-002-d14f90);
}
.account-source-pill {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--accent-soft);
  color: var(--text);
}
.account-source-pill.source-session {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  background: var(--success-soft);
}
.account-source-pill.source-unknown {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  background: var(--warning-soft);
}
.account-filter-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
  background: var(--color-auto-076-556568);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}
.account-filter-date input {
  width: 104px;
  min-height: 28px;
  padding: 4px 6px;
  border: 0;
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.account-filter-date input:focus-visible {
  outline: 3px solid var(--focus-ring-soft);
  outline-offset: 1px;
}
.account-xlsx-export {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: var(--success);
}
.account-xlsx-export:hover:not(:disabled) {
  background: color-mix(in srgb, var(--success) 86%, var(--primary-hover));
}
.export-tabs {
  margin-top: -4px;
  padding-left: 2px;
}
.export-tabs a {
  min-height: 30px;
  padding: 5px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
}
.export-tabs a span {
  min-width: 24px;
  min-height: 22px;
  padding: 0 7px;
  background: var(--color-auto-086-0563f6);
  font-size: 12px;
}
.export-tabs a.active {
  background: var(--color-auto-077-5654d3);
  border-color: var(--color-auto-085-96f3a4);
  color: var(--color-auto-048-ce3983);
}
.export-tabs a.active span {
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
}
.account-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.account-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.account-sequence-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-sequence-select input {
  width: 138px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}
.account-toolbar-actions .button,
.account-toolbar .account-export-form .button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.account-toolbar-actions .button:active,
.account-toolbar .account-export-form .button:active,
.account-row-actions button:active,
.account-row-actions .button-link:active {
  transform: translateY(1px);
  filter: brightness(.95);
}
.account-toolbar-actions .button:focus-visible,
.account-toolbar .account-export-form .button:focus-visible,
.account-row-actions button:focus-visible,
.account-row-actions .button-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.account-toolbar .account-export-form {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.account-row {
  grid-template-columns: 42px minmax(0, 1fr);
}
.account-select {
  display: flex;
  min-width: 34px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.account-sequence {
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}
.account-pagination nav {
  display: flex;
  align-items: center;
  gap: 9px;
}
.account-pagination .button {
  min-height: 32px;
  padding: 6px 10px;
}
.account-pagination .disabled {
  cursor: not-allowed;
  opacity: .45;
}
@media (max-width: 720px) {
  .account-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .account-filter-date,
  .account-filter-date input,
  .account-search-line [name="customer"],
  .account-search-line [name="q"] {
    width: 100%;
  }
  .account-row > .row-actions {
    grid-column: 1 / -1;
  }
  .account-sequence-select {
    width: 100%;
  }
  .account-sequence-select input {
    min-width: 0;
    flex: 1;
  }
}
.account-export-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.account-export-mode select {
  min-width: 62px;
  height: 28px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
}
.account-export-mode select:focus-visible {
  outline: 3px solid var(--focus-ring-soft);
  outline-offset: 1px;
}
.account-toolbar .account-export-result {
  flex-basis: 100%;
}
.account-row[data-invalid="true"] {
  opacity: .72;
}
.account-row[data-invalid="true"] .account-email-copy {
  color: var(--color-auto-031-61afa1);
}
.account-row-actions button:not(.danger),
.account-row-actions .button-link {
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-063-042510);
}
.account-row-actions button[data-account-single-export] {
  border-color: var(--color-auto-087-31b6fa);
  color: var(--color-auto-048-ce3983);
}
.account-row-actions [data-account-subscription-edit] {
  min-width: 34px;
  padding: 7px 9px;
  font-size: 14px;
  line-height: 1;
}
.account-row-actions [data-account-subscription-edit] svg {
  width: 15px;
  height: 15px;
}
.account-row-actions [data-account-subscription-edit][aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.account-subscription-editor {
  display: grid;
  grid-template-columns: minmax(86px, .7fr) minmax(160px, 1.2fr) minmax(102px, .8fr) minmax(160px, 1.2fr) minmax(86px, .7fr) minmax(70px, .55fr) minmax(108px, .8fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-auto-078-91315e);
  overflow: visible;
}
.account-subscription-editor[hidden] {
  display: none;
}
.account-subscription-field,
.account-subscription-time {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--color-auto-031-61afa1);
  font-size: 11px;
  font-weight: 850;
}
.account-subscription-field span,
.account-subscription-time > span {
  line-height: 1;
}
.account-subscription-field input,
.account-subscription-field select {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--color-auto-078-91315e);
  border-radius: 9px;
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
  font-size: 12px;
  font-weight: 760;
}
.account-subscription-field input::placeholder {
  color: var(--color-auto-027-f60cdf);
  font-weight: 650;
}
.account-subscription-field input:focus-visible,
.account-subscription-field select:focus-visible {
  outline: 3px solid var(--focus-ring-soft);
  outline-offset: 1px;
  border-color: var(--color-auto-045-a1b220);
}
.account-subscription-time {
  position: relative;
}
.account-subscription-time > span {
  line-height: 1;
}
.account-time-trigger {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--color-auto-078-91315e);
  border-radius: 9px;
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
  cursor: pointer;
}
.account-time-trigger:hover {
  border-color: var(--color-auto-087-31b6fa);
  background: var(--color-auto-049-6f143c);
}
.account-time-trigger:active {
  transform: translateY(1px);
  filter: brightness(.96);
}
.account-time-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.account-time-trigger strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-auto-048-ce3983);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-time-trigger small {
  color: var(--color-auto-031-61afa1);
  font-size: 11px;
  font-weight: 760;
}
.account-time-trigger[data-empty="true"] strong {
  color: var(--color-auto-031-61afa1);
  font-weight: 760;
}
.account-time-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  grid-template-columns: 118px 74px;
  gap: 8px;
  width: max-content;
  padding: 10px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 12px;
  background: var(--color-auto-002-d14f90);
  box-shadow: 0 14px 38px var(--color-auto-020-047f3e);
}
.account-time-popover[hidden] {
  display: none;
}
.account-time-popover label {
  display: grid;
  gap: 5px;
  color: var(--color-auto-031-61afa1);
  font-size: 11px;
  font-weight: 850;
}
.account-time-popover input {
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--color-auto-078-91315e);
  border-radius: 8px;
  background: var(--color-auto-049-6f143c);
  color: var(--color-auto-048-ce3983);
  font-size: 12px;
  font-weight: 780;
}
.account-time-popover input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.account-time-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.account-time-actions button {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--color-auto-078-91315e);
  border-radius: 8px;
  background: var(--color-auto-049-6f143c);
  color: var(--color-auto-048-ce3983);
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}
.account-time-actions button:hover {
  background: var(--color-auto-086-0563f6);
}
.account-time-actions button:active {
  transform: translateY(1px);
  filter: brightness(.96);
}
.account-time-action:active {
  transform: translateY(1px);
  filter: brightness(.96);
}
.account-subscription-save {
  min-height: 32px;
  min-width: 58px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12px;
  white-space: nowrap;
}
.account-subscription-field.is-payment-detail {
  grid-column: 1 / -2;
}
.account-subscription-editor .form-status {
  grid-column: 1 / -1;
  min-height: 20px;
  font-size: 12px;
}
.account-subscription-editor .form-status:empty {
  display: none;
}
@media (max-width: 1040px) {
  .account-subscription-editor {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  }
  .account-subscription-field.is-account {
    grid-column: auto;
  }
  .account-subscription-field.is-payment-detail {
    grid-column: 1 / -2;
  }
}
@media (max-width: 720px) {
  .account-subscription-editor {
    grid-template-columns: 1fr;
  }
  .account-subscription-field.is-account {
    grid-column: auto;
  }
  .account-subscription-field.is-payment-detail {
    grid-column: auto;
  }
  .account-subscription-save {
    width: 100%;
  }
}
.email-channel-shell {
  display: grid;
  gap: 10px;
  max-width: 1080px;
}
.email-channel-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 14px;
  background: var(--color-auto-002-d14f90);
}
.email-channel-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-auto-031-61afa1);
  font-size: 13px;
  font-weight: 850;
}
.email-channel-tab.is-active {
  background: var(--color-auto-048-ce3983);
  color: var(--color-auto-002-d14f90);
}
.email-channel-panel {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 14px;
  background: var(--color-auto-088-069d90);
}
.email-channel-panel[hidden] {
  display: none !important;
}
.email-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.email-panel-bar-compact {
  justify-content: flex-end;
  min-height: 26px;
}
.email-panel-title {
  color: var(--color-auto-048-ce3983);
  font-size: 16px;
  font-weight: 880;
}
.email-inline-head {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.email-upload-strip,
.cloud-mail-setup,
.cloud-domain-settings {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cloud-domain-settings[hidden] {
  display: none !important;
}
.email-upload-strip {
  display: grid;
  grid-template-columns: auto minmax(220px, 520px) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  justify-content: start;
  max-width: 760px;
}
.compact-upload-strip,
.email-upload-strip.compact-upload-strip {
  grid-template-columns: auto auto minmax(180px, 1fr);
}
.email-upload-strip.credit-card-import-strip {
  grid-template-columns: minmax(180px, 240px) minmax(130px, 170px) auto auto auto;
  max-width: 980px;
}
.credit-card-import-strip > label:not(.upload-button) {
  display: grid;
  gap: 5px;
}
.credit-card-import-strip > label:not(.upload-button) > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.email-upload-strip .file-selection {
  min-width: 0;
}
.email-upload-strip .form-status {
  grid-column: 1 / -1;
}
.email-upload-strip .form-status:empty {
  display: none;
}
.email-text-import {
  display: grid;
  grid-template-columns: minmax(320px, 720px) auto;
  gap: 10px;
  align-items: end;
  max-width: 980px;
}
.email-text-import textarea {
  min-height: 92px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.email-text-import-actions {
  display: grid;
  gap: 8px;
  align-items: center;
}
.email-text-import .form-status:empty {
  display: none;
}
.email-bulk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
}
.email-bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-auto-063-042510);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}
.email-bulk-row select {
  width: auto;
  min-width: 138px;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.email-bulk-count {
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}
.email-bulk-row .form-status {
  min-height: 0;
  font-size: 12px;
}
.email-bulk-row .form-status:empty {
  display: none;
}
.lqqq-filter-row {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(120px, 150px) auto;
  gap: 12px;
  align-items: center;
  padding-top: 0;
  justify-content: start;
}
.lqqq-filter-row input[type="search"],
.lqqq-filter-row select {
  min-height: 38px;
  border-color: var(--color-auto-066-307c8e);
  background: var(--color-auto-002-d14f90);
}
[data-email-provider="lqqq"] .lqqq-filter-row {
  grid-template-columns: minmax(280px, 520px) minmax(120px, 150px) minmax(120px, 150px) auto;
}
.email-domain-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 999px;
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-031-61afa1);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}
.upload-button input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.upload-button span,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-auto-087-31b6fa);
  border-radius: 10px;
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
  font-size: 13px;
  font-weight: 820;
  cursor: pointer;
}
.email-upload-strip button,
.cloud-mail-setup button,
.cloud-domain-settings > button {
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
  font-weight: 820;
}
.upload-button span:hover,
.ghost-button:hover {
  border-color: var(--color-auto-089-68743e);
  background: var(--color-auto-049-6f143c);
}
.upload-button span:active,
.ghost-button:active,
.email-upload-strip button:active,
.cloud-mail-setup button:active,
.cloud-domain-settings button:active,
.config-list .row-actions button:active {
  transform: translateY(1px);
  filter: brightness(.96);
}
.email-channel-tab:active {
  transform: translateY(1px);
}
.upload-button input[type="file"]:focus-visible + span,
.ghost-button:focus-visible {
  outline: 3px solid var(--focus-ring-soft);
  outline-offset: 2px;
}
.compact-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .65fr) auto;
  gap: 10px;
  align-items: end;
}
.cloud-domain-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.domain-mode-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, .9fr);
  gap: 10px;
}
.domain-mode-grid fieldset {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
}
.domain-mode-grid legend {
  padding: 0 4px;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 820;
}
.domain-mode-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-auto-090-8a601f);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}
.domain-mode-grid input[type="text"],
.domain-mode-grid input[name="domain"] {
  min-width: 180px;
}
.email-source-list article {
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr) auto;
}
.email-mini-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
  border-top: 1px solid var(--color-auto-075-64529f);
}
.email-mini-head,
.email-mini-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 78px minmax(92px, .28fr) minmax(360px, 1fr);
  gap: 12px;
}
.email-mini-head {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  min-height: 32px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-auto-075-64529f);
  background: var(--color-auto-091-da3d8a);
}
.email-mini-head span {
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 850;
}
.email-mini-row {
  align-items: center;
  min-height: 40px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-auto-075-64529f);
}
.email-mini-row:last-child {
  border-bottom: 0;
}
.email-mini-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 720;
}
.email-mini-row.is-hidden {
  display: none;
}
.email-mini-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.email-mini-identity input[type="checkbox"],
.email-bulk-check input[type="checkbox"] {
  width: 15px;
  min-height: 15px;
  flex: 0 0 auto;
}
.email-mini-identity .link-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-mini-row .button-link {
  text-align: center;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 12px;
}
.email-mini-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.email-mini-actions .button-link {
  flex: 0 0 auto;
}
.email-mini-actions .email-otp-result {
  flex: 1 1 140px;
  min-width: 120px;
}
.account-source-item-list .email-mini-head,
.account-source-item-list .email-mini-row {
  grid-template-columns: minmax(var(--account-source-email-min), 1.25fr) var(--account-source-status-width) minmax(var(--account-source-config-min), .8fr) minmax(var(--account-source-actions-min), .65fr);
  min-width: 0;
}
.account-source-groups,
.account-source-group,
.account-source-items {
  display: grid;
  gap: var(--space-2);
}
.account-source-group[hidden] {
  display: none;
}
.account-source-filter-row {
  display: grid;
  grid-template-columns: minmax(var(--account-source-email-min), 1fr) minmax(var(--account-source-status-control-min), 160px) auto;
  align-items: center;
  gap: var(--space-2);
}
.account-source-filter-row input,
.account-source-filter-row select {
  min-height: var(--control-height-sm);
}
.account-source-filter-count {
  color: var(--muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.quick-card[data-account-source-import-form] {
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
}
.quick-card[data-account-source-import-form] .account-source-file-field {
  grid-column: 1;
  grid-row: 1;
}
.quick-card[data-account-source-import-form] .account-source-file-status {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
}
.quick-card[data-account-source-import-form] .account-source-paste-field {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.quick-card[data-account-source-import-form] .account-source-paste-field textarea {
  min-height: 92px;
}
.quick-card[data-account-source-import-form] > button[type="submit"] {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.account-source-list-empty {
  padding: var(--space-3);
  color: var(--muted);
  text-align: center;
}
@media (max-width: 760px) {
  .quick-card[data-account-source-import-form] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .quick-card[data-account-source-import-form] .account-source-file-field,
  .quick-card[data-account-source-import-form] .account-source-file-status,
  .quick-card[data-account-source-import-form] .account-source-paste-field,
  .quick-card[data-account-source-import-form] > button[type="submit"] {
    grid-column: 1;
    grid-row: auto;
  }
  .account-source-filter-row {
    grid-template-columns: 1fr;
  }
  .account-source-filter-count {
    justify-self: start;
  }
}
.account-source-item-actions,
.account-source-status-form {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}
.account-source-item-actions {
  justify-content: flex-start;
  overflow: hidden;
}
.account-source-failure-reason {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--font-size-xs);
}
.account-source-status-form {
  flex: 0 0 auto;
}
.account-source-status-form select {
  min-width: var(--account-source-status-control-min);
  min-height: var(--control-height-sm);
}
.account-source-status-form .form-status:empty {
  display: none;
}
.email-mini-card {
  justify-self: stretch;
  min-width: 0;
}
.email-mini-card summary {
  cursor: pointer;
  color: var(--color-auto-063-042510);
  font-size: 12px;
  font-weight: 800;
  list-style-position: inside;
  white-space: nowrap;
  text-align: center;
}
.email-mini-card pre {
  position: absolute;
  z-index: 10;
  right: 42px;
  width: min(720px, calc(100vw - 380px));
  max-height: 160px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: 10px;
  background: var(--color-auto-002-d14f90);
  color: var(--color-auto-048-ce3983);
  box-shadow: 0 12px 28px var(--color-auto-092-376ac9);
  white-space: pre-wrap;
  word-break: break-all;
}
.email-otp-result {
  grid-column: 1 / -1;
  display: none;
  min-height: 26px;
  padding: 4px 0 2px;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
  font-weight: 760;
}
.email-otp-result:not(:empty) {
  display: block;
}
.email-otp-result.success {
  color: var(--color-auto-093-2e8cbc);
}
.email-otp-result.error {
  color: var(--color-auto-094-fdb6b8);
}
.email-mini-empty {
  padding: 10px 0 2px;
  color: var(--color-auto-031-61afa1);
  font-size: 13px;
  font-weight: 720;
}
.status-pill.muted {
  background: var(--color-auto-095-b50837);
  color: var(--color-auto-031-61afa1);
}
.config-panel .config-list:empty::before {
  content: "暂无配置";
  display: block;
  padding: 10px;
  border: 1px dashed var(--color-auto-066-307c8e);
  border-radius: 10px;
  color: var(--color-auto-031-61afa1);
  font-size: 12px;
}
@media (max-width: 1180px) {
  .account-toolbar {
    grid-template-columns: 1fr;
  }
  .account-toolbar .account-export-form {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .account-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
  .compact-fields,
  .email-inline-head,
  .lqqq-filter-row,
  .domain-mode-grid {
    grid-template-columns: 1fr;
  }
  [data-email-provider="lqqq"] .lqqq-filter-row {
    grid-template-columns: 1fr;
  }
  .email-upload-strip {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .email-mini-row {
    grid-template-columns: 1fr auto;
  }
  .email-mini-row > span:not(.status-pill) {
    grid-column: 1 / -1;
  }
  .email-mini-card {
    justify-self: start;
  }
  .email-mini-card pre {
    right: 16px;
    left: 16px;
    width: auto;
  }
}
.account-status-select {
  width: auto;
  min-width: 88px;
  min-height: 34px;
  padding: 7px 28px 7px 10px;
  border-radius: 10px;
  border-color: var(--color-auto-087-31b6fa);
  background-color: var(--color-auto-002-d14f90);
  color: var(--color-auto-063-042510);
  font-size: 12px;
  font-weight: 760;
}
.account-email-copy { color: var(--color-auto-011-75f6a5); }
.email-page .header-actions .button:active,
.email-row-actions button:active,
.email-row-actions .button-link:active,
.email-title-line .email-address:active {
  transform: translateY(1px);
  filter: brightness(.96);
}
.config-topline h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.06em;
}
.config-topline {
  margin-bottom: 12px;
}
.config-tab {
  background: var(--color-auto-002-d14f90);
}
.config-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.payment-profile-form [hidden] { display: none !important; }

/* compact LQQQ inventory rows */
.email-channel-shell { max-width: none; }
.email-channel-panel { gap: 12px; padding: 14px 16px; }
.email-upload-strip {
  grid-template-columns: auto minmax(220px, 520px) auto minmax(0, 1fr);
  max-width: none;
}
.email-upload-strip .form-status { grid-column: auto; min-height: 0; }
.lqqq-filter-row {
  grid-template-columns: minmax(280px, 520px) minmax(120px, 150px) auto;
  justify-content: space-between;
  gap: 16px;
}
[data-email-provider="lqqq"] .lqqq-filter-row {
  grid-template-columns: minmax(280px, 520px) minmax(120px, 150px) minmax(120px, 150px) auto;
}
.email-mini-list { max-height: 520px; }
.email-mini-head,
.email-mini-row {
  grid-template-columns: minmax(300px, 1.35fr) 96px minmax(150px, .5fr) minmax(460px, 1fr);
  align-items: center;
  min-width: 1080px;
}
.email-mini-row {
  position: relative;
  min-height: 48px;
}
.email-mini-row .button-link,
.email-mini-row a.button-link {
  min-height: 30px;
  padding: 5px 8px;
  white-space: nowrap;
}
.email-mini-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.email-mini-actions .button-link,
.email-mini-actions a.button-link {
  flex: 0 0 auto;
}
.email-otp-result {
  grid-column: auto;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-otp-result:empty::before { content: ""; }
@media (max-width: 1180px) {
  .email-upload-strip { grid-template-columns: 1fr; }
  .email-upload-strip .form-status { grid-column: 1 / -1; }
  .email-text-import { grid-template-columns: 1fr; }
  .email-mini-head { display: grid; }
  .email-mini-row { align-items: center; }
  .email-otp-result { grid-column: auto; white-space: nowrap; }
}

/* proxy config: compact rows with saved exit info */
.quick-proxy-form { grid-template-columns: minmax(300px, 1fr) 130px minmax(180px, .55fr) auto; }
.proxy-list { gap: 7px; }
.config-list article.proxy-list-row,
.proxy-list-row {
  grid-template-columns: minmax(180px, .32fr) minmax(260px, 1fr) auto;
  min-height: 46px;
}
.proxy-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.proxy-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxy-detail-line { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--color-auto-031-61afa1); font-size: 12px; }
.proxy-detail-line .proxy-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-auto-031-61afa1); }
.proxy-inline-form { grid-template-columns: minmax(220px, .7fr) 120px minmax(300px, 1fr) auto; margin: -2px 0 8px; }
.proxy-inline-form .form-status { grid-column: 1 / -1; }
.proxy-config-actions {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto;
  align-items: center;
}
.proxy-config-actions select,
.local-proxy-copy-control select {
  min-height: var(--control-height-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-xs);
}
.proxy-config-actions .form-status {
  grid-column: 1 / -1;
  min-height: 0;
}
@media (max-width: 1180px) {
  .config-list article.proxy-list-row, .proxy-list-row, .proxy-inline-form { grid-template-columns: 1fr; }
  .proxy-detail-line { flex-wrap: wrap; }
}

/* local VLESS / AnyTLS converter */
.proxy-tools-page .panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height-sm);
  color: var(--muted);
  font-size: var(--font-size-xs);
}
.proxy-tools-page .panel-toolbar .button { margin-left: auto; }
.local-proxy-form {
  grid-template-columns: minmax(180px, .35fr) minmax(360px, 1fr) auto auto;
}
.local-proxy-node-field { min-width: 0; }
.local-proxy-list article.local-proxy-row {
  grid-template-columns: minmax(210px, .36fr) minmax(360px, 1fr) auto;
  align-items: center;
}
.local-proxy-name,
.local-proxy-addresses > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.local-proxy-name { flex-wrap: wrap; }
.local-proxy-addresses {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.local-proxy-addresses .local-proxy-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.local-proxy-addresses .button {
  min-height: var(--control-height-sm);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.local-proxy-addresses .local-proxy-copy-control { justify-content: flex-end; }
.config-list article .local-proxy-error {
  color: var(--danger);
  font-size: var(--font-size-xs);
  word-break: break-word;
}
.local-proxy-actions { flex-wrap: wrap; }
.local-proxy-actions select {
  min-height: var(--control-height-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-xs);
}
.local-proxy-actions .form-status {
  flex-basis: 100%;
  min-height: 0;
}
.local-proxy-page .header-actions .button:active,
.local-proxy-page .local-proxy-form button:active,
.local-proxy-page .local-proxy-addresses .button:active,
.local-proxy-page .local-proxy-actions button:active {
  transform: translateY(1px);
}
@media (max-width: 1180px) {
  .local-proxy-form { grid-template-columns: minmax(180px, .35fr) minmax(300px, 1fr); }
  .local-proxy-list article.local-proxy-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .proxy-tools-page .panel-toolbar { align-items: flex-start; flex-direction: column; }
  .proxy-tools-page .panel-toolbar .button { margin-left: 0; }
  .local-proxy-form { grid-template-columns: 1fr; }
  .local-proxy-addresses > div { align-items: stretch; flex-direction: column; }
  .local-proxy-addresses .local-proxy-url { white-space: normal; word-break: break-all; }
}

.status-debug { background: var(--color-auto-012-11f94f); color: var(--color-auto-096-08d051); }
.debug-log-detail { margin-top: 10px; }
.debug-log-detail summary { cursor: pointer; color: var(--muted); font-weight: 800; font-size: 13px; }
.debug-log-detail pre { margin: 8px 0 0; max-height: 220px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--color-auto-097-3de0ed); color: var(--color-auto-022-c769e3); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

.account-search-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}
.icon-button {
  width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
}
.account-add-backdrop {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: var(--color-auto-098-b001a3);
}
.account-add-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 35;
  width: min(520px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--color-auto-002-d14f90);
  box-shadow: var(--shadow-md);
}
.account-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.account-add-head strong {
  font-size: 18px;
  letter-spacing: -.02em;
}
.account-add-fields {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: 10px;
}
.account-add-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.account-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.account-add-actions .form-status {
  min-width: 0;
  flex: 1;
}
@media (max-width: 720px) {
  .account-search-wrap,
  .account-add-fields,
  .account-add-actions {
    grid-template-columns: 1fr;
  }
  .icon-button { width: 100%; }
  .account-add-actions { align-items: stretch; }
}

/* SMS verification settings */
.sms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 10px;
  align-items: start;
}
.sms-config-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-auto-088-069d90);
  box-shadow: var(--shadow-sm);
}
.sms-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sms-card-head strong { font-size: 15px; letter-spacing: -.02em; }
.sms-card-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.sms-provider-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  align-items: end;
}
.sms-provider-grid label,
.sms-edit-form label,
.sms-pool-form label {
  display: grid;
  gap: 4px;
  color: var(--color-auto-072-333c0f);
  font-size: 11px;
  font-weight: 820;
}
.sms-provider-grid input,
.sms-provider-grid select,
.sms-edit-form input,
.sms-edit-form select,
.sms-pool-form input,
.sms-pool-form textarea,
.sms-stage-row input,
.sms-stage-row select {
  min-height: 38px;
  border-radius: 10px;
  font-size: 13px;
}
.sms-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sms-card-actions button,
.sms-stage-row button,
.sms-pool-form button,
.sms-row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--color-auto-002-d14f90);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.sms-card-actions button[type="submit"],
.sms-stage-row button[type="submit"],
.sms-pool-form button[type="submit"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--color-auto-002-d14f90);
}
.sms-stage-card { gap: 8px; }
.sms-stage-list { display: grid; gap: 7px; }
.sms-stage-row {
  display: grid;
  grid-template-columns: 72px minmax(130px, 1fr) repeat(5, 58px) auto minmax(76px, .45fr);
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-soft);
}
.sms-stage-row strong { font-size: 13px; }
.sms-stage-row .form-status { min-height: 22px; font-size: 12px; }
.sms-config-list {
  display: grid;
  gap: 7px;
}
.sms-config-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--color-auto-002-d14f90);
}
.sms-config-row strong { display: block; font-size: 14px; }
.sms-config-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; word-break: break-all; }
.sms-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.sms-row-actions button:last-child { color: var(--danger); background: var(--danger-soft); border-color: var(--color-auto-010-56a172); }
.sms-pool-form,
.sms-edit-form {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto minmax(110px, .4fr);
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-soft);
}
.sms-pool-form .wide-field { grid-column: span 2; }
.sms-pool-form textarea { min-height: 82px; }
.sms-edit-form {
  grid-template-columns: repeat(5, minmax(110px, 1fr)) auto minmax(110px, .45fr);
}
.sms-edit-form .form-status,
.sms-pool-form .form-status { min-height: 22px; }
@media (max-width: 1180px) {
  .sms-layout,
  .sms-provider-grid,
  .sms-stage-row,
  .sms-pool-form,
  .sms-edit-form { grid-template-columns: 1fr; }
  .sms-pool-form .wide-field { grid-column: auto; }
  .sms-config-row { grid-template-columns: 1fr; }
  .sms-row-actions { justify-content: flex-start; }
}

/* task template page */
.execution-template-page {
  --execution-bg: var(--color-auto-088-069d90);
  --execution-bg-soft: var(--color-auto-081-499668);
  --execution-line: var(--color-auto-066-307c8e);
  --execution-line-soft: var(--color-auto-078-91315e);
  --execution-ink: var(--color-auto-048-ce3983);
  --execution-muted: var(--color-auto-031-61afa1);
  --execution-faint: var(--color-auto-068-bd4331);
}

.execution-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  align-items: end;
}

.execution-hero-copy h1 {
  max-width: 820px;
  margin: 0;
  color: var(--execution-ink);
  font: 780 26px/1.08 -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: -.04em;
}

.execution-hero-copy span,
.execution-hero-copy p {
  display: block;
  margin: 6px 0 0;
  color: var(--execution-muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.execution-page-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--execution-line);
  border-radius: var(--radius-md);
  background: var(--execution-bg);
  box-shadow: var(--shadow-sm);
}

.execution-page-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--execution-bg-soft);
  color: var(--execution-muted);
  font-size: 12px;
  font-weight: 820;
}

.execution-page-metrics strong {
  color: var(--execution-ink);
  font: 850 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.04em;
}

.execution-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--execution-line);
  border-radius: var(--radius-md);
  background: var(--execution-bg);
  box-shadow: var(--shadow-sm);
}

.execution-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.execution-section-head--inline {
  align-items: center;
}

.execution-section-head h2 {
  margin: 0;
  color: var(--execution-ink);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.execution-section-head span {
  display: block;
  margin-top: 3px;
  color: var(--execution-muted);
  font-size: 12px;
  font-weight: 760;
}

.execution-light-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--execution-line);
  border-radius: var(--radius-xs);
  background: var(--execution-bg-soft);
  color: var(--execution-ink);
  font-size: 12px;
  font-weight: 820;
  text-decoration: none;
}

.execution-light-link:hover {
  transform: translateY(-1px);
}

.execution-light-link:active {
  transform: translateY(0);
}

.execution-light-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.execution-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.execution-template-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--execution-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-auto-002-d14f90);
}

.execution-template-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.execution-template-card-head strong {
  display: block;
  overflow: hidden;
  color: var(--execution-ink);
  font-size: 15px;
  font-weight: 860;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-method-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--execution-line);
  border-radius: 999px;
  background: var(--execution-bg-soft);
  color: var(--execution-ink);
  font-size: 11px;
  font-weight: 860;
  white-space: nowrap;
}

.execution-template-card[data-method="credit_card"] .execution-method-badge {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.execution-template-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.execution-template-facts div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--execution-line-soft);
  border-radius: var(--radius-xs);
  background: var(--execution-bg-soft);
}

.execution-template-facts span,
.execution-template-facts i {
  display: block;
  overflow: hidden;
  color: var(--execution-muted);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-template-facts b {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--execution-ink);
  font-size: 13px;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-template-facts i {
  display: block;
  margin-top: 2px;
  color: var(--execution-faint);
  font-size: 10px;
  font-style: normal;
}

.execution-proxy-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.execution-proxy-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--execution-line-soft);
  border-radius: 999px;
  background: var(--execution-bg-soft);
  color: var(--execution-ink);
  font-size: 12px;
  font-weight: 780;
}

.execution-proxy-strip em {
  color: var(--execution-muted);
  font-style: normal;
}

.execution-proxy-strip i {
  color: var(--execution-faint);
  font-size: 11px;
  font-style: normal;
}

.execution-template-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--execution-line-soft);
  color: var(--execution-muted);
  font-size: 12px;
  font-weight: 760;
}

.execution-template-foot code {
  overflow: hidden;
  max-width: 48%;
  color: var(--execution-faint);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-account-list,
.execution-record-list {
  display: grid;
  gap: 8px;
}

.execution-account-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--execution-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-auto-002-d14f90);
}

.execution-account-no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--execution-bg-soft);
  color: var(--execution-ink);
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--execution-line);
}

.execution-account-body {
  min-width: 0;
}

.execution-account-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.execution-account-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--execution-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-account-body p {
  margin: 5px 0 0;
  color: var(--execution-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.execution-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  color: var(--execution-faint);
  font-size: 12px;
  font-weight: 750;
}

.execution-account-meta b {
  color: var(--warning);
}

.execution-account-row .status-pill,
.execution-record-row .status-pill {
  flex: 0 0 auto;
  border: 1px solid var(--execution-line);
  background: var(--execution-bg-soft);
  color: var(--execution-ink);
}

.execution-account-row[data-tone="warning"] .status-pill {
  border-color: var(--warning-soft);
  background: var(--warning-soft);
  color: var(--warning);
}

.execution-account-row[data-tone="danger"] .status-pill {
  border-color: var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger);
}

.execution-account-row[data-tone="success"] .status-pill {
  border-color: var(--success-soft);
  background: var(--success-soft);
  color: var(--success);
}

.execution-empty-state {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px dashed var(--execution-line);
  border-radius: var(--radius-sm);
  background: var(--execution-bg-soft);
  color: var(--execution-muted);
}

.execution-empty-state strong {
  color: var(--execution-ink);
  font-size: 14px;
}

.execution-empty-state span {
  font-size: 13px;
}

.execution-record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px auto minmax(120px, .35fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--execution-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-auto-002-d14f90);
}

.execution-record-main {
  min-width: 0;
}

.execution-record-main strong {
  display: block;
  overflow: hidden;
  color: var(--execution-ink);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-record-main > span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--execution-muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.execution-record-tags em {
  display: inline-flex;
  max-width: 220px;
  min-height: 22px;
  align-items: center;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--execution-bg-soft);
  color: var(--execution-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-record-progress {
  display: grid;
  gap: 2px;
  color: var(--execution-muted);
  font-size: 11px;
  font-weight: 780;
  text-align: right;
}

.execution-record-progress b {
  color: var(--execution-ink);
  font: 850 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.execution-record-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  color: var(--execution-muted);
  font-size: 12px;
  font-weight: 760;
}

@media (max-width: 1100px) {
  .execution-hero {
    grid-template-columns: 1fr;
  }
  .execution-page-metrics {
    max-width: 420px;
  }
  .execution-template-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .execution-record-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .execution-record-progress,
  .execution-record-detail {
    text-align: left;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .execution-page-metrics,
  .execution-template-grid,
  .execution-template-facts,
  .execution-record-row,
  .execution-account-row {
    grid-template-columns: 1fr;
  }
  .execution-template-card-head,
  .execution-template-foot,
  .execution-account-title {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }
  .execution-account-title {
    flex-direction: column;
  }
  .execution-template-foot code {
    max-width: 100%;
  }
}


.mailbox-header .header-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mailbox-header p { margin-top: 6px; color: var(--muted); }
.mailbox-workbench { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.mailbox-inventory,
.mailbox-inbox { background: var(--color-auto-006-0fe0e3); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.mailbox-inventory { max-height: calc(100vh - 190px); overflow: auto; }
.mailbox-inbox { min-height: 360px; padding-bottom: 8px; }
.mailbox-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.mailbox-panel-title strong { font-size: 14px; letter-spacing: -.01em; }
.mailbox-panel-title span { color: var(--muted); font-size: 12px; font-weight: 700; }
.mailbox-account-list { display: grid; padding: 6px; }
.mailbox-account-link { display: grid; gap: 3px; padding: 10px 10px; border-radius: var(--radius-xs); color: var(--text); text-decoration: none; border: 1px solid transparent; }
.mailbox-account-link:hover { background: var(--surface-soft); border-color: var(--line-soft); }
.mailbox-account-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mailbox-account-link.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); }
.mailbox-account-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.mailbox-account-status { color: var(--muted); font-size: 12px; font-weight: 700; }
.mailbox-mail-list { display: grid; }
.mailbox-mail-row { border-bottom: 1px solid var(--line-soft); }
.mailbox-mail-row:last-child { border-bottom: 0; }
.mailbox-mail-row summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 14px; cursor: pointer; list-style: none; }
.mailbox-mail-row summary::-webkit-details-marker { display: none; }
.mailbox-mail-row summary:hover { background: var(--surface-soft); }
.mailbox-mail-row summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.mailbox-mail-main { display: grid; gap: 4px; min-width: 0; }
.mailbox-mail-main b { color: var(--text); font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-mail-sender { color: var(--muted); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-mail-excerpt { color: var(--color-auto-015-b36634); font-size: 13px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-mail-row time { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mailbox-mail-body { display: grid; gap: 8px; padding: 0 14px 14px 14px; }
.mailbox-mail-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mailbox-mail-id { color: var(--muted); font-size: 12px; }
.mailbox-mail-body p { margin: 0; color: var(--text); line-height: 1.65; word-break: break-word; }
.mailbox-code-copy { min-height: var(--control-height-sm); }
.mailbox-error { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.graph-mailbox-tool { max-width: 1080px; }
.graph-mailbox-tool .page-header { margin-bottom: 0; }
.graph-mailbox-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.graph-mailbox-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 750; }
.graph-mailbox-form textarea { width: 100%; min-height: 112px; resize: vertical; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-soft); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; }
.graph-mailbox-form textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--primary); }
.graph-mailbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.graph-mailbox-results { min-height: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.graph-mailbox-results .empty-state { margin: 14px; }
@media (max-width: 980px) {
  .mailbox-workbench { grid-template-columns: 1fr; }
  .mailbox-inventory { max-height: 260px; }
  .mailbox-header .header-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .mailbox-mail-row summary { grid-template-columns: 1fr; }
  .mailbox-mail-meta { align-items: flex-start; flex-direction: column; }
  .graph-mailbox-actions { align-items: stretch; flex-direction: column; }
  .graph-mailbox-actions .button { width: 100%; }
}

.task-template-config-panel {
  gap: 10px;
}
.task-template-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-auto-070-0aad90);
  border-radius: var(--radius-md);
  background: var(--color-auto-071-04322c);
  box-shadow: var(--shadow-sm);
}
.task-template-editor-inline {
  margin: -2px 0 8px;
  background: var(--color-auto-081-499668);
}
.task-template-editor[hidden] {
  display: none !important;
}
.task-template-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto);
  gap: 10px;
  align-items: center;
}
.task-template-editor-head strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 840;
  letter-spacing: -.02em;
}
.task-template-editor-head span:not(.form-status) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.task-template-editor-head .form-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.task-template-fields {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(5, minmax(140px, 1fr));
  gap: 8px;
  align-items: end;
}
.task-template-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--color-auto-072-333c0f);
  font-size: 11px;
  font-weight: 820;
}
.task-template-fields input,
.task-template-fields select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--color-auto-066-307c8e);
  border-radius: var(--radius-xs);
  background: var(--color-auto-002-d14f90);
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
}
.task-template-name {
  grid-column: span 2;
}
.task-template-check {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  color: var(--color-auto-048-ce3983);
  font-size: 13px;
  font-weight: 760;
}
.task-template-fields .task-template-check {
  display: inline-flex;
}
.sepa-generated-note {
  grid-column: span 2;
  align-self: center;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--color-auto-048-ce3983);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}
.task-template-check input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--primary);
}
.task-template-check span {
  white-space: nowrap;
}
.task-template-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.task-template-list-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 840;
}
.task-template-list-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.task-template-row {
  grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr) auto;
  align-items: center;
}
.task-template-main {
  min-width: 0;
}
.task-template-main strong,
.task-template-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-template-main span {
  margin-top: 3px;
}
.task-template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.task-template-tags em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-lg);
  background: var(--color-auto-074-b2683d);
  color: var(--color-auto-031-61afa1);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
}
.task-template-tags .task-template-tag-warn {
  background: var(--warning-soft);
  color: var(--warning);
}
.task-template-empty {
  padding: 14px;
  border: 1px dashed var(--color-auto-078-91315e);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
}
@media (max-width: 1280px) {
  .task-template-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-template-name { grid-column: span 2; }
}
@media (max-width: 760px) {
  .task-template-editor-head,
  .task-template-fields,
  .task-template-row { grid-template-columns: 1fr; }
  .task-template-name { grid-column: auto; }
  .sepa-generated-note { grid-column: auto; }
  .task-template-editor-head {
    align-items: stretch;
  }
  .task-template-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


.session-token-tool {
  grid-template-columns: minmax(320px, 1.2fr) minmax(180px, .55fr) minmax(180px, .55fr) minmax(140px, .4fr);
}
.session-token-tool textarea[readonly] {
  min-height: 70px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.session-token-tool-actions,
.session-token-result,
.session-token-result-actions {
  grid-column: 1 / -1;
}
.session-token-tool-actions,
.session-token-result-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.session-token-result {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.session-token-result[hidden] { display: none !important; }
.session-token-result-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.session-token-result label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.session-token-upgrade-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.session-token-account-info {
  display: grid;
  gap: 10px;
}
.session-token-info-section {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.session-token-info-section h4 {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--text);
}
.session-token-info-row {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
}
.session-token-info-row > span {
  color: var(--muted);
}
.session-token-info-row > strong {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  word-break: break-word;
}
.session-token-info-row > small {
  grid-column: 2;
  color: var(--muted);
}
.session-token-info-raw {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.session-token-info-raw summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}
.session-token-info-raw pre {
  max-height: 280px;
  overflow: auto;
  margin: 10px 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

.account-json-tool {
  grid-template-columns: minmax(0, 1fr);
}
.account-json-tool-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  grid-column: 1 / -1;
}
.account-json-tool-heading strong {
  color: var(--text);
  font-size: 14px;
}
.account-json-tool-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.account-json-file-button {
  flex: 0 0 auto;
}
.account-json-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.account-json-tool textarea {
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  word-break: break-word;
}
.account-json-tool-actions,
.account-json-summary,
.account-json-account-list,
.account-json-result {
  grid-column: 1 / -1;
}
.account-json-tool-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.account-json-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.account-json-warning {
  color: var(--warning, #9a6700);
}
.account-json-account-list {
  display: grid;
  gap: 6px;
  max-height: 330px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.account-json-account-list[hidden],
.account-json-result[hidden],
.account-json-summary[hidden] {
  display: none !important;
}
.account-json-account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, .5fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.account-json-account-row:hover,
.account-json-account-row:has(input:checked) {
  border-color: var(--line);
  background: var(--surface);
}
.account-json-account-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.account-json-account-main strong,
.account-json-account-main small,
.account-json-account-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-json-account-main strong {
  color: var(--text);
  font-size: 13px;
}
.account-json-account-main small,
.account-json-account-id {
  color: var(--muted);
  font-size: 11px;
}
.account-json-account-id {
  text-align: right;
}
.account-json-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
}
.account-json-result {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.account-json-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.account-json-result-heading strong {
  color: var(--text);
}
.account-json-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.account-json-result-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.account-json-result-grid span {
  color: var(--muted);
  font-size: 11px;
}
.account-json-result-grid strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
}
.account-json-quota-list {
  display: grid;
  gap: 6px;
}
.account-json-quota-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}
.account-json-quota-row strong {
  color: var(--text);
  font-size: 12px;
}
.account-json-workspaces {
  display: grid;
  gap: 8px;
}
.account-json-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.account-json-section-heading strong {
  color: var(--text);
  font-size: 13px;
}
.account-json-workspace-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
}
.account-json-workspace-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.account-json-workspace-tab::after {
  content: attr(data-status-label);
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.account-json-workspace-tab.is-active::after {
  color: var(--success, #167c3a);
  background: color-mix(in srgb, var(--success, #167c3a) 12%, transparent);
}
.account-json-workspace-tab.is-disabled::after,
.account-json-workspace-tab.is-expired::after {
  color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
}
.account-json-workspace-tab.is-unknown::after {
  color: var(--muted);
  background: var(--surface-soft);
}
.account-json-workspace-tab:hover {
  border-color: var(--line);
  color: var(--text);
}
.account-json-workspace-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}
.account-json-workspace-tab.is-selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--surface-soft);
  color: var(--text);
}
.account-json-workspace-tab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}
.account-json-workspace-panels {
  min-width: 0;
}
.account-json-workspace-panels [hidden] {
  display: none !important;
}
.account-json-workspace-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.account-json-workspace-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.account-json-workspace-card > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.account-json-workspace-card header strong,
.account-json-workspace-card header small {
  overflow-wrap: anywhere;
}
.account-json-workspace-card header strong {
  color: var(--text);
  font-size: 13px;
}
.account-json-workspace-card header small {
  color: var(--muted);
  font-size: 11px;
}
.account-json-workspace-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.account-json-workspace-status.is-active {
  color: var(--success, #167c3a);
  background: color-mix(in srgb, var(--success, #167c3a) 12%, transparent);
}
.account-json-workspace-status.is-disabled {
  color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
}
.account-json-workspace-status.is-expired {
  color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
}
.account-json-workspace-status.is-unknown {
  color: var(--muted);
  background: var(--surface-soft);
}
@media (max-width: 760px) {
  .account-json-tool-heading {
    display: grid;
  }
  .account-json-account-row,
  .account-json-result-grid {
    grid-template-columns: 1fr;
  }
  .account-json-account-row {
    align-items: start;
  }
  .account-json-account-id {
    text-align: left;
    white-space: normal;
  }
  .account-json-workspace-card > header {
    display: grid;
  }
  .account-json-workspace-tab {
    min-width: 132px;
    max-width: 220px;
  }
  .account-json-workspace-status {
    justify-self: start;
  }
}

.redeem-cdks-page { gap: 14px; }
.redeem-cdk-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 4px 0 2px; }
.redeem-cdk-eyebrow { display: inline-flex; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.redeem-cdk-hero h1 { margin: 0; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.redeem-cdk-hero p { margin: 6px 0 0; max-width: 680px; color: var(--muted); line-height: 1.55; }
.redeem-cdk-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.redeem-cdk-top-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 12px; align-items: stretch; }
.redeem-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.redeem-panel form { display: grid; gap: 10px; }
.redeem-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.redeem-panel-head strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.redeem-panel-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 650; }
.redeem-lookup-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.redeem-lookup-card form { display: grid; gap: 10px; }
.redeem-lookup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.redeem-lookup-head strong { display: block; font-size: 15px; }
.redeem-lookup-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 650; }
.redeem-panel textarea, .redeem-lookup-card textarea { width: 100%; min-height: 108px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.redeem-panel textarea:focus, .redeem-lookup-card textarea:focus, .redeem-cdk-manager-grid input:focus, .redeem-cdk-manager-grid select:focus, .redeem-cdk-filter-form input:focus, .redeem-cdk-filter-form select:focus, .redeem-cdk-split-form input:focus, .redeem-cdk-bulk-form input:focus, .redeem-cdk-bulk-form select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 1px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.redeem-lookup-result-meta { color: var(--muted); font-size: 12px; font-weight: 700; }
.redeem-lookup-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.redeem-lookup-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
.redeem-lookup-table th, .redeem-lookup-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.redeem-lookup-table th { background: var(--surface-soft); color: var(--muted); font-size: 12px; white-space: nowrap; }
.redeem-lookup-table tr:last-child td { border-bottom: 0; }
.redeem-lookup-table tbody tr:hover { background: color-mix(in srgb, var(--surface-soft) 70%, transparent); }
.redeem-lookup-table .is-empty td { color: var(--muted); }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.redeem-cdk-manager-grid { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px; align-items: start; }
.redeem-cdk-manager-grid label, .redeem-cdk-filter-form label, .redeem-cdk-split-form label, .redeem-cdk-bulk-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.redeem-cdk-manager-grid input, .redeem-cdk-manager-grid select, .redeem-cdk-manager-grid textarea, .redeem-cdk-filter-form input, .redeem-cdk-filter-form select, .redeem-cdk-split-form input, .redeem-cdk-bulk-form input, .redeem-cdk-bulk-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text); }
.redeem-cdk-manager-grid textarea { grid-column: 1 / -1; }
.redeem-cdk-manager-textarea { grid-column: span 1; }
.redeem-panel .redeem-cdk-filter-form, .redeem-panel .redeem-cdk-split-form, .redeem-panel .redeem-cdk-bulk-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-soft); }
.redeem-panel .redeem-cdk-filter-form label, .redeem-panel .redeem-cdk-split-form label, .redeem-panel .redeem-cdk-bulk-form label { flex: 0 0 180px; min-width: 0; }
.redeem-panel .redeem-cdk-filter-form label:first-child { flex-basis: 130px; }
.redeem-panel .redeem-cdk-filter-form label:nth-child(3) { flex-basis: 140px; }
.redeem-cdk-time-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
.redeem-cdk-time-presets button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.redeem-cdk-time-presets button:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft)); color: var(--text); }
.redeem-cdk-time-presets button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.redeem-cdk-time-presets button:active { transform: translateY(1px); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); }
.redeem-cdk-time-presets button:focus { outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 1px; }
.redeem-panel .redeem-cdk-split-form .redeem-cdk-split-checkbox { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; }
.redeem-panel .redeem-cdk-split-form .redeem-cdk-split-checkbox input { width: 15px; height: 15px; accent-color: var(--accent); }
.redeem-panel .redeem-cdk-bulk-form label:first-child { flex-basis: 150px; }
.redeem-panel .redeem-cdk-filter-form .button, .redeem-panel .redeem-cdk-split-form .button, .redeem-panel .redeem-cdk-bulk-form .button { flex: 0 0 auto; min-height: 38px; }
.redeem-cdk-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.redeem-cdk-group-pill { display: inline-flex; align-items: center; min-height: 26px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 750; overflow: hidden; }
.redeem-cdk-group-pill:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft)); color: var(--text); }
.redeem-cdk-group-pill.is-active { border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft)); background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft)); color: var(--accent); }
.redeem-cdk-group-filter, .redeem-cdk-group-delete { min-height: 26px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.redeem-cdk-group-filter { padding: 4px 9px; }
.redeem-cdk-group-delete { width: 26px; padding: 0; border-left: 1px solid var(--line-soft); color: var(--muted); }
.redeem-cdk-group-delete:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.redeem-cdk-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.redeem-cdk-export-actions input { min-width: 110px; max-width: 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text); }
.redeem-cdk-export-actions input[type="number"] { max-width: 96px; }
.redeem-cdk-export-option { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 4px; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
.redeem-cdk-export-option input { min-width: 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.redeem-cdk-table-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; font-weight: 750; }
[data-redeem-cdk-selection-count] { color: var(--accent); }
.redeem-cdk-items-table { min-width: 1600px; }
.redeem-cdk-select-col { width: 96px; }
.redeem-cdk-index-col { width: 64px; }
.redeem-cdk-select-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.redeem-cdk-select-all input, [data-redeem-cdk-item-id] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.redeem-cdk-copy { padding: 0; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.redeem-cdk-copy:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.redeem-cdk-status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 800; }
.redeem-cdk-status.is-available { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 26%, var(--line-soft)); }
.redeem-cdk-status.is-claimed, .redeem-cdk-status.is-pending { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 26%, var(--line-soft)); }
.redeem-cdk-status.is-exported { color: var(--muted); background: var(--surface-soft); border-color: var(--line-soft); }
.redeem-cdk-status.is-used { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 26%, var(--line-soft)); }
.redeem-cdk-status.is-success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 26%, var(--line-soft)); }
.redeem-cdk-status.is-failed { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 26%, var(--line-soft)); }
@media (max-width: 980px) {
  .redeem-cdk-hero { align-items: flex-start; flex-direction: column; }
  .redeem-cdk-hero-actions { justify-content: flex-start; }
  .redeem-cdk-top-grid { grid-template-columns: 1fr; }
  .redeem-cdk-manager-grid { grid-template-columns: 1fr; }
  .redeem-panel .redeem-cdk-filter-form label, .redeem-panel .redeem-cdk-split-form label, .redeem-panel .redeem-cdk-bulk-form label { flex: 1 1 160px; }
}

/* Keep responsive shell rules last so later page-specific desktop styles cannot restore the sidebar column. */
@media (max-width: 1040px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .content { min-width: 0; }
}

@media (max-width: 720px) {
  .content { width: 100%; max-width: 100%; }
  .page, .wide-page, .page-stack, .page-stack > *, .form-card, .panel-card, .table-card, .settings-panel, .settings-panel > *, .quick-card { min-width: 0; max-width: 100%; }
  .email-upload-strip.credit-card-import-strip { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
  body .content :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
  body .sidebar button { min-height: 44px !important; }
  .mobile-nav-button, .mobile-theme-button { width: 44px; height: 44px; }
  .sidebar-mobile-heading button { width: 44px; height: 44px; }
  .account-search-line > :is(input, select, button),
  .log-filter-line > :is(input, select, button) { flex: 0 0 auto !important; width: 100%; min-width: 0; }
}

/* Tenant user administration */
.admin-users-page { max-width: 1120px; margin: 0 auto; }
.admin-user-create-panel, .admin-user-list-panel { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.admin-user-create-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.admin-user-create-form label, .admin-user-edit-form label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.admin-user-create-form .form-status { grid-column: 1 / -1; min-height: 0; }
.admin-user-list { display: grid; gap: 10px; }
.admin-user-card { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-soft); }
.admin-user-card.is-disabled { opacity: .72; }
.admin-user-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-user-card > header > div:first-child { display: grid; gap: 4px; min-width: 0; }
.admin-user-card > header strong, .admin-user-card > header span { overflow-wrap: anywhere; }
.admin-user-card > header strong { color: var(--text); font-size: 14px; }
.admin-user-card > header > div:first-child span { color: var(--muted); font-size: 12px; }
.admin-user-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.admin-user-edit-form { display: grid; grid-template-columns: minmax(180px, 1fr) 150px minmax(180px, 1fr) auto auto; gap: 10px; align-items: end; }
.admin-user-active { display: inline-flex !important; align-items: center; gap: 7px !important; min-height: 40px; padding: 0 4px; white-space: nowrap; }
.admin-user-active input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.admin-user-edit-form .form-status { grid-column: 1 / -1; min-height: 0; }
.admin-user-edit-form .form-status:empty { display: none; }
.admin-user-card > footer { color: var(--muted); font-size: 11px; }
@media (max-width: 980px) {
  .admin-user-create-form, .admin-user-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-create-form button, .admin-user-edit-form button { width: 100%; }
}
@media (max-width: 720px) {
  .admin-user-create-panel, .admin-user-list-panel { padding: 14px; }
  .admin-user-create-form, .admin-user-edit-form { grid-template-columns: minmax(0, 1fr); }
  .admin-user-card > header { display: grid; }
  .admin-user-badges { justify-content: flex-start; }
  .admin-user-active { min-height: 44px; }
}

/* ===== 侧边栏用户区 / 退出按钮（2026-09-09 亮色修复） ===== */
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px 4px;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted);
  min-height: 56px;
}
.sidebar-user > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.sidebar-user form {
  flex-shrink: 0;
}
.sidebar-user .button.ghost {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-xs, 8px);
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.sidebar-user .button.ghost:hover {
  border-color: var(--muted);
  background: var(--surface-soft);
}
html[data-theme="dark"] .sidebar-user .button.ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-soft);
}
html[data-theme="dark"] .sidebar-user .button.ghost:hover {
  border-color: var(--muted);
  background: var(--surface-strong);
}