/* CMCC Alive WebUI — Lens@3000 light SaaS admin (J8_UI_LENS_SKIN) */
:root {
  --bg: #f5f5f4;
  --bg-page: #fafafa;
  --bg-elev: #ffffff;
  --bg-elev-2: #fafafa;
  --bg-soft: #f4f4f5;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --text: #18181b;
  --text-dim: #79716b;
  --text-soft: #a8a29e;
  --accent: #625fff;
  --accent-2: #8d54ff;
  --accent-soft: rgba(98, 95, 255, 0.10);
  --accent-ring: rgba(98, 95, 255, 0.22);
  --danger: #e40014;
  --warn: #c2410c;
  --idle: #a8a29e;
  --running: #007956;
  --running-soft: #00bb7f;
  --stopped: #57534e;
  --error: #e40014;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(24, 24, 27, 0.06);
  --font: "Geist", "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

/* HARD_GATE#654 A: empty/hidden must fully collapse (no residual chrome) */
.hidden {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--accent);
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #f8f7ff 0%, var(--bg-page) 180px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  flex: 0 0 34px;
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 0 1px rgba(98, 95, 255, 0.18), 0 6px 14px rgba(98, 95, 255, 0.18);
}
img.brand-mark {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.06);
}

.brand-text h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--text);
}

.brand-sub {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.top-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.stat {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
}

.stat-run {
  color: var(--running);
  border-color: rgba(0, 121, 86, 0.28);
  background: rgba(0, 187, 127, 0.08);
}

.stat-err {
  color: var(--error);
  border-color: rgba(228, 0, 20, 0.25);
  background: rgba(228, 0, 20, 0.06);
}

.top-actions {
  display: flex;
  gap: 8px;
}

.main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.topbar-inner {
  width: 100%;
  max-width: none;
}

.composer,
.global-log-panel,
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.composer {
  padding: 16px 16px 14px;
}

.composer-head h2,
.timeline-head h2,
.panel-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.hint,
.field-note {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
  margin-top: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field > span {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
}

.field em {
  color: var(--danger);
  font-style: normal;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select,
.card input[type="text"],
.card input[type="password"],
.card input[type="number"],
.card select {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

/* HARD_GATE#707 #6: numeric fields stay short; leave breathing room */
.field input[type="number"],
.card input[type="number"] {
  width: auto;
  max-width: 7.5rem;
  min-width: 4.5rem;
}

.field input:focus,
.field select:focus,
.card input:focus,
.card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-row select {
  flex: 1;
  min-width: 0;
}

/* HARD_GATE#707 #6: number inputs short + breathing, not full-track stretch */
.field-row input {
  flex: 1;
  min-width: 0;
}
.field-row input[type="number"] {
  flex: 0 0 auto;
  width: 5.5rem;
  max-width: 7rem;
  min-width: 4.5rem;
}

.unit {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-dim);
  /* HARD_GATE#665 B: segmented control, not pill/ellipse */
  border-radius: var(--radius-sm);
  padding: 0 10px;
  min-height: 36px; /* HARD_GATE#715 equal control height */
  height: 36px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.seg-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
}

.seg-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(98, 95, 255, 0.35);
  font-weight: 600;
}

.composer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.composer-msg {
  margin: 0;
  min-height: 1.2em;
  color: var(--text-dim);
  font-size: 13px;
  flex: 1;
}

.composer-msg.error {
  color: var(--danger);
}

.composer-msg.ok {
  color: var(--running);
}

.composer-actions {
  display: flex;
  gap: 8px;
}

.btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 14px;
  min-height: 36px;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-soft);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-sm {
  /* HARD_GATE#715: no short btn-sm in control rows; keep 36px line */
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(98, 95, 255, 0.25);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.04);
  background: #5551f0;
  border-color: #5551f0;
}

.btn-secondary {
  background: var(--accent-soft, rgba(98, 95, 255, 0.10));
  border-color: rgba(98, 95, 255, 0.42);
  color: var(--text, #1f2430);
  font-weight: 600;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(98, 95, 255, 0.16);
  border-color: rgba(98, 95, 255, 0.62);
  color: var(--text, #1f2430);
  filter: none;
}

.btn-ghost {
  background: transparent;
}

.btn-danger {
  background: rgba(228, 0, 20, 0.06);
  border-color: rgba(228, 0, 20, 0.28);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(228, 0, 20, 0.10);
}

.btn-stop {
  background: rgba(87, 83, 78, 0.06);
  border-color: rgba(87, 83, 78, 0.28);
  color: var(--stopped);
}

.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-left: 3px solid var(--idle);
}

.card.status-running {
  border-left-color: var(--running);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 121, 86, 0.08);
}

.card.status-error {
  border-left-color: var(--error);
  box-shadow: var(--shadow), 0 0 0 1px rgba(228, 0, 20, 0.08);
}

.card.status-stopped {
  border-left-color: var(--stopped);
}

.card.status-idle {
  border-left-color: var(--idle);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
  cursor: default;
}

.card-title {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.status-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--idle);
  flex: 0 0 auto;
}

.card.status-running .status-dot {
  background: var(--running-soft);
  box-shadow: 0 0 0 3px rgba(0, 187, 127, 0.16);
}

.card.status-error .status-dot {
  background: var(--error);
  box-shadow: 0 0 0 3px rgba(228, 0, 20, 0.12);
}

.card.status-stopped .status-dot {
  background: var(--stopped);
}

.card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  word-break: break-word;
  color: var(--text);
}

.card-meta {
  margin: 3px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  word-break: break-all;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
  background: var(--bg-soft);
}

.badge-running {
  color: var(--running);
  border-color: rgba(0, 121, 86, 0.28);
  background: rgba(0, 187, 127, 0.08);
}

.badge-error {
  color: var(--error);
  border-color: rgba(228, 0, 20, 0.25);
  background: rgba(228, 0, 20, 0.06);
}

.badge-stopped {
  color: var(--stopped);
  border-color: rgba(87, 83, 78, 0.25);
  background: rgba(87, 83, 78, 0.06);
}

.badge-idle {
  color: var(--text-dim);
}

.card-surface {
  padding: 0 12px 10px;
}

.card-body {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid transparent;
}

.card.open .card-body,
.card-body.is-open {
  display: block;
  border-top-color: var(--border);
  padding-top: 12px;
  margin-top: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.card-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 10px;
  padding: 0 12px 8px;
  color: var(--text-dim);
  font-size: 12px;
}

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

.card-summary strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  margin-top: 2px;
  word-break: break-all;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.card-error {
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(228, 0, 20, 0.05);
  border: 1px solid rgba(228, 0, 20, 0.18);
  color: #b42318;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

/* HARD_GATE#665 D residual: empty/hidden red chrome only (JS uses .hidden / empty text) */
.card-error.hidden,
#config-modal-error.hidden,
.card-error:empty,
#config-modal-error:empty {
  display: none !important;
}

/* A residual: empty / .hidden error capsule must not paint red box */
.card-error.hidden,
#config-modal-error.hidden,
.card-error:empty,
#config-modal-error:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.card-fields .field.span-2 {
  grid-column: 1 / -1;
}

.log-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  overflow: hidden;
}

.log-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  background: #fff;
}

.log-box {
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  font-family: var(--mono);
  font-size: 12px;
  background: #fafafa;
  color: var(--text);
}

/* OPS#456/#489 / HARD_GATE#829 — fixed ~6-line exterior log viewport (=#810 188px) */
.card-log-expanded {
  min-height: 0;
}
.card-log-expanded .log-box {
  /* true 6 lines: align with #810 14.025em / 188px system */
  height: 188px;
  max-height: 188px;
  min-height: 18.15em; /* HARD_GATE#845 */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.card-log-expanded .log-line {
  line-height: 1.35;
  min-height: 0;
}

#global-log {
  max-height: 280px; /* HARD_GATE#845: was 160, truncated */
}

.log-line {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  color: var(--text);
}

.log-line time {
  color: var(--text-soft);
  flex: 0 0 auto;
}

.log-line.error,
.log-line.error span {
  color: #b42318;
}

.log-line.token,
.log-line.token span {
  color: #4f46e5;
}

.log-line.warn,
.log-line.warn span {
  color: #c2410c;
}

.log-empty {
  color: var(--text-dim);
  padding: 8px 2px;
}

.global-log-panel {
  padding: 12px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sys-info {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(24, 24, 27, 0.36);
}

/* HARD_GATE#843: delete/confirm tertiary layer above config(80) and log-full(120) base */
#modal.modal {
  z-index: 1300 !important;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-md);
}

.modal-wide {
  width: min(520px, 100%);
}

.modal-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}

.modal-card p,
.help-body {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.help-body ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.help-body li {
  margin: 4px 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(480px, calc(100% - 24px));
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.toast.hidden {
  display: none;
}

.toast.error {
  border-color: rgba(228, 0, 20, 0.28);
  color: #b42318;
  background: #fff7f7;
}

@media (max-width: 720px) {
  .card-summary,
  .card-fields {
    grid-template-columns: 1fr;
  }

  /* mobile header: stacked brand / stats / actions, no awkward wrap */
  .topbar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    width: 100%;
    gap: 10px;
  }

  .brand-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-text h1 {
    font-size: 14px;
    line-height: 1.25;
  }

  .brand-sub {
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
  }

  .top-stats {
    width: 100%;
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .stat {
    text-align: center;
    padding: 5px 2px;
    font-size: 11px;
    min-width: 0;
  }

  .top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .top-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .main {
    padding: 12px 10px 28px;
  }
}

@media (max-width: 380px) {
  .brand-sub {
    display: none;
  }

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

/* J8_UI_CARD_INTERACT — surface always-visible desktop + logs */
.card-desktop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
  margin: 0 0 10px;
}

.card-desktop-row .desktop-field {
  margin: 0;
}

.card-desktop-row select {
  width: 100%;
}

.spu-chip {
  min-width: 120px;
  max-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.3;
}

.spu-chip strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  word-break: break-all;
}

.surface-log {
  margin-top: 2px;
}

.surface-log .log-box {
  max-height: 207px; /* HARD_GATE#845 +10% from 188 */
  min-height: 72px;
  overflow: auto;
}

.card-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.card-actions .btn[data-act="config"][aria-expanded="true"] {
  border-color: #4f46e5;
  color: #3730a3;
  background: rgba(79, 70, 229, 0.08);
}

@media (max-width: 560px) {
  .card-desktop-row {
    grid-template-columns: 1fr;
  }
  .spu-chip {
    max-width: none;
  }
}

/* J8_UI_ACCOUNT_FLOW: composer two-column */
.form-grid-composer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 16px 20px;
  align-items: start;
}
.composer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.composer-col-right .field:first-child {
  margin-top: 0;
}
.official-protocol-field .spu-chip {
  min-width: 0;
  max-width: none;
  width: 100%;
}
#c-desktop:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
@media (max-width: 860px) {
  .form-grid-composer {
    grid-template-columns: 1fr;
  }
}

/* OPS#337 config centered modal */
#config-modal.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.45);
  padding: 24px 16px;
}
#config-modal.modal.hidden { display: none; }
.config-modal-card {
  /* OPS#469: keep >=720 so form-bottom-3 has room for 3 tracks */
  width: min(760px, 100%);
  min-width: min(720px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  padding: 0;
}
.config-modal-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
  border-bottom: 1px solid #e5e7eb;
}
.config-modal-card .modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.config-modal-card .modal-x {
  min-width: 36px;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}
