Person_iCloud/app.wxss

page {
  --page-bg: #f6f8fb;
  --text-main: #111827;
  --accent: #0f8f87;
  --accent-dark: #08746e;
  --accent-soft: #e8f6f5;
  --danger: #c2410c;
  --shadow-soft: 0 10rpx 28rpx rgba(15, 23, 42, 0.05);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text-main);
}

.scrollarea {
  flex: 1;
  overflow-y: auto;
}

.scrollarea--subpage .page-shell {
  padding-top: 14rpx;
}

.scrollarea--generic .page-shell {
  padding-top: 0;
}

.page-shell {
  min-height: 100%;
  padding: 24rpx 24rpx 52rpx;
  box-sizing: border-box;
}

.theme-dark {
  --page-bg: #111827;
  --text-main: #e5e7eb;
  --accent: #14b8a6;
  --accent-dark: #5eead4;
  --accent-soft: #123d3b;
  --danger: #fb923c;
  --shadow-soft: 0 10rpx 28rpx rgba(0, 0, 0, 0.22);
  background: var(--page-bg);
  color: var(--text-main);
}

.page-toast {
  position: fixed;
  z-index: 70;
  top: calc(env(safe-area-inset-top) + 108rpx);
  left: 24rpx;
  right: 24rpx;
  min-height: 68rpx;
  padding: 16rpx 22rpx;
  border: 1rpx solid #d9edeb;
  border-radius: 14rpx;
  background: rgba(244, 251, 250, 0.98);
  color: var(--accent-dark);
  box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.16);
  font-size: 25rpx;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  word-break: break-all;
  box-sizing: border-box;
}

.page-toast--error {
  border-color: #ffd4bf;
  background: rgba(255, 247, 237, 0.98);
  color: var(--danger);
}

.page-toast.theme-dark {
  border-color: #174e49;
  background: rgba(18, 61, 59, 0.98);
  color: #99f6e4;
  box-shadow: 0 12rpx 34rpx rgba(0, 0, 0, 0.32);
}

.page-toast--error.theme-dark {
  border-color: #7c2d12;
  background: rgba(67, 33, 20, 0.98);
  color: #fed7aa;
}

.theme-dark .panel,
.theme-dark .connected-panel,
.theme-dark .device-card,
.theme-dark .empty-state {
  border-color: #263241;
  background: #17202c;
  box-shadow: var(--shadow-soft);
}

.theme-dark .panel-title,
.theme-dark .subpage-page-title,
.theme-dark .connected-name,
.theme-dark .device-name,
.theme-dark .empty-title,
.theme-dark .param-name,
.theme-dark .picker-value,
.theme-dark .generated-title,
.theme-dark .generated-value,
.theme-dark .log-payload,
.theme-dark .control-name,
.theme-dark .upgrade-value {
  color: #e5e7eb;
}

.theme-dark .meta-label,
.theme-dark .meta-value,
.theme-dark .device-id,
.theme-dark .device-service,
.theme-dark .protocol-label,
.theme-dark .empty-text,
.theme-dark .param-meta,
.theme-dark .log-time,
.theme-dark .traffic-badge,
.theme-dark .upgrade-label {
  color: #94a3b8;
}

.theme-dark .panel-action-button,
.theme-dark .protocol-input,
.theme-dark .value-input,
.theme-dark .hex-input,
.theme-dark .control-button,
.theme-dark .subpage-back {
  border-color: #334155;
  background: #111827;
  color: #cbd5e1;
  box-shadow: none;
}

.theme-dark .protocol-picker {
  background: transparent;
  border-color: transparent;
  color: #cbd5e1;
}

.theme-dark .subpage-back-icon {
  border-color: #94a3b8;
}

.theme-dark .entry-chevron {
  border-color: #64748b;
}

.theme-dark .control-button {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #e5e7eb;
}

.theme-dark .panel-action-button {
  background: #17202c;
  color: #99f6e4;
}

.theme-dark .panel-action-button.is-active {
  border-color: #5eead4;
  background: #0f766e;
  color: #ecfeff;
}

.theme-dark .value-input:focus,
.theme-dark .protocol-input:focus,
.theme-dark .hex-input:focus {
  border-color: #2dd4bf;
  background: #102f2e;
}

.theme-dark .rssi {
  background: #1f2937;
  color: #cbd5e1;
}

.theme-dark .connect-state {
  background: #123d3b;
  color: #5eead4;
}

.theme-dark .connect-state.connected,
.theme-dark .device-card--connected {
  border-color: #0f766e;
  background: #102f2e;
  color: #99f6e4;
}

.theme-dark .meta-item,
.theme-dark .protocol-row,
.theme-dark .upgrade-row,
.theme-dark .param-row,
.theme-dark .params-section-title,
.theme-dark .protection-field,
.theme-dark .log-scroll,
.theme-dark .log-row {
  border-color: #263241;
}

