/* iPhone 16 Pro, дополнение к /static/iphone.css: цвета титана (черный, белый, пустынный),
   светлая тема экрана и главный экран мини-приложения (walletScreen() в src/components/iphone.mjs).
   Подключать после iphone.css и только на страницах, где это используется. */

/* Цвета титана */
.iphone.ip-black { --ti-1: #9a9a9f; --ti-2: #5e5e63; --ti-3: #3f3f43; --ti-4: #252527; }
.iphone.ip-white { --ti-1: #ffffff; --ti-2: #ecebe7; --ti-3: #cfcdc8; --ti-4: #a9a7a2; }
.iphone.ip-desert { --ti-1: #f7e9d7; --ti-2: #dcc6aa; --ti-3: #b69e82; --ti-4: #85705b; }

/* Светлая тема экрана: строка статуса и полоска «домой» черные */
.ip-tone-light .ip-status { color: #000; }
.ip-tone-light .ip-home { background: #000; }

/* ---------- Главный экран мини-приложения ---------- */
.ip-wl {
  --bg: #000;
  --fg: #fff;
  --fg-2: #8e8e93;
  --cell: #1c1c1e;
  --sep: rgb(84 84 88 / 0.6);
  --acc: #3d86f7;
  --glass: rgb(36 36 38 / 0.9);
  --glass-edge: rgb(255 255 255 / 0.13);
  position: absolute;
  inset: 0;
  background: var(--bg);
  color: var(--fg);
}
.ip-wl-light {
  --bg: #f2f2f7;
  --fg: #000;
  --fg-2: #8a8a8e;
  --cell: #fff;
  --sep: rgb(60 60 67 / 0.16);
  --acc: #2f7bf5;
  --glass: rgb(255 255 255 / 0.9);
  --glass-edge: rgb(0 0 0 / 0.06);
}
.ip-wl > * { position: absolute; }
.ip-wl-tg { top: calc(var(--u) * 62); left: calc(var(--u) * 16); right: calc(var(--u) * 16); display: flex; justify-content: space-between; }
.ip-wl-pill {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 15);
  border-radius: calc(var(--u) * 17);
  font-size: calc(var(--u) * 15);
  font-weight: 500;
  background: var(--glass);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--glass-edge), inset 0 calc(var(--u) * 1) 0 rgb(255 255 255 / 0.06);
}
.ip-wl-more { justify-content: center; gap: calc(var(--u) * 3.4); width: calc(var(--u) * 46); padding: 0; }
.ip-wl-more i { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; background: currentColor; }
.ip-wl-h { top: calc(var(--u) * 104); left: calc(var(--u) * 20); font-size: calc(var(--u) * 34); line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; }
.ip-wl-cap { top: calc(var(--u) * 160); left: 0; right: 0; text-align: center; font-size: calc(var(--u) * 15); color: var(--fg-2); }
.ip-wl-bal {
  top: calc(var(--u) * 182);
  left: 0;
  right: 0;
  text-align: center;
  font-size: calc(var(--u) * 50);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ip-wl-bal span { font-size: 0.6em; font-weight: 500; color: var(--fg-2); letter-spacing: 0; }
.ip-wl-bal span:first-child { margin-right: 0.06em; }
.ip-wl-card { top: calc(var(--u) * 252); left: calc(var(--u) * 54); right: calc(var(--u) * 54); }
.ip-wl-img { display: block; width: 100%; height: auto; }
.ip-wl-acts { top: calc(var(--u) * 452); left: calc(var(--u) * 16); right: calc(var(--u) * 16); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.ip-wl-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 74);
  border-radius: calc(var(--u) * 24);
  background: var(--cell);
  color: var(--acc);
  font-size: calc(var(--u) * 14);
  font-weight: 500;
}
.ip-wl-act svg { width: calc(var(--u) * 27); height: calc(var(--u) * 27); }
.ip-wl-sec { top: calc(var(--u) * 546); left: calc(var(--u) * 20); font-size: calc(var(--u) * 22); line-height: 1.2; font-weight: 700; letter-spacing: 0.005em; }
.ip-wl-list { top: calc(var(--u) * 584); left: calc(var(--u) * 16); right: calc(var(--u) * 16); list-style: none; border-radius: calc(var(--u) * 24); background: var(--cell); }
.ip-wl-row { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 14); }
.ip-wl-row + .ip-wl-row::before { content: ""; position: absolute; top: 0; left: calc(var(--u) * 66); right: 0; height: calc(var(--u) * 0.7); background: var(--sep); }
.ip-wl-logo { display: grid; place-items: center; flex: none; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 11); box-shadow: inset 0 0 0 calc(var(--u) * 0.7) rgb(128 128 128 / 0.22); }
.ip-wl-logo svg { width: calc(var(--u) * 23); height: calc(var(--u) * 23); }
.ip-wl-name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ip-wl-name b { font-size: calc(var(--u) * 17); line-height: 1.2; font-weight: 500; }
.ip-wl-name small { font-size: calc(var(--u) * 13); line-height: 1.3; color: var(--fg-2); white-space: nowrap; }
.ip-wl-sum { font-size: calc(var(--u) * 17); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-wl-tabs {
  bottom: calc(var(--u) * 25);
  left: calc(var(--u) * 20);
  right: calc(var(--u) * 20);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--u) * 64);
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 32);
  background: var(--glass);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.8) var(--glass-edge), inset 0 calc(var(--u) * 1) 0 rgb(255 255 255 / 0.07), 0 calc(var(--u) * 10) calc(var(--u) * 30) rgb(0 0 0 / 0.35);
}
.ip-wl-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 28);
  font-size: calc(var(--u) * 10.5);
  font-weight: 600;
  color: var(--fg);
}
.ip-wl-tabs span.on { color: var(--acc); background: rgb(128 128 140 / 0.2); }
.ip-wl-tabs svg { width: calc(var(--u) * 25); height: calc(var(--u) * 25); }