:root {
  --bg: #0e1317; --fg: #e6ebef; --accent: #22a884;
  --plate: #f5f7f8; --ink: #12181c; --tg: #1a8ad0; --mx: #6b3bff;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  padding: 0 16px;
  color: var(--fg);
  background: var(--bg) radial-gradient(55% 60% at 50% 45%, rgba(34,168,132,.22), transparent 65%);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.top, .center, .foot { position: relative; z-index: 1; }

.top { display: flex; align-items: center; gap: 10px; height: 56px; font-size: 15px; }
.top .brand { font-weight: 800; }
.top .dim { font-weight: 500; opacity: .55; }

.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 0; }
h1 { margin: 0; font-family: Unbounded, Manrope, sans-serif; font-weight: 400; font-size: clamp(26px, 4vw, 44px); letter-spacing: -.01em; line-height: 1.1; }
.accent { color: var(--accent); }
/* Вордмарк как в заставке PROSHKA (electron-main.js, createSplashWindow): квадратный техно-моно, тяжёлый вес, широкая разрядка */
.wm { font-family: "Cascadia Mono", Consolas, "Lucida Console", ui-monospace, monospace; font-weight: 700; letter-spacing: .08em; }
.sub { margin: 10px 0 28px; font-size: clamp(14px, 1.4vw, 18px); opacity: .72; }

.plate {
  width: 100%; max-width: 560px; padding: 22px; display: flex; gap: 28px;
  background: var(--plate); color: var(--ink); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.channel { flex: 1; display: flex; flex-direction: column; align-items: center; }
.qr { width: 100%; max-width: 200px; height: auto; border-radius: 8px; }
.name { margin-top: 12px; font-weight: 800; font-size: 16px; }
.tg { color: var(--tg); } .mx { color: var(--mx); }
.btn { margin-top: 12px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: #178a6b; outline: none; }
.btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--ink); }

.foot { padding: 16px 0 20px; text-align: center; font-size: 12px; opacity: .6; }

@media (max-width: 640px) {
  .plate { flex-direction: column; gap: 22px; padding: 18px; }
  .sub { margin-bottom: 20px; }
}