.theme-dark .params-section-title {
  background: #111827;
  color: #94a3b8;
}

.theme-dark .driver-summary-chip,
.theme-dark .driver-summary-checksum,
.theme-dark .driver-summary-model {
  color: #e5e7eb;
}

.theme-dark .device-filter {
  border-color: #334155;
  background: #111827;
}

.theme-dark .device-filter-item {
  color: #94a3b8;
}

.theme-dark .device-filter-item.is-active {
  background: #1f2937;
  color: #5eead4;
  box-shadow: none;
}

.theme-dark .upgrade-status,
.theme-dark .generated-frame {
  border-color: #174e49;
  background: #111827;
  color: #94a3b8;
}

.theme-dark .generic-dialog {
  border-color: #263241;
  background: #17202c;
  box-shadow: 0 18rpx 44rpx rgba(0, 0, 0, 0.38);
}

.theme-dark .generic-dialog-header,
.theme-dark .generic-draft-actions,
.theme-dark .generic-info-row {
  border-color: #263241;
}

.theme-dark .generic-dialog-title,
.theme-dark .generic-info-value,
.theme-dark .generic-register-name,
.theme-dark .crc-file-name {
  color: #e5e7eb;
}

.theme-dark .generic-dialog-close,
.theme-dark .generic-info-label {
  color: #94a3b8;
}

.theme-dark .generic-value-input,
.theme-dark .crc-data-input {
  border-color: #334155;
  background: #111827;
  color: #e5e7eb;
}

.theme-dark .generic-picker-value {
  color: #e5e7eb;
}

.theme-dark .generic-register-row,
.theme-dark .generic-config-row {
  border-color: #263241;
}

.theme-dark .generic-readonly-value,
.theme-dark .generic-register-unit {
  color: #5eead4;
}

.theme-dark .value-input--dirty {
  border-color: #f59e0b;
  background: #2b1d0e;
  color: #fed7aa;
}

.theme-dark .upgrade-status--ready {
  background: #123d3b;
  color: #5eead4;
}

.panel {
  margin-top: 24rpx;
  border: 1rpx solid #e6ebf2;
  border-radius: 18rpx;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  overflow: hidden;
}

.panel:first-child {
  margin-top: 0;
}

.panel-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14rpx;
  padding: 24rpx 24rpx 8rpx;
}

.subpage-fixed-header {
  flex: none;
  padding: 16rpx 24rpx 12rpx;
  background: var(--page-bg);
  box-sizing: border-box;
}

.subpage-fixed-header--generic {
  padding: 8rpx 24rpx 4rpx;
}

.subpage-fixed-header--generic .subpage-page-header {
  min-height: 52rpx;
}

