/* ===== 基础 ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* 预留安全区，避免挤到状态栏 */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial,
               "Noto Sans", "PingFang SC", "Microsoft Yahei", sans-serif;
}

/* ===== 顶部导航栏（固定在最上方） ===== */
.header-container {
  position: fixed;
  top: 0; /* 顶部贴齐，由 padding-top 负责安全区 */
  left: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #0a0a0a;
  background: #020202;

  /* 56px 头部高度 + 安全区 */
  height: calc(56px + env(safe-area-inset-top, 0));
  padding-top: calc(12px + env(safe-area-inset-top, 0));
  box-sizing: border-box;
}

/* 左侧品牌（可留空或放字/图片） */
.brand {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.3px;
  text-shadow:0 0 10px #39a3ff;
  color:#fff; text-decoration:none; font-weight:800;
}

/* 左侧区域容器 */
.header-left { 
  display:flex; 
  align-items:center; 
  gap:8px; 
}

/* Home 按钮：给个边框/背景，保证可见性 */
.btn-home {
  display:flex; align-items:center; justify-content:center;
  height:40px; padding:0 12px; gap:8px;
  border-radius:8px;
  background:#eeeeee;               /* 你也可以用 transparent */
  border:1px solid #e5e7eb;         /* 边框让它在白色背景上更明显 */
  color:#fff; text-decoration:none; font-weight:800;
  transition:.2s;
}

/* 如果用图片图标，限制尺寸 */
.btn-home img { 
  width:22px; height:22px; display:block; 
}

/* 有文字/emoji 时更好看（可选） */
.btn-home span { font-size:14px; letter-spacing:.2px; }

.btn-home:hover { filter:brightness(1.1); }
.btn-home:active { transform: translateY(1px); }

/* 右侧按钮区域：Register 在左，WhatsApp 在最右 */
.header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Register 按钮（深蓝底 + 黄边 + 白字，全大写） ===== */
.btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: hsla(0, 90%, 49%, 0.784); /* 深蓝底色 */
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.5px;
  /*border: 2px solid #FFE000; /* 亮黄色描边 */
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
  transition: transform .02s ease, filter .2s ease;
  visibility: hidden; /* 隐藏，要看到button就删这个code */
}

.btn-register:hover { filter: brightness(1.05); }
.btn-register:active { transform: translateY(1px); }

/* ===== WhatsApp 圆形按钮（图标铺满，无文字） ===== */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  text-decoration: none;
  border: none;
  overflow: hidden; /* 裁成圆形 */
  transition: transform .02s ease, filter .2s ease;
}

.btn-wa img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.btn-wa:hover { filter: brightness(1.05); }
.btn-wa:active { transform: translateY(1px); }

/* ===== 中间内容区域 ===== */
/* 顶部预留：56px 头部 + 安全区 */
main {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0));
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

/* iframe 占满 main */
iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== 全屏态：隐藏你的头部，main 顶到 0 ===== */
.fs-on .header-container { display: none; }
.fs-on main { top: 0; }

/* 兜底：当 iframe 进入浏览器“真全屏”时的样式（多数情况下不需要，但留着更稳） */
iframe:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: block;
}

/* ================================================================== */
/* ===================== 仅供 index.html 使用 ======================= */
/* ================================================================== */

/* 覆盖通用 main：让首页可滚动，而不是 fixed */
main.home {
  position: static; /* 覆盖上面的 main:fixed */
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(56px + env(safe-area-inset-top, 0)) 16px 20px; /* 预留 header 高度 */
  background: #0b0f1a; /* 深色底更衬卡片，可按需修改 */
  color: #fff;
}

/* 2 列 × 4 行网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 卡片按钮通用样式 */
.card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px 18px;
  min-height: 140px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  isolation: isolate;
}

.card:active { transform: translateY(1px) scale(0.995); filter: brightness(0.98); }
.card:hover  { box-shadow: 0 10px 28px rgba(0,0,0,0.32); }

/* 文字区 */
.card__text { z-index: 1; }

.card__title {
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .3px;
}

.card__sub {
  margin-top: 6px;
  opacity: .9;
  font-size: 14px;
  font-weight: 500;
}

