/* ==========================================================================
   base.css —— 设计变量 / 重置 / 应用外壳 / 底部导航
   变量取值取自设计稿的计算样式（Computed Style）
   ========================================================================== */

:root {
 /* ---- 色彩系统（设计基准值） ---- */
  --c-bg: #f9f9f9;
  --c-header-1: #ffec85;      /* 页头渐变起点 */
  --c-header-2: #f4f2d4;      /* 页头渐变终点 */
  --c-accent: #66f;           /* 品牌蓝紫：按钮 / 选中态 / 链接 */
  --c-accent-deep: #3f35d6;   /* 制作页主按钮 */
  --c-price: #e75718;         /* 价格橙 */
  --c-buy: #fe2c55;           /* 预览弹层「立即制作」 */
  --c-text: #000;
  --c-text-sub: #6a6a6a;
  --c-text-gray: #999;
  --c-pill-bg: #f7f7fa;
  --c-tab-bg: #f7f7f7;
  --c-tab-border: #d4d4d4;
  --c-panel-dark: #333146;    /* 制作页编辑块底色 */
  --c-page-dark: #222;        /* 制作页页面底色 */
  --c-card-line: #ccc;

  /* ---- 阴影 ---- */
  --shadow-card: 0 0 5px #ccc;
  --shadow-tag: 0 0.4vw 1.73333vw 3px rgba(255, 149, 0, .17);
  --shadow-btn: 0 0.4vw 1.73333vw 0 rgba(255, 149, 0, .17);

  /* ---- 尺寸系统 ---- */
  --radius-tag: 15px;
  --radius-card: 5px;
  --radius-btn: 15px;
  --tabbar-h: 53px;   /* 实测底部栏高度 */

 /* ---- 字体栈（使用系统字体，无 webfont） ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- 应用外壳（桌面端适配用） ---- */
  --shell-max: 1280px;
  --sidebar-w: 168px;
}

* { padding: 0; margin: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

/* 隐藏滚动条 */
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { display: none; }
*::-webkit-resizer { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

a { color: inherit; text-decoration: none; }
img { display: block; border: 0; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ==========================================================================
   底部固定导航栏 —— 类名与原型 .controls-bottom-btns 完全一致
   ========================================================================== */
.controls-bottom-btns {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3px 5px;
  background: var(--c-tab-bg);
  border-top: 1px solid var(--c-tab-border);
  font-size: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.controls-btns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--c-text);
  cursor: pointer;
  text-decoration: none;
}

/* 图标尺寸由 svg 自身的 width/height 属性决定（同样没有 CSS 覆盖） */
.controls-bottom-btns .controls-btns-item-selected { color: var(--c-accent); }

/* 内容区为底部固定栏留白 */
.page-body { padding-bottom: calc(var(--tabbar-h) + 12px); }

/* ==========================================================================
   页脚：网站名称 + 备案号
   工信部要求首页底部显著位置标明备案号并链接到 beian.miit.gov.cn。
   ★ 底部固定导航是 fixed，所以这块要用 padding-bottom 自己让出位置
     （原来由 #tpl-list 的 100px padding 挡着，现在挪到这里统一处理）。
   ========================================================================== */
.icp-bar {
  padding: 22px 16px calc(var(--tabbar-h) + 16px);
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: #8b9096;
  background: var(--c-bg);
}

.icp-bar .icp-brand {
  font-size: 13px;
  color: #6b7075;
  letter-spacing: .5px;
}

/* 合规页入口：关于我们 / 隐私政策 / 用户协议 */
.icp-bar .icp-links {
  margin-bottom: 4px;
  font-size: 12px;
  color: #b0b5ba;
}

.icp-bar .icp-links a {
  color: #8b9096;
  margin: 0 5px;
}

.icp-bar a {
  color: #8b9096;
  text-decoration: none;
}

.icp-bar a:active { color: var(--c-accent); }

/* ==========================================================================
   通用提示 / 弹层（对应 弹层组件 的 弹层）
   ========================================================================== */
.toast-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10000;
}

.toast {
  min-width: 96px;
  max-width: 70vw;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 13px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.toast.is-light { background: rgba(255, 255, 255, .96); color: #333; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }

.spinner {
  width: 1em;
  height: 1em;
  font-size: 15px;
  color: currentColor;
  display: inline-flex;
  animation: circleLoading 1s steps(60, end) infinite;
}

.spinner::before, .spinner::after {
  content: "";
  display: block;
  width: .5em;
  height: 1em;
  box-sizing: border-box;
  border: 3px solid;
  border-color: currentColor;
}

.spinner::before { border-top-left-radius: 1em; border-bottom-left-radius: 1em; border-width: 3px 0 3px 3px; }
.spinner::after { border-top-right-radius: 1em; border-bottom-right-radius: 1em; border-width: 3px 3px 3px 0; }

@keyframes circleLoading {
  0% { transform: rotate3d(0, 0, 1, 0deg); }
  100% { transform: rotate3d(0, 0, 1, 360deg); }
}

/* 底部抽屉 / 居中弹窗（弹层结构） */
.pop-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9999;
}

.pop-content {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  padding: 8px 10px;
  z-index: 9999;
  animation: popUp .22s ease-out;
}

.pop-content.is-center {
  left: 50%;
  bottom: auto;
  top: 50%;
  width: 80%;
  max-width: 360px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  animation: popIn .2s ease-out;
}

@keyframes popUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(.94); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.pop-close { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; cursor: pointer; }
.pop-title { padding: 10px; color: #000; font-size: 14px; font-weight: 700; text-align: center; }
.pop-body { padding: 5px 0; }

.pop-btn {
  display: block;
  width: 96%;
  height: 34px;
  line-height: 34px;
  margin: 10px auto;
  text-align: center;
  color: #fff;
  background: var(--c-accent-deep);
  font-size: 13px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

/* ==========================================================================
   骨架屏 / 加载态
   ========================================================================== */
.loading-box p {
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #777;
  font-size: 15px;
}

/* ==========================================================================
   响应式外壳：手机端严格对齐；平板 / 桌面端在同色系下做可用性适配
   （原实现在桌面端不做宽度约束，卡片会被拉到 45vw，故此处为必要增强）
   ========================================================================== */
.shell { width: 100%; }

@media (min-width: 768px) {
  body { background: #eef0f5; }

  .shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    background: var(--c-bg);
    min-height: 100vh;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 40px rgba(0, 0, 0, .07);
  }

  .controls-bottom-btns {
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--shell-max);
  }
}