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;
}

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

.page-toast {
  position: fixed;
  z-index: 50;
  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);
}

.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;
}

.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;
}

.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-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-motor {
  --icon-start: #16b0a5;
  --icon-end: #0d7c76;
}

.icon-motor::before {
  background-image: url("/assets/icons/motor-white.png");
}

.icon-chip {
  --icon-start: #5a86a6;
  --icon-end: #2f5e7c;
}

.icon-chip::before {
  background-image: url("/assets/icons/chip-white.png");
}

.icon-control {
  --icon-start: #18a58b;
  --icon-end: #0e746f;
}

.icon-control::before {
  background-image: url("/assets/icons/control-white.png");
}

.icon-bluetooth {
  --icon-start: #16a8cf;
  --icon-end: #0f7a9a;
}

.icon-bluetooth::before {
  background-image: url("/assets/icons/bluetooth-connected-white.png");
}

.icon-radar {
  --icon-start: #23b0d7;
  --icon-end: #137e8f;
}

.icon-radar::before {
  background-image: url("/assets/icons/radar-white.png");
}

.icon-terminal {
  --icon-start: #63758f;
  --icon-end: #324056;
}

.icon-terminal::before {
  background-image: url("/assets/icons/terminal-white.png");
}

.icon-send {
  --icon-start: #39bdf0;
  --icon-end: #1684c5;
}

.icon-send::before {
  background-image: url("/assets/icons/send-white.png");
}

.icon-history {
  --icon-start: #64748b;
  --icon-end: #475569;
}

.icon-history::before {
  background-image: url("/assets/icons/history-white.png");
}

.icon-status {
  --icon-start: #14a79a;
  --icon-end: #2563eb;
}

.icon-status::before {
  background-image: url("/assets/icons/status-white.png");
}

.icon-bars {
  --icon-start: #148f85;
  --icon-end: #105f8b;
}

.icon-bars::before {
  background-image: url("/assets/icons/estimator-white.png");
}

.icon-tune {
  --icon-start: #17a59f;
  --icon-end: #0d7280;
}

.icon-tune::before {
  background-image: url("/assets/icons/sliders-white.png");
}

.icon-speed {
  --icon-start: #f7a623;
  --icon-end: #d97f0c;
}

.icon-speed::before {
  background-image: url("/assets/icons/speed-white.png");
}

.icon-wind {
  --icon-start: #22b8cf;
  --icon-end: #0b7888;
}

.icon-wind::before {
  background-image: url("/assets/icons/wind-white.png");
}

.icon-target {
  --icon-start: #21a37e;
  --icon-end: #0f766e;
}

.icon-target::before {
  background-image: url("/assets/icons/target-white.png");
}

.icon-curve {
  --icon-start: #0ea5a4;
  --icon-end: #2563eb;
}

.icon-curve::before {
  background-image: url("/assets/icons/curve-white.png");
}

.icon-shield-check {
  --icon-start: #16a34a;
  --icon-end: #0f766e;
}

.icon-shield-check::before {
  background-image: url("/assets/icons/shield-check-white.png");
}

.icon-shield-alert {
  --icon-start: #f59e0b;
  --icon-end: #d97706;
}

.icon-shield-alert::before {
  background-image: url("/assets/icons/shield-alert-white.png");
}

.icon-oil {
  --icon-start: #f2b44c;
  --icon-end: #d97815;
}

.icon-oil::before {
  background-image: url("/assets/icons/oil-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;
}

.status-auto-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.auto-read-interval {
  width: 112rpx;
  height: 50rpx;
  padding: 0 12rpx;
  border: 1rpx solid #e7edf3;
  border-radius: 10rpx;
  background: #fafbfd;
  color: #111827;
  font-size: 22rpx;
  line-height: 50rpx;
  text-align: right;
  box-sizing: border-box;
}

.auto-read-unit {
  color: #64748b;
  font-size: 22rpx;
}

.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;
  }

  .auto-read-interval {
    width: 96rpx;
  }

}