:root {
  color-scheme: light;
  --md-primary: #006a60;
  --md-on-primary: #ffffff;
  --md-primary-container: #9ff2e5;
  --md-on-primary-container: #00201c;
  --md-secondary: #4a635f;
  --md-secondary-container: #cce8e1;
  --md-tertiary: #4b607c;
  --md-tertiary-container: #d3e3ff;
  --md-error: #ba1a1a;
  --md-warning: #8b5000;
  --md-surface: #f8fbf9;
  --md-surface-container-low: #ffffff;
  --md-surface-container: #eef4f1;
  --md-surface-container-high: #e7eeeb;
  --md-on-surface: #191c1b;
  --md-on-surface-variant: #3f4946;
  --md-outline: #6f7976;
  --md-outline-variant: #bec9c5;
  --md-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  --radius-card: 8px;
  --radius-control: 20px;
  --focus-ring: 0 0 0 3px rgba(0, 106, 96, .24);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Roboto, "Noto Sans TC", "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #83d5c8;
  --md-on-primary: #00382f;
  --md-primary-container: #00504a;
  --md-on-primary-container: #9ff2e5;
  --md-secondary: #b1ccc6;
  --md-secondary-container: #334b47;
  --md-tertiary: #b3c5e8;
  --md-tertiary-container: #334764;
  --md-error: #ffb4ab;
  --md-warning: #ffb865;
  --md-surface: #0f1413;
  --md-surface-container-low: #171b1a;
  --md-surface-container: #1c2120;
  --md-surface-container-high: #262b2a;
  --md-on-surface: #dee4e1;
  --md-on-surface-variant: #bec9c5;
  --md-outline: #89938f;
  --md-outline-variant: #3f4946;
  --md-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --focus-ring: 0 0 0 3px rgba(131, 213, 200, .3);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--sans);
  line-height: 1.5;
  letter-spacing: 0;
}

body {
  min-width: 320px;
  margin: 0;
}

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

button {
  border: 0;
}

.icon-sheet {
  display: none;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: currentColor;
}

.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--md-surface-container-low) 94%, transparent);
  border-bottom: 1px solid var(--md-outline-variant);
  backdrop-filter: blur(18px);
}

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

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  border-radius: 12px;
}

.brand h1,
.brand p,
.panel-header h2,
.panel-header p,
.data-table h3,
.status-log h3 {
  margin: 0;
}

.brand h1 {
  overflow: hidden;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand p {
  color: var(--md-on-surface-variant);
  font-size: .875rem;
}

.connection-strip,
.actions,
.button-row,
.terminal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  color: #2a1700;
  background: #ffddb4;
  border: 1px solid #f0bd70;
  border-radius: var(--radius-card);
}

.hidden {
  display: none !important;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.status-card {
  min-height: 112px;
  padding: 16px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: var(--md-shadow);
}

.status-label {
  display: block;
  color: var(--md-on-surface-variant);
  font-size: .78rem;
  font-weight: 650;
  text-transform: uppercase;
}

.status-card strong {
  display: block;
  min-height: 32px;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 1.15rem;
  line-height: 1.35;
}

.status-card small {
  display: block;
  margin-top: 6px;
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.summary-card,
.guide-card,
.helper-note {
  min-width: 0;
  padding: 14px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
}

.summary-card span {
  display: block;
  color: var(--md-on-surface-variant);
  font-size: .78rem;
  font-weight: 650;
  text-transform: uppercase;
}

.summary-card strong {
  display: block;
  min-height: 30px;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  line-height: 1.35;
}

.summary-card small,
.guide-card p,
.helper-note span {
  display: block;
  margin-top: 6px;
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
  font-size: .9rem;
}

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

.guide-card strong,
.helper-note strong {
  font-weight: 650;
}

.helper-note,
.profile-select {
  margin-bottom: 16px;
}

.panel-section {
  margin-top: 18px;
  padding: 18px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
}

.panel-section > h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.panel-section > p {
  max-width: 780px;
  margin: 6px 0 16px;
  color: var(--md-on-surface-variant);
  font-size: .92rem;
}

.panel-section .data-table,
.panel-section .field input,
.panel-section .field select {
  background: var(--md-surface-container-low);
}

.panel-section .data-table.wide {
  margin-top: 16px;
}

.panel-section .profile-select {
  max-width: 460px;
}

.advanced-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--md-outline-variant);
}

.advanced-block summary {
  color: var(--md-primary);
  cursor: pointer;
  font-weight: 650;
}

.advanced-block summary:hover {
  text-decoration: underline;
}

.advanced-block[open] summary {
  margin-bottom: 10px;
}