.config-modal-card .modal-body { padding: 14px 16px 16px; }
.config-modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.config-modal-fields .field.span-2 { grid-column: 1 / -1; }
.config-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.config-modal-desktop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 160px);
  gap: 10px;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
  margin: 4px 0 0;
}
.config-modal-desktop .desktop-field { margin: 0; }
.config-modal-desktop select { width: 100%; }
.config-modal-actions .btn-primary { min-width: 7.5rem; }
@media (max-width: 640px) {
  .config-modal-desktop {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.card.is-configuring { outline: 2px solid rgba(37, 99, 235, 0.35); }
.card .card-body { display: none !important; }
.card.open .card-body { display: none !important; }
@media (max-width: 640px) {
  .config-modal-fields { grid-template-columns: 1fr; }
}

/* ASSIGN#380 / OPS#388 — desktop Segmented + dual equal boxes */
.desk-seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-height: 72px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
}

.desk-seg.is-empty {
  justify-content: center;
}

.desk-seg-empty {
  color: var(--text-dim);
  font-size: 12px;
  padding: 10px 8px;
  text-align: center;
}

.desk-seg-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.desk-seg-item:hover {
  border-color: var(--border-strong);
}

.desk-seg-item.is-active {
  border-color: rgba(98, 95, 255, 0.4);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(98, 95, 255, 0.12);
}

.desk-seg-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.desk-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: #fff;
  justify-self: center;
}

.desk-seg-item.is-active .desk-dot {
  border-color: var(--accent);
  background: radial-gradient(circle at center, var(--accent) 0 40%, #fff 45%);
}

.desk-seg-text {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-all;
}

.desk-seg-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.desk-seg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.desk-seg-tools .btn {
  min-height: 36px;
}

.desk-protocol-note {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 11px;
}

.config-desktop-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 12px;
}

.config-modal-fields {
  grid-template-columns: 1fr 1fr;
}

/* card bottom dual boxes equal height */
.card-surface-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 2px;
}

.card-surface-dual .surface-log {
  display: flex;
  flex-direction: column;
  min-height: 140px;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  overflow: hidden;
}

.card-surface-dual .log-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

.card-surface-dual .surface-log {
  margin-top: 0;
}

.card-surface-dual .log-box:not(.log-viewport) {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.spu-chip-inline {
  min-width: 0;
  max-width: 140px;
  padding: 4px 6px;
  font-size: 10px;
}

.spu-chip-inline strong {
  margin-top: 0;
  font-size: 11px;
}

@media (max-width: 720px) {
  .card-surface-dual {
    grid-template-columns: 1fr;
  }
  .card-surface-dual .surface-log {
    min-height: 120px;
  }
}

/* OPS#469 hard 3-col: client / mode / user protocol (wrapper is NOT .field) */
.config-modal-fields .form-bottom-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 12px;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  flex-direction: unset !important; /* neutralize any inherited .field flex-col */
}
.config-modal-fields .form-bottom-3 > .field,
.config-modal-fields .form-bottom-3 > label.field {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  width: auto;
}
/* OPS#476: interval || traffic side-by-side */
.config-modal-fields .form-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  flex-direction: unset !important;
}
.config-modal-fields .form-pair > .field,
.config-modal-fields .form-pair > label.field {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  width: auto;
}
.desk-seg-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .config-modal-fields .form-bottom-3,
  .config-modal-fields .form-pair {
    grid-template-columns: 1fr !important;
  }
  .config-modal-card {
    min-width: 0;
  }
}

/* HARD GATE OPS#508 / HARD_GATE#829 — log viewport ~6 lines (=#810 14.025em) */
.log-viewport {
  max-height: 18.15em; /* HARD_GATE#845 */ /* true 6 lines */
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.desk-seg.is-locked,
.desk-seg[data-locked="1"] {
  opacity: 0.72;
  pointer-events: none;
}
.desk-seg.is-locked .desk-seg-item,
.desk-seg[data-locked="1"] .desk-seg-item {
  cursor: not-allowed;
}

/* HARD_GATE#654 dual-surface harden: equal height desk|log, 6-line scroll */
.card-surface-dual {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 168px;
}
.card-surface-dual .surface-log {
  min-height: 160px;
}
/* height lock moved to HARD_GATE#784 sole block */
.desk-seg {
  max-height: 220px;
  overflow-y: auto;
}
.timeline {
  width: 100%;
}
.card {
  width: 100%;
}

/* HARD_GATE#654 form-pair: account|password equal columns */
/* HARD_GATE#729 A: 保活间隔 || 单次流量持续 forced 2-col */
.form-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px 12px;
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  align-items: start;
}
.form-pair > .field,
.form-pair > label.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

