:root {
  --color-primary: #165dff;
  --color-primary-hover: #4080ff;
  --color-bg: #f7f8fa;
  --color-card: #fff;
  --color-text-1: #1d2129;
  --color-text-2: #4e5969;
  --color-text-3: #86909c;
  --color-border: #e5e6eb;
  --shadow-card: 0 16px 44px rgba(29, 33, 41, .10);
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--color-text-1);
  background:
    radial-gradient(circle at 72% 18%, rgba(20, 201, 201, .16), transparent 30%),
    radial-gradient(circle at 22% 78%, rgba(0, 180, 42, .10), transparent 34%),
    linear-gradient(135deg, rgba(22, 93, 255, .055), transparent 36%),
    linear-gradient(90deg, rgba(229, 230, 235, .28) 1px, transparent 1px),
    linear-gradient(0deg, rgba(229, 230, 235, .28) 1px, transparent 1px),
    linear-gradient(180deg, #fbfffd 0%, #f3faf8 48%, #f7f8fa 100%);
  background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: auto -8% -1px -8%;
  height: 48vh;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 10%, rgba(23, 112, 115, .10) 10.3% 24%, transparent 24.3%),
    linear-gradient(150deg, transparent 28%, rgba(20, 201, 201, .11) 28.4% 46%, transparent 46.3%),
    linear-gradient(24deg, transparent 12%, rgba(0, 180, 42, .08) 12.4% 31%, transparent 31.4%),
    linear-gradient(0deg, rgba(255, 255, 255, .78), transparent 58%);
  opacity: .9;
}

.login-wrap {
  width: min(380px, 100%);
  position: relative;
  z-index: 1;
}

.brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 22px;
  text-align: center;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(22, 93, 255, .22);
}

.logo svg {
  width: 24px;
  height: 24px;
  display: block;
}

.brand strong {
  font-size: 22px;
  line-height: 1.2;
}

.brand span {
  color: var(--color-text-3);
  font-size: 13px;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.card h1 {
  margin: 0 0 22px;
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  color: var(--color-text-2);
  font-size: 13px;
}

input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--color-text-1);
  background: #fff;
  font: inherit;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}

select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 12px;
  color: var(--color-text-1);
  background: #fff;
  font: inherit;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}

textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--color-text-1);
  background: #fff;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 93, 255, .10);
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 2px 0 22px;
  color: var(--color-text-3);
  font-size: 13px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.check input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

button {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  background: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s, transform .16s;
}

button:hover {
  background: var(--color-primary-hover);
}

button:active {
  transform: translateY(1px);
}

.site-link,
.message {
  display: block;
  margin-top: 16px;
  color: var(--color-text-3);
  font-size: 13px;
  text-align: center;
}

.message {
  min-height: 18px;
  margin-bottom: 0;
}

.app-body {
  display: block;
  place-items: initial;
  overflow: auto;
}

.app-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
  position: relative;
  z-index: 1;
}

.dense-shell {
  width: min(2300px, calc(100vw - 10px));
  padding-left: 112px;
  padding-right: 6px;
}

.app-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.app-header div {
  display: grid;
  gap: 4px;
}

.app-header strong {
  font-size: 19px;
}

.app-header span {
  color: var(--color-text-3);
  font-size: 13px;
}

.ghost-button {
  width: auto;
  min-width: 72px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  color: var(--color-text-2);
  background: rgba(255, 255, 255, .78);
  font-weight: 400;
}

.ghost-button:hover {
  color: var(--color-primary);
  background: #fff;
}

.welcome-panel {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 16px;
}

.welcome-panel p {
  margin: 0 0 8px;
  color: var(--color-text-3);
  font-size: 13px;
}

.welcome-panel h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
}

.grid-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.panel-card {
  min-height: 118px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  padding: 20px;
  display: grid;
  align-content: space-between;
}

.panel-card span {
  color: var(--color-text-3);
  font-size: 13px;
}

.panel-card strong {
  font-size: 22px;
}

.work-section {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  padding: 22px;
  margin-top: 16px;
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
}

.section-title span {
  color: var(--color-text-3);
  font-size: 13px;
}

.title-actions,
.account-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-tools {
  justify-self: end;
  width: auto;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.account-title-bar {
  border: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
}

.account-title-bar h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.account-title-bar span {
  grid-column: 1 / -1;
  color: var(--color-text-3);
  font-size: 12px;
}

.account-title-bar .ghost-button,
.import-button,
.export-button {
  height: 34px;
  border-color: #c9d9d5;
  background: #fff;
  font-weight: 700;
}

.export-group {
  flex: 0 0 auto;
  height: 36px;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid #c9d9d5;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(29, 33, 41, .04);
}

.export-select {
  flex: 0 0 126px;
  width: 126px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--color-text-2);
  font-size: 13px;
  outline: none;
  padding: 0 8px;
}

.export-select:focus {
  box-shadow: inset 0 0 0 2px rgba(22, 93, 255, .12);
}

.export-button,
.import-button,
.danger-tool-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 78px;
  padding: 0 14px;
  border: 1px solid #c9d9d5;
  border-radius: 8px;
  color: var(--color-text-2);
  cursor: pointer;
}

.export-button {
  min-width: 62px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  background: #f7faf9;
}

.export-button:hover {
  color: var(--color-primary);
  background: #eef7f4;
}

.import-button {
  color: #7a4e12;
  border-color: #ead5a6;
  background: #fff6df;
  box-shadow: none;
}

.import-button:hover {
  color: #5f3908;
  background: #ffefc2;
}

.danger-tool-button {
  color: #cb272d;
  border-color: #ffd4d4;
  background: #fff2f2;
}

.danger-tool-button:hover {
  color: #a1151b;
  background: #ffe7e7;
}

