/* =========================================================
   JMT 云引擎系统 · 统一设计系统
   依据 Figma 设计稿（首页/产出/社区/引擎详情）抽取
   ========================================================= */

:root {
  /* 背景与卡片 */
  --bg: #000000;
  --card: #111415;
  --card-2: #171717;
  --card-3: #0E0D0D;
  --card-4: #262626;
  --card-5: #393939;

  /* 金色渐变（按钮/强调/图标底） */
  --gold-grad: linear-gradient(276.69deg, #FFBF00 0%, #FFD84D 0.01%, #D99535 95.92%);
  --gold-grad-h: linear-gradient(90deg, #FFBF00 0%, #FFD499 0%, #D99535 100%);
  --gold-grad-v: linear-gradient(180deg, #D99535 0%, #FAE037 100%);
  --gold-grad-bar: linear-gradient(180deg, #FFBF00 0%, #D99535 0%, #FFF3A8 45.19%, #D99535 100%);

  /* 金色文字渐变 */
  --text-gold-1: linear-gradient(269.91deg, #FFEF5E 63.07%, #FF5500 99.92%);
  --text-gold-2: linear-gradient(185.02deg, #FFEF5E -3.17%, #C77E00 110.12%);
  --text-gold-3: linear-gradient(90deg, #FFC000 30.29%, #FEDB4E 68%, #FFB41F 100%);

  /* 强调色 */
  --amber: #FFB200;      /* 橙金 */
  --amber-2: #FFB300;
  --gold-deep: #E9B12E;  /* 暗金（数值） */
  --gold-sub: #F9B600;   /* 小标题金 */
  --gold-text: #CC8500;  /* 深金文字 */
  --green: #00AE00;      /* 倍率绿 */
  --white-63: rgba(255, 255, 255, 0.63); /* 弱化标签 */
  --white-56: rgba(255, 255, 255, 0.56);
  --gray: #8D8D8D;
  --gray-74: #747474;
  --line: #D8D8D8;

  /* 圆角 */
  --r-card: 26px;
  --r-card-lg: 31px;
  --r-pill: 54px;
  --r-nav: 104px;
  --r-sm: 18px;

  /* 阴影 */
  --shadow: 3px 4px 4px rgba(0, 0, 0, 0.08);

  /* 字体 */
  --font: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-serif: 'Inria Serif', 'Inter', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
}

body {
  min-height: 100vh;
  padding-bottom: 170px; /* 底部导航留白 */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; border: none; cursor: pointer; background: none; color: inherit; }
input { font-family: inherit; }

a { color: inherit; text-decoration: none; }

/* ---------- 通用：金色文字 ---------- */
.gold-text-1 {
  background: var(--text-gold-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gold-text-2 {
  background: var(--text-gold-2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gold-text-3 {
  background: var(--text-gold-3);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 页面容器 ---------- */
.page { max-width: 1080px; margin: 0 auto; position: relative; }
.safe { padding: 0 31px; }

/* ---------- 顶部横幅 + 标题 ---------- */
.page-hero {
  position: relative;
  height: 230px;
  background: linear-gradient(180deg, #1a1a1a 0%, #000 78%);
  overflow: hidden;
}
.page-hero .hero-img {
  position: absolute; inset: -10px 0 auto 0;
  height: 260px;
  background: radial-gradient(120% 90% at 20% 20%, #3a3a3a 0%, #111 45%, #000 80%);
  opacity: .9;
}
.page-hero h1 {
  position: absolute; left: 68px; top: 44px;
  font-weight: 700; font-size: 32px; line-height: 39px;
  color: #FFF; z-index: 2;
}
.page-hero .hero-rule {
  position: absolute; left: 40px; top: 53px;
  width: 4px; height: 33px;
  background: var(--gold-grad-v);
  border-radius: 2.5px; z-index: 2;
}

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}
.card-pill { border-radius: var(--r-pill); }

/* ---------- 标题行（金色竖条 + 标题） ---------- */
.section-title {
  display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 30px; line-height: 36px;
  color: #FFF;
}
.section-title::before {
  content: '';
  width: 5px; height: 33px;
  background: var(--gold-grad-v);
  border-radius: 2.5px;
}
.section-title .sub {
  font-size: 17px; font-weight: 500; color: var(--amber);
  margin-left: 10px;
}

/* ---------- 四宫格 / 数据格 ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.data-tile {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 18px 12px;
  text-align: center;
}
.data-tile .tile-ico { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 14px; background: rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size: 28px; }
.data-tile .tile-label { font-size: 20px; font-weight: 700; color: #FFF; }
.data-tile .tile-value { font-size: 20px; font-weight: 700; color: var(--amber-2); margin-top: 4px; }
.data-tile .tile-unit { font-size: 15px; font-weight: 700; }

/* ---------- 数据卡（图标+标签+数值 横排） ---------- */
.data-card {
  background: var(--card);
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  display: flex; align-items: center; gap: 18px;
}
.data-card .dc-ico { width: 80px; height: 80px; border-radius: 20px; background: rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size: 36px; flex-shrink: 0; }
.data-card .dc-main { flex: 1; }
.data-card .dc-label { font-size: 20px; font-weight: 700; color: #FFF; }
.data-card .dc-value { font-size: 30px; font-weight: 700; color: var(--amber-2); margin-top: 2px; }

/* ---------- 金色胶囊按钮（tab / 主按钮） ---------- */
.pill-tabs { display: flex; gap: 14px; }
.pill-tab {
  flex: 1;
  height: 62px;
  border-radius: 34.5px;
  background: var(--card-5);
  color: #F4F4F4;
  font-weight: 700; font-size: 25px; line-height: 62px;
  text-align: center;
}
.pill-tab.active {
  background: linear-gradient(90deg, #EE8F00 30.29%, #FED24E 68%, #FFB41F 100%);
  color: #000000;
}

/* ---------- 主按钮 ---------- */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 44px;
  border-radius: 34.5px;
  background: linear-gradient(90deg, #EE8F00 30.29%, #FED24E 68%, #FFB41F 100%);
  color: #000; font-weight: 700; font-size: 25px;
}
.btn-gold:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 100;
  padding: 0 40px 34px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.tabbar-inner {
  pointer-events: auto;
  max-width: 987px; width: 100%;
  height: 148px;
  background: linear-gradient(3.82deg, #000000 0.03%, #292929 143.64%);
  border-radius: var(--r-nav);
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 0 40px 26px;
  position: relative;
}
.tabbar .tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 60px;
}
.tabbar .tab .tab-ico { width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; }
.tabbar .tab .tab-ico img { width: 44px; height: 44px; object-fit: contain; }
.tabbar .tab .tab-txt {
  font-weight: 600; font-size: 20px;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tabbar .tab-center {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  width: 190px; height: 196px;
  display: flex; align-items: center; justify-content: center;
}
.tabbar .tab-center img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(255, 179, 0, 0.35)); }

/* ---------- 搜索框 ---------- */
.search-box {
  height: 102px;
  border-radius: 98.5px;
  background: var(--card-4);
  display: flex; align-items: center; gap: 20px;
  padding: 0 44px;
  color: var(--white-56);
}
.search-box .s-ico { width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; font-size: 28px; }
.search-box .s-txt { font-size: 30px; font-weight: 700; }

/* ---------- 分隔线 ---------- */
.divider { height: 1px; background: var(--line); border: none; }

/* ---------- 引擎卡片（商城/网格） ---------- */
.engine-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.engine-card .ec-cover {
  height: 180px;
  background: radial-gradient(90% 100% at 50% 30%, #2a2a2a 0%, #111 70%);
  display: flex; align-items: center; justify-content: center;
}
.engine-card .ec-cover img { width: 110px; height: 110px; object-fit: contain; }
.engine-card .ec-body { padding: 18px 20px 22px; }
.engine-card .ec-name { font-size: 26px; font-weight: 700; }
.engine-card .ec-tags { display: flex; gap: 10px; margin-top: 8px; }
.engine-card .ec-tag { font-size: 12px; font-weight: 500; }
.engine-card .ec-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }
.engine-card .ec-price { color: var(--gold-text); font-weight: 600; font-size: 15px; }
.engine-card .ec-price b { font-size: 26px; font-weight: 800; }
.engine-card .ec-buy {
  height: 40px; padding: 0 20px; border-radius: 12px;
  background: var(--gold-grad-h);
  color: #000; font-weight: 700; font-size: 14px;
}

/* ---------- 金额/统计块 ---------- */
.stat-block .st-label { font-size: 16px; font-weight: 700; color: var(--white-63); }
.stat-block .st-value { font-size: 22px; font-weight: 700; color: var(--gold-deep); margin-top: 2px; }

/* ---------- 表格（产出记录） ---------- */
.record-table { width: 100%; }
.record-table th, .record-table td { padding: 18px 8px; text-align: left; }
.record-table thead th { font-size: 23px; font-weight: 600; color: var(--gray); }
.record-table tbody td { font-size: 22px; font-weight: 500; color: #FFF; border-top: 1px solid rgba(216,216,216,0.15); }

/* ---------- 功能入口胶囊 ---------- */
.entry-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.entry-pill {
  background: var(--card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  display: flex; align-items: center; gap: 12px;
}
.entry-pill .ep-ico { width: 46px; height: 46px; display:flex; align-items:center; justify-content:center; }
.entry-pill .ep-ico img { width: 46px; height: 46px; object-fit: contain; }
.entry-pill .ep-txt { font-size: 20px; font-weight: 700; color: #FFF; flex: 1; }
.entry-pill .ep-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-grad);
  display: flex; align-items: center; justify-content: center;
  color: #FFF; font-size: 14px;
}

/* ---------- 等级图标行 ---------- */
.level-row { display: flex; justify-content: space-between; align-items: flex-end; }
.level-row .lv { text-align: center; }
.level-row .lv .lv-ico { width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; background: rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size: 34px; }
.level-row .lv .lv-txt { font-size: 26px; font-weight: 500; color: #FFF; margin-top: 6px; }

/* ---------- 进度条 ---------- */
.bar { height: 39px; border-radius: 18px; background: #000; position: relative; overflow: hidden; }
.bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gold-deep);
  border-radius: 18px 0 0 18px;
  display: block;
}

/* ---------- 档位选择 ---------- */
.amt-card { transition: border-color .2s; }
.amt-card.active {
  border-color: var(--gold-deep) !important;
  box-shadow: 0 0 18px rgba(233, 177, 46, 0.35);
  background: linear-gradient(160deg, rgba(233,177,46,0.16), rgba(20,20,20,0.6)) !important;
}
.amt-card.active .amt-tag { color: var(--amber) !important; }

/* ---------- 输入框 ---------- */
.input {
  width: 100%; height: 62px;
  border-radius: 34.5px;
  background: var(--card-4);
  border: none; outline: none;
  padding: 0 28px;
  color: #FFF; font-size: 24px; font-family: inherit;
}
.input::placeholder { color: rgba(255,255,255,0.4); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%);
  background: rgba(20,20,20,0.95);
  border: 1px solid var(--gold-deep);
  color: #FFF; font-size: 15px;
  padding: 12px 22px; border-radius: 12px;
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; }

/* ---------- 复制按钮 ---------- */
.btn-copy {
  height: 54px; padding: 0 26px;
  border-radius: 14px;
  background: var(--gold-grad-h);
  color: #000; font-weight: 600; font-size: 24px;
}

/* ---------- 图片占位（未上传资源时） ---------- */
.img-ph { background: rgba(255,255,255,0.05); }

@media (max-width: 480px) {
  .page-hero h1 { left: 34px; top: 40px; font-size: 26px; }
  .page-hero .hero-rule { left: 20px; }
  .safe { padding: 0 20px; }
  .section-title { font-size: 24px; }
  .section-title .sub { font-size: 14px; }
  .data-tile .tile-value { font-size: 16px; }
  .pill-tab { font-size: 20px; height: 54px; line-height: 54px; }
  .tabbar { padding: 0 16px 20px; }
  .tabbar-inner { height: 128px; padding: 0 16px 20px; }
  .tabbar .tab-center { width: 150px; height: 156px; }
}