page { color: #0b1f55; background: #f5f8ff; }

.home-page {
  min-height: 100vh;
  padding: 0 13px;
  background:
    radial-gradient(circle at 13% 3%, rgba(98, 142, 255, .10), transparent 18%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%);
}

/* 顶部品牌和搜索 */
.brand-row { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; min-height: 53px; padding: 4px 1px 8px; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; flex: 1; }
.brand-title { color: #081c50; font-size: 20px; font-weight: 900; line-height: 1.25; letter-spacing: 0.5px; }
.brand-subtitle { margin-top: 2px; color: #62749c; font-size: 10.5px; white-space: nowrap; }
.brand-blog-link { color: #315cf4; font-weight: 800; }
.search-wrap { position: relative; width: 171px; margin-left: 9px; flex: none; }
.search-box { display: flex; align-items: center; width: 100%; height: 34px; padding: 0 8.5px; border: 0.5px solid #e2e8f6; border-radius: 19px; color: #6b7da6; font-size: 10.5px; background: rgba(255, 255, 255, .98); box-shadow: 0 3px 10px rgba(44, 78, 151, .08); }
.search-icon { margin-right: 6px; color: #6e82b0; font-size: 19px; line-height: 1; }
.search-input { min-width: 0; height: 34px; color: #172956; font-size: 10px; line-height: 34px; flex: 1; }
.search-placeholder { color: #7e8dad; }
.search-clear { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 2.5px; border-radius: 50%; color: #7584a4; font-size: 14.5px; background: #edf1f8; flex: none; }
.search-mask { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; left: 0; background: rgba(16, 29, 69, .24); }
.search-results { position: absolute; z-index: 70; top: 39px; right: 0; width: calc(100vw - 26px); overflow: hidden; border: 0.5px solid #e0e6f4; border-radius: 11px; background: #fff; box-shadow: 0 9px 25px rgba(26, 45, 105, .22); }
.search-result-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 11px; border-bottom: 0.5px solid #edf0f6; color: #172956; font-size: 11px; font-weight: 900; }
.search-count { color: #7180a1; font-size: 9px; font-weight: 600; }
.search-result-list { height: 260px; }
.search-guide,.search-empty { padding: 20px 14px; color: #7785a3; font-size: 10.5px; line-height: 1.7; text-align: center; }
.search-result-item { display: flex; align-items: center; min-height: 43px; padding: 5.5px 9.5px; border-bottom: 0.5px solid #edf0f6; background: #fff; }
.search-result-item:last-child { border-bottom: 0; }
.search-result-pressed { background: #f2f4ff; }
.search-type { display: flex; align-items: center; justify-content: center; width: 38px; height: 19px; border-radius: 5px; color: #fff; font-size: 8px; font-weight: 800; background: #5b51e9; flex: none; }
.type-recommendation { background: #ec6d35; }
.type-tool { background: #0ca87b; }
.search-result-copy { display: flex; min-width: 0; margin-left: 7px; flex: 1; flex-direction: column; }
.search-result-title { overflow: hidden; color: #14254d; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.search-result-subtitle { margin-top: 2.5px; overflow: hidden; color: #7885a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-arrow { margin-left: 5px; color: #7885a2; font-size: 17px; }

/* 首屏重点推荐 Banner */
.hero-panel { margin-bottom: 8.5px; }
.opportunity-swiper { height: 132px; }
.opportunity-banner { position: relative; display: flex; box-sizing: border-box; height: 130px; margin: 1px; overflow: hidden; border: 0.5px solid rgba(204, 216, 250, .9); border-radius: 11.5px; background: linear-gradient(125deg, #f4f4ff 0%, #e8efff 58%, #d7edff 100%); box-shadow: 0 5px 13.5px rgba(63, 86, 160, .12); }
.uploaded-banner-image { display: block; width: 100%; height: 100%; }
.opportunity-note { display: block; padding: 4.5px 1px 0.5px; color: #6f7d9d; font-size: 9px; line-height: 1.5; text-align: left; }
.banner-primary { background: linear-gradient(125deg, #f4f2ff 0%, #e8edff 57%, #d9eeff 100%); }
.banner-blue { background: linear-gradient(125deg, #f1f7ff 0%, #e3edff 57%, #d7e9ff 100%); }
.banner-violet { background: linear-gradient(125deg, #f8f2ff 0%, #ece7ff 57%, #e2edff 100%); }
.banner-copy { position: relative; z-index: 2; display: flex; width: 66%; padding: 9.5px 0 8.5px 14.5px; flex-direction: column; }
.banner-label { align-self: flex-start; padding: 2.5px 9px; border-radius: 9.5px; color: #fff; font-size: 9px; font-weight: 800; background: linear-gradient(100deg, #6847f7, #4a34eb); }
.opportunity-name { display: block; margin-top: 5.5px; color: #112b91; font-size: 18.5px; font-weight: 900; line-height: 1.23; white-space: pre-line; }
.opportunity-summary { display: block; margin-top: 2.5px; color: #172b66; font-size: 12px; font-weight: 700; line-height: 1.35; }
.banner-features { display: flex; align-items: center; margin-top: 5.5px; flex-wrap: wrap; }
.banner-feature { display: flex; align-items: center; margin: 0 6.5px 2.5px 0; color: #445a8b; font-size: 8px; font-weight: 700; }
.feature-check { display: flex; align-items: center; justify-content: center; width: 10.5px; height: 10.5px; margin-right: 2.5px; border-radius: 50%; color: #fff; font-size: 7px; background: #5c48ef; }
.banner-action { align-self: flex-start; margin-top: auto; padding: 4.5px 18.5px; border-radius: 12px; color: #fff; font-size: 10px; font-weight: 800; background: linear-gradient(100deg, #344df7, #7636ed); box-shadow: 0 2.5px 6px rgba(76, 54, 225, .18); }
.hero-art { position: absolute; z-index: 1; right: 0; bottom: 0; width: 43%; height: 100%; background: radial-gradient(circle at 55% 46%, rgba(255, 255, 255, .92), rgba(146, 182, 255, .12) 42%, transparent 68%); }
.hero-slogan { position: absolute; z-index: 3; top: 14px; right: 11px; color: #183be0; font-size: 10px; font-weight: 900; line-height: 1.35; text-align: center; white-space: pre-line; transform: rotate(-8deg); }
.stair { position: absolute; border: 0.5px solid rgba(255, 255, 255, .72); border-radius: 3.5px; background: linear-gradient(145deg, rgba(204, 219, 255, .95), rgba(90, 112, 241, .68)); box-shadow: inset 0 4px 7px rgba(255, 255, 255, .42), 0 4.5px 7px rgba(59, 74, 179, .13); transform: skewY(-8deg); }
.stair-back { right: 33.5px; bottom: 56px; width: 45.5px; height: 22.5px; }
.stair-middle { right: 25px; bottom: 35px; width: 59px; height: 27.5px; }
.stair-front { right: 14.5px; bottom: 9.5px; width: 75px; height: 34px; }
.hero-coin { position: absolute; z-index: 3; right: 61.5px; bottom: 39px; display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; border: 4px solid rgba(177, 171, 255, .9); border-radius: 50%; color: #fff; font-size: 24.5px; font-weight: 900; line-height: 1; background: radial-gradient(circle at 35% 30%, #d5c7ff, #7752ec 45%, #314bd9 78%); box-shadow: 0 5px 10px rgba(46, 55, 170, .30), inset 0 0 0 1.5px rgba(255, 255, 255, .55); transform: rotate(9deg); }
.hero-arrow { position: absolute; z-index: 2; right: 1px; bottom: 6.5px; color: #7652ed; font-size: 60px; font-weight: 900; line-height: 1; transform: rotate(-4deg); opacity: .88; }
.opportunity-dots { display: flex; align-items: center; justify-content: center; gap: 4.5px; margin-top: 1px; }
.opportunity-dot { width: 6px; height: 6px; border-radius: 50%; background: #cfd5e5; }
.opportunity-dot-active { background: #244cf0; }

/* 通用白色区块 */
.panel { margin-bottom: 8.5px; padding: 7.5px 6.5px; border: 0.5px solid #e7ecf6; border-radius: 11px; background: rgba(255, 255, 255, .97); box-shadow: 0 3px 10px rgba(47, 74, 140, .075); }
.section-head { display: flex; align-items: center; justify-content: space-between; min-height: 21px; padding: 0 2px 6px; }
.section-title { color: #0d204f; font-size: 13.5px; font-weight: 900; }
.more { color: #1748ef; font-size: 9.5px; font-weight: 700; }

/* 行情速览 */
.market-symbol { margin-right: 4px; font-size: 12px; }
.update-time { margin-left: 8.5px; color: #7080a2; font-size: 8.5px; }
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.market-card { position: relative; display: flex; min-height: 66px; padding: 6px 6px; overflow: hidden; border: 0.5px solid #e6ebf5; border-radius: 7.5px; flex-direction: column; background: #fff; box-shadow: 0 1px 3.5px rgba(34, 55, 112, .04); }
.market-name { color: #172955; font-size: 9px; font-weight: 800; }
.market-value { margin-top: 1.5px; color: #00ad78; font-size: 14.5px; font-weight: 900; line-height: 1.35; word-break: break-all; }
.market-value.market-green { color: #00ad78; font-size: 14.5px; word-break: normal; }
.market-note { color: #647397; font-size: 8px; }
.market-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.market-change { color: #0d1839; font-size: 8px; font-weight: 700; }
.market-icon { display: flex; align-items: center; justify-content: center; width: 18.5px; height: 18.5px; border-radius: 50%; color: #395ff1; font-size: 12px; background: #edf2ff; }
.market-disclosure { display: block; padding: 6px 2px 0; color: #8a94aa; font-size: 8px; line-height: 1.5; text-align: center; }

/* 热门推荐 2×2 */
.recommendation-state { padding: 17px 10px; border-radius: 8px; color: #7b88a5; font-size: 9.5px; line-height: 1.5; text-align: center; background: #f7f9ff; }
.recommendation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6.5px; }
.recommendation-card { position: relative; min-width: 0; min-height: 74px; padding: 6.5px; overflow: hidden; border: 0.5px solid #dce8fb; border-radius: 10px; background: radial-gradient(circle at 16% 70%, rgba(255,255,255,.95), transparent 38%), linear-gradient(135deg, #f4faff, #edf5ff); box-shadow: 0 2.5px 7px rgba(49, 83, 155, .09); }
.recommendation-card::after { position: absolute; right: -11px; bottom: -18.5px; width: 62.5px; height: 41px; border: 8px solid rgba(255,255,255,.48); border-radius: 50%; content: ''; transform: rotate(-16deg); }
.recommendation-card-pressed { opacity: .82; transform: scale(.992); }
.recommendation-card-main { position: relative; z-index: 1; display: flex; align-items: flex-start; min-width: 0; height: 60px; }
.rec-card-green { border-color: #ccebe7; background: radial-gradient(circle at 14% 72%, rgba(255,255,255,.96), transparent 40%), linear-gradient(135deg, #f1fffb, #e8f9f5); }
.rec-card-yellow { border-color: #f4df9f; background: radial-gradient(circle at 14% 72%, rgba(255,255,255,.96), transparent 40%), linear-gradient(135deg, #fffdf3, #fff7db); }
.rec-card-red { border-color: #f7d4dc; background: radial-gradient(circle at 14% 72%, rgba(255,255,255,.96), transparent 40%), linear-gradient(135deg, #fff8fa, #fff0f3); }
.rec-card-orange { border-color: #f6dec7; background: radial-gradient(circle at 14% 72%, rgba(255,255,255,.96), transparent 40%), linear-gradient(135deg, #fffaf5, #fff2e7); }
.rec-card-blue { border-color: #d4def9; background: radial-gradient(circle at 14% 72%, rgba(255,255,255,.96), transparent 40%), linear-gradient(135deg, #f7f9ff, #eef2ff); }
.rec-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; min-height: 0; overflow: hidden; border: 0.5px solid rgba(255,255,255,.94); border-radius: 10px; color: #fff; font-size: 21px; font-weight: 900; flex: 0 0 60px; box-shadow: 0 3.5px 8px rgba(42, 76, 150, .14), inset 0 0 7.5px rgba(255,255,255,.22); }
.rec-icon-image { display: block; width: 100%; height: 100%; border-radius: 9.5px; }
.rec-green { background: linear-gradient(135deg, #15c59c, #00a978); }
.rec-yellow { color: #09205d; background: linear-gradient(135deg, #ffd51c, #f1b800); }
.rec-red { background: linear-gradient(135deg, #ee3148, #c91431); }
.rec-orange { background: linear-gradient(135deg, #ff8119, #ff5f00); }
.rec-blue { background: linear-gradient(135deg, #4c7bf6, #4650e8); }
.recommendation-copy { display: flex; min-width: 0; height: 60px; margin-left: 7px; padding: 0; flex: 1; flex-direction: column; }
.recommendation-name-row { display: flex; align-items: center; min-width: 0; }
.recommendation-name { display: block; overflow: hidden; color: #102554; font-size: 10.5px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.rec-tag-row { display: flex; align-items: flex-start; min-width: 0; margin-top: 2.5px; }
.rec-tag { display: -webkit-box; max-width: 100%; padding: 2px 4.5px; overflow: hidden; border-radius: 6px; color: #3455e6; font-size: 7.5px; line-height: 1.25; word-break: break-all; white-space: normal; background: rgba(230,236,255,.92); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rec-button { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: 19.5px; margin-top: auto; padding: 0 7px; border: 1px solid rgba(255,255,255,.95); border-radius: 12px; color: #275fe5; font-size: 8.5px; font-weight: 900; background: rgba(255,255,255,.86); box-shadow: 0 2.5px 6.5px rgba(52, 88, 169, .15), inset 0 0 0 0.5px rgba(93, 142, 240, .16); }
.rec-button-arrow { margin-left: 4px; font-size: 11.5px; font-weight: 900; line-height: 1; }
.rec-button-green { color: #069774; box-shadow: 0 2.5px 6.5px rgba(0, 154, 112, .13), inset 0 0 0 0.5px rgba(0, 170, 124, .16); }
.rec-button-yellow { color: #a96a00; box-shadow: 0 2.5px 6.5px rgba(196, 137, 0, .14), inset 0 0 0 0.5px rgba(220, 161, 0, .17); }
.rec-button-red { color: #d52743; box-shadow: 0 2.5px 6.5px rgba(210, 39, 67, .13), inset 0 0 0 0.5px rgba(220, 54, 78, .16); }
.rec-button-orange { color: #d86000; box-shadow: 0 2.5px 6.5px rgba(216, 96, 0, .14), inset 0 0 0 0.5px rgba(232, 110, 20, .17); }

/* 教程资料快速导航 */
.navigation-web3-row { display:flex; align-items:center; min-height:22px; margin:4px 0 1px; padding:3px 0; line-height:1.65; }
.navigation-web3-title { margin-right:4px; color:#172954; font-size:9px; font-weight:700; flex:none; }
.navigation-web3-tags { display:flex; align-items:center; min-width:0; flex:1; flex-wrap:wrap; }
.navigation-web3-tag { box-sizing:border-box; min-width:24px; margin:1px 3px 1px 0; padding:1px 4.5px; border-radius:6px; color:#71809d; font-size:7.5px; font-weight:500; line-height:1.6; text-align:center; white-space:nowrap; background:#f0f3f9; }
.navigation-web3-tag-wide { min-width:40px; padding-right:6px; padding-left:6px; }
.navigation-web3-link-pressed { opacity:.62; transform:scale(.96); }
.navigation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.navigation-item { display:flex; align-items:center; justify-content:center; min-width:0; min-height:52.5px; padding:5px 2px; border:0.5px solid #e8edf7; border-radius:7px; flex-direction:column; background:#fff; box-shadow:0 1px 3.5px rgba(34,55,112,.045); }
.navigation-blue { background:linear-gradient(145deg,#f8fbff,#edf5ff); }
.navigation-purple { background:linear-gradient(145deg,#faf8ff,#f0edff); }
.navigation-green { background:linear-gradient(145deg,#f4fff9,#e9faef); }
.navigation-sky { background:linear-gradient(145deg,#f7fcff,#eaf6ff); }
.navigation-violet { background:linear-gradient(145deg,#fff9fc,#f4edff); }
.navigation-icon { font-size:19.5px; line-height:1.15; }
.navigation-name { margin-top:4px; color:#172954; font-size:8px; font-weight:800; line-height:1.2; text-align:center; white-space:nowrap; }

/* 工具与资源 */
.resources-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.resource-item { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 52.5px; padding: 5px 2px; border: 0.5px solid #e8edf7; border-radius: 7px; flex-direction: column; background: linear-gradient(145deg, #f8fbff, #edf5ff); box-shadow: 0 1px 3.5px rgba(34, 55, 112, .045); }
.resource-purple { background: linear-gradient(145deg, #faf8ff, #f0edff); }
.resource-green { background: linear-gradient(145deg, #f4fff9, #e9faef); }
.resource-sky { background: linear-gradient(145deg, #f7fcff, #eaf6ff); }
.resource-violet { background: linear-gradient(145deg, #fff9fc, #f4edff); }
.resource-item-pressed { opacity: .72; transform: scale(.98); }
.resource-icon { font-size: 19.5px; line-height: 1.15; }
.resource-name { margin-top: 4px; color: #172954; font-size: 8px; font-weight: 800; white-space: nowrap; }
.home-page .app-legal-disclaimer { margin: 2px 0 4px; padding: 2.5px 2px; border-radius: 0; background: transparent; }

.bottom-space { height: calc(56px + env(safe-area-inset-bottom)); }
.tabbar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-start; height: calc(51px + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); border-top: 0.5px solid #e5eaf3; background: rgba(255, 255, 255, .98); box-shadow: 0 -3px 10px rgba(32, 54, 111, .08); }
.tab-item { position: relative; display: flex; align-items: center; justify-content: center; height: 41px; min-width: 0; color: #a1abc1; flex: 1; flex-direction: column; }
.tab-active { color: #174cf0; }
.tab-active::after { content: ''; position: absolute; right: 31%; bottom: 0; left: 31%; height: 2.5px; border-radius: 2.5px; background: #174cf0; }
.tab-icon-image { display: block !important; width: 21px !important; height: 19px !important; border-radius: 3.5px; flex: none !important; }
.tab-label { display: block; margin-top: 2.5px; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }

@media (max-width: 360px) {
  .home-page { padding-right: 9px; padding-left: 9px; }
  .brand-title { font-size: 17.5px; }
  .brand-subtitle { font-size: 9px; }
  .search-wrap { width: 150px; }
  .search-input { font-size: 9px; }
  .opportunity-name { font-size: 16.5px; }
  .opportunity-summary { font-size: 10.5px; }
  .hero-coin { right: 49px; }
  .market-name { font-size: 8px; }
  .market-value,.market-value.market-green { font-size: 13px; }
  .recommendation-name { font-size: 9px; }
  .rec-tag { font-size: 6px; }
  .navigation-name { font-size: 7px; }
  .resource-name { font-size: 7px; }
}