/* HARD_GATE#665 USER_TOTAL_FAIL_REDO — composer compact rows + residual harden */
.form-bottom-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px 10px;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  flex-direction: unset !important;
}
.form-bottom-3 > .field,
.form-bottom-3 > label.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  width: auto;
  align-items: stretch;
}
.form-bottom-3 .seg,
.form-pair .seg {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
}
.form-bottom-3 .seg-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
  min-height: 36px; /* HARD_GATE#715 equal with btn/input */
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.form-pair {
  gap: 6px 10px !important;
  align-items: start; /* HARD_GATE#707 #7 top-align labels */
}
.form-pair > .field,
.form-pair > label.field {
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.form-pair input[type="number"],
.form-pair input[type="text"],
.form-bottom-3 input,
.form-bottom-3 select {
  min-height: 36px; /* HARD_GATE#715 equal control height */
  height: 36px;
  padding: 0 8px;
  box-sizing: border-box;
}
/* HARD_GATE#707 #6: pair/number fields keep short width + unit breathing */
.form-pair input[type="number"],
.form-bottom-3 input[type="number"],
.composer-col-right input[type="number"],
.config-modal-fields input[type="number"] {
  width: 5.5rem;
  max-width: 7rem;
  min-width: 4.5rem;
  flex: 0 0 auto;
}
.form-pair .field-row,
.form-bottom-3 .field-row,
.composer-col-right .field-row {
  justify-content: flex-start;
  gap: 8px;
}
.composer-col-right > .form-bottom-3,
.composer-col-right > .form-pair {
  margin-bottom: 8px;
}
.composer-col-right .field-note {
  margin-top: 2px;
  line-height: 1.3;
  font-size: 11px;
}

/* A11 / HARD_GATE#715: composer control row one 36px line */
.desk-seg-tools .btn,
.desk-seg-tools .btn-sm,
.composer .btn,
.composer .btn-sm,
.composer .seg-btn,
.composer select,
.composer input[type="text"],
.composer input[type="password"],
.composer input[type="number"],
.composer-actions .btn,
.composer-actions .btn-sm,
.composer-foot .btn,
.composer-foot .btn-sm,
.form-bottom-3 .seg-btn,
.form-bottom-3 input,
.form-bottom-3 select,
.form-pair input,
.form-pair select,
.form-pair .seg-btn {
  min-height: 36px !important;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.composer input[type="text"],
.composer input[type="password"],
.composer input[type="number"],
.composer select,
.form-bottom-3 input,
.form-bottom-3 select,
.form-pair input,
.form-pair select {
  justify-content: flex-start;
}
/* keep number short while equal-height */
.composer input[type="number"],
.form-pair input[type="number"],
.form-bottom-3 input[type="number"] {
  width: 5.5rem;
  max-width: 7rem;
  min-width: 4.5rem;
}

/* A10 card shorter; dual log|actions equal (HARD_GATE#665 B3/D) */
.card {
  width: 100%;
  max-width: 100%;
}
.card-head {
  padding: 10px 12px 6px;
}
.card-surface {
  padding: 0 12px 8px;
}
.card-surface-dual {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px;
  align-items: stretch;
  min-height: 132px;
}
.card-surface-dual .surface-log,
.card-surface-dual .surface-actions,
.card-surface-dual > * {
  min-height: 124px;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.log-viewport {
  flex: 1 1 auto;
  min-height: 18.15em; /* HARD_GATE#845 */
  max-height: 14.025em; /* HARD_GATE#829 =#810 true 6 lines */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A12 empty red chrome fully gone (JS: .hidden or empty node; keep real error text visible) */
.card-error:empty,
.card-error.hidden,
#config-modal-error:empty,
#config-modal-error.hidden {
  display: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  border-radius: 0 !important;
}

/* status color remains distinct on full-width cards */
.timeline,
.timeline-wrap,
.card {
  width: 100%;
}
.card.status-running {
  border-left: 3px solid var(--running, #007956);
}
.card.status-error {
  border-left: 3px solid var(--danger, #e40014);
}
.card.status-stopped {
  border-left: 3px solid var(--text-dim, #79716b);
}
.card.status-idle {
  border-left: 3px solid var(--border-strong, #d6d3d1);
}

/* center config modal residual */
.config-modal,
#config-modal {
  display: none;
}
.config-modal.is-open,
#config-modal.is-open,
.config-modal[aria-hidden="false"],
#config-modal[aria-hidden="false"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.config-modal-card {
  margin: auto;
  max-width: min(920px, 96vw);
}

@media (max-width: 900px) {
  .form-bottom-3 {
    grid-template-columns: 1fr !important;
  }
  /* HARD_GATE#729 A: keep interval||traffic 2-col until narrow phone */
  .card-surface-dual {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .form-pair {
    grid-template-columns: 1fr !important;
  }
}

/* HARD_GATE#729 C: composer/modal same-row controls one 36px visual line */
.composer .btn,
.composer .btn-sm,
.composer .seg-btn,
.composer-actions .btn,
.composer-actions .btn-sm,
.composer-foot .btn,
.composer-foot .btn-sm,
.desk-seg-tools .btn,
.desk-seg-tools .btn-sm,
.config-modal .btn,
.config-modal .btn-sm,
.config-modal .seg-btn,
.form-pair input,
.form-pair select,
.form-pair .seg-btn,
.form-bottom-3 input,
.form-bottom-3 select,
.form-bottom-3 .seg-btn {
  min-height: 36px !important;
  height: 36px !important;
  box-sizing: border-box;
}
.composer .btn-sm,
.composer-actions .btn-sm,
.composer-foot .btn-sm,
.desk-seg-tools .btn-sm,
.config-modal .btn-sm {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 12px;
}

/* HARD_GATE#736/#761: desk box removed from DOM; log-only card */
.card-surface-dual {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch;
  min-height: 0 !important;
  margin-top: 2px;
}
.card-surface-dual .surface-log,
.card-surface-dual .surface-actions,
.card-surface-dual > * {
  min-height: 0 !important;
  height: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.log-viewport {
  flex: 1 1 auto;
  min-height: 18.15em; /* HARD_GATE#845 */ /* HARD_GATE#829 =#810 true 6 lines */
  max-height: 14.025em !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.card-summary {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* HARD_GATE#781: refresh CTA = centered light-gray text link (CLI Proxy style) */
.desk-seg.desk-seg-refresh,
.desk-seg-refresh,
.desk-refresh-wrap {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
  opacity: 1 !important;
  pointer-events: auto !important;
  user-select: none;
  text-align: center;
}
.desk-seg.desk-seg-refresh:hover,
.desk-seg-refresh:hover,
.desk-refresh-wrap:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.desk-seg.desk-seg-refresh:active,
.desk-seg-refresh:active {
  background: transparent !important;
  transform: none;
}
/* text-link CTA — no thick border / fill / capsule (class: .desk-refresh-cta.desk-refresh-link) */
.desk-refresh-cta,
button.desk-refresh-cta,
.btn.desk-refresh-cta,
.desk-refresh-link,
button.desk-refresh-link,
.btn.desk-refresh-cta.desk-refresh-link {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-soft, #a8a29e) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.desk-refresh-cta:hover:not(:disabled),
button.desk-refresh-cta:hover:not(:disabled),
.btn.desk-refresh-cta:hover:not(:disabled),
.desk-refresh-link:hover:not(:disabled),
button.desk-refresh-link:hover:not(:disabled) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-dim, #79716b) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.desk-refresh-cta:active:not(:disabled),
button.desk-refresh-cta:active:not(:disabled),
.desk-refresh-link:active:not(:disabled) {
  background: transparent !important;
  color: var(--text, #1c1917) !important;
  box-shadow: none !important;
}
.desk-refresh-cta:focus-visible,
button.desk-refresh-cta:focus-visible,
.desk-refresh-link:focus-visible {
  outline: 1px solid rgba(120, 113, 108, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}
.desk-refresh-cta:disabled,
button.desk-refresh-cta:disabled,
.desk-refresh-link:disabled,
.desk-refresh-cta.is-loading,
.desk-refresh-link.is-loading {
  cursor: default !important;
  opacity: 0.72 !important;
  color: var(--text-soft, #a8a29e) !important;
  text-decoration: none !important;
  pointer-events: none !important;
}
/* locked list must not kill refresh CTA hit-target */
.desk-seg.is-locked.desk-seg-refresh,
.desk-seg[data-locked="1"].desk-seg-refresh,
.desk-seg.is-locked .desk-refresh-cta,
.desk-seg[data-locked="1"] .desk-refresh-cta,
.desk-seg.is-locked .desk-refresh-link,
.desk-seg[data-locked="1"] .desk-refresh-link {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
.desk-seg-tools .btn,
.desk-seg-tools .btn-sm {
  min-height: 36px !important;
  cursor: pointer;
}
/* HARD_GATE#784/#829: card log viewport fixed true 6 lines (=#810 14.025em); internal scroll */
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.log-box.log-viewport,
.log-viewport {
  flex: 0 0 14.025em !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: 18.15em; /* HARD_GATE#845 */ /* true 6 lines */
  min-height: 18.15em; /* HARD_GATE#845 */
  max-height: 14.025em !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  contain: layout paint size;
  content-visibility: auto;
  will-change: auto;
  box-sizing: border-box !important;
  cursor: pointer;
}
.card-surface-dual .surface-log {
  /* log head + fixed 6-line viewport; avoid stretch growth on pushCard */
  align-self: stretch;
  overflow: hidden;
}
.log-viewport[title]::after {
  content: none;
}

/* HARD_GATE#768: independent 登录 button (not primary 保存并保活) */
#c-login,
.btn-login,
button.btn-login {
  min-height: 36px !important;
  height: 36px !important;
  font-weight: 600;
}
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.composer-actions #c-login,
.composer-actions .btn-login {
  order: 1;
}
.composer-actions #c-clear {
  order: 0;
}
.composer-actions #c-submit {
  order: 2;
  margin-left: auto;
}

/* HARD_GATE#768: full log modal shell (viewport height above) */
.log-panel-head .log-open-full,
button.log-open-full {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px;
}
/* full log modal/drawer shell (JS may inject .log-full-modal) */
.log-full-modal,
.modal.log-full-modal,
#log-full-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 18, 28, 0.45);
}
.log-full-modal[hidden],
#log-full-modal[hidden],
.log-full-modal.is-hidden {
  display: none !important;
}
.log-full-dialog {
  width: min(720px, 96vw);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 16px 40px rgba(15, 18, 28, 0.18);
  overflow: hidden;
}
.log-full-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2, #f7f7fa);
}
.log-full-head h3,
.log-full-head .log-full-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.log-full-body,
.log-full-box {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: calc(80vh - 56px);
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  background: #fafafa;
}
.log-full-body .log-line,
.log-full-box .log-line {
  padding: 2px 0;
}


/* HARD_GATE#803 NEWACCT_LAYOUT_COMPACT + CARD_DESKTOP_BORDER
   - short account/password + content-width login after pwd
   - left: creds + large desk list; right: displayName + interval + segs
   - config modal desktop area restores clear border container
   hold #781 text-link CTA / #784+#810 log-viewport 14.025em / #768 login btn */
.form-grid-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) !important;
  gap: 12px 16px;
  align-items: start;
}
.composer-col {
  gap: 10px;
}
.composer-col-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.composer-col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* short account / password — not full-track giant bars */
.composer-col-left > .field:has(#c-username),
.composer-col-left > .field:has(#c-password),
.composer #c-username,
.composer #c-password,
.composer-col-left #c-username,
.composer-col-left #c-password {
  max-width: 20rem;
  width: 100%;
  box-sizing: border-box;
}
/* displayName on right stays compact when UI moves it */
.composer-col-right #c-displayName,
.composer #c-displayName {
  max-width: 16rem;
  width: 100%;
  box-sizing: border-box;
}
/* login after password: content-width, not full-bleed bar */
.login-after-pwd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 20rem;
  width: auto;
}
.login-after-pwd .field-note,
.login-after-pwd .field-hint {
  margin: 0;
  max-width: 20rem;
}
#c-login,
.composer #c-login,
.btn-login,
button.btn-login,
.btn-login-inline,
button.btn-login-inline {
  width: auto !important;
  min-width: 4.5rem;
  max-width: 8rem;
  padding-left: 14px !important;
  padding-right: 14px !important;
  flex: 0 0 auto;
  align-self: flex-start;
}
/* left desk list takes remaining vertical space */
.composer-col-left > .desktop-field,
.composer-col-left .desktop-field {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}
.composer-col-left .desk-seg-wrap,
.composer-col-left .desk-seg {
  width: 100%;
  max-width: none;
  min-height: 140px;
}
.composer-col-left .desk-seg {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  box-sizing: border-box;
}
/* right: name + interval + segmented compact stack */
.composer-col-right .form-bottom-3 {
  gap: 8px !important;
}
.composer-col-right .form-pair {
  gap: 8px;
}
.composer-col-right .seg {
  width: 100%;
  max-width: 18rem;
}

/* CARD_DESKTOP_BORDER: config modal desktop area clear bordered container */
.config-desktop-field,
.field.config-desktop-field,
.desktop-field.config-desktop-field,
#config-modal .desktop-field,
#config-modal .config-desktop-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2, #f7f7fa);
  box-sizing: border-box;
}
#config-modal .config-desktop-field > span,
.config-desktop-field > span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
}
#config-modal .desk-seg-wrap,
.config-desktop-field .desk-seg-wrap {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}
#config-modal .desk-seg,
.config-desktop-field .desk-seg,
#config-modal .desk-seg-refresh {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2, #f7f7fa);
  min-height: 88px;
  box-sizing: border-box;
}
/* selected desk item chrome stays visible inside bordered list */
#config-modal .desk-seg .seg-btn.active,
.config-desktop-field .desk-seg .seg-btn.active,
#config-modal .desk-item.active,
.config-desktop-field .desk-item.active {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 1px var(--accent, #2563eb);
}
/* config modal login after pwd also short */
#config-modal .login-after-pwd,
.login-after-pwd.field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 22rem;
}
#config-modal .btn-login-inline,
#config-modal .login-after-pwd .btn {
  width: auto !important;
  min-width: 4.5rem;
  max-width: 8rem;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
/* config modal short username/password when present */
#config-modal input[data-key="username"],
#config-modal input[data-key="password"],
#config-modal input[name="username"],
#config-modal input[name="password"] {
  max-width: 20rem;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .form-grid-composer {
    grid-template-columns: 1fr !important;
  }
  .composer #c-username,
  .composer #c-password,
  .composer #c-displayName,
  .composer-col-left #c-username,
  .composer-col-left #c-password {
    max-width: 100%;
  }
  .login-after-pwd {
    max-width: 100%;
  }
}


/* HARD_GATE#810 CARD_LOG_6LINES_TALLER
   True 6-line card log viewport (sole system 14.025em / 188px after #829 purge).
   Keep fixed height + internal scroll; no whole-card reflow. DBLCLICK = JS sole. */
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.log-box.log-viewport,
.log-viewport {
  /* 12px mono: line ~ (1.45*12 + 4pad)=21.4px; *6 + box pad 16 ≈ 144px ≈ 12em */
  flex: 0 0 14.025em !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: 18.15em; /* HARD_GATE#845 */
  min-height: 18.15em; /* HARD_GATE#845 */
  max-height: 14.025em !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  contain: layout paint size;
  box-sizing: border-box !important;
  line-height: 1.45;
  cursor: pointer; /* dblclick opens full log — JS */
}

.card-surface-dual .surface-log {
  /* head + true 6-line viewport; card taller as a whole */
  min-height: 207px !important; /* HARD_GATE#845 */
  height: auto;
  align-self: stretch;
  overflow: hidden;
}

.card-surface-dual .surface-log .log-box.log-viewport,
.card-surface-dual .surface-log .log-viewport {
  flex: 0 0 14.025em !important;
}

/* slightly taller dual surface so left/right stay balanced */
.card-surface-dual {
  min-height: 188px;
}

/* keep log lines compact but readable for 6-count */
.log-viewport .log-line,
.card-surface-dual .log-viewport .log-line {
  line-height: 1.45;
  padding: 2px 0;
  min-height: 0;
}


/* HARD_GATE#827 CARD_LOG_MODAL_CLOSE_BTN
   X must be clickable once; mask must not cover close; hold #810 dblclick open. */
.log-full-modal,
.modal.log-full-modal,
#log-full-modal {
  z-index: 120 !important; /* above toast(60)/config(80) */
  pointer-events: auto !important;
}
.log-full-modal .log-full-dialog,
.log-full-modal .log-full-card,
.log-full-modal .modal-card.log-full-dialog,
#log-full-modal .log-full-dialog,
#log-full-modal .log-full-card {
  position: relative;
  z-index: 121 !important;
  pointer-events: auto !important;
  overflow: visible; /* do not clip close hit box */
}
.log-full-modal .modal-head,
.log-full-modal .log-full-head,
#log-full-modal .modal-head {
  position: relative;
  z-index: 122 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: auto !important;
}
#log-full-close,
.log-full-modal #log-full-close,
.log-full-modal .modal-x,
.log-full-modal button.modal-x,
#log-full-modal .modal-x {
  position: relative;
  z-index: 130 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  line-height: 1 !important;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #18181b);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#log-full-close:hover,
.log-full-modal #log-full-close:hover,
.log-full-modal .modal-x:hover,
#log-full-modal .modal-x:hover {
  background: rgba(24, 24, 27, 0.08) !important;
  border-color: var(--border, #e4e4e7);
  color: var(--text, #18181b);
}
#log-full-close:active,
.log-full-modal #log-full-close:active,
.log-full-modal .modal-x:active,
#log-full-modal .modal-x:active {
  background: rgba(24, 24, 27, 0.14) !important;
  transform: scale(0.96);
}
#log-full-close:focus-visible,
.log-full-modal .modal-x:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}
/* body/log area must not overlay the head/close */
.log-full-modal .log-full-body,
.log-full-modal .log-full-box,
#log-full-modal .log-full-body,
#log-full-body {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
/* when modal open, keep dialog above any pseudo-mask; click on backdrop still receives events on modal root (pm handles close) */
.log-full-modal:not([hidden]):not(.hidden) > .log-full-dialog,
.log-full-modal:not([hidden]):not(.hidden) > .log-full-card,
#log-full-modal:not([hidden]):not(.hidden) > .modal-card {
  pointer-events: auto !important;
}

