:root {
  color-scheme: light;
  --sky: #15a9f4;
  --sky-deep: #087fd0;
  --sky-soft: #e5f7ff;
  --aqua: #66dff1;
  --navy: #112b4c;
  --ink: #172335;
  --muted: #718096;
  --line: #dce8f1;
  --surface: rgba(255, 255, 255, .94);
  --page: #eef8fc;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 4%, rgba(104, 220, 244, .28), transparent 33%),
    radial-gradient(circle at 94% 18%, rgba(39, 154, 239, .19), transparent 28%),
    linear-gradient(165deg, #f8fdff 0%, #ecf8fc 48%, #e4f2f9 100%);
}
button, input, select { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }

.auth-gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-gate.is-hidden { display: none; }
.auth-card { width: min(100%, 370px); padding: 30px 24px; text-align: center; background: rgba(255,255,255,.95); border: 1px solid rgba(71,151,203,.24); border-radius: 25px; box-shadow: 0 18px 48px rgba(18,74,112,.12); }
.auth-card > img { width: 72px; height: 72px; object-fit: cover; border: 3px solid white; border-radius: 21px; box-shadow: 0 10px 24px rgba(16,123,184,.2); }
.auth-card h1 { margin: 16px 0 8px; font-size: 22px; }
.auth-card p { margin: 0; color: #51677d; font-size: 13px; font-weight: 600; line-height: 1.65; }
.auth-spinner { width: 25px; height: 25px; margin: 18px auto 0; border: 3px solid #d9edf6; border-top-color: var(--sky); border-radius: 50%; animation: auth-spin .8s linear infinite; }
.auth-spinner.is-hidden { display: none; }
.auth-link { min-height: 48px; margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; color: white; background: linear-gradient(115deg, #58d8ed, #159ee8); border-radius: 14px; box-shadow: 0 10px 22px rgba(11,143,218,.22); font-size: 14px; font-weight: 800; text-decoration: none; }
.auth-link[hidden] { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.app-shell { width: min(100%, 600px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 10px 9px calc(20px + env(safe-area-inset-bottom)); }
.app-shell.is-locked { display: none; }
.tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: calc(5px + env(safe-area-inset-top)) 0 10px;
  background: linear-gradient(180deg, rgba(239,249,253,.98) 72%, rgba(239,249,253,0));
}
.tab {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #6f8195;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(105,150,183,.24);
  border-radius: 17px;
  box-shadow: 0 8px 22px rgba(24,82,119,.05);
  font-weight: 750;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab svg { width: 18px; height: 18px; fill: currentColor; }
.tab.is-active { color: #075e9d; background: linear-gradient(135deg, #bff3fa, #a8dfff); border-color: rgba(21,169,244,.65); box-shadow: 0 9px 22px rgba(21,169,244,.19), inset 0 1px rgba(255,255,255,.7); }
.tab:active { transform: scale(.98); }

main { padding-top: 2px; }
.view { display: none; }
.view.is-active { display: block; animation: view-in .32s cubic-bezier(.22,.8,.36,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel {
  position: relative;
  overflow: hidden;
  padding: 19px 13px 16px;
  background: var(--surface);
  border: 1px solid rgba(71,151,203,.22);
  border-radius: 23px;
  box-shadow: 0 18px 48px rgba(18,74,112,.11), inset 0 1px rgba(255,255,255,.9);
}
.panel::before { content: ""; position: absolute; width: 210px; height: 210px; right: -100px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(94,205,246,.18), rgba(94,205,246,0) 68%); pointer-events: none; }
.energy-panel { padding: 0 0 16px; }
.energy-panel::before { display: none; }
.energy-banner { width: 100%; aspect-ratio: 8 / 1; overflow: hidden; background: #48bee2; border-radius: 22px 22px 0 0; }
.energy-banner img { display: block; width: 100%; height: auto; transform: translateY(-20%); }
.energy-panel > .intro { margin: 13px 13px 12px; }
.energy-panel > form { margin: 0 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.panel-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.panel-head img { width: 56px; height: 56px; object-fit: cover; border: 3px solid white; border-radius: 17px; box-shadow: 0 9px 22px rgba(16,123,184,.2); }
.panel-head.compact { margin-bottom: 8px; }
.eyebrow { color: var(--sky-deep); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
h1 { margin: 4px 0 0; color: var(--navy); font-size: 25px; line-height: 1.18; letter-spacing: -.02em; }
.intro { position: relative; margin: 0 0 13px; color: #43576d; font-size: 13.5px; font-weight: 600; line-height: 1.65; }

.field-card { position: relative; padding: 10px 10px 8px; background: linear-gradient(135deg, #fbfeff, #f1faff); border: 1px solid #d7e9f3; border-radius: 18px; }
.field-card + .field-card { margin-top: 10px; }
.field-card label { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.field-card label > span:last-child { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.field-card label strong { color: #182f49; font-size: 15.5px; }
.field-card label small { color: #60758a; font-size: 10.5px; font-weight: 650; white-space: nowrap; }
.number { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--aqua), var(--sky)); border-radius: 8px 8px 8px 3px; box-shadow: 0 5px 12px rgba(21,169,244,.22); font-size: 12px; font-weight: 850; }

.select-wrap, .input-wrap { position: relative; min-height: 53px; display: flex; align-items: center; background: white; border: 1.5px solid #cbdde9; border-radius: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.select-wrap:focus-within, .input-wrap:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(21,169,244,.1); }
.select-wrap select, .input-wrap input { width: 100%; height: 51px; padding: 0 44px 0 14px; color: #23374e; background: transparent; border: 0; outline: 0; font-size: 12.5px; }
.select-wrap select { appearance: none; text-overflow: ellipsis; }
.select-wrap svg { position: absolute; right: 14px; width: 20px; fill: var(--sky-deep); pointer-events: none; }
.input-wrap input::placeholder { color: #b3c0cc; }
.input-wrap:has(input:disabled) { background: #f1f5f8; border-color: #d9e1e7; box-shadow: none; }
.input-wrap input:disabled { color: #9aa8b5; cursor: not-allowed; }
.input-wrap input:disabled::placeholder { color: #8899a8; opacity: 1; }
.clear-button { position: absolute; right: 11px; width: 29px; height: 29px; display: none; align-items: center; justify-content: center; padding: 0; color: #7890a5; background: #e7f1f6; border: 0; border-radius: 50%; font-size: 18px; cursor: pointer; }
.input-wrap.has-value .clear-button { display: flex; }
.input-wrap.has-error, .select-wrap.has-error { border-color: #f08ca2; box-shadow: 0 0 0 4px rgba(231,78,112,.08); }
.field-hint { min-height: 17px; display: flex; align-items: center; gap: 7px; margin: 7px 3px 0; color: #61758a; font-size: 11px; font-weight: 600; }
.field-hint i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #c9d4de; }
.field-hint strong { color: var(--sky-deep); }
.field-hint.warning { color: #b77c20; }
.field-hint.warning i { background: #ffc64a; box-shadow: 0 0 0 4px rgba(255,198,74,.16); }
.field-hint.ready { color: #24956c; }
.field-hint.ready i { background: #42c895; }

.safety-note { margin: 9px 0; padding: 10px 11px; display: flex; gap: 9px; color: #344e67; background: linear-gradient(110deg, #eaf8ff, #f0fbff); border: 1px solid #cceaf6; border-radius: 14px; }
.safety-note svg { width: 21px; height: 21px; flex: 0 0 auto; fill: var(--sky); }
.safety-note p { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.55; }
.form-message { min-height: 16px; margin: 6px 4px 4px; color: #dc4968; font-size: 11px; }
.form-message.success { color: #20865f; }

.primary-button { width: 100%; min-height: 53px; display: flex; align-items: center; justify-content: center; gap: 9px; color: white; background: linear-gradient(115deg, #58d8ed 0%, #1baaf3 55%, #087fcf 100%); border: 0; border-radius: 15px; box-shadow: 0 11px 23px rgba(11,143,218,.25), inset 0 1px rgba(255,255,255,.3); font-size: 16px; font-weight: 850; letter-spacing: .03em; cursor: pointer; transition: transform .15s, filter .15s; }
.primary-button svg { width: 19px; height: 19px; fill: currentColor; }
.primary-button:active { transform: scale(.985); filter: brightness(.97); }
.primary-button:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .58; box-shadow: none; }
.trust-line { margin: 9px 0 0; text-align: center; color: #657b90; font-size: 10.5px; font-weight: 600; }
.trust-line span { color: #28ae7b; font-weight: 900; }

.limit-pill { padding: 7px 11px; color: var(--sky-deep); background: var(--sky-soft); border: 1px solid #bee7f8; border-radius: 999px; font-size: 10px; font-weight: 800; }
.saved-section { margin-top: 4px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #31475e; font-size: 13px; }
.section-title span { color: #91a0af; font-size: 10px; }
.saved-list { display: grid; gap: 8px; margin-bottom: 13px; }
.empty-state { min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a5b4; background: #f5fbfe; border: 1px dashed #c9e1ed; border-radius: 17px; }
.empty-state span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--sky); background: var(--sky-soft); border-radius: 50%; font-size: 18px; }
.empty-state p { margin: 6px 0 0; font-size: 10px; }
.address-item { min-width: 0; display: grid; grid-template-columns: 31px minmax(0,1fr) 32px; align-items: center; gap: 9px; padding: 12px; background: #f5fbfe; border: 1px solid #d4e8f2; border-radius: 15px; }
.address-item > span { width: 31px; height: 31px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--aqua), var(--sky)); border-radius: 10px; font-size: 11px; font-weight: 850; }
.address-item code { min-width: 0; overflow: hidden; color: #40566d; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.delete-address { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: #9aa9b6; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.delete-address svg { width: 17px; fill: currentColor; }
.new-label { display: block; margin: 0 0 9px 2px; color: #31475e; font-size: 13px; font-weight: 750; }
.input-wrap.large { min-height: 54px; }
.input-wrap.large input { height: 52px; }

@media (min-width: 561px) {
  body { padding: 26px 0; }
  .app-shell { min-height: auto; }
  .tabs { position: relative; padding-top: 0; background: transparent; }
}

@media (max-width: 380px) {
  .app-shell { padding-left: 7px; padding-right: 7px; }
  .panel { padding: 17px 11px 15px; }
  .panel-head img { width: 52px; height: 52px; }
  h1 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}