/* 通用 */
:root{
  /* 浅绿色主色（可替换为你喜欢的浅绿色） */
  --primary: #55ba95;   /* 页面主色（较浅） */
  --accent:#f4b63e;
  --muted:#6f7d75;
  --card:#ffffff;
  --bg:#e6f5ee;
}

/* 用 background.svg 作为重复图案，铺满并叠在主色上 */
.page-bg{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:28px;

  /* 主色背景（浅绿色） */
  background-color: var(--primary);

  /* 叠加的图案：background.svg 会重复 */   /* 把图案放到最上层（第一个项），这样不会被其他渐变遮挡 */
  background-image:
    url('background.svg'),/* <-- 引用你保存的 SVG 文件 */
    linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%) -20px 0/40px 40px;

  /* 控制平铺与大小：120px 对应 SVG 的宽度/高度 */
    background-repeat: repeat, repeat, repeat;
  background-size: 120px 120px, 40px 40px, 40px 40px;/* 三层背景都设尺寸，确保对齐 */
  background-position: 0 0, 0 0, 0 0;
}

*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft Yahei","PingFang SC",Arial,sans-serif;background:var(--bg)}
.page-bg{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding-bottom:28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%) -20px 0/40px 40px,
    var(--primary);
}

/* ---------- Header / logo ---------- */

/* logo 图片样式 */
.logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 新增的图片样式（替代原 .logo-circle） */
.logo-img {
  width: 200px;            /* 根据图片比例调整 */
  height: auto;           /* 自动保持比例 */
  object-fit: contain;    /* 保持纵横比并居中显示 */
  border-radius: 6px;     /* 如需圆形去掉此行或改为50% */
  background: transparent;
  display: block;
}

/* logo 文字 */
.logo-text .cn {
  font-size: 18px;
  font-weight: 600;
}
.logo-text .en {
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .95;
}