/* HARD_GATE#831: card log shows 6 lines; modal close solid */
.card-surface-log-only .log-viewport,
.card-surface-log-only .log-box[data-log],
.log-panel .log-viewport,
.log-panel .log-box[data-log],
.card-log-expanded .log-box,
.card-log-expanded .log-viewport {
  min-height: 18.15em !important; /* HARD_GATE#845 +10% */
  height: 18.15em !important; /* HARD_GATE#845 +10% */
  max-height: 18.15em !important; /* HARD_GATE#845 +10% */
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.card-surface-log-only .log-line,
.log-panel .log-line,
.card-log-expanded .log-line {
  min-height: 1.55em;
  line-height: 1.55em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.account-card,
.card[data-pid] {
  min-height: 22em;
}
.log-full-modal .modal-x,
#log-full-close,
.log-full-modal .log-full-close {
  position: relative;
  z-index: 5;
  min-width: 36px;
  min-height: 36px;
  line-height: 1;
  font-size: 22px;
  cursor: pointer;
  pointer-events: auto !important;
}
.log-full-modal.hidden,
.log-full-modal.is-hidden,
#log-full-modal.hidden,
#log-full-modal[hidden],
#log-modal.hidden,
#log-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.log-full-modal:not(.hidden):not([hidden]),
#log-full-modal:not(.hidden):not([hidden]),
#log-modal:not(.hidden):not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.log-modal-open {
  overflow: hidden;
}
/* config desktop field border restore */
.config-desktop-field,
#config-modal .config-desktop-field,
.desktop-field.config-desktop-field {
  border: 1px solid var(--border, #d0d7de) !important;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(0,0,0,0.03));
}
/* composer compact: login after password, displayName on right */
.composer-col-left .login-after-pwd,
#composer .login-after-pwd {
  display: flex;
  align-items: end;
  gap: 8px;
}
.composer-col-left #c-username,
.composer-col-left #c-password {
  max-width: 100%;
}
#composer .btn-login-inline,
.login-after-pwd .btn,
#btn-composer-login {
  min-width: 72px;
  width: auto;
  white-space: nowrap;
}



