/* ==========================================================================
   /hy/ui.css —— 会员端共用样式（2026 新增）
   --------------------------------------------------------------------------
   职责：
     1) 移动端加固：输入框字号、触摸目标、长内容防溢出、iOS 字号缩放
     2) 跨页基线：统一字体栈与盒模型
   加载位置：各页内联 <style> 之后，因此同特异性的规则会覆盖内联样式。
   刻意【不】设置 body 的背景色 / 外边距 / 内边距 —— 避免破坏各页原有版式。
   配色统一由各页内联样式中的色值替换完成，本文件不参与取色。
   ========================================================================== */

/* ---------- 盒模型与字号缩放基线 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    overflow-wrap: break-word;
    word-break: break-word;
}

img, video, canvas, svg { max-width: 100%; height: auto; }
pre { max-width: 100%; overflow-x: auto; }

/* ---------- 移动端关键项：根治 iOS 聚焦自动放大整页 ----------
   输入框字号小于 16px 时，iOS Safari 会在聚焦瞬间把整页放大。
   各页原为 14~15px，这里统一提到 16px。 */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="time"],
select,
textarea {
    font-size: 16px !important;
}

/* ---------- 触摸目标不小于 44px ----------
   只用元素选择器，避免覆盖各页用 class 设定的更大尺寸（如 .btn 的 56px）。 */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select {
    min-height: 44px;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    touch-action: manipulation;
}

/* ---------- AI 报告区：宽表格 / 长串不撑破页面 ---------- */
.report,
.result-box,
.advice,
#reportContainer,
#resultContainer {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.report,
.advice,
.result-box { overflow-x: auto; }
.report table,
.result-box table,
.advice table { max-width: none; }

/* ---------- 页头标题：五个 AI 页统一「字号 + 行高」（完全复刻 aim.php 的行为） ----------
   aim.php 的基准来自它的 body{line-height:1.5} + 自身三档 h1 字号，
   以及 ui.css 里 ≤480px 的 h1{line-height:1.35}。这里逐档照搬，
   保证 aim 在任何视口下的页头尺寸都与改动前完全一致，其余四页向它看齐。 */
.hy-page-title { font-size: 1.8rem; line-height: 1.5; }

@media (max-width: 768px) {
    .hy-page-title { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .hy-page-title { font-size: 1.4rem; line-height: 1.35; }
}

/* ---------- 会员卡状态条（.hy-banner）----------
   卡片式样：浅底 + 左侧色条 + 圆角。
   「历史记录」是普通文字链接：与前面文字同色、无下划线、无按钮底色，
   并靠 margin-left 与「剩余次数」拉开间隔。 */
.hy-banner {
    margin: 12px 0;
    padding: 9px 12px;
    border-radius: 10px;
    border-left: 5px solid #4caf50;
    font-size: 13px;                 /* 比原先 14px 适当变小 */
    line-height: 1.7;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;                       /* 文字与「历史记录」之间的间隔 */
    justify-content: space-between;
}
.hy-banner-txt { flex: 1 1 auto; min-width: 0; }

.hy-banner-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;           /* 去掉下划线 */
    color: inherit;                  /* 与前面文字保持同一颜色 */
    background: none;
    padding: 0;
    margin-left: 10px;               /* 与「剩余次数」之间的间隔 */
    font-size: inherit;
    min-height: 0;
}

@media (max-width: 480px) {
    .hy-banner {
        font-size: 12px;             /* 窄屏再小一档，尽量容在一行内 */
        padding: 8px 10px;
        gap: 6px;
    }
    .hy-banner-btn { margin-left: 6px; }
}

/* ---------- 会员端分页条（历史记录等页面共用） ---------- */
.hy-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 18px 0 6px; }
.hy-pg {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    background: #fff; color: #2d6a4f; text-decoration: none; font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,60,0,.06);
}
.hy-pg.on { background: #4caf50; color: #fff; }
.hy-pg-info { width: 100%; text-align: center; color: #8aa694; font-size: 13px; margin-top: 4px; }

/* ---------- 窄屏微调 ---------- */
@media (max-width: 480px) {
    .container { border-radius: 12px; }
    h1 { line-height: 1.35; }
    h2 { line-height: 1.4; }
}