/* ===== 价格趋势模块样式 ===== 布局方案 A:左右分栏 =====
 *
 * 为什么是 1.35fr 而不是设计稿写的 1.2fr:
 *   左栏真实可用宽度只有 816px(.xinyue_wp_left 880px − 两侧各 32px padding),
 *   按 1.2fr 算图区只剩 ~430px,曲线会被压扁。
 *   改成 1.35fr 后图区 ~432px / 侧栏 ~320px,曲线能舒展,侧栏也够放提醒按钮。
 *
 * 注:.block / .block-head / .block-title / .block-extra 等由父页面
 *     newindex.html 全局定义,这里不重复。
 *     按钮样式(.ph-btn)则是本模块自带的,不蹭父页面 —— 原因见下方注释。
 */
#phBlock .price-card-v2 {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    align-items: stretch;
}
/* ⚠ 数据来源说明必须**跨两栏**。
   它是 .price-card-v2 的第三个子元素,不给 grid-column 的话
   会占掉第三行,把 .price-meta-v2 挤到图下面 —— 表现为"两栏没生效"。
   踩过一次:DOM 看起来完全正常,只有实际渲染才发现布局塌了。 */
#phBlock .ph-foot { grid-column: 1 / -1; }
#phBlock .price-chart-v2 {
    min-height: 170px;
    align-self: stretch;
    display: flex;
}
/* 父容器被 stretch 撑高后,svg 要跟着长,否则曲线只占上半部分 */
#phBlock .price-chart-v2 svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 侧栏:父页面把 .price-meta-v2 定义成 justify-content:space-between 的竖排,
   这里改成紧凑竖排,避免在 170px 高度里被拉开 */
#phBlock .price-meta-v2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    min-width: 0;
}

#phBlock .ph-tag-manual {
    font-size: 11px; color: #c2410c; background: #fff3e8;
    padding: 2px 6px; border-radius: 4px; margin-left: 6px;
    font-weight: 500; vertical-align: middle;
}
#phBlock .delta.up   { color: #dc2626; background: #fee2e2; }
#phBlock .delta.down { color: #047857; background: #e6f7f0; }
#phBlock .delta.flat { color: #7c7a8a; background: #f1f1f4; }
#phBlock .ph-trend-text { font-size: 12px; color: #7c7a8a; margin-top: 6px; line-height: 1.5; }

/* 最低价条 */
#phBlock .low {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    background: #e6f7f0; border-radius: 8px; padding: 10px 12px;
}
#phBlock .low span { font-size: 12px; color: #047857; }
#phBlock .low strong {
    font-size: 19px; color: #047857; font-family: 'JetBrains Mono', monospace;
}
#phBlock .ph-low-gap {
    display: block; width: 100%; font-size: 11px; color: #7c7a8a;
    font-style: normal; font-weight: 400; margin-top: 2px;
}
#phBlock .ph-advice {
    background: #eef0ff; color: #4f46e5; border-radius: 8px;
    padding: 10px 12px; font-size: 13px; line-height: 1.6;
}

/* 降价提醒:侧栏窄,目标价和按钮分两行排 */
#phBlock .ph-alert { display: flex; flex-direction: column; gap: 8px; }
#phBlock .ph-alert-target { font-size: 13px; color: #14171e; }
#phBlock .ph-alert-target strong { font-family: 'JetBrains Mono', monospace; color: #f43f5e; }
#phBlock .ph-alert-none { font-size: 13px; color: #047857; }

/* ---- 阈值选择:预设档位 + 自定义输入 ----
 *
 * 侧栏实际可用宽约 340px(816 左栏按 1.35fr/1fr 分完),
 * 三格并排 → 每格约 110px,所以档位做成「价格 + 小字降幅」两行,
 * 单行塞不下 "¥1,466 再低3%"。max-width 让只有一两档时不会被拉成整条。
 */
#phBlock .ph-alert-opts { display: flex; gap: 6px; }
#phBlock .ph-opt {
    flex: 1 1 0; min-width: 0; max-width: 120px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 7px 4px; margin: 0;
    background: #fff; border: 1px solid #e9e9ee; border-radius: 7px;
    font-family: inherit; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background .15s, border-color .15s;
}
#phBlock .ph-opt b {
    font-size: 13px; font-weight: 600; line-height: 1.2;
    font-family: 'JetBrains Mono', monospace; color: #14171e;
}
#phBlock .ph-opt i { font-size: 10px; line-height: 1.2; font-style: normal; color: #a5a3b1; }
#phBlock .ph-opt:hover { background: #f5f6ff; border-color: #c7d2fe; }
#phBlock .ph-opt.is-on { background: #eef0ff; border-color: #6366f1; }
#phBlock .ph-opt.is-on b { color: #4f46e5; }
#phBlock .ph-opt.is-on i { color: #6366f1; }
#phBlock .ph-opt:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