/* HARD_GATE#832: viewport = 6 lines fixed height; full history scrolls inside */
.card-surface-log-only .log-viewport,
.card-surface-log-only .log-box[data-log],
.log-panel .log-viewport,
.log-panel .log-box[data-log],
.card-log-expanded .log-box,
.card-log-expanded .log-viewport,
.log-box.log-viewport {
  flex: 0 0 16.5em !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: 18.15em !important; /* HARD_GATE#845 +10% */
  min-height: 18.15em !important; /* HARD_GATE#845 +10% */
  max-height: 18.15em !important; /* HARD_GATE#845 +10% */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  line-height: 1.55em;
  font-size: 12px;
}
.card-surface-log-only .log-line,
.log-panel .log-line,
.card-log-expanded .log-line,
.log-viewport .log-line {
  min-height: 1.55em !important;
  line-height: 1.55em !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.card[data-id],
.card[data-pid],
.account-card {
  min-height: 32em; /* HARD_GATE#845 raised #856d */
}

/* ===== HARD_GATE#834 pain fixes: layout / border / CTA / log viewport / red error ===== */
.card-error:empty,
.card-error.hidden,
#config-modal-error:empty,
#config-modal-error.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.card[data-id],
.card[data-pid],
.account-card {
  min-height: 26em;
}

.card-surface-log-only .log-viewport,
.log-box.log-viewport,
.card-log-expanded .log-viewport {
  /* 6 lines * 1.55em + head breathing room */
  height: calc(1.55em * 6 + 8px) !important;
  max-height: calc(1.55em * 6 + 8px) !important;
  min-height: calc(1.55em * 6 + 8px) !important;
  overflow-y: auto !important;
}

/* composer: short account/password + compact login after password */
.form-grid-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) !important;
  gap: 12px 18px !important;
  align-items: start !important;
}
.composer-col-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.composer-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.composer-col-left .field#c-username,
.composer-col-left #c-username,
.composer-col-left #c-password,
.composer-col-left input#c-username,
.composer-col-left input#c-password {
  max-width: 16rem !important;
  width: 100% !important;
}
.composer-login-row,
.login-after-pwd {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
}
#c-login,
.btn-login-inline,
.composer-login-row #c-login {
  width: auto !important;
  min-width: 4.5rem !important;
  max-width: 7rem !important;
  height: 36px !important;
  padding: 0 14px !important;
  flex: 0 0 auto !important;
}
.composer-desktop-field,
.desktop-field.config-desktop-field,
.config-desktop-field,
.composer .desk-seg-wrap,
.config-form .desk-seg-wrap {
  border: 1px solid var(--border, rgba(30, 34, 56, 0.14)) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-sizing: border-box !important;
}
.desk-seg {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.desk-seg .seg-btn,
.desk-seg .desk-item {
  min-height: 36px !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* refresh CTA: CLI-proxy style text link, obvious but not thick ugly button */
.desk-refresh-cta,
button.desk-refresh-cta,
.desk-refresh-link,
button.desk-refresh-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 4px 0 2px !important;
  padding: 8px 12px !important;
  border: 1px dashed rgba(47, 107, 255, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(47, 107, 255, 0.06) !important;
  color: #2f6bff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.desk-refresh-cta:hover,
button.desk-refresh-cta:hover,
.desk-refresh-link:hover {
  background: rgba(47, 107, 255, 0.12) !important;
  border-color: rgba(47, 107, 255, 0.7) !important;
}
.desk-refresh-cta.is-loading,
.desk-refresh-cta:disabled {
  opacity: 0.65 !important;
  cursor: wait !important;
}

/* log modal close always clickable above mask */
.log-full-modal,
#log-modal,
#log-full-modal {
  z-index: 1200 !important;
}
.log-full-modal.open,
.log-full-modal.is-open,
#log-modal.open,
#log-full-modal.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.log-full-head .modal-x,
#log-full-close {
  position: relative !important;
  z-index: 2 !important;
  min-width: 36px !important;
  min-height: 36px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* HARD_GATE#838: FORCE card log viewport = exactly 6 single-line rows (beat legacy dual/surface !important) */
:root {
  --log-line-h: 1.55em;
  --log-view-pad: 8px;
  --log-view-h: calc(var(--log-line-h) * 6 + var(--log-view-pad));
}
.account-card .log-panel.surface-log,
.account-card .log-panel.card-log-expanded,
.card .log-panel.surface-log,
.card .log-panel.card-log-expanded,
.cards .log-panel.surface-log,
.cards .log-panel.card-log-expanded,
.card-surface-dual .log-panel,
.card-surface-log-only .log-panel {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
/* beat .card-surface-dual .log-box.log-viewport { flex:0 0 14.025em; max-height:14.025em !important; height:16.5em } */
.account-card .log-viewport,
.account-card .log-box,
.account-card .log-box.log-viewport,
.account-card .log-panel .log-viewport,
.account-card .log-panel .log-box,
.card .log-viewport,
.card .log-box,
.card .log-box.log-viewport,
.card .log-panel .log-viewport,
.card .log-panel .log-box,
.cards .log-viewport,
.cards .log-box,
.cards .log-box.log-viewport,
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.card-surface-dual .log-box,
.card-surface-log-only .log-viewport,
.card-surface-log-only .log-box,
.card-surface-log-only .log-box[data-log],
.log-panel.surface-log .log-viewport,
.log-panel.card-log-expanded .log-viewport,
.log-panel.surface-log .log-box,
.log-panel.card-log-expanded .log-box,
.log-panel .log-box.log-viewport,
.log-box.log-viewport.log-viewport {
  flex: 0 0 var(--log-view-h) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: var(--log-view-h) !important;
  min-height: var(--log-view-h) !important;
  max-height: var(--log-view-h) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  line-height: var(--log-line-h) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
}
/* single-line rows: no wrap compression (6 entries always) */
.account-card .log-line,
.account-card .log-line.log-line-card,
.account-card .log-line.log-line-py,
.card .log-line,
.card .log-line.log-line-card,
.card .log-line.log-line-py,
.cards .log-line,
.card-surface-dual .log-line,
.card-surface-log-only .log-line,
.log-panel.surface-log .log-line,
.log-panel.card-log-expanded .log-line,
.log-panel .log-line,
.log-viewport .log-line,
.log-box .log-line,
.log-box.log-viewport .log-line {
  display: block !important;
  height: var(--log-line-h) !important;
  min-height: var(--log-line-h) !important;
  max-height: var(--log-line-h) !important;
  line-height: var(--log-line-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}
.account-card .log-line .log-text,
.card .log-line .log-text,
.cards .log-line .log-text,
.log-viewport .log-line .log-text,
.log-box .log-line .log-text,
.log-panel .log-line .log-text {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: var(--log-line-h) !important;
  height: var(--log-line-h) !important;
  max-width: 100% !important;
}
/* modal/full log still wraps */
.log-full .log-line,
.log-full .log-line .log-text,
.log-line.log-line-full,
.log-line.log-line-full .log-text {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  max-height: none !important;
  min-height: var(--log-line-h) !important;
  word-break: break-word !important;
}
.account-card,
.card.account-card,
.cards .card {
  min-height: 32em !important; /* was 30.8em -> #856d */
}


/* ========== HARD_GATE#839: card log = full text of ~6 latest entries (wrap OK), wheel for rest ========== */
.card .card-surface-log.card-log-expanded .log-viewport.log-box,
.card .card-surface-log-only .log-viewport.log-box,
.card .log-box.log-viewport,
.card-log-expanded .log-box.log-viewport,
.card .log-viewport[data-log],
.card [data-log].log-viewport,
.card [data-log].log-box {
  /* room for ~6 complete entries; long lines wrap so text is fully readable */
  height: auto !important;
  min-height: 11.55em !important; /* HARD_GATE#845 +10% */
  max-height: 18.15em !important; /* HARD_GATE#845 +10% */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

.card .log-line-card,
.card .log-line.log-line-card,
.card .log-line-card .log-text,
.card .log-line.log-line-card .log-text,
.card .log-viewport .log-line,
.card .log-viewport .log-line .log-text,
.card .log-box .log-line,
.card .log-box .log-line .log-text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  overflow: visible !important;
  max-width: 100% !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.45 !important;
  font-size: 12px !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
}

.card .log-line-card.log-line-pad,
.card .log-line-pad {
  display: none !important;
}

.card .log-line-card.log-line-empty .log-text {
  opacity: 0.7;
  white-space: normal !important;
}

.log-full-modal .log-line-full,
#log-full-modal .log-line-full,
.log-full-dialog .log-line-full {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}


/* ========== HARD_GATE#841: card log = content-sized, last 6 rows, NO empty min-height ========== */
:root {
  --log-line-h: auto;
  --log-view-h: auto;
}

/* each log row: full text, wrap, no fixed row height */
.account-card .log-line,
.account-card .log-line.log-line-card,
.account-card .log-line .log-text,
.card .log-line,
.card .log-line.log-line-card,
.card .log-line .log-text,
.cards .log-line,
.cards .log-line .log-text,
.log-viewport .log-line,
.log-viewport .log-line .log-text,
.log-box .log-line,
.log-box .log-line .log-text,
.card-log-expanded .log-line,
.card-surface-log-only .log-line,
.card-surface-dual .log-line {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.45 !important;
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  display: block !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* viewport: height follows content (up to ~6 rows); never force blank min-height */
.account-card .log-viewport,
.account-card .log-box,
.account-card .log-box.log-viewport,
.account-card .log-panel .log-viewport,
.account-card .log-panel .log-box,
.card .log-viewport,
.card .log-box,
.card .log-box.log-viewport,
.card .log-panel .log-viewport,
.card .log-panel .log-box,
.card .card-surface-log-only .log-viewport,
.card .card-surface-log-only .log-box,
.card .card-log-expanded .log-viewport,
.card .card-log-expanded .log-box,
.card-surface-dual .log-box.log-viewport,
.card-surface-dual .log-viewport,
.card-surface-log-only .log-viewport,
.card-surface-log-only .log-box[data-log],
.log-box.log-viewport,
.card-log-expanded .log-box,
.card-log-expanded .log-viewport,
.card [data-log].log-viewport,
.card [data-log].log-box {
  flex: 0 1 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important; /* JS only injects last 6 rows */
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  white-space: normal !important;
}

/* kill earlier fixed 6-line / 14.025em / 16.5em / 24em locks */
.account-card .log-viewport,
.card .log-viewport,
.card .log-box.log-viewport {
  --log-view-h: auto !important;
}

.account-card .log-panel.surface-log,
.account-card .log-panel.card-log-expanded,
.card .log-panel.surface-log,
.card .log-panel.card-log-expanded,
.card .card-surface-log,
.card .card-surface-log-only,
.card-surface-dual .surface-log {
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* card height: comfortable DISABLED by #856d — keep fixed tower */
.account-card,
.card.account-card,
.cards .card,
.card[data-id],
.card[data-pid] {
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
}

.card .log-line-card.log-line-pad,
.card .log-line-pad {
  display: none !important;
}

/* HARD_GATE#842: composer reference layout */
.composer {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.composer .form-grid-composer,
.composer .composer-col,
.composer .composer-col-left,
.composer .composer-col-right {
  display: contents !important;
}
.composer-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 12px;
  background: var(--panel-2, rgba(255,255,255,.55));
}
.composer-block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1f2430);
  letter-spacing: 0;
}
.composer-block-note {
  margin: 0 !important;
  color: var(--muted, #8b90a5);
  font-size: 12px;
}
.composer-row {
  display: grid !important;
  gap: 12px !important;
  align-items: end !important;
}
.composer-row-account {
  grid-template-columns: minmax(0,0.85fr) minmax(0,0.95fr) minmax(0,0.95fr) auto !important;
  align-items: end !important;
}
.composer-row-conn {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.composer-row .field {
  min-width: 0 !important;
  margin: 0 !important;
}
.composer-row .field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7285);
}
.composer-row .field .req {
  color: #e5484d;
  margin-left: 2px;
}
.composer-row .field input[type="text"],
.composer-row .field input[type="password"],
.composer-row .field input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  box-sizing: border-box !important;
}
.composer-row .field-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.composer-row .field-row input {
  flex: 1 1 auto !important;
  width: auto !important;
}
.composer-row .unit {
  flex: 0 0 auto;
  color: var(--muted, #8b90a5);
  font-size: 12px;
  white-space: nowrap;
}
.composer-row .seg {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 36px !important;
}
.composer-row .seg .seg-btn {
  flex: 1 1 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.field-login-cta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.login-cta-pair {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
}
.field-login-cta .field-spacer {
  display: block;
  height: 18px;
  margin-bottom: 6px;
  line-height: 1;
  opacity: 0;
  user-select: none;
}
.btn-login-cta,
#c-login.btn-login-cta,
#c-login-sub.btn-login-cta {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
}
.composer-desk-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.composer-desk-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.composer-desk-sub {
  font-size: 12px;
  color: var(--muted, #8b90a5);
}
.btn-desk-refresh,
#c-desk-refresh {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.composer-desk-panel,
#c-desktop.composer-desk-panel {
  border: 1px solid var(--border, rgba(0,0,0,.1)) !important;
  border-radius: 10px !important;
  background: var(--panel, #fff) !important;
  overflow: hidden !important;
  min-height: 180px !important;
}
#c-desktop.is-locked {
  opacity: 1 !important;
}
#c-desktop.is-locked .desk-table tbody {
  opacity: 0.95;
}
.desk-table-wrap {
  width: 100%;
  overflow: auto;
  max-height: 280px;
}
.desk-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.desk-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2, #f6f7fb);
  color: var(--muted, #6b7285);
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.desk-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
  vertical-align: middle;
  color: var(--text, #1f2430);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-table tbody tr:last-child td {
  border-bottom: 0;
}
.desk-table tbody tr.is-selected {
  background: rgba(47, 107, 255, 0.06);
}
.desk-table .col-id { width: 16%; }
.desk-table .col-name { width: 34%; }
.desk-table .col-spec { width: 20%; }
.desk-table .col-status { width: 14%; }
.desk-table .col-act { width: 16%; text-align: center; }
.desk-table .col-act { text-align: center; }
.desk-table td.col-act { text-align: center; white-space: nowrap; }
.desk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  color: var(--muted, #8b90a5);
  text-align: center;
  white-space: normal !important;
}
.desk-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2, #5b6172);
}
.desk-empty-hint {
  font-size: 12px;
}
.desk-select-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}
.desk-select-btn.is-active {
  background: rgba(47, 107, 255, 0.12) !important;
  color: #2f6bff !important;
  border-color: rgba(47, 107, 255, 0.35) !important;
}
.composer-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 2px !important;
}
.composer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
@media (max-width: 1100px) {
  .composer-row-account {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .composer-row-conn {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .field-login-cta { grid-column: 1 / -1; }
  .field-login-cta .login-cta-pair { width: 100% !important; }
  .field-login-cta .btn-login-cta { width: auto !important; flex: 1 1 auto !important; }
}
@media (max-width: 720px) {
  .composer-row-account,
  .composer-row-conn {
    grid-template-columns: 1fr !important;
  }
}


.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ========== HARD_GATE#845 FINAL OVERRIDE: card+10% / log+10% / global run-log visible ========== */
.card,
.card[data-id],
.card[data-pid],
.account-card,
.card.account-card,
.cards .card {
  min-height: 32em !important; /* was 30.8em -> #856d */
}

/* card keepalive log viewport only (NOT #global-log) */
.card .log-box.log-viewport,
.card .log-viewport[data-log],
.card [data-log].log-box,
.card [data-log].log-viewport,
.card .card-surface-log .log-box,
.card .card-surface-log-only .log-box,
.card-log-expanded .log-box.log-viewport,
.card-surface-dual .log-box.log-viewport {
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 11.55em !important;
  max-height: 18.15em !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  contain: none !important;
  content-visibility: visible !important;
}

/* global run log: exclude from card log-viewport clamps; must show lines */
#global-log,
#global-log.log-box,
#global-log.log-viewport,
.global-log-panel #global-log,
.global-log-panel .log-box,
.global-log-panel .log-viewport {
  display: block !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 9em !important;
  max-height: 280px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  contain: none !important;
  content-visibility: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}
.global-log-panel {
  overflow: visible !important;
  min-height: 0 !important;
}
.global-log-panel .log-line,
#global-log .log-line {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4 !important;
  color: var(--text) !important;
}
#global-log .log-line span,
#global-log .log-text {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: inherit !important;
}

/* ========== HARD_GATE#846: desk cols 序号/名称/id/协议/操作 + card log flush bottom ========== */
.desk-table th.col-idx,
.desk-table td.col-idx {
  width: 52px;
  text-align: center;
  white-space: nowrap;
}
.desk-table th.col-id,
.desk-table td.col-id {
  width: 110px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.desk-table th.col-proto,
.desk-table td.col-proto {
  width: 128px;
  word-break: break-all;
}
.desk-table th.col-name,
.desk-table td.col-name {
  width: auto;
}
.desk-table th.col-act,
.desk-table td.col-act {
  width: 88px;
  text-align: center;
}
.desk-table th.col-spec,
.desk-table td.col-spec,
.desk-table th.col-status,
.desk-table td.col-status {
  display: none !important;
}

/* Card flex column: log surface sticks to bottom; bottom pad = .card-head top pad (12px) */
.card,
.card[data-id],
.card[data-pid],
.account-card,
.card.account-card,
.cards .card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 32em !important; /* was 30.8em -> #856d */
  padding-bottom: 0 !important;
}
.card > .card-head,
.card > .card-actions,
.card > .card-error,
.card > .card-summary,
.card > .card-body {
  flex: 0 0 auto;
}
.card > .card-surface-dual,
.card > .card-surface-log-only,
.card > .card-surface-log {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important; /* = .card-head padding-top */
  box-sizing: border-box !important;
}
.card .card-surface-log-only .log-panel,
.card .card-surface-dual .log-panel,
.card .log-panel.card-log-expanded {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
}
.card .card-surface-log-only .log-box,
.card .card-surface-dual .log-box,
.card .log-panel.card-log-expanded .log-box,
.card .log-box.log-viewport {
  flex: 1 1 auto !important;
  min-height: 11.55em !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

/* ===== HARD_GATE#850: card log flush bottom; pad = card-head top (12px) ===== */
.card,
.card.account-card,
.cards .card {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}
.card > .card-surface-dual,
.card > .card-surface-log-only,
.card > .card-surface-log {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important; /* match .card-head padding-top */
  padding-top: 0 !important;
  box-sizing: border-box !important;
}
.card .log-panel,
.card .card-surface-log-only .log-panel,
.card .card-surface-dual .log-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.card .log-box,
.card .log-box.log-viewport,
.card .card-surface-log-only .log-box,
.card .card-surface-dual .log-box {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.card .log-toolbar {
  margin-bottom: 0 !important;
}

/* ========== HARD_GATE#851: desk head full-width / no squeeze / fixed card height / log flush bottom ========== */
.composer-block-desktops {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
}
.composer-desk-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  padding: 0 0 8px 0 !important;
}
.composer-desk-title-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.composer-desk-title-wrap .composer-block-title {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.composer-desk-sub,
#c-desktop-sub {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  color: var(--muted, #8b90a5) !important;
  letter-spacing: 0 !important;
}
.btn-desk-refresh,
#c-desk-refresh {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
}
.composer-desk-panel,
#c-desktop {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}
.composer-desk-panel .desk-table,
#c-desktop .desk-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.composer-desk-panel .desk-table thead th,
#c-desktop .desk-table thead th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fixed card height — stop jump when logs empty/full */
.card,
.card.account-card,
.cards .card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.card > .card-head {
  flex: 0 0 auto !important;
}
.card > .card-surface-dual,
.card > .card-surface-log-only,
.card > .card-surface-log {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 12px !important; /* = .card-head padding-top */
  padding-top: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-end !important;
}
.card .log-panel,
.card .card-surface-log-only .log-panel,
.card .card-surface-dual .log-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  justify-content: flex-end !important;
}
.card .log-toolbar {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}
.card .log-box,
.card .log-box.log-viewport,
.card .card-surface-log-only .log-box,
.card .card-surface-dual .log-box {
  flex: 1 1 auto !important;
  min-height: 11.55em !important;
  max-height: 18.15em !important;
  height: 18.15em !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
/* empty log still keeps viewport height so card does not shrink */
.card .log-box:empty,
.card .log-box .log-empty,
.card .log-viewport:empty {
  min-height: 18.15em !important;
}

/* ========== HARD_GATE#852: log flush bottom + desk head/table full columns ========== */
.card,
.card.account-card,
.cards .card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.card > .card-head {
  flex: 0 0 auto !important;
  padding: 12px 12px 8px !important; /* top gap reference */
}
.card > .card-surface-dual,
.card > .card-surface-log-only,
.card > .card-surface-log {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 0 12px 12px !important; /* bottom = card-head top */
  box-sizing: border-box !important;
  justify-content: flex-end !important;
}
.card .log-panel,
.card .card-surface-log-only .log-panel,
.card .card-surface-dual .log-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}
.card .log-toolbar {
  flex: 0 0 auto !important;
  margin: 0 0 6px 0 !important;
}
.card .log-box,
.card .log-box.log-viewport,
.card .card-surface-log-only .log-box,
.card .card-surface-dual .log-box {
  flex: 0 0 auto !important;
  min-height: 18.15em !important;
  max-height: 18.15em !important;
  height: 18.15em !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
.card .log-box:empty,
.card .log-box .log-empty,
.card .log-viewport:empty {
  min-height: 18.15em !important;
  height: 18.15em !important;
}

/* Composer desk head: title + sub not glued, full width */
.composer-block-desktops {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
.composer-desk-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  padding: 0 0 10px 0 !important;
}
.composer-desk-title-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}
.composer-desk-title-wrap .composer-block-title {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.composer-desk-sub,
#c-desktop-sub {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  color: var(--muted, #8b90a5) !important;
  letter-spacing: 0 !important;
}
.composer-desk-sub::before,
#c-desktop-sub::before {
  content: "·";
  margin-right: 8px;
  color: var(--muted, #8b90a5);
}
.btn-desk-refresh,
#c-desk-refresh {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
}

