:root {
  color-scheme: dark;
  --bg: #07121f;
  --panel: #0d1d2d;
  --panel-soft: #10263a;
  --line: rgba(87, 190, 255, .2);
  --cyan: #32cfff;
  --cyan-soft: #98eaff;
  --text: #f1f8ff;
  --muted: #9bb0c3;
  --tg-bg: var(--tg-theme-bg-color, var(--bg));
  --tg-text: var(--tg-theme-text-color, var(--text));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(27, 144, 225, .25), transparent 55%),
    linear-gradient(180deg, #081522 0%, #050c15 100%);
  color: var(--tg-text);
}
button { font: inherit; }
.app-shell {
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
}
.topbar { display: flex; align-items: center; gap: 12px; padding: 7px 2px 24px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid rgba(50, 207, 255, .65); border-radius: 14px;
  color: var(--cyan-soft); font-size: 27px; font-weight: 800;
  background: linear-gradient(145deg, rgba(35, 129, 192, .28), rgba(7, 18, 31, .85));
  box-shadow: 0 0 20px rgba(50, 207, 255, .16), inset 0 0 14px rgba(50, 207, 255, .1);
}
.brand-copy { flex: 1; }
.eyebrow { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.02em; }
.connection { color: #55e5b1; font-size: 13px; text-shadow: 0 0 12px #55e5b1; }
.screen { animation: appear .18s ease-out; }
@keyframes appear { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.welcome {
  position: relative; overflow: hidden; padding: 23px 21px; border-radius: 22px;
  border: 1px solid rgba(63, 184, 255, .3);
  background: linear-gradient(135deg, rgba(14, 53, 80, .95), rgba(9, 23, 38, .98) 65%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}
.welcome:after {
  content: "Ø"; position: absolute; right: -10px; top: -35px; color: rgba(56, 197, 255, .08);
  font-weight: 900; font-size: 180px; line-height: 1;
}
.kicker { color: var(--cyan-soft); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.welcome h2 { position: relative; z-index: 1; margin: 9px 0 8px; max-width: 340px; font-size: 28px; line-height: 1.1; }
.welcome p { position: relative; z-index: 1; max-width: 390px; margin: 0; color: #bfd4e6; font-size: 14px; line-height: 1.55; }
.section-title { margin: 25px 2px 12px; color: #bfd4e6; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.feature {
  display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line);
  border-radius: 17px; background: linear-gradient(145deg, rgba(16, 38, 58, .95), rgba(10, 24, 38, .95));
}
.feature-icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 15px;
  background: rgba(50, 207, 255, .1); color: var(--cyan); font-size: 24px;
}
.feature h3 { margin: 0 0 4px; font-size: 15px; }
.feature p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.badge { margin-left: auto; padding: 6px 9px; border: 1px solid rgba(50, 207, 255, .25); border-radius: 999px; color: var(--cyan-soft); font-size: 10px; white-space: nowrap; }
.notice { margin-top: 14px; padding: 13px 14px; border-left: 2px solid #e9b65d; border-radius: 5px 12px 12px 5px; background: rgba(233, 182, 93, .08); color: #d7c49d; font-size: 12px; line-height: 1.5; }
.page-heading { margin: 7px 2px 18px; }
.page-heading h2 { margin: 0 0 6px; font-size: 25px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-state { padding: 30px 19px; text-align: center; border: 1px dashed rgba(105, 176, 220, .27); border-radius: 18px; background: rgba(12, 29, 45, .58); }
.empty-symbol { margin-bottom: 10px; color: var(--cyan); font-size: 35px; }
.empty-state h3 { margin: 0 0 7px; font-size: 16px; }
.empty-state p { max-width: 340px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.55; }
.tabbar {
  position: fixed; z-index: 5; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 24px), 584px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  padding: 7px; border: 1px solid rgba(111, 173, 214, .18); border-radius: 18px;
  background: rgba(8, 20, 32, .94); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 5px; border: 0;
  border-radius: 12px; background: transparent; color: #92a8bb; font-size: 10px; font-weight: 700;
}
.tab span { font-size: 18px; line-height: 1; }
.tab.active { color: #eafaff; background: linear-gradient(135deg, rgba(23, 141, 199, .35), rgba(24, 83, 126, .25)); box-shadow: inset 0 0 0 1px rgba(50, 207, 255, .15); }
.preview-tag { display: none; margin: 0 2px 12px; color: #ffce78; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
body.preview .preview-tag { display: block; }
@media (min-width: 520px) { .app-shell { padding-left: 24px; padding-right: 24px; } .welcome { padding: 28px; } }