/* 自定义价格 */
#phBlock .ph-custom-box {
    display: flex; align-items: center; gap: 3px;
    height: 32px; padding: 0 10px;
    background: #fff; border: 1px solid #e9e9ee; border-radius: 7px;
}
#phBlock .ph-custom-box > span { font-size: 12px; color: #a5a3b1; }
#phBlock .ph-custom-input {
    flex: 1; min-width: 0; margin: 0; padding: 0;
    border: 0; outline: 0; background: transparent;
    font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #14171e;
}
#phBlock .ph-custom-input::placeholder { font-family: inherit; color: #c4c2ce; }
#phBlock .ph-custom.is-on .ph-custom-box { background: #f5f6ff; border-color: #6366f1; }
#phBlock .ph-custom.is-err .ph-custom-box { background: #fff1f2; border-color: #fecdd3; }
#phBlock .ph-custom-hint { margin-top: 4px; font-size: 11px; line-height: 1.4; color: #e11d48; }
#phBlock .ph-custom-hint[hidden] { display: none; }

/* 订完之后阈值已定,选择区收起,把「已设置」这条信息让出来 */
#phBlock .ph-alert.is-on .ph-alert-opts,
#phBlock .ph-alert.is-on .ph-custom { display: none; }

/* ---- 按钮样式:本模块自包含,不依赖父页面的 .price-meta-v2 .alert-btn ----
 *
 * 之前直接用 class="alert-btn" 蹭父页面的样式,踩了两个坑:
 *   1. 父页面那条规则带 .price-meta-v2 前缀限定,一旦本模块的 DOM 层级
 *      或 include 顺序变了(比如被移到别处、或父页面重构),样式立刻失效,
 *      按钮就变成浏览器默认的灰底原生按钮。
 *   2. 本模块 JS 动态拼出来的按钮同样吃不到,得单独再写一遍。
 *
 * 所以这里用自己的 .ph-btn,不蹭。样式与父页面 .alert-btn 保持视觉一致。
 */
#phBlock .ph-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; margin-top: 0; padding: 10px 12px;
    background: #f1f1f4; color: #3a4256;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 13px; font-weight: 500; line-height: 1.4;
    font-family: inherit; text-align: center; text-decoration: none;
    cursor: pointer; transition: background .15s, color .15s;
    -webkit-appearance: none; appearance: none;
}
#phBlock .ph-btn:hover  { background: #eef0ff; color: #6366f1; }
#phBlock .ph-btn:active { transform: translateY(1px); }
#phBlock .ph-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
#phBlock .ph-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* 登录入口:比订阅按钮更"轻",不是主行动 */
#phBlock .ph-btn-login { background: #fff; border-color: #e9e9ee; color: #3a4256; }
#phBlock .ph-btn-login:hover { background: #eef0ff; border-color: #c7d2fe; color: #6366f1; }

/* 已订阅态:绿底,和"还没订"的灰底区分开 */
#phBlock .ph-btn-on { background: #e6f7f0; color: #047857; border-color: #b9e6d4; }
#phBlock .ph-btn-on:hover { background: #d8f2e6; color: #047857; }

/* 错误提示态:按钮位复用成一条错误信息 */
#phBlock .ph-btn-err {
    background: #fff1f2; color: #e11d48; border-color: #fecdd3;
    font-size: 12.5px; cursor: default;
}
#phBlock .ph-btn-err:hover { background: #fff1f2; color: #e11d48; }

#phBlock .ph-foot {
    font-size: 11px; color: #a5a3b1; line-height: 1.7;
    /* grid 的 gap 已经给了间距,这里只留一点点上边距即可 */
    margin-top: -8px;
}
#phBlock .ph-empty { padding: 28px 12px; text-align: center; }
#phBlock .ph-empty-now { font-size: 14px; color: #14171e; margin-bottom: 6px; }
#phBlock .ph-empty-now strong { font-size: 20px; font-family: 'JetBrains Mono', monospace; color: #f43f5e; }
#phBlock .ph-empty-tip { font-size: 13px; color: #7c7a8a; line-height: 1.6; }

/* 空态 / 无价格时不分栏,整块通栏更自然 */
#phBlock .price-card-v2.is-empty { display: block; }

/* 断点:768px 以下左栏本身就没了,两栏必然挤,直接叠起来 */
@media (max-width: 768px) {
    #phBlock .price-card-v2 { grid-template-columns: 1fr; gap: 14px; }
    #phBlock .price-chart-v2 { min-height: 150px; }
}