/* ==========================================================================
   TG Console — theme v2 ("Quiet Console")
   Neutral surfaces, ink actions, a per-theme accent (warm umber, ink, light grey), continuous rounded corners,
   hairline borders instead of shadows, short ease-out motion.
   Pure presentation: no markup or behavior is changed.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
html[data-sp-theme][data-sp-theme] {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* radius scale: controls → cards → sheets → dialogs */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --sp-radius: var(--r-lg);
  --sp-radius-sm: var(--r-md);

  /* motion */
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-out-strong: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-enter: 320ms;

  --shadow-xs: 0 1px 1px rgba(15, 15, 20, .03);
  --shadow-sm: 0 1px 2px rgba(15, 15, 20, .04), 0 1px 1px rgba(15, 15, 20, .03);
  --shadow-md: 0 8px 24px -6px rgba(15, 15, 20, .10), 0 2px 6px rgba(15, 15, 20, .05);
  --shadow-lg: 0 24px 64px -12px rgba(15, 15, 20, .22), 0 4px 12px rgba(15, 15, 20, .06);
  --sp-shadow-sm: var(--shadow-sm);
  --sp-shadow-md: var(--shadow-md);

  --success: #17864f;
  --warning: #a8620a;
  --danger: #c9283a;
  --danger-soft: rgba(201, 40, 58, .08);
  --sp-success: var(--success);
  --sp-warning: var(--warning);
  --sp-danger: var(--danger);
}

/* 纯白 — flagship */
html[data-sp-theme="white"][data-sp-theme] {
  color-scheme: light;
  --canvas: #f4f4f6;
  --bg-base: #f4f4f6;
  --bg-subtle: #f4f4f6;
  --bg-elevated: #ffffff;
  --border-subtle: #e9e9ed;
  --sp-border-strong: #d8d8de;
  --text-primary: #0f0f13;
  --text-secondary: #5b5b66;
  --text-tertiary: #8c8c97;
  --brand: #3a3a42;
  --brand-text: #17171c;
  --brand-hover: #000000;
  --brand-soft: rgba(15, 15, 20, .06);
  --brand-action: #111114;
  --brand-action-hover: #2a2a30;
  --brand-action-text: #ffffff;
  --focus-ring: rgba(15, 15, 20, .20);
  --sp-overlay: rgba(12, 12, 18, .36);
  --hover: rgba(15, 15, 20, .045);
  --pressed: rgba(15, 15, 20, .08);
}

/* 暖纸 */
html[data-sp-theme="warm"][data-sp-theme] {
  color-scheme: light;
  --canvas: #f3f1ec;
  --bg-base: #f3f1ec;
  --bg-subtle: #f3f1ec;
  --bg-elevated: #fffffd;
  --border-subtle: #e8e5dd;
  --sp-border-strong: #d8d4c9;
  --text-primary: #1a1915;
  --text-secondary: #5f5b52;
  --text-tertiary: #8f8a7e;
  --brand: #7a6a58;
  --brand-text: #3f3427;
  --brand-hover: #2a2118;
  --brand-soft: rgba(70, 50, 25, .075);
  --brand-action: #1d1c18;
  --brand-action-hover: #34322c;
  --brand-action-text: #fffffd;
  --focus-ring: rgba(120, 95, 60, .30);
  --sp-overlay: rgba(26, 25, 21, .38);
  --hover: rgba(40, 34, 20, .05);
  --pressed: rgba(40, 34, 20, .09);
}

/* 曜黑 */
html[data-sp-theme="obsidian"][data-sp-theme] {
  color-scheme: dark;
  --canvas: #09090b;
  --bg-base: #09090b;
  --bg-subtle: #09090b;
  --bg-elevated: #111114;
  --border-subtle: #212127;
  --sp-border-strong: #33333b;
  --text-primary: #ededf0;
  --text-secondary: #a2a2ad;
  --text-tertiary: #6f6f7b;
  --brand: #c9c9d1;
  --brand-text: #e6e6ea;
  --brand-hover: #ffffff;
  --brand-soft: rgba(255, 255, 255, .08);
  --brand-action: #ededf0;
  --brand-action-hover: #ffffff;
  --brand-action-text: #0f0f13;
  --success: #3dd68c;
  --warning: #f0b44c;
  --danger: #ff6b78;
  --danger-soft: rgba(255, 107, 120, .12);
  --focus-ring: rgba(255, 255, 255, .28);
  --sp-overlay: rgba(0, 0, 0, .66);
  --hover: rgba(255, 255, 255, .055);
  --pressed: rgba(255, 255, 255, .09);
  --shadow-xs: 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* the legacy --sp-* family, derived from the tokens above */
html[data-sp-theme][data-sp-theme] {
  --sp-bg: var(--canvas);
  --sp-bg-elevated: var(--bg-elevated);
  --sp-bg-elevated-2: var(--bg-elevated);
  --sp-bg-muted: var(--hover);
  --sp-bg-card: var(--bg-elevated);
  --sp-surface: var(--bg-elevated);
  --sp-border: var(--border-subtle);
  --sp-card-edge: var(--border-subtle);
  --sp-text: var(--text-primary);
  --sp-text-muted: var(--text-secondary);
  --sp-muted: var(--text-secondary);
  --sp-accent: var(--brand-text);
  --sp-link: var(--brand-text);
  --sp-highlight: var(--brand-text);
  --sp-accent-soft: var(--brand-soft);
  --sp-highlight-soft: var(--brand-soft);
  --sp-button: var(--brand-action);
  --sp-button-hover: var(--brand-action-hover);
  --sp-button-text: var(--brand-action-text);
  --tg-card-bg: var(--bg-elevated);
  --sp-background-art: none;
  --sp-canvas-glow: transparent;
  --sp-canvas-glow-alt: transparent;
  --sp-canvas-line: transparent;
}

/* continuous ("squircle") corners where the browser supports them; bump the
   radii so the visual size stays the same as a circular corner */
@supports (corner-shape: squircle) {
  html[data-sp-theme][data-sp-theme] {
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
  }
  html[data-sp-theme] :is(button, input, select, textarea, aside, header, main, dialog, [role="dialog"], [role="menu"], [role="listbox"], .ui-card, .ui-panel, .sp73-card, .tg-manager-card, .tg-manager-button, .ui-select-trigger, .ui-input, .ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .ui-icon-btn, .ui-fab, .ui-list-row, .ui-brand-mark, [data-account-name]) {
    corner-shape: squircle;
  }
}

/* ---------- 2. Base ------------------------------------------------------ */
html[data-sp-theme] {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html[data-sp-theme] body {
  background: var(--canvas) !important;
  background-image: none !important;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-sp-theme] body::before,
html[data-sp-theme] body::after { display: none !important; }
html[data-sp-theme] ::selection { background: var(--brand-soft); color: inherit; }
html[data-sp-theme] :focus { outline: none; }
html[data-sp-theme] :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
html[data-sp-theme] button, html[data-sp-theme] a, html[data-sp-theme] [role="button"] { -webkit-tap-highlight-color: transparent; }

/* thin, quiet scrollbars */
/* Firefox only: engines that understand ::-webkit-scrollbar get the custom bar from the 1.0.84 block at the end of this file */
@supports not selector(::-webkit-scrollbar) {
  html[data-sp-theme] * { scrollbar-width: thin; scrollbar-color: var(--sp-border-strong) transparent; }
}
html[data-sp-theme] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-sp-theme] *::-webkit-scrollbar-thumb { background: var(--sp-border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html[data-sp-theme] *::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; border: 3px solid transparent; }

/* shell tone: the surface behind the sidebar is one step deeper than the sheet, and the sheet has a visible edge,
   so the menu column and the content read as two separate things */
html[data-sp-theme="warm"][data-sp-theme] {
  --shell: #ebe8e0;
  --sheet-edge: #dbd6c9;
  --sheet-shadow: 0 1px 2px rgba(40, 30, 10, .05), 0 12px 32px -16px rgba(50, 38, 14, .22);
}
html[data-sp-theme="white"][data-sp-theme] {
  --shell: #ececed;
  --sheet-edge: #dcdcdf;
  --sheet-shadow: 0 1px 2px rgba(15, 15, 20, .05), 0 12px 32px -16px rgba(15, 15, 20, .20);
}
html[data-sp-theme="obsidian"][data-sp-theme] {
  --shell: #050507;
  --sheet-edge: #2a2a32;
  --sheet-shadow: 0 0 0 transparent;
}

/* ---------- 3. App shell: canvas + sidebar + floating sheet -------------- */
html[data-sp-theme] aside.ui-sidebar {
  width: 232px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-sp-theme] aside.ui-sidebar > div:first-child {
  border: 0 !important;
  height: 60px;
  padding-inline: 18px;
}
html[data-sp-theme] .ui-brand-mark {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--brand-action) !important;
  color: var(--brand-action-text) !important;
  font-weight: 600;
  letter-spacing: 0;
}
html[data-sp-theme] aside.ui-sidebar > div:first-child [class*="tracking"] {
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--text-primary);
}
html[data-sp-theme] aside.ui-sidebar > div:first-child [class*="text-[10px]"] {
  font-size: 11px; color: var(--text-tertiary); letter-spacing: 0; margin-top: 1px;
}
html[data-sp-theme] aside.ui-sidebar nav { padding: 6px 10px 12px; gap: 1px; }
html[data-sp-theme] .sp-nav-group-label {
  padding: 16px 10px 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-tertiary);
}
html[data-sp-theme] aside.ui-sidebar nav a {
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm) !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] aside.ui-sidebar nav a > span { margin-left: 10px; font-size: 13.5px; font-weight: 500; }
html[data-sp-theme] aside.ui-sidebar nav a svg { width: 17px; height: 17px; stroke-width: 1.6; opacity: .85; transition: opacity var(--t-fast) var(--ease-out); }
html[data-sp-theme] aside.ui-sidebar nav a:hover:not(.ui-nav-active):not([aria-current="page"]) {
  background: var(--hover) !important;
  color: var(--text-primary) !important;
}
html[data-sp-theme] aside.ui-sidebar nav a.ui-nav-active,
html[data-sp-theme] aside.ui-sidebar nav a[aria-current="page"] {
  background: var(--pressed) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
html[data-sp-theme] aside.ui-sidebar nav a.ui-nav-active svg,
html[data-sp-theme] aside.ui-sidebar nav a[aria-current="page"] svg { opacity: 1; color: var(--brand); }
html[data-sp-theme] aside.ui-sidebar > div:last-child { border: 0 !important; padding: 8px 10px 12px; }

@media (min-width: 1024px) {
  html[data-sp-theme] main.flex-1 {
    margin: 8px 8px 8px 240px;
    padding-left: 0 !important;
    min-height: calc(100vh - 16px) !important;
    width: auto;
    max-width: none;
    background: var(--bg-elevated);
    border: 1px solid var(--sheet-edge, var(--border-subtle));
    border-radius: var(--r-xl);
    box-shadow: var(--sheet-shadow, var(--shadow-sm));
  }
}
html[data-sp-theme] header.ui-header-glass {
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
  backdrop-filter: saturate(1.4) blur(14px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  height: 56px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
html[data-sp-theme] header.ui-header-glass h1 {
  font-size: 14px !important; font-weight: 600; letter-spacing: -.005em; color: var(--text-primary);
}
html[data-sp-theme] .ui-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  background: transparent !important;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .ui-icon-btn:hover { background: var(--hover) !important; color: var(--text-primary); }
html[data-sp-theme] .ui-icon-btn:active { transform: scale(.94); background: var(--pressed) !important; }
html[data-sp-theme] .ui-content-shell { max-width: 1240px; }
html[data-sp-theme] main > div.flex-1 { padding-top: 24px; padding-bottom: 48px; }

/* ---------- 4. Controls -------------------------------------------------- */
html[data-sp-theme] :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .tg-manager-button, .sp73-refresh) {
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
html[data-sp-theme] :is(.ui-btn-primary, .sp73-refresh) {
  background: var(--brand-action) !important;
  color: var(--brand-action-text) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
html[data-sp-theme] :is(.ui-btn-primary, .sp73-refresh):hover { background: var(--brand-action-hover) !important; }
html[data-sp-theme] :is(.ui-btn-secondary, .tg-manager-button):not(.is-primary) {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--sp-border-strong) !important;
  box-shadow: none !important;
}
html[data-sp-theme] :is(.ui-btn-secondary, .tg-manager-button):not(.is-primary):hover { background: var(--hover) !important; }
html[data-sp-theme] :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .tg-manager-button, .sp73-refresh, .ui-icon-btn):active:not(:disabled) { transform: scale(.975); }
html[data-sp-theme] :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .tg-manager-button):disabled { opacity: .45; cursor: not-allowed; }
html[data-sp-theme] .ui-btn-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid transparent !important;
}
html[data-sp-theme] .ui-btn-danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent) !important; }
html[data-sp-theme] .ui-fab {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--brand-action) !important;
  color: var(--brand-action-text) !important;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base) var(--ease-out-strong), box-shadow var(--t-base) var(--ease-out);
}
html[data-sp-theme] .ui-fab:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
html[data-sp-theme] .ui-fab:active { transform: scale(.96); }

html[data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input[type="search"], input[type="text"], input[type="number"], input[type="password"], textarea) {
  min-height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--sp-border-strong);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 13px;
  box-shadow: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input, textarea):hover:not(:focus):not(:disabled) { border-color: var(--text-tertiary); }
html[data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input[type="search"], input[type="text"], input[type="number"], input[type="password"], textarea):focus,
html[data-sp-theme] .ui-select-trigger[aria-expanded="true"] {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none;
}
html[data-sp-theme] ::placeholder { color: var(--text-tertiary); opacity: 1; }
html[data-sp-theme] select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
html[data-sp-theme] input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; border-radius: 4px; }

/* segmented controls and filter chips */
html[data-sp-theme] .ui-segment-btn {
  border-radius: calc(var(--r-sm) - 2px);
  font-size: 12.5px; font-weight: 500;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
html[data-sp-theme] .ui-segment-btn-active {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
  box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-sm) !important;
}

