:root {
      --bg: #071422; --card: #0c1c30; --line: #1a3d5c;
      --text: #e7f6ff; --muted: #8eb4cc; --yellow: #f0c14a; --green: #1ec98a; --red: #ff5d6c;
      --shadow: 0 10px 24px rgba(0, 8, 20, .35);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { background: #01060f; }
    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;
    }
    header {
      top: 0; width: min(480px, 100%); height: calc(58px + env(safe-area-inset-top));
      background: #071422; color: #e7f6ff;
      padding: env(safe-area-inset-top) 14px 0;
      display: flex; align-items: center; gap: 8px;
    }
    .brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; padding: 0; flex-shrink: 1; min-width: 0; }
    .mark { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: transparent; }
    .brand b { font-size: 16px; white-space: nowrap; font-weight: 700; color: #fff; }
    .lang-btn, .icon-btn {
      margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: 0;
      border-radius: 8px; min-height: 32px; padding: 0 8px; font-weight: 700; font-size: 11px;
      position: relative; z-index: 2; touch-action: manipulation; flex-shrink: 0;
      display: inline-grid; place-items: center; max-width: 108px; overflow: hidden;
    }
    .icon-btn { margin-left: 6px; width: 32px; padding: 0; }
    .reg {
      background: #3ad4ff; color: #041018; font-weight: 800; border-radius: 8px;
      padding: 8px 12px; font-size: 13px;
    }
    main { padding: calc(70px + env(safe-area-inset-top)) 14px calc(78px + env(safe-area-inset-bottom)); background: transparent; }
    .hint { color: #c5e6f6; font-size: 12px; margin: 0 0 12px; line-height: 1.5; }
    h1 { font-size: 18px; margin: 18px 0 10px; letter-spacing: 0; font-weight: 750; text-transform: none; color: #e7f6ff; }
    .intro { color: #b7d7e8; font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
    .box .intro { color: var(--muted); }
    .poster {
      display: block; width: 100%; text-align: left; color: var(--text);
      border: 0; border-radius: 20px; padding: 18px;
      background: var(--card); box-shadow: var(--shadow);
    }
    .poster h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: 0; font-weight: 750; color: var(--text); }
    .poster p, .poster li { color: var(--muted); 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: ""; }
    .gift {
      margin-top: 14px; text-align: left; border: 1px solid rgba(255,70,100,.55); border-radius: 16px;
      padding: 16px 14px; background: rgba(26,6,16,.6); color: #fff;
      position: relative; overflow: hidden; isolation: isolate;
    }
    .gift-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
    .gift-bg img {
      width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; opacity: .55;
      transform-origin: 60% 50%; animation: giftDrift 12s ease-in-out infinite alternate;
    }
    .gift-bg::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1;
      background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
      animation: giftShine 5s ease-in-out infinite;
    }
    .gift-bg::after {
      content: ""; position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(90deg, rgba(20,4,12,.7) 0%, rgba(20,4,12,.35) 55%, rgba(20,4,12,.1) 100%);
    }
    @keyframes giftDrift {
      0% { transform: scale(1.02) translate(0, 0); }
      100% { transform: scale(1.15) translate(-3%, -3%); }
    }
    @keyframes giftShine {
      0%, 30% { left: -60%; }
      80%, 100% { left: 120%; }
    }
    .gift b { display: block; color: #f0c14a; font-size: 32px; margin: 0 0 6px; letter-spacing: 0; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
    .gift span { display: block; font-size: 13px; color: #fff; margin-bottom: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
    .gift .reg { display: inline-block; margin: 10px 0 0; padding: 12px 16px; }
    @media (prefers-reduced-motion: reduce) { .gift-bg img, .gift-bg::before { animation: none; } }
    .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
    .stats a { display: flex; flex-direction: column; gap: 6px; min-height: 88px; padding: 14px; background: var(--card); border: 0; border-radius: 16px; box-shadow: var(--shadow); color: inherit; text-align: left; }
    .stats strong { font-size: 20px; letter-spacing: 0; }
    .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); }
    .showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .shot { text-align: center; min-height: 112px; margin: 0; padding: 12px 8px; background: var(--card); border: 0; border-radius: 16px; box-shadow: var(--shadow); color: inherit; }
    .shot img { width: 40px; height: 40px; 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: 72px 1fr; gap: 12px; align-items: center; margin: 0; padding: 12px; background: var(--card); border: 0; border-radius: 16px; box-shadow: var(--shadow); color: inherit; }
    .album img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #10283f; }
    .album b { display: block; margin-bottom: 4px; font-size: 15px; }
    .album span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .heat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .heat img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 4px; }
    .heat button, .heat a { border: 0; border-radius: 14px; min-height: 72px; color: #fff; font-weight: 800; padding: 10px; text-align: left; }
    .g { background: #0c7ea6; } .r { background: #b4234a; }
    .chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chips button, .chips a { flex: 0 0 auto; background: var(--card); color: var(--muted); border: 0; border-radius: 999px; padding: 8px 12px; font-weight: 700; box-shadow: var(--shadow); }
    .chips button.on, .chips a.on { background: #3ad4ff; color: #041018; }
    .coin, .news-item, .sector { display: block; margin: 0 0 8px; background: var(--card); border: 0; border-radius: 16px; box-shadow: var(--shadow); color: inherit; padding: 12px 14px; }
    .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: #10283f; }
    .hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .tile { min-height: 100px; background: var(--card); border: 0; border-radius: 16px; box-shadow: var(--shadow); color: inherit; padding: 14px; display: block; }
    .tile b { display: block; margin-bottom: 6px; font-size: 15px; }
    .tile span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .box { border: 0; border-radius: 18px; padding: 14px; margin-bottom: 12px; background: var(--card); box-shadow: var(--shadow); }
    .box h2 { margin: 0 0 10px; font-size: 16px; letter-spacing: 0; text-transform: none; }
    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
    .field input, .field select { background: #10283f; color: var(--text); border: 0; border-radius: 12px; padding: 12px; width: 100%; }
    .go { display: grid; place-items: center; width: 100%; background: #3ad4ff; color: #041018; font-weight: 800; border: 0; border-radius: 12px; min-height: 48px; text-decoration: none; }
    .ghost { display: inline-block; margin-top: 8px; background: transparent; color: #3ad4ff; border: 1px solid #3ad4ff; border-radius: 12px; 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; }
    .tabbar {
      top: auto; bottom: 0;
      width: min(480px, 100%);
      display: grid; grid-template-columns: repeat(5, 1fr);
      background: #071422;
      border: 0; border-top: 1px solid var(--line); border-radius: 0;
      padding: 4px 4px env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(0, 8, 20, .35);
    }
    .tabbar button, .tabbar a { background: none; border: 0; color: var(--muted); padding: 8px 2px; font-size: 12px; font-weight: 700; min-height: 48px; border-radius: 12px; touch-action: manipulation; position: relative; z-index: 2; display: grid; place-items: center; text-align: center; }
    .tabbar button.on, .tabbar a.on { color: #3ad4ff; background: rgba(58,212,255,.16); }
    .back { background: none; border: 0; color: #3ad4ff; font-weight: 700; padding: 0 0 8px; }
    body:has(.loader:not(.is-hidden)) .phone { visibility: hidden; }
    .loader {
      position: fixed; inset: 0; z-index: 80;
      background: transparent;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      padding: 20px; pointer-events: none;
    }
    .loader-card {
      width: min(480px, 100%); margin: 0;
      background: transparent; border: 0; border-radius: 0;
      padding: 0 16px; text-align: left; box-shadow: none; color: #e7f6ff;
    }
    .ld-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .ld-head img { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
    .loader-card h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: 0; color: #3ad4ff; }
    .loader-card .lead { color: #c5e6f6; font-size: 14px; line-height: 1.45; margin: 0; }
    .loader-card ul { text-align: left; padding: 0; list-style: none; margin: 0 0 12px; display: grid; gap: 8px; }
    .loader-card li {
      color: #e7f6ff; font-size: 14px; line-height: 1.4;
      padding: 10px 14px; border: 1px solid rgba(58,212,255,.65);
      border-radius: 999px; background: rgba(7,20,34,.72);
    }
    .bonus {
      display: flex; align-items: center; gap: 12px;
      background: linear-gradient(135deg, #0a2b50 0%, #0d3f6e 100%); color: #e7f6ff;
      border: 1px solid rgba(58,212,255,.7); border-radius: 16px; padding: 10px 12px;
      font-weight: 700; margin: 0;
    }
    .bonus img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; display: block; margin: 0; background: #0a1e34; flex-shrink: 0; }
    .track { height: 5px; background: rgba(255,255,255,.28); border-radius: 99px; overflow: hidden; width: min(448px, calc(100% - 32px)); margin-top: 14px; }
    .bar { height: 100%; width: 0; background: #3ad4ff; }
    .is-hidden { display: none !important; pointer-events: none !important; }
    .lang-list button, .lang-list a { width: 100%; text-align: left; color: inherit; border-radius: 14px; padding: 14px; margin: 0 0 8px; font-weight: 700; display: block; background: var(--card); border: 0; box-shadow: var(--shadow); }
    .lang-list button.on, .lang-list a.on { color: #3ad4ff; outline: 2px solid #3ad4ff; }
    html[dir="rtl"] .kv, html[dir="rtl"] .coin { direction: rtl; }