:root {
      --bg: #050714; --card: rgba(18, 28, 64, .62); --line: rgba(120, 150, 255, .18);
      --text: #f4f7ff; --muted: #9aa6c7; --yellow: #4d7cff; --green: #2ee6a6; --red: #ff5d73;
      --shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { background: #02101c; }
    body {
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans", sans-serif;
      color: var(--text); min-height: 100vh;
      background: transparent;
      overflow-x: hidden;
    }
    canvas.live-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
    button, input, select { font-family: inherit; font-size: 16px; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    .phone {
      width: min(480px, 100%); min-height: 100vh; margin: 0 auto; position: relative;
      background: transparent;
    }
    header, .tabbar {
      position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 40;
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    }
    header {
      top: 0; width: min(480px, 100%);
      background: rgba(6,10,24,.78);
      border-bottom: 1px solid var(--line);
      padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: inherit; padding: 0; flex-shrink: 1; min-width: 0; }
    .mark { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 6px 16px rgba(5,0,255,.25); flex-shrink: 0; }
    .brand b { font-size: 15px; white-space: nowrap; letter-spacing: -.03em; }
    .lang-btn, .icon-btn {
      margin-left: auto; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line);
      border-radius: 999px; min-height: 34px; padding: 0 10px; font-weight: 700; font-size: 12px;
      position: relative; z-index: 2; touch-action: manipulation; flex-shrink: 0;
      display: inline-grid; place-items: center;
    }
    .icon-btn { margin-left: 8px; width: 34px; padding: 0; }
    .reg {
      background: linear-gradient(180deg, #6d92ff, #0500FF);
      color: #fff; font-weight: 800; border-radius: 999px; padding: 8px 14px; font-size: 13px;
      box-shadow: 0 8px 18px rgba(5,0,255,.32);
    }
    main { padding: 78px 14px calc(96px + env(safe-area-inset-bottom)); }
    .hint { color: var(--muted); font-size: 12px; margin: 0 0 12px; line-height: 1.5; }
    h1 { font-size: 26px; margin: 18px 0 10px; letter-spacing: -.04em; font-weight: 750; }
    .intro { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
    .poster {
      display: block; width: 100%; text-align: left; color: inherit; border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px; padding: 18px;
      background:
        radial-gradient(280px 160px at 90% 0%, rgba(5,0,255,.48), transparent 60%),
        linear-gradient(160deg, rgba(20,40,110,.72), rgba(6,8,20,.94) 55%);
      box-shadow: var(--shadow);
    }
    .poster h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.03em; }
    .poster p, .poster li { color: rgba(244,246,251,.78); font-size: 13px; line-height: 1.55; }
    .poster ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
    .poster li::before { content: "✓ "; color: var(--yellow); font-weight: 800; }
    .gift { margin-top: 14px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; background: rgba(8,10,16,.45); }
    .gift img { width: 100%; height: auto; border-radius: 14px; display: block; }
    .gift b { display: block; color: var(--yellow); font-size: 32px; margin: 10px 0 4px; letter-spacing: -.03em; }
    .gift span { display: block; font-size: 13px; color: var(--text); margin-bottom: 8px; }
    .gift .reg { display: block; margin: 4px 0 0; padding: 12px; }
    .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    .stats button, .stats a, .coin, .tile, .news-item, .sector, .shot, .album a, .box, .lang-list button, .lang-list a {
      background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.16);
    }
    .stats button, .stats a, .coin, .tile, .news-item, .sector, .shot, .album a {
      width: 100%; text-align: left; color: inherit; border-radius: 18px; padding: 14px;
    }
    .showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .shot { text-align: center; min-height: 124px; margin: 0; }
    .shot img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: block; }
    .shot b { display: block; font-size: 13px; }
    .shot em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; }
    .album { display: grid; gap: 10px; }
    .album a { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; margin: 0; }
    .album img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; background: #121a30; }
    .album b { display: block; margin-bottom: 4px; }
    .album span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .heat img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: -6px; margin-right: 6px; }
    .stats button, .stats a { display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
    .stats strong { font-size: 20px; letter-spacing: -.03em; }
    .stats em { font-style: normal; font-size: 12px; font-weight: 700; }
    .muted { color: var(--muted); font-size: 12px; }
    .up { color: var(--green); } .down { color: var(--red); } .flat { color: var(--muted); }
    .chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 8px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chips button, .chips a { flex: 0 0 auto; background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
    .chips button.on, .chips a.on { background: #0500FF; color: #fff; border-color: transparent; }
    .coin, .news-item, .sector, .tile { display: block; margin-bottom: 10px; }
    .coin { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
    .coin b { font-size: 15px; } .coin i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 6px; }
    .symline { display: flex; align-items: center; }
    .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 10px; background: #1c2230; }
    .hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .tile { min-height: 104px; }
    .tile b { display: block; margin-bottom: 6px; font-size: 16px; }
    .tile span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .box { border-radius: 20px; padding: 14px; margin-bottom: 12px; }
    .box h2 { margin: 0 0 10px; font-size: 16px; }
    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
    .field input, .field select {
      background: rgba(4,8,22,.55); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 13px; width: 100%;
    }
    .go {
      display: grid; place-items: center; width: 100%; background: linear-gradient(180deg, #6d92ff, #0500FF); color: #fff;
      font-weight: 800; border: 0; border-radius: 999px; min-height: 48px; text-decoration: none;
    }
    .ghost { display: inline-block; margin-top: 8px; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-weight: 700; }
    .kv { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
    .kv span:last-child { text-align: right; }
    .heat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .heat button, .heat a { border: 0; border-radius: 16px; min-height: 78px; color: #fff; font-weight: 800; padding: 10px; text-align: left; }
    .g { background: linear-gradient(160deg, #1f8f63, #0d6b49); } .r { background: linear-gradient(160deg, #c43b55, #7d2436); }
    .tabbar {
      bottom: calc(10px + env(safe-area-inset-bottom));
      width: min(452px, calc(100% - 16px));
      display: grid; grid-template-columns: repeat(5, 1fr);
      background: rgba(8,12,28,.86);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 22px;
      padding: 6px;
      box-shadow: var(--shadow);
    }
    .tabbar button, .tabbar a { background: none; border: 0; color: var(--muted); padding: 8px 2px; font-size: 11px; font-weight: 700; min-height: 46px; border-radius: 16px; touch-action: manipulation; position: relative; z-index: 2; display: grid; place-items: center; text-align: center; }
    .tabbar button.on, .tabbar a.on { color: #fff; background: linear-gradient(180deg, #6d92ff, #0500FF); }
    .back { background: none; border: 0; color: var(--yellow); font-weight: 700; padding: 0 0 8px; }
    .loader { position: fixed; inset: 0; z-index: 80; background: rgba(5,6,16,.9); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); pointer-events: none; }
    .loader-card { width: min(420px, 100%); background: rgba(10,16,40,.94); border: 1px solid var(--line); border-radius: 24px; padding: 24px 18px; text-align: center; box-shadow: var(--shadow); }
    .loader-card > img { width: 56px; height: 56px; border-radius: 16px; }
    .loader-card h2 { margin: 12px 0 6px; font-size: 22px; letter-spacing: -.03em; }
    .loader-card .lead, .loader-card li { color: var(--muted); font-size: 14px; line-height: 1.55; }
    .loader-card ul { text-align: left; padding: 0; list-style: none; margin: 14px 0; }
    .loader-card li { padding: 8px 0; border-bottom: 1px solid var(--line); }
    .bonus { background: rgba(5,0,255,.16); color: #c9d7ff; border: 1px solid rgba(90,130,255,.4); border-radius: 16px; padding: 12px; font-weight: 800; margin-bottom: 12px; }
    .bonus img { width: 100%; height: 92px; object-fit: cover; object-position: left center; border-radius: 12px; display: block; margin: 0 0 8px; }
    .track { height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
    .bar { height: 100%; width: 0; background: linear-gradient(90deg, #6d92ff, #0500FF); }
    .is-hidden { display: none !important; pointer-events: none !important; }
    .lang-list button, .lang-list a { width: 100%; text-align: left; color: inherit; border-radius: 16px; padding: 14px; margin-bottom: 8px; font-weight: 700; display: block; }
    .lang-list button.on, .lang-list a.on { border-color: var(--yellow); }
    html[dir="rtl"] .kv, html[dir="rtl"] .coin { direction: rtl; }