/* 大字 “通行证” 样式（斜体） */
.big-title {
  font-size: 64px;
  font-weight: 900;      /*CSS 的合法粗细范围是100~900,所以900已经是最粗的合法值，当你写 font-weight: 1200; 时，浏览器会自动回退到字体文件默认的粗细（通常是 400），
所以你看到字体变“更细了”。 */
  color: rgba(255,255,255,.32);
  line-height: 1;
  position: absolute;
  right: 6px;
  top: 38px;
  pointer-events: none;
  z-index: 1;
  /* 使文字为斜体 */
  font-style: italic;      /* ✅ 斜体 */

  /* 轻微下移以给空间，若需要更显著调整可改 top 值 */
  transform: translateY(2px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1;
}

/* 为了保证通行证完整显示，增加 header 的上内边距 （顶部留白）*/
.topbar {
  width: 100%;
  max-width: 420px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  position: relative;
  padding: 8px 8px 20px;   /* ✅ 减少底部留白 */
}

/* 编辑表单 */
.editor{width:100%;max-width:420px;margin-top:12px;padding:10px}
.editor-inner{background:rgba(255,255,255,0.06);padding:12px;border-radius:10px;backdrop-filter:blur(2px)}
.field-row{display:flex;flex-direction:column;margin-bottom:8px}
.field-row label{color:#eaf7ef;font-size:13px;margin-bottom:6px}
.field-row input{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.07);color:#fff;font-size:14px;outline:none}
.field-row input::placeholder{color:rgba(255,255,255,0.6)}
.editor-actions{display:flex;gap:8px;align-items:center;margin-top:6px}
button{padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
button#btn-generate{background:var(--primary);color:#fff}
button.muted{background:rgba(0,0,0,0.45);color:#fff}

/* 白色卡片 */

/* ---------- 白色卡片下移调整 ---------- */

/* 把 pass-card 下移更多，显示完整大的 "通行证" */
.pass-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  margin-top: 18px;      /* 原先可能是 12px，改为更大 */
  padding: 18px 18px 26px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.08);
}

/* 如果你想更明显地下移，请增大 margin-top */
@media (min-width: 700px) {
  .pass-card {
    margin-top: 30px;    /* 桌面更大视窗下多留白 */
  }
}

/* 手机端：避免太多空白但仍保留可见通行证字 */
@media (max-width: 480px) {
  .logo-img {
    width: 180px;      /* 比桌面端更大一些 */
    margin-top: 2px;   /* 稍微下移一点，避免贴边 */
  }
  .topbar {
    padding-top: 10px;
    padding-bottom: 10px;  /* 保持整体平衡 */
  }
  .big-title {
    font-size: 56px;
    top: 28px;
  }
  .pass-card {
    margin-top: 10px;    /* 手机端保守下移以避免过多滚动 */
  }
}
.card-top{display:flex;gap:16px;align-items:center}
.avatar {
  width: 82px;
  height: 96px;
  border-radius: 6px;
  background: url('Avatar.png') center/cover no-repeat;
  background-color: #d9e8f1;
}
.label{font-size:14px;color:#666;margin-bottom:4px}
.visitor-name{font-size:20px;font-weight:700;color:#1f3f36}

/* 时间 */
.time-block{margin-top:16px;text-align:center}
.time{font-size:38px;font-weight:700;color:#1b8d6b;letter-spacing:1px}
.date-line{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:14px}
.date-line-left,.date-line-right{flex:1 1 auto;max-width:110px;height:2px;background:#1b8d6b;opacity:.35}
.date-text{white-space:nowrap;font-size:14px;color:#1b8d6b}

/* 二维码 */
.qrcode-wrap{margin-top:16px;display:flex;justify-content:center}
#qrcode {
  width: 210px;
  height: 210px;
  background: #fff;
  border: 3px solid #f4b63e;      /* 边框细化为 3px */
  border-radius: 10px;
  padding: 6px;
  display: flex;                  /* ✅ 用 flex 居中 */
  align-items: center;            /* 垂直居中 */
  justify-content: center;        /* 水平居中 */
  box-sizing: border-box;         /* 防止边框撑大整体 */
  margin: 0 auto;                 /* 保证容器在父级居中 */
}

/* 提示与信息行 */



.hint-line{margin-top:14px;text-align:center;color:#cfcfcf;font-size:12px;display:flex;justify-content:center;gap:10px}
.info-row{display:flex;justify-content:space-between;border-bottom:1px solid #eff2f3;padding:12px 4px}
.info-row .left{color:#5b6a66;font-size:14px}
.info-row .right{color:#333;font-weight:600;font-size:14px}



/* 提示行（虚线 + 一行显示） */
.hint-line{margin-top:14px;text-align:center;color:#cfcfcf;font-size:12px;display:flex;
           white-space: nowrap; /* ✅ 防止文字换行 */
           justify-content:center;gap:10px}
.info-row{display:flex;justify-content:space-between;border-bottom:1px solid #eff2f3;padding:12px 4px}
.info-row .left{color:#5b6a66;font-size:14px}
.info-row .right{color:#333;font-weight:600;font-size:14px}




/* 安全提示与页脚 */
.safe-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
}
.safe-cn {
  color: #199c69;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px; /* 可选：增加轻微字距代替手动空格 */
  margin-bottom: 2px;
}
.safe-en {
  color: #7aa694;
  font-size: 12px;
}





/* 页脚整体 */
.footer {
  margin-top: 16px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 16px;
}

/* 内部内容块，控制文字和 logo 的布局 */
.footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;             /* logo 与文字间距 */
}

/* logo 样式 */
.footer-logo {
  height: 20px;         /* ✅ 控制高度（建议 16~20px） */
  width: auto;          /* 按原比例缩放 */
  vertical-align: middle;
  object-fit: contain;
  opacity: 0.9;         /* 稍微淡一点以协调背景 */
}

/* 文字 */
.footer-text {
  font-weight: 500;
  white-space: nowrap;  /* 防止换行 */
}

/* 手机端稍微放大一点，避免太小 */
@media (max-width: 480px) {
  .footer-logo { height: 24px; }
  .footer-text { font-size: 13px; }
}




/* 响应 */
@media (max-width:460px){
  .topbar,.editor,.pass-card{max-width:95%}
  .big-title{font-size:56px}

}