/*
  TrustTunnel Mini App — SwiftUI-matched styling.
  Values are taken from Apple's iOS Human Interface Guidelines and the
  measured UIColor system palette (Apple does not publish fixed hex values
  for system colors — these are the community-verified light-mode values
  used industry-wide, e.g. sarunw.com/posts/dark-color-cheat-sheet):
    Large Title 34/700, list row height 44pt, tab bar 49pt + safe area,
    8pt spacing grid.
    .label            #000000
    .secondaryLabel   rgba(60,60,67,0.6)
    .placeholderText  rgba(60,60,67,0.3)
    .separator        rgba(60,60,67,0.29)
    .systemGray3      #C7C7CC   (decorative fills only, e.g. offline avatar)
    .systemBlue       #007AFF   .systemRed #FF3B30   .systemGreen #34C759
    .systemGroupedBackground #F2F2F7
  Audited 2026-08-20 against this palette; see conversation log for the
  full list of corrections (secondaryLabel vs systemGray misuse, separator
  vs opaqueSeparator, placeholderText, SF Symbol tab bar icons).
*/

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #F2F2F7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
  color: #000;
  overscroll-behavior-y: none;
}

#app { min-height: 100vh; position: relative; }

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 0 16px;
  padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px) + 16px);
  display: none;
}
.screen.active { display: block; }

.large-title {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.37px;
  margin: 20px 0 20px;
}

.section-label {
  font-size: 13px;
  color: rgba(60,60,67,0.6); /* secondaryLabel, light */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  padding-left: 16px;
}

.group {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.row {
  min-height: 44px;
  padding: 11px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid rgba(60,60,67,0.29); /* .separator, light */
  gap: 12px;
}
.row:last-child { border-bottom: none; }

.row-label { font-size: 17px; color: #000; } /* .label */
.row-value { font-size: 17px; color: rgba(60,60,67,0.6); } /* .secondaryLabel */
.row-link { font-size: 17px; color: #007AFF; }
.row-destructive { font-size: 17px; color: #FF3B30; }

.big-button {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #fff;
  background: #007AFF;
}
.big-button.danger { background: #FF3B30; }
.big-button.success { background: #34C759; }
.big-button:active { opacity: 0.75; }

.status-badge { font-size: 17px; font-weight: 500; }
.status-badge.on { color: #34C759; }
.status-badge.off { color: rgba(60,60,67,0.6); } /* .secondaryLabel */

.user-row { min-height: 52px; padding: 0 16px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.avatar.online { background: #007AFF; }
.avatar.offline { background: #C7C7CC; } /* .systemGray3 — decorative fill, not text */
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 17px; color: #000; margin: 0; line-height: 20px; }
.user-status { font-size: 13px; margin: 0; line-height: 16px; }
.user-status.online { color: #34C759; }
.user-status.offline { color: rgba(60,60,67,0.6); } /* .secondaryLabel */
.chevron {
  font-size: 15px; font-weight: 600; color: #C7C7CC; /* .systemGray3, matches disclosure indicator */
  flex-shrink: 0;
}

.nav-back {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  color: #007AFF;
  font-size: 17px;
}
.nav-back .chevron-left { display: flex; align-items: center; }
.nav-back .chevron-left svg { display: block; }

.profile-header { text-align: center; padding: 20px 0; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; color: #fff; margin: 0 auto 12px;
  background: #007AFF;
}
.profile-name { font-size: 22px; font-weight: 700; margin: 0; }
.profile-status { font-size: 15px; margin: 4px 0 0; }

.sheet-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.sheet-cancel { font-size: 17px; color: rgba(60,60,67,0.6); background: none; border: none; } /* .secondaryLabel */
.sheet-title { font-size: 17px; font-weight: 600; color: #000; }
.sheet-done { font-size: 17px; font-weight: 600; color: #007AFF; background: none; border: none; }
.sheet-done:disabled { color: #C7C7CC; }

.text-field {
  background: #fff;
  border-radius: 10px;
  padding: 0 16px;
  height: 44px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.text-field input {
  border: none; outline: none; font-size: 17px; width: 100%;
  font-family: inherit; background: transparent;
}
.text-field input::placeholder { color: rgba(60,60,67,0.3); } /* .placeholderText */

.hint-text { font-size: 13px; color: rgba(60,60,67,0.6); margin: 0 0 6px; padding-left: 16px; line-height: 18px; } /* .secondaryLabel */
.error-text { font-size: 13px; color: #FF3B30; margin: 0 0 12px; padding-left: 16px; }

.toggle {
  width: 51px; height: 31px; border-radius: 16px; position: relative;
  border: none; padding: 0; cursor: pointer;
  background: #E9E9EA; transition: background 0.15s;
}
.toggle.on { background: #34C759; }
.toggle-knob {
  width: 27px; height: 27px; background: #fff; border-radius: 50%;
  position: absolute; top: 2px; left: 2px; transition: left 0.15s;
  box-shadow: 0 3px 1px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.15);
}
.toggle.on .toggle-knob { left: 22px; }

.tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(249,249,249,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(60,60,67,0.29); /* .separator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-bar-items { display: flex; height: 49px; }
.tab-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none; padding: 0;
}
/* Tab bar icons are inline SVGs (SF Symbols traced at 25x25, 1.5px stroke to
   match SF Symbols' medium weight) so they can be recolored via currentColor,
   exactly like real SF Symbols do for tint/unselected states. */
.tab-item .ti { width: 25px; height: 25px; color: #8E8E93; } /* .systemGray, unselected icon */
.tab-item .ti svg { width: 100%; height: 100%; display: block; }
.tab-item .tab-label { font-size: 10px; line-height: 12px; color: #8E8E93; margin: 0; } /* Caption2 */
.tab-item.active .ti, .tab-item.active .tab-label { color: #007AFF; }

.loading-row { padding: 24px 0; text-align: center; color: rgba(60,60,67,0.6); font-size: 15px; }
.empty-state { padding: 40px 16px; text-align: center; color: rgba(60,60,67,0.6); font-size: 15px; }