/* ============================================================
   ЭКРАН ТЕЛЕФОНА = порт реального приложения (webapp).
   Все значения — из colors_and_type.css / app.css / goal.css,
   заскоуплены под .deni-phone → отступы/кегли/радиусы совпадают
   С ПРИЛОЖЕНИЕМ ПО ПОСТРОЕНИЮ (без ручных прикидок).
   Единицы vw заменены на px под фикс-ширину телефона 402px.
   ============================================================ */

.deni-phone{
  position:absolute; top:0; left:0; width:402px; height:874px; transform-origin:top left;
  overflow:hidden; display:flex; flex-direction:column;
  padding-top:54px;                 /* статус-бар iPhone Pro (54pt) */
  /* ---- реальные токены (светлая тема) ---- */
  --ink-0:#fff; --ink-900:#000;
  --income:#1DB36A; --expense:#F0524B;
  --space-2:4px; --space-3:8px; --space-5:16px;
  --radius-sm:14px; --radius-md:20px; --radius-pill:999px;
  --font-sans:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --bg:#fff; --bg-elev:#fff; --bg-elev-2:#F1F3F7; --bg-sunken:#EDF0F5;
  --fg1:#000; --fg2:#686B74; --fg3:#93969E; --fg-on-accent:#fff;
  --border:#E5E9F0; --border-strong:#D5DBE6;
  --accent:#000; --accent-soft:#E7EBF2;
  --shadow-sm:0 1px 2px rgba(20,28,46,.05);
  --shadow-md:0 6px 22px rgba(20,28,46,.08);
  --shadow-lg:0 16px 40px rgba(20,28,46,.14);
  --shadow-tile:0 1px 2px rgba(20,28,46,.05), 0 5px 14px rgba(20,28,46,.07);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur:200ms; --dur-fast:120ms;
  background:var(--bg); font-family:var(--font-sans); color:var(--fg1);
  text-align:left;   /* сброс text-align:center, наследуемого от .capital-final */
}
.deni-phone .tnum{ font-variant-numeric:tabular-nums; }

/* Solar Linear: CSS утолщает штрих 1.5 → 2 (как .ic-solar в приложении) */
.deni-phone .ic-solar [stroke-width]{ stroke-width:2; }
.deni-phone .lu{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- iOS статус-бар (наш; в приложении его рисует ОС) ---------- */
.deni-phone .ios-bar{ position:absolute; top:0; left:0; right:0; height:54px; z-index:6; }
/* оригинальный вектор 414×44 (время + связь/Wi-Fi/батарея), растянут на ширину 402 */
.deni-phone .ios-status{ position:absolute; top:6px; left:0; width:100%; height:auto; display:block; }
.deni-phone .ios-di{ position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:125px; height:37px; background:#000; border-radius:100px; z-index:5; }

/* ---------- реальная шапка приложения (.tg-header) ---------- */
.deni-phone .tg-header{ height:60px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:4px 16px 4px 14px; position:relative; z-index:5; }
.deni-phone .tg-header .ttl{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.deni-phone .tg-header .ttl svg{ display:block; color:var(--fg1); }
.deni-phone .tg-header .acts{ display:flex; align-items:center; gap:9px; }
.deni-phone .avatar-btn{ width:40px; height:40px; border-radius:50%; flex:none; border:none;
  background:var(--fg1); color:var(--bg); font-weight:800; font-size:14px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; }

/* ---------- тело/дашборд ---------- */
/* .body приложения: 4px 16px 104px. На реальном iPhone к низу добавляется
   safe-area (home-индикатор ≈34) и инсет TG-вьюпорта → эмулируем устройство:
   104 + 47 = 151 (сверено по пропорциям скрина с устройства: цель ≈230, зазор ≈50). */
.deni-phone .dash{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:4px 16px 151px; }

/* ---------- капитал (.cap / .hero-top / .hero-amount) ---------- */
.deni-phone .cap{ padding:10px 4px 2px; }
.deni-phone .hero-top{ display:flex; align-items:center; justify-content:space-between; min-height:28px; }
.deni-phone .label{ font-family:var(--font-sans); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--fg3); }
.deni-phone .tg-iconbtn{ width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--fg2);
  display:flex; align-items:center; justify-content:center; }
.deni-phone .hero-amount{ display:block; font-family:var(--font-sans); font-weight:800; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--fg1); font-size:54px; line-height:1; margin-top:4px; white-space:nowrap; }

/* ---------- заголовки секций (.sec-head) ---------- */
.deni-phone .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:15px 2px 10px;
  max-width:none; text-align:left; }   /* сброс генерического .sec-head лендинга (центрирование секций) */
.deni-phone .sec-act{ border:none; background:none; color:var(--accent); font-weight:700; font-size:13px; cursor:pointer; padding:0; white-space:nowrap; }