.advanced-block > p {
  max-width: 780px;
  margin: 0 0 12px;
  color: var(--md-on-surface-variant);
  font-size: .9rem;
}

.advanced-block .form-grid {
  margin-bottom: 4px;
}

.hint-list {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--md-on-surface-variant);
  font-size: .9rem;
}

.hint-list li {
  margin-bottom: 4px;
}

.hint-list li:last-child {
  margin-bottom: 0;
}

code {
  padding: 1px 5px;
  background: var(--md-surface-container-high);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .86em;
}

.field > small {
  color: var(--md-on-surface-variant);
  font-size: .78rem;
  font-weight: 400;
}

.button.danger {
  color: var(--md-error);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--md-error) 45%, var(--md-outline-variant));
}

.button.danger:not(:disabled):hover {
  background: rgba(186, 26, 26, .06);
  filter: none;
}

.workspace {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(360px, 440px);
  gap: 18px;
  align-items: start;
}

body.terminal-collapsed .workspace {
  grid-template-columns: 180px minmax(0, 1fr);
}

.side-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
  padding: 8px;
  background: var(--md-surface-container);
  border-radius: var(--radius-card);
  border: 1px solid var(--md-outline-variant);
}

.nav-item {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: var(--md-on-surface-variant);
  background: transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  text-align: left;
}

.nav-item:hover {
  background: rgba(0, 106, 96, .08);
}

.nav-item.active {
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  font-weight: 650;
}

.tab-panels {
  min-width: 0;
  container-type: inline-size;
}

.mobile-terminal-nav {
  display: none;
}

.tab-panel {
  display: none;
  min-height: 620px;
  padding: 22px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: var(--md-shadow);
}

.tab-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.panel-header h2 {
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
}

.panel-header p {
  max-width: 760px;
  margin-top: 4px;
  color: var(--md-on-surface-variant);
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 650;
  white-space: nowrap;
}

.button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.button:focus-visible,
.nav-item:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.button.filled {
  color: var(--md-on-primary);
  background: var(--md-primary);
}

.button.tonal {
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
}

.button.outlined {
  color: var(--md-primary);
  background: transparent;
  border: 1px solid var(--md-outline);
}

.button.text {
  color: var(--md-primary);
  background: transparent;
}

.button:not(:disabled):hover {
  filter: brightness(.96);
}

.button.is-busy {
  cursor: progress;
  opacity: .55;
  pointer-events: none;
}

.button.icon-only {
  width: 40px;
  padding: 0;
}

html[data-theme="dark"] .button:not(:disabled):hover {
  filter: brightness(1.12);
}

html[data-theme="dark"] .button.danger:not(:disabled):hover {
  background: rgba(255, 180, 171, .08);
  filter: none;
}

html[data-theme="dark"] .nav-item:hover {
  background: rgba(131, 213, 200, .1);
}

html[data-theme="dark"] .notice {
  color: #ffddb4;
  background: #4a2c00;
  border-color: #6b4300;
}

html[data-theme="dark"] .snackbar {
  color: #1a1c1c;
  background: #dee4e1;
}

html[data-theme="dark"] .ok {
  color: #7adba4;
}

.field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.field span {
  color: var(--md-on-surface-variant);
  font-size: .78rem;
  font-weight: 650;
}

.field.compact {
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
}

.field.compact select {
  width: 116px;
  min-height: 40px;
}

.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--md-on-surface);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline);
  border-radius: 8px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--md-on-surface-variant) 68%, var(--md-surface));
}

.field textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 13px;
  color: var(--md-on-surface);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline);
  border-radius: 8px;
  resize: vertical;
}

textarea:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

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

.data-table,
.status-log {
  min-width: 0;
  padding: 16px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
}

.data-table.wide {
  margin-top: 18px;
}

.data-table h3,
.status-log h3 {
  font-size: 1rem;
  font-weight: 650;
}

.data-table dl {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.data-table dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  min-height: 32px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--md-outline-variant);
}

.data-table dt {
  color: var(--md-on-surface-variant);
  font-size: .84rem;
  font-weight: 650;
}

.data-table dt small,
.status-log h3 small {
  display: block;
  color: color-mix(in srgb, var(--md-on-surface-variant) 75%, var(--md-surface));
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
}

.status-log h3 small {
  display: inline;
  margin-left: 8px;
}

.data-table dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: .9rem;
}

pre {
  overflow: auto;
  margin: 12px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: .86rem;
}

.status-log {
  margin-top: 14px;
}

.status-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.button-row {
  margin-top: 16px;
}

.search-field {
  width: min(320px, 100%);
}

.command-library {
  display: grid;
  gap: 12px;
}

