:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --page: #101214;
  --panel: #171a1e;
  --panel-strong: #1d2126;
  --line: #30363d;
  --line-soft: #252a30;
  --text: #f0f2f4;
  --muted: #9ba4ae;
  --accent: #31b7a6;
  --accent-hover: #42cabb;
  --accent-ink: #071513;
  --amber: #e0a34a;
  --red: #ef6b72;
  --blue: #64a5e8;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  background: var(--page);
  color: var(--text);
}

button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }

.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #14171a;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #4d5b60;
  border-radius: 6px;
  background: #d8f0ec;
  color: #123630;
  font-weight: 800;
}

.topbar h1 { margin: 0; font-size: 16px; line-height: 1.25; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.service-state {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.service-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgb(224 163 74 / 13%);
}
.service-state[data-state="online"] .service-state-dot { background: var(--accent); box-shadow: 0 0 0 3px rgb(49 183 166 / 13%); }
.service-state[data-state="offline"] .service-state-dot { background: var(--red); box-shadow: 0 0 0 3px rgb(239 107 114 / 13%); }

.login-page {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
}

.login-card {
  width: min(100%, 380px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.login-card h1 { margin: 18px 0 8px; font-size: 20px; }
.login-card p { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-card form { display: grid; gap: 10px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #111417; color: var(--text); }
.login-card button { width: 100%; margin-top: 6px; }
.login-error { color: var(--red) !important; }

.workspace {
  height: calc(100% - 68px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
}

.control-pane {
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111417;
}

.mode-tab, .detail-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.mode-tab { border-radius: 4px; font-size: 13px; font-weight: 650; }
.mode-tab.active { background: #2b3137; color: var(--text); }

.task-form { margin-top: 24px; }
.library-intro {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111417;
}
.library-intro strong { display: block; font-size: 14px; }
.library-intro p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.library-tabs { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
.library-tab { height: 34px; border: 1px solid var(--line); border-radius: 4px; background: #171a1e; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 650; }
.library-tab.active { border-color: #526069; background: #2b3137; color: var(--text); }

.option-children {
  margin: -9px 0 18px 16px;
  padding-left: 15px;
  border-left: 1px solid var(--line);
}
.option-children .toggle-row {
  min-height: 44px;
  margin-bottom: 5px;
}
.option-children .toggle-row strong { font-size: 12px; }
.inline-number-option {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.inline-number-option label {
  color: #d6dbe0;
  font-size: 12px;
  font-weight: 650;
}
.inline-number-option input {
  width: 88px;
  height: 36px;
  flex: 0 0 88px;
}

.field-group { margin-bottom: 17px; }
.field-group label, .section-label {
  display: block;
  margin-bottom: 7px;
  color: #d6dbe0;
  font-size: 13px;
  font-weight: 650;
}
.field-group label span { color: var(--muted); font-size: 11px; font-weight: 500; }
.field-hint { margin: -4px 0 7px; color: var(--muted); font-size: 11px; font-weight: 500; }
.json-upload-target-row { display: flex; align-items: center; gap: 8px; }
.json-upload-target-row label {
  display: flex;
  flex: 1 1 56%;
  align-items: center;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e6edf2;
  font-size: 14px;
  white-space: nowrap;
}
.json-upload-target-row select { flex: 1 1 44%; min-width: 0; height: 40px; padding: 0 27px 0 10px; font-size: 12px; }
.json-upload-target-field { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.json-upload-target-field .field-hint { margin: 5px 0 0; }

input, textarea, select {
  width: 100%;
  border: 1px solid #394149;
  border-radius: 5px;
  outline: none;
  background: #111417;
  color: var(--text);
  transition: border-color 120ms, box-shadow 120ms;
}

input { height: 40px; padding: 0 11px; }
select { height: 40px; padding: 0 31px 0 11px; }
textarea { min-height: 94px; padding: 10px 11px; resize: vertical; line-height: 1.45; }
textarea.session-input { min-height: 142px; }
textarea.proxy-list-input { min-height: 72px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(49 183 166 / 11%); }
input::placeholder, textarea::placeholder { color: #656f79; }

.toggle-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr 38px;
  align-items: center;
  margin: 0 0 20px;
  cursor: pointer;
}
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 13px; }
.toggle-row small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.toggle-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-row i {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid #46505a;
  border-radius: 12px;
  background: #252b31;
}
.toggle-row i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #aab2ba;
  transition: transform 140ms, background 140ms;
}
.toggle-row input:checked + i { border-color: #258d80; background: #174d46; }
.toggle-row input:checked + i::after { transform: translateX(16px); background: #bff6ef; }

.proxy-fields { padding-top: 18px; border-top: 1px solid var(--line-soft); }
.section-label { margin-bottom: 14px; color: var(--muted); text-transform: uppercase; font-size: 11px; }
.primary-button, .quiet-button {
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}
.primary-button {
  width: 100%;
  margin-top: 4px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.primary-button:hover { background: var(--accent-hover); }
.primary-button:disabled { opacity: .55; cursor: wait; }
.quiet-button {
  padding: 0 13px;
  border: 1px solid var(--line);
  background: #1b1f23;
  color: #cad0d6;
  font-size: 12px;
}
.quiet-button:hover { border-color: #525c66; background: #22272d; }
.quiet-button:disabled, .primary-button:disabled { opacity: .5; cursor: not-allowed; }

.record-action-head { margin-bottom: 12px; }
.record-action-head strong, .record-action-head span { display: block; }
.record-action-head strong { font-size: 14px; }
.record-action-head span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.record-selection {
  min-height: 60px;
  display: flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #111417;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.record-selection-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px;
}
.record-selection-toolbar .record-selection {
  min-height: 34px;
  width: 200px;
  max-width: 100%;
  flex: 0 0 200px;
  margin: 0;
  padding: 7px 10px;
}
.record-selection-toolbar .quiet-button,
.record-selection-toolbar .primary-button { width: auto; height: 34px; margin: 0; padding: 0 10px; }
.record-action-set { display: flex; flex-wrap: wrap; gap: 7px; }
.record-batch-actions { padding-left: 8px; border-left: 1px solid var(--line); }
#records-form .proxy-fields { padding-top: 0; border-top: 0; }
.record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.record-actions .primary-button { margin: 0; }
.record-actions .quiet-button { height: 40px; padding: 0 8px; }
.danger-button { border-color: #6d4148; color: #f3a2a8; }
.danger-button:hover { border-color: #ae5961; background: #302025; }
.relogin-settings, .cpa-settings { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.relogin-settings summary, .cpa-settings summary { color: #d6dbe0; font-size: 12px; font-weight: 700; cursor: pointer; }
.relogin-settings[open] summary, .cpa-settings[open] summary { margin-bottom: 16px; }
.relogin-settings textarea { min-height: 82px; }
.cpa-settings .compact-toggle { min-height: 40px; margin-bottom: 10px; }
.cpa-settings > .quiet-button { width: 100%; }

.activity-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(420px, 1fr) minmax(260px, 1fr);
  gap: 20px;
  overflow: hidden;
  padding: 24px 28px 28px;
  background: #121518;
}
.task-section { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.activity-head { height: 48px; display: flex; align-items: flex-start; }
.activity-head h2 { margin: 0; font-size: 16px; }
.activity-head p { margin: 5px 0 0; color: var(--muted); font: 11px Consolas, monospace; }
.activity-head .quiet-button { margin-left: auto; height: 32px; }
.task-workspace {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: clamp(280px, 24vw, 340px) minmax(0, 1fr);
  gap: 18px;
}
.task-list-pane, .task-detail-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.task-detail-pane { padding-left: 18px; border-left: 1px solid var(--line); }

.task-filters {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-filter {
  height: 25px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}
.task-filter:hover, .task-filter.active { border-color: var(--line); background: #1c2025; color: var(--text); }
.task-list {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  padding: 4px 8px 0 0;
  scrollbar-width: none;
}
.task-list::-webkit-scrollbar { display: none; }
.task-list:empty { display: none; }
.task-card {
  min-width: 0;
  min-height: 90px;
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #171a1e;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}
.task-card.active { border-color: #526069; background: #22272d; color: var(--text); }
.task-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.task-card-head strong { overflow: hidden; flex: 1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-card-status { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.task-dot { width: 7px; height: 7px; border-radius: 50%; background: #79828b; }
.task-card[data-status="running"] .task-dot { background: var(--blue); }
.task-card[data-status="waiting_input"] .task-dot { background: var(--amber); }
.task-card[data-status="success"] .task-dot { background: var(--accent); }
.task-card[data-status="failed"] .task-dot { background: var(--red); }
.task-card[data-status="cancelled"] .task-dot { background: #8b949e; }
.task-card-target, .task-card-progress { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.task-card-progress { color: #aeb6bf; font-size: 10px; }

.empty-state {
  min-height: 0;
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
}
.empty-state strong { font-size: 13px; font-weight: 600; }
.empty-glyph { font: 22px Consolas, monospace; color: #59636d; }

.task-detail {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.status-strip { min-height: 32px; display: flex; align-items: center; gap: 12px; }
.status-strip > span:last-child { color: var(--muted); font-size: 11px; }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #4a535c;
  border-radius: 4px;
  color: #cbd1d7;
  font-size: 11px;
  font-weight: 700;
}
.status-badge.running { border-color: #3f6d9d; color: #9bc8f5; }
.status-badge.waiting_input { border-color: #87632d; color: #f0bd71; }
.status-badge.success { border-color: #2d786e; color: #82dfd2; }
.status-badge.failed { border-color: #844049; color: #f3959b; }
.status-badge.cancelled { border-color: #59616a; color: #b0bac4; }

.detail-tabs-wrap { height: 42px; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.detail-tabs { min-width: 0; display: flex; gap: 20px; }
.detail-tab { position: relative; padding: 0; font-size: 12px; font-weight: 650; }
.detail-tab.active { color: var(--text); }
.detail-tab.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); }
.view-all-task-logs-button { height: 30px; margin: 5px 0 5px auto; }

.log-view, .all-log-view, .result-view > pre {
  min-height: 0;
  margin: 0;
  flex: 1;
  overflow: auto;
  padding: 10px 0;
  color: #c9d2da;
  font: 12px/1.65 Consolas, "SFMono-Regular", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-view { overflow-x: hidden; word-break: break-word; }
.result-view {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 10px;
}
.result-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.result-actions .quiet-button { height: 32px; }
.result-view > pre { padding-top: 10px; }

.records-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.phone-numbers-pane,
.firefox-phone-numbers-pane,
.email-accounts-pane { grid-row: 1 / -1; padding-top: 0; border-top: 0; }
.records-pane-head {
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.records-pane-head h2 { margin: 0; font-size: 16px; }
.records-pane-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.records-pane-head .records-controls { margin-left: auto; padding-bottom: 0; }
.pane-create-button { width: auto; height: 32px; margin-top: 0; margin-left: auto; padding: 0 12px; font-size: 12px; }
.records-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
}
.records-filter { display: flex; align-items: center; gap: 8px; }
.records-filter span { color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.records-filter input, .records-filter select { width: 176px; height: 32px; font-size: 12px; }
.records-filter select { width: 104px; padding-right: 8px; }
.records-controls > .quiet-button { height: 32px; }
.record-table-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.record-table-actions .quiet-button { height: 32px; padding: 0 10px; }
.records-pagination { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.record-selection-toolbar .records-pagination { flex: 0 0 auto; }
.records-pagination .quiet-button { height: 32px; padding: 0 10px; }
.records-pagination label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.records-pagination select { width: 58px; height: 32px; padding: 0 7px; font-size: 12px; }
.records-pagination span { min-width: 54px; color: var(--muted); text-align: center; font-size: 11px; }
.records-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #15181c;
  scrollbar-color: #6c7780 #111417;
  scrollbar-width: thin;
}
.records-table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.records-table-wrap::-webkit-scrollbar-track { background: #111417; }
.records-table-wrap::-webkit-scrollbar-thumb { border: 3px solid #111417; border-radius: 8px; background: #6c7780; }
.records-table-wrap::-webkit-scrollbar-thumb:hover { background: #89939c; }
.records-table-wrap::-webkit-scrollbar-corner { background: #111417; }
.records-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}
.records-table th {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #1c2025;
  color: #aeb6bf;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.records-table td {
  box-sizing: border-box;
  height: 50px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: #cbd1d7;
  vertical-align: middle;
}
.registration-records-table { min-width: 1314px; }
.registration-records-table th:nth-child(1) { width: 42px; text-align: center; }
.registration-records-table th:nth-child(2) { width: 280px; }
.registration-records-table th:nth-child(3) { width: 72px; text-align: center; }
.registration-records-table th:nth-child(4),
.registration-records-table th:nth-child(5),
.registration-records-table th:nth-child(7),
.registration-records-table th:nth-child(8) { width: 64px; text-align: center; }
.registration-records-table th:nth-child(6) { width: 82px; text-align: center; }
.registration-records-table th:nth-child(9),
.registration-records-table th:nth-child(10) { width: 150px; }
.registration-records-table th:nth-child(11) { width: 282px; }
.registration-records-table td:nth-child(1),
.registration-records-table td:nth-child(3),
.registration-records-table td:nth-child(4),
.registration-records-table td:nth-child(5),
.registration-records-table td:nth-child(6),
.registration-records-table td:nth-child(7),
.registration-records-table td:nth-child(8) { text-align: center; }
.record-checkbox-cell { padding: 0 !important; }
.record-checkbox-cell input, .record-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.record-row { cursor: pointer; transition: background 120ms; }
.record-row:last-child td { border-bottom: 0; }
.record-row:hover { background: #1b2025; }
.record-row.active { background: #202a2a; box-shadow: inset 3px 0 var(--accent); }
.record-account {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.record-account strong, .record-account span { display: block; }
.record-account strong {
  overflow: hidden;
  color: #eef1f3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-account span {
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.record-status, .record-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.record-status.success, .record-flag.available { border-color: #2d786e; color: #82dfd2; }
.record-status.failed { border-color: #844049; color: #f3959b; }
.record-flag.missing { color: #727c86; }
.record-time { color: var(--muted) !important; font-size: 11px; white-space: nowrap; }
.record-message {
  overflow: hidden;
  color: #aeb6bf !important;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.records-empty td {
  height: 160px;
  color: var(--muted);
  text-align: center !important;
  font-size: 12px;
}
.records-table-hint { flex: 0 0 auto; margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.phone-numbers-table { min-width: 920px; }
.phone-numbers-table th:nth-child(1) { width: 42px; text-align: center; }
.phone-numbers-table th:nth-child(2) { width: 11%; text-align: left; }
.phone-numbers-table th:nth-child(3) { width: 17%; }
.phone-numbers-table th:nth-child(4) { width: 12%; text-align: center; }
.phone-numbers-table th:nth-child(5) { width: 11%; text-align: center; }
.phone-numbers-table th:nth-child(6) { width: 19%; }
.phone-numbers-table th:nth-child(7) { width: 19%; }
.phone-numbers-table th:nth-child(8) { width: 12%; text-align: center; }
.phone-numbers-table td:nth-child(1), .phone-numbers-table td:nth-child(4), .phone-numbers-table td:nth-child(5), .phone-numbers-table td:nth-child(8) { text-align: center; }
.email-accounts-table { min-width: 680px; }
.email-accounts-table th:nth-child(1) { width: 42px; text-align: center; }
.email-accounts-table th:nth-child(2) { width: 42%; }
.email-accounts-table th:nth-child(3), .email-accounts-table th:nth-child(4) { width: 20%; }
.email-accounts-table th:nth-child(5) { width: 18%; text-align: center; }
.email-accounts-table td:nth-child(1), .email-accounts-table td:nth-child(5) { text-align: center; }
.phone-number-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: #8fd9d0;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.phone-number-link:hover { color: #b5f0e8; }
.phone-number-action { height: 30px !important; padding: 0 10px !important; }
.phone-number-action + .phone-number-action { margin-left: 6px; }
.phone-numbers-pagination, .phone-number-picker-pagination {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.phone-numbers-pagination .quiet-button, .phone-number-picker-pagination .quiet-button { height: 32px; padding: 0 10px; }
.phone-numbers-pagination label, .phone-number-picker-pagination label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.phone-numbers-pagination select, .phone-number-picker-pagination select { width: 58px; height: 32px; padding: 0 7px; font-size: 12px; }
.phone-numbers-pagination span, .phone-number-picker-pagination span { min-width: 54px; color: var(--muted); text-align: center; font-size: 11px; }

.prompt-layer, .delete-layer, .editor-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(6 8 10 / 78%);
}
.prompt-dialog, .delete-dialog, .editor-dialog {
  width: min(440px, 100%);
  padding: 22px;
  border: 1px solid #46515a;
  border-radius: 7px;
  background: #1a1e22;
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
}
.prompt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.prompt-head > div { min-width: 0; flex: 1; }
.prompt-head span { display: block; margin-bottom: 6px; color: var(--amber); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.prompt-head strong { font-size: 16px; }
.prompt-cancel-button { flex: 0 0 auto; height: 30px; padding: 0 10px; }
.prompt-dialog > p { margin: 9px 0 18px; color: var(--muted); font-size: 12px; }
.prompt-failure { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 16px; padding: 10px; border: 1px solid #9b4c55; border-radius: 6px; background: #321f25; color: #ffc5ca; }
.prompt-failure-icon { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #c75b66; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.prompt-failure > div { min-width: 0; }
.prompt-failure strong { display: block; color: #ffd6d9; font-size: 12px; }
.prompt-failure p { max-height: 86px; margin: 5px 0 0; overflow: auto; color: #edafb4; font-family: Consolas, monospace; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.delete-dialog-head span { display: block; margin-bottom: 6px; color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.delete-dialog-head strong { font-size: 16px; }
.delete-dialog > p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.delete-dialog > .delete-dialog-warning { color: #e8b1b5; }
.delete-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.delete-dialog-actions .quiet-button, .delete-confirm-button { height: 38px; padding: 0 14px; }
.delete-confirm-button {
  border: 1px solid #af5962;
  border-radius: 5px;
  background: #9d424a;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.delete-confirm-button:hover { background: #bd525c; }
.delete-confirm-button:disabled { opacity: .5; cursor: not-allowed; }
.prompt-detail { max-height: 110px; overflow: auto; padding: 9px; background: #111417; font-family: Consolas, monospace; }
.phone-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.phone-library-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #111417;
}
.phone-library-action strong, .phone-library-action span { display: block; }
.phone-library-action strong { font-size: 12px; }
.phone-library-action span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.phone-library-action .quiet-button { flex: 0 0 auto; height: 34px; }
.phone-library-buttons { display: flex; flex: 0 0 auto; gap: 8px; }
.phone-number-save-option {
  min-height: 46px;
  column-gap: 12px;
  margin: 0 0 16px;
}
.phone-number-save-option > span { min-width: 0; }
.form-error { color: var(--red) !important; }
.editor-dialog-head span { display: block; margin-bottom: 6px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.editor-dialog-head strong { display: block; margin-bottom: 20px; font-size: 16px; }
.editor-dialog .field-group { margin-bottom: 14px; }
.editor-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.editor-dialog-actions .quiet-button, .editor-dialog-actions .primary-button { height: 38px; margin: 0; }

.phone-number-picker-layer {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(6 8 10 / 78%);
}
.phone-number-picker-dialog {
  position: fixed;
  inset: 18px 36px;
  width: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #46515a;
  border-radius: 7px;
  background: #1a1e22;
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
}
.phone-number-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.phone-number-picker-head span, .phone-number-picker-head strong { display: block; }
.phone-number-picker-head span { margin-bottom: 6px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.phone-number-picker-head strong { font-size: 16px; }
.phone-number-picker-head .quiet-button { flex: 0 0 auto; height: 34px; }
.phone-number-picker-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
}
.phone-number-picker-controls > .quiet-button { height: 32px; }
.phone-number-picker-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #15181c;
}
.phone-number-picker-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}
.phone-number-picker-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: #1c2025;
  color: #aeb6bf;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.phone-number-picker-table th:nth-child(1) { width: 11%; }
.phone-number-picker-table th:nth-child(2) { width: 19%; }
.phone-number-picker-table th:nth-child(3) { width: 12%; text-align: center; }
.phone-number-picker-table th:nth-child(4) { width: 24%; }
.phone-number-picker-table th:nth-child(5) { width: 22%; }
.phone-number-picker-table th:nth-child(6) { width: 12%; text-align: center; }
.phone-number-picker-table td {
  height: 48px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: #cbd1d7;
  vertical-align: middle;
}
.phone-number-picker-table td:nth-child(3), .phone-number-picker-table td:nth-child(6) { text-align: center; }
.phone-number-picker-table tr:last-child td { border-bottom: 0; }
.phone-number-picker-link {
  display: block;
  overflow: hidden;
  color: #aeb6bf;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-number-picker-button { height: 30px !important; padding: 0 10px !important; }
.firefox-phone-picker-table { min-width: 620px; }
.firefox-phone-picker-table th:nth-child(1) { width: 18%; }
.firefox-phone-picker-table th:nth-child(2) { width: 30%; }
.firefox-phone-picker-table th:nth-child(3) { width: 28%; text-align: center; }
.firefox-phone-picker-table th:nth-child(4) { width: 24%; text-align: center; }
.firefox-phone-picker-table td:nth-child(3), .firefox-phone-picker-table td:nth-child(4) { text-align: center; }

.task-log-layer {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(6 8 10 / 78%);
}
.task-log-dialog {
  position: fixed;
  inset: 18px 36px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px;
  border: 1px solid #46515a;
  border-radius: 7px;
  background: #1a1e22;
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
}
.task-log-dialog-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
}
.task-log-dialog-head span, .task-log-dialog-head strong { display: block; }
.task-log-dialog-head span { margin-bottom: 6px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.task-log-dialog-head strong { font-size: 16px; }
.task-log-dialog-head .quiet-button { flex: 0 0 auto; height: 34px; }
.all-log-view {
  min-height: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111417;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 14px;
  border: 1px solid #46515a;
  border-radius: 5px;
  background: #242a30;
  color: var(--text);
  box-shadow: 0 12px 34px rgb(0 0 0 / 35%);
  font-size: 12px;
}

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .task-workspace { display: flex; flex-direction: column; gap: 18px; }
  .task-list-pane { flex: 0 0 180px; }
  .task-detail-pane { flex: 1; padding-top: 18px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 820px) {
  body { height: auto; min-height: 100%; overflow: auto; }
  .topbar { padding: 0 16px; }
  .workspace { height: auto; min-height: calc(100vh - 68px); display: block; }
  .control-pane { overflow: visible; padding: 20px 16px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .activity-pane { min-height: 0; display: block; overflow: visible; padding: 22px 16px; }
  .task-section { min-height: 560px; }
  .task-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .records-pane { min-height: 480px; margin-top: 20px; padding-top: 20px; }
  .records-pane-head { height: auto; min-height: 46px; flex: 0 0 auto; flex-wrap: wrap; align-items: flex-start; }
  .records-pane-head .records-controls { width: 100%; margin-left: 0; padding-top: 12px; }
  .phone-numbers-pane, .firefox-phone-numbers-pane, .email-accounts-pane { margin-top: 0; padding-top: 0; }
  .records-table-wrap { max-height: 520px; }
  .records-pagination { margin-left: 0; }
  .phone-numbers-pagination, .phone-number-picker-pagination { margin-left: 0; }
  .phone-number-picker-dialog, .task-log-dialog { inset: 12px; padding: 16px; }
  .log-view, .result-view > pre { max-height: 300px; }
}

@media (max-width: 430px) {
  .service-state { font-size: 0; }
  .activity-head { height: 52px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .result-actions .quiet-button { padding: 0 8px; }
}