.subpage-page-header {
  display: flex;
  align-items: center;
  gap: 14rpx;
  min-height: 68rpx;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.subpage-page-title {
  min-width: 0;
  flex: 1;
  color: #111827;
  font-size: 36rpx;
  line-height: 1.35;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subpage-actions {
  margin-left: 0;
}

.param-entry-panel .panel-title {
  flex: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.subpage-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  border: 1rpx solid #d8e2ea;
  border-radius: 12rpx;
  background: #f8fafc;
  box-sizing: border-box;
}

.subpage-back:active,
.param-entry-panel:active {
  opacity: 0.72;
}

.subpage-back-icon {
  width: 16rpx;
  height: 16rpx;
  border-left: 4rpx solid #64748b;
  border-bottom: 4rpx solid #64748b;
  transform: rotate(45deg);
  margin-left: 6rpx;
  box-sizing: border-box;
}

.param-entry-panel .panel-header {
  padding-bottom: 24rpx;
}

.driver-summary-panel {
  padding: 18rpx 24rpx 16rpx;
  box-sizing: border-box;
}

.driver-summary-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.driver-summary-row--top {
  justify-content: space-between;
}

.driver-summary-row--model {
  margin-top: 10rpx;
}

.driver-summary-chip,
.driver-summary-checksum,
.driver-summary-model {
  min-width: 0;
  color: #111827;
  line-height: 1.35;
  font-weight: 800;
  word-break: break-all;
}

.driver-summary-chip {
  flex: 1;
  text-align: left;
  font-size: 28rpx;
}

.driver-summary-checksum {
  flex: none;
  text-align: right;
  font-size: 24rpx;
  font-family: Menlo, Monaco, Consolas, monospace;
}

.driver-summary-model {
  flex: 1;
  font-size: 26rpx;
}

.entry-chevron {
  flex: none;
  width: 18rpx;
  height: 18rpx;
  border-right: 4rpx solid #94a3b8;
  border-bottom: 4rpx solid #94a3b8;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.params-section-title {
  padding: 18rpx 24rpx;
  border-bottom: 1rpx solid #edf2f7;
  background: #f8fafc;
  color: #475569;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
  box-sizing: border-box;
}

.params-section-title + .param-row {
  border-top: 0;
}

.protection-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.params-section-title + .protection-field-row .protection-field {
  border-top: 0;
}

.protection-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  min-height: 96rpx;
  padding: 14rpx 0;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.protection-field--switch {
  flex: 1 1 240rpx;
  min-width: 240rpx;
}

.protection-field--input {
  flex: 1 1 100%;
  min-width: 100%;
}

.protection-field-main {
  min-width: 0;
  flex: 1;
}

.outside-header {
  padding: 0;
  margin-bottom: 16rpx;
}

.panel-icon {
  flex: none;
  position: relative;
  width: 38rpx;
  height: 38rpx;
  border-radius: 12rpx;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--icon-start, #129a91) 0%, var(--icon-end, #08746e) 100%);
  border: 1rpx solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8rpx 16rpx rgba(15, 143, 135, 0.18);
  overflow: hidden;
}

.panel-title {
  min-width: 0;
  color: #111827;
  font-size: 31rpx;
  line-height: 1.35;
  font-weight: 800;
  word-break: break-all;
}

.panel-header--with-actions {
  padding-right: 18rpx;
}

.panel-heading-toggle {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.panel-heading-toggle:active {
  opacity: 0.72;
}

.panel-header--with-actions .panel-title {
  flex: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.collapse-indicator {
  flex: none;
  position: relative;
  width: 28rpx;
  height: 28rpx;
}

.collapse-indicator::before {
  content: "";
  position: absolute;
  left: 8rpx;
  top: 6rpx;
  width: 10rpx;
  height: 10rpx;
  border-right: 3rpx solid #94a3b8;
  border-bottom: 3rpx solid #94a3b8;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.16s ease;
}

.collapse-toggle.is-collapsed .collapse-indicator::before {
  top: 9rpx;
  transform: rotate(-45deg);
}

.collapse-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34rpx;
  height: 50rpx;
}

.collapse-toggle:active {
  opacity: 0.72;
}

.panel--collapsed .panel-header {
  padding-bottom: 24rpx;
}

.panel-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-left: auto;
}

.panel-actions--three {
  gap: 6rpx;
}

.panel-actions--status {
  gap: 8rpx;
}

.panel-action-button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86rpx;
  min-width: 0;
  height: 50rpx;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1rpx solid #b9d8d1;
  border-radius: 10rpx;
  background: #ffffff;
  color: var(--accent-dark);
  font-size: 22rpx;
  line-height: 1.3;
  font-weight: 800;
  box-sizing: border-box;
}

.panel-action-button::after {
  border: 0;
}

.panel-action-button:active {
  opacity: 0.72;
}

.panel-action-button.is-disabled {
  background: #eef1f5;
  color: #94a3b8;
  box-shadow: none;
}

.panel-action-button.is-active {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #ffffff;
}

.theme-dark .panel-action-button.is-disabled {
  border-color: #263241;
  background: #1f2937;
  background-color: #1f2937;
  color: #64748b;
}

.theme-dark button[disabled].control-button,
.theme-dark button.control-button[disabled] {
  border-color: #263241;
  background: #1f2937;
  background-color: #1f2937;
  background-image: none;
  color: #64748b;
  box-shadow: none;
}

.theme-dark button[disabled].control-button .control-name,
.theme-dark button.control-button[disabled] .control-name {
  color: #64748b;
}

.panel-icon::before,
.panel-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.panel-icon::before {
  left: 7rpx;
  top: 7rpx;
  width: 24rpx;
  height: 24rpx;
  background-image: var(--icon-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.panel-icon::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
}

.icon-chip {
  --icon-start: #5a86a6;
  --icon-end: #2f5e7c;
  --icon-image: url("/assets/icons/chip-white.png");
}

.icon-control {
  --icon-start: #18a58b;
  --icon-end: #0e746f;
  --icon-image: url("/assets/icons/control-white.png");
}

.icon-bluetooth {
  --icon-start: #16a8cf;
  --icon-end: #0f7a9a;
  --icon-image: url("/assets/icons/bluetooth-connected-white.png");
}

.icon-radar {
  --icon-start: #23b0d7;
  --icon-end: #137e8f;
  --icon-image: url("/assets/icons/radar-white.png");
}

.icon-terminal {
  --icon-start: #63758f;
  --icon-end: #324056;
  --icon-image: url("/assets/icons/terminal-white.png");
}

.icon-send {
  --icon-start: #39bdf0;
  --icon-end: #1684c5;
  --icon-image: url("/assets/icons/send-white.png");
}

.icon-history {
  --icon-start: #64748b;
  --icon-end: #475569;
  --icon-image: url("/assets/icons/history-white.png");
}

.icon-status {
  --icon-start: #14a79a;
  --icon-end: #2563eb;
  --icon-image: url("/assets/icons/status-white.png");
}

.icon-bars {
  --icon-start: #148f85;
  --icon-end: #105f8b;
  --icon-image: url("/assets/icons/estimator-white.png");
}

.icon-tune {
  --icon-start: #17a59f;
  --icon-end: #0d7280;
  --icon-image: url("/assets/icons/sliders-white.png");
}

.icon-speed {
  --icon-start: #f7a623;
  --icon-end: #d97f0c;
  --icon-image: url("/assets/icons/speed-white.png");
}

.icon-target {
  --icon-start: #21a37e;
  --icon-end: #0f766e;
  --icon-image: url("/assets/icons/target-white.png");
}

.icon-shield-check {
  --icon-start: #16a34a;
  --icon-end: #0f766e;
  --icon-image: url("/assets/icons/shield-check-white.png");
}

.icon-crc {
  --icon-start: #2563eb;
  --icon-end: #0f766e;
  --icon-image: url("/assets/icons/hash-white.png");
}

.icon-filter {
  --icon-start: #f59e0b;
  --icon-end: #d97706;
  --icon-image: url("/assets/icons/funnel-white.png");
}

.icon-reactance {
  --icon-start: #0ea5e9;
  --icon-end: #0f766e;
  --icon-image: url("/assets/icons/audio-waveform-white.png");
}

.icon-smd {
  --icon-start: #64748b;
  --icon-end: #334155;
  --icon-image: url("/assets/icons/microchip-white.png");
}

.icon-snow {
  --icon-start: #38bdf8;
  --icon-end: #2563eb;
  --icon-image: url("/assets/icons/snowflake-white.png");
}

.icon-three-phase {
  --icon-start: #7c3aed;
  --icon-end: #2563eb;
  --icon-image: url("/assets/icons/zap-white.png");
}

.param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  min-height: 96rpx;
  padding: 0 24rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.panel-header + .param-row,
.panel-header + view .param-row:first-child {
  border-top: 0;
}

.param-row:first-child {
  border-top: 0;
}

.input-row {
  min-height: 106rpx;
}

.param-main {
  min-width: 0;
  flex: 1;
}

.param-name {
  min-width: 0;
  color: #111827;
  font-size: 28rpx;
  line-height: 1.35;
  font-weight: 700;
  word-break: break-all;
}

.param-meta {
  margin-top: 7rpx;
  color: #6b7280;
  font-size: 22rpx;
  line-height: 1.35;
  word-break: break-all;
}

.param-meta--dirty {
  color: #d97706;
  font-weight: 800;
}

.param-value {
  flex: none;
  max-width: 320rpx;
  color: #0f8f87;
  font-size: 30rpx;
  line-height: 1.35;
  font-weight: 800;
  text-align: right;
  word-break: break-all;
}

.input-wrap {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.value-input {
  width: 300rpx;
  height: 70rpx;
  padding: 0 18rpx;
  border: 1rpx solid #e7edf3;
  border-radius: 10rpx;
  background: #fafbfd;
  color: #111827;
  font-size: 28rpx;
  line-height: 70rpx;
  text-align: right;
  box-sizing: border-box;
}

.value-input--with-unit {
  width: 300rpx;
}

.value-input:focus {
  border-color: #0f8f87;
  background: #f4fbfa;
}

.value-input--dirty {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #92400e;
}

.generic-dialog-mask {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.28);
  box-sizing: border-box;
}

.generic-dialog {
  width: 100%;
  max-height: 84vh;
  overflow: hidden;
  border: 1rpx solid #e5edf4;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0 18rpx 48rpx rgba(15, 23, 42, 0.2);
  box-sizing: border-box;
}

.generic-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.generic-dialog-title {
  color: #111827;
  font-size: 30rpx;
  line-height: 1.3;
  font-weight: 900;
}

.generic-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  color: #64748b;
  font-size: 38rpx;
  line-height: 1;
  font-weight: 500;
}

.generic-dialog-body {
  max-height: 62vh;
  overflow-y: auto;
}

.generic-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  min-height: 96rpx;
  padding: 14rpx 24rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.generic-config-row:first-of-type {
  border-top: 0;
}

.generic-picker-value {
  width: 300rpx;
  min-width: 300rpx;
  max-width: 300rpx;
  height: 70rpx;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 28rpx;
  line-height: 70rpx;
  font-weight: 800;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.generic-value-input {
  width: 300rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
}

.generic-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12rpx;
  padding: 18rpx 24rpx 22rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.generic-empty-state {
  margin-top: 8rpx;
}

.generic-info-stack {
  padding: 0 24rpx;
  box-sizing: border-box;
}

.generic-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  min-height: 88rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.generic-info-row:first-child {
  border-top: 0;
}

.generic-info-label {
  flex: none;
  width: 116rpx;
  color: #64748b;
  font-size: 23rpx;
  line-height: 1.3;
  font-weight: 800;
}

.generic-info-value {
  min-width: 0;
  flex: 1;
  color: #111827;
  font-size: 26rpx;
  line-height: 1.35;
  font-weight: 800;
  text-align: right;
  word-break: break-all;
}

.panel-action-button--icon {
  min-width: 58rpx;
  width: 58rpx;
  padding: 0;
  font-size: 34rpx;
  line-height: 50rpx;
}

.generic-group-shell {
  position: relative;
  margin-top: 12rpx;
}

.generic-group-shell:first-child {
  margin-top: 0;
}

.generic-delete-action {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76rpx;
  height: 100%;
  min-height: 74rpx;
  border-radius: 18rpx 0 0 18rpx;
  background: #dc2626;
  color: #ffffff;
  font-size: 44rpx;
  line-height: 1;
  font-weight: 900;
  box-sizing: border-box;
}

.generic-group-panel {
  position: relative;
  z-index: 1;
  margin-top: 0;
  overflow: hidden;
  transition: transform 0.16s ease;
}

.generic-group-shell.is-delete-visible .generic-group-panel {
  transform: translateX(76rpx);
}

.generic-group-title-wrap {
  min-width: 0;
  flex: 1;
}

.generic-group-panel .panel-header,
.generic-group-panel.panel--collapsed .panel-header {
  padding: 14rpx 18rpx;
}

.generic-group-panel .panel-icon {
  width: 34rpx;
  height: 34rpx;
  border-radius: 10rpx;
}

.generic-group-title-wrap .panel-title {
  font-size: 27rpx;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generic-group-meta {
  margin-top: 2rpx;
  font-size: 20rpx;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.generic-group-actions {
  flex: none;
  gap: 6rpx;
}

.generic-group-actions .panel-action-button {
  width: 76rpx;
  height: 46rpx;
  font-size: 21rpx;
  border-radius: 9rpx;
}

.generic-group-actions .entry-chevron {
  margin-left: 4rpx;
  transform: rotate(-45deg);
}

.generic-group-actions .entry-chevron.is-expanded {
  transform: rotate(45deg);
}

.generic-register-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
  min-height: 112rpx;
  padding: 12rpx 18rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.generic-register-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.generic-register-name {
  color: #111827;
  font-size: 26rpx;
  line-height: 1.35;
  font-weight: 800;
  word-break: break-all;
}

.generic-register-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14rpx;
  margin-top: 6rpx;
  color: #64748b;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 21rpx;
  line-height: 1.35;
  font-weight: 700;
}

.generic-register-input-wrap {
  flex: none;
  position: relative;
  width: 210rpx;
  min-width: 168rpx;
  max-width: 40%;
  box-sizing: border-box;
}

.generic-register-value {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.generic-register-unit {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #0f8f87;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 900;
}

.generic-register-input-wrap--unit .generic-register-value {
  padding-right: 64rpx;
}

.generic-readonly-value {
  width: 210rpx;
  max-width: 40%;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 25rpx;
}

.crc-picker-value {
  min-width: 300rpx;
  max-width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crc-algorithm-panel {
  overflow: hidden;
}

.crc-algorithm-panel > .param-row {
  min-height: 92rpx;
}

.crc-algorithm-picker {
  min-width: 0;
  flex: 1;
  display: block;
  width: 100%;
}

.crc-algorithm-picker-content {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
}

.crc-algorithm-picker-content .param-main {
  flex: 1;
  min-width: 0;
}

.crc-algorithm-panel .crc-picker-value {
  flex: none;
  width: auto;
  min-width: 0;
  max-width: 430rpx;
  font-size: 24rpx;
}

.crc-data-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
  min-height: 76rpx;
  padding: 12rpx 18rpx 12rpx 24rpx;
}

.crc-data-title {
  min-width: 0;
  flex: 1;
  text-align: left;
}

.crc-data-header-actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6rpx;
}

.crc-data-type-picker {
  flex: none;
  margin-right: 8rpx;
}

.crc-data-type-value {
  width: 108rpx;
  height: 50rpx;
  color: #111827;
  font-size: 22rpx;
  line-height: 50rpx;
  font-weight: 900;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crc-data-header-actions .panel-action-button {
  width: 78rpx;
}

.theme-dark .crc-data-type-value {
  color: #e5e7eb;
}

.crc-algorithm-fields {
  border-top: 1rpx solid #edf2f7;
}

.theme-dark .crc-algorithm-fields {
  border-color: #263241;
}

.crc-config-input {
  width: 300rpx;
  font-family: Menlo, Monaco, Consolas, monospace;
}

.crc-switch-row {
  display: flex;
  gap: 12rpx;
  padding: 0 24rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.theme-dark .crc-switch-row {
  border-color: #263241;
}

.crc-switch-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
  min-height: 96rpx;
}

.crc-data-wrap {
  padding: 18rpx 24rpx 22rpx;
  box-sizing: border-box;
}

.crc-data-input {
  width: 100%;
  min-height: 230rpx;
  padding: 18rpx;
  border: 1rpx solid #e7edf3;
  border-radius: 12rpx;
  background: #fafbfd;
  color: #111827;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 24rpx;
  line-height: 1.45;
  box-sizing: border-box;
}

.crc-file-name,
.crc-error-value {
  min-width: 0;
  max-width: 430rpx;
  text-align: right;
  word-break: break-all;
}

.crc-file-name {
  color: #111827;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
}

.crc-result-bin-line {
  display: block;
  white-space: nowrap;
}

.crc-error-value {
  color: var(--danger);
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
}

.filter-input-wrap {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
}

.filter-value-input {
  width: 210rpx;
  min-width: 0;
  max-width: 210rpx;
}

.filter-value-input--computed {
  border-color: #9bd6cf;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 900;
}

.filter-unit-picker {
  flex: none;
  width: 92rpx;
}

.filter-unit-value {
  width: 92rpx;
  height: 70rpx;
  color: #111827;
  font-size: 25rpx;
  line-height: 70rpx;
  font-weight: 900;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

.filter-section-title,
.filter-diagram-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.filter-section-title-text {
  min-width: 0;
  flex: 1;
}

.filter-mode-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.filter-mode-button {
  flex: none;
  min-width: 78rpx;
  height: 46rpx;
  padding: 0 16rpx;
  border: 1rpx solid #b9d8d1;
  border-radius: 10rpx;
  background: #ffffff;
  color: var(--accent-dark);
  font-size: 22rpx;
  line-height: 44rpx;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
}

.filter-mode-button:active {
  opacity: 0.72;
}

.filter-error-inline {
  padding: 0 24rpx 18rpx;
  color: var(--danger);
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
  text-align: right;
  box-sizing: border-box;
}

.filter-diagram-mode {
  min-width: 0;
  flex: none;
  max-width: 260rpx;
  color: #0f8f87;
  font-size: 23rpx;
  line-height: 1.35;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-diagram {
  position: relative;
  min-height: 280rpx;
  padding: 38rpx 8rpx 34rpx;
  box-sizing: border-box;
}

.filter-diagram-row {
  display: flex;
  align-items: center;
  width: 66%;
  margin: 0 auto;
}

.filter-diagram-row--top {
  height: 112rpx;
}

.filter-diagram-port {
  flex: none;
  width: 48rpx;
  color: #475569;
  font-size: 22rpx;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
}

.filter-diagram-wire,
.filter-diagram-branch-wire,
.filter-diagram-ground-line,
.filter-diagram-ground-stem {
  background: #94a3b8;
}

.filter-diagram-wire {
  flex: 1;
  min-width: 8rpx;
  height: 3rpx;
  border-radius: 999rpx;
}

.filter-diagram-component {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74rpx;
  height: 58rpx;
  color: #0f766e;
  box-sizing: border-box;
}

.filter-diagram-component--r {
  color: #c2410c;
}

.filter-diagram-component--c {
  color: #0f766e;
}

.filter-diagram-component--l {
  color: #2563eb;
}

.filter-diagram-component-icon {
  position: relative;
  flex: none;
  width: 66rpx;
  height: 40rpx;
  color: inherit;
  box-sizing: border-box;
}

.filter-diagram-component-icon::before,
.filter-diagram-component-icon::after,
.filter-diagram-icon-loop {
  position: absolute;
  content: "";
  box-sizing: border-box;
}

.filter-diagram-component-icon--r::before {
  left: 8rpx;
  right: 8rpx;
  top: 10rpx;
  z-index: 1;
  height: 18rpx;
  border: 4rpx solid currentColor;
  border-radius: 5rpx;
  background: #ffffff;
}

.filter-diagram-component-icon--r::after {
  left: 0;
  right: 0;
  top: 18rpx;
  z-index: 0;
  height: 4rpx;
  border-radius: 999rpx;
  background: currentColor;
}

.filter-diagram-component-icon--c::before {
  left: 15rpx;
  top: 2rpx;
  width: 4rpx;
  height: 32rpx;
  background: currentColor;
  box-shadow: 24rpx 0 0 currentColor;
}

.filter-diagram-component-icon--c::after {
  left: 0;
  right: 0;
  top: 18rpx;
  height: 4rpx;
  border-radius: 999rpx;
  background: linear-gradient(90deg, currentColor 0 15rpx, transparent 15rpx 39rpx, currentColor 39rpx 100%);
}

.filter-diagram-component-icon--l {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

.filter-diagram-component-icon--l::before {
  left: 0;
  top: 27rpx;
  width: 8rpx;
  height: 4rpx;
  border-radius: 999rpx;
  background: currentColor;
}

.filter-diagram-component-icon--l::after {
  right: 0;
  top: 27rpx;
  width: 8rpx;
  height: 4rpx;
  border-radius: 999rpx;
  background: currentColor;
}

.filter-diagram-component-icon--l .filter-diagram-icon-loop {
  position: relative;
  width: 20rpx;
  height: 24rpx;
  margin-left: -3rpx;
  border: 4rpx solid currentColor;
  border-bottom: 0;
  border-radius: 16rpx 16rpx 0 0;
}

.filter-diagram-component--shunt {
  width: 72rpx;
  height: 72rpx;
}

.filter-diagram-component--shunt .filter-diagram-component-icon {
  transform: rotate(90deg);
}

.filter-diagram-node-wrap {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38rpx;
  height: 62rpx;
}

.filter-diagram-node {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #0f8f87;
  box-shadow: 0 0 0 4rpx rgba(15, 143, 135, 0.12);
}

.filter-diagram-branch {
  position: absolute;
  left: 50%;
  top: 42rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.filter-diagram-branch-wire {
  width: 3rpx;
  height: 42rpx;
  border-radius: 999rpx;
}

.filter-diagram-ground {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  margin-top: 12rpx;
}

.filter-diagram-ground-stem {
  width: 3rpx;
  height: 26rpx;
  border-radius: 999rpx;
}

.filter-diagram-ground-line {
  height: 2rpx;
  border-radius: 999rpx;
}

.filter-diagram-ground-line--1 {
  width: 48rpx;
}

.filter-diagram-ground-line--2 {
  width: 34rpx;
}

.filter-diagram-ground-line--3 {
  width: 20rpx;
}

.theme-dark .filter-unit-value {
  color: #e5e7eb;
}

.theme-dark .filter-value-input--computed {
  border-color: #0f766e;
  background: #0f2f2d;
  color: #5eead4;
}

.theme-dark .filter-mode-button {
  border-color: #334155;
  background: #111827;
  color: #99f6e4;
}

.theme-dark .filter-diagram-port {
  color: #94a3b8;
}

.theme-dark .filter-diagram-mode {
  color: #5eead4;
}

.theme-dark .filter-diagram-wire,
.theme-dark .filter-diagram-branch-wire,
.theme-dark .filter-diagram-ground-line,
.theme-dark .filter-diagram-ground-stem {
  background: #64748b;
}

.theme-dark .filter-diagram-component-icon--r::before {
  background: #17202c;
}

.theme-dark .filter-diagram-component {
  color: #e5e7eb;
}

.theme-dark .filter-diagram-component--r {
  color: #fed7aa;
}

.theme-dark .filter-diagram-component--c {
  color: #99f6e4;
}

.theme-dark .filter-diagram-component--l {
  color: #bfdbfe;
}

.smd-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.smd-section-title-text {
  min-width: 0;
  flex: 1;
}

.smd-mode-actions,
.smd-format-row {
  display: flex;
  align-items: center;
}

.smd-mode-actions {
  flex: none;
  gap: 8rpx;
}

.smd-format-row {
  gap: 10rpx;
  padding: 18rpx 24rpx 22rpx;
  border-top: 1rpx solid #edf2f7;
  box-sizing: border-box;
}

.smd-mode-button,
.smd-format-button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46rpx;
  border: 1rpx solid #d7e2ea;
  border-radius: 10rpx;
  background: #ffffff;
  color: #64748b;
  font-size: 22rpx;
  line-height: 1.25;
  font-weight: 900;
  box-sizing: border-box;
}

.smd-mode-button {
  min-width: 78rpx;
  padding: 0 16rpx;
}

.smd-format-button {
  flex: 1;
  min-width: 0;
  padding: 0 10rpx;
}

.smd-mode-button.is-active,
.smd-format-button.is-active {
  border-color: var(--accent-dark);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.smd-mode-button:active,
.smd-format-button:active {
  opacity: 0.72;
}

.smd-code-input {
  width: 300rpx;
  font-family: Menlo, Monaco, Consolas, monospace;
}

.smd-result-row {
  min-height: 94rpx;
}

.smd-result-value {
  flex: none;
  max-width: 320rpx;
  color: #0f8f87;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 30rpx;
  line-height: 1.25;
  font-weight: 900;
  text-align: right;
  word-break: break-all;
}

.smd-result-value--error {
  color: var(--danger);
  font-family: inherit;
  font-size: 25rpx;
}

.theme-dark .smd-format-row {
  border-color: #263241;
}

.theme-dark .smd-mode-button,
.theme-dark .smd-format-button {
  border-color: #334155;
  background: #111827;
  color: #94a3b8;
}

.theme-dark .smd-mode-button.is-active,
.theme-dark .smd-format-button.is-active {
  border-color: #5eead4;
  background: #123d3b;
  color: #99f6e4;
}

.theme-dark .smd-result-value {
  color: #5eead4;
}

.theme-dark .smd-result-value--error {
  color: var(--danger);
}

.crc-calc-result-row {
  align-items: stretch;
  min-height: 0;
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.crc-calc-result-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.crc-calc-result-value {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 10rpx;
  padding: 14rpx 16rpx;
  border-radius: 10rpx;
  background: #f4fbfa;
  color: #0f8f87;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
  text-align: right;
  word-break: break-all;
  white-space: normal;
  box-sizing: border-box;
}

.crc-calc-result-value:active {
  opacity: 0.72;
}

.crc-calc-result-value--bin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3rpx;
  max-width: none;
  text-align: right;
}

.crc-calc-result-row .param-name {
  word-break: keep-all;
}

.theme-dark .crc-calc-result-value {
  background: #0f2f2d;
  color: #5eead4;
}

.theme-dark .crc-calc-result-value--bin {
  background: #0f2f2d;
  color: #5eead4;
}

.theme-dark .crc-calc-result-value--error {
  background: #432114;
  color: #fed7aa;
}

.refrigeration-mode-picker {
  flex: none;
}

.refrigeration-title-row {
  min-height: 76rpx;
  padding-top: 12rpx;
  padding-bottom: 12rpx;
}

.refrigeration-picker-value {
  width: 240rpx;
  min-width: 240rpx;
  max-width: 240rpx;
  height: 46rpx;
  font-size: 24rpx;
  line-height: 46rpx;
}

.refrigeration-formula-row {
  justify-content: flex-end;
}

.refrigeration-formula-text {
  min-width: 0;
  flex: 1;
  color: #64748b;
  font-size: 24rpx;
  line-height: 1.35;
  font-weight: 800;
  text-align: right;
  word-break: break-all;
}

.refrigeration-input {
  width: 260rpx;
}

.three-phase-input {
  width: 260rpx;
}

.theme-dark .refrigeration-formula-text {
  color: #94a3b8;
}

.subpage-fixed-header .panel-actions {
  flex-shrink: 0;
}

.subpage-fixed-header .panel-action-button {
  width: 86rpx;
}

.auto-read-button {
  margin-left: 2rpx;
}

@media (max-width: 360px) {
  .panel-title {
    font-size: 28rpx;
  }

  .param-name {
    font-size: 26rpx;
  }

  .param-meta {
    font-size: 21rpx;
  }

  .value-input {
    width: 260rpx;
  }

  .value-input--with-unit {
    width: 260rpx;
  }

  .generic-picker-value,
  .generic-value-input {
    width: 260rpx;
    min-width: 260rpx;
    max-width: 260rpx;
  }

  .generic-register-input-wrap {
    width: 180rpx;
    min-width: 150rpx;
    max-width: 38%;
  }

  .generic-register-value {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .generic-readonly-value {
    width: 180rpx;
    max-width: 38%;
  }

  .crc-config-input {
    width: 230rpx;
    min-width: 230rpx;
    max-width: 230rpx;
  }

  .crc-algorithm-panel .crc-picker-value {
    width: auto;
    min-width: 0;
    max-width: 330rpx;
    font-size: 22rpx;
  }

  .crc-data-card-header {
    gap: 8rpx;
    padding-right: 14rpx;
  }

  .crc-data-header-actions {
    gap: 4rpx;
  }

  .crc-data-type-value {
    width: 86rpx;
    font-size: 20rpx;
  }

  .crc-data-type-picker {
    margin-right: 6rpx;
  }

  .crc-data-header-actions .panel-action-button {
    width: 70rpx;
    font-size: 20rpx;
  }

  .crc-file-name,
  .crc-error-value {
    max-width: 360rpx;
  }

  .filter-value-input {
    width: 180rpx;
    min-width: 0;
    max-width: 180rpx;
  }

  .filter-unit-picker,
  .filter-unit-value {
    width: 84rpx;
  }

  .filter-mode-button {
    min-width: 68rpx;
    padding: 0 12rpx;
    font-size: 22rpx;
  }

  .filter-diagram {
    padding-left: 4rpx;
    padding-right: 4rpx;
  }

  .filter-diagram-row {
    width: 74%;
  }

  .filter-diagram-port {
    width: 44rpx;
    font-size: 20rpx;
  }

  .filter-diagram-component {
    width: 68rpx;
    height: 54rpx;
  }

  .filter-diagram-component--shunt {
    width: 64rpx;
    height: 64rpx;
  }

  .smd-code-input {
    width: 240rpx;
  }

  .smd-result-value {
    max-width: 260rpx;
    font-size: 26rpx;
  }

  .crc-calc-result-value {
    width: 100%;
    max-width: none;
    font-size: 23rpx;
  }

  .crc-calc-result-value--bin {
    max-width: none;
    font-size: 21rpx;
  }

  .smd-mode-button {
    min-width: 68rpx;
    padding: 0 12rpx;
  }

  .smd-format-row {
    gap: 8rpx;
    padding-left: 18rpx;
    padding-right: 18rpx;
  }

  .smd-format-button {
    font-size: 20rpx;
  }

  .refrigeration-picker-value {
    width: 210rpx;
    min-width: 210rpx;
    max-width: 210rpx;
    font-size: 22rpx;
  }

  .refrigeration-input {
    width: 220rpx;
  }

  .three-phase-input {
    width: 220rpx;
  }

}