/* One geometry and palette for shared controls, regardless of their module. */
:root {
  --status-neutral: #65727e;
  --status-neutral-soft: #edf0f2;
  --status-frozen: #3977a2;
  --status-frozen-soft: #e6f1f8;
  --ui-card-radius: 12px;
  --ui-control-radius: 9px;
}
html[data-desktop-theme=dark] {
  --status-neutral: #bdcad2;
  --status-neutral-soft: #34434d;
  --status-frozen: #95cbee;
  --status-frozen-soft: #293e50;
}
[data-account-status] { --status-ink: var(--status-neutral); --status-fill: var(--status-neutral-soft) }
[data-account-status=unrestricted] { --status-ink: var(--green); --status-fill: var(--green-soft) }
[data-account-status=spamblock] { --status-ink: var(--amber); --status-fill: var(--amber-soft) }
[data-account-status=frozen] { --status-ink: var(--status-frozen); --status-fill: var(--status-frozen-soft) }
[data-account-status=dead], [data-account-status=invalid_format] { --status-ink: var(--red); --status-fill: var(--red-soft) }
.account-status[data-account-status] { gap: 5px; color: var(--status-ink); background: var(--status-fill) }
.account-status[data-account-status] > i { flex: 0 0 auto; font-size: 1.1em }
[data-account-status]:not([data-account-status=""]) :is(.folder-icon, .result-icon) { color: var(--status-ink); background: var(--status-fill) }
:is(.tree-item, .tree-button, .move-tree-choice, .move-tree-label, .move-tree-button)[data-account-status]:not([data-account-status=""]) > i { color: var(--status-ink) }
i[data-account-status]:not([data-account-status=""]), .mini-folder-row[data-account-status]:not([data-account-status=""]) > i { color: var(--status-ink) }
.folder-grid, .outbound-project-grid, .outbound-project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  align-items: stretch;
  gap: 12px;
}
.folder-card, .outbound-project-card.ui-project-card {
  width: 100%;
  min-width: 0;
  min-height: 106px;
  border-radius: var(--ui-card-radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  padding: 16px;
  gap: 12px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.folder-card:hover, .outbound-project-card.ui-project-card:hover {
  border-color: var(--line-2);
  background: var(--canvas);
  transform: none;
  box-shadow: none;
}
.folder-card:focus-visible, .outbound-project-card.ui-project-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.folder-card .folder-icon, .ui-project-card .outbound-project-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 1.5rem }
.folder-card { grid-template-columns: 40px minmax(0,1fr) auto }
.folder-card-copy strong, .ui-project-card .outbound-project-copy strong { font-size: .846154rem; line-height: 1.45; font-weight: 750 }
.folder-card-copy span, .ui-project-card .outbound-project-copy small { color: var(--soft); font-size: .615385rem; line-height: 1.5 }
.outbound-project-card.ui-project-card {
  grid-template-columns: 40px minmax(0,1fr) auto 14px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
}
.ui-project-card .outbound-project-icon { grid-column: 1; grid-row: 1 / 3 }
.ui-project-card .outbound-project-copy { grid-column: 2; grid-row: 1 }
.ui-project-card .outbound-project-state { grid-column: 2; grid-row: 2; display: inline-flex; justify-self: start; max-width: 100%; padding: 4px 7px; min-height: 0; overflow: hidden; text-overflow: ellipsis; background: var(--status-neutral-soft); color: var(--status-neutral) }
.ui-project-card .outbound-project-state.running { background: var(--blue-soft); color: var(--blue-dark) }
.ui-project-card [data-project-status=failed] { color: var(--red); background: var(--red-soft) }
.ui-project-card [data-project-status=completed] { color: var(--green); background: var(--green-soft) }
.ui-project-card [data-project-status=completed_with_errors] { color: var(--amber); background: var(--amber-soft) }
.ui-project-card .outbound-project-sent { grid-column: 3; grid-row: 1 / 3; display: block; max-width: 84px }
.ui-project-card .outbound-project-sent small { overflow-wrap: anywhere; color: var(--soft); line-height: 1.45 }
.ui-project-card .ui-project-chevron { grid-column: 4; grid-row: 1 / 3; color: var(--faint) }
.desktop-card-wrap > .folder-card, .desktop-card-wrap > .ui-project-card { padding-right: 52px }
.outbound-project-grid > .outbound-empty, .outbound-project-grid > .empty-state { grid-column: 1 / -1 }
.ui-project-page-head .page-title-row > div { min-width: 0 }
.ui-project-page-head .page-title-row h1 { overflow-wrap: anywhere }
.ui-project-page-head .page-actions { flex-wrap: wrap }
.ui-project-list-head { gap: 16px }
.ui-project-list-head > div { min-width: 0 }
.ui-project-list-head > b { flex: 0 0 auto; color: var(--soft); font-size: .846154rem }
.outbound-project-grid > .ui-project-feedback { min-height: 180px; padding: 28px; border: 1px solid var(--line); border-radius: var(--ui-card-radius); background: var(--card); color: var(--text); text-align: center }
.ui-project-feedback > span { max-width: 600px; color: var(--soft); overflow-wrap: anywhere }
.ui-project-feedback > i { color: var(--blue) }
.ui-project-feedback .button { margin-top: 8px; cursor: pointer }
/* Settings inherit the same control sizes as module forms. */
.appearance-card { container-type: inline-size; border-radius: var(--ui-card-radius) }
.appearance-setting { grid-template-columns: 40px minmax(0,1fr) minmax(180px, 42%); column-gap: 16px; background: var(--card) }
.appearance-setting-copy { overflow-wrap: anywhere }
.appearance-setting-copy small { color: var(--soft) }
.appearance-control { grid-template-columns: 32px minmax(40px,1fr) 32px 48px; gap: 6px; min-width: 0 }
.appearance-control button { width: 32px; height: 32px }
.appearance-control output { min-width: 0 }
.appearance-setting.desktop-theme-setting { grid-template-columns: minmax(0,1fr) minmax(210px, 42%); min-height: 82px; gap: 16px; padding: 18px; align-items: center }
.desktop-preference-options { display: flex; min-width: 0; gap: 3px; padding: 4px; background: var(--surface-inset); border: 1px solid var(--line); border-radius: 11px }
.desktop-preference-options button { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: var(--soft); background: transparent; font: inherit; font-size: .769231rem; font-weight: 700; cursor: pointer; transition: background-color 120ms ease, color 120ms ease }
.desktop-preference-options button:hover { color: var(--text); background: var(--surface-hover) }
.desktop-preference-options button[aria-checked=true] { color: var(--blue-dark); background: var(--card); border-color: var(--line-2); box-shadow: 0 1px 3px #0000000d }
.desktop-preference-options button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px }
.setting-copy { overflow-wrap: anywhere }
.checking-setting-row .setting-copy small { white-space: normal; line-height: 1.45; color: var(--soft) }
@container (max-width: 540px) {
  .appearance-setting { grid-template-columns: 40px minmax(0,1fr) }
  .appearance-control { grid-column: 1 / -1 }
  .appearance-setting.desktop-theme-setting { grid-template-columns: minmax(0,1fr); gap: 12px }
}
@media (max-width: 600px) {
  .folder-grid, .outbound-project-grid, .outbound-project-list { grid-template-columns: minmax(0,1fr) }
}
@media (prefers-reduced-motion: reduce) { .folder-card, .outbound-project-card.ui-project-card { transition: none } }

/* Shared subject-operation form follows the same surfaces in both themes. */
.checking-setting-row.operation-field { grid-template-columns: 31px minmax(0,1fr) auto; gap: 10px }
.checking-setting-row.operation-field[hidden] { display: none }
.checking-setting-row.operation-wide-field { grid-template-columns: 31px minmax(0,1fr) }
.operation-wide-field > input, .operation-wide-field > select { grid-column: 2 / -1; min-width: 0; width: 100%; padding: 8px 10px; border-radius: 8px; background: var(--card); color: var(--text); border: 1px solid var(--line-2); font: inherit; font-size: .692308rem }
.operation-wide-field > input:focus, .operation-wide-field > select:focus { outline: 0; border-color: var(--control-hover-border); box-shadow: 0 0 0 3px rgba(47,120,145,.08) }
.operation-field .outbound-number { width: 88px }
.operation-field-error { grid-column: 2 / -1; color: var(--red); font-size: .615385rem; line-height: 1.4 }
.operation-field [aria-invalid="true"] { border-color: var(--red) }
.operation-field select, .operation-switch { cursor: pointer }
.operation-field .setting-copy strong { overflow-wrap: anywhere; line-height: 1.45 }
.checking-setting-row.operation-api-pair { grid-template-columns: 31px minmax(0,1fr) auto; gap: 10px }
.operation-pair-controls { display: flex; align-items: center; gap: 12px }
.operation-results { grid-template-columns: repeat(auto-fit,minmax(115px,1fr)) }
.operation-results .checking-result-card:last-child { grid-column: auto }
.operation-data-card .file-button { cursor: pointer }
.operation-connection-info { margin: 0; display: grid; gap: 12px }
.operation-connection-info > div { display: grid; grid-template-columns: minmax(100px,1fr) minmax(0,1.5fr); gap: 18px }
.operation-connection-info dt { color: var(--soft) }
.operation-connection-info dd { margin: 0; color: var(--text); overflow-wrap: anywhere }
[data-operation-artifacts] { padding: 0 15px 15px; display: grid; gap: 10px }
[data-operation-artifacts][hidden] { display: none }
.operation-artifact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft) }
.operation-artifact > div { min-width: 0; overflow-wrap: anywhere }
.operation-artifact small { display: block; margin-top: 5px; color: var(--soft); font-size: .615385rem }
.operation-chat-statistics { padding: 0 15px 15px; min-width: 0 }
.operation-chat-statistics h3 { margin: 16px 0 10px; font-size: .85rem }
.operation-chat-statistics .checking-results { padding: 0; margin-bottom: 12px }
.operation-chat-statistics .account-table { min-width: 740px }
.operation-chat-statistics .account-table :is(th, td) { width: auto; padding: 10px 12px; overflow-wrap: anywhere }
.operation-chat-statistics .account-table :is(th, td):first-child { width: 24%; padding-left: 12px }
.operation-chat-statistics .account-table :is(th, td):nth-child(2) { width: 16% }
.operation-chat-statistics .account-table th { line-height: 1.5 }
.operation-chat-statistics td small { display: block; color: var(--soft); margin-top: 4px }