/* ---------- 5. Surfaces -------------------------------------------------- */
html[data-sp-theme] :is(.ui-card, .ui-panel, .ui-form-section, .sp73-card, .tg-manager-card, .tg-manager-detail-card, .dm-card, [data-account-name]) {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
html[data-sp-theme] :is(.ui-card-hover, [data-account-name]):hover { border-color: var(--sp-border-strong) !important; box-shadow: var(--shadow-sm) !important; }
html[data-sp-theme] .ui-list-row { transition: background-color var(--t-fast) var(--ease-out); border-radius: var(--r-sm); }
html[data-sp-theme] .ui-list-row:hover { background: var(--hover); }

/* floating layers */
html[data-sp-theme] :is([role="dialog"], dialog, [role="menu"], [role="listbox"], .ui-dropdown, .tg-manager-dialog) {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
html[data-sp-theme] [role="dialog"], html[data-sp-theme] dialog { border-radius: var(--r-xl); }
html[data-sp-theme] .ui-select-option, html[data-sp-theme] .ui-dropdown-item { border-radius: var(--r-xs); transition: background-color var(--t-fast) var(--ease-out); }

/* ---------- 6. Motion ---------------------------------------------------- */
@keyframes v2-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v2-pop { from { opacity: 0; transform: scale(.975) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-sp-theme] .ui-content-shell > * { animation: v2-rise var(--t-enter) var(--ease-out-strong) both; }
html[data-sp-theme] :is([role="dialog"], dialog[open], [role="menu"], [role="listbox"]) { animation: v2-pop 200ms var(--ease-out-strong) both; }
html[data-sp-theme] dialog::backdrop { animation: v2-fade 200ms var(--ease-out) both; }
html[data-sp-theme] .ui-skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--hover) 25%, var(--pressed) 50%, var(--hover) 75%); background-size: 200% 100%; animation: v2-shimmer 1.4s linear infinite; }
@keyframes v2-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-sp-theme] *, html[data-sp-theme] *::before, html[data-sp-theme] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 7. Dashboard ------------------------------------------------- */
html[data-sp-theme] #tgsp-dashboard-r73 {
  --sp73-ink: var(--text-primary);
  --sp73-muted: var(--text-secondary);
  --sp73-text-soft: var(--text-tertiary);
  --sp73-line: var(--border-subtle);
  --sp73-surface: var(--bg-elevated);
  --sp73-soft: transparent;
  --sp73-hover: var(--hover);
  --sp73-shadow: none;
}
html[data-sp-theme] #tgsp-dashboard-r73 { max-width: none; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-hero { padding: 0 0 20px; border: 0; margin: 0; align-items: center; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-hero p { margin: 0; font-size: 13px; color: var(--text-secondary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-live {
  height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-live i { background: var(--warning); box-shadow: none; width: 6px; height: 6px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-refresh { height: 32px; border-radius: 999px; padding: 0 14px 0 12px; gap: 6px; font-size: 12.5px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-refresh svg { width: 14px; height: 14px; }

/* the four metrics become one hairline strip */
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-stat-grid {
  gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated);
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric {
  position: relative; display: block; min-height: 0; padding: 18px 22px 18px;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric + .sp73-metric::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--border-subtle); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric:hover { background: var(--hover) !important; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric-icon,
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric-arrow { display: none !important; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric-copy { display: flex; flex-direction: column; gap: 4px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric strong { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; color: var(--text-primary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric small { font-size: 12px; color: var(--text-tertiary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric--amber small { color: var(--warning); }

/* panels */
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-workspace-grid,
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-bottom-grid { gap: 16px; margin-top: 16px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel { padding: 18px 20px 12px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head { margin-bottom: 8px; min-height: 32px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head p { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 0; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head a,
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head .ui-link { font-size: 12.5px; font-weight: 500; color: var(--brand-text) !important; display: inline-flex; align-items: center; gap: 4px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-panel-head svg { width: 13px; height: 13px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-score {
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 500;
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-active-strip {
  grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; min-height: 0; padding: 4px 0 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0;
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-active-strip > span { font-size: 12px; color: var(--text-tertiary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-active-strip > strong { font-size: 20px; font-weight: 600; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-empty--run { background: transparent; border: 0; padding: 0; min-height: 0; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-empty--run > svg { color: var(--success); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-empty strong { font-size: 12.5px; font-weight: 500; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-empty span { font-size: 12px; color: var(--text-tertiary); }

html[data-sp-theme] #tgsp-dashboard-r73 .sp73-log-row,
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-hit-row,
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-schedule-row {
  border-top: 0; border-radius: var(--r-sm); padding: 9px 10px; margin: 0 -10px;
  transition: background-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-log-row { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-log-row strong { font-size: 13px; font-weight: 500; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-log-row small { font-size: 12px; color: var(--text-tertiary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-log-row time { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-status-dot { width: 6px; height: 6px; box-shadow: none !important; align-self: center; margin-top: 0; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-status-dot--success { background: var(--success); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-status-dot--error { background: var(--danger); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-row { min-height: 38px; border-top: 1px solid var(--border-subtle); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-row span { font-size: 12.5px; color: var(--text-secondary); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-row strong { font-size: 12.5px; font-weight: 500; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-dot { width: 6px; height: 6px; box-shadow: none !important; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-dot--good { background: var(--success); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-health-dot--warn { background: var(--warning); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-side-divider { display: none; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-side-quick { margin-top: 14px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-quick-label { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-quick-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-quick-grid a {
  min-height: 0; flex-direction: row; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle);
}
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-quick-grid a svg { width: 14px; height: 14px; }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-quick-grid a:hover { color: var(--text-primary); background: var(--hover); border-color: var(--sp-border-strong); }
html[data-sp-theme] #tgsp-dashboard-r73 .sp73-footer { color: var(--text-tertiary); font-size: 11.5px; border: 0; padding-top: 18px; }

/* ---------- 8. Accounts -------------------------------------------------- */
html[data-sp-theme] .tg-account-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html[data-sp-theme] .tg-account-tools :is(button, select) {
  height: 34px; min-height: 34px; padding: 0 13px;
  border-radius: var(--r-sm) !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--sp-border-strong) !important;
  color: var(--text-primary) !important;
  font-size: 13px; font-weight: 500; box-shadow: none !important;
}
html[data-sp-theme] .tg-account-tools select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important;
}
html[data-sp-theme] .tg-account-tools :is(button, select):hover { background-color: var(--hover) !important; }
html[data-sp-theme] .tg-account-tools button:last-child { color: var(--text-secondary) !important; border-color: transparent !important; background: transparent !important; }

html[data-sp-theme] [data-account-name] { padding: 18px 18px 14px !important; }
html[data-sp-theme] [data-account-name] [data-tg-part="identity"] .w-10 { width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--hover); }
html[data-sp-theme] [data-account-name] [data-tg-part="identity"] .text-sm { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
html[data-sp-theme] [data-account-name] [data-tg-part="identity"] .text-xs { font-family: var(--font-ui); color: var(--text-tertiary); }
html[data-sp-theme] .ui-badge { border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
html[data-sp-theme] .ui-badge-success { background: color-mix(in srgb, var(--success) 10%, transparent) !important; color: var(--success) !important; border: 0 !important; }
html[data-sp-theme] .ui-badge-error { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; color: var(--danger) !important; border: 0 !important; }
html[data-sp-theme] .ui-badge-warn { background: color-mix(in srgb, var(--warning) 12%, transparent) !important; color: var(--warning) !important; border: 0 !important; }
html[data-sp-theme] .ui-badge-neutral { background: var(--hover) !important; color: var(--text-secondary) !important; border: 0 !important; }
html[data-sp-theme] .ui-badge-dot { width: 5px; height: 5px; box-shadow: none !important; }

/* ordering handles appear on hover only (progressive disclosure) */
html[data-sp-theme] [data-account-name] [data-tg-part="side"] > div { opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
html[data-sp-theme] [data-account-name]:hover [data-tg-part="side"] > div,
html[data-sp-theme] [data-account-name]:focus-within [data-tg-part="side"] > div { opacity: 1; }

html[data-sp-theme] [data-account-name] [data-tg-part="details"] { border-color: var(--border-subtle); padding-top: 12px; margin-bottom: 12px; }
html[data-sp-theme] [data-account-name] [data-tg-part="details"] .text-gray-500 { color: var(--text-tertiary) !important; }
html[data-sp-theme] .tg-account-info { color: var(--text-tertiary); font-size: 11.5px; }
html[data-sp-theme] .tg-account-tag, html[data-sp-theme] .tg-account-tag-add {
  border-radius: 999px; font-size: 11.5px; padding: 1px 9px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tg-account-tag-add { color: var(--text-tertiary); border-style: dashed; }
html[data-sp-theme] .tg-account-tag:hover, html[data-sp-theme] .tg-account-tag-add:hover { background: var(--hover); color: var(--text-primary); }

/* the ten text+icon actions become one quiet icon row with tooltips */
html[data-sp-theme] [data-account-name] [data-tg-part="actions"] {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px; border-color: var(--border-subtle); padding-top: 10px;
}
html[data-sp-theme] [data-account-name] .ui-row-action {
  position: relative; width: 32px; height: 32px; min-height: 0; padding: 0; font-size: 0; gap: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm);
  color: var(--text-secondary) !important; background: transparent !important;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html[data-sp-theme] [data-account-name] .ui-row-action svg { width: 16px; height: 16px; stroke-width: 1.6; }
html[data-sp-theme] [data-account-name] .ui-row-action > span { display: none; }
html[data-sp-theme] [data-account-name] .ui-row-action:hover { background: var(--hover) !important; color: var(--text-primary) !important; }
html[data-sp-theme] [data-account-name] .ui-row-action:active { transform: scale(.94); }
html[data-sp-theme] [data-account-name] .ui-row-action--danger { margin-left: auto; color: var(--text-tertiary) !important; }
html[data-sp-theme] [data-account-name] .ui-row-action--danger:hover { color: var(--danger) !important; background: var(--danger-soft) !important; }

/* tooltips (text copied from title by ui-polish.js) */
html[data-sp-theme] [data-tip] { position: relative; }
html[data-sp-theme] [data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 3px);
  padding: 4px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 80;
  font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  background: var(--text-primary); color: var(--bg-elevated);
  /* hidden from the first frame; no transition on the resting state (WebKit would otherwise animate a freshly created
     pseudo-element down from opacity 1, flashing every tooltip on the page) */
  opacity: 0; visibility: hidden;
}
html[data-sp-theme] [data-tip]:hover::after, html[data-sp-theme] [data-tip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity var(--t-fast) var(--ease-out) 350ms, transform var(--t-fast) var(--ease-out) 350ms, visibility 0s linear 350ms;
}

/* ---------- 9. Consistency pass ------------------------------------------ */
/* one radius scale for every Tailwind rounded utility used by the compiled app */
html[data-sp-theme] :is(.rounded-sm, .rounded, .rounded-md) { border-radius: var(--r-xs); }
html[data-sp-theme] .rounded-lg { border-radius: var(--r-sm); }
html[data-sp-theme] .rounded-xl { border-radius: var(--r-md); }
html[data-sp-theme] .rounded-2xl { border-radius: var(--r-lg); }
html[data-sp-theme] .rounded-3xl { border-radius: var(--r-xl); }
@supports (corner-shape: squircle) {
  html[data-sp-theme] :is([class*="rounded-"], .rounded, [class*="ui-"], [class*="tg-"]):not(.rounded-full):not(svg):not(img) { corner-shape: squircle; }
}

/* form controls: one height, one arrow */
html[data-sp-theme] :is(.ui-select-trigger, input.ui-input, input[type="search"], input[type="text"], input[type="number"], input[type="password"], select) { height: 36px; min-height: 36px; }
html[data-sp-theme] textarea.ui-input, html[data-sp-theme] textarea { height: auto; min-height: 76px; padding-top: 8px; padding-bottom: 8px; }
html[data-sp-theme] select:not([multiple]) {
  appearance: none !important; -webkit-appearance: none !important; padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 12px !important;
}
html[data-sp-theme] :is(.ui-input, .ui-select-trigger):not(:focus) { background: var(--bg-elevated); border-color: var(--sp-border-strong); }
html[data-sp-theme] .ui-label, html[data-sp-theme] label.ui-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

/* badges / chips: quiet, semantic only */
html[data-sp-theme] .ui-chip-sky, html[data-sp-theme] .ui-chip-violet {
  background: var(--brand-soft) !important; color: var(--brand-text) !important; border: 0 !important; border-radius: 999px;
}
html[data-sp-theme] .ui-chip-violet { background: var(--hover) !important; color: var(--text-secondary) !important; }
html[data-sp-theme] .ui-badge { font-family: var(--font-ui); }
html[data-sp-theme] .ui-badge.font-mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* hairline row actions (tasks, proxies, bots …) */
html[data-sp-theme] .ui-row-action {
  border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .ui-row-action:hover:not(:disabled) { background: var(--hover) !important; color: var(--text-primary) !important; }
html[data-sp-theme] .ui-row-action:active:not(:disabled) { transform: scale(.97); }
html[data-sp-theme] .ui-row-action--positive { color: var(--success) !important; }
html[data-sp-theme] .ui-row-action--danger:hover:not(:disabled) { background: var(--danger-soft) !important; color: var(--danger) !important; }

/* links */
html[data-sp-theme] main a:not([class*="ui-btn"]):not(.sp73-metric):not(.sp73-log-row):not(.sp73-schedule-row):not([class*="tg-"]):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- 10. Account cards: single icon row --------------------------- */
html[data-sp-theme] .account-view-grid:not([data-account-view="list"]) > [data-account-name] > [data-tg-part="actions"] {
  display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 0 !important;
  grid-template-columns: none !important; margin-top: 2px !important; padding-top: 10px !important; width: 100% !important;
}
html[data-sp-theme] [data-account-name] .ui-row-action { width: 30px; height: 30px; flex: 0 0 30px; }
html[data-sp-theme] [data-account-name] .ui-row-action--danger { margin-left: 0 !important; }
html[data-sp-theme] .account-view-grid[data-account-view="list"] > [data-account-name] > div[data-tg-part="actions"] { grid-template-columns: repeat(10, 32px) !important; }

/* ---------- 11. Form controls: highest-priority pass --------------------- */
/* the compiled app sets `background … !important` on inputs through long :is() lists;
   repeating the attribute raises specificity so these rules always win */
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, .tg-account-tools button) {
  height: 36px; min-height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--sp-border-strong);
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary);
  font-size: 13px;
  box-shadow: none;
}
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] textarea { height: auto; min-height: 76px; }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input, textarea, .tg-account-tools button):hover:not(:focus):not(:disabled) { border-color: var(--text-tertiary); }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] :is(.ui-input, .ui-select-trigger, select, input, textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c8c97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 12px !important;
}
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tg-account-tools button:last-child { background-color: transparent !important; border-color: transparent; color: var(--text-secondary); }

/* ---------- 12. Specificity fixes --------------------------------------- */
html[data-sp-theme][data-sp-theme] body,
html[data-sp-theme][data-sp-theme] body::before {
  background-image: none !important;
  background-color: var(--canvas) !important;
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 .sp73-live {
  background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; color: var(--text-secondary) !important;
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 .sp73-score {
  background: transparent !important; border-color: var(--border-subtle) !important; color: var(--text-secondary) !important;
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 .sp73-health-dot--warn { background: var(--warning) !important; }
/* desktop: sidebar sits on the deeper shell tone (below 1024 px the drawer keeps its own surface) */
@media (min-width: 1024px) {
  html[data-sp-theme][data-sp-theme] body,
  html[data-sp-theme][data-sp-theme] body::before { background-color: var(--shell, var(--canvas)) !important; }
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] aside.ui-sidebar { background: transparent !important; }
}

/* dashboard attention badge is a link when it has something to open */
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 a.sp73-live {
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 a.sp73-live svg {
  width: 12px; height: 12px; opacity: .55; margin-left: -2px;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 a.sp73-live:hover {
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-elevated)) !important;
  border-color: var(--sp-border-strong) !important;
  color: var(--text-primary) !important;
}
html[data-sp-theme][data-sp-theme] #tgsp-dashboard-r73 a.sp73-live:hover svg { opacity: .9; transform: translateX(2px); }

/* ---------- 13. Palette (Tailwind v4 variables → four semantic tokens) --- */
html[data-sp-theme][data-sp-theme] {
  --color-sky-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-sky-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-sky-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-sky-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-sky-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-sky-500: var(--brand);
  --color-sky-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-sky-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-sky-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-sky-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-sky-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-blue-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-blue-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-blue-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-blue-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-blue-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-blue-500: var(--brand);
  --color-blue-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-blue-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-blue-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-blue-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-blue-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-indigo-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-indigo-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-indigo-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-indigo-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-indigo-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-indigo-500: var(--brand);
  --color-indigo-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-indigo-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-indigo-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-indigo-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-indigo-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-violet-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-violet-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-violet-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-violet-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-violet-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-violet-500: var(--brand);
  --color-violet-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-violet-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-violet-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-violet-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-violet-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-purple-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-purple-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-purple-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-purple-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-purple-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-purple-500: var(--brand);
  --color-purple-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-purple-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-purple-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-purple-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-purple-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-cyan-50: color-mix(in srgb, var(--brand) 8%, white);
  --color-cyan-100: color-mix(in srgb, var(--brand) 14%, white);
  --color-cyan-200: color-mix(in srgb, var(--brand) 26%, white);
  --color-cyan-300: color-mix(in srgb, var(--brand) 46%, white);
  --color-cyan-400: color-mix(in srgb, var(--brand) 72%, white);
  --color-cyan-500: var(--brand);
  --color-cyan-600: color-mix(in srgb, var(--brand) 90%, black);
  --color-cyan-700: color-mix(in srgb, var(--brand) 78%, black);
  --color-cyan-800: color-mix(in srgb, var(--brand) 64%, black);
  --color-cyan-900: color-mix(in srgb, var(--brand) 50%, black);
  --color-cyan-950: color-mix(in srgb, var(--brand) 36%, black);
  --color-emerald-50: color-mix(in srgb, var(--success) 8%, white);
  --color-emerald-100: color-mix(in srgb, var(--success) 14%, white);
  --color-emerald-200: color-mix(in srgb, var(--success) 26%, white);
  --color-emerald-300: color-mix(in srgb, var(--success) 46%, white);
  --color-emerald-400: color-mix(in srgb, var(--success) 72%, white);
  --color-emerald-500: var(--success);
  --color-emerald-600: color-mix(in srgb, var(--success) 90%, black);
  --color-emerald-700: color-mix(in srgb, var(--success) 78%, black);
  --color-emerald-800: color-mix(in srgb, var(--success) 64%, black);
  --color-emerald-900: color-mix(in srgb, var(--success) 50%, black);
  --color-emerald-950: color-mix(in srgb, var(--success) 36%, black);
  --color-green-50: color-mix(in srgb, var(--success) 8%, white);
  --color-green-100: color-mix(in srgb, var(--success) 14%, white);
  --color-green-200: color-mix(in srgb, var(--success) 26%, white);
  --color-green-300: color-mix(in srgb, var(--success) 46%, white);
  --color-green-400: color-mix(in srgb, var(--success) 72%, white);
  --color-green-500: var(--success);
  --color-green-600: color-mix(in srgb, var(--success) 90%, black);
  --color-green-700: color-mix(in srgb, var(--success) 78%, black);
  --color-green-800: color-mix(in srgb, var(--success) 64%, black);
  --color-green-900: color-mix(in srgb, var(--success) 50%, black);
  --color-green-950: color-mix(in srgb, var(--success) 36%, black);
  --color-teal-50: color-mix(in srgb, var(--success) 8%, white);
  --color-teal-100: color-mix(in srgb, var(--success) 14%, white);
  --color-teal-200: color-mix(in srgb, var(--success) 26%, white);
  --color-teal-300: color-mix(in srgb, var(--success) 46%, white);
  --color-teal-400: color-mix(in srgb, var(--success) 72%, white);
  --color-teal-500: var(--success);
  --color-teal-600: color-mix(in srgb, var(--success) 90%, black);
  --color-teal-700: color-mix(in srgb, var(--success) 78%, black);
  --color-teal-800: color-mix(in srgb, var(--success) 64%, black);
  --color-teal-900: color-mix(in srgb, var(--success) 50%, black);
  --color-teal-950: color-mix(in srgb, var(--success) 36%, black);
  --color-lime-50: color-mix(in srgb, var(--success) 8%, white);
  --color-lime-100: color-mix(in srgb, var(--success) 14%, white);
  --color-lime-200: color-mix(in srgb, var(--success) 26%, white);
  --color-lime-300: color-mix(in srgb, var(--success) 46%, white);
  --color-lime-400: color-mix(in srgb, var(--success) 72%, white);
  --color-lime-500: var(--success);
  --color-lime-600: color-mix(in srgb, var(--success) 90%, black);
  --color-lime-700: color-mix(in srgb, var(--success) 78%, black);
  --color-lime-800: color-mix(in srgb, var(--success) 64%, black);
  --color-lime-900: color-mix(in srgb, var(--success) 50%, black);
  --color-lime-950: color-mix(in srgb, var(--success) 36%, black);
  --color-amber-50: color-mix(in srgb, var(--warning) 8%, white);
  --color-amber-100: color-mix(in srgb, var(--warning) 14%, white);
  --color-amber-200: color-mix(in srgb, var(--warning) 26%, white);
  --color-amber-300: color-mix(in srgb, var(--warning) 46%, white);
  --color-amber-400: color-mix(in srgb, var(--warning) 72%, white);
  --color-amber-500: var(--warning);
  --color-amber-600: color-mix(in srgb, var(--warning) 90%, black);
  --color-amber-700: color-mix(in srgb, var(--warning) 78%, black);
  --color-amber-800: color-mix(in srgb, var(--warning) 64%, black);
  --color-amber-900: color-mix(in srgb, var(--warning) 50%, black);
  --color-amber-950: color-mix(in srgb, var(--warning) 36%, black);
  --color-orange-50: color-mix(in srgb, var(--warning) 8%, white);
  --color-orange-100: color-mix(in srgb, var(--warning) 14%, white);
  --color-orange-200: color-mix(in srgb, var(--warning) 26%, white);
  --color-orange-300: color-mix(in srgb, var(--warning) 46%, white);
  --color-orange-400: color-mix(in srgb, var(--warning) 72%, white);
  --color-orange-500: var(--warning);
  --color-orange-600: color-mix(in srgb, var(--warning) 90%, black);
  --color-orange-700: color-mix(in srgb, var(--warning) 78%, black);
  --color-orange-800: color-mix(in srgb, var(--warning) 64%, black);
  --color-orange-900: color-mix(in srgb, var(--warning) 50%, black);
  --color-orange-950: color-mix(in srgb, var(--warning) 36%, black);
  --color-yellow-50: color-mix(in srgb, var(--warning) 8%, white);
  --color-yellow-100: color-mix(in srgb, var(--warning) 14%, white);
  --color-yellow-200: color-mix(in srgb, var(--warning) 26%, white);
  --color-yellow-300: color-mix(in srgb, var(--warning) 46%, white);
  --color-yellow-400: color-mix(in srgb, var(--warning) 72%, white);
  --color-yellow-500: var(--warning);
  --color-yellow-600: color-mix(in srgb, var(--warning) 90%, black);
  --color-yellow-700: color-mix(in srgb, var(--warning) 78%, black);
  --color-yellow-800: color-mix(in srgb, var(--warning) 64%, black);
  --color-yellow-900: color-mix(in srgb, var(--warning) 50%, black);
  --color-yellow-950: color-mix(in srgb, var(--warning) 36%, black);
  --color-rose-50: color-mix(in srgb, var(--danger) 8%, white);
  --color-rose-100: color-mix(in srgb, var(--danger) 14%, white);
  --color-rose-200: color-mix(in srgb, var(--danger) 26%, white);
  --color-rose-300: color-mix(in srgb, var(--danger) 46%, white);
  --color-rose-400: color-mix(in srgb, var(--danger) 72%, white);
  --color-rose-500: var(--danger);
  --color-rose-600: color-mix(in srgb, var(--danger) 90%, black);
  --color-rose-700: color-mix(in srgb, var(--danger) 78%, black);
  --color-rose-800: color-mix(in srgb, var(--danger) 64%, black);
  --color-rose-900: color-mix(in srgb, var(--danger) 50%, black);
  --color-rose-950: color-mix(in srgb, var(--danger) 36%, black);
  --color-red-50: color-mix(in srgb, var(--danger) 8%, white);
  --color-red-100: color-mix(in srgb, var(--danger) 14%, white);
  --color-red-200: color-mix(in srgb, var(--danger) 26%, white);
  --color-red-300: color-mix(in srgb, var(--danger) 46%, white);
  --color-red-400: color-mix(in srgb, var(--danger) 72%, white);
  --color-red-500: var(--danger);
  --color-red-600: color-mix(in srgb, var(--danger) 90%, black);
  --color-red-700: color-mix(in srgb, var(--danger) 78%, black);
  --color-red-800: color-mix(in srgb, var(--danger) 64%, black);
  --color-red-900: color-mix(in srgb, var(--danger) 50%, black);
  --color-red-950: color-mix(in srgb, var(--danger) 36%, black);
  --color-pink-50: color-mix(in srgb, var(--danger) 8%, white);
  --color-pink-100: color-mix(in srgb, var(--danger) 14%, white);
  --color-pink-200: color-mix(in srgb, var(--danger) 26%, white);
  --color-pink-300: color-mix(in srgb, var(--danger) 46%, white);
  --color-pink-400: color-mix(in srgb, var(--danger) 72%, white);
  --color-pink-500: var(--danger);
  --color-pink-600: color-mix(in srgb, var(--danger) 90%, black);
  --color-pink-700: color-mix(in srgb, var(--danger) 78%, black);
  --color-pink-800: color-mix(in srgb, var(--danger) 64%, black);
  --color-pink-900: color-mix(in srgb, var(--danger) 50%, black);
  --color-pink-950: color-mix(in srgb, var(--danger) 36%, black);
}

/* ---------- 14. Final touches ------------------------------------------- */
html[data-sp-theme][data-sp-theme][data-sp-theme] :is([role="dialog"], dialog) { border-radius: var(--r-xl); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); }
html[data-sp-theme][data-sp-theme] dialog::backdrop,
html[data-sp-theme] .fixed.inset-0[class*="bg-black"], html[data-sp-theme] .fixed.inset-0[class*="backdrop"] { background: var(--sp-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-sp-theme] main .ui-card .w-10.h-10:not(.rounded-full) { border-radius: var(--r-md); }
html[data-sp-theme] .ui-form-step-num { border-radius: var(--r-xs); background: var(--brand-soft); color: var(--brand-text); border: 0; font-weight: 600; }
html[data-sp-theme] .ui-note { background: var(--hover); border: 0; border-radius: var(--r-sm); }
html[data-sp-theme] hr, html[data-sp-theme] .border-gray-100, html[data-sp-theme] .border-gray-200 { border-color: var(--border-subtle); }
html[data-sp-theme] .tg-manager-account-picker { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 8px; }
html[data-sp-theme] .tg-manager-account-picker > span { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }

/* two-column metric strip (viewport ≤ 1279px): row divider instead of a stray column rule */
@media (max-width: 1279px) {
  html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric:nth-child(odd)::before { display: none; }
  html[data-sp-theme] #tgsp-dashboard-r73 .sp73-metric:nth-child(n+3) { border-top: 1px solid var(--border-subtle) !important; }
}

/* ==========================================================================
   14. Accounts page (1.0.78)
   ========================================================================== */

/* route changes: the page appears at once (no fade from transparent, which read as a flash) */
html[data-sp-theme][data-sp-theme] .ui-content-shell > * { animation: none !important; }

/* grey helper text was a hard-coded blue-grey (#64748b) */
html[data-sp-theme][data-sp-theme] .tg-account-summary { color: var(--text-tertiary); }
html[data-sp-theme][data-sp-theme] .tgprofile-avatar { background: var(--hover); }

/* card view: the "last checked" line and the tags each take a full row, in the same order for every card */
html[data-sp-theme] .account-view-grid:not([data-account-view="list"]) [data-tg-part="details"] > .tg-account-info { grid-column: 1 / -1; order: 1; margin: 2px 0 0; }
html[data-sp-theme] .account-view-grid:not([data-account-view="list"]) [data-tg-part="details"] > .tg-account-tags { grid-column: 1 / -1; order: 2; }

/* reorder buttons: hover-only on desktop, always visible (minus the drag handle) on touch screens */
@media (hover: none) {
  html[data-sp-theme] [data-account-name] [data-tg-part="side"] > div { opacity: 1; }
  html[data-sp-theme] [data-account-name] [data-tg-part="side"] > div > button:first-child { display: none; }
}

/* ---------- phone / small tablet ---------- */
@media (max-width: 767px) {
  /* toolbar: one tidy grid instead of ten stacked controls */
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; padding: 14px; align-items: center;
  }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > * { min-width: 0; margin: 0; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > .tg-account-tools { display: contents; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > .tg-account-tools > * { min-width: 0; }

  /* counts */
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(1) { order: 1; grid-column: span 3; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(2) { display: none; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > .tg-account-summary:nth-of-type(1) { order: 2; grid-column: span 3; justify-self: end; font-size: 12px; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > .tg-account-summary:nth-of-type(2) { order: 15; grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; }
  /* search + view switch */
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(3) { order: 3; grid-column: 1 / -1; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(4) { order: 4; grid-column: 1 / -1; display: flex; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(4) > button { flex: 1; justify-content: center; }
  /* filters */
  html[data-sp-theme] .tg-account-tools > select:nth-of-type(1) { order: 5; grid-column: span 3; }
  html[data-sp-theme] .tg-account-tools > select:nth-of-type(2) { order: 6; grid-column: span 3; }
  /* actions */
  html[data-sp-theme] .tg-account-tools > button:nth-child(1) { order: 7; grid-column: span 2; }
  html[data-sp-theme] .tg-account-tools > button:nth-child(4) { order: 8; grid-column: span 2; }
  html[data-sp-theme] .tg-account-tools > button:nth-child(5) { order: 9; grid-column: span 2; }
  html[data-sp-theme] .tg-account-tools > button:nth-child(6) { order: 10; grid-column: 1 / -1; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > .tg-account-batch { order: 11; grid-column: 1 / -1; }
  /* show id / show phone / batch check */
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :last-child:not(.tg-account-summary) { display: contents; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :last-child:not(.tg-account-summary) > button:nth-child(1) { order: 12; grid-column: span 3; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :last-child:not(.tg-account-summary) > button:nth-child(2) { order: 13; grid-column: span 3; }
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :last-child:not(.tg-account-summary) > button:nth-child(3) { order: 14; grid-column: 1 / -1; }

  /* controls: same height, same type size, touch friendly */
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .ui-card:has(> .tg-account-tools) :is(select, button:not(.tg-account-tag)) {
    height: 40px; min-height: 40px; width: 100%; font-size: 13.5px !important; line-height: 1.2; padding-inline: 8px; justify-content: center; text-align: center;
  }
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .ui-card:has(> .tg-account-tools) select { text-align-last: left; padding-inline: 12px 28px; }
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(4) > button { height: 32px; min-height: 32px; width: auto; }
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tg-account-tools > button:nth-child(6) { height: 32px; min-height: 32px; color: var(--text-secondary); }

  /* account rows: header = name block + status; the invisible reorder buttons no longer eat the width */
  html[data-sp-theme] [data-account-name] [data-tg-part="side"] { flex-direction: column !important; align-items: flex-end !important; gap: 6px !important; }
  html[data-sp-theme] [data-account-name] [data-tg-part="identity"] { align-items: flex-start; }
  html[data-sp-theme] [data-account-name] [data-tg-part="identity"] > :first-child { margin-top: 2px; }

  /* list view becomes a compact card of its own */
  html[data-sp-theme] .account-view-grid[data-account-view="list"] > [data-account-name] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-areas: "identity identity side" "userid phone phone" "actions actions actions" !important;
    row-gap: 10px !important; column-gap: 10px !important; padding: 14px !important; align-items: start !important;
  }
  html[data-sp-theme] .account-view-grid.tg-account-selecting[data-account-view="list"] > [data-account-name] {
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-areas: "check identity identity side" "check userid phone phone" "check actions actions actions" !important;
  }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > div:last-child { white-space: normal; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="side"] { justify-content: flex-start; max-width: none; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="userid"],
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="phone"] { min-width: 0; font-size: 12px; margin: 0 !important; padding: 0 !important; border: 0 !important; align-items: center; justify-content: flex-start; align-self: start; height: auto !important; min-height: 0 !important; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="phone"] { grid-area: phone; justify-self: start; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="userid"] > span:not(:last-child),
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="phone"] > span:not(:last-child) { display: none; }
  /* both views: one row of icons that fits the card */
  html[data-sp-theme] .account-view-grid > [data-account-name] > [data-tg-part="actions"] {
    display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 0 !important;
    grid-template-columns: none !important; width: 100% !important; padding-top: 10px !important; border-top: 1px solid var(--border-subtle);
  }
  html[data-sp-theme] .account-view-grid > [data-account-name] .ui-row-action { width: auto; height: 30px; min-width: 0; min-height: 30px; flex: 1 1 0; max-width: 30px; padding: 0; }
  html[data-sp-theme] .account-view-grid > [data-account-name] .ui-row-action > span { display: none !important; }

  /* batch bar (selection mode): two columns instead of a stack of wide buttons */
  html[data-sp-theme] .tg-account-batch:not([hidden]) {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 10px 0 0; border-top: 1px solid var(--border-subtle);
  }
  html[data-sp-theme] .tg-account-batch > * { min-width: 0; margin: 0; }
  html[data-sp-theme] .tg-account-batch > label { order: 1; font-size: 13px; }
  html[data-sp-theme] .tg-account-batch > [data-tg-selected-count] { order: 2; justify-self: end; font-size: 12px; color: var(--text-secondary); text-align: right; }
  html[data-sp-theme] .tg-account-batch > [data-tg-select-action="clear"] { order: 3; }
  html[data-sp-theme] .tg-account-batch > [data-tg-batch="check"] { order: 4; }
  html[data-sp-theme] .tg-account-batch > [data-tg-batch="tag"] { order: 5; }
  html[data-sp-theme] .tg-account-batch > [data-tg-batch="delete"] { order: 6; }
  html[data-sp-theme] .tg-account-batch > :is([data-tg-batch-progress], [data-tg-batch-progress-label], [data-tg-batch-cancel]) { order: 7; grid-column: 1 / -1; }
  html[data-sp-theme] .tg-account-batch > .tg-account-batch-note { order: 8; grid-column: 1 / -1; font-size: 11.5px; }
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tg-account-batch > button { width: 100%; height: 38px; min-height: 38px; font-size: 13px !important; justify-content: center; }
}

/* ---------- desktop / tablet ---------- */
@media (min-width: 768px) {
  /* card: status badge at the right edge; the reorder buttons show up to its left on hover */
  html[data-sp-theme] .account-view-grid:not([data-account-view="list"]) [data-tg-part="side"] { flex-direction: row-reverse; }
  /* selection checkbox no longer sits on top of the avatar */
  html[data-sp-theme] .account-view-grid.tg-account-selecting:not([data-account-view="list"]) [data-tg-part="identity"] { padding-left: 30px; }
  /* batch bar: label and count use the same size as the buttons */
  html[data-sp-theme] .tg-account-batch > :is(label, [data-tg-selected-count]) { font-size: 13px; color: var(--text-secondary); }
  /* the floating + duplicates the "新增账号" button in the toolbar and covered the delete icons */
  html[data-sp-theme] body:has(.account-view-grid) .ui-fab { display: none; }

  /* list view: avatar next to the name; name block left, check time + proxy right, so a row stays short */
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] { align-items: flex-start; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > :first-child { margin-top: 2px; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > div:last-child {
    display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); column-gap: 24px; align-items: start; white-space: normal;
  }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > div:last-child > :not(.tg-account-info) { grid-column: 1; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] .tg-account-tags { flex-wrap: wrap; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > div:last-child > .tg-account-info { grid-column: 2; grid-row: 1 / span 3; margin: 2px 0 0; }
}
@media (min-width: 1401px) {
  html[data-sp-theme] .account-view-grid[data-account-view="list"] > [data-account-name] {
    position: relative;
    grid-template-columns: minmax(360px, 2.2fr) auto minmax(110px, .5fr) minmax(110px, .5fr) auto;
  }
  html[data-sp-theme] .account-view-grid.tg-account-selecting[data-account-view="list"] > [data-account-name] {
    grid-template-columns: 28px minmax(360px, 2.2fr) auto minmax(110px, .5fr) minmax(110px, .5fr) auto;
  }
  /* reorder buttons float over the row's top-right corner on hover instead of reserving a column */
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="side"] > div { position: absolute; top: 4px; right: 10px; }
  html[data-sp-theme] .account-view-grid[data-account-view="list"] [data-tg-part="identity"] > div:last-child { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
}
/* list rows: the ID / phone columns show icon + value only (the labels did not fit next to the action icons) */
html[data-sp-theme] .account-view-grid[data-account-view="list"] :is([data-tg-part="userid"], [data-tg-part="phone"]) > span:not(:last-child) { display: none; }

/* keep the search box wide: the reorder hint only fits on very wide screens */
@media (min-width: 768px) and (max-width: 1699px) {
  html[data-sp-theme] .ui-card:has(> .tg-account-tools) > :nth-child(2) { display: none; }
}

/* tag dialog: tags already used on other accounts, one click to add */
html[data-sp-theme] .tg-tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
html[data-sp-theme] .tg-tag-suggest > span { font-size: 11.5px; color: var(--text-tertiary); margin-right: 2px; }
html[data-sp-theme] .tg-tag-suggest button {
  height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tg-tag-suggest button:hover { background: var(--hover); color: var(--text-primary); }
html[data-sp-theme] .tg-tag-suggest button.is-on { background: var(--brand-soft); border-color: var(--sp-border-strong); color: var(--brand-text); }

/* very narrow phones: three action buttons per row must still fit on one line */
@media (max-width: 359px) {
  html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tg-account-tools > button { font-size: 12.5px !important; padding-inline: 2px !important; white-space: nowrap; }
}

/* "last checked" and "proxy" always sit on two lines (a narrow-screen rule collapsed the line break) */
html[data-sp-theme][data-sp-theme] .tg-account-info { white-space: pre-line !important; }

/* country flag after the account name (emoji; Windows shows the two letters instead) */
html[data-sp-theme] .tg-account-flag {
  margin-left: 6px; font-size: 1.05em; line-height: 1; vertical-align: -1px; cursor: default;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* the vertical scrollbar takes 10 px; keep its lane reserved so pages that are short while loading do not
   shift the whole layout sideways when the bar appears and disappears */
html[data-sp-theme] { overflow-y: scroll; scrollbar-gutter: stable; }

/* accounts page: the card grid stays hidden until the script has added tags / check info (never longer than 3 s) */
html[data-sp-theme] .account-view-grid:not(.tg-acc-ready) { visibility: hidden; animation: tg-acc-reveal 0s 3s forwards; }
@keyframes tg-acc-reveal { to { visibility: visible; } }

/* accounts: "clear all filters" only while something is filtered */
html[data-sp-theme][data-sp-theme] .tg-account-reset-idle { display: none !important; }

/* dialogs: one title size, one shadow, one button radius */
html[data-sp-theme][data-sp-theme] :is(.tgsec-title, .tgprofile-title, .tg-tag-panel h3) { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
html[data-sp-theme][data-sp-theme] [role="dialog"] > :first-child :is(h2, h3) { font-size: 15px; font-weight: 600; }
html[data-sp-theme][data-sp-theme] :is([role="dialog"], .tgsec-modal, .tgprofile-modal, .tg-tag-panel) { box-shadow: var(--shadow-lg); }
html[data-sp-theme][data-sp-theme] .tg-tag-actions button { border-radius: var(--r-md); }

/* top-bar buttons: the tooltip opens downwards and is right-aligned to the button, so the window edge never cuts it off */
html[data-sp-theme] header [data-tip]::after { left: auto; right: 0; bottom: auto; top: calc(100% + 7px); transform: translateY(-3px); }
html[data-sp-theme] header [data-tip]:hover::after, html[data-sp-theme] header [data-tip]:focus-visible::after { transform: translateY(0); }

/* flag that the system cannot draw (for example Taiwan on a mainland-China region Mac) shows its two letters instead */
html[data-sp-theme] .tg-account-flag.tg-account-flag-text {
  font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  padding: 2px 4px; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-tertiary); vertical-align: 1px;
}

/* ==========================================================================
   1.0.84 — chat centre polish
   conversation list as separate rounded cards, "置顶" label instead of the red pin emoji, one quiet scrollbar style,
   neutral reply bar / reply quote (no blue), calmer message bubbles
   ========================================================================== */

/* ---------- scrollbars: the same thin, quiet thumb everywhere --------------------------------------------------------
   (the old rule used the standard scrollbar-width/-color, which Safari 18 honours with its own white track; that is where
   the bulky bars in the chat list, the message column and the composer came from) */
html[data-sp-theme] *::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
html[data-sp-theme] *::-webkit-scrollbar-track,
html[data-sp-theme] *::-webkit-scrollbar-corner { background: transparent; }
html[data-sp-theme] *::-webkit-scrollbar-thumb {
  min-height: 36px; border: 3px solid transparent; border-radius: 10px; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--text-primary) 16%, transparent);
}
html[data-sp-theme] *::-webkit-scrollbar-thumb:hover,
html[data-sp-theme] *::-webkit-scrollbar-thumb:active {
  border: 3px solid transparent; background-clip: padding-box;
  background-color: color-mix(in srgb, var(--text-primary) 32%, transparent);
}
/* the chat input grows to 8 rows and is scrollable, but it never shows a bar next to a one-line draft */
html[data-sp-theme] .tg-stage > footer textarea { scrollbar-width: none; }
html[data-sp-theme] .tg-stage > footer textarea::-webkit-scrollbar { display: none; }

/* ---------- conversation list: every conversation is its own card ------------------------------------------------- */
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] { background: var(--bg-base) !important; }
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 16px !important;
}
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] {
  flex: none; width: 100% !important; margin: 0 !important; padding: 11px 12px !important;
  border: 1px solid var(--border-subtle) !important; border-radius: var(--r-lg) !important;
  background: var(--bg-elevated) !important; box-shadow: var(--shadow-xs) !important;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog]:hover {
  border-color: var(--sp-border-strong) !important; background: var(--bg-elevated) !important; box-shadow: var(--shadow-sm) !important;
}
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog].ui-selection {
  border-color: var(--sp-border-strong) !important; background: var(--brand-soft) !important; box-shadow: none !important;
}
/* the avatar disc sits on the card, not on a grey wash */
html[data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] > .rounded-full { background: var(--hover); border-color: transparent; }
/* a long preview (a URL without spaces) is cut with an ellipsis instead of running under the scrollbar */
html[data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] > .min-w-0,
html[data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] > .min-w-0 > div { min-width: 0; }
html[data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] > .min-w-0 > div > span.truncate { min-width: 0; flex: 0 1 auto; max-width: 100%; }
html[data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] > .min-w-0 > div:last-child > span.truncate { flex: 1 1 0; }
/* "置顶" tag after the title (the label text comes from data-label, set by chat-actions) */
html[data-sp-theme] .tgsp-ca-pin-icon {
  flex: none; margin: 0; padding: 2px 6px; border-radius: 999px; font-size: 0; line-height: 1; vertical-align: 1px;
  background: var(--hover); color: var(--text-secondary);
}
html[data-sp-theme] .tgsp-ca-pin-icon::after {
  content: attr(data-label); font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
}
html[data-sp-theme] .tgsp-ca-pin-icon:not([data-label])::after { content: "置顶"; }

/* ---------- reply bar above the composer, and the quote inside a bubble: neutral, no blue -------------------------- */
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 6px 7px 16px;
  border: 0; border-radius: var(--r-md); background: var(--hover);
}
html[data-sp-theme] .tgsp-ca-replybar::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--text-tertiary);
}
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar b { color: var(--text-primary); font-size: 12px; font-weight: 600; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar span { color: var(--text-secondary); font-size: 12.5px; }
html[data-sp-theme] .tgsp-ca-replybar .tgsp-ca-composer-close {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  color: var(--text-tertiary); font-size: 16px; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tgsp-ca-replybar .tgsp-ca-composer-close:hover { background: var(--pressed); color: var(--text-primary); }

html[data-sp-theme][data-sp-theme] .tg-stage-reply {
  position: relative; margin: 1px 0 5px; padding: 4px 9px 4px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
html[data-sp-theme] .tg-stage-reply::before {
  content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--text-tertiary);
}
html[data-sp-theme][data-sp-theme] .tg-stage-reply b { color: var(--text-primary); }
html[data-sp-theme][data-sp-theme] .tg-stage-reply span { color: var(--text-secondary); }
html[data-sp-theme] .tg-stage-reply:hover { background: color-mix(in srgb, var(--text-primary) 10%, transparent); }

/* ---------- a long nowrap line (reply preview, pinned message, title) must never widen the page ---------------------
   Cause of the "right side cut off" report: a reply bar whose preview is one long unbroken line made the composer footer's
   min-content width huge; the flex column above it (main) has min-width:auto and grew past the window, so the top-bar buttons,
   the bubbles and the composer ended up outside the visible area. Fix at the source (the preview contributes 0 to the intrinsic
   width) and at the container (main/stage may shrink). */
html[data-sp-theme] main.flex-1,
html[data-sp-theme] [data-tg-chat-shell],
html[data-sp-theme] .tg-stage,
html[data-sp-theme] .tg-stage > * { min-width: 0; }
html[data-sp-theme] .tg-stage > footer { max-width: 100%; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar { min-width: 0; max-width: 100%; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar-copy { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar-copy > span,
html[data-sp-theme][data-sp-theme] .tgsp-ca-replybar-copy > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sp-theme] .tg-stage-pin { min-width: 0; max-width: 100%; }
html[data-sp-theme] .tg-stage-pin-copy { flex: 1 1 0; width: 0; min-width: 0; }
html[data-sp-theme] .tg-stage > header > div { min-width: 0; }
html[data-sp-theme] .tg-stage > header .truncate,
html[data-sp-theme] .tg-stage > header .tg-stage-sub { max-width: 100%; }

/* the one-line chat input is 39 px tall while its text needs 41 px, so Safari showed a scrollbar next to an empty draft */
html[data-sp-theme][data-sp-theme] .tg-stage > footer textarea { min-height: 42px !important; }

/* ---------- chat centre: leftover Telegram blue → ink / neutral ---------------------------------------------------- */
/* selected message(s) in multi-select */
html[data-sp-theme][data-sp-theme] .tgsp-ca-selected > article { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
/* conversation multi-select: round check marks in ink */
html[data-sp-theme][data-sp-theme] section[class*="md:w-[340px]"] button.tgsp-ca-dialog-selectable:before { border-color: var(--text-tertiary); }
html[data-sp-theme][data-sp-theme] section[class*="md:w-[340px]"] button.tgsp-ca-dialog-selected:before {
  border-color: var(--brand-action); background: var(--brand-action); color: var(--brand-action-text);
}
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog].tgsp-ca-dialog-selected {
  background: var(--brand-soft) !important; border-color: var(--sp-border-strong) !important;
}
/* forum topic chip, "load older" pill, notice strip, chosen reaction, topic navigation */
html[data-sp-theme][data-sp-theme] .tg-stage .tg-stage-topic { background: var(--hover); color: var(--text-secondary); }
html[data-sp-theme][data-sp-theme] .tg-stage .tg-stage-older { color: var(--text-secondary) !important; }
html[data-sp-theme][data-sp-theme] .tg-stage-notice { background: var(--hover); color: var(--text-primary); }
html[data-sp-theme][data-sp-theme] .tg-stage-reactions button.is-chosen { background: var(--pressed); }
html[data-sp-theme][data-sp-theme] .tgsp-topic-back,
html[data-sp-theme][data-sp-theme] .tgsp-topic-entry { color: var(--text-secondary) !important; }
html[data-sp-theme][data-sp-theme] .tg-stage-pin-kicker { color: var(--text-primary); }

/* ==========================================================================
   1.0.85 — chat composer with live formatting
   The visible input is a contenteditable (rich-editor.js); the original textarea stays in the DOM, hidden, as the app's source of truth.
   ========================================================================== */
html[data-sp-theme] [data-tgsp-rich="1"] { display: none !important; }
html[data-sp-theme] .tgsp-rich-editor {
  display: block; flex: 1 1 0; width: 0; min-width: 0; height: auto !important; min-height: 42px !important; max-height: 128px; overflow-x: hidden; overflow-y: auto;
  margin: 0; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 21px; text-align: left;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; cursor: text; outline: none;
  scrollbar-width: none;
}
html[data-sp-theme] .tgsp-rich-editor::-webkit-scrollbar { display: none; }
html[data-sp-theme] .tgsp-rich-editor:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); pointer-events: none; }
html[data-sp-theme] .tgsp-rich-editor code { font-family: var(--font-mono); font-size: .92em; font-weight: 400; font-style: normal; padding: 1px 5px; border-radius: 5px; background: var(--hover); }
html[data-sp-theme] .tgsp-rich-editor a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* the format buttons look like what they do, and show which styles the caret is in */
html[data-sp-theme] .tgsp-ca-rich-btn[data-fmt="b"] { font-weight: 700; }
html[data-sp-theme] .tgsp-ca-rich-btn[data-fmt="i"] { font-style: italic; }
html[data-sp-theme] .tgsp-ca-rich-btn[data-fmt="u"] { text-decoration: underline; text-underline-offset: 2px; }
html[data-sp-theme] .tgsp-ca-rich-btn[data-fmt="s"] { text-decoration: line-through; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-rich-btn.is-active {
  background: var(--pressed); color: var(--text-primary); border-color: var(--sp-border-strong);
}

/* ==========================================================================
   1.0.86 — chat centre, second pass
   ========================================================================== */

/* ---------- the chat page must fit the window exactly ----------------------------------------------------------------
   The chat card was sized for the old layout (100dvh - 88px); the floating sheet adds 8 px above and below and a taller
   top bar, so the page was 17-18 px taller than the window: scrolling a message into view scrolled the whole page,
   cutting the top bar and leaving a strip at the bottom. The card now takes whatever height is left. */
@media (min-width: 1024px) {
  html[data-sp-theme] main:has([data-tg-chat-shell]) {
    height: calc(100dvh - 16px); min-height: 0 !important; display: flex; flex-direction: column;
  }
  /* children keep the full width they had as blocks (the top bar uses auto side margins, which would shrink-wrap it) */
  html[data-sp-theme] main:has([data-tg-chat-shell]) > * { flex: none; align-self: stretch; width: 100%; }
  html[data-sp-theme] main:has([data-tg-chat-shell]) > div.flex-1 { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html[data-sp-theme] main:has([data-tg-chat-shell]) > div.flex-1 > .ui-content-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
  html[data-sp-theme][data-sp-theme] main:has([data-tg-chat-shell]) [data-tg-chat-shell] { flex: 1 1 auto; height: auto !important; min-height: 0 !important; }
}

/* ---------- messages ------------------------------------------------------------------------------------------------ */
/* service messages ("X joined", "pinned a message") are a small centred pill, like Telegram */
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tg-stage-service > article {
  max-width: 82% !important; padding: 3px 11px !important; border-radius: 999px !important;
  background: var(--hover) !important; color: var(--text-secondary) !important; cursor: default;
}
html[data-sp-theme] .tg-stage [data-tgsp-msg].tg-stage-service > article .text-sm { font-size: 12px; line-height: 1.5; color: inherit; }

/* a run of messages from one sender: the avatar sits next to the last one, the joined corners are tighter */
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tg-stage-continued > button { visibility: visible; }
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tgsp-grp-next > button { visibility: hidden; }
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tg-stage-continued:not([data-tgsp-out="1"]) > article { border-top-left-radius: 6px !important; }
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tg-stage-continued[data-tgsp-out="1"] > article { border-top-right-radius: 6px !important; }

/* one to three emoji and nothing else: shown large, without a bubble */
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tgsp-emoji-only > article {
  padding: 0 2px !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
html[data-sp-theme] .tg-stage [data-tgsp-msg].tgsp-emoji-only > article .text-sm { font-size: 34px; line-height: 1.2; }

/* formatted messages: links look like links, code is a quiet chip, quotes and code blocks are set off */
html[data-sp-theme] .tgsp-ca-rich-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-tertiary); }
html[data-sp-theme] .tgsp-ca-rich-body a:hover { text-decoration-color: currentColor; }
html[data-sp-theme] .tgsp-ca-rich-body code {
  font-family: var(--font-mono); font-size: .88em; padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}
html[data-sp-theme] .tgsp-ca-rich-body pre {
  margin: 4px 0; padding: 8px 10px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: .85em; line-height: 1.5; background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}
html[data-sp-theme] .tgsp-ca-rich-body pre code { padding: 0; background: transparent; font-size: inherit; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-rich-body blockquote {
  position: relative; margin: 4px 0; padding: 3px 9px 3px 12px; border: 0 !important; border-radius: 8px !important;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important; color: var(--text-secondary);
}
html[data-sp-theme] .tgsp-ca-rich-body blockquote::before {
  content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--text-tertiary);
}
html[data-sp-theme] .tgsp-ca-rich-body :is(tg-spoiler, .tg-spoiler) { filter: blur(4px); transition: filter var(--t-base) var(--ease-out); cursor: pointer; }
html[data-sp-theme] .tgsp-ca-rich-body :is(tg-spoiler, .tg-spoiler):hover { filter: none; }

/* reactions sit between the text and the time */
html[data-sp-theme] .tg-stage-reactions { margin: 4px 0 2px; }
html[data-sp-theme][data-sp-theme] .tg-stage-reactions button {
  padding: 3px 8px; border: 1px solid transparent; background: var(--hover); color: var(--text-primary);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme][data-sp-theme] .tg-stage-reactions button:hover { border-color: var(--sp-border-strong); }
html[data-sp-theme][data-sp-theme] .tg-stage-reactions button.is-chosen { background: var(--pressed); border-color: var(--sp-border-strong); }

/* ---------- back to the latest message --------------------------------------------------------------------------- */
html[data-sp-theme] .tg-stage { position: relative; }
html[data-sp-theme] .tgsp-jump {
  position: absolute; right: 18px; bottom: 96px; z-index: 6; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border-subtle); border-radius: 50%; background: var(--bg-elevated); color: var(--text-secondary);
  box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px);
}
html[data-sp-theme] .tgsp-jump.is-shown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s;
}
html[data-sp-theme] .tgsp-jump:hover { color: var(--text-primary); border-color: var(--sp-border-strong); }
html[data-sp-theme] .tgsp-jump:active { transform: scale(.94); }
html[data-sp-theme] .tgsp-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- composer: channel the account cannot post to --------------------------------------------------------- */
html[data-sp-theme] .tgsp-channel-hint {
  margin: 0 0 8px; padding: 7px 11px; border-radius: var(--r-sm); background: var(--hover); color: var(--text-secondary); font-size: 12px; line-height: 1.5;
}

/* ---------- conversation list ------------------------------------------------------------------------------------- */
/* unread conversations read a little stronger */
html[data-sp-theme] [data-tg-chat-sidebar] button[data-tgsp-unread="1"] > .min-w-0 > div:first-child > .text-sm { font-weight: 600; }
/* muted conversations: a small bell-off mark after the title, and a grey unread badge */
html[data-sp-theme] [data-tg-chat-sidebar] button[data-tgsp-dialog] > .min-w-0 > div:first-child > time { order: 3; }
html[data-sp-theme] [data-tg-chat-sidebar] button[data-tgsp-muted="1"] > .min-w-0 > div:first-child::after {
  content: ""; order: 2; flex: none; width: 13px; height: 13px; background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar] button[data-tgsp-muted="1"] > .min-w-0 > div:last-child > span:not(.truncate) {
  background: var(--text-tertiary) !important; color: var(--bg-elevated) !important;
}
/* collapsed list (rail): the open conversation gets a ring around its avatar */
html[data-sp-theme] [data-tg-chat-sidebar-collapsed="true"] button[data-tgsp-dialog].ui-selection > .rounded-full {
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 3.5px var(--text-primary);
}
/* collapsed list (rail): just the avatars, no cards */
html[data-sp-theme][data-sp-theme] [data-tg-chat-sidebar-collapsed="true"] [data-tg-chat-sidebar] > .overflow-y-auto > button[data-tgsp-dialog] {
  padding: 4px 0 !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; overflow: visible !important;
}
html[data-sp-theme] [data-tg-chat-sidebar-collapsed="true"] button[data-tgsp-dialog]:not(.ui-selection):hover > .rounded-full {
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 3.5px var(--sp-border-strong);
}

/* ==========================================================================
   1.0.87 — chat centre, third pass: find in conversation, private chats without sender names
   ========================================================================== */

/* ---------- private (one-to-one) chats: no sender name or avatar next to each message ------------------------------ */
html[data-sp-theme][data-sp-theme] .tg-stage:has(> header:is([data-tg-type="private"], [data-tg-type="bot"], [data-tg-type="user"])) [data-tgsp-msg] > button[data-testid^="chat-private-"],
html[data-sp-theme][data-sp-theme] .tg-stage:has(> header:is([data-tg-type="private"], [data-tg-type="bot"], [data-tg-type="user"])) [data-tgsp-msg] article > button[data-testid^="chat-private-button"] {
  display: none !important;
}

/* ---------- find in conversation --------------------------------------------------------------------------------- */
html[data-sp-theme] .tgsp-find-toggle {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tgsp-find-toggle:hover,
html[data-sp-theme] .tgsp-find-toggle.is-active { background: var(--hover); color: var(--text-primary); }
html[data-sp-theme] .tgsp-find-toggle svg,
html[data-sp-theme] .tgsp-find svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

html[data-sp-theme] .tgsp-find {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 10px 7px 14px;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-tertiary);
}
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tgsp-find .tgsp-find-input {
  flex: 1 1 auto; width: 0; min-width: 0; min-height: 30px; height: 30px; padding: 0 6px; border: 0 !important; border-radius: 6px;
  background: transparent !important; box-shadow: none !important; color: var(--text-primary); font-size: 13px; outline: none;
}
html[data-sp-theme] .tgsp-find .tgsp-find-input::-webkit-search-cancel-button { display: none; }
html[data-sp-theme] .tgsp-find-count { flex: none; min-width: 3.5em; text-align: right; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
html[data-sp-theme] .tgsp-find.is-empty .tgsp-find-count { color: var(--danger); }
html[data-sp-theme] .tgsp-find-btn {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tgsp-find-btn:hover { background: var(--hover); color: var(--text-primary); }

/* matches: every match marked, the current one stronger (CSS highlights where supported, a ring otherwise) */
html[data-sp-theme] ::highlight(tgsp-find) { background-color: color-mix(in srgb, var(--warning) 22%, transparent); color: inherit; }
html[data-sp-theme] ::highlight(tgsp-find-current) { background-color: color-mix(in srgb, var(--warning) 48%, transparent); color: inherit; }
html[data-sp-theme][data-sp-theme] .tg-stage [data-tgsp-msg].tgsp-hit-current > article { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 55%, transparent) !important; }

/* ---------- themed dialogs (rich-text help, link) — same surfaces, radius, ink buttons as the rest of the panel ----- */
html[data-sp-theme] .tgsp-modal {
  position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--sp-overlay); animation: v2-fade 160ms var(--ease-out) both;
}
html[data-sp-theme][data-sp-theme] .tgsp-modal-box {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 20px 16px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  color: var(--text-primary); text-align: left;
}
html[data-sp-theme] .tgsp-modal-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--text-primary); }
html[data-sp-theme] .tgsp-modal-text { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
html[data-sp-theme] .tgsp-modal-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
html[data-sp-theme] .tgsp-help-grid {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-base);
}
html[data-sp-theme] .tgsp-help-key {
  display: grid; place-items: center; height: 26px; border-radius: 7px; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--text-primary);
}
html[data-sp-theme] .tgsp-help-key[data-fmt="b"] { font-weight: 700; }
html[data-sp-theme] .tgsp-help-key[data-fmt="i"] { font-style: italic; }
html[data-sp-theme] .tgsp-help-key[data-fmt="u"] { text-decoration: underline; text-underline-offset: 2px; }
html[data-sp-theme] .tgsp-help-key[data-fmt="s"] { text-decoration: line-through; }
html[data-sp-theme] .tgsp-help-key[data-fmt="code"] { font-family: var(--font-mono); font-size: 12px; }
html[data-sp-theme] .tgsp-help-name { font-size: 13px; color: var(--text-primary); }
html[data-sp-theme] .tgsp-help-short { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); }
html[data-sp-theme] .tgsp-modal-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
html[data-sp-theme] .tgsp-modal-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tgsp-modal-input {
  width: 100%; min-height: 36px; padding: 0 11px; border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; box-shadow: none;
}
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tgsp-modal-input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; outline: none; }
html[data-sp-theme] .tgsp-modal-error { margin: -4px 0 0; min-height: 1em; font-size: 12px; color: var(--danger); }
html[data-sp-theme] .tgsp-modal-error:empty { display: none; }
html[data-sp-theme] .tgsp-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
html[data-sp-theme] .tgsp-modal-form .tgsp-modal-actions { margin-top: 4px; }
html[data-sp-theme] .tgsp-modal-btn {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm); background: var(--bg-elevated);
  color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html[data-sp-theme] .tgsp-modal-btn:hover { background: var(--hover); }
html[data-sp-theme] .tgsp-modal-btn:active { transform: scale(.975); }
html[data-sp-theme] .tgsp-modal-btn.is-primary { border-color: transparent; background: var(--brand-action); color: var(--brand-action-text); }
html[data-sp-theme] .tgsp-modal-btn.is-primary:hover { background: var(--brand-action-hover); }
html[data-sp-theme] .tgsp-modal-btn.is-quiet { margin-right: auto; border-color: transparent; background: transparent; color: var(--danger); }
html[data-sp-theme] .tgsp-modal-btn.is-quiet:hover { background: var(--danger-soft); }

/* ---------- conversation multi-select ------------------------------------------------------------------------------- */
/* while choosing, only ticked conversations are tinted (the open one no longer looks ticked) */
html[data-sp-theme][data-sp-theme] .tgsp-ca-dialog-selecting > .overflow-y-auto > button[data-tgsp-dialog].ui-selection:not(.tgsp-ca-dialog-selected) {
  background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important;
}

/* ---------- message multi-select: the action bar takes the composer's place inside the conversation ----------------- */
html[data-sp-theme][data-sp-theme] .tg-stage > .tgsp-ca-toolbar.is-docked {
  position: absolute; left: 50%; right: auto; top: auto; z-index: 7; transform: translateX(-50%);
  max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 8px 6px 14px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-elevated); box-shadow: var(--shadow-md);
  animation: v2-pop 160ms var(--ease-out) both;
}
html[data-sp-theme] .tg-stage:has(> .tgsp-ca-toolbar.is-docked) > footer > * { visibility: hidden; }
html[data-sp-theme] .tg-stage > .tgsp-ca-toolbar.is-docked .tgsp-ca-toolbar-count { margin-right: 6px; color: var(--text-secondary); font-size: 12.5px; }
html[data-sp-theme][data-sp-theme] .tg-stage > .tgsp-ca-toolbar.is-docked .tgsp-ca-btn { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }

/* ---------- the chat's own dialogs (delete confirm, edit, forward picker) look like the rest of the panel ----------- */
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal { background: var(--sp-overlay); animation: v2-fade 160ms var(--ease-out) both; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal-box {
  width: min(420px, 100%); gap: 12px; padding: 20px 20px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-xl);
  background: var(--bg-elevated); box-shadow: var(--shadow-lg); animation: v2-pop 200ms var(--ease-out-strong) both;
}
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal-text { font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal-actions { gap: 8px; margin-top: 4px; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; font-weight: 500;
}
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn:hover:not(:disabled) { background: var(--hover); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn.is-primary { border-color: transparent; background: var(--brand-action); color: var(--brand-action-text); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn.is-primary:hover:not(:disabled) { background: var(--brand-action-hover); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn.is-danger { border-color: transparent; background: var(--danger); color: #fff; }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-btn.is-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal :is(.tgsp-ca-textarea, .tgsp-ca-input) {
  border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm); background: var(--bg-elevated); color: var(--text-primary); font-size: 13px;
}
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal :is(.tgsp-ca-textarea, .tgsp-ca-input):focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-list-item { border-radius: var(--r-sm); color: var(--text-primary); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-modal .tgsp-ca-list-item:hover { background: var(--hover); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-toast { border-radius: 999px; background: var(--brand-action); color: var(--brand-action-text); box-shadow: var(--shadow-md); }
html[data-sp-theme][data-sp-theme] .tgsp-ca-toast.is-error { background: var(--danger); color: #fff; }

/* ==========================================================================
   1.0.88 — chat network layer: notice while Telegram rate-limits the account
   ========================================================================== */
html[data-sp-theme] .tgsp-net-notice {
  flex: 0 0 auto; padding: 7px 14px; border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-elevated)); color: var(--text-primary); font-size: 12px; line-height: 1.5;
}

/* ==== 1.0.92: account workbench (workbench-r2.js) ================================================================== */
.wb2 { max-width: 76rem; padding-bottom: 72px; display: flex; flex-direction: column; gap: 16px; color: var(--text-primary); }
.wb2 *, .wb2 *::before, .wb2 *::after { box-sizing: border-box; }
.wb2 .wb2-i { width: 16px; height: 16px; flex: none; }
.wb2-lead { margin: 0; max-width: 48rem; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.wb2-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); padding: 20px; }
.wb2-scope { display: flex; flex-direction: column; gap: 12px; }
.wb2-scope-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb2-scope-title { display: flex; align-items: baseline; gap: 10px; }
.wb2-scope-title strong { font-size: 13px; font-weight: 600; }
.wb2-scope-title span { color: var(--text-tertiary); font-size: 12px; }
.wb2-scope-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wb2-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
.wb2-muted { color: var(--text-tertiary); font-size: 12px; }
.wb2-error { color: var(--danger, #b3261e); font-size: 12px; }
.wb2-hint { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.wb2-hint--warn { color: var(--text-secondary); border-left: 2px solid var(--warning, #b7791f); padding-left: 10px; }
.wb2-todo { color: var(--text-tertiary); }
.wb2-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 3px; }
.wb2-link:hover:not(:disabled) { color: var(--text-primary); text-decoration-color: currentColor; }
.wb2-link:disabled { opacity: .45; cursor: default; }
.wb2-link .wb2-i { width: 13px; height: 13px; }

/* accounts */
.wb2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wb2-chips--scroll { max-height: 128px; overflow-y: auto; padding: 2px 6px 2px 0; }
/* scrollable areas keep a visible thin scrollbar (macOS hides overlay bars until you scroll, and these hold more than shows) */
.wb2-chips--scroll, .wb2-list { scrollbar-width: thin; scrollbar-color: var(--sp-border-strong, #bbb) transparent; }
.wb2-chips--scroll::-webkit-scrollbar, .wb2-list::-webkit-scrollbar { width: 8px; }
.wb2-chips--scroll::-webkit-scrollbar-thumb, .wb2-list::-webkit-scrollbar-thumb { background: var(--sp-border-strong, #bbb); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.wb2-chips--scroll::-webkit-scrollbar-track, .wb2-list::-webkit-scrollbar-track { background: transparent; }
.wb2-scope .wb2-search--accounts { flex: none; width: min(22rem, 100%); }
.wb2-scope .wb2-search--accounts input { height: 34px; }
.wb2-chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--sp-border-strong, var(--border-subtle)); border-radius: 999px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background-color .12s ease; }
.wb2-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-chip:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.wb2-chip.is-on { color: var(--text-primary); border-color: var(--text-primary); background: var(--hover); box-shadow: inset 0 0 0 1px var(--text-primary); }
.wb2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #2e7d4f); flex: none; }
.wb2-dot.is-bad { background: var(--danger, #b3261e); }

/* chat picker */
.wb2-pickbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wb2-search { position: relative; flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; }
.wb2-search .wb2-i { position: absolute; left: 10px; color: var(--text-tertiary); pointer-events: none; }
.wb2-search input { width: 100%; height: 36px; padding: 0 12px 0 32px; font: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--sp-border-strong, var(--border-subtle)); border-radius: var(--r-sm, 10px); }
.wb2-search input:focus { border-color: var(--text-secondary); }
.wb2-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: var(--r-sm, 10px); }
.wb2-seg--wide { display: flex; width: 100%; max-width: 30rem; }
.wb2-seg--wide .wb2-seg-btn { flex: 1; }
.wb2-seg-btn { appearance: none; border: 0; background: transparent; padding: 6px 14px; font: inherit; font-size: 12.5px; color: var(--text-secondary); border-radius: calc(var(--r-sm, 10px) - 2px); cursor: pointer; white-space: nowrap; }
.wb2-seg-btn:hover { color: var(--text-primary); }
.wb2-seg-btn.is-on { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; box-shadow: 0 0 0 1px var(--border-subtle); }
.wb2-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--bg-elevated); }
.wb2-row { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 14px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.wb2-row:last-child { border-bottom: 0; }
.wb2-row:hover { background: var(--hover); }
.wb2-row.is-on { background: var(--hover); }
.wb2-row input { width: 16px; height: 16px; flex: none; accent-color: var(--brand-action, #1d1c18); }
.wb2-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wb2-row-title { font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-row-sub { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-row-id { flex: none; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wb2-banner { margin: 0; padding: 9px 14px; font-size: 12px; color: var(--danger, #b3261e); background: var(--hover); border-bottom: 1px solid var(--border-subtle); }
.wb2-more { display: block; width: 100%; padding: 10px; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 0; border-top: 1px solid var(--border-subtle); cursor: pointer; }
.wb2-more:hover { color: var(--text-primary); background: var(--hover); }
.wb2-empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.wb2-manual { display: flex; gap: 8px; }
.wb2-manual input { flex: 1; min-width: 0; }

/* tabs */
.wb2-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-subtle); margin: 0 4px; }
.wb2-tabs::-webkit-scrollbar { display: none; }
.wb2-tab { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px 11px; margin-bottom: -1px; font: inherit; font-size: 13px; color: var(--text-secondary); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.wb2-tab:hover { color: var(--text-primary); }
html[data-sp-theme][data-sp-theme] .wb2 .wb2-tab { background: transparent; border-radius: 0; border-bottom: 2px solid transparent; }
html[data-sp-theme][data-sp-theme] .wb2 .wb2-tab:hover { background: var(--hover); }
html[data-sp-theme][data-sp-theme] .wb2 .wb2-tab.is-current { color: var(--text-primary); font-weight: 600; background: transparent; border-bottom-color: var(--text-primary); }
.wb2-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--brand-action-text); background: var(--brand-action); border-radius: 999px; }

/* panels + forms */
.wb2-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.wb2-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.wb2-panel-head p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; max-width: 44rem; }
.wb2-form { display: flex; flex-direction: column; gap: 18px; max-width: 46rem; }
.wb2-field { display: flex; flex-direction: column; gap: 8px; }
.wb2-field--narrow { max-width: 22rem; }
.wb2-field .ui-label-strong { margin: 0; }
.wb2-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .wb2 textarea.wb2-textarea { height: auto; min-height: 132px; resize: vertical; line-height: 1.6; padding: 10px 12px; }
.wb2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb2-grid3 { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 16px; }
.wb2-inline { display: flex; gap: 8px; }
.wb2-inline .ui-input:first-child { flex: 1; min-width: 0; }
.wb2-sub { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); max-width: 28rem; }
.wb2-sub-title { margin: 22px 0 10px; font-size: 13px; font-weight: 600; }
.wb2-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.wb2-check input { width: 16px; height: 16px; accent-color: var(--brand-action, #1d1c18); }
.wb2-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
.wb2-fmt { appearance: none; min-width: 34px; height: 30px; padding: 0 9px; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-xs, 8px); cursor: pointer; }
.wb2-fmt:hover { color: var(--text-primary); border-color: var(--sp-border-strong, var(--text-tertiary)); }
.wb2-preview { padding: 10px 12px; border: 1px dashed var(--sp-border-strong, var(--border-subtle)); border-radius: var(--r-sm, 10px); font-size: 13px; line-height: 1.6; }
.wb2-preview > .wb2-muted { display: block; margin-bottom: 4px; }
.wb2-spoiler { background: var(--text-tertiary); color: transparent; border-radius: 3px; }
.wb2-linkish { text-decoration: underline; text-underline-offset: 3px; }
.wb2-preview blockquote { margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--sp-border-strong, var(--border-subtle)); color: var(--text-secondary); }
.wb2-preview code, .wb2-preview pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--hover); padding: 1px 4px; border-radius: 4px; }
.wb2-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.wb2-actions .ui-btn-primary, .wb2-actions .ui-btn-danger { display: inline-flex; align-items: center; gap: 8px; }
.wb2-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.wb2-summary strong { color: var(--text-primary); }
.wb2-radios { display: flex; flex-direction: column; gap: 8px; max-width: 30rem; }
.wb2-radio { appearance: none; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px 14px; font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); cursor: pointer; }
.wb2-radio:hover { border-color: var(--text-tertiary); }
.wb2-radio.is-on { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.wb2-radio strong { display: block; font-size: 13px; font-weight: 600; }
.wb2-radio small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.wb2-radio-dot { width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1.5px solid var(--sp-border-strong, var(--text-tertiary)); border-radius: 50%; position: relative; }
.wb2-radio.is-on .wb2-radio-dot { border-color: var(--text-primary); }
.wb2-radio.is-on .wb2-radio-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--text-primary); }

/* tables, badges, rules, jobs */
.wb2-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.wb2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb2-table th { padding: 9px 14px; text-align: left; font-weight: 500; font-size: 11.5px; color: var(--text-tertiary); background: var(--hover); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.wb2-table td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--border-subtle); line-height: 1.5; }
.wb2-table tr:last-child td { border-bottom: 0; }
.wb2-table--tight td { padding: 8px 14px; }
.wb2-td-actions { text-align: right; white-space: nowrap; }
.wb2-sub-line { margin-top: 1px; font-size: 11.5px; color: var(--text-tertiary); word-break: break-all; }
.wb2-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: 11.5px; font-weight: 500; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); white-space: nowrap; }
.wb2-badge--ok { color: var(--success, #2e7d4f); border-color: color-mix(in srgb, var(--success, #2e7d4f) 35%, transparent); }
.wb2-badge--bad { color: var(--danger, #b3261e); border-color: color-mix(in srgb, var(--danger, #b3261e) 35%, transparent); }
.wb2-badge--warn { color: var(--warning, #b7791f); border-color: color-mix(in srgb, var(--warning, #b7791f) 40%, transparent); }
.wb2-badge--run { color: var(--text-primary); border-color: var(--text-secondary); }
.wb2-badge--muted { color: var(--text-tertiary); }
.wb2-kw { display: inline-block; margin: 0 4px 2px 0; padding: 1px 7px; font-size: 11.5px; color: var(--text-secondary); background: var(--hover); border-radius: 6px; }
.wb2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; margin-bottom: 18px; }
.wb2-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.wb2-mini strong { display: block; font-size: 13px; }
.wb2-mini span { font-size: 12px; color: var(--text-tertiary); }
.wb2-mini small { flex-basis: 100%; }
.wb2-tpl { appearance: none; position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 40px 14px 14px; font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); cursor: pointer; }
.wb2-tpl:hover { border-color: var(--text-tertiary); }
.wb2-tpl strong { font-size: 13px; }
.wb2-tpl span { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.wb2-tpl .wb2-i { position: absolute; right: 14px; top: 50%; margin-top: -8px; color: var(--text-tertiary); }
.wb2-joblist { display: flex; flex-direction: column; gap: 10px; }
.wb2-job { border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); padding: 12px 14px 12px 10px; }
.wb2-job-head { display: flex; align-items: center; gap: 8px; }
.wb2-job-toggle { appearance: none; border: 0; background: none; padding: 4px; color: var(--text-tertiary); cursor: pointer; display: inline-flex; }
.wb2-job-toggle:hover { color: var(--text-primary); }
.wb2-chev { transition: transform .12s ease; transform: rotate(-90deg); }
.wb2-job.is-open .wb2-chev { transform: rotate(0); }
.wb2-job-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.wb2-job-main strong { font-size: 13px; white-space: nowrap; }
.wb2-job-main span { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-job-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.wb2-job-meta time { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wb2-progress { height: 3px; margin: 10px 0 8px 28px; background: var(--hover); border-radius: 3px; overflow: hidden; }
.wb2-progress i { display: block; height: 100%; background: var(--text-primary); transition: width .3s ease; }
.wb2-job.is-final .wb2-progress i { background: var(--text-tertiary); }
.wb2-job-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-left: 28px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.wb2-job-actions { display: inline-flex; gap: 14px; }
.wb2-job-rows { margin: 12px 0 0 28px; display: flex; flex-direction: column; gap: 10px; }

/* modal + toast */
.wb2-modal-wrap { overscroll-behavior: contain; position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--sp-overlay, rgba(26, 25, 21, .38)); }
.wb2-modal { width: min(32rem, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); box-shadow: var(--shadow-lg, 0 24px 64px -12px rgba(0, 0, 0, .3)); }
.wb2-modal h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.wb2-modal-body { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.wb2-modal-body p { margin: 0; }
.wb2-modal-body strong { color: var(--text-primary); }
.wb2-modal-require { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--text-secondary); }
.wb2-modal-error { margin: 10px 0 0; font-size: 12.5px; color: var(--danger, #b3261e); }
.wb2-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.wb2-msgbox { padding: 10px 12px; max-height: 9rem; overflow-y: auto; font-size: 13px; line-height: 1.6; color: var(--text-primary); background: var(--hover); border-radius: var(--r-sm, 10px); word-break: break-word; }
.wb2-sumlist { margin: 0; padding: 0 0 0 18px; font-size: 12.5px; color: var(--text-secondary); }
.wb2-toasts { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.wb2-toast { max-width: min(30rem, calc(100vw - 32px)); padding: 10px 16px; font-size: 13px; color: var(--brand-action-text, #fff); background: var(--brand-action, #1d1c18); border-radius: var(--r-sm, 10px); box-shadow: var(--shadow-md, 0 8px 24px -6px rgba(0, 0, 0, .3)); transition: opacity .4s ease, transform .4s ease; }
.wb2-toast--bad { background: var(--danger, #b3261e); color: #fff; }
.wb2-toast.is-out { opacity: 0; transform: translateY(6px); }

@media (max-width: 720px) {
  .wb2-table { min-width: 34rem; }
  .wb2-card { padding: 16px; }
  .wb2-grid2, .wb2-grid3 { grid-template-columns: 1fr; }
  .wb2-job-head { flex-wrap: wrap; }
  .wb2-job-meta { width: 100%; padding-left: 30px; }
  .wb2-job-main { flex-wrap: wrap; gap: 2px 8px; }
  .wb2-panel-head { flex-direction: column; }
  .wb2-actions { flex-direction: column; align-items: stretch; }
  .wb2-actions .ui-btn-primary, .wb2-actions .ui-btn-danger { justify-content: center; }
  .wb2-list { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .wb2-toast, .wb2-progress i, .wb2-chev { transition: none; } }
.wb2.is-empty .wb2-tabs, .wb2.is-empty .wb2-panel { display: none; }
.wb2-emptycta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 0; }
.wb2-emptycta p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* ==== 1.0.94: account management page (accounts-r2.js) =========================================================== */
.acc2 { display: flex; flex-direction: column; gap: 14px; padding-bottom: 56px; color: var(--text-primary); }
.acc2 *, .acc2 *::before, .acc2 *::after { box-sizing: border-box; }
.acc2-i { width: 15px; height: 15px; flex: none; }
.acc2-i--sm { width: 12px; height: 12px; opacity: .7; }
.acc2-spacer { flex: 1 1 0; min-width: 0; }

/* regions that are empty take no space (the page is a flex column with a gap) */
.acc2 > div[data-region]:empty { display: none; }

/* toolbar */
.acc2-bar { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); }
.acc2-row, .acc2-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.acc2-row { justify-content: space-between; row-gap: 10px; }
.acc2-grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.acc2-grp--left { flex: 1 1 auto; }
.acc2-grp--right { margin-left: auto; }
.acc2-strip[hidden] { display: none; }
.acc2-strip { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.acc2-search { position: relative; flex: 1 1 260px; max-width: 30rem; min-width: 200px; display: flex; align-items: center; }
.acc2-search .acc2-i { position: absolute; left: 11px; color: var(--text-tertiary); pointer-events: none; z-index: 1; }
html[data-sp-theme] .acc2 .acc2-search input { width: 100%; padding-left: 34px; }
html[data-sp-theme] .acc2 .acc2-select { width: auto; min-width: 8.5rem; max-width: 14rem; padding-left: 12px; }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .acc2 .acc2-select--tag { height: 30px; min-height: 30px; min-width: 7rem; font-size: 12.5px; border-radius: 999px; padding-left: 12px; }
.acc2-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: var(--r-sm, 10px); }
.acc2-seg-btn { appearance: none; border: 0; background: transparent; height: 30px; padding: 0 12px; font: inherit; font-size: 12.5px; color: var(--text-secondary); border-radius: calc(var(--r-sm, 10px) - 2px); cursor: pointer; white-space: nowrap; }
.acc2-seg-btn:hover { color: var(--text-primary); }
.acc2-seg-btn.is-on { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; box-shadow: 0 0 0 1px var(--border-subtle); }
.acc2-seg-btn:disabled { opacity: .45; cursor: not-allowed; }

.acc2 .acc2-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm, 10px); cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease; }
.acc2 .acc2-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--text-tertiary); }
.acc2 .acc2-btn:active:not(:disabled) { transform: scale(.975); }
.acc2 .acc2-btn:disabled { opacity: .45; cursor: not-allowed; }
.acc2 .acc2-btn[aria-pressed="true"] { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.acc2 .acc2-btn--primary { color: var(--brand-action-text, #fff); background: var(--brand-action); border-color: var(--brand-action); }
.acc2 .acc2-btn--primary:hover:not(:disabled) { color: var(--brand-action-text, #fff); background: var(--brand-action-hover); border-color: var(--brand-action-hover); }
.acc2 .acc2-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.acc2 .acc2-btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
.acc2 .acc2-btn--ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
.acc2 .acc2-btn--sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.acc2 .acc2-btn--icon { width: 34px; padding: 0; flex: none; }
.acc2 .acc2-spin { width: 13px; height: 13px; border-width: 2px; }
.acc2-icon-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--text-tertiary); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.acc2-icon-btn:hover { color: var(--text-primary); background: var(--hover); }
.acc2-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 3px; }
.acc2-link:hover { color: var(--text-primary); text-decoration-color: currentColor; }

/* status filter */
.acc2-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.acc2-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: border-color .12s ease, color .12s ease, background-color .12s ease; }
.acc2-chip:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.acc2-chip.is-on { color: var(--text-primary); border-color: var(--text-primary); background: var(--hover); font-weight: 600; }
.acc2-chip-n { font-size: 12px; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.acc2-chip.is-on .acc2-chip-n { color: var(--text-secondary); }
.acc2-filtered { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.acc2-filtered[hidden] { display: none; }
.acc2-toggles { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.acc2-toggle { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--text-tertiary); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm, 10px); cursor: pointer; white-space: nowrap; }
.acc2-toggle:hover { color: var(--text-primary); background: var(--hover); }
.acc2-toggle[aria-pressed="true"] { color: var(--text-primary); }

/* batch bar, job, results */
.acc2-batch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; background: var(--hover); border: 1px solid var(--sp-border-strong); border-radius: var(--r-md, 14px); }
.acc2-check-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.acc2-check-all input, .acc2-check input, .acc2-check-row input { width: 16px; height: 16px; accent-color: var(--brand-action, #1d1c18); }
.acc2-batch-count { font-size: 13px; color: var(--text-secondary); }
.acc2-batch-count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.acc2-batch-note { flex-basis: 100%; font-size: 12px; color: var(--text-tertiary); }
.acc2-job { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); }
.acc2-job-text { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
.acc2-job-text span { color: var(--text-tertiary); font-size: 12px; }
.acc2-progress { flex: 1 1 140px; height: 4px; background: var(--hover); border-radius: 999px; overflow: hidden; }
.acc2-progress i { display: block; height: 100%; background: var(--brand-action); border-radius: 999px; transition: width .3s ease; }
.acc2-results { padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); }
.acc2-results header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc2-results h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.acc2-results ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 240px; overflow-y: auto; border-top: 1px solid var(--border-subtle); }
.acc2-results li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-subtle); }
.acc2-results li:last-child { border-bottom: 0; }
.acc2-res-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-res-msg { color: var(--text-tertiary); text-align: right; }
.acc2-results li.is-bad .acc2-res-msg { color: var(--danger); }
.acc2-results footer { margin-top: 12px; }

/* cards */
.acc2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: stretch; }
.acc2-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
.acc2-card:hover { border-color: var(--sp-border-strong); box-shadow: var(--shadow-sm); }
.acc2-card.is-selected { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.acc2-card.is-drag { opacity: .5; }
.acc2-card.is-drop { outline: 2px dashed var(--text-tertiary); outline-offset: 3px; }
.acc2-check { position: absolute; top: 14px; left: 12px; z-index: 2; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; }
.acc2-grid.is-selecting .acc2-check { display: flex; }
.acc2-grid.is-selecting .acc2-card { cursor: pointer; }
.acc2-grid.is-selecting .acc2-identity { padding-left: 28px; }
.acc2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.acc2-identity { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.acc2-avatar { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; font: 500 12px var(--font-mono); color: var(--text-tertiary); background: var(--hover); border: 1px solid var(--border-subtle); border-radius: 12px; }
.acc2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc2-names { min-width: 0; }
.acc2-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.acc2-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-cc { flex: none; padding: 1px 5px; font: 600 10.5px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 5px; }
.acc2-remark { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-remark.is-empty { color: var(--text-tertiary); }
.acc2-side { position: relative; display: flex; align-items: center; gap: 6px; flex: none; max-width: 48%; }
.acc2-side .ui-badge { max-width: 100%; }
.acc2-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sp-theme] .acc2 .acc2-grip { position: absolute; }
.acc2-grip { appearance: none; right: calc(100% + 4px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: var(--text-tertiary); background: var(--bg-elevated); border: 0; border-radius: 6px; cursor: grab; opacity: 0; transition: opacity .12s ease; }
.acc2-card:hover .acc2-grip, .acc2-card:focus-within .acc2-grip { opacity: 1; }
.acc2-grip:hover { color: var(--text-primary); background: var(--hover); }
.acc2-grip:active { cursor: grabbing; }
.acc2-grid.is-selecting .acc2-grip { display: none; }

.acc2-meta { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); min-width: 0; }
.acc2-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.acc2 .acc2-kv { appearance: none; display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "i k" ". v"; column-gap: 6px; row-gap: 1px; align-items: center; min-width: 0; margin: 0 -6px; padding: 4px 6px; font: inherit; font-size: 12px; text-align: left; color: var(--text-tertiary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.acc2 .acc2-kv:hover { background: var(--hover); }
.acc2-kv > svg { grid-area: i; width: 13px; height: 13px; }
.acc2-k { grid-area: k; }
.acc2-v { grid-area: v; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.acc2-v.is-shown { color: var(--text-primary); }
.acc2-v.is-none { color: var(--text-tertiary); font-family: inherit; }
.acc2-v.is-bad { color: var(--danger); font-family: inherit; }
.acc2-info { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); }
.acc2-dot { opacity: .6; }
.acc2-reason { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-reason::before { content: '原因：'; color: var(--text-tertiary); }
.acc2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.acc2 .acc2-tag { appearance: none; height: 22px; padding: 0 9px; font: inherit; font-size: 11.5px; color: var(--text-secondary); background: transparent; border: 1px solid var(--sp-border-strong); border-radius: 999px; cursor: pointer; }
.acc2 .acc2-tag:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.acc2 .acc2-tag.is-on { color: var(--text-primary); border-color: var(--text-primary); background: var(--hover); }
.acc2 .acc2-tag-add { color: var(--text-tertiary); border-style: dashed; }
.acc2-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.acc2-actions .acc2-btn:not(.acc2-btn--icon) { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.acc2-actions .acc2-btn span { overflow: hidden; text-overflow: ellipsis; }

/* list view: one row per account */
.acc2-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.acc2-grid[data-view="list"] .acc2-card { display: grid; grid-template-columns: minmax(290px, 1.15fr) minmax(0, 2.3fr) auto; align-items: center; gap: 8px 22px; padding: 12px 16px; }
.acc2-grid[data-view="list"] .acc2-check { top: 50%; transform: translateY(-50%); }
.acc2-grid[data-view="list"] .acc2-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding-top: 0; border-top: 0; }
.acc2-grid[data-view="list"] .acc2-kvs { display: flex; gap: 16px; }
.acc2-grid[data-view="list"] .acc2 .acc2-kv, .acc2-grid[data-view="list"] .acc2-kv { margin: 0; min-width: 9rem; }
.acc2-grid[data-view="list"] .acc2-tags { flex-basis: 100%; }
.acc2-grid[data-view="list"] .acc2-actions { width: 280px; margin: 0; padding-top: 0; border-top: 0; }
.acc2-grid[data-view="list"] .acc2-side { max-width: none; }
@media (max-width: 1180px) {
  .acc2-grid[data-view="list"] .acc2-card { grid-template-columns: minmax(0, 1fr) auto; }
  .acc2-grid[data-view="list"] .acc2-meta { grid-column: 1 / -1; grid-row: 2; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
  .acc2-grid[data-view="list"] .acc2-actions { grid-row: 1; grid-column: 2; }
}
@media (max-width: 760px) {
  .acc2-grid[data-view="list"] .acc2-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .acc2-grid[data-view="list"] .acc2-meta { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
  .acc2-grid[data-view="list"] .acc2-kvs { display: grid; }
  .acc2-grid[data-view="list"] .acc2-actions { width: auto; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
}

/* loading + empty */
.acc2-skel { gap: 14px; pointer-events: none; }
.acc2-skel i { display: block; background: var(--hover); border-radius: 8px; animation: acc2-pulse 1.4s ease-in-out infinite; }
.acc2-skel-row { display: flex; align-items: center; gap: 12px; }
.acc2-skel-av { width: 40px; height: 40px; flex: none; border-radius: 12px !important; }
.acc2-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.acc2-skel-lines i { height: 11px; width: 55%; }
.acc2-skel-lines i + i { width: 32%; height: 9px; }
.acc2-skel-block { height: 36px; }
.acc2-skel-block--s { height: 28px; width: 60%; }
@keyframes acc2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.acc2-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); }
.acc2-empty--small { padding: 36px 24px; }
.acc2-empty-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 4px; color: var(--text-tertiary); background: var(--hover); border-radius: 14px; }
.acc2-empty-icon .acc2-i { width: 22px; height: 22px; }
.acc2-empty h3 { margin: 0; font-size: 15px; font-weight: 600; }
.acc2-empty p { margin: 0; max-width: 28rem; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.acc2-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* popover menu */
.acc2-menu { position: fixed; z-index: 90; min-width: 13rem; max-height: calc(100vh - 16px); overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); box-shadow: var(--shadow-lg); }
.acc2-menu-item { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; font: inherit; font-size: 13px; text-align: left; color: var(--text-primary); background: transparent; border: 0; border-radius: var(--r-xs, 8px); cursor: pointer; white-space: nowrap; }
.acc2-menu-item .acc2-i { color: var(--text-tertiary); }
.acc2-menu-item:hover:not(:disabled), .acc2-menu-item:focus-visible { background: var(--hover); outline: none; }
.acc2-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.acc2-menu-item.is-danger, .acc2-menu-item.is-danger .acc2-i { color: var(--danger); }
.acc2-menu-item.is-danger:hover:not(:disabled), .acc2-menu-item.is-danger:focus-visible { background: var(--danger-soft); }
.acc2-menu-sep { height: 1px; margin: 5px 4px; background: var(--border-subtle); }
.acc2-menu-head { padding: 6px 10px 4px; font-size: 11.5px; color: var(--text-tertiary); }

/* dialogs of this page */
.acc2-modal-wrap--top { z-index: 10100; }
.acc2-modal--wide { width: min(40rem, 100%); }
.acc2-modal-msg { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.acc2-modal-error { margin: 8px 0 0; font-size: 12.5px; color: var(--danger); }
.acc2-modal-error[hidden] { display: none; }
.acc2-form { display: flex; flex-direction: column; }
.acc2-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-secondary); }
.acc2-field[hidden] { display: none; }
.acc2-check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.acc2-hint { margin: 0; font-size: 12px; color: var(--text-tertiary); }
.acc2-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.acc2-suggest > span { margin-right: 2px; font-size: 11.5px; color: var(--text-tertiary); }
.acc2-suggest button { appearance: none; height: 24px; padding: 0 10px; font: inherit; font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px solid var(--sp-border-strong); border-radius: 999px; cursor: pointer; }
.acc2-suggest button:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.acc2-suggest button.is-on { color: var(--text-primary); border-color: var(--text-primary); background: var(--hover); }
.acc2-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-bottom: 4px; }
.acc2-preview span { padding: 2px 9px; font-size: 11.5px; color: var(--text-secondary); background: var(--hover); border-radius: 999px; }

/* narrow screens */
@media (max-width: 760px) {
  .acc2-bar { padding: 12px; }
  .acc2-spacer { display: none; }
  .acc2-grp { width: 100%; }
  .acc2-search { flex-basis: 100%; max-width: none; }
  html[data-sp-theme] .acc2 .acc2-select { flex: 1 1 9rem; max-width: none; }
  .acc2-seg { flex: 0 0 auto; }
  .acc2-grp--right > .acc2-btn { flex: 1 1 6rem; padding: 0 8px; }
  .acc2-grid { grid-template-columns: minmax(0, 1fr); }
  .acc2-grip { display: none; }
}
@media (hover: none) { .acc2-grip { display: none; } }
@media (prefers-reduced-motion: reduce) { .acc2-skel i, .acc2-progress i, .acc2-card, .acc2 .acc2-btn { animation: none; transition: none; } }

/* ==== 1.0.95: devices and sessions, @SpamBot check, delete with Telegram logout ================================ */
/* the buttons of the page also appear inside this page's dialogs (they are attached to the body, outside .acc2) */
.acc2-modal .acc2-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm, 10px); cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease; }
.acc2-modal .acc2-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--text-tertiary); }
.acc2-modal .acc2-btn:active:not(:disabled) { transform: scale(.975); }
.acc2-modal .acc2-btn:disabled { opacity: .45; cursor: not-allowed; }
.acc2-modal .acc2-btn[aria-pressed="true"] { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.acc2-modal .acc2-btn--primary { color: var(--brand-action-text, #fff); background: var(--brand-action); border-color: var(--brand-action); }
.acc2-modal .acc2-btn--primary:hover:not(:disabled) { color: var(--brand-action-text, #fff); background: var(--brand-action-hover); border-color: var(--brand-action-hover); }
.acc2-modal .acc2-btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.acc2-modal .acc2-btn--danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
.acc2-modal .acc2-btn--ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
.acc2-modal .acc2-btn--sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.acc2-modal .acc2-btn--icon { width: 34px; padding: 0; flex: none; }
.acc2-modal .acc2-spin { width: 13px; height: 13px; border-width: 2px; }
html[data-sp-theme] .acc2-modal .acc2-select { width: auto; min-width: 8rem; padding-left: 12px; }
.acc2-modal .acc2-progress { width: 100%; flex: none; margin: 4px 0 8px; }
.acc2-reason--spam::before { content: '限制：'; }
.acc2-check-row--top { align-items: flex-start; }
.acc2-check-row--top > span { display: flex; flex-direction: column; gap: 3px; }
.acc2-check-row--top small { font-size: 12px; line-height: 1.55; color: var(--text-tertiary); }
.acc2-check-row--top input { margin-top: 2px; }
.acc2-dev-wrap { display: flex; flex-direction: column; gap: 20px; }
.acc2-dev-wrap h4 { margin: 0; font-size: 13.5px; font-weight: 600; }
.acc2-dev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.acc2-dev-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.acc2-dev { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.acc2-dev:last-child { border-bottom: 0; }
.acc2-dev-main { flex: 1 1 auto; min-width: 0; }
.acc2-dev-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.acc2-dev-tag { padding: 1px 8px; font-size: 11px; color: var(--text-primary); border: 1px solid var(--sp-border-strong); border-radius: 999px; }
.acc2-dev-tag--muted { color: var(--text-tertiary); }
.acc2-dev-sub { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.acc2-dev-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: 11.5px; color: var(--text-tertiary); }
.acc2-dev-meta span { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-dev-empty { padding: 22px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
.acc2-dev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.acc2-dev-confirm { margin-top: 10px; padding: 12px 14px; background: var(--hover); border: 1px solid var(--sp-border-strong); border-radius: var(--r-sm, 10px); }
.acc2-dev-confirm[hidden], .acc2-modal [hidden] { display: none; }
.acc2-dev-confirm p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.acc2-dev-confirm div { display: flex; justify-content: flex-end; gap: 8px; }
.acc2-ttl { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.acc2-ttl label { flex: 0 0 9.5rem; font-size: 13px; color: var(--text-secondary); }
.acc2-ttl .acc2-select { flex: 1 1 auto; max-width: 14rem; }
.acc2-ok { color: var(--success); }
.acc2-pre { margin: 6px 0 12px; padding: 10px 12px; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--font-mono); color: var(--text-secondary); background: var(--hover); border-radius: var(--r-sm, 10px); }
.acc2-spam-head { margin: 0 0 8px; font-size: 15px; }
@media (max-width: 760px) { .acc2-ttl { flex-wrap: wrap; } .acc2-ttl label { flex-basis: 100%; } .acc2-dev { flex-wrap: wrap; } }
/* ==== 1.0.96: task orchestration page (tasks-r2.js) ================================================================= */
.tk2 .acc2-bar { gap: 12px; }
.tk2-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tk2-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); transition: border-color .15s ease, box-shadow .15s ease; }
.tk2-card:hover { border-color: var(--sp-border-strong); box-shadow: var(--shadow-sm); }
.tk2-card.is-selected { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.tk2-card.is-flash { animation: tk2-flash 1.6s ease; }
@keyframes tk2-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 18%, transparent); } }
.tk2-card.is-paused .tk2-tile, .tk2-card.is-paused .tk2-name-text, .tk2-card.is-paused .tk2-sub, .tk2-card.is-paused .tk2-accts { opacity: .6; }

.tk2-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk2-check { display: none; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; cursor: pointer; }
.tk2-list.is-selecting .tk2-check { display: flex; }
.tk2-check input { width: 16px; height: 16px; accent-color: var(--brand-action, #1d1c18); }
.tk2-tile { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; overflow: hidden; color: var(--text-tertiary); background: var(--hover); border: 1px solid var(--border-subtle); border-radius: 12px; }
.tk2-tile .acc2-i { width: 18px; height: 18px; }
.tk2-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tk2-tile.has-img .acc2-i { opacity: 0; }
.tk2-title { flex: 1 1 auto; min-width: 0; }
.tk2-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.tk2-name .ui-badge { flex: none; max-width: 100%; }
.tk2 .tk2-name-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--text-primary); text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.tk2 .tk2-name-btn:hover .tk2-chev { color: var(--text-primary); }
.tk2-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk2-chev { width: 13px; height: 13px; flex: none; color: var(--text-tertiary); transition: transform .18s ease; }
.tk2-card.is-open .tk2-chev { transform: rotate(180deg); }
.tk2-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.tk2-sub > * { min-width: 0; overflow-wrap: anywhere; }
.tk2-muted { color: var(--text-tertiary); }
.tk2-warn { color: var(--warning); }
.tk2-bad { color: var(--danger); }
.tk2-ok { color: var(--success); }
.tk2-run { position: relative; padding-left: 20px !important; }
.tk2-run::before { content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--text-primary); animation: tk2-pulse 1.3s ease-in-out infinite; }
@keyframes tk2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tk2 button.tk2-hits { appearance: none; border: 0; cursor: pointer; font-family: inherit; }
.tk2 button.tk2-hits:hover { filter: brightness(.95); }

.tk2-side { display: flex; align-items: center; gap: 16px; flex: none; }
.tk2-days { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.tk2-d { display: block; width: 5px; height: 16px; border-radius: 2px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.tk2-d--ok { background: color-mix(in srgb, var(--success) 85%, transparent); box-shadow: none; }
.tk2-d--part { background: var(--warning); box-shadow: none; }
.tk2-d--bad { background: var(--danger); box-shadow: none; }
.tk2-d--wait { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
.tk2 .tk2-switch { appearance: none; position: relative; flex: none; width: 38px; height: 22px; padding: 0; background: var(--hover); border: 1px solid var(--sp-border-strong); border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.tk2 .tk2-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bg-elevated); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.tk2 .tk2-switch[aria-checked="true"] { background: var(--brand-action); border-color: var(--brand-action); }
.tk2 .tk2-switch[aria-checked="true"] i { transform: translateX(16px); }
.tk2 .tk2-switch[aria-checked="mixed"] { background: color-mix(in srgb, var(--brand-action) 45%, var(--hover)); border-color: var(--sp-border-strong); }
.tk2 .tk2-switch[aria-checked="mixed"] i { transform: translateX(8px); }
.tk2 .tk2-switch:disabled { opacity: .5; cursor: progress; }
.tk2 .tk2-switch:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.tk2-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0; padding: 8px 12px; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--danger); background: var(--danger-soft); border-radius: 10px; overflow-wrap: anywhere; }
.tk2-reason b { font-weight: 600; }

.tk2-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); min-width: 0; }
.tk2-accts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 0; }
.tk2-acct { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 10px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; }
.tk2-acct i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--border-strong, var(--text-tertiary)); opacity: .7; }
.tk2-acct.is-ok i { background: var(--success); opacity: 1; }
.tk2-acct.is-fail i { background: var(--danger); opacity: 1; }
.tk2-acct.is-run i { background: var(--text-primary); opacity: 1; animation: tk2-pulse 1.3s ease-in-out infinite; }
.tk2-acct.is-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.tk2-acct.is-bad i { background: var(--danger); opacity: 1; }
.tk2-acct.is-off { opacity: .55; }
.tk2-acct--more, .tk2-acct--all { color: var(--text-tertiary); }
.tk2-last { flex: 0 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.tk2-last:empty { display: none; }
.tk2 .tk2-last-btn { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 0; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 3px; }
.tk2 .tk2-last-btn:hover { color: var(--text-primary); text-decoration-color: currentColor; }
.tk2 .tk2-last-btn.is-bad { color: var(--danger); }
.tk2-dotmark { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--text-tertiary); }
.tk2-last-btn.is-ok .tk2-dotmark { background: var(--success); }
.tk2-last-btn.is-bad .tk2-dotmark { background: var(--danger); }
.tk2-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.tk2-detail { display: flex; flex-direction: column; margin: 0; padding-top: 4px; border-top: 1px solid var(--border-subtle); }
.tk2-detail > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; line-height: 1.6; }
.tk2-detail > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tk2-detail dt { color: var(--text-tertiary); }
.tk2-detail dd { margin: 0; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.tk2-pill { display: inline-block; margin: 0 6px 4px 0; padding: 1px 9px; font-size: 12px; color: var(--text-secondary); background: var(--hover); border-radius: 999px; }
.tk2-flow { margin: 0; padding-left: 1.4em; list-style: decimal; color: var(--text-secondary); }
.tk2-flow li { list-style: inherit; }
.tk2-flow li { padding: 1px 0; }
.tk2-pa { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tk2-pa li { display: grid; grid-template-columns: minmax(6rem, 10rem) 6rem minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.tk2-pa-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tk2-pa-state { color: var(--text-secondary); }
.tk2-pa-last { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }

.tk2-skel { gap: 14px; pointer-events: none; }
.tk2-skel .tk2-tile { background: var(--hover); border-color: transparent; }
.tk2-bone { display: block; height: 11px; background: var(--hover); border-radius: 6px; animation: acc2-pulse 1.4s ease-in-out infinite; }
.tk2-bone + .tk2-bone { margin-top: 9px; height: 9px; }
.tk2-skel .tk2-row { border-top-color: transparent; }

.tk2-foot { margin: 2px 2px 0; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.tk2-foot a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 3px; }
.tk2-foot a:hover { color: var(--text-primary); text-decoration-color: currentColor; }
.tk2-foot:empty { display: none; }

.tk2-menu { min-width: 15rem; max-width: 22rem; }
.tk2-menu .acc2-menu-item { height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; align-items: flex-start; }
.tk2-menu .acc2-menu-item .acc2-i { margin-top: 2px; }
.tk2-menu-text { display: flex; flex-direction: column; min-width: 0; }
.tk2-menu-text small { margin-top: 1px; font-size: 11.5px; line-height: 1.4; color: var(--text-tertiary); white-space: normal; }
.tk2-menu .acc2-menu-item.is-danger .tk2-menu-text small { color: var(--danger); }

.tk2-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.tk2-hint { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.tk2-hint b { color: var(--text-primary); font-weight: 600; }
.tk2-error { margin: 10px 0 0; font-size: 12.5px; color: var(--danger); }
.tk2-error[hidden] { display: none; }

@media (max-width: 820px) {
  .tk2-card { padding: 14px; }
  .tk2-head { flex-wrap: wrap; }
  .tk2-title { flex: 1 1 calc(100% - 60px); }
  .tk2-side { width: 100%; justify-content: space-between; padding-left: 52px; }
  .tk2-actions { width: 100%; margin-left: 0; }
  .tk2-actions .acc2-btn:not(.acc2-btn--icon) { flex: 1 1 0; min-width: 0; }
  .tk2-detail > div { grid-template-columns: 1fr; gap: 2px; }
  .tk2-pa li { grid-template-columns: minmax(0, 1fr) auto; }
  .tk2-pa-state { grid-column: 2; grid-row: 1; text-align: right; }
  .tk2-pa-last { grid-column: 1 / -1; }
  .tk2-pa li .acc2-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .tk2-run::before, .tk2-acct.is-run i, .tk2-bone, .tk2-card.is-flash { animation: none; }
}
/* ==== 1.0.97: result rules + hooks dialog (tasks-r3.js) ============================================================ */
.tk2 button.tk2-hookpill { appearance: none; border: 0; cursor: pointer; font-family: inherit; }
.tk2 button.tk2-hookpill:hover { filter: brightness(.95); }
.tk2-rh { margin: 0 0 8px; padding: 0; list-style: none; color: var(--text-secondary); }
.tk2-rh li { padding: 1px 0; overflow-wrap: anywhere; }
.tk2-detail dd p { margin: 0; }

.tk2-modal--xl { width: min(46rem, 100%); }
.tk2-modal--xl .acc2-modal-body { display: flex; flex-direction: column; gap: 14px; }
.tk2-sec-title { margin: 6px 0 -4px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tk2-ev { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; }
.tk2-ev-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.tk2-ev-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; }
.tk2-ev-head .tk2-muted { font-size: 12px; }
.tk2-ev-empty { margin: 0; font-size: 12.5px; }
.tk2-spacer { flex: 1 1 0; min-width: 0; }
html[data-sp-theme] .tk2-modal--xl .tk2-count { width: 4.2rem; height: 28px; min-height: 28px; padding: 0 8px; text-align: center; }
.tk2-act { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--hover); border-radius: 10px; }
.tk2-act-head { display: flex; align-items: center; gap: 8px; }
.tk2-act-head strong { font-size: 13px; }
html[data-sp-theme] .tk2-modal--xl .tk2-acc-select { min-width: 9rem; max-width: 12rem; height: 30px; font-size: 12.5px; }
.tk2-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.tk2-field--row { flex-direction: row; align-items: center; gap: 10px; }
.tk2-field--row select { max-width: 16rem; }
html[data-sp-theme] .tk2-modal--xl .tk2-field input[type="text"], html[data-sp-theme] .tk2-modal--xl .tk2-field input[type="number"], html[data-sp-theme] .tk2-modal--xl .tk2-field textarea, html[data-sp-theme] .tk2-modal--xl .tk2-field select { width: 100%; }
.tk2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tk2-check-row { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.tk2-check-row input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--brand-action, #1d1c18); }
.tk2-testres { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.tk2-testres[hidden] { display: none; }
.tk2-testres.is-ok, .tk2-probe-res.is-ok { color: var(--success); }
.tk2-testres.is-bad, .tk2-probe-res.is-bad { color: var(--danger); }
.tk2-probe-res { margin: 0; min-height: 1.5em; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.tk2-hooklog { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.tk2-hooklog li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 8px; align-items: baseline; }
.tk2-hooklog li > .tk2-dotmark { align-self: center; }
.tk2-hooklog li > span:nth-child(3) { grid-column: 2; }
.tk2-hooklog li:not(:has(.tk2-dotmark)) { display: block; }
.tk2-dotmark.is-ok { background: var(--success); }
.tk2-dotmark.is-bad { background: var(--danger); }
@media (max-width: 640px) { .tk2-two { grid-template-columns: 1fr; } .tk2-field--row { flex-direction: column; align-items: stretch; } }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .tk2-modal--xl textarea.ui-input { height: auto; min-height: 78px; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.tk2-modal--xl input, .tk2-modal--xl textarea, .tk2-modal--xl select { box-sizing: border-box; max-width: 100%; }
/* ==== 1.0.98: values on cards, daily digest dialog, recommended hooks (tasks-r4.js) ================================ */
.tk2-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.tk2-val { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 2px 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); white-space: nowrap; background: var(--hover); border-radius: 999px; }
.tk2-val b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tk2-val i { font-style: normal; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tk2-val i.is-up { color: var(--success); }
.tk2-val i.is-down { color: var(--danger); }
.tk2-val--more { color: var(--text-tertiary); }
.tk2-preset { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 12.5px; }
.tk2-pre { margin: 0; padding: 12px 14px; max-height: 18rem; overflow: auto; font: 12.5px/1.65 var(--font-ui, inherit); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); background: var(--hover); border-radius: 10px; }
html[data-sp-theme] .tk2-modal--xl .tk2-time { width: 9rem; }
.tk2-detail .tk2-rh b { font-weight: 600; color: var(--text-primary); }
/* ==== 1.0.99: proxy management page (proxies-r2.js) ================================================================ */
.px2 > div[data-region]:empty { display: none; }
.px2-sec { min-width: 0; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 14px); overflow: hidden; }
.px2-sec > div[data-region]:empty { display: none; }
.px2-sec[hidden] { display: none; }
.px2-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.px2-sec-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.px2-sec-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.px2-gnote { color: var(--text-secondary); }
.px2-gnote.is-warn { color: var(--warning); }
.px2-rbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 0 18px 12px; }
.px2-rbar .acc2-search { flex: 0 1 280px; min-width: 180px; }
.px2-rbar .acc2-chips { flex: 1 1 auto; }
html[data-sp-theme] .px2 .px2-rbar .acc2-select { max-width: 15rem; }

.px2-lhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; font-size: 12.5px; color: var(--text-tertiary); background: color-mix(in srgb, var(--hover) 55%, transparent); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.px2-sec > div[data-region="list"] > .px2-lhead:first-child { border-top: 0; }
.px2-lcount { font-variant-numeric: tabular-nums; }
.px2-check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; }
.px2-check input, .px2 .acc2-check-all input { width: 16px; height: 16px; accent-color: var(--brand-action, #1d1c18); }

/* proxy rows */
.px2-list, .px2-arows { display: flex; flex-direction: column; min-width: 0; }
.px2-row { display: grid; grid-template-columns: 28px minmax(220px, 1.45fr) minmax(220px, 1.4fr) 108px auto; align-items: center; gap: 8px 16px; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); transition: background .12s ease; }
.px2-row:last-child, .px2-arow:last-child { border-bottom: 0; }
.px2-row:hover, .px2-arow:hover { background: color-mix(in srgb, var(--hover) 55%, transparent); }
.px2-row.is-selected, .px2-arow.is-selected { background: var(--hover); }
.px2-id { min-width: 0; }
.px2-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.px2-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1.35; }
.px2-cat { flex: none; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; font-size: 11.5px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; }
.px2-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); box-shadow: 0 0 0 3px transparent; }
.px2-dot.is-ok { background: var(--success); }
.px2-dot.is-slow { background: var(--warning); }
.px2-dot.is-bad { background: var(--danger); }
.px2-dot.is-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
.px2-dot.is-queued { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-tertiary); opacity: .6; }
.px2-dot.is-run { background: var(--text-primary); animation: px2-pulse 1.2s ease-in-out infinite; }
@keyframes px2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.px2-sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 3px; padding-left: 16px; }
.px2-sub code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--font-mono); color: var(--text-secondary); }
.px2-proto { flex: none; font: 600 10.5px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--text-tertiary); }
.px2-health { min-width: 0; }
.px2-state { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); }
.px2-state.is-ok { color: var(--success); }
.px2-state.is-slow { color: var(--warning); }
.px2-state.is-bad { color: var(--danger); }
.px2-state.is-run { color: var(--text-primary); }
.px2-line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
.px2-why { min-width: 0; color: var(--danger); overflow-wrap: anywhere; }
.px2-when.is-stale { color: var(--warning); }
.px2-muted { color: var(--text-tertiary); }
.px2-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.px2-spark i { display: block; width: 4px; height: 14px; border-radius: 2px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.px2-spark i.is-ok { background: color-mix(in srgb, var(--success) 85%, transparent); box-shadow: none; }
.px2-spark i.is-slow { background: var(--warning); box-shadow: none; }
.px2-spark i.is-bad { background: var(--danger); box-shadow: none; }
.px2-pct { font-variant-numeric: tabular-nums; }
.px2-pct.is-low { color: var(--danger); }
.px2-use { min-width: 0; }
.px2 .px2-usebtn { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; font: inherit; font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.px2 .px2-usebtn:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.px2 .px2-usebtn.is-none { color: var(--text-tertiary); border-style: dashed; }
.px2-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
.px2-row.is-bad .px2-name { color: var(--text-primary); }
.px2-skel { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); pointer-events: none; }
.px2-skel > div { display: flex; flex-direction: column; gap: 9px; }

/* notice, bars */
.px2-notice { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border-subtle)); border-radius: var(--r-md, 14px); }
.px2-notice > .acc2-i { width: 18px; height: 18px; color: var(--warning); }
.px2-notice > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.px2-notice span { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* account rows */
.px2-arow { display: grid; grid-template-columns: 28px minmax(120px, 1fr) minmax(0, 2.2fr) auto; align-items: center; gap: 8px 14px; padding: 9px 18px; border-bottom: 1px solid var(--border-subtle); transition: background .12s ease; }
.px2-aname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.px2-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.px2-route .ui-badge { max-width: 100%; }
.px2-route small { min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); overflow-wrap: anywhere; }
.px2-route small.is-warn { color: var(--warning); }
.px2-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--border-subtle); }

/* dialogs */
.px2-modal--xl { width: min(60rem, 100%); }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .px2 textarea.px2-url, html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .px2-modal textarea.px2-url { height: auto; min-height: 8.5rem; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; resize: vertical; white-space: pre; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; }
.px2-secret { font-family: var(--font-mono); }
.px2-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.px2-hint--top { margin-bottom: 14px; }
.px2-hint code, .px2-dl code { font: 12.5px var(--font-mono); }
.px2-formats { margin: -4px 0 12px; font-size: 12.5px; color: var(--text-secondary); }
.px2-formats summary { cursor: pointer; width: fit-content; color: var(--text-secondary); }
.px2-formats summary:hover { color: var(--text-primary); }
.px2-formats ul { margin: 8px 0 0; padding-left: 1.3em; list-style: disc; line-height: 1.8; }
.px2-formats li { list-style: inherit; }
.px2-formats code { padding: 1px 5px; font: 12px var(--font-mono); background: var(--hover); border-radius: 5px; }
.px2-prev { list-style: none; margin: 0 0 14px; padding: 0; max-height: 15rem; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.px2-prev li { display: grid; grid-template-columns: 2.2rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 8px 10px; padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.px2-prev li:last-child { border-bottom: 0; }
.px2-ln { font: 11.5px var(--font-mono); color: var(--text-tertiary); text-align: right; }
.px2-pv { display: flex; align-items: center; gap: 6px; min-width: 0; }
.px2-pv code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--font-mono); }
.px2-pv .px2-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--font-mono); }
.px2-auth { display: inline-flex; color: var(--text-tertiary); }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .px2-prev .px2-pr { height: 28px; min-height: 28px; padding: 0 8px; font-size: 12.5px; }
.px2-pm { min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.px2-prev li.is-ok .px2-pm { color: var(--success); }
.px2-prev li.is-dup .px2-pm, .px2-prev li.is-dup .px2-pv { color: var(--text-tertiary); }
.px2-prev li.is-bad .px2-pm { color: var(--danger); }
.px2-prev li.is-wait .px2-pm { color: var(--text-tertiary); }
.px2-sum { margin-right: auto; align-self: center; font-size: 12.5px; color: var(--text-secondary); }
.px2-catfield { margin-bottom: 8px; }
.px2-seg { margin-bottom: 12px; width: fit-content; max-width: 100%; }
.px2-pfield { margin-bottom: 10px; }
.px2-dl { display: flex; flex-direction: column; margin: 0 0 14px; }
.px2-dl > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.6; }
.px2-dl > div:first-child { padding-top: 0; }
.px2-dl dt { color: var(--text-tertiary); }
.px2-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.px2-spark-wrap { margin-left: 6px; vertical-align: middle; }
.px2-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.px2-pills li { padding: 1px 10px; font-size: 12px; color: var(--text-secondary); background: var(--hover); border-radius: 999px; }
.px2-hist { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.px2-hist thead { position: sticky; top: 0; background: var(--bg-elevated); }
.px2-hist th { padding: 6px 8px; text-align: left; font-weight: 500; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.px2-hist td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.px2-hist tr.is-bad td:nth-child(2) { color: var(--danger); }
.px2-hist tr.is-ok td:nth-child(2) { color: var(--success); }
.px2-modal .acc2-modal-body { max-height: calc(100vh - 9rem); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.px2-histwrap { max-height: 15rem; overflow-y: auto; margin-bottom: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.px2-histwrap .px2-hist { margin: 0; }
.px2-dl .px2-state { font-size: 13px; }

@media (max-width: 1180px) {
  .px2-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .px2-use { grid-column: 2; grid-row: 2; }
  .px2-actions { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .px2-row { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 12px 14px; }
  .px2-check { grid-row: 1; align-self: start; }
  .px2-id { grid-column: 2 / -1; grid-row: 1; }
  .px2-health { grid-column: 2 / -1; grid-row: 2; }
  .px2-use { grid-column: 2; grid-row: 3; }
  .px2-actions { grid-column: 3; grid-row: 3; }
  .px2-sub code { white-space: normal; overflow-wrap: anywhere; }
  .px2-arow { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 14px; }
  .px2-route { grid-column: 2 / -1; grid-row: 2; }
  .px2-lhead, .px2-rbar, .px2-sec-head { padding-left: 14px; padding-right: 14px; }
  .px2-rbar .acc2-search { flex-basis: 100%; }
  .px2-prev li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .px2-prev li .px2-pr, .px2-prev li .px2-pm { grid-column: 2; }
  .px2-notice { flex-wrap: wrap; }
  .px2-dl > div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .px2-dot.is-run { animation: none; } .px2-row, .px2-arow { transition: none; } }
/* ==== 1.0.100: proxy health check (proxies-r3.js) =================================================================== */
.px2-hbtn { gap: 8px; }
.px2 .px2-hbtn[hidden] { display: none; }
.px2-mon { padding: 1px 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); white-space: nowrap; border: 1px solid var(--border-subtle); border-radius: 999px; }
.px2-mon.is-down { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.px2-auto { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 5px; vertical-align: 1px; }
.px2-hstatus { margin: 0 0 14px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); background: var(--hover); border-radius: var(--r-sm, 10px); }
.px2-hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.px2-hchan { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.px2-hchan b { color: var(--text-primary); font-weight: 600; }
.px2-hchan-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 12px; font-size: 12.5px; }
.px2-hchan-act > span { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.px2-okline { color: var(--success); }
.px2-modal h4 { margin: 16px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.px2-active, .px2-events { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.px2-active li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.px2-active li:last-child, .px2-events li:last-child { border-bottom: 0; }
.px2-active small { margin-left: 8px; color: var(--text-tertiary); }
.px2-events { max-height: 13rem; overflow-y: auto; }
.px2-events li { display: grid; grid-template-columns: 6.5rem 4.5rem minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; line-height: 1.5; }
.px2-events time { font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.px2-events b { font-weight: 500; }
.px2-events li.is-down b, .px2-events li.is-push_failed b { color: var(--danger); }
.px2-events li.is-up b { color: var(--success); }
.px2-events li.is-failover b, .px2-events li.is-failback b { color: var(--warning); }
.px2-events span { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
@media (max-width: 760px) {
  .px2-hgrid { grid-template-columns: minmax(0, 1fr); }
  .px2-events li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .px2-events li span { grid-column: 1 / -1; }
  .px2-active li { flex-wrap: wrap; }
}
/* dialog actions stay in view while a long dialog scrolls (phones) */
.px2-modal .wb2-modal-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 10px; padding: 12px 0 6px; background: var(--bg-elevated); border-top: 1px solid var(--border-subtle); }
/* ==== 1.0.102: bot center ============================================================================================ */
/* Messages tab: the list / conversation pair switched to "stacked" as soon as the workspace was narrower than 700px, which is the normal
   desktop width next to the menu, so the list was squeezed to two rows above an empty pane.  Two columns from 600px up. */
@container (min-width: 600px) {
  html[data-sp-theme] [data-bot-focus="chats"] > .grid { grid-template-columns: 16rem minmax(0, 1fr) !important; }
  html[data-sp-theme] [data-bot-focus="chats"] > .grid > div:first-child { max-height: 34rem; border-right: 1px solid var(--sp-border); border-bottom: 0; }
}
/* the "compare with official" table: long API names wrapped under the next column */
html[data-sp-theme] .bot-official-table span, html[data-sp-theme] .bot-official-table em, html[data-sp-theme] .bot-official-table strong { min-width: 0; overflow-wrap: anywhere; }
html[data-sp-theme] .bot-official-table div { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 2fr); }
@media (max-width: 960px) { html[data-sp-theme] .bot-official-table div { grid-template-columns: minmax(0, 1fr); } }
/* rule cards: cooldown / quote row */
.bot-reply-extras { align-items: end; flex-wrap: wrap; }
.bot-reply-extras label:first-child { flex: 0 0 11rem; max-width: 100%; }
.bot-reply-card input[type="number"][data-reply-cooldown] { width: 100%; min-width: 0; }
/* down alerts card (Status tab) */
.bot-alert-card { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); }
.bot-alert-card h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bot-alert-card p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.bot-alert-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.bot-alert-minutes { display: flex; flex-direction: column; gap: 6px; max-width: 16rem; font-size: 12.5px; color: var(--text-secondary); }
.bot-alert-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.bot-alert-status { min-width: 0; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.bot-alert-note { color: var(--text-tertiary); }
/* private AI: everybody */
.bot-ai-all { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); cursor: pointer; }
.bot-ai-all input { margin-top: 3px; }
.bot-ai-all-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-primary); }
.bot-ai-all-text b { font-weight: 600; }
.bot-ai-all-text em { font-style: normal; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
[data-bot-ai-private].bot-ai-all-on { opacity: .45; pointer-events: none; }
/* ==== 1.0.104: rich replies, subscribers and broadcast =============================================================== */
/* the subscribers tab shows its own page; the compiled "messages" tab behind it stays hidden */
[data-bot-focus="subscribers"] > *:not([data-bot-custom]) { display: none !important; }
.bot-sub { display: flex; flex-direction: column; gap: 16px; }
.bot-sub h3 { margin: 0; }
.bot-sub-lead { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.bot-sub-counts { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bot-sub-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); }
.bot-sub-box h4 { margin: 0; }
.bot-sub-box label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bot-sub-box label > span { font-size: 12.5px; color: var(--text-secondary); }
.bot-sub-box textarea, .bot-sub-box select, .bot-sub-box input.ui-input { width: 100%; min-width: 0; }
.bot-bc-aud { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bot-sub-box label.bot-bc-radio { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.bot-bc-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.bot-sub-box label.bot-bc-test { flex: 1 1 14rem; max-width: 24rem; }
.bot-bc-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-sm, 10px); }
.bot-bc-confirm[hidden] { display: none; }
.bot-bc-confirm p, .bot-bc-status { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.bot-bc-confirm input { flex: 1 1 10rem; max-width: 14rem; }
.bot-bc-status { min-height: 1.2em; }
.bot-bc-job { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.bot-bc-job:last-child { border-bottom: 0; }
.bot-bc-jobhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bot-bc-jobhead time { color: var(--text-tertiary); }
.bot-bc-chip { padding: 0 8px; font-size: 11.5px; line-height: 1.7; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary); }
.bot-bc-job.is-running .bot-bc-chip { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.bot-bc-job.is-done .bot-bc-chip { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.bot-bc-job.is-failed .bot-bc-chip, .bot-bc-job.is-interrupted .bot-bc-chip { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.bot-bc-jobline { color: var(--text-primary); }
.bot-bc-jobtext, .bot-bc-jobnote { color: var(--text-tertiary); overflow-wrap: anywhere; }
.bot-bc-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--border-subtle); }
.bot-bc-bar > i { display: block; height: 100%; background: var(--text-primary); transition: width .3s ease-out; }
.bot-sub-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-sub-tools input { flex: 1 1 14rem; }
.bot-sub-tools select { flex: 0 0 9rem; width: 9rem; }
.bot-sub-table { overflow-x: auto; }
.bot-sub-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bot-sub-table th, .bot-sub-table td { padding: 7px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); }
.bot-sub-table th { font-weight: 500; color: var(--text-tertiary); }
.bot-sub-table tr.is-blocked td { color: var(--text-tertiary); }
.bot-sub-pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.bot-sub-pager:empty { display: none; }
/* rule cards: format / photo / buttons */
.bot-reply-rich { display: flex; flex-direction: column; gap: 0.7rem; }
.bot-reply-card .bot-reply-rich textarea, .bot-reply-card .bot-reply-rich input.ui-input, .bot-reply-card .bot-reply-rich select { width: 100%; min-width: 0; }
.bot-sub-box textarea[data-bc-text] { min-height: 8rem; resize: vertical; }
.bot-sub-box textarea[data-bc-buttons] { min-height: 4.6rem; resize: vertical; }
.bot-reply-card .bot-reply-rich textarea { min-height: 3.6rem; resize: vertical; }
/* the subscriber table scrolls inside its box instead of stretching the page */
.bot-sub-table { max-height: 30rem; overflow: auto; }
.bot-sub-table thead th { position: sticky; top: 0; z-index: 1; background: var(--hover); }
/* ==== 1.0.105: statistics, inline answers, language / scope / channel / token blocks, and the bot center layout ==================== */

/* ---- the tabs "统计" and "Inline 应答" show their own page; the compiled tab behind them stays hidden */
[data-bot-focus="stats"] > *:not([data-bot-custom]),
[data-bot-focus="inline"] > *:not([data-bot-custom]) { display: none !important; }

.bot-r7 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bot-r7 h3, .bot-r7 h4 { margin: 0; }
.bot-r7-lead, .bot-r7-note { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); overflow-wrap: anywhere; }
.bot-r7-warn { color: var(--danger); }
.bot-r7 label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bot-r7 label > span { font-size: 12.5px; color: var(--text-secondary); }
.bot-r7 input.ui-input, .bot-r7 select.ui-input, .bot-r7 textarea.ui-input { width: 100%; min-width: 0; }
.bot-r7 textarea.ui-input { resize: vertical; }
.bot-r7-block { margin-top: 20px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); }
.bot-r7-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); min-width: 0; }
.bot-r7-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 10px; align-items: end; }
.bot-r7-row > label[hidden] { display: none; }
.bot-r7-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bot-r7-actions input.ui-input { flex: 1 1 10rem; max-width: 14rem; width: auto; }
.bot-r7-status { font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.bot-r7-status:empty { display: none; }
.bot-r7 label.bot-r7-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.bot-r7-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--r-sm, 10px); }
.bot-r7-confirm[hidden] { display: none; }
.bot-r7-confirm p { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.bot-r7-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bot-r7-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bot-r7-tools select.ui-input { width: 10rem; }
.bot-r7-scroll { overflow-x: auto; }

/* statistics */
.bot-st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 10px; }
.bot-st-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); min-width: 0; }
.bot-st-tile span { font-size: 12px; color: var(--text-secondary); }
.bot-st-tile b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.bot-st-tile em { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--text-tertiary); overflow-wrap: anywhere; }
.bot-st-charthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.bot-st-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.bot-st-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.bot-st-chart { display: flex; align-items: stretch; gap: 3px; height: 156px; }
.bot-st-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bot-st-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--border-subtle); }
.bot-st-bars i { display: block; width: min(10px, 44%); min-width: 2px; border-radius: 2px 2px 0 0; }
.bot-st-bars i.in, .bot-st-legend i.in { background: var(--text-primary); }
.bot-st-bars i.out, .bot-st-legend i.out { background: var(--text-tertiary); opacity: 0.6; }
.bot-st-x { height: 12px; font-size: 10px; line-height: 12px; color: var(--text-tertiary); white-space: nowrap; }
.bot-st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.bot-st-top { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.bot-st-top li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-bottom: 7px; font-size: 12.5px; }
.bot-st-top li i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--text-primary); opacity: 0.55; }
.bot-st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.bot-st-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bot-st-table summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.bot-st-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12.5px; }
.bot-st-table th, .bot-st-table td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.bot-st-table th:first-child, .bot-st-table td:first-child { text-align: left; }
.bot-st-table th { font-weight: 500; color: var(--text-tertiary); }

/* inline answers */
.bot-in-list { display: flex; flex-direction: column; gap: 10px; }
.bot-in-item { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--bg-elevated, transparent); }
.bot-in-itemhead { display: flex; align-items: center; justify-content: space-between; }
.bot-in-itemhead b { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }

/* scoped commands, channel rights */
.bot-sc-list { display: flex; flex-direction: column; gap: 8px; }
.bot-sc-row { display: grid; grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bot-ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 8px 14px; }
[data-bot-custom="channel"] { margin: 16px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
[data-bot-custom="channel"] h3 { font-size: 18px; margin-bottom: 4px; }

/* ==== layout of the bot center page =============================================================================================== */
/* The work area is narrower than the viewport suggests (app sidebar + bot list + this menu), and the compiled page switches to its wide
   layouts by VIEWPORT width.  These rules make the page follow the width it really has. */

/* ---- hero: no empty eyebrow line, less air */
section.ui-card:has(+ [data-testid="bot-management-layout"]) h2 { margin-top: 0; }
section.ui-card:has(+ [data-testid="bot-management-layout"]) > div:first-child { padding-block: 16px; }
@media (min-width: 1280px) {
  /* counts and buttons share one row on the right instead of stacking */
  section.ui-card:has(+ [data-testid="bot-management-layout"]) > div:first-child > div:last-child { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
}

/* ---- the bot head card: the picker repeats the list beside it from 1280px; name, ids and token share the room instead of a dead column */
@media (min-width: 1280px) {
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > label:first-child { display: none !important; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child { grid-template-columns: 2.75rem minmax(0, 1fr) auto; position: static; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 { justify-content: flex-start; align-items: center; gap: 4px 18px; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 > div:first-child { margin-right: 0; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 > div:nth-child(2) { flex: 0 1 auto; margin-top: 0; }
}
:root [data-testid="bot-management-layout"] > main > .ui-card:first-child [data-bot-token] { flex-wrap: wrap; }
:root [data-testid="bot-management-layout"] > main > .ui-card:first-child [data-bot-token] code { flex: 0 1 15rem; min-width: 0; }

/* ---- 768-1279px: the picker takes a row of its own, then icon | name and token | buttons */
@media (min-width: 768px) and (max-width: 1279px) {
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child { grid-template-columns: 2.75rem minmax(0, 1fr) auto; position: static; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > label:first-child { grid-column: 1 / -1; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 { justify-content: flex-start; gap: 4px 14px; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 > div:first-child { margin-right: 0; }
  :root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 > div:nth-child(2) { flex: 0 1 auto; margin-top: 0; }
}

/* ---- menu column: flat, a hairline on its right, stays in view while the page scrolls */
@media (min-width: 768px) {
  :root[data-sp-theme] .bot-hierarchical-menu {
    position: sticky; top: 5.2rem; align-self: start; max-height: calc(100vh - 6.4rem); overflow-y: auto;
    padding: 6px 12px 12px 6px !important;
    border: 0 !important; border-right: 1px solid var(--border-subtle) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  :root[data-sp-theme] .bot-side-stage { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .bot-menu-group + .bot-menu-group { padding-top: 10px; border-top: 1px solid var(--border-subtle); }
}

/* ---- inside the stage: rows wrap and multi-column grids fit the room they have */
.bot-side-stage :is(.sm\:flex-row, .lg\:flex-row) { flex-wrap: wrap; }
@media (min-width: 640px) { .bot-side-stage .sm\:flex-row > .min-w-0.flex-1 { flex: 1 1 14rem; } }
@media (min-width: 1024px) { .bot-side-stage .lg\:flex-row > .min-w-0.flex-1 { flex: 1 1 14rem; } }
.bot-side-stage .grid[class*="md:grid-cols-"], .bot-side-stage .grid[class*="xl:grid-cols-"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bot-side-stage table[class*="min-w-["] { min-width: 600px; }
.bot-side-stage table[class*="min-w-["] :is(th, td) { padding-inline: 10px; }

/* ---- phones: the section menu is a row you can swipe; a fade says there is more */
@media (max-width: 767px) {
  :root[data-sp-theme] .bot-hierarchical-menu {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 28px !important;
  }
  .bot-hierarchical-menu .bot-menu-group { scroll-snap-align: start; }
}
/* ==== 1.0.106: bot list rail, group guard page, AI web block ======================================================================= */

/* the group guard tab shows its own page; the compiled tab behind it stays hidden */
[data-bot-focus="guard"] > *:not([data-bot-custom]) { display: none !important; }

/* ---- the bot list can be narrowed to a rail of avatars (the settings get the room); it is a list again below 1280 px where it is not shown at all */
[data-bot-rail-toggle] { flex: none; }
@media (min-width: 1280px) {
  :root [data-testid="bot-management-layout"].bot-rail { grid-template-columns: 4.5rem minmax(0, 1fr) !important; }
  .bot-rail > aside[data-testid="bot-list-panel"] > div:first-child { flex-direction: column; justify-content: center; padding: 8px 4px; gap: 4px; }
  .bot-rail > aside[data-testid="bot-list-panel"] > div:first-child > div:first-child { display: none; }
  .bot-rail > aside[data-testid="bot-list-panel"] > div:first-child > div:last-child > button:not([data-bot-rail-toggle]) { display: none; }
  .bot-rail > aside[data-testid="bot-list-panel"] > label { display: none; }
  .bot-rail > aside[data-testid="bot-list-panel"] button.flex.w-full { justify-content: center; padding: 10px 0; position: relative; }
  .bot-rail > aside[data-testid="bot-list-panel"] button.flex.w-full > .min-w-0 { display: none; }
  .bot-rail > aside[data-testid="bot-list-panel"] button.flex.w-full > span.rounded-full { position: absolute; right: 9px; bottom: 9px; }
}
@media (max-width: 1279px) {
  [data-bot-rail-toggle] { display: none; }
}

/* ---- group guard */
.bot-r7 label.bot-gd-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); }
.bot-gd-groups { display: flex; flex-direction: column; gap: 6px; max-height: 18rem; overflow: auto; }
.bot-gd-gname { min-width: 0; overflow-wrap: anywhere; }
.bot-gd-rights { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.bot-gd-badge { padding: 0 8px; font-size: 11px; line-height: 1.7; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-tertiary); white-space: nowrap; }
.bot-gd-badge.is-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.bot-gd-badge.is-no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.bot-gd-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--text-secondary); }
.bot-r7 .bot-gd-inline input.ui-input { width: 5.5rem; min-width: 0; }
.bot-r7 .bot-gd-inline select.ui-input { width: auto; }
.bot-r7 .bot-gd-inline label.bot-r7-check { flex-direction: row; }
.bot-gd-log { max-height: 24rem; overflow: auto; }
.bot-gd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bot-gd-table th, .bot-gd-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.bot-gd-table td:nth-child(1), .bot-gd-table td:nth-child(4) { white-space: nowrap; }
.bot-gd-table td:nth-child(2), .bot-gd-table td:nth-child(3), .bot-gd-table td:nth-child(5) { overflow-wrap: anywhere; }
.bot-gd-table th { font-weight: 500; color: var(--text-tertiary); position: sticky; top: 0; background: var(--hover); }
.bot-gd-table tr.is-error td { color: var(--danger); }
/* ==== 1.0.107: layout fixes found on the live page (Safari 1.37x) ============================================================== */

/* account workbench, "早于 [number] [unit]": the unit select is width:100% like every .ui-input, so inside the flex row it took the whole row and squeezed the number box to 26px (the number was not readable). The unit gets a fixed width, the number box takes the rest. */
.wb2-inline > select.ui-input { flex: 0 0 7.5rem; width: 7.5rem; }
.wb2-inline > .ui-input:first-child { flex: 1 1 0; width: auto; min-width: 4.5rem; }

/* bot centre, list header: "机器人列表 5 / 5" wrapped onto two lines in the 232px list. Title and count stay on one line, the three tool buttons are a little smaller. (The rail mode below 1600px hides this header's title, see p1106.css.) */
[data-testid="bot-management-layout"]:not(.bot-rail) > aside[data-testid="bot-list-panel"] > div:first-child { gap: 6px; padding-left: 12px; padding-right: 8px; }
[data-testid="bot-management-layout"]:not(.bot-rail) > aside[data-testid="bot-list-panel"] > div:first-child > div:first-child { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; white-space: nowrap; }
[data-testid="bot-management-layout"]:not(.bot-rail) > aside[data-testid="bot-list-panel"] > div:first-child > div:first-child > span { margin-left: 0; flex: none; }
[data-testid="bot-management-layout"]:not(.bot-rail) > aside[data-testid="bot-list-panel"] > div:first-child > div:last-child { flex: none; }
[data-testid="bot-management-layout"]:not(.bot-rail) > aside[data-testid="bot-list-panel"] > div:first-child > div:last-child > .ui-icon-btn { width: 28px; height: 28px; }
/* ==== 1.0.108: message buttons, header "过验证", workbench "需人工" ======================================================= */
html[data-sp-theme] .tg-msg-buttons { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; max-width: 420px; }
html[data-sp-theme] .tg-msg-btn-row { display: flex; gap: 4px; min-width: 0; }
html[data-sp-theme][data-sp-theme] .tg-msg-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--sp-border);
  background: var(--hover); color: var(--text-primary); font-size: 13px; line-height: 1.3; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
html[data-sp-theme][data-sp-theme] .tg-msg-btn:hover { border-color: var(--sp-border-strong); background: var(--pressed); }
html[data-sp-theme][data-sp-theme] .tg-msg-btn:focus-visible { outline: 2px solid var(--sp-border-strong); outline-offset: 1px; }
html[data-sp-theme] .tg-msg-btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sp-theme] .tg-msg-btn-icon { flex: none; display: inline-flex; width: 14px; height: 14px; color: var(--text-secondary); }
html[data-sp-theme] .tg-msg-btn-icon svg,
html[data-sp-theme] .tg-verify-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-sp-theme][data-sp-theme] .tg-msg-btn.is-busy { opacity: .55; cursor: progress; }
html[data-sp-theme][data-sp-theme] .tg-msg-btn[data-kind="other"],
html[data-sp-theme][data-sp-theme] .tg-msg-btn[data-kind="game"],
html[data-sp-theme][data-sp-theme] .tg-msg-btn[data-kind="pay"],
html[data-sp-theme][data-sp-theme] .tg-msg-btn[data-kind="inline"] { color: var(--text-secondary); }
html[data-sp-theme] .tg-msg-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--sp-border); }
html[data-sp-theme] .tg-msg-kb-label { font-size: 11px; color: var(--text-secondary); }
html[data-sp-theme][data-sp-theme] .tg-msg-btn.is-kb { background: transparent; }
html[data-sp-theme][data-sp-theme] .tg-msg-btn.is-kb:hover { background: var(--hover); }

/* group header: 过验证 (an icon button with a short label) */
html[data-sp-theme][data-sp-theme] .tg-stage > header .tg-verify-btn {
  width: auto; min-width: 0; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; flex: none; white-space: nowrap;
}
html[data-sp-theme] .tg-stage > header .tg-verify-btn svg { width: 16px; height: 16px; flex: none; }
html[data-sp-theme] .tg-verify-label { font-size: 13px; }
html[data-sp-theme][data-sp-theme] .tg-verify-btn.is-busy { opacity: .55; cursor: progress; }
@media (max-width: 760px) { html[data-sp-theme] .tg-verify-label { display: none; } }

/* result dialog */
html[data-sp-theme] .tg-btn-dialog { max-width: 460px; }
html[data-sp-theme] .tg-btn-steps { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
html[data-sp-theme] .tg-btn-steps li { overflow-wrap: anywhere; }

/* workbench: 需人工 in the job card line */
.wb2-warn-text { color: var(--warning, #9a6700); }
/* ==== 1.0.110: cleanup preview, link button in chat dialogs ============================================================ */
.cl2-presets { flex-wrap: wrap; }
.cl2-preview { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cl2-status { margin: 0; font-size: 13px; color: var(--text-secondary); }
.cl2-status strong { color: var(--text-primary); }
.cl2-zero td { color: var(--text-secondary); }
.cl2-msgs-row > td { background: var(--hover); }
.cl2-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow: auto; }
.cl2-msgs li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; min-width: 0; }
.cl2-msgs time { flex: none; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cl2-msgs span { min-width: 0; overflow-wrap: anywhere; }
.cl2-msgs em { font-style: normal; color: var(--text-secondary); }
.cl2-job-detail { margin: 0; }
html[data-sp-theme] a.tgsp-modal-btn.tg-btn-link { display: inline-flex; align-items: center; text-decoration: none; }
/* ==== 1.0.111 account workbench: tags, membership, chat sets, check badges, broadcast source / variants / attachment,
   join inspection, rules actions, job follow-ups ==== */
.wb2-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 10px; font-size: 12px; }
.wb2-tagbtn { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font: inherit; font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px dashed var(--sp-border-strong, var(--border-subtle)); border-radius: 999px; cursor: pointer; }
.wb2-tagbtn small { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wb2-tagbtn:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.wb2-tagbtn.is-on { color: var(--text-primary); border-style: solid; border-color: var(--text-primary); background: var(--hover); }

.wb2-setbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; font-size: 12px; }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .wb2 .wb2-setbar select.ui-input { width: auto; min-width: 220px; max-width: 100%; height: 30px; font-size: 12.5px; }
.wb2-setlist { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.wb2-setlist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.wb2-setlist li:last-child { border-bottom: 0; }
.wb2-setlist span { min-width: 0; display: flex; flex-direction: column; }
.wb2-setlist strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-setlist small { font-size: 11.5px; color: var(--text-tertiary); }

.wb2-membership { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 2px; }
.wb2-membership .wb2-hint { flex: 1 1 260px; min-width: 0; }

.wb2-cbadges { flex: none; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 46%; }
.wb2-cbadge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; font-size: 11px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; white-space: nowrap; }
.wb2-cbadge.is-ok { color: var(--success, #2e7d4f); border-color: color-mix(in srgb, var(--success, #2e7d4f) 35%, transparent); }
.wb2-cbadge.is-bad { color: var(--danger, #b3261e); border-color: color-mix(in srgb, var(--danger, #b3261e) 35%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.wb2-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12px; }
.wb2-varbtn { appearance: none; height: 24px; padding: 0 8px; font: inherit; font-size: 12px; color: var(--text-secondary); background: var(--hover); border: 1px solid var(--border-subtle); border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.wb2-varbtn:hover { color: var(--text-primary); border-color: var(--text-tertiary); }

.wb2-variants { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wb2-variant { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; width: 100%; }
.wb2-variant label { grid-column: 1 / -1; font-size: 12px; }
.wb2-variant .wb2-link { align-self: start; margin-top: 8px; }
html[data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme][data-sp-theme] .wb2 textarea.wb2-textarea.wb2-textarea--sm { min-height: 78px; }
.wb2-rotate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }

.wb2-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; }
.wb2-attach.is-on { padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); background: var(--hover); }
.wb2-attach-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.wb2-filepick { cursor: pointer; }
.wb2-link--danger { color: var(--danger, #b3261e); text-decoration-color: color-mix(in srgb, var(--danger, #b3261e) 35%, transparent); }
.wb2-link--danger:hover:not(:disabled) { color: var(--danger, #b3261e); }
.wb2-chip.wb2-chip--danger { color: var(--danger, #b3261e); }
.wb2-chip.wb2-chip--danger.is-on { border-color: var(--danger, #b3261e); box-shadow: inset 0 0 0 1px var(--danger, #b3261e); background: color-mix(in srgb, var(--danger, #b3261e) 6%, transparent); }

.wb2-td-link { max-width: 260px; overflow-wrap: anywhere; font-size: 12px; color: var(--text-secondary); }
.wb2-btn-sm { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 12px; }
.wb2-btn-sm .wb2-i { width: 13px; height: 13px; }
.wb2-job-note { margin: 8px 0 0 28px; font-size: 12px; line-height: 1.6; color: var(--warning, #b7791f); }
.wb2-job-actions { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.wb2-job-rowbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }

@media (max-width: 640px) {
  .wb2-cbadges { max-width: 40%; }
  .wb2-job-note { margin-left: 0; }
}
.wb2-form > .wb2-seg, .wb2-field > .wb2-seg:not(.wb2-seg--wide) { align-self: flex-start; max-width: 100%; }
/* ==== 1.0.112 account workbench: tabs wrap (10 tabs), @我的, scheduled messages, privacy ==== */
@media (min-width: 641px) {
  .wb2-tabs { flex-wrap: wrap; overflow: visible; }
}
.wb2-actions--start { justify-content: flex-start; flex-wrap: wrap; gap: 10px 18px; }
.wb2-nowrap { white-space: nowrap; }

.wb2-inbox { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.wb2-inbox li { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.wb2-inbox li:last-child { border-bottom: 0; }
.wb2-inbox-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.wb2-inbox-head > span:not(.wb2-badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-inbox-head strong { color: var(--text-primary); font-weight: 600; }
.wb2-inbox-head time { flex: none; font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wb2-inbox-body { margin: 6px 0 8px; font-size: 13px; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; white-space: pre-wrap; max-height: 7.5em; overflow: hidden; }
.wb2-inbox-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; }
.wb2-inbox-foot > .wb2-muted { margin-right: auto; }
.wb2-inbox-cfg { max-width: 46rem; }

.wb2-privacy-table th, .wb2-privacy-table td { white-space: nowrap; }
.wb2-privacy-form { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.wb2-privacy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
.wb2-privacy-row:last-child { border-bottom: 0; }
.wb2-privacy-row > div:first-child { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wb2-privacy-row strong { font-size: 13px; }
.wb2-privacy-row small { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.wb2-privacy-row .wb2-seg { flex: none; max-width: 100%; overflow-x: auto; }
.wb2-head-tools { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wb2-joblist-count { margin: 0 0 8px; font-size: 12px; }
.wb2-joblist + .wb2-more { margin-top: 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.wb2-job-rows .wb2-more { margin-top: 8px; }
.wb2-link--quiet { color: var(--text-tertiary); }
.wb2-link--quiet:hover:not(:disabled) { color: var(--danger, #b3261e); }
.wb2-privacy-form + .wb2-hint { margin-top: 12px; }
.wb2-sumlist + .wb2-inbox, .wb2-sumlist + .wb2-empty { margin-top: 12px; }
.wb2-actions--start { border-top: 0; padding-top: 0; }
/* ==== 1.0.113 accounts page: health marks, health filters, batch job panel, batch dialogs; workbench test send ==== */
.acc2-health { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.acc2-hchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: 11.5px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; white-space: nowrap; }
.acc2-hchip.is-warn { color: var(--warning, #b7791f); border-color: color-mix(in srgb, var(--warning, #b7791f) 40%, transparent); }
.acc2-hchip.is-ok { color: var(--success, #2e7d4f); border-color: color-mix(in srgb, var(--success, #2e7d4f) 35%, transparent); }
.acc2-hchip.is-premium { color: var(--text-primary); border-color: var(--text-tertiary); }
.acc2-chip.acc2-chip--health { border-style: dashed; }
.acc2-chip.acc2-chip--health.is-on { border-style: solid; }
.acc2-job--wb { margin-top: 8px; }
.acc2-wb-fails { margin: 8px 0 0; padding: 10px 14px 10px 28px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 10px); }
.acc2-wb-fails strong { color: var(--text-primary); }
.acc2-wb-note { margin-top: 6px; }
.acc2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .acc2-grid2 { grid-template-columns: 1fr; } }
.acc2-hint--warn { margin: 6px 0 4px; color: var(--warning, #b7791f); line-height: 1.6; }
.acc2-prof-preview { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; font-size: 12.5px; color: var(--text-secondary); }
.acc2-prof-row { overflow-wrap: anywhere; }
.acc2-modal code { padding: 0 4px; font-size: 12px; background: var(--hover); border-radius: 4px; }
.wb2-actions .wb2-testsend { margin-right: 4px; }
/* ==== 1.0.114: hint under the "Telegram 并发数" setting ==== */
.tgsp-conc-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); }
/* ==== 1.0.115 account names from Telegram ==== */
/* card: Telegram name first, then @username / internal id, then the remark */
.acc2-handle { margin-top: 2px; display: flex; align-items: center; gap: 0; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; }
.acc2-handle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acc2-handle-user { flex: 0 1 auto; color: var(--text-secondary); }
.acc2-handle-id { flex: 0 1 auto; }
.acc2-handle .acc2-dot { flex: none; margin: 0 6px; }

/* import dialog: optional id behind a quiet disclosure */
.acc2-form .acc2-hint { margin: -4px 0 10px; line-height: 1.55; }
.acc2-adv-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.acc2-adv-toggle:hover { color: var(--text-primary); }
.acc2-adv-toggle:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 4px; }
.acc2-adv-toggle svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .14s ease-out; }
.acc2-adv-toggle.is-open svg { transform: none; }
.acc2-adv { padding: 12px 12px 2px; margin: -4px 0 14px; border: 1px solid var(--border-subtle); border-radius: 8px; }
.acc2-adv[hidden] { display: none; }
.acc2-adv .acc2-hint { margin: -4px 0 10px; }

/* add-account dialog (compiled host): hint under the remark, optional id link */
.tgsp-add-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-tertiary); }
.tgsp-add-adv-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.tgsp-add-adv-btn:hover { color: var(--text-primary); }
.tgsp-add-adv-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 4px; }
.tgsp-add-adv-btn::before { content: "+"; display: inline-block; width: 12px; text-align: center; color: var(--text-tertiary); }
.tgsp-add-relogin { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.tgsp-add-relogin code { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); background: none; padding: 0; }
/* ==== 1.0.117 account tools ==== */
.acc2-patrol { display: inline-flex; align-items: center; gap: 5px; }
.acc2-patrol svg { width: 13px; height: 13px; }
.acc2-patrol.is-warn { color: var(--warning, #b7791f); }

/* patrol dialog */
.acc2-pt .acc2-check-row { margin-bottom: 8px; }
.acc2-pt .acc2-check-row--top { margin-bottom: 12px; }
.acc2-pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
.acc2-pt-grid .acc2-check-row { margin-bottom: 14px; }
.acc2-pt-where { margin: 0; padding: 8px 0; font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.acc2-pt-k { margin: 6px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.acc2-pt-sep { height: 1px; margin: 14px 0; background: var(--border-subtle); }
.acc2-pt-sum { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.acc2-pt-sum strong { color: var(--text-primary); }
.acc2-pt-run { margin: 0; font-size: 13px; color: var(--text-primary); }
.acc2-pt-list { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); max-height: 168px; overflow: auto; }
.acc2-field--inline { margin-bottom: 12px; }
.acc2-field--inline input { max-width: 120px; }
.acc2-pt .wb2-modal-actions { align-items: center; }
@media (max-width: 560px) { .acc2-pt-grid { grid-template-columns: 1fr; } }

/* export dialogs */
.acc2-ex-scopes { display: flex; flex-wrap: wrap; gap: 0 18px; }
.acc2-ex-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.acc2-ex-cols .acc2-check-row, .acc2-ex-scopes .acc2-check-row { margin-bottom: 8px; }
.acc2-ex-all { margin: 0; font-weight: 400; }
@media (max-width: 560px) { .acc2-ex-cols { grid-template-columns: 1fr; } }
.acc2-warnbox { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.acc2-warnbox p { margin: 0 0 6px; }
.acc2-warnbox p:last-child { margin: 0; }
.acc2-warnbox strong { color: var(--text-primary); }

/* rename preview */
.acc2-rn-list { margin: 10px 0 14px; max-height: 340px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: 8px; }
.acc2-rn-row { display: grid; grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--border-subtle); cursor: pointer; }
.acc2-rn-row:first-child { border-top: 0; }
.acc2-rn-row.is-skip { cursor: default; color: var(--text-tertiary); }
.acc2-rn-row input { width: 15px; height: 15px; accent-color: var(--brand-action, #1d1c18); }
.acc2-rn-who, .acc2-rn-from, .acc2-rn-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-rn-who { color: var(--text-primary); }
.acc2-rn-row.is-skip .acc2-rn-who { color: var(--text-tertiary); }
.acc2-rn-from { color: var(--text-tertiary); }
.acc2-rn-arrow { color: var(--text-tertiary); text-align: center; }
.acc2-rn-to { color: var(--text-primary); font-weight: 500; }
.acc2-rn-row.is-skip .acc2-rn-to { font-weight: 400; color: var(--text-tertiary); }
@media (max-width: 560px) {
  .acc2-rn-row { grid-template-columns: 18px minmax(0, 1fr) 14px minmax(0, 1fr); }
  .acc2-rn-who { display: none; }
}
/* ==== 1.0.118 workbench: create a group / channel ==== */
.wb2-create-who { margin: 4px 0 8px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
/* ==== 1.0.119 DC + estimated registration month on the account cards ==== */
.acc2-fact { white-space: nowrap; }
.acc2-info--facts { margin-top: 2px; }
.acc2-info--facts .acc2-fact { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ==== 1.0.120 accounts / workbench details ==== */
/* card view: the DC / registration line belongs to the status line above it */
.acc2-grid:not([data-view="list"]) .acc2-info--facts { margin-top: -6px; }
/* patrol dialog: the keepalive checkbox sits on the same line as the day count */
.acc2-pt-grid .acc2-check-row { margin-bottom: 21px; }
/* workbench job rows: links (e.g. the new group) are clickable */
.wb2-inline-link { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 2px; overflow-wrap: anywhere; }
.wb2-inline-link:hover { text-decoration-color: currentColor; }
/* ==== 1.0.121 phone list, official registration month, patrol test push ==== */
/* phone: 列表 is a real list (one line per account, actions in ⋯), 卡片 stays as it is */
@media (max-width: 760px) {
  .acc2-grid[data-view="list"] { gap: 0; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--bg-elevated); }
  .acc2-grid[data-view="list"] .acc2-card { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transform: none !important; }
  .acc2-grid[data-view="list"] .acc2-card + .acc2-card { border-top: 1px solid var(--border-subtle) !important; }
  .acc2-grid[data-view="list"] .acc2-head { flex: 1 1 auto; align-items: center; min-width: 0; }
  .acc2-grid[data-view="list"] .acc2-identity { gap: 10px; }
  .acc2-grid[data-view="list"] .acc2-avatar { width: 34px; height: 34px; }
  .acc2-grid[data-view="list"] .acc2-name { font-size: 13.5px; }
  .acc2-grid[data-view="list"] .acc2-handle { font-size: 11.5px; }
  .acc2-grid[data-view="list"] .acc2-remark { font-size: 11.5px; }
  .acc2-grid[data-view="list"] .acc2-remark.is-empty { display: none; }
  .acc2-grid[data-view="list"] .acc2-handle + .acc2-remark { display: none; }
  .acc2-grid[data-view="list"] .acc2-meta { display: none; }
  .acc2-grid[data-view="list"] .acc2-grip { display: none; }
  .acc2-grid[data-view="list"] .acc2-side .acc2-badge-text { display: none; }
  .acc2-grid[data-view="list"] .acc2-side .ui-badge { padding: 0; width: 18px; height: 18px; justify-content: center; }
  .acc2-grid[data-view="list"] .acc2-actions { width: auto; flex: none; margin: 0; padding: 0; border: 0; }
  .acc2-grid[data-view="list"] .acc2-actions > :not([data-act="more"]) { display: none; }
  .acc2-grid[data-view="list"] .acc2-check { position: static; transform: none; flex: none; }
  .acc2-grid.is-selecting[data-view="list"] .acc2-identity { padding-left: 0; }
}

/* official registration month dialog */
.acc2-rg-list { margin: 8px 0 12px; padding: 0; list-style: none; max-height: 260px; overflow: auto; border: 1px solid var(--border-subtle); border-radius: 8px; }
.acc2-rg-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 12.5px; color: var(--text-primary); border-top: 1px solid var(--border-subtle); }
.acc2-rg-list li:first-child { border-top: 0; }
.acc2-rg-list li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-rg-list li span:last-child { flex: none; color: var(--text-secondary); }
.acc2-rg-list li.is-bad span:last-child { color: var(--warning, #b7791f); white-space: normal; text-align: right; max-width: 60%; }

/* patrol dialog: test push */
.acc2-pt-test { margin: 0 0 0 8px; vertical-align: baseline; }

/* the toolbar ⋯ (巡检 / 导出 / 改编号 / 官方注册时间) says 更多 where the toolbar becomes a grid of buttons */
.acc2-more-label { display: none; }
@media (max-width: 760px) { .acc2-more-label { display: inline; margin-left: 4px; } }

/* ==== 1.0.122 Telegram SCAM / FAKE mark on the account card ==== */
.acc2-reason--flag { color: var(--danger); font-weight: 500; }
.acc2-reason--flag::before { content: none; }

/* ==== 1.0.123 one 限制 line on every card; problems in red (Telegram SCAM / FAKE mark in place, SpamBot limit) ==== */
.acc2-info--facts .acc2-fact--bad { color: var(--danger); font-weight: 500; }
.acc2-reason--spam.is-bad { color: var(--danger); font-weight: 500; }
.acc2-reason--spam.is-bad::before { color: inherit; }
.acc2-reason--spam.is-none { color: var(--text-tertiary); }

/* ==== 1.0.126 appeal through @SpamBot ==== */
.acc2-appeal-link { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.acc2-appeal-link:hover { opacity: .8; }
.acc2-ap-steps { margin: 0 0 12px; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.acc2-ap-steps li + li { margin-top: 2px; }
.acc2-ap-chat { max-height: 280px; overflow: auto; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-subtle, transparent); display: flex; flex-direction: column; gap: 8px; }
.acc2-ap-msg { max-width: 88%; align-self: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
.acc2-ap-msg.is-me { align-self: flex-end; background: transparent; }
.acc2-ap-who { display: block; margin-bottom: 2px; font-size: 11px; color: var(--text-tertiary); }
.acc2-ap-text { font-size: 12.5px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.acc2-ap-wait { align-self: center; margin: 0; }
.acc2-ap-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.acc2-ap-keys > .acc2-hint { flex-basis: 100%; margin: 0; }
.acc2-ap-key { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-elevated); font: inherit; font-size: 12.5px; color: var(--text-primary); text-decoration: none; cursor: pointer; }
.acc2-ap-key small { font-size: 11px; color: var(--text-tertiary); }
.acc2-ap-key:hover:not([disabled]) { border-color: var(--text-tertiary); }
.acc2-ap-key[disabled] { opacity: .5; cursor: default; }
.acc2-ap-input { margin-top: 12px; }
.acc2-ap-input textarea { width: 100%; resize: vertical; min-height: 64px; }

/* ==== 1.0.127 workbench: account limits on the chips ==== */
.wb2-dot.is-warn { background: var(--warning, #b7791f); }
.wb2-chip-limit { margin-left: 6px; padding: 0 6px; font-style: normal; font-size: 11px; line-height: 16px; color: var(--warning, #b7791f); border: 1px solid color-mix(in srgb, var(--warning, #b7791f) 45%, transparent); border-radius: 999px; }
.wb2-chip-limit.is-bad { color: var(--danger, #b3261e); border-color: color-mix(in srgb, var(--danger, #b3261e) 45%, transparent); }
.wb2-acc-note { margin: 8px 0 0; padding-left: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); border-left: 2px solid var(--warning, #b7791f); }
.wb2-acc-note.is-bad { border-left-color: var(--danger, #b3261e); }
.wb2-acc-note strong { color: var(--text-primary); }

/* ==== 1.0.128 notification chat id from an account; task cards: bot reply, account limits ==== */
.tgsp-np { margin-top: 8px; display: grid; gap: 6px; }
.tgsp-np-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tgsp-np-row select { flex: 1 1 260px; min-width: 0; }
.tgsp-np-row button { flex: none; }
.tgsp-np-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-tertiary); }
.tgsp-np-status { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.tgsp-np-status.is-bad { color: var(--danger); }
.tk2 .tk2-last-reply { display: block; margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-tertiary); }
/* ==== 1.0.129: schedule editor in the task dialog ==== */
.tk-sched { display: flex; flex-direction: column; gap: 8px; }
.tk-sched-body { display: flex; flex-direction: column; gap: 8px; }
.tk-sched-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.tk-sched-days { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-sched-day { appearance: none; width: 34px; height: 32px; font: inherit; font-size: 13px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 8px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background-color .12s ease; }
.tk-sched-day:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.tk-sched-day.is-on { color: var(--text-primary); border-color: var(--text-primary); background: var(--hover); font-weight: 600; }
.tk-sched-day:focus-visible, .tk-sched-x:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.tk-sched-quick { display: inline-flex; gap: 10px; margin-right: auto; font-size: 12px; }
.tk-sched-time { width: 120px; }
.tk-sched-sel { width: auto; min-width: 64px; padding-right: 26px; }
.tk-sched-num { width: 64px; }
.tk-sched-check { cursor: pointer; }
.tk-sched-check input[type="checkbox"] { width: 14px; height: 14px; min-height: 0; }
.tk-sched-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-sched-tm { position: relative; display: inline-flex; align-items: center; }
.tk-sched-tm input { width: 112px; }
.tk-sched-x { appearance: none; margin-left: 2px; width: 24px; height: 24px; font: inherit; font-size: 15px; line-height: 1; color: var(--text-tertiary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.tk-sched-x:hover { color: var(--text-primary); background: var(--hover); }
.tk-sched-add { font-size: 12px; }
.tk-sched-cron { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tk-sched .ui-help code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 0 3px; border-radius: 4px; background: var(--hover); }
.tk-sched-next { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary); min-height: 1.55em; }
.tk-sched-next.is-bad { color: var(--danger, #b4532a); }
.tk-sched-next.is-warn { color: var(--warning); }