/* Shared presentation only. Application actions and validation stay in their existing components. */
:root {
  --sp-bg: #edf2f8;
  --sp-bg-elevated: #ffffff;
  --sp-bg-muted: #edf2f8;
  --sp-bg-elevated-2: #edf2f8;
  --sp-border: #d9e2ed;
  --sp-border-strong: #a8b9cd;
  --sp-text: #17263c;
  --sp-text-muted: #4f6178;
  --sp-accent: #17263c;
  --sp-accent-soft: #2563eb0d;
  --sp-highlight: #3267af;
  --sp-highlight-soft: #e7effb;
  --sp-card-edge: #ffffffcc;
  --sp-shadow-sm: 0 2px 6px #1e3a5f05, 0 10px 28px -12px #1e3a5f21;
  --sp-canvas-glow: #a9c8f342;
  --sp-canvas-glow-alt: #b9e3df40;
  --sp-background-art: url("./console-backdrop-light.svg");
  --sp-radius: 14px;
  --sp-radius-sm: 10px;
  --sp-bg-card: var(--sp-bg-elevated);
  --sp-surface: var(--sp-bg-elevated);
  --sp-muted: var(--sp-text-muted);
  --tg-card-bg: var(--sp-bg-elevated);
}
:root.dark {
  --sp-bg: #0b1320;
  --sp-bg-elevated: #1a2636;
  --sp-bg-muted: #243247;
  --sp-bg-elevated-2: #243247;
  --sp-border: #304158;
  --sp-border-strong: #546b88;
  --sp-text: #f0f5ff;
  --sp-text-muted: #b3c2d6;
  --sp-accent: #f0f5ff;
  --sp-accent-soft: #8fbcff12;
  --sp-highlight: #c1daff;
  --sp-highlight-soft: #253c59;
  --sp-card-edge: #ffffff0d;
  --sp-shadow-sm: 0 2px 6px #00000010, 0 12px 30px -12px #00000066;
  --sp-canvas-glow: #355b9638;
  --sp-canvas-glow-alt: #245c6230;
  --sp-background-art: url("./console-backdrop-dark.svg");
}
body {
  min-width: 0;
  color: var(--sp-text);
  background-image: var(--sp-background-art), radial-gradient(ellipse at 88% 0%, var(--sp-canvas-glow), transparent 58%), radial-gradient(ellipse at 15% 75%, var(--sp-canvas-glow-alt), transparent 60%);
  background-position: right top, center top, left bottom;
  background-size: 1080px 840px, 100% 720px, 100% 1000px;
  background-repeat: no-repeat;
}
:root main { color: var(--sp-text); }
:root main :is(h1, h2, h3, h4) { color: var(--sp-text); }
:root aside.ui-sidebar { background: color-mix(in srgb, var(--sp-bg-elevated) 94%, var(--sp-bg)); }
:root aside.ui-sidebar nav a.ui-nav-active {
  color: var(--sp-highlight);
  background: var(--sp-highlight-soft);
  box-shadow: none;
}
:root aside.ui-sidebar nav a.ui-nav-active::before { background: var(--sp-highlight); }
:root aside.ui-sidebar nav a:hover { color: var(--sp-text); }
:root .ui-card { border-color: var(--sp-card-edge); box-shadow: var(--sp-shadow-sm); }
:root .ui-header-glass {
  background: color-mix(in srgb, var(--sp-bg-elevated) 92%, transparent);
}
.ui-header-glass h1 { font-size: 14px; letter-spacing: 0; }
:root :is(.ui-label, .ui-label-strong) { font-size: 13px; letter-spacing: 0; line-height: 1.5; }
:root :is(.ui-input, .ui-select-trigger) {
  min-height: 40px;
  border-color: transparent;
  border-radius: 10px;
  background: var(--sp-bg-muted);
  color: var(--sp-text);
  font-size: 14px;
  line-height: 1.5;
}
:root .ui-input::placeholder { color: var(--sp-text-muted); opacity: 1; }
:root :is(.ui-input, .ui-select-trigger):hover:not(:disabled) { background: color-mix(in srgb, var(--sp-bg-muted) 82%, var(--sp-border)); }
:root :is(.ui-input, .ui-select-trigger):focus-visible {
  background: var(--sp-bg-elevated);
  border-color: var(--sp-highlight);
  outline: 2px solid var(--sp-highlight);
  outline-offset: 2px;
  box-shadow: none;
}
:root .ui-input:disabled { background: var(--sp-bg-muted); cursor: not-allowed; opacity: .6; }
:root :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger) {
  min-height: 40px;
  border-radius: 10px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
}
:root .ui-btn-primary { background: var(--sp-text); color: var(--sp-bg-elevated); }
:root .ui-btn-primary:hover:not(:disabled) { background: var(--sp-text); opacity: .88; }
:root .ui-btn-secondary { border-color: transparent; background: var(--sp-bg-muted); color: var(--sp-text); }
:root .ui-btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--sp-bg-muted) 82%, var(--sp-border)); }
:root :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger):disabled { cursor: not-allowed; }
:root .ui-btn-primary:disabled { background: var(--sp-bg-muted); color: var(--sp-text-muted); opacity: .65; }
:root.dark .ui-switch-on .ui-switch-knob { background: var(--sp-bg-elevated); }
:root :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--sp-accent); }
:root :is(main, [role="dialog"], .tg-manager-dialog) :is(.text-gray-400, .text-gray-500, .text-gray-600) {
  color: var(--sp-text-muted);
}
:root main .text-\[11px\] { font-size: 12px; }
:root :is(.tg-account-tools button, .tg-account-tools select) {
  background: var(--sp-bg-muted);
  border-color: transparent;
  font-size: 14px;
  min-height: 38px;
  border-radius: 8px;
  color: var(--sp-text);
}
:root .tg-account-tools button[aria-pressed="true"] {
  color: var(--sp-bg-elevated);
  background: var(--sp-text);
}
:root .account-view-grid > [data-account-name] { border-color: var(--sp-card-edge); box-shadow: var(--sp-shadow-sm); }
:root .account-view-grid .ui-row-action:hover { color: var(--sp-text); }
:root [aria-label="展示方式"] {
  background: var(--sp-bg-muted);
  border-color: var(--sp-border);
}
:root [aria-label="展示方式"] button[aria-pressed="true"] {
  color: var(--sp-text);
  background: var(--sp-bg-elevated);
  box-shadow: 0 1px 3px #00000014;
}
:root :is(.tg-manager-page, .tg-manager-dialog) { color: var(--sp-text); }
:root :is(.tg-manager-card, .tg-manager-dialog, .tg-manager-account-picker, .tg-manager-item, .tg-manager-section-nav) {
  background: var(--sp-bg-elevated);
  border-color: var(--sp-border);
  color: var(--sp-text);
  box-shadow: none;
}
:root :is(.tg-manager-heading h2, .tg-manager-card h3, .tg-manager-card h4, .tg-manager-dialog h3, .tg-manager-metrics strong) {
  color: var(--sp-text);
}
:root :is(.tg-manager-heading p, .tg-manager-help, .tg-manager-list-head p, .tg-manager-empty, .tg-manager-card label, .tg-manager-dialog label, .tg-manager-item-main small, #tg-manager-count) {
  color: var(--sp-text-muted);
}
:root :is(.tg-manager-page, .tg-manager-dialog) :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) {
  min-height: 40px;
  background: var(--sp-bg-muted);
  border-color: transparent;
  border-radius: 10px;
  color: var(--sp-text);
}
:root #tg-manager-account { min-height: 28px; }
:root :is(.tg-manager-content-form, .tg-manager-metrics > div, .tg-manager-item.selected) {
  background: var(--sp-bg-muted);
  border-color: var(--sp-border);
}
:root :is(.tg-manager-button, .tg-manager-actions button, .tg-manager-section-nav button, .tg-manager-color-choice) {
  min-height: 38px;
  background: var(--sp-bg-muted);
  border-color: transparent;
  border-radius: 10px;
  color: var(--sp-text);
}
:root :is(.tg-manager-button.primary, .tg-manager-section-nav button.active) {
  background: var(--sp-text);
  border-color: var(--sp-text);
  color: var(--sp-bg-elevated);
}
:root :is(.tg-manager-button.danger, .tg-manager-actions button.danger) {
  color: var(--sp-danger);
  border-color: color-mix(in srgb, var(--sp-danger) 40%, var(--sp-border));
}
:root .ui-form-section { border-color: transparent; border-radius: 12px; }
:root .tg-manager-card { border-color: var(--sp-card-edge); box-shadow: var(--sp-shadow-sm); }
:root .tg-manager-item:hover { background: var(--sp-bg-muted); border-color: var(--sp-border-strong); }
:root .tg-manager-page :is(input, textarea):focus-visible,
:root .tg-manager-dialog :is(input, textarea):focus-visible {
  outline-color: var(--sp-highlight);
}
:root :is(.tg-tag-panel, .tgprofile-modal, .tgsec-modal) {
  color: var(--sp-text);
  background: var(--sp-bg-elevated);
  border-color: var(--sp-border);
}
/* Import dialog uses inline layout; its fields have no shared UI classes. */
[role="dialog"]:has([data-tg-import-submit]) { max-width: none !important; }
[role="dialog"] form:has([data-tg-import-submit]) {
  max-height: calc(100dvh - 40px) !important;
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
}
[role="dialog"] form:has([data-tg-import-submit]) :is(input:not([type="checkbox"]):not([type="file"]), select) {
  min-height: 42px;
  background: var(--sp-bg-muted);
  color: var(--sp-text);
  border-color: transparent !important;
  border-radius: 10px !important;
  font-size: 14px;
}
[role="dialog"] form:has([data-tg-import-submit]) :is(p, [data-tg-import-file-note]) {
  color: var(--sp-text-muted) !important;
  line-height: 1.6;
}
[data-tg-import-error] { color: var(--sp-danger) !important; }
:is([data-tg-import-cancel], [data-tg-import-submit]) {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  color: var(--sp-text);
  background: var(--sp-bg-muted);
}
[data-tg-import-submit] { background: var(--sp-text); color: var(--sp-bg-elevated); }
[data-tg-import-submit]:disabled { opacity: .5; cursor: wait; }
[role="dialog"] input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--sp-text);
  background: var(--sp-bg-muted);
}
[role="dialog"] form:has([data-tg-import-submit]) :is(input, select):focus-visible {
  outline: 2px solid var(--sp-highlight);
  outline-offset: 2px;
}
:root .bot-hierarchical-menu :is(.bot-menu-label.is-active, .bot-submenu-item.is-active) {
  color: var(--sp-text);
  background: var(--sp-bg-muted);
}
:root .bot-submenu-item.is-active::before { background: var(--sp-accent); }
[data-testid="bot-workspace-shell"]:has(.bot-hierarchical-menu) [data-testid="bot-workspace-nav"] {
  display: none !important;
}
/* Restore a solid reading surface under the bot forms and soften nested panels. */
:root .bot-side-stage { background: var(--sp-bg-elevated); border-radius: 14px; box-shadow: var(--sp-shadow-sm); }
:root :is(.bot-profile-help, [data-bot-page-lead], [data-bot-avatar-panel], [data-bot-part="owner"], [data-bot-part="proxy"], .bot-reply-groups, [data-bot-retention], [data-bot-access], [data-bot-entry], [data-bot-group-gate], [data-bot-ai-history]) {
  color: var(--sp-text-muted);
  background: var(--sp-bg-muted);
  border-color: transparent;
  border-radius: 10px;
}
:root [data-bot-part="profile"] { border-color: transparent; }
:root [data-bot-part="profile"] .ui-btn-secondary { border-color: transparent; }
:root :is(.bot-command-row, .bot-reply-card, .bot-box-fold, .bot-official-table div, .bot-official-panel li, .bot-group-scope-menu) {
  color: var(--sp-text);
  background: var(--sp-bg-elevated);
  border-color: var(--sp-border);
  border-radius: 10px;
}
:root :is([data-bot-token] code, .bot-group-scope-button, .bot-batch-groups summary, .bot-batch-groups [data-batch-list]) {
  color: var(--sp-text);
  background: var(--sp-bg-muted);
  border-color: transparent;
  border-radius: 10px;
}
:root [data-testid="bot-management-page"] > section:first-child div.grid.grid-cols-2 { background: var(--sp-bg-muted); border-color: transparent; }
:root [data-testid="bot-workspace-content"] input:not([type="checkbox"]):not([type="file"]) { background: var(--sp-bg-muted); color: var(--sp-text); border-color: transparent; border-radius: 10px; }
:root [data-testid="bot-workspace-content"] :is(h3, h4, label > span) { color: var(--sp-text); }
:root [data-testid="bot-workspace-content"] .ui-input { border-radius: 10px; }
:root [data-testid="bot-workspace-content"] .ui-input:focus-visible { outline-color: var(--sp-accent); }
/* The bot overview keeps its description and its controls on separate rows. */
:root [data-testid="bot-management-page"] > section:first-child > div:first-child { flex-direction: column; align-items: stretch; gap: 16px; }
:root [data-testid="bot-management-page"] > section:first-child > div:first-child > .flex { flex-wrap: wrap; justify-content: space-between; }
/* Keep descriptions, counters and metadata with the fields they describe. */
:root :is(.ui-note, .ui-helper, .ui-muted) { color: var(--sp-text-muted); line-height: 1.65; }
:root .ui-row-action { color: var(--sp-text-muted); line-height: 1.4; }
:root .ui-card h2 + p { font-size: 13px; line-height: 1.65; }
:root [data-testid="bot-management-page"] > section:first-child h2 { font-size: 22px; line-height: 1.35; }
:root [data-testid="bot-management-page"] > section:first-child h2 + p { max-width: 60ch; font-size: 13px; line-height: 1.65; margin-top: 8px; }
:root [data-testid="bot-management-page"] > section:first-child div.grid.grid-cols-2 > div > div:first-child { font-size: 12px; line-height: 1.5; letter-spacing: 0; }
:root [data-testid="bot-management-layout"] > main > .ui-card:first-child > div.min-w-0 > div:nth-child(2) { color: var(--sp-text-muted); font-size: 12px; line-height: 1.65; gap: 4px 12px; }
:root [data-bot-token] code { font-size: 13px; line-height: 1.6; }
:root [data-bot-focus="profile"] [data-bot-part="profile"] .ui-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 500; }
:root [data-bot-focus="profile"] [data-bot-part="profile"] .ui-label[data-count]::after { color: var(--sp-text-muted); background: var(--sp-bg-muted); padding: 2px 6px; border-radius: 6px; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root :is([data-bot-hint], [data-bot-sync-note], .bot-group-scope-note, .bot-reply-hint, [data-command-status]) { color: var(--sp-text-muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
:root [data-bot-focus="profile"] .bot-profile-help { background: transparent; border: 0; padding: 0; color: var(--sp-text-muted); font-size: 13px; line-height: 1.65; }
:root [data-bot-part="profile"] > label { display: block; margin-top: 20px; }
:root [data-bot-part="profile"] > div.flex.flex-wrap { margin-top: 20px; gap: 12px; }
:root [data-bot-part="profile"] div.flex.flex-wrap > [data-bot-aside] { padding-top: 0; border-top: 0; }
:root [data-testid="bot-workspace-content"] :is(.bot-command-row, .bot-reply-card) :is(label > span, p) { line-height: 1.6; }
:root [data-testid="bot-workspace-content"] .bot-command-row label > span { font-size: 13px; }
:root main:has(#workbench-message) .border-emerald-200.bg-emerald-50\/60,
:root main:has(#workbench-message) .border-violet-200 { border-color: transparent; border-radius: 12px; }
/* The chat filters use the same soft fields as the other pages. */
:root [data-tg-chat-shell] { border-color: var(--sp-card-edge) !important; box-shadow: var(--sp-shadow-sm); }
:root [data-tg-chat-sidebar] :is(.ui-input, .ui-select-trigger) { border-color: transparent; border-radius: 10px; background: var(--sp-bg-muted); }
:root .tg-chat-collapse { border-color: transparent; border-radius: 8px; background: var(--sp-bg-muted); }
:root [data-tg-chat-sidebar] .ui-select-trigger-open { border-color: var(--sp-highlight); }
:root [data-tg-chat-sidebar] :is(.ui-input, .ui-select-trigger):focus-visible { border-color: var(--sp-highlight); }
@media (max-width: 680px) {
  :root .tg-manager-page { padding-inline: 12px; }
  :root .tg-manager-card { padding: 16px; }
  :root :is(.tg-account-tools button, .tg-account-tools select) { min-height: 40px; }
  [role="dialog"] form:has([data-tg-import-submit]) { padding: 16px !important; }
  [data-testid="bot-workspace-shell"].bot-side-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bot-side-layout > :is(.bot-hierarchical-menu, .bot-side-stage) { grid-column: 1; grid-row: auto; }
  .bot-hierarchical-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: var(--sp-bg-elevated);
  }
  .bot-hierarchical-menu .bot-menu-group { flex: 0 0 154px; }
  .bot-hierarchical-menu :is(.bot-menu-label, .bot-submenu-item) { min-height: 38px; font-size: 13px; }
  :root [data-testid="bot-workspace-content"] { padding-inline: 12px; }
}
/* Tailwind's important utility sizes are layered; override them in that same layer. */
@layer utilities {
  :root :is(.ui-input, .ui-select-trigger) { font-size: 14px !important; }
  :root :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger) { font-size: 13px !important; }
  @media (max-width: 680px) {
    :root :is(.ui-input, .ui-select-trigger),
    :root .tg-account-tools select,
    :root [data-testid="bot-workspace-content"] input:not([type="checkbox"]):not([type="file"]),
    :root :is(.tg-manager-page, .tg-manager-dialog) :is(input:not([type="checkbox"]):not([type="file"]), select, textarea),
    [role="dialog"] form:has([data-tg-import-submit]) :is(input:not([type="checkbox"]):not([type="file"]), select) {
      font-size: 16px !important;
    }
  }
}
@media (pointer: coarse) {
  :root :is(.ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .tg-manager-button, .tg-manager-actions button, .tg-account-tools button) {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ui-card, .ui-input, .ui-btn-primary, .ui-btn-secondary, .ui-btn-danger, .ui-sidebar, .ui-switch-knob) { transition: none !important; }
}
/* Detail pages: keep their title, field help and actions in a readable hierarchy. */
:root [data-bot-page-lead] { margin: 0 0 20px; padding: 0; border: 0; background: transparent; border-radius: 0; }
:root [data-bot-page-lead] h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.4; font-weight: 650; }
:root [data-bot-page-lead] p { margin: 0; max-width: 76ch; color: var(--sp-text-muted); font-size: 13px; line-height: 1.7; }
:root [data-testid="bot-workspace-content"] { padding: 20px; }
:root .bot-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
:root .bot-reply-sheet { gap: 16px; }
:root .bot-side-stage :is(.bot-reply-card, .bot-command-row) { border-color: transparent; padding: 16px; gap: 16px; background: color-mix(in srgb, var(--sp-bg-muted) 40%, var(--sp-bg-elevated)); border-radius: 12px; }
:root .bot-reply-card :is(label > span, p) { font-size: 13px; }
:root .bot-reply-head { padding-bottom: 12px; border-color: var(--sp-border); }
:root .bot-reply-card label.bot-reply-case { flex-direction: row; align-items: center; min-height: 40px; gap: 8px; }
:root .bot-reply-modes { gap: 16px; }
:root .bot-reply-hint { font-weight: 400; line-height: 1.7; }
:root :is(.bot-command-lead, .bot-reply-sheet) > h3,
:root .bot-command-lead h3 { font-size: 14px; }
:root [data-command-list] { gap: 16px; }
:root .bot-command-row textarea { min-height: 40px; height: 40px; }
:root .bot-command-row [data-command-remove] { margin-top: 26px; }
:root :is(.bot-command-row [data-command-remove], .bot-reply-head [data-reply-remove]) { color: var(--sp-danger); }
:root [data-testid="bot-workspace-content"][data-group-locked] > [data-reply-sheet][data-place] { opacity: 1; }
:root .bot-reply-sheet[data-locked="1"] [data-reply-list] { opacity: 1; }
:root .bot-batch-groups { margin-bottom: 20px; }
:root .bot-batch-groups summary { min-height: 42px; padding: 10px 12px; font-size: 14px; }
:root .bot-batch-groups details[open] [data-batch-list] { background: var(--sp-bg-elevated); border: 1px solid var(--sp-border); box-shadow: 0 12px 36px #00000024; padding: 6px; }
:root [data-batch-list] label { min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
:root :is([data-batch-limit], .bot-group-panel-legend, [data-batch-status]) { margin-top: 8px; font-size: 13px; line-height: 1.65; }
:root [data-bot-batch-schedule] { border: 0; background: var(--sp-bg-muted); padding: 16px; gap: 16px; border-radius: 12px; }
:root [data-bot-batch-schedule] label { font-size: 13px; gap: 8px; }
:root [data-bot-batch-schedule] .ui-input { background: var(--sp-bg-elevated); }
:root [data-testid="bot-workspace-content"] .border:not(.ui-input):not(button):not([data-bot-part="danger"]) { border-color: transparent; border-radius: 12px; }
:root [data-testid="bot-workspace-content"] :is(section.border, div.border) { background: color-mix(in srgb, var(--sp-bg-muted) 40%, var(--sp-bg-elevated)); }
:root [data-testid="bot-workspace-content"] :is(section.border-rose-200, section.border-amber-200) { border-color: color-mix(in srgb, var(--sp-danger) 24%, transparent); }
:root [data-bot-ai-info-top] { border-color: transparent; border-radius: 12px; margin-bottom: 20px; padding: 16px; }
:root [data-bot-ai-info-top] p { font-size: 13px; line-height: 1.65; }
:root [data-bot-ai-form] { display: flex; flex-direction: column; gap: 20px; }
:root [data-bot-ai-form] > * { order: 0; }
:root [data-bot-ai-form] > [data-bot-ai-enabled] { border: 0; border-radius: 12px; background: var(--sp-bg-muted); padding: 16px; }
:root [data-bot-ai-connection] { gap: 20px; }
:root [data-bot-ai-form] label > span.ui-label { display: block; margin-bottom: 8px; }
:root [data-bot-ai-form] label > .ui-helper { margin-top: 8px; font-size: 13px; font-weight: 400; line-height: 1.65; }
:root :is([data-bot-ai-private], [data-bot-ai-private-toggle]) { border-color: transparent; border-radius: 12px; background: var(--sp-bg-muted); }
:root [data-bot-ai-history] { padding: 16px; }
:root [data-ai-history-hint] { font-size: 13px; line-height: 1.65; margin-block: 12px; }
:root .bot-ai-history-count input { min-height: 40px; background: var(--sp-bg-elevated); border-color: transparent; }
:root .bot-side-stage :is([data-bot-access], [data-bot-entry]) { margin: 20px; padding: 20px; color: var(--sp-text); }
:root .bot-side-stage :is([data-bot-access], [data-bot-entry]) h3 { font-size: 18px; margin-bottom: 16px; }
:root .bot-side-stage :is([data-bot-access], [data-bot-entry]) p { font-size: 13px; line-height: 1.7; color: var(--sp-text-muted); margin: 8px 0 16px; }
:root [data-bot-entry] [data-entry-web] label,
:root [data-bot-entry] label:has(input[type="text"]) { flex-direction: column; align-items: stretch; gap: 8px; margin-block: 16px; }
:root [data-bot-entry] input[type="text"] { flex: none; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--sp-bg-elevated); color: var(--sp-text); font-size: 14px; }
:root [data-bot-entry] input[type="text"]::placeholder { color: var(--sp-text-muted); }
:root [data-bot-entry] input[type="text"]:focus-visible { outline: 2px solid var(--sp-highlight); outline-offset: 2px; }
:root [data-bot-entry] > label:not(:has(input[type="text"])),
:root [data-bot-access] > label { min-height: 36px; gap: 8px; font-size: 14px; }
:root [data-access-rights] { gap: 12px; }
:root .bot-official-panel { padding: 20px; }
:root .bot-official-head p { color: var(--sp-text-muted); font-size: 13px; line-height: 1.7; }
:root .bot-official-table div { border: 0; background: var(--sp-bg-muted); padding: 16px; gap: 16px; }
:root .bot-official-table em { font-size: 13px; line-height: 1.65; color: var(--sp-text-muted); }
:root .bot-raffle-detail-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border-color: var(--sp-card-edge); border-radius: 16px; box-shadow: 0 24px 80px #00000040; }
:root .bot-raffle-detail-dialog h3 { font-size: 20px; margin-bottom: 20px; }
:root .bot-raffle-detail-dialog h4 { font-size: 15px; margin: 24px 0 12px; }
:root .bot-raffle-detail-dialog p { font-size: 13px; line-height: 1.7; margin: 8px 0; }
:root .bot-raffle-detail-dialog .ui-input { background: var(--sp-bg-muted); }
:root [data-bot-focus="chats"] > .grid { border-color: var(--sp-border); border-radius: 12px; overflow: hidden; }
:root [data-bot-focus="chats"] .ui-form-section { border-radius: 10px; }
:root [data-bot-focus="integration"] .grid > .border { padding: 20px; }
@media (max-width: 760px) {
  :root .bot-command-row [data-command-remove] { margin-top: 0; justify-self: end; }
  :root .bot-reply-modes { gap: 12px; }
  :root .bot-reply-card label.bot-reply-case { align-self: flex-start; }
}
@media (max-width: 680px) {
  :root [data-testid="bot-workspace-content"] { padding: 16px; }
  :root .bot-side-stage :is([data-bot-access], [data-bot-entry]) { margin: 16px; padding: 16px; }
  :root .bot-official-panel { padding: 16px; }
  :root .bot-official-table div { gap: 8px; }
  :root .bot-raffle-detail-dialog { padding: 20px; }
  :root [data-bot-entry] input[type="text"] { font-size: 16px; }
}
/* Account popups use their own controls, outside the shared Vue input classes. */
:root :is(.tgprofile-modal, .tgsec-modal, .tg-tag-panel) { border-color: var(--sp-card-edge); border-radius: 16px; box-shadow: 0 24px 80px #00000040; }
:root .tgprofile-field { margin-block: 20px; font-size: 13px; }
:root .tgprofile-field span { color: var(--sp-text); margin-bottom: 8px; }
:root .tgprofile-modal .tgprofile-field :is(input, textarea),
:root .tgsec-modal .tgsec-input,
:root .tg-tag-panel input { min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--sp-bg-muted); color: var(--sp-text); font-size: 14px; line-height: 1.5; }
:root .tgprofile-field textarea { min-height: 96px; }
:root :is(.tgprofile-field input, .tgprofile-field textarea, .tgsec-input, .tg-tag-panel input):focus-visible { background: var(--sp-bg-elevated); outline: 2px solid var(--sp-highlight); outline-offset: 2px; border-color: transparent; }
:root :is(.tgprofile-modal, .tgsec-modal, .tg-tag-panel) :is(.tgprofile-note, .tgprofile-sub, .tgsec-note, .tgsec-sub, .tgsec-label, .tg-tag-hint) { color: var(--sp-text-muted); font-size: 13px; line-height: 1.65; }
:root :is(.tgprofile-modal, .tgsec-modal, .tg-tag-panel) :is(.tgprofile-btn, .tgsec-btn, .tg-tag-actions button) { min-height: 40px; padding: 9px 14px; border-color: transparent; border-radius: 10px; background: var(--sp-bg-muted); color: var(--sp-text); font-size: 13px; line-height: 1.5; }
:root :is(.tgprofile-btn-primary, .tgsec-primary, .tg-tag-actions button[data-ok]) { background: var(--sp-text); color: var(--sp-bg-elevated); border-color: transparent; }
:root :is(.tgprofile-remove, .tgsec-danger) { background: color-mix(in srgb, var(--sp-danger) 8%, var(--sp-bg-elevated)); color: var(--sp-danger); }
:root .tgsec-modal .tgsec-section { padding: 20px; border-color: transparent; border-radius: 12px; background: color-mix(in srgb, var(--sp-bg-muted) 40%, var(--sp-bg-elevated)); }
:root .tgsec-modal .tgsec-status { border-color: transparent; background: var(--sp-bg-muted); border-radius: 12px; }
:root .tgsec-section h3 { font-size: 15px; margin-bottom: 16px; }
:root .tgsec-fields { gap: 16px; }
:root .tgsec-modal .tgsec-field label { font-size: 13px; color: var(--sp-text); }
:root .tgprofile-row { align-items: flex-start; }
:root .tgprofile-file { max-width: 100%; font-size: 13px; color: var(--sp-text-muted); }
:root .tgprofile-note { margin-block: 8px; }
:root .tgprofile-actions { gap: 12px; }
:root .tg-tag-panel { padding: 20px; }
:root .tg-tag-actions { margin-top: 16px; gap: 12px; }
:root .tg-tag-preview span { background: var(--sp-bg-muted); color: var(--sp-text); }
:root .tgsp-inline-remark .tgsp-remark-edit textarea { min-height: 80px; padding: 10px 12px; border-color: transparent; border-radius: 10px; background: var(--sp-bg-muted); color: var(--sp-text); font-size: 14px; line-height: 1.5; }
:root .tgsp-inline-remark .tgsp-remark-actions button { min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; background: var(--sp-bg-muted); color: var(--sp-text); font-size: 13px; }
:root .tgsp-inline-remark .tgsp-remark-actions button.primary { background: var(--sp-text); color: var(--sp-bg-elevated); }
:root .tgsp-inline-remark .tgsp-remark-count { color: var(--sp-text-muted); font-size: 12px; }
:root .tgsp-inline-remark .tgsp-remark-edit textarea:focus-visible { outline: 2px solid var(--sp-highlight); outline-offset: 2px; border-color: transparent; }
/* Nested settings, task forms and explanatory notes. */
:root .ui-help { color: var(--sp-text-muted); font-size: 13px; line-height: 1.65; margin-top: 8px; }
:root :is(main, [role="dialog"]) .text-\[10px\] { font-size: 12px; line-height: 1.65; }
:root [role="dialog"] :is(.text-\[11px\], p.text-\[10px\]) { font-size: 13px; line-height: 1.65; }
:root [role="dialog"] .ui-form-step-num { font-size: 12px; }
:root [role="dialog"] :is(.ui-helper, .ui-note) { font-size: 13px; }
:root [role="dialog"] .ui-form-section { padding: 20px; }
:root [role="dialog"] .ui-form-step { align-items: center; gap: 10px; }
:root [role="dialog"] .ui-form-step h4 { font-size: 14px; line-height: 1.5; }
:root [role="dialog"] .ui-form-section :is(.ui-label, .ui-helper) { font-weight: 400; }
:root [role="dialog"] .ui-form-section .ui-helper { line-height: 1.65; }
:root [role="dialog"] .ui-note { border-color: transparent; border-radius: 10px; line-height: 1.65; }
:root [role="dialog"]:has(#task-form-name) { --sp-task-field: #ffffff; --sp-task-field-edge: #c7d4e5; }
:root.dark [role="dialog"]:has(#task-form-name) { --sp-task-field: #334761; --sp-task-field-edge: #566f91; }
:root [role="dialog"]:has(#task-form-name) .ui-form-section :is(.ui-input, .ui-select-trigger) { background: var(--sp-task-field); border-color: var(--sp-task-field-edge); }
:root [role="dialog"]:has(#task-form-name) .ui-form-section :is(.ui-input, .ui-select-trigger):hover { background: color-mix(in srgb, var(--sp-task-field) 92%, var(--sp-text-muted)); }
:root [role="dialog"]:has(#task-form-name) .ui-form-section :is(.ui-input, .ui-select-trigger):focus-visible { background: var(--sp-task-field); border-color: var(--sp-highlight); }
:root [role="dialog"]:has(#task-form-name) .ui-form-section .p-3.border .row-start-1 > button { min-width: 36px; min-height: 36px; border-radius: 8px; color: var(--sp-text-muted); }
:root [role="dialog"]:has(#task-form-name) .ui-form-section-accent button.border { min-height: 40px; padding: 8px 12px; border-color: transparent; border-radius: 10px; background: var(--sp-bg-elevated); color: var(--sp-text-muted); }
:root [role="dialog"]:has(#task-form-name) .ui-form-section-accent button.border.ui-selection { border-color: var(--sp-highlight); background: var(--sp-highlight-soft); color: var(--sp-text); }
:root [id^="settings-panel-"] .p-3.border,
:root [role="dialog"] .p-3.border { border-color: transparent; border-radius: 12px; background: var(--sp-bg-muted); padding: 16px; }
:root [id^="settings-panel-"] .p-3.border .ui-input { background: var(--sp-bg-elevated); }
:root [data-testid="settings-tabs"] { gap: 8px; padding: 8px; }
:root [data-testid="settings-tabs"] button { min-height: 40px; border-radius: 10px; }
:root .tg-manager-content-form { border-color: transparent; border-radius: 12px; padding: 16px; }
:root .tg-manager-content-form :is(input:not([type="checkbox"]),textarea) { background: var(--sp-bg-elevated); }
:root :is(.tg-manager-photo-form,.tg-manager-content-form) input[type="file"] { font-size: 13px; border: 0; color: var(--sp-text-muted); padding: 8px; }
:root :is(.tg-manager-page,.tg-manager-dialog) input[type="file"]::file-selector-button { padding: 8px 12px; margin-right: 10px; border: 0; border-radius: 8px; background: var(--sp-bg-muted); color: var(--sp-text); font-size: 13px; }
:root .tg-manager-item { border-color: transparent; background: color-mix(in srgb, var(--sp-bg-muted) 40%, var(--sp-bg-elevated)); padding: 14px; }
:root .tg-manager-item.selected { border-color: transparent; }
:root .tg-manager-help { font-size: 13px; line-height: 1.65; }
:root .tg-manager-detail-card .tg-manager-section-nav { border-radius: 12px 12px 0 0; }
@media (max-width: 680px) {
  :root :is(.tgprofile-field input,.tgprofile-field textarea,.tgsec-modal .tgsec-input,.tg-tag-panel input) { font-size: 16px; }
  :root .tgprofile-modal .tgprofile-field :is(input,textarea) { font-size: 16px; }
  :root .tgsp-inline-remark .tgsp-remark-edit textarea { font-size: 16px; }
  :root .tgsec-modal .tgsec-section { padding: 16px; }
  :root [role="dialog"] .ui-form-section { padding: 16px; }
  :root .tgprofile-row > div { min-width: 0; }
  :root .tgprofile-actions { flex-wrap: wrap; }
}
:root .tgprofile-overlay .tgprofile-modal,
:root .tgsec-overlay .tgsec-modal { background: var(--sp-bg-elevated); color: var(--sp-text); }
:root .tgprofile-modal .tgprofile-btn-primary { background: var(--sp-text); color: var(--sp-bg-elevated); }
:root .tgprofile-modal .tgprofile-remove { background: color-mix(in srgb, var(--sp-danger) 8%, var(--sp-bg-elevated)); color: var(--sp-danger); }
:root .tg-manager-invite-form { border-color: transparent; border-radius: 12px; background: var(--sp-bg-muted); padding: 16px; }
:root .tg-manager-invite-form :is(input:not([type="checkbox"]),select) { background: var(--sp-bg-elevated); }
:root .tgsec-input:focus-visible { box-shadow: none; }
:root .tgsec-modal .tgsec-head { border-color: var(--sp-border); }
@media (max-width: 639px) {
  :root [role="dialog"]:has(#task-form-name) .ui-form-section .p-3.border .row-start-1 { grid-column: 2; }
}
@media (max-width: 360px) {
  :root [role="dialog"]:has(#task-form-name) .ui-form-section .p-3.border:has(.row-start-1) { grid-template-columns: minmax(0, 1fr); }
  :root [role="dialog"]:has(#task-form-name) .ui-form-section .p-3.border > .col-span-2 { grid-column: 1; }
  :root [role="dialog"]:has(#task-form-name) .ui-form-section .p-3.border .row-start-1 { grid-column: 1; grid-row: 3; justify-self: end; }
}
@media (max-width: 680px) {
  :root .tgprofile-modal, :root .tgsec-modal { border-radius: 16px 16px 0 0; }
  :root .tgprofile-file { width: 100%; }
  :root .tg-manager-section-nav { margin-top: -16px; margin-inline: -16px; padding-inline: 16px; flex-wrap: wrap; overflow-x: visible; }
}