/* ================= 图片尺寸统一配置 =================
 * 以下尺寸均为 宽 × 高，单位 px。
 * LOGO：建议素材 470 × 128（比例 235:64）。
 *       手机、电脑统一显示 190 × 51.74。
 * 轮播横幅：建议所有素材统一 1106 × 228（比例 553:114）。
 *       宽度随页面变化，高度按比例自动计算，所有帧尺寸一致。
 * 分类图标：建议所有素材统一 200 × 200（比例 1:1）。
 *       同一屏幕下所有分类、所有入口使用完全相同的显示尺寸。
 *       手机、电脑统一最大 112 × 112，窄屏按列宽缩小。
 * contain 完整显示图片，不拉伸、不裁切；不同比例的素材会留白。
 * 修改显示尺寸只需修改下方变量；手机窄屏会自动缩小。
 * ==================================================== */
/* 【固定 H5 页面宽度】统一以430px为最大宽度；电脑居中显示，小屏自动适配。
 * 修改 --h5-width 可调整页面宽度；LOGO和收藏按钮同排，左右与轮播对齐。
 * 保留用户缩放功能，所有设备始终采用三列手机布局。
 */
:root {
  --h5-width: 430px;
  --logo-width: 190px;
  --logo-ratio: 235 / 64;
  --banner-ratio: 553 / 114;
  --icon-width: 112px;
  --icon-ratio: 1 / 1;
}

*{box-sizing:border-box}body{margin:0;background:#e9edf2;color:#253140;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}main{width:100%;max-width:var(--h5-width);min-height:100vh;min-height:100dvh;margin:auto;background:#f6f8fa;padding-bottom:env(safe-area-inset-bottom)}/* 顶栏：LOGO靠左、收藏按钮靠右；12px内边距与轮播一致，上下无额外留白 */
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;margin:0;line-height:normal}
/* 【LOGO 显示尺寸】由 --logo-width 与 --logo-ratio 控制 */
.brand img{display:block;width:var(--logo-width);max-width:calc(100% - 108px);height:auto;aspect-ratio:var(--logo-ratio);object-fit:contain}
.banner{display:block;width:100%;padding:0 12px 10px}
/* 【轮播图片统一尺寸】所有横幅共用此规则；当前只有一张横幅 */
.banner img{display:block;width:100%;height:auto;aspect-ratio:var(--banner-ratio);object-fit:contain;background:#fff;border-radius:9px}
/* 分区白色卡片：紧凑三列布局；浅色边框区分区域 */
.section{margin:0 12px 10px;padding:14px 8px 12px;border:1px solid #e9edf1;border-radius:14px;background:#fff}h2{font-size:16px;font-weight:600;margin:0 0 10px 4px;line-height:1.5}.section h2{display:flex;align-items:center;gap:7px}.section h2::before{content:"";width:3px;height:14px;border-radius:3px;background:#169ccb}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px}.item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;color:inherit;text-decoration:none;font:inherit;border:0;background:transparent;padding:3px 0 6px;min-width:0;cursor:pointer;border-radius:10px;transition:background .15s ease,transform .15s ease}
/* 【分类图片统一尺寸】所有分区共用同一规格 */
.item img{display:block;width:min(100%,var(--icon-width));height:auto;aspect-ratio:var(--icon-ratio);object-fit:contain;background:#fff;border-radius:12px}
.item span{font-size:14px;font-weight:500;text-align:center;line-height:1.5;overflow-wrap:anywhere;min-height:21px;padding:0 2px}@media(hover:hover){.item:hover{background:#f5f9fc}}.item:active{transform:scale(.97);background:#eef6fb}.item:focus-visible,.banner:focus-visible{outline:2px solid #00a9e6;outline-offset:4px}dialog{width:calc(100% - 48px);max-width:340px;border:0;border-radius:14px;padding:24px;color:#222;box-shadow:0 12px 50px #0002}dialog::backdrop{background:#0005}dialog p{line-height:1.6;margin:0 0 20px}dialog button{border:0;background:#00a9e6;color:white;border-radius:7px;padding:10px 24px;font:inherit;cursor:pointer}@media(max-width:360px){.item span{font-size:14px}.grid{gap:10px 4px}}

/* 【轮播】每张素材建议1106×228 px；间隔在 carouselInterval 中修改 */
.carousel{overflow:hidden;border-radius:9px;touch-action:pan-y}.track{display:flex;transition:transform .4s ease}.slide{flex:0 0 100%;min-width:0}.slide img{border-radius:0}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:8px}.carousel-controls[hidden]{display:none}.carousel-controls button{border:0;background:#f1f1f1;color:#333;cursor:pointer;min-width:32px;min-height:32px;border-radius:6px}#dots{display:flex;gap:2px}#dots button{min-width:24px;min-height:32px;background:transparent;font-size:22px;color:#c8c8c8}#dots button[aria-current="true"]{color:#00a9e6}.favorite{position:static;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:18px;padding:8px 12px;font:inherit;font-size:14px;line-height:1.4;color:#16789d;background:#eaf6fc;border:1px solid #d4eaf5;cursor:pointer}main{padding-bottom:env(safe-area-inset-bottom)}.empty{color:#7b8693;font-size:14px;margin:0;padding:14px 0 18px;text-align:center}#guideSteps{padding-left:23px;line-height:1.9}#homeGuide .hint{font-size:14px;color:#777}button:focus-visible{outline:2px solid #007aa7;outline-offset:3px}@media(prefers-reduced-motion:reduce){.track{transition:none}}
/* 细节：保持顶栏紧凑；轮播圆角与分区统一，弹窗长内容可滚动 */
.brand{background:#fff}.banner{background:linear-gradient(#fff,#f6f8fa)}
.carousel{border-radius:12px;box-shadow:0 2px 8px rgba(34,53,72,.06)}
.carousel-controls{gap:8px}.carousel-controls button{background:#eaf0f5;color:#526174}
#dots{flex-wrap:wrap;justify-content:center}.carousel-controls{flex-wrap:wrap}
dialog{border:1px solid #e7edf2;border-radius:18px;max-height:85dvh;overflow:auto;padding:22px}
dialog::backdrop{background:rgba(26,39,54,.38)}
#homeGuide h2{font-size:18px;margin-left:0}#homeGuide label{font-size:14px;color:#657281}
@media(min-width:431px){main{box-shadow:0 0 32px rgba(31,48,68,.08)}}
@media(prefers-reduced-motion:reduce){.item{transition:none}}
#browserChoice{display:block;width:100%;padding:10px;margin:8px 0 14px;font:inherit;border:1px solid #ddd;border-radius:6px}

/* 底部声明与建站日期 */
.site-footer{margin:4px 12px 0;padding:14px 6px 22px;border-top:1px solid #e5eaf0;text-align:center;color:#8a96a3;font-size:12px;line-height:1.8}
.site-footer p{margin:0}.site-footer .site-date{margin-top:5px;font-size:11px}
.carousel {
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.carousel:active {
  cursor: grabbing;
}

.carousel img {
  -webkit-user-drag: none;
}