/* 徽标 */
.card__badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #ef4444;
  color: #fff;
}

.card__badge2 {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #5244ef;
  color: #fff;
}

.card__badge3 {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #44ef4a;
  color: #fff;
}

/* 右侧图片（可缺省） */
.card__img {
  width: 40%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
  justify-self: end;
  align-self: end;
  opacity: .98;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* 颜色主题（可按品牌调整） */
.card--blue    { background: linear-gradient(135deg,#39a3ff 0%,#6bd0ff 100%); }
.card--blue2   { background: linear-gradient(135deg,#4aa5ff 0%,#7a9bff 100%); }
.card--purple  { background: linear-gradient(135deg,#6b3bff 0%,#b074ff 100%); }
.card--violet  { background: linear-gradient(135deg,#7b3cff 0%,#9f64ff 100%); }
.card--orange  { background: linear-gradient(135deg,#ff6b3b 0%,#ff9e5a 100%); }
.card--red     { background: linear-gradient(135deg,#ff3b58 0%,#ff7a7a 100%); }
.card--gold    { background: linear-gradient(135deg,#d6a100 0%,#ffd36b 100%); color:#f4f3ef; }
.card--brown   { background: linear-gradient(135deg,#7a552a 0%,#b9894e 100%); }

/* 底部安全区（可选） */
.safe-bottom { height: env(safe-area-inset-bottom, 16px); }

/* ===================== 修复首页卡片被遮挡 ======================= */
:root {
  --header-h: calc(56px + env(safe-area-inset-top, 0));
}

/* 首页 main 往下再让位一些，避免被 header 遮住 */
main.home {
  padding-top: calc(var(--header-h) + 20px) !important; /* 原 header 高度 + 20px 间距 */
}

/* ===== 仅首页用：让内容铺满到底，并预留底部安全区 ===== */
:root {
  --header-h: calc(56px + env(safe-area-inset-top, 0));
}

main.home {
  /* 之前已设置了 padding-top，这里补上最小高度和底部内边距 */
  min-height: calc(100dvh - var(--header-h));      /* 覆盖到屏幕底部 */
  padding-bottom: max(20px, env(safe-area-inset-bottom, 16px)); /* 给一点呼吸空间 */
}

/* ===== 仅首页（main.home）修复底部白边 ===== */
:root { /* 如果上面已经定义过就不用改 */
  --header-h: calc(56px + env(safe-area-inset-top, 0));
}

main.home {
  /* 铺满到屏幕底部，并预留手势区 */
  min-height: calc(100svh - var(--header-h));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 16px));
}

/* 如果 index.html 里紧跟着有 <footer class="safe-bottom">，把它高度关掉 */
main.home + .safe-bottom { height: 0 !important; }

/* 兜底：让这个 footer 就算出现也不是白色 */
.safe-bottom { background: #0b0f1a; }

/* 仅首页把 body 背景也设成深色，避免极端机型还露白 */
@supports selector(body:has(main.home)) {
  body:has(main.home) { background: #0b0f1a; }
}

/* ===== 仅首页横幅图（在 bar 下、卡片上） ===== */
.home .hero-banner { margin: 10px 0 14px; /* 与顶部/卡片的间距 */ }

.home .hero-banner img {
  width: 100%;
  height: auto;            /* 等比缩放 */
  display: block;          /* 去掉行内图片底部空隙 */
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* 可选：如果你想横幅左右与内容对齐更紧凑，给 index 设一个最大宽度已在 .home 里生效，无需额外改动 */

/* ===== 计算器（Neumorph 风格） ===== */
.calc-neo{
  width: min(420px, 92vw);
  margin: 10px auto 32px;
  background: #eef3fa;
  border-radius: 24px;
  padding: 18px 18px 22px;
  box-shadow:
    16px 16px 40px rgba(47,79,124,.16),
    -12px -12px 28px rgba(255,255,255,.9),
    inset 0 0 0 rgba(0,0,0,0);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  color:#111;
}
.calc-neo__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 10px;
}
.calc-neo__brand{ font-weight:900; letter-spacing:.5px; font-size:18px; }
.calc-neo__brand span{ color:#3461ff; }

.calc-neo__display{
  background:#f3f7fd;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:
    inset 8px 8px 16px rgba(47,79,124,.08),
    inset -8px -8px 16px rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.8);
  min-height:84px;
  display:grid; gap:6px;
}
.calc-neo__sub{ text-align:right; color:#6b7a96; font-size:14px; min-height:18px; }
.calc-neo__main{
  text-align:right; font-weight:800; font-size:clamp(28px, 6vw, 40px);
  letter-spacing:.5px; color:#111827;
}

.calc-neo__keys{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.c-key{
  -webkit-tap-highlight-color:transparent;
  user-select:none; appearance:none; border:0;
  border-radius:14px; padding:16px 0;
  font-size:18px; font-weight:700; color:#1f2937;
  background:linear-gradient(180deg,#f9fbff,#eef3fa);
  box-shadow:
     6px 6px 14px rgba(47,79,124,.18),
    -6px -6px 14px rgba(255,255,255,.95);
  transition: transform .06s ease, box-shadow .12s ease, filter .15s ease;
}
.c-key:active{
  transform: translateY(1px);
  box-shadow:
    inset 6px 6px 12px rgba(47,79,124,.15),
    inset -6px -6px 12px rgba(255,255,255,1);
}
.c-key--op{ color:#2243ff; background:linear-gradient(180deg,#f4f7ff,#e8eeff); }
.c-key--util{ color:#0f766e; background:linear-gradient(180deg,#f0fffb,#e7fff7); }
.c-key--eq{
  background:linear-gradient(180deg,#3056ff,#2447ff);
  color:#fff;
  box-shadow:0 8px 18px rgba(48,86,255,.35), inset 0 0 0 rgba(255,255,255,0);
}
.c-key--eq:active{
  box-shadow:
    inset 6px 6px 12px rgba(20,40,160,.35),
    inset -6px -6px 12px rgba(255,255,255,.2);
}
@media (max-width:380px){
  .c-key{ padding:14px 0; font-size:17px; border-radius:12px; }
  .calc-neo__display{ padding:12px; border-radius:14px; }
}
.c-key:focus-visible{
  outline:3px solid rgba(52,97,255,.45);
  outline-offset:2px;
  filter:brightness(1.02);
}

/* ======= 仅为 Home 按钮可见 & 左右分布做的最小增强 ======= */
.header-nav { width: 100%; }         /* 让导航占满一行 */
.btn-register { margin-left: auto; } /* 把 Register/WA 推到最右边 */
.btn-home:empty::before {            /* 没放图片或文字时显示一个占位图标 */
  content: '🏠';
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
/* 邀请码卡片（两行），与顶部白色 bar 搭配 */
.header-left { display:flex; align-items:center; gap:10px; }

/* 邀请码卡片样式 */
.ref-card {
  display: flex;
  flex-direction: column;        /* 两行竖排 */
  align-items: center;           /* 水平居中 */
  justify-content: center;       /* 垂直居中 */
  width: 125px;                  /* 你可以调大调小 */
  height: 45px;                  /* 让它有一定高度 */
  border-radius: 10px;
  background: hwb(0 3% 5% / 0.784);           /* 深蓝色背景 */
  color: #fff;
  border: 2px solid #0f0e08; /* 亮黄色描边 */
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s ease, filter 0.2s ease;
}

.ref-card:hover {
  filter: brightness(1.05);
}

.ref-card:active {
  transform: translateY(2px);
}

/* 上面的小字 */
.ref-card__label {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 4px;
}

/* 下面的邀请码大字 */
.ref-card__code {
  font-size: 16px;   /* 更大更醒目 */
  font-weight: 900;
  letter-spacing: 1px;
}

/* 复制成功的小提示（复用你之前的 toast 方案） */
.toast-copy{
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  background: rgba(26,34,53,.96); color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  font-size:13px; font-weight:700; letter-spacing:.2px; opacity:0;
  transition: .25s opacity, .25s transform;
  z-index: 2000;
}
.toast-copy.on{ opacity:1; transform: translate(-50%, 0); }