/* ---------- счета (.cards-rail / .acct-card) ---------- */
.deni-phone .cards-rail{ display:flex; gap:14px; overflow:hidden; padding:10px 30px 18px; margin:0 -16px;
  perspective:1000px; perspective-origin:50% 50%; }
.deni-phone .acct-card{ position:relative; flex:none; width:265px; height:150px; border-radius:22px; padding:18px 20px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
  background:linear-gradient(157deg,#2b2b31 0%,#08080a 100%); border:1px solid rgba(255,255,255,.06);
  box-shadow:none; }   /* в приложении у карт дашборда тени НЕТ; глушим тень падающей сцены */
.deni-phone .acct-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 80% at 20% -10%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 62%); }
.deni-phone .acct-card > *{ position:relative; z-index:1; }
/* соседняя карта — cover-flow приложения (apply(), step 1) */
.deni-phone .cards-rail > .acct-card:first-child{ z-index:20; }
.deni-phone .cards-rail > .acct-card:nth-child(2){ transform:rotateY(-24deg) translateZ(-80px) scale(.92); opacity:.5; z-index:9; }

/* плитки логотипов (.hl-tile*) — как в app.css */
.deni-phone .hl-tile{ display:flex; align-items:center; justify-content:center; flex:none; border-radius:13px; overflow:hidden; }
.deni-phone .hl-tile-logo{ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.deni-phone .hl-tile-logo img{ width:74%; height:74%; object-fit:contain; display:block; }
.deni-phone .hl-tile-cover{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.deni-phone .hl-tile-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- цели (.goals-area / .goal-deck-card / .gd-*) ---------- */
/* .goals-area (pb 6) + гнездо колоды .goals-deck (padding 5px 4px) → карта цели
   инсетнута на 4px по бокам и НЕ прилипает к таббару (как в приложении) */
.deni-phone .goals-area{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:5px 4px 11px; }
.deni-phone .goals-area > *{ flex:1 1 auto; min-height:0; }
.deni-phone .goal-deck-card{ position:relative; isolation:isolate; border-radius:20px; padding:12px 16px;
  border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  color:#fff; overflow:hidden;
  box-shadow:none; }   /* .goals-area .goal-deck-card { box-shadow:none } — правило приложения */
.deni-phone .goal-deck-card.has-media{ border-color:rgba(255,255,255,.10); background:#0c0c0c; }
.deni-phone .goal-bg-vid, .deni-phone .goal-bg-shade{ position:absolute; inset:0; width:100%; height:100%; z-index:0; border-radius:inherit; }
.deni-phone .goal-bg-vid{ object-fit:cover; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.deni-phone .goal-bg-shade{ background:linear-gradient(165deg, rgba(0,0,0,.30), rgba(0,0,0,.80)); z-index:1; pointer-events:none; }
.deni-phone .goal-deck-card.has-media > .gd-top,
.deni-phone .goal-deck-card.has-media > .gd-bottom{ -webkit-transform:translateZ(0); transform:translateZ(0); z-index:2; }
.deni-phone .gd-top{ position:relative; display:flex; align-items:center; gap:11px; min-width:0; }
.deni-phone .gd-ic{ width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; }
.deni-phone .gd-name{ flex:1; min-width:0; font-weight:800; font-size:16px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deni-phone .gd-bottom{ position:relative; display:flex; flex-direction:column; gap:7px; }
.deni-phone .gd-amt-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.deni-phone .gd-amt2{ font-weight:800; font-size:30px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deni-phone .gd-pct-low{ flex:none; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.deni-phone .gd-sub-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:-2px; }
.deni-phone .gd-of{ font-weight:700; font-size:13px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.deni-phone .gd-deadline{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:rgba(255,255,255,.62); white-space:nowrap; }
.deni-phone .gd-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.deni-phone .gd-bar-fill{ height:100%; border-radius:99px; background:#fff; }

/* ---------- таббар (.tabbar / .tab / .fab) ---------- */
/* bottom = 14 + safe-area-inset-bottom(34) — как на реальном iPhone с home-индикатором */
.deni-phone .tabbar{ position:absolute; left:14px; right:14px; bottom:48px; height:64px; padding:0 8px; z-index:20;
  display:flex; align-items:center; justify-content:space-around;
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow-lg); }
.deni-phone .tab{ position:relative; z-index:1; display:flex; flex-direction:row; align-items:center; gap:8px; height:46px; padding:0 12px;
  background:none; border:none; cursor:pointer; color:var(--fg3); border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-size:13.5px; font-weight:700; white-space:nowrap; }
.deni-phone .tab span{ display:none; max-width:0; overflow:hidden; }
.deni-phone .tab.active{ color:var(--fg-on-accent); padding:0 16px; background:var(--accent); }
.deni-phone .tab.active span{ display:inline; max-width:120px; }
.deni-phone .fab{ width:50px; height:50px; border-radius:50%; border:none; flex:none;
  background:var(--accent); color:var(--fg-on-accent); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); margin:0 2px; }