.batch-bar {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f9fbfd;
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 110px minmax(320px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.account-status-bar {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf9 100%);
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.account-status-bar div:first-child {
  display: grid;
  gap: 4px;
}

.account-status-bar strong {
  color: var(--color-text-1);
  font-size: 14px;
}

.account-status-bar span {
  color: var(--color-text-3);
  font-size: 12px;
}

.batch-actions {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(29, 33, 41, .05);
}

.batch-action {
  width: auto;
  min-width: 86px;
  height: 40px;
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0 14px;
  color: var(--color-text-2);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.batch-action:last-child {
  border-right: 0;
}

.batch-action:hover {
  color: var(--color-primary);
  background: #f4f8ff;
}

.primary-action {
  color: #fff;
  background: var(--color-primary);
}

.primary-action:hover {
  color: #fff;
  background: var(--color-primary-hover);
}

.danger-action {
  color: #cb272d;
}

.danger-action:hover {
  color: #a1151b;
  background: #fff2f2;
}

.batch-text-field select {
  min-width: 280px;
}

.text-form {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.config-hero {
  margin-bottom: 12px;
}

.config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.config-form button {
  height: 40px;
  grid-column: 1 / -1;
}

.config-auto-reply-field {
  grid-column: 1 / -1;
}

.config-auto-reply-field textarea {
  min-height: 86px;
  resize: vertical;
}

.config-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
  gap: 12px;
  align-items: start;
}

.config-left-column {
  display: grid;
  gap: 12px;
}

.help-card {
  border: 1px solid #cfe5dd;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(242, 250, 247, .95)),
    radial-gradient(circle at 94% 18%, rgba(20, 201, 201, .12), transparent 28%);
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.help-card strong {
  color: var(--color-text-1);
  font-size: 15px;
}

.help-card p {
  margin: 0;
  color: var(--color-text-2);
  font-size: 13px;
  line-height: 1.7;
}

.rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.rule-chips span {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #28705d;
  background: #e8fff7;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.compact-config-section {
  margin-top: 0;
  margin-bottom: 12px;
  min-height: 720px;
}

.text-library-section {
  margin: 0;
}

.inline-text-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.inline-text-form button {
  height: 40px;
}

.compact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-form button,
.compact-form .message {
  grid-column: 1 / -1;
}

.text-list {
  display: grid;
  gap: 10px;
}

.text-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.item-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.text-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.text-item p {
  margin: 0;
  color: var(--color-text-2);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.config-item p + p {
  margin-top: 4px;
}

.text-item span {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #0e42d2;
  background: #e8f3ff;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.danger-button {
  width: auto;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #ffd4d4;
  border-radius: 999px;
  color: #cb272d;
  background: #fff2f2;
  font-size: 12px;
  font-weight: 400;
}

.danger-button:hover {
  color: #a1151b;
  background: #ffe7e7;
}

.empty-text {
  margin: 0;
  color: var(--color-text-3);
  font-size: 13px;
}

.toolbar-panel {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.toolbar-panel div {
  min-height: 64px;
  padding: 12px 16px;
  border-right: 1px solid var(--color-border);
  display: grid;
  align-content: center;
  gap: 2px;
}

.toolbar-panel div:last-child {
  border-right: 0;
}

.toolbar-panel span {
  color: var(--color-text-3);
  font-size: 13px;
}

.toolbar-panel strong {
  font-size: 22px;
  line-height: 1;
}

.table-section {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  margin-top: 12px;
  overflow: hidden;
}

.small-section {
  padding: 12px;
}

.compact-title {
  padding: 10px 12px;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.compact-title h2 {
  font-size: 15px;
}

.table-wrap {
  overflow: auto;
}

.pagination-bar {
  min-height: 58px;
  border-top: 1px solid var(--color-border);
  background: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-3);
  font-size: 15px;
  font-weight: 700;
}

.pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pagination-actions strong {
  min-width: 72px;
  color: var(--color-text-1);
  text-align: center;
  font-size: 15px;
}

.pagination-actions button {
  width: auto;
  min-width: 84px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  color: var(--color-text-2);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.pagination-actions button:hover:not(:disabled) {
  color: var(--color-primary);
  background: #f4f8ff;
}

.pagination-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.page-size-select {
  height: 36px;
  min-width: 128px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f9fbfd;
  padding: 0 8px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.page-size-select span {
  display: inline-block;
  white-space: nowrap;
}

.page-size-select select {
  min-width: 64px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-text-1);
  font: inherit;
  outline: none;
}

.data-table {
  width: 100%;
  min-width: 2120px;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

.data-table th,
.data-table td {
  height: 42px;
  border-bottom: 1px solid #edf0f3;
  border-right: 1px solid #edf0f3;
  padding: 0 9px;
  white-space: nowrap;
  vertical-align: middle;
}

.data-table th {
  color: #1d2129;
  background: #f6f8fb;
  font-weight: 700;
  height: 40px;
  font-size: 14px;
}

.data-table tbody tr:hover {
  background: #f9fcff;
}

.data-table .select-col {
  width: 28px;
  min-width: 28px;
  text-align: center;
  padding: 0;
}

.data-table .select-col input {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
}

.data-table th:nth-child(9),
.data-table td:nth-child(9) {
  min-width: 120px;
}

.data-table th:nth-child(10),
.data-table td:nth-child(10) {
  min-width: 220px;
}

.data-table th:nth-child(11),
.data-table td:nth-child(11) {
  min-width: 86px;
}

.data-table th:nth-child(12),
.data-table td:nth-child(12) {
  min-width: 300px;
}

.data-table th:nth-child(13),
.data-table td:nth-child(13),
.data-table th:nth-child(14),
.data-table td:nth-child(14) {
  min-width: 190px;
}

.data-table th:nth-child(15),
.data-table td:nth-child(15) {
  min-width: 210px;
}

.data-table th:nth-child(16),
.data-table td:nth-child(16) {
  min-width: 96px;
}

.data-table th:nth-child(17),
.data-table td:nth-child(17) {
  min-width: 96px;
}

.data-table th:nth-child(18),
.data-table td:nth-child(18) {
  min-width: 108px;
}

.table-select {
  width: 130px;
  height: 28px;
  padding: 0 5px;
  font-size: 13px;
}

.mode-select {
  width: 72px;
}

.table-input {
  width: 130px;
  height: 28px;
  padding: 0 5px;
  font-size: 13px;
}

.long-select {
  width: 100%;
  min-width: 300px;
}

.activity-select {
  width: 190px;
}

.activity-input {
  width: 100%;
  min-width: 200px;
}

.client-rail {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 98px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 26px rgba(29, 33, 41, .08);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.client-rail a {
  min-height: 42px;
  border-radius: 8px;
  color: var(--color-text-2);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

.client-rail a:hover,
.client-rail a.active {
  color: var(--color-primary);
  background: #e8f3ff;
}

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(29, 33, 41, .46);
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal-mask.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.modal-card {
  width: min(620px, 100%);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(29, 33, 41, .20);
  padding: 18px;
}

.import-modal-card {
  width: min(990px, calc(100vw - 96px));
  min-height: min(532px, calc(100vh - 112px));
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr) auto;
  gap: 12px;
}

.result-modal-card {
  width: min(680px, calc(100vw - 48px));
}

.result-modal-card p {
  margin: 8px 0 18px;
  color: var(--color-text-2);
  line-height: 1.7;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
}

.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(29, 33, 41, .28);
  display: flex;
  justify-content: flex-end;
}

.drawer-mask.hidden {
  display: none;
}

.edit-drawer {
  width: min(420px, 100vw);
  height: 100vh;
  background: #fff;
  box-shadow: -18px 0 42px rgba(29, 33, 41, .16);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.drawer-head {
  height: 64px;
  border-bottom: 1px solid var(--color-border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-head strong {
  font-size: 18px;
}

.drawer-body {
  padding: 22px 20px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
}

.drawer-section-title {
  color: var(--color-text-1);
  font-size: 15px;
  font-weight: 800;
}

.drawer-actions {
  height: 70px;
  border-top: 1px solid var(--color-border);
  padding: 14px 18px;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.drawer-actions button {
  width: 96px;
  height: 40px;
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head {
  margin-bottom: 0;
}

.modal-head strong {
  font-size: 17px;
}

.plain-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  color: var(--color-text-3);
  background: transparent;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
}

.plain-close:hover {
  color: var(--color-text-1);
  background: #f2f3f5;
}

.import-textarea {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.7;
  resize: none;
}

.import-example {
  margin: 8px 0 14px;
  color: var(--color-text-3);
  font-size: 12px;
}

.modal-actions {
  justify-content: flex-end;
}

.modal-actions button {
  width: auto;
  min-width: 64px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.danger-confirm-button {
  color: #fff;
  background: #f53f3f;
}

.danger-confirm-button:hover {
  background: #cb272d;
}

.empty-row {
  height: 46px;
  color: var(--color-text-3);
  text-align: center;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mini-button {
  width: auto;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-2);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.mini-button:hover {
  color: var(--color-primary);
  background: #f4f8ff;
}

.danger-mini,
.action-danger {
  border-color: #ffd4d4;
  color: #cb272d;
  background: #fff2f2;
}

.danger-mini:hover,
.action-danger:hover {
  color: #a1151b;
  background: #ffe7e7;
}

.rail-brand {
  height: 52px;
  border-radius: 10px;
  color: #fff;
  background: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(22, 93, 255, .22);
}

.text-preview-cell {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-2);
}

.status-dot,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-dot::before,
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #86909c;
  box-shadow: 0 0 0 3px rgba(134, 144, 156, .12);
}

.status-dot.ok::before,
.status-pill.ok::before {
  background: #00b42a;
  box-shadow: 0 0 0 3px rgba(0, 180, 42, .14);
}

.status-dot.off::before,
.status-pill.off::before {
  background: #86909c;
  box-shadow: 0 0 0 3px rgba(134, 144, 156, .14);
}

.status-pill.danger::before {
  background: #f53f3f;
  box-shadow: 0 0 0 3px rgba(245, 63, 63, .14);
}

.status-pill.warning::before {
  background: #ff7d00;
  box-shadow: 0 0 0 3px rgba(255, 125, 0, .16);
}

.mute-pill,
.status-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #2b7a43;
  background: #e8ffea;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.status-pill.off {
  color: #4e5969;
  background: #f2f3f5;
}

.mute-pill.muted,
.status-pill.danger {
  color: #cb272d;
  background: #fff2f2;
}

.status-pill.warning {
  color: #b54b00;
  background: #fff7e8;
}

.control-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.top-control-panel {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  margin-bottom: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.dash-card {
  min-height: 86px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)),
    radial-gradient(circle at 82% 16%, rgba(20, 201, 201, .12), transparent 34%);
  box-shadow: 0 12px 30px rgba(29, 33, 41, .08);
  padding: 14px 16px;
  display: grid;
  align-content: space-between;
  text-decoration: none;
}

.dash-card span {
  color: var(--color-text-3);
  font-size: 12px;
}

.dash-card strong {
  color: var(--color-text-1);
  font-size: 24px;
  line-height: 1;
}

.dash-card p {
  margin: 8px 0 0;
  color: var(--color-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.message-home-card {
  border: 1px solid #dbe8e4;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(29, 33, 41, .07);
  padding: 14px;
  margin-bottom: 10px;
}

.message-home-head,
.message-home-stats,
.home-message-item,
.message-center-link {
  display: flex;
  align-items: center;
}

.message-home-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.message-home-head div {
  display: grid;
  gap: 3px;
}

.message-home-head strong {
  font-size: 15px;
}

.message-home-head span,
.message-home-head a {
  color: var(--color-text-3);
  font-size: 12px;
}

.message-home-stats {
  gap: 8px;
  margin-bottom: 10px;
}

.message-home-stats div {
  min-width: 110px;
  border: 1px solid #edf1f0;
  border-radius: 8px;
  background: #f8fcfb;
  padding: 9px 11px;
  display: grid;
  gap: 3px;
}

.message-home-stats span {
  color: var(--color-text-3);
  font-size: 12px;
}

.message-home-stats strong {
  font-size: 22px;
  line-height: 1;
}

.home-message-list {
  display: grid;
  gap: 2px;
}

.home-message-item {
  min-height: 48px;
  border-radius: 8px;
  padding: 6px 8px;
  gap: 10px;
  color: inherit;
}

.home-message-item:hover {
  background: #f4faf8;
}

.home-message-item.failed {
  background: #fff7f7;
}

.message-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #0b8f68;
  background: #e7fff7;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.message-main {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1;
}

.message-main strong,
.message-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-main strong {
  font-size: 13px;
}

.message-main em {
  color: var(--color-text-3);
  font-size: 12px;
  font-style: normal;
}

.message-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--color-text-3);
  font-size: 12px;
}

.message-meta b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #f53f3f;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
}

.home-message-empty {
  min-height: 44px;
  color: var(--color-text-3);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.message-center-link {
  width: max-content;
  margin-top: 8px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
}

.ops-strip {
  display: grid;
  grid-template-columns: minmax(380px, 1.45fr) minmax(340px, 1fr) minmax(260px, .82fr);
  gap: 10px;
  margin-bottom: 10px;
}

.ops-card {
  min-height: 168px;
  border: 1px solid #dbe8e4;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 252, 250, .94)),
    radial-gradient(circle at 92% 12%, rgba(20, 201, 201, .12), transparent 28%);
  box-shadow: 0 12px 30px rgba(29, 33, 41, .07);
  padding: 14px;
  overflow: hidden;
}

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

.ops-card-head div {
  display: grid;
  gap: 3px;
}

.ops-card-head strong {
  color: var(--color-text-1);
  font-size: 15px;
  line-height: 1.2;
}

.ops-card-head span {
  color: var(--color-text-3);
  font-size: 12px;
}

.ops-live-dot {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #0b8f68 !important;
  background: #e7fff7;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.ops-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: #00b42a;
  box-shadow: 0 0 0 4px rgba(0, 180, 42, .12);
}

.config-usage-list {
  max-height: 118px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-right: 2px;
}

.config-usage-item {
  min-height: 72px;
  border: 1px solid #edf1f0;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-content: center;
}

.config-usage-item strong,
.config-usage-item em,
.config-usage-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-usage-item strong {
  color: var(--color-text-1);
  font-size: 14px;
}

.config-usage-item em {
  grid-column: 2;
  color: var(--color-text-2);
  font-size: 12px;
  font-style: normal;
}

.config-usage-item small {
  grid-column: 1 / -1;
  color: var(--color-text-3);
  font-size: 12px;
}

.usage-state {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #4e5969;
  background: #f2f3f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.config-usage-item.used {
  border-color: #bfe9d7;
  background: linear-gradient(135deg, #ffffff, #f2fff9);
}

.config-usage-item.used .usage-state {
  color: #0b8f68;
  background: #dffbf0;
}

.risk-grid {
  display: grid;
  gap: 8px;
}

.risk-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.risk-row strong,
.risk-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-row strong {
  color: var(--color-text-1);
  font-size: 13px;
}

.risk-row div > span {
  color: var(--color-text-3);
  font-size: 12px;
}

.risk-bars {
  display: grid;
  gap: 5px;
}

.risk-bars span {
  height: 14px;
  border-radius: 999px;
  background: #fff1df;
  position: relative;
  overflow: hidden;
}

.risk-bars span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(var(--w), 2%);
  border-radius: inherit;
  background: #ff9a2e;
}

.risk-bars .ban-bar {
  background: #ffe8e8;
}

.risk-bars .ban-bar::before {
  background: #f53f3f;
}

.risk-bars em {
  position: relative;
  z-index: 1;
  padding-left: 8px;
  color: #5f3908;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 14px;
}

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

.radar-item {
  min-height: 52px;
  border: 1px solid #edf1f0;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 5px;
}

.radar-item span {
  color: var(--color-text-3);
  font-size: 12px;
}

.radar-item strong {
  color: var(--color-text-1);
  font-size: 20px;
  line-height: 1;
}

.radar-item.ok {
  border-color: #ccefdc;
  background: #f3fff8;
}

.radar-item.warning {
  border-color: #ffe1b8;
  background: #fff9ef;
}

.radar-item.off {
  border-color: #e5e6eb;
  background: #f7f8fa;
}

.empty-ops {
  min-height: 72px;
  border: 1px dashed #dbe8e4;
  border-radius: 8px;
  color: var(--color-text-3);
  background: rgba(255, 255, 255, .68);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.ops-table-strip {
  grid-template-columns: minmax(390px, .9fr) minmax(440px, 1fr) minmax(520px, 1.25fr);
}

.ops-table-strip .ops-card {
  min-height: 218px;
  padding: 12px;
}

.ops-table-strip .config-usage-list {
  max-height: 158px;
}

.ops-table-strip .config-usage-item {
  min-height: 68px;
}

.mini-table-wrap {
  max-height: 154px;
  border: 1px solid #edf1f0;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
}

.ops-mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.ops-mini-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 30px;
  padding: 0 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-3);
  background: #f7faf9;
  text-align: left;
  font-weight: 800;
  white-space: nowrap;
}

.ops-mini-table td {
  height: 34px;
  padding: 0 8px;
  border-bottom: 1px solid #f0f2f5;
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-mini-table tr:last-child td {
  border-bottom: 0;
}

.ops-mini-table td strong {
  color: var(--color-text-1);
  font-size: 12px;
}

.ops-mini-table .row-used td {
  background: #f4fffa;
}

.ops-mini-table .row-idle td {
  background: #fff;
}

.ops-mini-table th:nth-child(1),
.ops-mini-table td:nth-child(1) {
  width: 24%;
}

.ops-mini-table th:nth-child(2),
.ops-mini-table td:nth-child(2) {
  width: 72px;
}

.ops-mini-table th:nth-child(3),
.ops-mini-table td:nth-child(3) {
  width: 22%;
}

.ops-mini-table th:nth-child(5),
.ops-mini-table td:nth-child(5) {
  width: 112px;
}

.risk-mini-table th:nth-child(1),
.risk-mini-table td:nth-child(1) {
  width: 24%;
}

.risk-mini-table th:nth-child(2),
.risk-mini-table td:nth-child(2) {
  width: 54px;
}

.risk-mini-table th:nth-child(3),
.risk-mini-table td:nth-child(3),
.risk-mini-table th:nth-child(4),
.risk-mini-table td:nth-child(4) {
  width: 32%;
}

.empty-ops-cell {
  height: 96px !important;
  color: var(--color-text-3) !important;
  text-align: center;
  background: #fff !important;
}

.table-rate {
  height: 18px;
  border-radius: 999px;
  background: #fff4e8;
  position: relative;
  overflow: hidden;
}

.table-rate span {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(var(--w), 2%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb65f, #ff7d00);
}

.table-rate.danger {
  background: #ffecec;
}

.table-rate.danger span {
  background: linear-gradient(90deg, #ff8f8f, #f53f3f);
}

.table-rate em {
  position: relative;
  z-index: 1;
  padding-left: 8px;
  color: #4e5969;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 18px;
}

.ops-chart-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 160px;
  border: 1px solid #edf1f0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 28% 22%, rgba(20, 201, 201, .18), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6fffb 100%);
  padding: 10px 12px;
}

.ops-donut {
  min-height: 166px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.ops-visual-head {
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.ops-visual-head span {
  color: var(--color-text-3);
  font-size: 12px;
  font-weight: 800;
}

.ops-visual-head strong {
  color: #0b8f68;
  font-size: 36px;
  line-height: .92;
  letter-spacing: 0;
}

.ops-status-bars {
  display: grid;
  gap: 9px;
}

.ops-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px 10px;
  align-items: center;
}

.ops-bar-row div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ops-bar-row span,
.ops-bar-row em,
.ops-bar-row strong {
  font-size: 12px;
  line-height: 1;
}

.ops-bar-row span {
  color: var(--color-text-2);
  font-weight: 800;
}

.ops-bar-row em {
  color: var(--color-text-3);
  font-style: normal;
}

.ops-bar-row strong {
  color: var(--color-text-1);
  text-align: right;
}

.ops-bar-row i {
  grid-column: 1 / -1;
  height: 9px;
  border-radius: 999px;
  background: rgba(229, 230, 235, .9);
  display: block;
  overflow: hidden;
}

.ops-bar-row b {
  width: max(var(--w), 2%);
  height: 100%;
  border-radius: inherit;
  display: block;
  background: #14c9c9;
}

.ops-bar-row.running b {
  background: #00b42a;
}

.ops-bar-row.risk b {
  background: #ff7d00;
}

.ops-stack {
  height: 16px;
  border-radius: 999px;
  background: #edf1f0;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(29, 33, 41, .04);
}

.ops-stack span {
  width: max(var(--w), 2%);
  min-width: 8px;
}

.ops-stack .online {
  background: #14c9c9;
}

.ops-stack .running {
  background: #00b42a;
}

.ops-stack .risk {
  background: #ff7d00;
}

.ops-chart-layout .radar-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}

.ops-chart-layout .radar-item {
  min-height: 34px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px 11px;
  border-radius: 9px;
  box-shadow: 0 6px 14px rgba(29, 33, 41, .035);
}

.ops-chart-layout .radar-item strong {
  font-size: 17px;
}

.wide-card strong {
  font-size: 20px;
}

.action-card {
  cursor: pointer;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.action-card:hover {
  border-color: rgba(22, 93, 255, .36);
  box-shadow: 0 14px 34px rgba(22, 93, 255, .12);
  transform: translateY(-1px);
}

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

.quick-controls {
  display: grid;
  grid-template-columns: 120px 120px 92px minmax(140px, 190px) 130px 100px 100px minmax(220px, 280px) minmax(260px, 1fr);
  gap: 8px;
  align-items: end;
}

.wide-field select {
  min-width: 260px;
}

.compact-preview {
  margin-top: 0;
  max-height: 40px;
  overflow: hidden;
}

.wide-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: start;
}

.account-panel {
  min-width: 0;
}

.side-rail {
  display: grid;
  gap: 12px;
}

.side-panel,
.center-panel {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
}

.side-panel {
  padding: 12px;
  display: grid;
  gap: 12px;
}

.center-panel {
  overflow: hidden;
}

.full-account-panel {
  min-height: 760px;
}

.side-title {
  color: var(--color-text-1);
  font-size: 13px;
  font-weight: 700;
}

.mini-stats {
  display: grid;
  gap: 8px;
}

.mini-stats div {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mini-stats span,
.side-field span {
  color: var(--color-text-3);
  font-size: 12px;
}

.mini-stats strong {
  font-size: 15px;
}

.side-field {
  display: grid;
  gap: 6px;
}

.side-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 1.7;
}

.side-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-1);
  font-size: 13px;
}

.side-card p {
  margin: 0;
}

.side-note {
  margin-top: 10px;
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.message-shell {
  min-height: 100vh;
}

.message-toolbar {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.message-filter {
  width: auto;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-2);
  background: #fff;
  font-size: 13px;
}

.message-filter.active {
  color: #fff;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.message-workbench {
  display: grid;
  grid-template-columns: 300px minmax(520px, 1fr) 280px;
  gap: 10px;
  align-items: stretch;
}

.conversation-list,
.chat-panel,
.message-side-panel {
  min-height: 720px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(29, 33, 41, .06);
}

.conversation-list {
  padding: 8px;
  overflow: auto;
}

.conversation-item {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 9px;
  color: var(--color-text-1);
  background: transparent;
  padding: 8px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
}

.conversation-item:hover,
.conversation-item.active {
  background: #f4faf8;
}

.conversation-item.failed {
  background: #fff7f7;
}

.conversation-item span:not(.message-avatar) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.conversation-item strong,
.conversation-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item em {
  color: var(--color-text-3);
  font-size: 12px;
  font-style: normal;
}

.conversation-item small {
  color: var(--color-text-3);
  display: grid;
  justify-items: end;
  gap: 4px;
}

.conversation-item small b {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  background: #f53f3f;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.chat-head {
  min-height: 64px;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-head div {
  display: grid;
  gap: 4px;
}

.chat-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.chat-head span {
  color: var(--color-text-3);
  font-size: 12px;
}

.chat-messages {
  padding: 16px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  background: linear-gradient(180deg, #fbfffd, #f7faf9);
}

.chat-empty {
  color: var(--color-text-3);
  min-height: 120px;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.chat-bubble {
  max-width: 72%;
  border: 1px solid #edf1f0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.chat-bubble.outgoing {
  justify-self: end;
  border-color: #cbe4ff;
  background: #eef7ff;
}

.chat-bubble div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-3);
  font-size: 12px;
}

.chat-bubble p {
  margin: 0;
  color: var(--color-text-1);
  line-height: 1.7;
  white-space: pre-wrap;
}

.chat-bubble em {
  color: #cb272d;
  font-size: 12px;
  font-style: normal;
}

.chat-bubble mark {
  color: #a1151b;
  background: #ffe0e0;
  border-radius: 4px;
  padding: 0 3px;
}

.reply-box {
  border-top: 1px solid var(--color-border);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
}

.reply-box textarea {
  min-height: 70px;
  resize: none;
}

.reply-box button {
  height: 70px;
}

.message-side-panel {
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.message-side-panel section {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  display: grid;
  gap: 10px;
}

.message-side-panel section:last-child {
  border-bottom: 0;
}

.message-side-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  font-size: 13px;
}

.message-side-panel dt {
  color: var(--color-text-3);
}

.message-side-panel dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blocked-hint {
  border-radius: 8px;
  background: #f7f8fa;
  padding: 10px;
  color: var(--color-text-3);
  font-size: 13px;
}

.blocked-hint.danger {
  color: #cb272d;
  background: #fff2f2;
}

.mini-blocked-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

.mini-blocked-form input,
.mini-blocked-form select {
  height: 34px;
  font-size: 12px;
}

.mini-blocked-form button {
  grid-column: 1 / -1;
  height: 34px;
}

.client-blocked-list {
  max-height: 170px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.client-blocked-item {
  min-height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.client-blocked-item.global {
  background: #f7faf9;
}

.client-blocked-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.client-blocked-item em {
  color: var(--color-text-3);
  font-size: 12px;
  font-style: normal;
}

.client-blocked-item button {
  width: auto;
  height: 24px;
  padding: 0 8px;
  color: #cb272d;
  background: #fff2f2;
  font-size: 12px;
}

.admin-message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, .8fr);
  gap: 12px;
  align-items: start;
}

.admin-conversation-table {
  overflow: auto;
}

.admin-message-table {
  min-width: 980px;
}

.blocked-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 10px;
  margin-bottom: 12px;
}

.blocked-form input[name="note"],
.blocked-form button {
  grid-column: 1 / -1;
}

.blocked-list {
  display: grid;
  gap: 8px;
}

.blocked-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.blocked-item span {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #b54b00;
  background: #fff7e8;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.blocked-item em {
  grid-column: 1 / -1;
  color: var(--color-text-3);
  font-size: 12px;
  font-style: normal;
}

.blocked-item button {
  width: auto;
  height: 28px;
  padding: 0 10px;
  color: #cb272d;
  background: #fff2f2;
  font-size: 12px;
}

@media (max-width: 720px) {
  .grid-panel {
    grid-template-columns: 1fr;
  }

  .section-title {
    display: grid;
  }

  .text-item {
    grid-template-columns: 1fr;
  }

  .compact-form {
    grid-template-columns: 1fr;
  }

  .toolbar-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-layout {
    grid-template-columns: 1fr;
  }

  .top-control-panel,
  .wide-workspace {
    grid-template-columns: 1fr;
  }

  .dashboard-cards {
    grid-template-columns: 1fr;
  }

  .ops-strip,
  .config-usage-list {
    grid-template-columns: 1fr;
  }

  .ops-table-strip {
    grid-template-columns: 1fr;
  }

  .ops-chart-layout {
    grid-template-columns: 1fr;
  }

  .message-workbench,
  .admin-message-layout {
    grid-template-columns: 1fr;
  }

  .quick-controls {
    grid-template-columns: 1fr;
  }

  .batch-bar {
    grid-template-columns: 1fr;
  }
}

/* Art Design Pro inspired client refresh */
:root {
  --color-primary: #3b6cff;
  --color-primary-hover: #2857e8;
  --color-bg: #f5f7fb;
  --color-card: #fff;
  --color-text-1: #111827;
  --color-text-2: #4b5563;
  --color-text-3: #8a95a6;
  --color-border: #e6eaf2;
  --shadow-card: 0 10px 28px rgba(16, 24, 40, .06);
  --shadow-hover: 0 16px 38px rgba(16, 24, 40, .10);
  --radius: 8px;
  --rail-bg: #101828;
  --rail-active: #3b6cff;
}

.app-body {
  color: var(--color-text-1);
  background:
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
}

.app-body::before {
  display: none;
}

.dense-shell {
  width: min(2380px, calc(100vw - 12px));
  padding: 18px 16px 28px 116px;
}

.client-rail {
  left: 18px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 98px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(16, 24, 40, .08);
  padding: 10px;
  align-content: center;
  gap: 8px;
}

.client-rail::before {
  display: none;
}

.client-rail a {
  min-height: 42px;
  border-radius: 8px;
  color: var(--color-text-2);
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0 8px;
  text-align: center;
  line-height: 1.25;
  font-size: 13px;
  font-weight: 800;
}

.client-rail a:hover,
.client-rail a.active {
  color: #fff;
  background: var(--color-primary);
  box-shadow: none;
}

.app-header {
  min-height: 64px;
  border: 1px solid rgba(230, 234, 242, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.app-header strong {
  font-size: 20px;
  letter-spacing: 0;
}

.app-header span {
  color: var(--color-text-3);
}

.ghost-button,
.export-button,
.import-button,
.danger-tool-button,
.mini-button,
.message-filter,
.danger-button {
  border-radius: 8px;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s;
}

.ghost-button {
  height: 34px;
  border-color: #d9e1ef;
  color: #344054;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ghost-button:hover {
  color: var(--color-primary);
  border-color: rgba(59, 108, 255, .38);
  box-shadow: 0 8px 18px rgba(59, 108, 255, .10);
}

button,
.export-button,
.import-button {
  border-radius: 8px;
  font-weight: 800;
}

input,
select,
textarea {
  border-color: #d9e1ef;
  border-radius: 8px;
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(59, 108, 255, .72);
  box-shadow: 0 0 0 3px rgba(59, 108, 255, .11);
}

.dashboard-cards {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.dash-card {
  min-height: 118px;
  border: 1px solid rgba(230, 234, 242, .9);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 249, 255, .96));
  box-shadow:
    0 10px 28px rgba(16, 24, 40, .06),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  align-content: center;
  justify-items: center;
  gap: 11px;
  text-align: center;
}

.dash-card::after {
  display: none;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(59, 108, 255, .10), transparent) 50% 100% / 72% 1px no-repeat,
    radial-gradient(circle at 50% 100%, rgba(59, 108, 255, .16), transparent 42%);
}

.dash-card span {
  color: #6b778d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
}

.dash-card strong {
  color: #1f57ff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 22px rgba(59, 108, 255, .20);
}

.dash-card:nth-child(4) strong,
.dash-card:nth-child(5) strong,
.dash-card:nth-child(6) strong {
  color: #0ea5a4;
  text-shadow: 0 8px 22px rgba(20, 201, 201, .20);
}

.message-home-card,
.ops-card,
.work-section,
.center-panel,
.side-panel,
.top-control-panel,
.conversation-list,
.chat-panel,
.message-side-panel,
.help-card {
  border: 1px solid rgba(230, 234, 242, .9);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.message-home-card {
  padding: 16px;
  margin-bottom: 14px;
}

.message-trend-row {
  display: grid;
  grid-template-columns: minmax(520px, .95fr) minmax(480px, 1.05fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

.message-trend-row .message-home-card,
.message-trend-row .whisper-trend-card {
  margin-bottom: 0;
}

.message-home-head strong,
.ops-card-head strong,
.section-title h2,
.account-title-bar h2,
.message-side-panel strong {
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.message-home-head span,
.message-home-head a,
.ops-card-head span,
.section-title span,
.account-title-bar span {
  color: #8a95a6;
}

.message-home-stats {
  gap: 10px;
}

.message-home-stats div {
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #f8fafc;
  padding: 11px 13px;
}

.home-message-item,
.conversation-item {
  border: 1px solid transparent;
}

.home-message-item:hover,
.conversation-item:hover,
.conversation-item.active {
  border-color: rgba(59, 108, 255, .16);
  background: #f4f7ff;
}

.message-avatar {
  color: #2f5bea;
  background: #eef3ff;
}

.ops-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ops-card {
  min-height: 190px;
  padding: 16px;
}

.ops-live-dot {
  color: #1f8f5f !important;
  background: #ecfdf3;
}

.config-usage-item,
.text-item,
.side-card,
.message-home-stats div {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.config-usage-item {
  border-radius: 12px;
  border-color: #edf1f7;
}

.config-usage-item.used {
  border-color: rgba(59, 108, 255, .20);
  background: #f5f8ff;
}

.config-usage-item.idle {
  background: #fbfcff;
}

.whisper-trend-card {
  min-width: 0;
  min-height: 238px;
}

.whisper-line-chart {
  min-height: 164px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fbfdff, #f8fafc);
  padding: 8px 10px 4px;
  overflow: hidden;
}

.whisper-line-chart svg {
  width: 100%;
  height: 176px;
  display: block;
}

.trend-axis {
  stroke: #d9e1ef;
  stroke-width: 1;
}

.trend-area {
  fill: url(#whisperAreaGradient);
  stroke: none;
}

.trend-line {
  fill: none;
  stroke: #3b6cff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-point circle {
  fill: #fff;
  stroke: #3b6cff;
  stroke-width: 2;
}

.whisper-line-chart text {
  fill: #8a95a6;
  font-size: 12px;
  font-weight: 700;
}

.top-control-panel {
  margin-bottom: 14px;
  padding: 14px;
}

.quick-controls {
  gap: 12px;
}

.side-field span {
  color: #667085;
  font-weight: 800;
}

.account-title-bar {
  border: 0;
  border-bottom: 1px solid #e6eaf2;
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(180deg, #fff, #fbfcff);
  padding: 14px 16px;
}

.account-title-bar h2 {
  margin: 0;
}

.full-account-panel {
  min-height: 820px;
}

.table-wrap {
  background: #fff;
}

.data-table {
  background: #fff;
  font-size: 13px;
}

.data-table th,
.data-table td {
  height: 48px;
  border-right: 0;
  border-bottom: 1px solid #eef2f7;
  padding: 0 11px;
}

.data-table th {
  height: 46px;
  color: #475467;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.data-table tbody tr:nth-child(even) {
  background: #fcfdff;
}

.data-table tbody tr:hover {
  background: #f4f7ff;
}

.status-pill,
.mute-pill {
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
}

.status-pill.ok,
.mute-pill {
  color: #067647;
  background: #ecfdf3;
}

.status-pill.off {
  color: #667085;
  background: #f2f4f7;
}

.status-pill.warning {
  color: #b54708;
  background: #fffaeb;
}

.status-pill.danger,
.mute-pill.muted {
  color: #b42318;
  background: #fef3f2;
}

.export-group {
  border-radius: 10px;
  background: #f8fafc;
}

.export-select {
  border-color: #d9e1ef;
  background: transparent;
}

.export-button,
.import-button {
  background: #3b6cff;
}

.danger-tool-button,
.danger-confirm-button,
.danger-mini {
  color: #fff;
  background: #f04438;
}

.danger-tool-button:hover,
.danger-confirm-button:hover,
.danger-mini:hover {
  background: #d92d20;
}

.pagination-bar {
  border-top: 1px solid #e6eaf2;
  background: #fff;
  padding: 14px 16px;
}

.pagination-bar button,
.pagination-bar select {
  border-radius: 8px;
}

.config-workbench {
  grid-template-columns: minmax(560px, .95fr) minmax(620px, 1.05fr);
  gap: 14px;
}

.help-card {
  padding: 18px;
  background:
    linear-gradient(135deg, #fff, #f7f9ff);
}

.rule-chips span {
  color: #2f5bea;
  background: #eef3ff;
}

.work-section {
  padding: 18px;
  margin-top: 14px;
}

.compact-config-section {
  min-height: 760px;
  margin-top: 0;
}

.config-form {
  gap: 14px;
}

.text-item {
  border-color: #e6eaf2;
  border-radius: 12px;
  padding: 14px 16px;
}

.text-item:hover {
  border-color: rgba(59, 108, 255, .24);
  box-shadow: var(--shadow-hover);
}

.text-item span {
  color: #2f5bea;
  background: #eef3ff;
}

.message-toolbar {
  border: 1px solid rgba(230, 234, 242, .9);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 10px;
  margin-bottom: 14px;
}

.message-filter {
  height: 34px;
  border-radius: 8px;
  border-color: transparent;
  color: #667085;
  background: transparent;
  font-weight: 800;
}

.message-filter:hover {
  color: #2f5bea;
  background: #f4f7ff;
}

.message-filter.active {
  color: #fff;
  border-color: #3b6cff;
  background: #3b6cff;
}

.message-workbench {
  grid-template-columns: 340px minmax(620px, 1fr) 310px;
  gap: 14px;
}

.conversation-list,
.chat-panel,
.message-side-panel {
  min-height: 760px;
}

.conversation-list {
  padding: 10px;
}

.conversation-item {
  min-height: 70px;
  border-radius: 12px;
  padding: 10px;
}

.chat-head {
  min-height: 70px;
  border-bottom-color: #e6eaf2;
  background: linear-gradient(180deg, #fff, #fbfcff);
  padding: 14px 16px;
}

.chat-head strong {
  font-size: 16px;
  font-weight: 900;
}

.chat-messages {
  background:
    linear-gradient(180deg, #f8fafc, #f4f7fb);
  padding: 18px;
}

.chat-bubble {
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.chat-bubble.outgoing {
  border-color: rgba(59, 108, 255, .24);
  background: #eef3ff;
}

.reply-box {
  border-top-color: #e6eaf2;
  background: #fff;
  padding: 14px;
}

.reply-box textarea {
  min-height: 76px;
}

.reply-box button {
  height: 76px;
}

.message-side-panel {
  padding: 16px;
}

.message-side-panel section {
  border-bottom-color: #e6eaf2;
}

.client-blocked-item,
.blocked-item {
  border-color: #e6eaf2;
  border-radius: 10px;
  background: #fbfcff;
}

.modal-mask {
  background: rgba(16, 24, 40, .46);
  backdrop-filter: blur(5px);
}

.modal-card {
  border: 1px solid #e6eaf2;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(16, 24, 40, .20);
}

@media (max-width: 1100px) {
  .dense-shell {
    padding-left: 104px;
  }

  .dashboard-cards,
  .message-trend-row,
  .ops-strip,
  .config-workbench,
  .message-workbench {
    grid-template-columns: 1fr;
  }

  .conversation-list,
  .chat-panel,
  .message-side-panel {
    min-height: auto;
  }
}

.ops-table-strip .config-usage-list {
  max-height: 132px;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ops-table-strip .config-usage-item {
  min-height: 92px;
  border-color: #e6eaf2;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  padding: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px 9px;
}

.config-usage-item .config-rank {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #2f5bea;
  background: #eef3ff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  grid-row: 1 / 3;
}

.config-usage-item strong {
  grid-column: 2;
}

.config-usage-item em {
  grid-column: 2;
}

.config-usage-item small {
  grid-column: 1 / 3;
}

.config-usage-item .usage-state,
.config-usage-item .auto-reply-state {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.config-usage-item .usage-state {
  grid-column: 1;
  color: #667085;
  background: #f2f4f7;
}

.config-usage-item.used .usage-state {
  color: #067647;
  background: #ecfdf3;
}

.config-usage-item .auto-reply-state {
  grid-column: 2;
  justify-self: start;
}

.config-usage-item .auto-reply-state.on {
  color: #0e7490;
  background: #ecfeff;
}

.config-usage-item .auto-reply-state.off {
  color: #667085;
  background: #f2f4f7;
}

.config-usage-item b {
  grid-column: 3;
  grid-row: 1 / 4;
  min-width: 74px;
  border-left: 1px solid #eef2f7;
  color: #1f57ff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  font-size: 26px;
  line-height: 1;
}

.config-usage-item b i {
  color: #8a95a6;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ops-command-panel {
  min-height: 136px;
  border: 1px solid rgba(59, 108, 255, .18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(14, 23, 42, .98), rgba(20, 34, 64, .96)),
    radial-gradient(circle at 18% 20%, rgba(59, 108, 255, .35), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(16, 24, 40, .12);
  padding: 14px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  position: relative;
}

.ops-command-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent);
}

.ops-score,
.ops-metric-grid {
  position: relative;
  z-index: 1;
}

.ops-score {
  border: 1px solid rgba(77, 126, 255, .28);
  border-radius: 13px;
  background: rgba(255, 255, 255, .055);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
}

.ops-score span,
.ops-score em {
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.ops-score strong {
  color: #8fd7ff;
  font-size: 48px;
  line-height: .95;
  text-shadow: 0 0 24px rgba(59, 108, 255, .65);
}

.ops-metric-grid {
  display: grid;
  gap: 9px;
  align-content: center;
}

.ops-metric {
  display: grid;
  gap: 7px;
}

.ops-metric div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.ops-metric span {
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 900;
}

.ops-metric strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.ops-metric strong em {
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
  font-style: normal;
}

.ops-metric i {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  display: block;
  overflow: hidden;
}

.ops-metric b {
  width: max(var(--w), 2%);
  height: 100%;
  border-radius: inherit;
  background: #3b82ff;
  display: block;
  box-shadow: 0 0 14px rgba(59, 130, 255, .7);
}

.ops-metric.running b {
  background: #20d489;
  box-shadow: 0 0 14px rgba(32, 212, 137, .65);
}

.ops-metric.risk b {
  background: #ffb020;
  box-shadow: 0 0 14px rgba(255, 176, 32, .65);
}

.ops-signal-strip {
  height: 28px;
  border-radius: 999px;
  background: #eef2f7;
  display: flex;
  overflow: hidden;
  margin-top: 10px;
}

.ops-signal-strip span {
  width: max(var(--w), 4%);
  min-width: 40px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.ops-signal-strip .online {
  background: linear-gradient(90deg, #3b6cff, #5b8cff);
}

.ops-signal-strip .running {
  background: linear-gradient(90deg, #12b76a, #20d489);
}

.ops-signal-strip .risk {
  background: linear-gradient(90deg, #f79009, #ffb020);
}

.config-cell-pill {
  min-height: 24px;
  max-width: 150px;
  padding: 0 9px;
  border-radius: 999px;
  color: #2f5bea;
  background: #eef3ff;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.chat-bubble.auto-reply {
  border-color: rgba(20, 201, 201, .28);
  background: #eefdfb;
}

.chat-bubble .send-state {
  width: max-content;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #2f5bea;
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.chat-bubble .send-state.pending {
  color: #b54708;
  background: #fffaeb;
}

.chat-bubble .send-state.failed {
  color: #b42318;
  background: #fef3f2;
}

.chat-bubble .send-state.sent,
.chat-bubble .send-state.auto_sent {
  color: #067647;
  background: #ecfdf3;
}

.radar-ops-card {
  color: #eaf3ff;
  border: 1px solid rgba(65, 120, 255, .22);
  background:
    radial-gradient(circle at 18% 12%, rgba(25, 183, 255, .26), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(52, 211, 153, .18), transparent 30%),
    linear-gradient(138deg, #07111f 0%, #0d1a2f 56%, #111827 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 20px 42px rgba(15, 23, 42, .18);
}

.radar-ops-card .ops-card-head {
  margin-bottom: 14px;
}

.radar-ops-card .ops-card-head strong {
  color: #f8fbff;
}

.radar-ops-card .ops-card-head span {
  color: rgba(218, 232, 255, .66);
}

.radar-ops-card .ops-chart-layout {
  min-height: 252px;
  border: 1px solid rgba(142, 197, 255, .18);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .025));
  background-size: 24px 24px, 24px 24px, auto;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(132px, .84fr);
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.radar-ops-card .ops-chart-layout::before,
.radar-ops-card .ops-chart-layout::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
}

.radar-ops-card .ops-chart-layout::before {
  inset: -42% auto auto -16%;
  background: radial-gradient(circle, rgba(56, 189, 248, .26), transparent 64%);
}

.radar-ops-card .ops-chart-layout::after {
  inset: auto -18% -44% auto;
  background: radial-gradient(circle, rgba(34, 197, 94, .18), transparent 66%);
}

.radar-ops-card .ops-donut,
.radar-ops-card .radar-grid {
  position: relative;
  z-index: 1;
}

.radar-ops-card .ops-donut {
  min-height: 220px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
}

.ops-core-hud {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.ops-hud-ring {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0b1424 0 50%, transparent 51%),
    conic-gradient(from -90deg, #3dd7ff calc(var(--score) * 1%), rgba(255, 255, 255, .13) 0);
  box-shadow:
    0 0 30px rgba(61, 215, 255, .24),
    inset 0 0 22px rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  position: relative;
}

.ops-hud-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(160, 210, 255, .18);
}

.ops-hud-core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.ops-hud-core span,
.ops-hud-core em {
  color: rgba(225, 239, 255, .66);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ops-hud-core strong {
  color: #f8fbff;
  font-size: 42px;
  line-height: .95;
  text-shadow: 0 0 24px rgba(56, 189, 248, .75);
}

.ops-hud-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ops-hud-stat {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(8, 17, 31, .58);
  padding: 10px;
  display: grid;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.ops-hud-stat div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.ops-hud-stat span {
  color: rgba(226, 239, 255, .70);
  font-size: 12px;
  font-weight: 900;
}

.ops-hud-stat strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.ops-hud-stat strong em {
  color: rgba(226, 239, 255, .42);
  font-size: 11px;
  font-style: normal;
}

.ops-hud-stat i {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  display: block;
  overflow: hidden;
}

.ops-hud-stat b {
  width: max(var(--w), 2%);
  height: 100%;
  border-radius: inherit;
  display: block;
  background: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, .68);
}

.ops-hud-stat.running b {
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, .66);
}

.ops-hud-stat.idle b {
  background: #94a3b8;
  box-shadow: 0 0 14px rgba(148, 163, 184, .45);
}

.ops-hud-stat.risk b {
  background: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, .68);
}

.radar-ops-card .ops-signal-strip {
  height: 30px;
  border: 1px solid rgba(226, 239, 255, .12);
  border-radius: 12px;
  background: rgba(8, 17, 31, .55);
  display: flex;
  overflow: hidden;
  margin-top: 0;
}

.radar-ops-card .ops-signal-strip span {
  width: max(var(--w), 6%);
  min-width: 54px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.radar-ops-card .ops-signal-strip .online {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.radar-ops-card .ops-signal-strip .running {
  background: linear-gradient(90deg, #16a34a, #34d399);
}

.radar-ops-card .ops-signal-strip .risk {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

.ops-alert-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-alert-line span {
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(232, 241, 255, .78);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 9px;
}

.radar-ops-card .radar-grid {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.ops-console-row {
  border: 1px solid rgba(226, 239, 255, .13);
  border-radius: 12px;
  background: rgba(8, 17, 31, .54);
  min-height: 38px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "meta value";
  column-gap: 10px;
  align-items: center;
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, .68);
}

.ops-console-row span {
  grid-area: label;
  color: rgba(232, 241, 255, .70);
  font-size: 12px;
  font-weight: 900;
}

.ops-console-row strong {
  grid-area: value;
  color: #f8fbff;
  font-size: 20px;
  line-height: 1;
}

.ops-console-row em {
  grid-area: meta;
  color: rgba(232, 241, 255, .46);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ops-console-row.warning {
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, .86);
}

.ops-console-row.danger {
  box-shadow: inset 3px 0 0 rgba(248, 113, 113, .90);
}

.ops-console-row.off {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, .82);
}

.dashboard-cards {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.dash-card {
  min-height: 116px;
  border: 1px solid rgba(88, 166, 255, .20);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
    radial-gradient(circle at 50% 110%, rgba(56, 189, 248, .22), transparent 46%),
    linear-gradient(145deg, #07111f 0%, #0d1a2f 64%, #111827 100%);
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 34px rgba(15, 23, 42, .16);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(56, 189, 248, .48), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(56, 189, 248, .24), transparent 42%);
}

.dash-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, .85);
}

.dash-card span {
  position: relative;
  z-index: 1;
  color: rgba(226, 239, 255, .72);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.dash-card strong {
  position: relative;
  z-index: 1;
  color: #f8fbff;
  font-size: 44px;
  font-weight: 900;
  line-height: .95;
  text-shadow: 0 0 24px rgba(56, 189, 248, .55);
}

.dash-card:nth-child(2)::after,
.dash-card:nth-child(3)::after {
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, .78);
}

.dash-card:nth-child(2)::before,
.dash-card:nth-child(3)::before {
  background:
    linear-gradient(90deg, transparent, rgba(34, 197, 94, .42), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(34, 197, 94, .19), transparent 42%);
}

.dash-card:nth-child(4)::after,
.dash-card:nth-child(5)::after,
.dash-card:nth-child(6)::after {
  background: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, .82);
}

.dash-card:nth-child(4)::before,
.dash-card:nth-child(5)::before,
.dash-card:nth-child(6)::before {
  background:
    linear-gradient(90deg, transparent, rgba(245, 158, 11, .44), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(245, 158, 11, .20), transparent 42%);
}

.dash-card:nth-child(4) strong,
.dash-card:nth-child(5) strong,
.dash-card:nth-child(6) strong {
  color: #fff7ed;
  text-shadow: 0 0 24px rgba(245, 158, 11, .50);
}

.message-home-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.message-home-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.message-home-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.message-home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.message-home-stats div {
  min-width: 0;
  min-height: 86px;
  border: 1px solid rgba(88, 166, 255, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 112%, rgba(56, 189, 248, .16), transparent 48%),
    linear-gradient(180deg, #f8fbff, #f3f7fd);
  padding: 13px 14px;
  display: grid;
  align-content: center;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 24px rgba(15, 23, 42, .05);
}

.message-home-stats span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.message-home-stats strong {
  color: #111827;
  font-size: 30px;
  line-height: .95;
  font-weight: 900;
}

.message-home-stats div:nth-child(3) {
  background:
    radial-gradient(circle at 50% 112%, rgba(245, 158, 11, .16), transparent 48%),
    linear-gradient(180deg, #fffdf8, #fff8ed);
}

.message-home-right {
  min-width: 0;
  border-left: 1px solid #edf1f7;
  padding-left: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.message-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-list-head strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.message-list-head span {
  color: #8a95a6;
  font-size: 12px;
  font-weight: 800;
}

.message-home-card .home-message-list {
  min-height: 250px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.message-home-card .home-message-item {
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
}

.message-home-card .home-message-item:hover {
  border-color: rgba(59, 108, 255, .16);
  background: #f4f7ff;
}

.message-home-card .message-center-link {
  margin-top: auto;
  padding-top: 14px;
}

.dashboard-cards {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.dash-card {
  min-height: 116px;
  border: 1px solid rgba(218, 226, 239, .95);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(59, 108, 255, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(59, 108, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 112%, rgba(59, 108, 255, .14), transparent 44%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 14px 30px rgba(15, 23, 42, .07);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(59, 108, 255, .35), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(59, 108, 255, .18), transparent 42%);
}

.dash-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b6cff;
  box-shadow: 0 0 12px rgba(59, 108, 255, .58);
}

.dash-card span {
  position: relative;
  z-index: 1;
  color: #667085;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.dash-card strong {
  position: relative;
  z-index: 1;
  color: #1f57ff;
  font-size: 44px;
  font-weight: 900;
  line-height: .95;
  text-shadow: 0 8px 22px rgba(59, 108, 255, .18);
}

.dash-card:nth-child(2),
.dash-card:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 184, 166, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 112%, rgba(20, 184, 166, .14), transparent 44%),
    linear-gradient(180deg, #ffffff, #f4fffd);
}

.dash-card:nth-child(2)::after,
.dash-card:nth-child(3)::after {
  background: #14b8a6;
  box-shadow: 0 0 12px rgba(20, 184, 166, .56);
}

.dash-card:nth-child(2)::before,
.dash-card:nth-child(3)::before {
  background:
    linear-gradient(90deg, transparent, rgba(20, 184, 166, .34), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(20, 184, 166, .16), transparent 42%);
}

.dash-card:nth-child(2) strong,
.dash-card:nth-child(3) strong {
  color: #0f9f8f;
  text-shadow: 0 8px 22px rgba(20, 184, 166, .18);
}

.dash-card:nth-child(4),
.dash-card:nth-child(5),
.dash-card:nth-child(6) {
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(245, 158, 11, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 112%, rgba(245, 158, 11, .15), transparent 44%),
    linear-gradient(180deg, #ffffff, #fffaf1);
}

.dash-card:nth-child(4)::after,
.dash-card:nth-child(5)::after,
.dash-card:nth-child(6)::after {
  background: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, .56);
}

.dash-card:nth-child(4)::before,
.dash-card:nth-child(5)::before,
.dash-card:nth-child(6)::before {
  background:
    linear-gradient(90deg, transparent, rgba(245, 158, 11, .34), transparent) 50% 100% / 68% 1px no-repeat,
    radial-gradient(circle at 50% 102%, rgba(245, 158, 11, .17), transparent 42%);
}

.dash-card:nth-child(4) strong,
.dash-card:nth-child(5) strong,
.dash-card:nth-child(6) strong {
  color: #d97706;
  text-shadow: 0 8px 22px rgba(245, 158, 11, .18);
}

.radar-ops-card {
  color: #111827;
  border: 1px solid rgba(218, 226, 239, .95);
  background:
    radial-gradient(circle at 16% 8%, rgba(59, 108, 255, .12), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(20, 184, 166, .12), transparent 30%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 14px 30px rgba(15, 23, 42, .07);
}

.radar-ops-card .ops-card-head strong {
  color: #111827;
}

.radar-ops-card .ops-card-head span {
  color: #8a95a6;
}

.radar-ops-card .ops-chart-layout {
  border: 1px solid #edf1f7;
  background:
    linear-gradient(90deg, rgba(59, 108, 255, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(59, 108, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 251, 255, .86));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.radar-ops-card .ops-chart-layout::before {
  background: radial-gradient(circle, rgba(59, 108, 255, .16), transparent 64%);
}

.radar-ops-card .ops-chart-layout::after {
  background: radial-gradient(circle, rgba(20, 184, 166, .14), transparent 66%);
}

.radar-ops-card .ops-hud-ring {
  background:
    radial-gradient(circle at center, #ffffff 0 50%, transparent 51%),
    conic-gradient(from -90deg, #3b6cff calc(var(--score) * 1%), #e8eef8 0);
  box-shadow:
    0 12px 26px rgba(59, 108, 255, .15),
    inset 0 0 0 1px rgba(59, 108, 255, .10);
}

.radar-ops-card .ops-hud-ring::before {
  border-color: rgba(59, 108, 255, .14);
}

.radar-ops-card .ops-hud-core span,
.radar-ops-card .ops-hud-core em {
  color: #667085;
}

.radar-ops-card .ops-hud-core strong {
  color: #1f57ff;
  text-shadow: 0 8px 22px rgba(59, 108, 255, .20);
}

.radar-ops-card .ops-hud-stat {
  border-color: #edf1f7;
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 18px rgba(15, 23, 42, .04);
}

.radar-ops-card .ops-hud-stat span {
  color: #667085;
}

.radar-ops-card .ops-hud-stat strong {
  color: #111827;
}

.radar-ops-card .ops-hud-stat strong em {
  color: #98a2b3;
}

.radar-ops-card .ops-hud-stat i {
  background: #edf2f8;
}

.radar-ops-card .ops-signal-strip {
  border-color: #edf1f7;
  background: #f4f7fb;
}

.radar-ops-card .ops-alert-line span {
  border-color: #e6ebf3;
  background: #ffffff;
  color: #667085;
}

.radar-ops-card .ops-console-row {
  border-color: #edf1f7;
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 3px 0 0 rgba(59, 108, 255, .64),
    0 8px 18px rgba(15, 23, 42, .04);
}

.radar-ops-card .ops-console-row span {
  color: #667085;
}

.radar-ops-card .ops-console-row strong {
  color: #111827;
}

.radar-ops-card .ops-console-row em {
  color: #98a2b3;
}

.radar-ops-card .ops-console-row.warning {
  box-shadow:
    inset 3px 0 0 rgba(245, 158, 11, .80),
    0 8px 18px rgba(15, 23, 42, .04);
}

.radar-ops-card .ops-console-row.danger {
  box-shadow:
    inset 3px 0 0 rgba(248, 113, 113, .86),
    0 8px 18px rgba(15, 23, 42, .04);
}

.radar-ops-card .ops-console-row.off {
  box-shadow:
    inset 3px 0 0 rgba(148, 163, 184, .82),
    0 8px 18px rgba(15, 23, 42, .04);
}

.message-trend-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.message-trend-row .message-home-card,
.message-trend-row .whisper-trend-card {
  height: 430px;
  min-height: 430px;
  max-height: 430px;
}

.message-home-card {
  padding: 18px;
}

.message-home-body {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
}

.message-home-left {
  min-height: 0;
}

.message-home-stats {
  grid-template-columns: 1fr;
  gap: 10px;
}

.message-home-stats div {
  min-height: 74px;
  padding: 12px 13px;
  align-content: center;
}

.message-home-stats strong {
  font-size: 32px;
}

.message-home-right {
  border-left: 1px solid #edf1f7;
  padding-left: 18px;
  min-height: 0;
  overflow: hidden;
}

.message-home-card .home-message-list {
  min-height: 0;
  height: 100%;
  max-height: 340px;
  grid-auto-rows: 52px;
  gap: 8px;
  overflow: auto;
  align-content: start;
  padding-right: 4px;
}

.message-home-card .home-message-item {
  min-height: 0;
  height: 52px;
  border-color: #edf1f7;
  background: #fff;
  padding: 9px 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.message-home-card .message-avatar {
  width: 38px;
  height: 38px;
  color: #2f5bea;
  background: #eef4ff;
}

.message-home-card .message-main strong {
  font-size: 14px;
}

.message-home-card .message-main em {
  font-size: 12px;
}

.message-home-card .message-center-link {
  width: 100%;
  height: 38px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #f8fafc;
  margin-top: 12px;
  padding: 0 10px;
  justify-content: center;
}

.whisper-trend-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
}

.whisper-trend-card .ops-card-head {
  margin-bottom: 12px;
}

.whisper-line-chart {
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(59, 108, 255, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(59, 108, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(59, 108, 255, .12), transparent 36%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  background-size: 24px 24px, 24px 24px, auto, auto;
  padding: 14px 14px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 24px rgba(15, 23, 42, .045);
}

.whisper-line-chart svg {
  width: 100%;
  height: 100%;
  min-height: 252px;
}

.trend-axis {
  stroke: #d8e2f1;
}

.trend-line {
  stroke: #2f5bea;
  stroke-width: 3.4;
  filter: drop-shadow(0 8px 12px rgba(47, 91, 234, .20));
}

.trend-point circle {
  fill: #fff;
  stroke: #2f5bea;
  stroke-width: 2.4;
}

.trend-footnote {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trend-footnote span {
  min-height: 38px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #f8fafc;
  color: #667085;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.check-line {
  min-height: 42px;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background: #f8fafc;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.check-line input {
  width: 16px;
  height: 16px;
  accent-color: #2f5bea;
}

@media (max-width: 980px) {
  .message-home-body {
    grid-template-columns: 1fr;
  }

  .message-home-right {
    border-left: 0;
    border-top: 1px solid #edf1f7;
    padding-left: 0;
    padding-top: 14px;
  }
}


/* Rebalanced server-risk panel: list cards fit the middle ops column better than a 4-column table. */
.risk-ops-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.risk-ops-card .ops-card-head {
  margin-bottom: 10px;
}

.server-risk-list {
  flex: 1;
  min-height: 0;
  max-height: 164px;
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 3px;
}

.server-risk-item {
  min-width: 0;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 251, 255, .92)),
    radial-gradient(circle at 100% 0%, rgba(59, 108, 255, .10), transparent 38%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  padding: 10px 11px;
  display: grid;
  gap: 9px;
}

.server-risk-item.warning {
  border-color: #ffe2b7;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 250, 240, .94)),
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, .16), transparent 40%);
}

.server-risk-item.danger {
  border-color: #ffd1d1;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 247, 247, .94)),
    radial-gradient(circle at 100% 0%, rgba(248, 113, 113, .18), transparent 40%);
}

.server-risk-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.server-risk-name {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.server-risk-name strong,
.server-risk-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-risk-name strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.15;
}

.server-risk-name span {
  color: #7b8798;
  font-size: 12px;
}

.server-risk-score {
  width: 58px;
  height: 48px;
  border-radius: 14px;
  background: #f4f7fb;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
}

.server-risk-score b {
  color: #1f2937;
  font-size: 18px;
  line-height: 1;
}

.server-risk-score em {
  color: #98a2b3;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transform: scale(.92);
}

.server-risk-item.warning .server-risk-score {
  background: #fff4df;
}

.server-risk-item.warning .server-risk-score b {
  color: #d97706;
}

.server-risk-item.danger .server-risk-score {
  background: #fff0f0;
}

.server-risk-item.danger .server-risk-score b {
  color: #dc2626;
}

.server-risk-bars {
  display: grid;
  gap: 6px;
}

.server-risk-bars label {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 7px;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.server-risk-bars i {
  height: 8px;
  border-radius: 999px;
  background: #fff0dd;
  overflow: hidden;
  position: relative;
}

.server-risk-bars b {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(var(--w), 2%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc46b, #f59e0b);
}

.server-risk-bars label.danger i {
  background: #ffe5e5;
}

.server-risk-bars label.danger b {
  background: linear-gradient(90deg, #ff9b9b, #ef4444);
}

.server-risk-bars em {
  color: #475467;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.server-risk-empty {
  min-height: 130px;
  border: 1px dashed #dbe8e4;
  border-radius: 12px;
  color: var(--color-text-3);
  background: rgba(255, 255, 255, .72);
  display: grid;
  place-items: center;
  font-size: 13px;
}


/* Risk panel redesign v3: match ops card height and scroll inside. */
.risk-ops-card {
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 10% 10%, rgba(245, 158, 11, .10), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(239, 68, 68, .08), transparent 30%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.risk-ops-card .ops-card-head {
  margin-bottom: 10px;
}

.risk-ops-card .ops-card-head strong {
  color: #111827;
  font-size: 16px;
}

.risk-ops-card .ops-card-head span {
  color: #7b8798;
}

.server-risk-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: auto;
  padding-right: 4px;
}

.risk-board-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.risk-board-summary span {
  min-width: 0;
  height: 42px;
  border: 1px solid #edf1f7;
  border-radius: 13px;
  background: rgba(255, 255, 255, .78);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 8px;
  padding: 7px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.risk-board-summary em,
.risk-board-summary i {
  font-style: normal;
  font-weight: 800;
}

.risk-board-summary em {
  color: #667085;
  font-size: 12px;
}

.risk-board-summary strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #111827;
  font-size: 24px;
  line-height: 1;
}

.risk-board-summary i {
  color: #98a2b3;
  font-size: 11px;
}

.risk-board-summary .warning {
  border-color: #ffe1b8;
  background: #fff8ec;
}

.risk-board-summary .warning strong {
  color: #d97706;
}

.risk-board-summary .danger {
  border-color: #ffd1d1;
  background: #fff5f5;
}

.risk-board-summary .danger strong {
  color: #dc2626;
}

.risk-zone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.risk-zone-card {
  min-width: 0;
  min-height: 78px;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: auto auto 7px;
  gap: 6px 8px;
}

.risk-zone-card.warning {
  border-color: #ffe1b8;
  background: linear-gradient(135deg, #fff, #fff8ed);
}

.risk-zone-card.danger {
  border-color: #ffd1d1;
  background: linear-gradient(135deg, #fff, #fff5f5);
}

.risk-zone-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.risk-zone-main strong,
.risk-zone-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-zone-main strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.1;
}

.risk-zone-main span {
  color: #7b8798;
  font-size: 11px;
}

.risk-zone-score {
  width: 44px;
  height: 38px;
  border-radius: 12px;
  background: #f3f6fb;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
}

.risk-zone-score b {
  color: #111827;
  font-size: 16px;
  line-height: 1;
}

.risk-zone-score em {
  color: #98a2b3;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.risk-zone-card.warning .risk-zone-score {
  background: #fff0d7;
}

.risk-zone-card.warning .risk-zone-score b {
  color: #d97706;
}

.risk-zone-card.danger .risk-zone-score {
  background: #ffe7e7;
}

.risk-zone-card.danger .risk-zone-score b {
  color: #dc2626;
}

.risk-zone-tags {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.risk-zone-tags span {
  min-width: 0;
  height: 20px;
  border-radius: 999px;
  background: #f4f7fb;
  color: #667085;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 800;
}

.risk-zone-tags i {
  color: #98a2b3;
  font-style: normal;
}

.risk-zone-meter {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background: #edf1f7;
  overflow: hidden;
  position: relative;
}

.risk-zone-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(var(--w), 3%);
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #84cc16);
}

.risk-zone-card.warning .risk-zone-meter i {
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

.risk-zone-card.danger .risk-zone-meter i {
  background: linear-gradient(90deg, #fb7185, #ef4444);
}

.risk-board-more {
  min-height: 26px;
  border-radius: 999px;
  background: #f4f7fb;
  color: #7b8798;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.risk-board-empty {
  min-height: 168px;
  border: 1px dashed #dbe8e4;
  border-radius: 14px;
  color: var(--color-text-3);
  background: rgba(255, 255, 255, .72);
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* Ops row compact height: red-line height with inner scrolling for risk/config only. */
.ops-table-strip {
  align-items: start;
}

.ops-table-strip .ops-card {
  height: 390px;
  max-height: 390px;
  overflow: hidden;
}

.risk-ops-card .server-risk-list {
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.config-ops-card .config-usage-list {
  max-height: 320px;
  overflow: auto;
  align-content: start;
  grid-auto-rows: min-content;
  padding-right: 4px;
}

/* Message center fixed panels: keep conversation list scrollable. */
.message-workbench {
  align-items: stretch;
}

.message-workbench .conversation-list,
.message-workbench .chat-panel,
.message-workbench .message-side-panel {
  height: min(760px, calc(100vh - 156px));
  min-height: 0;
  max-height: min(760px, calc(100vh - 156px));
}

.message-workbench .conversation-list {
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}

/* Account toolbar redesign: clear action hierarchy. */
.account-tools {
  gap: 10px;
  align-items: center;
}

.account-tools .export-group {
  height: 38px;
  border: 1px solid #d8e2f1;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.account-tools .export-select {
  width: 138px;
  height: 38px;
  color: #344054;
  background: #fff;
  font-weight: 800;
  padding: 0 12px;
}

.account-tools .export-button,
.account-tools .import-button,
.account-tools .danger-tool-button {
  height: 38px;
  min-width: 92px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  transform: translateY(0);
}

.account-tools .export-button {
  min-width: 74px;
  border-radius: 0 999px 999px 0;
  border-left: 1px solid #d8e2f1;
  color: #1f57ff;
  background: linear-gradient(180deg, #f7faff, #edf3ff);
  box-shadow: none;
}

.account-tools .export-button:hover {
  color: #173ecf;
  background: #e8efff;
}

.account-tools .import-button {
  color: #ffffff;
  border-color: #12a884;
  background: linear-gradient(135deg, #12b886, #0f9f8f);
  box-shadow: 0 10px 22px rgba(18, 184, 134, .20);
}

.account-tools .import-button:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #0f9f8f, #0b806f);
  box-shadow: 0 12px 26px rgba(15, 159, 143, .24);
  transform: translateY(-1px);
}

.account-tools .danger-tool-button {
  color: #b42318;
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff8f8, #fff0f0);
  box-shadow: 0 8px 18px rgba(180, 35, 24, .08);
}

.account-tools .danger-tool-button:hover {
  color: #ffffff;
  border-color: #e11d48;
  background: linear-gradient(135deg, #f04438, #d92d20);
  box-shadow: 0 12px 26px rgba(217, 45, 32, .22);
  transform: translateY(-1px);
}

/* 2026-07-04 client profile and self password change */
.profile-shell {
  min-height: 100vh;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(300px, .42fr) minmax(420px, .58fr);
  gap: 16px;
  align-items: start;
}
.profile-card {
  border: 1px solid #e6eaf2;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.profile-identity-card {
  min-height: 320px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(22, 93, 255, .16), transparent 32%),
    radial-gradient(circle at 8% 92%, rgba(20, 201, 201, .13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,250,255,.94));
}
.profile-kicker {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}
.profile-identity-card h1 {
  margin: 0 0 24px;
  font-size: 34px;
  letter-spacing: -0.04em;
}
.profile-meta {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}
.profile-meta span,
.profile-note,
.profile-card-head p {
  color: var(--color-text-3);
  font-size: 13px;
}
.profile-meta strong {
  font-size: 18px;
}
.profile-note {
  margin: 22px 0 0;
  line-height: 1.7;
}
.profile-card-head {
  margin-bottom: 18px;
}
.profile-card-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.profile-card-head p {
  margin: 0;
  line-height: 1.6;
}
.password-panel {
  max-width: 560px;
}
.password-form {
  display: grid;
  gap: 12px;
}
.password-form label {
  display: grid;
  gap: 7px;
  color: var(--color-text-2);
  font-size: 13px;
  font-weight: 700;
}
.password-form input {
  min-height: 38px;
}
.password-message {
  min-height: 20px;
  margin: 0;
  color: var(--color-text-3);
  font-size: 13px;
  line-height: 1.55;
}
.password-message.error {
  color: #cb272d;
}
.password-message.success {
  color: #00a870;
}
button:disabled {
  cursor: not-allowed;
  opacity: .62;
}
@media (max-width: 980px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .password-panel {
    max-width: none;
  }
}