/* Desk table: show all 5 columns fully (序号/名称/ID/协议/操作) */
.composer-desk-panel,
#c-desktop {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.composer-desk-panel .desk-table-wrap,
#c-desktop .desk-table-wrap,
.desk-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 280px !important;
  box-sizing: border-box !important;
}
.desk-table,
.composer-desk-panel .desk-table,
#c-desktop .desk-table {
  width: 100% !important;
  min-width: 640px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.desk-table thead th,
.composer-desk-panel .desk-table thead th,
#c-desktop .desk-table thead th {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}
/* unhide + width map for JS columns */
.desk-table th.col-spec,
.desk-table td.col-spec,
.desk-table th.col-status,
.desk-table td.col-status {
  display: none !important; /* not used in #852 schema */
}
.desk-table th.col-idx,
.desk-table td.col-idx {
  width: 64px !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: table-cell !important;
}
.desk-table th.col-name,
.desk-table td.col-name {
  width: auto !important;
  min-width: 160px !important;
  display: table-cell !important;
}
.desk-table th.col-id,
.desk-table td.col-id {
  width: 120px !important;
  font-variant-numeric: tabular-nums !important;
  display: table-cell !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.desk-table th.col-proto,
.desk-table td.col-proto {
  width: 160px !important;
  display: table-cell !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.desk-table th.col-act,
.desk-table td.col-act {
  width: 96px !important;
  text-align: center !important;
  display: table-cell !important;
  white-space: nowrap !important;
}


/* ===== HARD_GATE#853: even desk columns + fixed empty log height + real clear ===== */
.desk-table-wrap,
.composer-block-desktops .desk-table-wrap,
#c-desk-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.desk-table,
.composer-block-desktops .desk-table,
#c-desk-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
/* 5 columns evenly distributed: 序号 / 名称 / id / 协议 / 操作 */
/* HARD_GATE#858: 序号10% / 名称30% / ID·协议·操作各20% — 非均分20% */
.desk-table col.col-idx,
.desk-table th.col-idx,
.desk-table td.col-idx,
.desk-table .col-idx {
  width: 10% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  display: table-cell !important;
  box-sizing: border-box !important;
}
.desk-table col.col-name,
.desk-table th.col-name,
.desk-table td.col-name,
.desk-table .col-name {
  width: 30% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  display: table-cell !important;
  box-sizing: border-box !important;
}
.desk-table col.col-id,
.desk-table th.col-id,
.desk-table td.col-id,
.desk-table .col-id {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  display: table-cell !important;
  box-sizing: border-box !important;
  font-variant-numeric: tabular-nums !important;
}
.desk-table col.col-proto,
.desk-table th.col-proto,
.desk-table td.col-proto,
.desk-table .col-proto {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  display: table-cell !important;
  box-sizing: border-box !important;
}
.desk-table col.col-act,
.desk-table th.col-act,
.desk-table td.col-act,
.desk-table .col-act {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  display: table-cell !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
.desk-table thead th,
.desk-table tbody td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.desk-table .col-spec,
.desk-table .col-status,
.desk-table th.col-spec,
.desk-table td.col-spec,
.desk-table th.col-status,
.desk-table td.col-status {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* fixed card + log viewport: empty/clear must NOT shrink */
.card,
.card.account-card,
.cards .card {
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.card .card-surface-dual,
.card .card-surface-log-only,
.card .card-surface-log,
.card > .card-surface-dual,
.card > .card-surface-log-only {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
}
.card .log-viewport,
.card .log-box,
.card .card-log,
.card .card-surface-dual .log-box,
.card .card-surface-dual .log-viewport,
.card .card-surface-log-only .log-box {
  flex: 0 0 18.15em !important;
  min-height: 18.15em !important;
  height: 18.15em !important;
  max-height: 18.15em !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  margin-bottom: 12px !important;
}
.card .log-empty-fill,
.card .log-line-empty,
.card .log-empty,
.card .log-viewport .log-empty-fill,
.card .log-box .log-empty-fill {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  white-space: normal !important;
}


/* ========== HARD_GATE#854: lock card/log size to #852 (32em/18.15em); empty must not shrink ========== */
.cards .card,
#cards .card,
.card-grid .card {
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.card .card-surface-dual,
.card .card-surface-log-only,
.card .card-surface-log,
.card > .card-surface-dual,
.card > .card-surface-log-only {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.card .log-viewport,
.card .log-box,
.card .card-log,
.card .card-surface-dual .log-box,
.card .card-surface-dual .log-viewport,
.card .card-surface-log-only .log-box,
.card .card-surface-log-only .log-viewport,
.card .card-surface-log .log-box,
.card .card-surface-log .log-viewport {
  flex: 0 0 18.15em !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: 18.15em !important;
  height: 18.15em !important;
  max-height: 18.15em !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-bottom: 12px !important; /* pad = title top gap */
}
/* kill any content-sized / 11.55em shrink rules for card logs */
.card .log-viewport.log-empty,
.card .log-box:empty,
.card .log-viewport:has(.log-empty-fill),
.card .log-viewport:has(.log-line-empty) {
  min-height: 18.15em !important;
  height: 18.15em !important;
  max-height: 18.15em !important;
}
.card .log-empty-fill,
.card .log-line-empty,
.card .log-empty,
.card .log-viewport .log-empty-fill,
.card .log-box .log-empty-fill,
.card .log-viewport .log-line-empty {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  white-space: normal !important;
}


/* ========== HARD_GATE#855: beat (0,4,0) 11.55em; pin log bottom gap = title top 12px ========== */
/* Real DOM: article.card > .card-surface.card-surface-dual.card-surface-log-only > actions + .log-panel > .log-box.log-viewport */

.cards .card,
#cards .card,
.card-grid .card,
article.card,
.card.account-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.card > .card-head,
article.card > .card-head {
  flex: 0 0 auto !important;
  padding: 12px 12px 8px !important; /* title top gap reference = 12px */
}

.card > .card-summary,
article.card > .card-summary {
  flex: 0 0 auto !important;
}

/* actual surface wrapper (not direct dual child) */
.card > .card-surface,
.card > .card-surface.card-surface-dual,
.card > .card-surface.card-surface-log-only,
.card > .card-surface.card-surface-dual.card-surface-log-only,
article.card > .card-surface,
article.card > .card-surface.card-surface-dual,
article.card > .card-surface.card-surface-log-only {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px 12px !important; /* bottom pad = title top 12px */
  box-sizing: border-box !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

.card > .card-surface > .card-actions,
.card > .card-surface > .surface-actions,
.card .card-surface .card-actions {
  flex: 0 0 auto !important;
  margin: 0 0 8px 0 !important;
}

.card > .card-surface > .log-panel,
.card > .card-surface > .surface-log,
.card .card-surface .log-panel,
.card .card-surface-dual .log-panel,
.card .card-surface-log-only .log-panel,
.card .log-panel.card-log-expanded {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

/* beat .card .log-panel.card-log-expanded .log-box {min-height:11.55em; flex:1 1 auto} (0,4,0) */
.card .log-panel.card-log-expanded .log-box,
.card .log-panel.card-log-expanded .log-box.log-viewport,
.card .log-panel .log-box.log-viewport,
.card .log-panel.card-log-expanded .log-viewport,
.card .card-surface .log-panel.card-log-expanded .log-box,
.card .card-surface .log-panel.card-log-expanded .log-box.log-viewport,
.card .card-surface .log-panel .log-box.log-viewport,
.card .card-surface-dual .log-panel.card-log-expanded .log-box,
.card .card-surface-log-only .log-panel.card-log-expanded .log-box,
.card .card-surface-dual .log-box.log-viewport,
.card .card-surface-log-only .log-box.log-viewport,
.card .log-box.log-viewport,
.card .log-viewport.log-box {
  flex: 0 0 18.15em !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: 18.15em !important;
  height: 18.15em !important;
  max-height: 18.15em !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* empty still same fixed height — no shrink */
.card .log-panel.card-log-expanded .log-box:empty,
.card .log-panel.card-log-expanded .log-box:has(.log-empty-fill),
.card .log-panel.card-log-expanded .log-box:has(.log-line-empty),
.card .log-box.log-viewport:empty,
.card .log-box.log-viewport:has(.log-empty-fill),
.card .log-box.log-viewport:has(.log-line-empty) {
  flex: 0 0 18.15em !important;
  min-height: 18.15em !important;
  height: 18.15em !important;
  max-height: 18.15em !important;
}

.card .log-empty-fill,
.card .log-line-empty,
.card .log-panel .log-empty-fill,
.card .log-panel .log-line-empty {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  margin: 0 !important;
}

/* ========== HARD_GATE#856: fit log panel INSIDE dual; bottom gap=title top 12px; no em-on-12px overflow ========== */
/* Measured fail #855: log-box 18.15em @ font-size 12px => 217.8px; panel 250 > dual 218 => clip/overflow.
   Fix: dual/panel/box flex-fill remaining surface; heights in px anchored to layout not log font-size.
   Empty/clear keeps same box via flex parent chain + min-height px floor. */

.cards .card,
#cards .card,
.card-grid .card,
article.card,
.card.account-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.card > .card-head,
.card .card-head {
  flex: 0 0 auto !important;
  padding-top: 12px !important; /* title top gap reference */
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}

.card > .card-summary,
.card .card-summary {
  flex: 0 0 auto !important;
}

.card > .card-surface,
.card .card-surface {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  padding: 0 0 12px 0 !important; /* bottom gap == title top 12px */
  margin: 0 !important;
  box-sizing: border-box !important;
  height: auto !important;
  max-height: none !important;
}

.card .card-surface > .card-actions,
.card .card-actions {
  flex: 0 0 auto !important;
  margin: 0 0 8px 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* dual takes ALL remaining surface height under actions; never larger than parent */
.card .card-surface > .card-surface-dual,
.card .card-surface > .card-surface-log-only,
.card .card-surface-dual.card-surface-log-only,
.card .card-surface-dual,
.card .card-surface-log-only {
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 12px 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* panel fills dual exactly — no fixed height that can overflow card */
.card .card-surface .log-panel,
.card .card-surface-dual .log-panel,
.card .card-surface-log-only .log-panel,
.card .log-panel.surface-log,
.card .log-panel.card-log-expanded,
.card .log-panel {
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

.card .log-panel > .log-panel-head,
.card .log-panel-head {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* beat HARD_GATE#855 18.15em @ 12px — use flex fill + px floor so clear won't collapse */
.card .log-panel.card-log-expanded .log-box,
.card .log-panel.card-log-expanded .log-box.log-viewport,
.card .log-panel .log-box.log-viewport,
.card .log-panel.card-log-expanded .log-viewport,
.card .card-surface .log-panel.card-log-expanded .log-box,
.card .card-surface .log-panel.card-log-expanded .log-box.log-viewport,
.card .card-surface .log-panel .log-box.log-viewport,
.card .card-surface-dual .log-panel.card-log-expanded .log-box,
.card .card-surface-log-only .log-panel.card-log-expanded .log-box,
.card .card-surface-dual .log-box.log-viewport,
.card .card-surface-log-only .log-box.log-viewport,
.card .log-box.log-viewport,
.card .log-viewport.log-box,
.card .log-box {
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  /* floor ~ dual(218)-head(30) so empty/clear keeps prior visual mass; px not em */
  min-height: 186px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.card .log-panel.card-log-expanded .log-box:empty,
.card .log-panel.card-log-expanded .log-box:has(.log-empty-fill),
.card .log-panel.card-log-expanded .log-box:has(.log-line-empty),
.card .log-box.log-viewport:empty,
.card .log-box.log-viewport:has(.log-empty-fill),
.card .log-box.log-viewport:has(.log-line-empty) {
  flex: 1 1 auto !important;
  min-height: 186px !important;
  height: auto !important;
  max-height: none !important;
}

.card .log-empty-fill,
.card .log-line-empty,
.card .log-panel .log-empty-fill,
.card .log-panel .log-line-empty {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* ========== HARD_GATE#856b: densify card log lines so 6 full rows fit in 186px box ========== */
/* Measured: injected/real wrap lines ~34.8px => only ~4 full rows in 186px (pad 6+6).
   Target: line-h 28px * 6 = 168 + 12 pad = 180 <= 186; keep sticky box min-height. */
.card .log-box.log-viewport,
.card .log-panel .log-box,
.card .card-surface-dual .log-box {
  --log-line-h: 28px !important;
  min-height: 186px !important;
  height: 100% !important;
  max-height: none !important;
  padding: 6px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.card .log-box .log-line,
.card .log-box .log-line.log-line-py,
.card .log-box .log-line.log-line-card,
.card .card-surface-dual .log-line,
.card .log-panel .log-line {
  display: block !important;
  height: var(--log-line-h) !important;
  min-height: var(--log-line-h) !important;
  max-height: var(--log-line-h) !important;
  line-height: var(--log-line-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.card .log-box .log-line .log-text,
.card .log-panel .log-line .log-text {
  display: block !important;
  height: var(--log-line-h) !important;
  max-height: var(--log-line-h) !important;
  line-height: var(--log-line-h) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* empty fill still fills box but does not change outer height */
.card .log-box .log-line.log-empty-fill,
.card .log-box .log-line-empty {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: flex-start !important;
}
.card .log-box .log-line.log-empty-fill .log-text {
  height: auto !important;
  max-height: none !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

/* HARD_GATE#862: card-summary 2-row full text, width align log panel */
/* Was #856c single-line ellipsis: 5 KPIs truncated on narrow cards. */
/* pad L/R 24px = surface pad 12 + dual margin 12 → content width == log-panel */
.card .card-summary,
#cards .card .card-summary,
.cards .card .card-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px 10px !important;
  padding: 0 24px 8px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.card .card-summary > div,
#cards .card .card-summary > div {
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}
.card .card-summary strong,
#cards .card .card-summary strong {
  display: inline !important;
  margin-top: 0 !important;
  margin-left: 2px !important;
  font-weight: 600 !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.card .card-actions,
#cards .card .card-actions,
.cards .card .card-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
  align-items: center !important;
}
.card .card-actions .btn,
#cards .card .card-actions .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 6px 4px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ========== HARD_GATE#856d: FORCE card tower 32em (kill 30.8em residual) ========== */
html body .timeline article.card,
html body .timeline .card,
html body article.card.status-stopped,
html body article.card.status-running,
html body article.card.status-error,
html body article.card.status-starting,
html body article.card,
html body .cards .card,
html body #cards .card,
html body .card.account-card,
html body .account-card,
html body .card[data-id],
html body .card[data-pid] {
  min-height: 32em !important;
  height: 32em !important;
  max-height: 32em !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html body .timeline {
  min-height: 32em !important;
}

/* ========== HARD_GATE#862: card-summary 2-row full text (3+2), width align log ========== */
/* Override #856e single-row 5-col ellipsis that truncated 云桌面/协议/客户端/模式/间隔 */
/* pad L/R 24px = surface pad12 + dual margin12 → summary content width == log-panel */
html body .timeline article.card .card-summary,
html body .cards .card .card-summary,
html body article.card .card-summary,
.card-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-template-rows: auto auto !important;
  gap: 6px 10px !important;
  align-items: start !important;
  padding: 0 24px 8px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html body .timeline article.card .card-summary > *,
html body .cards .card .card-summary > *,
html body article.card .card-summary > *,
.card-summary > * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  font-size: 12px !important;
}
html body .timeline article.card .card-summary strong,
html body .cards .card .card-summary strong,
html body article.card .card-summary strong,
.card-summary strong {
  display: inline !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin-left: 2px !important;
  font-weight: 600 !important;
}
@media (max-width: 720px) {
  html body .timeline article.card .card-summary,
  html body .cards .card .card-summary,
  .card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 420px) {
  html body .timeline article.card .card-summary,
  html body .cards .card .card-summary,
  .card-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ========== HARD_GATE#857: desk cols 10/30/20/20/20 + full log lines (no ellipsis half-hide) + multi-vp ========== */
/* Desk: 序号10% 名称30% ID20% 协议20% 操作20% — kill equal-20% from #853 */
.desk-table,
.composer-block-desktops .desk-table,
#c-desk-table,
html body .desk-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.desk-table col.col-idx,
.desk-table th.col-idx,
.desk-table td.col-idx,
.desk-table .col-idx,
html body .desk-table .col-idx {
  width: 10% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.desk-table col.col-name,
.desk-table th.col-name,
.desk-table td.col-name,
.desk-table .col-name,
html body .desk-table .col-name {
  width: 30% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.desk-table col.col-id,
.desk-table th.col-id,
.desk-table td.col-id,
.desk-table .col-id,
html body .desk-table .col-id {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
  font-variant-numeric: tabular-nums !important;
}
.desk-table col.col-proto,
.desk-table th.col-proto,
.desk-table td.col-proto,
.desk-table .col-proto,
html body .desk-table .col-proto {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.desk-table col.col-act,
.desk-table th.col-act,
.desk-table td.col-act,
.desk-table .col-act,
html body .desk-table .col-act {
  width: 20% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
/* name/id may wrap once if needed; avoid crushing header text */
.desk-table thead th,
.desk-table tbody td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  vertical-align: middle !important;
}
.desk-table thead th.col-name,
.desk-table tbody td.col-name {
  white-space: normal !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
/* narrow viewports: horizontal scroll instead of crushing 5 cols */
@media (max-width: 720px) {
  .desk-table-wrap,
  .composer-block-desktops .desk-table-wrap,
  #c-desk-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .desk-table,
  #c-desk-table {
    min-width: 560px !important;
  }
}

/* Card log lines: SHOW FULL TEXT — kill nowrap+ellipsis half-hide */
html body .card .log-box .log-line,
html body .card .log-viewport .log-line,
html body article.card .log-line,
html body .cards .card .log-line,
.card .log-box .log-line,
.card .log-viewport .log-line,
.card .log-line,
.log-box .log-line,
.log-viewport .log-line,
.log-line.log-line-py,
.log-line {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.35 !important;
  display: block !important;
  box-sizing: border-box !important;
}
/* keep viewport scrollable so wrapped full lines remain readable */
html body .card .log-box,
html body .card .log-viewport,
.card .log-box,
.card .log-viewport {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ========== HARD_GATE#857b: kill .log-text fixed-height nowrap+ellipsis (root cause) ========== */
html body .card .log-box .log-line,
html body .card .log-viewport .log-line,
html body .card .log-panel .log-line,
html body .card .log-box .log-line.log-line-py,
html body .card .log-box .log-line.log-line-card,
html body article.card .log-line,
html body .cards .card .log-line,
.card .log-box .log-line,
.card .log-viewport .log-line,
.card .log-panel .log-line,
.card .log-box .log-line.log-line-py,
.card .log-box .log-line.log-line-card,
.card .log-line,
.log-box .log-line,
.log-viewport .log-line,
.log-line.log-line-py,
.log-line.log-line-card,
.log-line {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.35 !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 2px 0 !important;
  margin: 0 !important;
}

html body .card .log-box .log-line .log-text,
html body .card .log-viewport .log-line .log-text,
html body .card .log-panel .log-line .log-text,
html body .card .log-line .log-text,
html body article.card .log-text,
html body .cards .card .log-text,
.card .log-box .log-line .log-text,
.card .log-viewport .log-line .log-text,
.card .log-panel .log-line .log-text,
.card .log-line .log-text,
.card .log-text,
.log-box .log-line .log-text,
.log-viewport .log-line .log-text,
.log-line .log-text,
.log-text {
  display: block !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-overflow: clip !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

/* keep fixed card shell, only log body scrolls with full wrapped lines */
html body .card .log-box,
html body .card .log-viewport,
html body .card .log-panel .log-box,
html body .card .log-panel .log-viewport,
.card .log-box,
.card .log-viewport,
.card .log-panel .log-box,
.card .log-panel .log-viewport {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* HARD_GATE#860d / #873: 居中表头 textGap 数学平衡
   居中时 gapL≈idxW/2+nameW/2, gapR≈nameW/2+idW/2 → 须 idxW≈idW
   序号=ID=14%，名称24%，协议18%，操作30%；thead/tbody 名称均居中 */
html body #c-desktop .desk-table,
html body .desk-table {
  table-layout: fixed !important;
  width: 100% !important;
}
html body #c-desktop .desk-table thead th,
html body .desk-table thead th {
  text-align: center !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
html body #c-desktop .desk-table col.col-idx,
html body #c-desktop .desk-table thead th.col-idx,
html body #c-desktop .desk-table tbody td.col-idx,
html body #c-desktop .desk-table .col-idx,
html body .desk-table thead th.col-idx,
html body .desk-table tbody td.col-idx {
  width: 14% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}
html body #c-desktop .desk-table col.col-name,
html body #c-desktop .desk-table thead th.col-name,
html body #c-desktop .desk-table tbody td.col-name,
html body #c-desktop .desk-table .col-name,
html body .desk-table thead th.col-name,
html body .desk-table tbody td.col-name {
  width: 24% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 10px 8px !important;
  border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}
html body #c-desktop .desk-table thead th.col-name,
html body .desk-table thead th.col-name,
html body #c-desktop .desk-table tbody td.col-name,
html body .desk-table tbody td.col-name {
  text-align: center !important;
}
html body #c-desktop .desk-table col.col-id,
html body #c-desktop .desk-table thead th.col-id,
html body #c-desktop .desk-table tbody td.col-id,
html body #c-desktop .desk-table .col-id,
html body .desk-table thead th.col-id,
html body .desk-table tbody td.col-id {
  width: 14% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}
html body #c-desktop .desk-table col.col-proto,
html body #c-desktop .desk-table thead th.col-proto,
html body #c-desktop .desk-table tbody td.col-proto,
html body #c-desktop .desk-table .col-proto,
html body .desk-table thead th.col-proto,
html body .desk-table tbody td.col-proto {
  width: 18% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}
html body #c-desktop .desk-table col.col-act,
html body #c-desktop .desk-table thead th.col-act,
html body #c-desktop .desk-table tbody td.col-act,
html body #c-desktop .desk-table .col-act,
html body .desk-table thead th.col-act,
html body .desk-table tbody td.col-act {
  width: 30% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: center !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}

/* HARD_GATE#860b: 空表/新建表单视觉收紧 — 少空白、更贴内容 */
html body #c-desktop .desk-empty,
html body .desk-empty {
  min-height: 96px !important;
  max-height: none !important;
  padding: 18px 16px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
html body #c-desktop .desk-empty p,
html body .desk-empty p,
html body #c-desktop .desk-empty .empty-hint,
html body .desk-empty .empty-hint {
  margin: 0 !important;
  line-height: 1.45 !important;
}
html body #composer-form,
html body .composer #composer-form,
html body form#composer-form {
  gap: 12px !important;
}
html body .composer-block {
  gap: 8px !important;
  padding: 12px 14px 10px !important;
}
html body .composer-row {
  gap: 10px !important;
}
html body .composer-row .field > span {
  margin-bottom: 4px !important;
}
html body .composer-row .field input[type="text"],
html body .composer-row .field input[type="password"],
html body .composer-row .field input[type="number"] {
  height: 34px !important;
}



/* HARD_GATE#869: card-summary 6 KPIs — 3×2 left-aligned columns
   DOM order: 云桌面/用户协议/客户端/模式/间隔/云桌面状态
   → col1 云桌面↔模式 | col2 用户协议↔间隔 | col3 客户端↔云桌面状态 */
html body .timeline article.card .card-summary,
html body .cards .card .card-summary,
html body article.card .card-summary,
.card .card-summary,
#cards .card .card-summary,
.cards .card .card-summary,
.card-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-template-rows: auto auto !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: start !important;
  text-align: left !important;
  gap: 6px 10px !important;
  /* keep #862 pad so content width tracks log panel */
  padding: 0 24px 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html body .timeline article.card .card-summary > *,
html body .cards .card .card-summary > *,
html body article.card .card-summary > *,
.card .card-summary > div,
#cards .card .card-summary > div,
.card-summary > * {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  justify-self: start !important;
  text-align: left !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
  font-size: 12px !important;
}
html body .timeline article.card .card-summary strong,
html body .cards .card .card-summary strong,
html body article.card .card-summary strong,
.card-summary strong {
  text-align: left !important;
  display: inline !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin-left: 2px !important;
  font-weight: 600 !important;
}
/* HARD_GATE#871d-mobile-2col: keep card-summary 2-col on all mobile widths (no 1-col collapse). */
@media (max-width: 720px) {
  html body .timeline article.card .card-summary,
  html body .cards .card .card-summary,
  html body article.card .card-summary,
  .card .card-summary,
  #cards .card .card-summary,
  .card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    font-size: 11px !important;
  }
}
/* was max-width:420px → 1fr; removed so 云桌面/协议/客户端 | 模式/间隔/状态 stay 2-col */

/* #871d-client-token: topbar token button */
#btn-token.is-set {
  border-color: rgba(46, 204, 113, 0.55);
  color: #1e8a4c;
}
#btn-token.is-need {
  border-color: rgba(231, 76, 60, 0.65);
  color: #c0392b;
  font-weight: 600;
}
@media (max-width: 720px) {
  .top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .top-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* #871d-client-token: topbar 3-btn mobile OVERRIDE */
@media (max-width: 720px) {
  .top-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px;
    width: 100%;
  }
  .top-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 13px;
  }
}



/* ===== Access gate (gate12: cool white Lens SaaS — match main console) ===== */
/* When gate is up, block interaction and collapse main console under the overlay */
#app.gate-locked {
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
#access-gate.access-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 28px) clamp(12px, 3vw, 20px);
  background:
    radial-gradient(900px 480px at 12% -6%, rgba(98, 95, 255, 0.07), transparent 55%),
    radial-gradient(700px 380px at 95% 108%, rgba(141, 84, 255, 0.05), transparent 50%),
    var(--bg-page, #fafafa);
  box-sizing: border-box;
}
#access-gate.access-gate.hidden,
#access-gate[hidden] {
  display: none !important;
}
#access-gate .access-gate-card {
  width: min(440px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  background: var(--bg-elev, #ffffff);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 14px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(24, 24, 27, 0.06)), 0 18px 40px rgba(24, 24, 27, 0.06);
  padding: clamp(18px, 3.5vw, 28px) clamp(16px, 3.5vw, 28px) clamp(16px, 3vw, 22px);
  box-sizing: border-box;
  color: var(--text, #18181b);
}
#access-gate .access-gate-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
#access-gate .access-gate-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  object-fit: cover;
  box-shadow: var(--shadow, 0 1px 2px rgba(24, 24, 27, 0.04));
}
#access-gate .access-gate-brand h1,
#access-gate #gate-title {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text, #18181b);
  line-height: 1.3;
}
#access-gate .access-gate-sub,
#access-gate #gate-sub {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--text-dim, #79716b);
  line-height: 1.45;
}
#access-gate .access-gate-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#access-gate .access-gate-panel.hidden {
  display: none !important;
}
#access-gate .access-gate-hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-dim, #79716b);
}
#access-gate .access-gate-note {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-soft, #a8a29e);
}
#access-gate .access-gate-note code {
  font-size: 0.72rem;
  background: var(--bg-soft, #f4f4f5);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-dim, #79716b);
  border: 1px solid var(--border, #e7e5e4);
}
#access-gate .access-gate-err {
  min-height: 0;
  margin: 0;
  font-size: 0.82rem;
  color: var(--danger, #e40014);
  line-height: 1.4;
}
#access-gate .access-gate-err:empty {
  display: none;
}
#access-gate .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
#access-gate .field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim, #79716b);
}
#access-gate .field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
#access-gate .field-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #18181b);
  font-size: 0.95rem;
  box-sizing: border-box;
}
#access-gate .field-row input:focus {
  outline: none;
  border-color: var(--accent, #625fff);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(98, 95, 255, 0.22));
}
#access-gate .field-row .btn-sm,
#access-gate .field-row #gate-setup-show,
#access-gate .field-row #gate-login-show {
  flex: 0 0 auto;
  height: 40px;
  min-width: 88px;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 10px;
  font-size: 0.82rem;
}
/* actions: setup = row of 2 ghosts + primary full width */
#access-gate .access-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
#access-gate .access-gate-actions-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
#access-gate .access-gate-actions-row .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#access-gate .access-gate-actions > .btn-primary,
#access-gate .access-gate-actions #gate-setup-ok,
#access-gate .access-gate-actions #gate-login-ok {
  width: 100%;
  height: 42px;
  flex: none;
  font-weight: 600;
}
/* login panel: single primary full width */
#access-gate .access-gate-actions-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* token modal — same cool white system */
#token-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px) clamp(12px, 3vw, 16px);
  background: rgba(24, 24, 27, 0.40);
  box-sizing: border-box;
}
#token-modal[hidden],
#token-modal.hidden {
  display: none !important;
}
#token-modal .token-modal-card,
#token-modal .modal-card {
  width: min(420px, 100%);
  max-height: min(92vh, 620px);
  overflow: auto;
  background: var(--bg-elev, #ffffff);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 14px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(24, 24, 27, 0.06)), 0 18px 40px rgba(24, 24, 27, 0.10);
  padding: clamp(14px, 2.5vw, 18px) clamp(14px, 3vw, 20px) clamp(12px, 2vw, 16px);
  box-sizing: border-box;
  color: var(--text, #18181b);
}
#token-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#token-modal .modal-head h2 {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  color: var(--text, #18181b);
}
#token-modal .modal-x {
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
}
#token-modal .token-modal-status {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--text-dim, #79716b);
  line-height: 1.4;
}
#token-modal .token-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
#token-modal .token-modal-field > label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim, #79716b);
}
#token-modal .field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
#token-modal .field-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #18181b);
  font-size: 0.95rem;
  box-sizing: border-box;
}
#token-modal .field-row input:focus {
  outline: none;
  border-color: var(--accent, #625fff);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(98, 95, 255, 0.22));
}
#token-modal .field-row .btn-sm {
  flex: 0 0 auto;
  height: 40px;
  min-width: 88px;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 10px;
  font-size: 0.82rem;
}
#token-modal .token-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
#token-modal .token-modal-actions .btn {
  width: 100%;
  min-height: 40px;
  height: auto;
  padding: 8px 10px;
  flex: none;
  white-space: nowrap;
}
#token-modal .token-modal-err {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--danger, #e40014);
  min-height: 0;
}
#token-modal .token-modal-err:empty { display: none; }
#token-modal .token-modal-note {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-soft, #a8a29e);
}

/* desktop: slightly roomier card */
@media (min-width: 900px) {
  #access-gate .access-gate-card,
  #token-modal .token-modal-card,
  #token-modal .modal-card {
    width: min(460px, 100%);
  }
}

/* tablet / phone: keep ghost row side-by-side when possible */
@media (max-width: 480px) {
  #access-gate .access-gate-card,
  #token-modal .token-modal-card,
  #token-modal .modal-card {
    border-radius: 12px;
  }
  #access-gate .field-row .btn-sm,
  #access-gate .field-row #gate-setup-show,
  #access-gate .field-row #gate-login-show,
  #token-modal .field-row .btn-sm {
    min-width: 80px;
    padding: 0 10px;
    font-size: 0.8rem;
  }
}

/* very narrow: stack secondary actions */
@media (max-width: 380px) {
  #access-gate .access-gate-actions-row {
    flex-direction: column;
  }
  #access-gate .access-gate-actions-row .btn {
    width: 100%;
  }
  #access-gate .field-row {
    flex-wrap: wrap;
  }
  #access-gate .field-row .btn-sm,
  #access-gate .field-row #gate-setup-show,
  #access-gate .field-row #gate-login-show {
    width: 100%;
  }
  #token-modal .field-row {
    flex-wrap: nowrap;
  }
  #token-modal .field-row .btn-sm {
    width: auto;
    min-width: 64px;
    flex: 0 0 auto;
  }
  #token-modal .token-modal-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #token-modal .token-modal-actions .btn {
    font-size: 0.86rem;
    padding: 8px 6px;
  }
}