.command-group {
  padding: 14px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
}

.command-group h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

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

.command-item {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 10px 12px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
}

.command-text {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-weight: 650;
}

.risk-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  color: var(--md-error);
  border: 1px solid color-mix(in srgb, var(--md-error) 45%, var(--md-outline-variant));
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 650;
  vertical-align: 2px;
  white-space: nowrap;
}

.command-desc {
  min-width: 0;
  color: var(--md-on-surface-variant);
  font-size: .9rem;
}

.command-actions {
  display: flex;
  gap: 6px;
}

.command-actions .button {
  width: 40px;
  min-height: 40px;
  padding: 0;
}

.terminal-dock {
  position: sticky;
  top: 96px;
  display: flex;
  width: 100%;
  height: calc(100vh - 120px);
  flex-direction: column;
  padding: 16px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: var(--md-shadow);
}

body.terminal-collapsed .terminal-dock {
  display: none;
}

.terminal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.terminal-header h2,
.terminal-header p {
  margin: 0;
}

.terminal-header h2 {
  font-size: 1rem;
  font-weight: 650;
}

.terminal-header p {
  color: var(--md-on-surface-variant);
  font-size: .86rem;
}

.terminal-actions {
  margin-bottom: 10px;
}

.terminal {
  min-height: 260px;
  flex: 1;
  padding: 14px;
  color: #e7f7f3;
  background: #111716;
  border-radius: var(--radius-card);
  border: 1px solid #263735;
}

.terminal-form {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.terminal-input {
  flex: 1;
}

.snackbar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 16px;
  color: #ffffff;
  background: #283331;
  border-radius: var(--radius-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .16s ease, transform .16s ease;
}

.snackbar.show {
  opacity: 1;
  transform: translateY(0);
}

.muted {
  color: var(--md-on-surface-variant);
}

.ok {
  color: #006d3f;
}

.warn {
  color: var(--md-warning);
}

.bad {
  color: var(--md-error);
}

.sms-content {
  margin-top: 14px;
}

#smsCounter.warn {
  color: var(--md-error);
  font-weight: 650;
}

.sms-list {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.sms-card {
  padding: 12px 14px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
}

.sms-card.unread {
  border-left: 3px solid var(--md-primary);
}

.sms-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sms-meta strong {
  overflow-wrap: anywhere;
}

.sms-meta small {
  color: var(--md-on-surface-variant);
}

.sms-meta .button {
  min-height: 32px;
  margin-left: auto;
  padding: 0 10px;
}

.sms-body {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.neighbor-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.neighbor-card {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
}

.neighbor-card strong {
  overflow-wrap: anywhere;
}

.neighbor-card small {
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .status-overview {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

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

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

@media (max-width: 860px) {
  .top-app-bar {
    position: static;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .connection-strip {
    justify-content: flex-start;
  }

  .app-shell {
    padding: 14px;
  }

  .status-overview,
  .summary-grid,
  .guide-grid,
  .data-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  body.terminal-collapsed .workspace {
    grid-template-columns: 1fr;
  }

  .side-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    border-radius: var(--radius-card);
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .mobile-terminal-nav {
    display: flex;
  }

  .desktop-terminal-toggle {
    display: none;
  }

  .panel-header {
    flex-direction: column;
  }

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

  .command-actions {
    justify-content: flex-start;
  }

  .terminal-form {
    flex-direction: column;
  }

  .terminal-dock {
    position: static;
    display: none;
    width: 100%;
    height: auto;
    padding: 18px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: var(--md-shadow);
  }

  .terminal-dock.active-mobile {
    display: flex !important;
  }

  .terminal {
    height: 470px;
    flex: none;
  }

  .tab-panels.terminal-mobile-active {
    display: none;
  }
}

@media (max-width: 560px) {
  .brand h1 {
    white-space: normal;
  }

  .connection-strip .button,
  .button-row .button,
  .actions .button {
    width: 100%;
  }

  .field.compact select {
    width: 100%;
  }

  .data-table dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 1320px) and (min-width: 861px) {
  .workspace {
    grid-template-columns: 160px minmax(0, 1fr) minmax(320px, 360px);
  }

  body.terminal-collapsed .workspace {
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

/* 依內容欄實際寬度斷行（終端機開啟時中間欄會變窄，只看視窗寬度會擠爆） */
@container (max-width: 800px) {
  .data-grid,
  .guide-grid {
    grid-template-columns: 1fr;
  }

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

@container (max-width: 520px) {
  .summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

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

  .command-actions {
    justify-content: flex-start;
  }

  .data-table dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .panel-header {
    flex-direction: column;
  }
}