/* ============================================================
   RetailLib 策略页面专用样式（任务看板 + 策略制定表单）
   引入方式：仅 pages/strategies.html 与 pages/strategy-form.html
   色值严格沿用 main.css 品牌变量；周期色映射：
     L 大周期 → --brand-burgundy #80001E（勃艮第红）
     M 中周期 → --brand-orange   #FF9119（爱马仕橙）
     S 小周期 → --brand-slate    #29313C（青灰）
   ============================================================ */

/* ---------- 看板页通用布局 ---------- */
.board {
    padding: 3rem 0 var(--section-gap);
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
}
.board-header {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.board-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: white;
    margin-top: 0.5rem;
    letter-spacing: -0.02em;
}
.board-desc {
    color: var(--brand-text-muted);
    margin-top: 0.6rem;
    font-size: 0.98rem;
}

/* ---------- 策略卡片网格 ---------- */
.strategies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.strategy-card {
    position: relative;
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: 1.4rem;
    padding: 1.2rem 1.4rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    cursor: pointer;
    height: auto;
}
/* 2026-08-15 统一 APP 形态：卡片垂直堆叠，无 hover 位移 */
.strategy-card:hover {
    border-color: rgba(212, 168, 75, 0.32);
}
.strategy-card-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    /* 避让右上角删除按钮（36px + right:0.7rem）：头部内容右端留出按钮区，防止「已开始」徽标被按钮盖住（2026-08-15） */
    padding-right: 2rem;
    flex-shrink: 0;
}
.strategy-symbol {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
}
.strategy-code {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
}
.badge-started {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 9999px;
    color: var(--brand-amber);
    background: rgba(253, 196, 31, 0.12);
    border: 1px solid rgba(253, 196, 31, 0.32);
    flex-shrink: 0;
}
/* 2026-09-26 已删：.strategy-tool / .strategy-tool:hover（看板卡片 → 工具页 联动入口，2026-09-23 加）。
   随「工具」页一并下线：js/strategies.js 的 renderCard 不再产出该链接，全项目 grep 已无使用方。
   刻意删而不是留着：一条永远命不中的规则会让人以为卡片上还挂着「工具」入口。
   ⚠️ 注意 .strategy-card-head 里 badge 的 margin-left:auto 仍在 —— 它原本把 badge 与本链接
      一起推到最右；本链接删掉后 badge 独占右端，观感不变，无需补任何样式。 */
.strategy-target {
    font-size: 0.92rem;
    color: var(--brand-text);
    line-height: 1.6;
    flex: 1;
    min-width: 0;
    margin: 0;
}
/* 目标文本 + 多单/空单徽标 同排（2026-08-22）：目标左占满、方向徽标右上 */
.strategy-target-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}
/* 多单/空单结果徽标：红=多单 / 绿=空单（与表单勾选同色系，呼应红涨绿跌） */
.strategy-side-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
}
.strategy-side-badge.is-long {
    color: var(--brand-red);
    border-color: rgba(235, 71, 67, 0.5);
    background: rgba(235, 71, 67, 0.12);
}
.strategy-side-badge.is-short {
    color: #22C55E;
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.12);
}
/* 资金三值（本轮可用资金 / 允许浮亏额度 / 持仓成本），2026-09-26 owner 指定同处一行。
   唯一使用方 = js/strategies.js renderFundRows()（原「划拨资金」行已由这三值替换）。 */
.strategy-funds {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.5rem;
    row-gap: 0.35rem;
}
/* 一对「标签 + 值」。历史上它独占一整行（label 左弱灰、值右荧光青，space-between 把值顶到最右）；
   现在被 .strategy-funds 收成同行的一组，宽度自然收缩为内容宽（flex 默认 0 1 auto），
   故 space-between 无自由空间可分配、等同 left —— 保留它不影响观感，也省得将来单独用时再改回来。
   对内间距从 0.8rem 收到 0.4rem：0.8rem 是「独占一行、左右分列」时的口径，
   放进同行分组里会把某一对撑得比别对松散。 */
.strategy-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
}
.strategy-funds .strategy-line {
    gap: 0.4rem;
}
.strategy-line-label {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-text-muted);
}
.strategy-line-value {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-gold);
    white-space: nowrap;
    text-align: right;
}
/* 2026-09-26 已删：.strategy-profit.is-loss（卡片目标收益为负 → 红字）。
   它只服务于卡片的「目标收益」行，而该行连同 calcProfitForCard() 已整体下线
   （四个 profit_* 列随之冻结），全项目 grep 已无任何地方产出 .strategy-profit。
   刻意删而不是留着：一条永远命不中的红字规则，会让人以为「负数会有红色警示」，
   而实际早就不生效了。将来若要给负的「本轮可用资金」加警示色，按那时的口径重写。
   ⚠️ --brand-red 令牌**未**随之删除：.strategy-side-badge.is-long 仍在用它。 */
.strategy-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: auto;
    margin-left: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--brand-border);
    flex-shrink: 0;
}
.strategy-meta-item {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
    line-height: 1.5;
    text-align: left;
}
.strategy-meta-item strong {
    color: var(--brand-text);
    font-weight: 600;
    margin-right: 0.3rem;
}
/* 删除按钮：常显（2026-08-15 统一 APP 形态，触屏加大目标） */
.strategy-delete {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text-muted);
    opacity: 1;
    transition: color 0.2s ease, background 0.2s ease;
    font-size: 1.15rem;
}
.strategy-delete:hover {
    color: var(--brand-red);
    background: rgba(235, 71, 67, 0.12);
}

/* ---------- 空状态 ---------- */
.empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 1.6rem;
    color: var(--brand-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    font-size: 0.98rem;
}
/* 空状态可点击「+」按钮（2026-08-14：替代原提示文案） */
.empty-add {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-gold);
    color: #0B1219;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(212, 168, 75, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.empty-add:active {
    transform: scale(0.94);
    box-shadow: 0 6px 20px rgba(212, 168, 75, 0.3);
}

/* ---------- 悬浮新增按钮（已删除，2026-08-15） ----------
   原金色圆形 .fab 新增按钮由底部 Tab「策略(+)」主按钮取代，全端不再使用。 */

/* ============================================================
   策略制定表单
   ============================================================ */
.form-page {
    padding: 3rem 0 var(--section-gap);
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
}
.form-header {
    margin-bottom: 2rem;
}
/* 2026-08-14：.form-back（← 返回任务看板）已随按钮删除 */
.form-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

/* 表单区块（fieldset） */
.form-section {
    border: 1px solid var(--brand-border);
    border-radius: 1.4rem;
    padding: 1.6rem 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--brand-bg-card);
}
.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-gold);
    padding: 0 0.5rem;
}
.form-subsection-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    margin: 1.4rem 0 0.8rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
/* M3 挂单标题行右端「预计持仓」聚合（2026-09-06）：虚线分隔保留在行容器顶、标题去自身边框 */
.form-subsection-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 0.8rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.form-subsection-title-row .form-subsection-title {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}
.project-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    margin-right: 0.25rem;
}
.project-label + .calc-result {
    margin-right: 0.5rem; /* 与 ⚠️ 徽标留隙 */
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
.form-field {
    position: relative; /* 品种/代码 搜索建议下拉的定位锚点（2026-08-14） */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* 品种/代码 模糊搜索建议下拉（2026-08-14） */
.suggest-box {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.3rem;
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: 0.8rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    max-height: 220px;
    overflow-y: auto;
}
.suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--brand-text);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.suggest-item:hover,
.suggest-item:focus {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
.suggest-symbol {
    font-weight: 600;
}
.suggest-code {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
}
.form-label {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
}
.form-input {
    width: 100%;
    padding: 0.72rem 1rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--brand-text);
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--brand-gold);
    background: rgba(255, 255, 255, 0.06);
}
.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
/* 自动增高输入框（2026-08-16）：宽度不变，高度随内容字符数伸缩 */
.form-input-auto {
    resize: none;
    overflow: hidden;
    min-height: 44px; /* 初始高度对齐单行 input */
    line-height: 1.6;
}

/* 计划开始时间：日期 + 小时并排（2026-08-16） */
.form-datetime-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
/* 2026-09-24 owner 拍板：日期框与时间框**宽度相等**。
   flex-basis 由 auto 改 0 —— auto 会以各自的内容宽为基准再加增量，
   日期框（内容「2026/09/24」）比时间框（内容「08:30」）宽，两者永远不等宽；
   basis 归零后两子项等分整行，宽度严格相等（各 50% 减半个 gap）。 */
.form-datetime-row .form-input {
    flex: 1 1 0;
    min-width: 0;
}
.form-hour-select {
    /* 原写 flex: 0 0 6.6rem —— 该声明**从来没生效过**：选择器权重 0,1,0 小于上面
       0,2,0 的 .form-datetime-row .form-input，flex 恒由上面那条决定。
       2026-09-24 起两框等宽，这里索性删掉这条死声明，只留配色。 */
    /* 原生下拉弹层强制深色主题，选项文字可读（2026-08-16 修复） */
    color-scheme: dark;
}
.form-hour-select option {
    color: var(--brand-text);
    background-color: var(--brand-bg-card);
}

/* 周期形态输入行：徽标 + 周期形态 + 单维度分析 */
.cycle-group {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 0.8rem;
}
.cycle-badge {
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.cycle-badge-L { background: var(--brand-burgundy); color: #fff; }
.cycle-badge-M { background: var(--brand-orange); color: #0B1219; }
.cycle-badge-S { background: var(--brand-slate); color: #E8EDF2; }

/* 周期文字色（价格计算结果强制规范）
   2026-08-14：L 红 / S 灰提亮——原勃艮第/青灰在深色背景上过暗看不清，
   改为与右侧结果一致的可读色（#EB4743 / #D4D4D4） */
.cycle-text-L { color: #EB4743; }
.cycle-text-M { color: var(--brand-orange); }
.cycle-text-S { color: #D4D4D4; }

/* 价格计算：左右两栏布局（左 L/M/S 三周期输入 / 右计算结果全部降序）
   2026-08-14：输入框收窄、右栏封顶；右栏 grid+absolute 精确贴合左列高度，
   彻底解决结果框与输入列高度差（此前 max-height 定值总是差几像素/偏高一截）
   2026-09-24 owner 改：右栏封顶 22rem(352px) → **9.5rem(152px)**（「宽度缩减一半」）。
   注意 22rem 从来不是右栏的实际宽：右栏宽 = 该栏可用宽 − 左列(193.6px) − gap(19.2px)，
   在策略页实测 273.6px，远未触到 352px 上限 ⇒ 只改这一处不生效。
   真正定宽的是下面 @media(min-width:768px) 里那条同名声明（策略页实际走它），
   两处必须一致改；本次两条都收到 9.5rem，右栏才真的从 273.6px 落到 152px。 */
.price-layout {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 9.5rem);
    gap: 1.2rem;
    align-items: start;
    max-width: 42rem;
}
/* 左侧：三周期价格输入（唯一参与流式布局项，定义行高） */
.price-input-col {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
}
.price-cycle-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}
.price-cycle-title {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.price-cycle-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.price-input-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.price-input-tag {
    width: 2rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
/* 价格输入框收窄（form-input 默认 width:100%），2026-08-14 */
.price-input {
    width: 7.5rem;
}
/* 右侧：计算结果（三周期全部混合降序，从上到下垂直排列，超出滚动）
   2026-08-14：绝对定位精确填满第 2 列网格区域（高度 = 左列行高），
   无论结果多少都与输入列严格平齐，结果多时内部滚动 */
.price-results-col {
    grid-column: 2;
    grid-row: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--brand-border);
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    overflow-y: auto;
    min-width: 0;
}
.price-results-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-text-muted);
    margin-bottom: 0.8rem;
}
.price-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.price-result-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: fit-content;
}
/* 结果周期色（2026-08-13 需求）：L 结果红 #EB4743、M 保持爱马仕橙、S 结果灰白 #D4D4D4 */
.price-results-list .cycle-text-L { color: #EB4743; }
.price-results-list .cycle-text-S { color: #D4D4D4; }
.price-result-source {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.55;
}
.price-results-empty {
    font-size: 0.8rem;
    color: var(--brand-text-muted);
}

/* ============================================================
   统一 APP 形态（2026-08-15）：全站无侧边栏，body.no-sidebar
   标记已不再需要（策略制定页保留 class 无副作用）。
   ============================================================ */

/* 表单操作 */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* 轻提示 */
.toast {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: var(--brand-bg-card);
    border: 1px solid rgba(212, 168, 75, 0.4);
    color: var(--brand-text);
    padding: 0.7rem 1.4rem;
    border-radius: 9999px;
    font-size: 0.88rem;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 表单统一（2026-08-15 统一 APP 形态，单列） ---------- */
.form-grid {
    grid-template-columns: 1fr;
}
.price-layout {
    gap: 0.8rem;
}
.price-input {
    width: 6rem;
}
.cycle-group {
    grid-template-columns: 1fr;
}
.form-section {
    padding: 1.2rem 1rem;
}

/* ============================================================
   板块4 划拨 / 持仓 / 挂单 计算行（2026-08-21，策略制定页）
   全部行内多控件，flex 自动换行；输入框覆盖 .form-input 的
   width:100%（.calc-input 定义在 .form-input 之后以提升优先级）
   ============================================================ */
.calc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.calc-currency,
.calc-op {
    color: var(--brand-text-muted);
    flex-shrink: 0;
}
.calc-currency {
    font-size: 0.92rem;
}
.calc-input {
    flex: 1 1 5.5rem;
    min-width: 4.5rem;
    width: auto;
}
.calc-result {
    font-weight: 700;
    color: var(--brand-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 持仓结果超出划拨总额 → 红（判定由 strategy-form.js 控制） */
.calc-result.is-over {
    color: var(--brand-red);
}
.calc-warn {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand-red);
    background: rgba(235, 71, 67, 0.12);
    border: 1px solid rgba(235, 71, 67, 0.32);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}

/* ============================================================
   目标行 多单/空单 互斥勾选 + 目标收益计算器（2026-08-21）
   多单红 / 空单绿（互斥逻辑由 strategy-form.js 控制）；
   收益行 ￥[预计成本价] ￥[预计目标价] 操作时间[开始—结束]，
   结果「目标收益：￥X.XX/天」前端实时计算、不入库。
   ============================================================ */
.target-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.target-label-text {
    margin: 0;
}
.side-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.side-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.side-opt input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--brand-gold);
}
.side-long { color: var(--brand-red); }
.side-short { color: #22C55E; }

.profit-calc-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--brand-border);
    border-radius: 0.8rem;
}
.profit-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    flex-shrink: 0;
}
.profit-result {
    font-weight: 700;
    color: var(--brand-gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 收益 ≤0（亏本/持平）→ 红字，复用 .calc-result.is-over 判定逻辑 */
.profit-result.is-over {
    color: var(--brand-red);
}
.profit-unit {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
    flex-shrink: 0;
}

/* ============================================================
   看板挂单区（2026-08-21，策略卡片内）
   ============================================================ */
.strategy-pending {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--brand-border);
    flex-shrink: 0;
}
/* 注：.strategy-pending.is-interactive **没有**任何样式规则。它是纯行为标记，
   给 js/strategies.js 的卡片点击守卫用（含勾选框的挂单块：点它不触发整卡跳转）。
   在这里找不到样式是正常的，别以为是漏写。 */
/* 持仓整块已移到卡片头部正下方（2026-09-26 owner 指定）：它上面是 .strategy-card-head
   这条身份行，不是需要分隔的内容，故去掉虚线上边框与 0.9rem 上内边距 ——
   留着会与卡片的 gap:0.9rem 叠成 1.8rem 空档，并在符号行下多出一条无意义的虚线。
   挂单块仍在 .strategy-meta 之后、确实需要与上方内容分隔，故保留虚线。 */
.strategy-pending.is-top {
    padding-top: 0;
    border-top: none;
}
.pending-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-text-muted);
}
.pending-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--brand-text);
}
.pending-check {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-gold);
    cursor: pointer;
    flex-shrink: 0;
}
.pending-label {
    color: var(--brand-text-muted);
    flex-shrink: 0;
}
.pending-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.pending-empty {
    color: var(--brand-text-muted);
    font-weight: 400;
}

@media (max-width: 480px) {
    .strategies-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   移动端 APP 布局补充（<1024px）
   ============================================================ */
/* ---------- 统一 APP 形态补充（2026-08-15，全端） ---------- */
/* 输入框字号 ≥16px，防 iOS 聚焦自动缩放（仅含底部 Tab 的零售页，不动管理后台） */
body:has(.app-tabbar) .form-input {
    font-size: 1rem;
}
/* 无 hover 位移 */
.tool-card:hover {
    transform: none;
}
/* 统一触控目标（仅零售页，管理后台按钮保持桌面态） */
body:has(.app-tabbar) .btn {
    min-height: 44px;
}

/* ============================================================
   「我的」页（pages/mine.html）
   ============================================================ */
.mine-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: 1.6rem;
    padding: 2.2rem 1.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.mine-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(212, 168, 75, 0.12);
    border: 1px solid rgba(212, 168, 75, 0.25);
    color: var(--brand-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
}
.mine-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.mine-desc {
    font-size: 0.9rem;
    color: var(--brand-text-muted);
    line-height: 1.7;
    max-width: 360px;
}
.mine-note {
    font-size: 0.78rem;
    color: var(--brand-text-muted);
    opacity: 0.75;
}

/* ============================================================
   「我的」页 动作区 / 改密表单 / 配额（2026-08-14）
   ============================================================ */
.mine-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    max-width: 320px;
}
.mine-actions .btn {
    width: 100%;
}
.mine-quota {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    background: rgba(212, 168, 75, 0.08);
    border: 1px solid rgba(212, 168, 75, 0.2);
    border-radius: 0.8rem;
    padding: 0.6rem 1rem;
}
/* ============================================================
   「我的」页 资金基数块（2026-09-23 工具页方案 · 路线甲）
   总资金由用户填一次；可用资金为后端计算值，样式上区分主次
   ⚠️ 2026-09-26：「工具」页已删、本块**未随之删除** —— 它属「我的」页自身，
      且是账号级字段的编辑入口，与工具页的存废是两件事，别顺手一起删掉。
      但它当前已无计算方消费（详见 backend/app/models/user.py 的 total_capital 注释）。
   ============================================================ */
.mine-capital {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    padding: 0.8rem 1rem;
}
.mine-capital-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.mine-capital-label {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
}
.mine-capital-value {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--brand-text);
}
.mine-capital-hint {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--brand-text-muted);
    opacity: 0.75;
    margin: 0.2rem 0 0.5rem;
}
/* 可用资金为负（2026-10-01）：这是「有真值但已超支」的第三种状态 ——
   既不是缺失（`—`），也不是真 0（`0.00`），故单给一个颜色区分。
   ⚠️ 必须排在上方 .mine-capital-hint 之后（同为单类选择器，靠书写顺序取胜），
   否则提示行的琥珀色会盖掉这里的红色。 */
.mine-capital-negative {
    color: var(--brand-red);
    opacity: 1;
}
.mine-capital .btn {
    width: 100%;
}

.mine-form {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.mine-form .form-label {
    display: block;
    text-align: left;
    font-size: 0.82rem;
    color: var(--brand-text-muted);
    margin-bottom: 0.35rem;
}

/* ============================================================
   游客空态（看板 / 个人中心）
   ============================================================ */
.empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.empty-sub {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    line-height: 1.7;
    max-width: 320px;
    margin: 0 auto;
}
.empty-cta {
    margin-top: 0.6rem;
}

/* ============================================================
   免费会员配额条（看板顶部，2026-08-14）
   ============================================================ */
.quota-bar {
    max-width: 1200px;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--brand-gold);
    background: rgba(212, 168, 75, 0.08);
    border: 1px solid rgba(212, 168, 75, 0.22);
    border-radius: 0.9rem;
    padding: 0.65rem 1rem;
    text-align: center;
}

/* ============================================================
   登录 / 注册 模态框（2026-08-14，移动端优先）
   ============================================================ */
.auth-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5, 9, 14, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-modal {
    width: 100%;
    max-width: 380px;
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: 1.4rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: auth-pop 0.22s ease-out;
}
@keyframes auth-pop {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.auth-modal-head {
    padding: 1.2rem 1.4rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-close {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-close:active {
    background: rgba(255, 255, 255, 0.14);
}
.auth-tabs {
    display: flex;
    gap: 0.5rem;
}
.auth-modal-head .auth-tabs {
    flex: 1;
}
/* 「我的」页游客态内嵌登录框（2026-08-14） */
.mine-login-box {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.mine-login-box .auth-field .form-input {
    font-size: 1rem; /* ≥16px 防 iOS 输入自动缩放 */
    width: 100%;
}
/* 注册展开区（确认密码 + 手机号）与「注册 / 返回登录」按钮 */
.mine-auth-extra {
    border-top: 1px dashed var(--brand-border);
    padding-top: 0.85rem;
}
.mine-auth-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.auth-tab {
    flex: 1;
    padding: 0.55rem 0;
    border: 1px solid var(--brand-border);
    border-radius: 0.7rem;
    background: none;
    color: var(--brand-text-muted);
    font-size: 0.92rem;
    font-family: var(--font-family);
    cursor: pointer;
}
.auth-tab.active {
    color: var(--brand-gold);
    border-color: rgba(212, 168, 75, 0.5);
    background: rgba(212, 168, 75, 0.08);
    font-weight: 600;
}
.auth-body {
    padding: 1.1rem 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.auth-body .auth-field .form-input {
    font-size: 1rem; /* ≥16px 防 iOS 输入自动缩放 */
    width: 100%;
}
.auth-submit {
    width: 100%;
    min-height: 46px;
}
.auth-footer {
    border-top: 1px solid var(--brand-border);
    padding: 0.85rem 1.4rem 1.1rem;
}
.auth-footer .auth-guest {
    width: 100%;
}
/* ICP 备案号（合规） */
.footer-beian {
    margin-top: 0.8rem;
    padding: 0 1rem 1.2rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--brand-text-muted);
}
.footer-beian a {
    color: inherit;
    text-decoration: none;
}
.footer-beian a:hover {
    text-decoration: underline;
}

/* ============================================================
   Bce/So/Then 输入框一键复制按钮（2026-09-14 新增）
   ============================================================ */
/* 给每个输入框的外层 form-field 加相对定位，作为按钮定位锚点 */
.form-field.copyable {
  position: relative;
  padding-right: 4.2rem; /* 给按钮留出位置，不遮挡输入框 */
}
.copy-btn {
  position: absolute;
  top: 1.6rem; /* 和 label 对齐右上角 */
  right: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--brand-text-muted);
  line-height: 1.4;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--brand-text);
}
.copy-btn.copied {
  background: rgba(212, 168, 75, 0.15);
  border-color: rgba(212, 168, 75, 0.4);
  color: var(--brand-gold);
}
/* 小节标题行右端的「合并复制」按钮（2026-09-14 晚）：走 .form-subsection-title-row 的行内流式排布，
   必须盖掉上面 .copy-btn 的 absolute —— 那两个偏移是给 .form-field.copyable 的右上角用的，
   放进 flex 标题行会脱离文档流、叠到标题上。 */
.copy-btn-inline {
  position: static;
  flex: none;
}
/* 适配移动端，按钮不挤 */
@media (max-width: 480px) {
  .form-field.copyable {
    padding-right: 3.8rem;
  }
  .copy-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* ============================================================
   2026-09-22 owner 拍板 · 策略制定页改版
   技术分析 ｜ 价格计算 并排 + 交易记录板块
   改前备份：pages.css.bak_20260922_techmerge
   ============================================================ */

/* ---------- 技术分析 ｜ 价格计算：并排容器 ----------
   窄屏单列堆叠；≥768px 两栏等高并排。用 grid 1fr 1fr 而非 calc(50% - gap/2)，
   避免盒模型算错导致第二栏掉行。.form-section 自带 margin-bottom，并排时必须清掉，
   否则垂直间距由容器 gap 与子项 margin 叠加成双倍。 */
.tech-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.tech-pair > .form-section {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .tech-pair {
    /* 2026-09-22 owner 四次调整：1fr 1fr → 1fr 3fr。
       技术分析卡片减半后只占容器的 1/4，原 1fr 栏右半是空白；收窄该栏、把让出的空间
       全部并入价格计算。两张卡仍紧贴无留白，技术分析视觉宽度不变
       （1fr 栏的 100% == 原 1fr 栏的 50%），价格计算则获得足够宽度恢复两栏内层。
       ---
       2026-09-24 owner 再改：1fr 3fr → **2fr 3fr**（「加宽技术分析，两栏视觉平衡」）。
       容器内容宽固定 704px（main.css --container-max:768px，无 ≥1280 覆盖），
       gap 0.8rem ⇒ 可用 691.2px：旧 1fr 3fr = 技术分析 172.8 / 价格计算 518.4，
       新 2fr 3fr = **276.5 / 414.7**。技术分析 +60%，价格计算仍够放下内层两栏。
       实算（.form-section 内边距 1rem×2，见 pages.css:605 对 270 的覆盖）：
       价格计算内容区 = 414.7 − 32 = 382.7px；内层需 193.6(左列) + 19.2(gap) + 152(右栏)
       = 364.8px ≤ 382.7px，余 17.9px ✓ 不溢出。
       ⚠️ 不能再往 1fr 1fr 走：内容区只剩 297px，放不下上述 364.8px，
       右栏会被压到 ~84px 而横向溢出。此处 2fr 3fr 是「平衡」与「不溢出」的交点。
       副作用（已核对，非问题）：技术分析栏变宽 ⇒ 其周期形态输入框（width:100%）由
       140.8px 增至 244.5px，只会更宽松。 */
    grid-template-columns: 2fr 3fr;
    align-items: stretch; /* 两面板等高对齐 */
  }
}

/* ---------- 半宽面板内的适配 ----------
   作用域一律限定在 .tech-pair 内，不影响页内其他板块。 */

/* 周期形态：徽标 + 输入 + 单维度分析 三列是整幅宽度下的排布，半宽会挤成窄条 → 堆叠 */
.tech-pair .cycle-group {
  grid-template-columns: 1fr;
}

/* 价格计算：原为两栏（输入列 ｜ 结果列），右栏用 position:absolute 贴满左列行高；
   半宽下面板内容约 312px，两栏必然溢出 —— 改单栏堆叠。
   ⚠️ 两处必须一起清，否则「单栏」不成立：
   ① 子项带显式 grid-column:2 / grid-row:1 —— 只改 grid-template-columns 的话，
      Grid 会为 grid-column:2 **生成隐式第二列**，两栏照旧并排；
   ② 右栏的 position:absolute + 四条定位 —— 不清则脱离文档流、错位/溢出。
   ⚠️ 2026-09-22 四次调整：本节整组（单栏 + 位置复位 + 静态定位）**只在窄屏成立**。
   并排档价格计算已放宽到容器的 3/4，文件末尾的 @media (min-width:768px) 块把本节
   逐条还原为两栏原设计；改任一条时两处必须一起看。 */
.tech-pair .price-layout {
  grid-template-columns: 1fr;
  max-width: none;
}
.tech-pair .price-layout > * {
  grid-column: auto;
  grid-row: auto;
}
.tech-pair .price-results-col {
  position: static;
}
/* 价格输入框原为 6rem 定值（给并排两栏留位），半宽单栏下允许收缩 */
.tech-pair .price-input {
  min-width: 0;
}
.tech-pair .price-input-field {
  min-width: 0;
}

/* ---------- 输入框 / 展示框 宽度减半（2026-09-22 owner 二次调整）----------
   只作用于「技术分析」「价格计算」两个面板：其中的**输入控件**与**展示框**一律取所属
   容器的 50%（三者容器均等于面板内容宽，故视觉上都是"半个面板宽"）。
   不在减半之列的：周期形态徽标 .cycle-badge（标签胶囊，非输入/展示框）、
   各周期分组卡片 .price-cycle-block（容器，非输入/展示框）。
   ⚠️ 2026-09-22 四次调整：其中 .price-input 与 .price-results-col 两条只在窄屏生效 ——
   价格计算面板放宽后，并排档由文件末尾的 @media (min-width:768px) 块改回 7.5rem 定值
   与绝对定位填满右栏。 */
.tech-pair .cycle-group .form-input {
  width: 50%;
}
.tech-pair .price-input {
  width: 50%;
}
.tech-pair .price-results-col {
  width: 50%;
}
/* 徽标贴合自身文字宽度：单列 grid 下 grid item 默认拉伸，胶囊会撑满整行，
   与"输入框只占半行"并排会显得断裂（2026-08-15 全局单列覆盖的既有副作用，此处收敛）。 */
.tech-pair .cycle-badge {
  width: fit-content;
}

/* ---------- 基础信息：品种 / 代码 左右布局 ----------
   只作用于显式加了 .form-grid-cols2 的面板，**不**恢复 2026-08-15「全端单列」的全局覆盖
   （那条覆盖还管着策略制定板块内的 8 个字段，动了会一起变两列）。 */
.form-grid-cols2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .form-grid-cols2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 小节标题作为面板首个元素时，去掉顶部分隔虚线 ----------
   「技术分析」的「周期形态」与「策略制定」的「周期分析」都紧跟 legend，
   保留虚线会在 panel 顶部留一条悬空分隔线。 */
.form-section > .form-subsection-title:first-of-type,
.form-section > .form-subsection-title-row:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- 板块5 交易记录 ----------
   一行 = 一笔开仓 + 其对应的一笔平仓；窄屏上下堆叠，≥768px 左「开仓」右「平仓」两列。
   行内复用既有 .calc-row / .calc-input / .calc-op / .calc-result，不新造视觉语言；
   控件过宽时沿用 .calc-row 的 flex-wrap 自然换行（不溢出、不截断）。 */
#trade-rows {
  display: grid;
  gap: 1rem;
}
.trade-empty {
  font-size: 0.82rem;
  color: var(--brand-text-muted);
}
.trade-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
}
@media (min-width: 768px) {
  .trade-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.trade-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
/* 开仓 / 平仓 徽标：沿用 cycle-badge 的胶囊形与配色系（勃艮第 / 青灰），两列一眼可辨 */
.trade-cell-tag {
  width: fit-content;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.trade-tag-open {
  background: var(--brand-burgundy);
  color: #fff;
}
.trade-tag-close {
  background: var(--brand-slate);
  color: #E8EDF2;
}
.trade-cell .calc-row {
  min-width: 0;
}
/* 「= 金额」成组：控件换行时整组一起落到下一行，不会把 = 与金额拆开 */
.trade-eq {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.trade-side-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.6rem;
  /* 原生下拉弹层强制深色主题，选项文字可读（同 .form-hour-select） */
  color-scheme: dark;
}
.trade-side-select option {
  color: var(--brand-text);
  background-color: var(--brand-bg-card);
}

/* ---------- 交易记录板块整体缩小一号（2026-09-24 owner 拍板） ----------
   「选择框、输入框以及默认内容，全部缩小一号」。
   基准（pages.css:377 .form-input）：font-size 0.92rem / padding 0.72rem 1rem；
   此处各降一档到 0.84rem / 0.55rem 0.75rem，其余控件按同一比例跟随，
   保持行内控件之间的相对大小不变（只整体缩，不出现「框小了字没小」的错位）。
   作用域一律限定 #trade-rows（该 id 只存在于 strategy-form.html），
   不碰页面其他板块，也不改 .calc-* / .form-input 的全局定义。
   ⚠️ 用 id 前缀而非 .trade-row：徽标与 ＋ 按钮在行外，靠 id 一并覆盖。 */
#trade-rows .form-input {
  font-size: 0.84rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.7rem;
}
/* 行内读数（= 金额）与运算符：默认跟随 1rem，显式降到与输入框同级 */
#trade-rows .calc-result {
  font-size: 0.84rem;
}
#trade-rows .calc-op {
  font-size: 0.8rem;
}
/* 输入框基准宽同步降一档：否则框变小了、占位（flex-basis 5.5rem）没变，
   两个输入框之间反而显得更挤 */
#trade-rows .calc-input {
  flex: 1 1 4.6rem;
  min-width: 3.8rem;
}
#trade-rows .trade-side-select {
  min-width: 4rem;
}
#trade-rows .trade-cell-tag {
  font-size: 0.7rem;
  padding: 0.16rem 0.62rem;
}
#trade-rows .trade-row {
  padding: 0.7rem 0.8rem;
  gap: 0.6rem;
}
#trade-rows .trade-cell {
  gap: 0.4rem;
}
/* 「＋」新增一组：置于标题行右端，与「复制」按钮同位置的视觉重量 */
.trade-add-btn {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(212, 168, 75, 0.4);
  background: rgba(212, 168, 75, 0.12);
  color: var(--brand-gold);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.trade-add-btn:hover {
  background: rgba(212, 168, 75, 0.2);
  border-color: rgba(212, 168, 75, 0.6);
}

/* ---------- 行内三按钮：编辑 / 保存 / 删除（2026-09-22 owner 拍板）----------
   横跨整行 —— .trade-row 在 ≥768px 是两列网格，不跨列会被塞进左列里；
   右对齐收在平仓侧下方。两态由 .is-locked 区分，置灰逻辑在 js 的 setTradeRowLocked。 */
.trade-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.trade-act-btn {
  flex: none;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid var(--brand-border);
  background: transparent;
  color: var(--brand-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.trade-act-btn:hover:not(:disabled) {
  color: var(--brand-text);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
}
/* 当前态下无意义的那个按钮置灰（可编辑时「编辑」灰、锁定时「保存」灰） */
.trade-act-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
/* 删除：勃艮第品牌色描边，与中性的编辑/保存区分（品牌色，非方向性用词） */
.trade-act-btn.is-danger {
  color: var(--brand-burgundy);
}
.trade-act-btn.is-danger:hover:not(:disabled) {
  color: #fff;
  border-color: var(--brand-burgundy);
  background: var(--brand-burgundy);
}
/* 锁定态：输入控件压暗，一眼看出这行是只读的。
   文字色与 -webkit-text-fill-color 必须显式写死 —— 项目此前没有任何 .form-input:disabled
   规则（已 grep 确认），不指定就会落到浏览器默认禁用色，在深色底上对比度不可控。 */
.trade-row.is-locked .calc-input,
.trade-row.is-locked .trade-side-select {
  opacity: 0.7;
  color: var(--brand-text);
  -webkit-text-fill-color: var(--brand-text);
}
/* 行内「保存」不落库的提示条 */
.trade-hint {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--brand-text-muted);
}

/* ============================================================
   技术分析面板：卡片底色减半（2026-09-22 owner 三次调整）
   改前备份：pages.css.bak_20260922_techhalve
   ============================================================ */

/* ---------- 卡片底色减半，卡内控件不动 ----------
   只缩卡片自身宽度（.tech-pair 里第一个 fieldset = 技术分析）：右半留白，
   价格计算卡片的位置与宽度一概不动。卡内控件相对卡片回到 100%，
   不叠加二次减半（否则输入框会掉到约 78px，「L 周期形态」占位文字放不下）。
   实测：≥1280px 卡片 378→189px、输入框 172→157px；768px 截面卡片 346→173px、输入框 157→141px。
   仅并排档生效 —— 窄屏卡片独占整行、本就贴合内容，没有留白可收，
   硬减半会把 320px 下的输入框压到约 70px，反而不可用。 */
@media (min-width: 768px) {
  /* 技术分析卡片占满自己那一栏即可 —— 列宽已由 1fr 3fr 收窄到容器的 1/4，
     视觉宽度与上一版「1fr 栏内 50%」完全一致。 */
  .tech-pair > .form-section:first-child {
    width: 100%;
  }
  /* 比 .tech-pair .cycle-group .form-input（width:50%）多一级，稳态胜出，不依赖书写先后 */
  .tech-pair > .form-section:first-child .cycle-group .form-input {
    width: 100%;
  }

  /* ---------- 价格计算：还原 2026-08-14 的两栏设计（2026-09-22 owner 四次调整）----------
     该设计此前被上面的单栏覆盖压掉，理由是「半宽面板内容约 312px，两栏必然溢出」；
     面板放宽到容器的 3/4 后该理由不再成立（≥1280px 内容约 534px：左列约 196px + 间隙
     19px + 右栏约 320px），故按原设计复位。
     ⚠️ 下面四条必须与上面的 .tech-pair 单栏覆盖成对出现，少任何一条都会退化成错位或溢出。 */

  /* ① 两栏骨架（左 auto = 三周期输入，右 minmax(0,9.5rem) = 计算结果）
        2026-09-24 owner 改：右栏上限 22rem → 9.5rem（宽度缩减一半）。
        左列是 auto，min-content = max-content = 价格输入框 7.5rem + 标签 2rem
        + gap 0.6rem + 卡片内边距 2rem = 193.6px（定死，不会再宽）；
        本次收上限后 9.5rem 才成为实际宽：可用 382.7 − 19.2 − 193.6 = 169.9px > 152px
        ⇒ 右栏落在 152px，余下 17.9px 由 auto 左列吸收（193.6 → 211.5px），不溢出。 */
  .tech-pair .price-layout {
    grid-template-columns: auto minmax(0, 9.5rem);
  }
  /* ② 显式列位：比 .tech-pair .price-layout > *（grid-column:auto）多一级，稳态胜出 */
  .tech-pair .price-layout > .price-input-col {
    grid-column: 1;
    grid-row: 1;
  }
  .tech-pair .price-layout > .price-results-col {
    grid-column: 2;
    grid-row: 1;
    /* ③ 还原绝对定位：以自身网格区域为包含块（.price-layout 已 position:relative），
           top/bottom:0 让右栏高度严格等于左列行高 —— 2026-08-14「结果框与输入列平齐」的原手段 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* ④ 绝对定位下 left/right 同时为 0 已定宽，width 必须让位，
           否则过约束、right 被忽略，右栏会缩回左侧半宽 */
    width: auto;
  }
  /* ⑤ 右栏收窄到 9.5rem 后左右内边距相对变厚（1.2rem×2 = 38.4px 占 25%），
        按比例收到 0.9rem —— 给长价格条（如「123456.78 L1」约 110px）留出位置，
        否则结果条会横向溢出、右栏内出现横向滚动条。
        仅并排档生效：窄屏右栏独占整行、本就是全宽，不需要收。 */
  .tech-pair .price-results-col {
    padding: 1rem 0.9rem;
  }
  /* 价格输入框回到 2026-08-14 的 7.5rem 定值 —— 「减半」是窄面板下的权宜；
     面板放宽后 50% 会算成约 45px，价格输入无法使用。 */
  .tech-pair .price-input {
    width: 7.5rem;
  }
}

/* ============================================================
   策略制定板块：输入框 / 显示框整体缩小一号（2026-09-22 owner 拍板）
   改前备份：pages.css.bak_20260922_panelshrink
   ============================================================ */

/* ---------- 作用域与「为什么必须写在文件最末尾」----------
   唯一作用域是 .panel-strategy —— 只挂在「策略制定」那个 fieldset 上
   （pages/strategy-form.html 的 <fieldset class="form-section panel-strategy">）。
   基础信息 / 技术分析 / 价格计算 / 交易记录 四个板块一概不受影响。

   ⚠️ 两处特异度坑，踩中任一个本块就会静默失效（字面看着没问题、页面却不变）：
   ① 上面第 764 行有 body:has(.app-tabbar) .form-input { font-size: 1rem }
      ——「防 iOS 聚焦自动缩放」规则。:has() 只认 DOM 存在、不看 display，
      而 <nav class="app-tabbar"> 在每个零售页都恒在 DOM 中，所以这条规则
      **在本页所有屏宽都生效**：策略制定板块的输入框实际字号是 16px，
      并非文件里写的 0.92rem。裸的 .panel-strategy .form-input 只有 (0,2,0)，
      会被它 (0,2,1) 压掉；下面给每个选择器补上元素名凑到同为 (0,2,1)，
      再靠本块位于文件末尾的书写次序取胜。**删掉元素名会立刻失效。**
   ② 本块是全端生效（owner 2026-09-22 明确选择「全端都缩，接受 iOS 聚焦放大」），
      故**刻意不放进 @media (min-width: 1024px)**。若日后要改回保护 iOS，
      把字号那两条挪进 ≥1024px 媒体查询即可，方框尺寸无需跟着动。 */

/* 输入框 / 文本域 / 下拉：字号 16px → 14px，方框同步收一号 */
.panel-strategy input.form-input,
.panel-strategy textarea.form-input,
.panel-strategy select.form-input {
  font-size: 0.875rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
}
/* 预显示占位文字：比输入文字再小一号（owner 明确要求「输入框内预显示的字体缩小」）。
   只作用于 ::placeholder —— iOS 聚焦缩放看的是输入框自身 font-size，故这一条不影响它。 */
.panel-strategy input.form-input::placeholder,
.panel-strategy textarea.form-input::placeholder {
  font-size: 0.8rem;
}
/* 自动增高框的初始高度跟着收一号 —— min-height:44px 是配 16px 字的，
   不调的话文本域看着纹丝不动，只有宽高变了 */
.panel-strategy .form-input-auto {
  min-height: 40px;
}
/* 价格 / 数量框：flex 基准与下限同步收一号，否则框内边距小了、宽度还是老值 */
.panel-strategy .calc-input {
  flex-basis: 4.9rem;
  min-width: 4rem;
}
/* 计划开始时间的小时下拉 —— 2026-09-24 owner 拍板：与日期框**等宽**。
   原为 flex-basis: 5.9rem（当时刻意定值、不跟着 calc-input 变）。
   ⚠️ 只把 .form-datetime-row .form-input 那条改成 flex: 1 1 0 是**不够的**：
   本条的权重同为 (0,2,0)、但位于文件更靠后 ⇒ 源序胜出，小时框仍从 5.9rem 起算。
   实算（本板块内容宽 672px，行 gap 9.6px）：两框 grow 都是 1，basis 一个是 0、
   一个是 94.4px ⇒ 日期框 284px、小时框 378px，**并不等宽**。
   故此处一并改成 1 1 0，两条同为 basis 0 才真正等分整行。 */
.panel-strategy .form-hour-select {
  flex: 1 1 0;
}
/* 显示框：￥0.00 这类只读结果原是继承 body 的 1rem，与输入框同大，一并收一号 */
.panel-strategy .calc-result,
.panel-strategy .profit-result {
  font-size: 0.875rem;
}
/* 货币符 / 运算符 / 「操作时间」标签：跟着收，避免「框小了字还大」 */
.panel-strategy .calc-currency,
.panel-strategy .calc-op {
  font-size: 0.85rem;
}
/* 目标收益行的标签与单位 */
.panel-strategy .profit-label,
.panel-strategy .profit-unit {
  font-size: 0.76rem;
}
/* 越界提示胶囊（「⚠️ 超出划拨总额」等），原文 0.72rem → 收一号 */
.panel-strategy .calc-warn {
  font-size: 0.66rem;
}

/* 2026-09-26 已删：工具页 pages/tools.html 的**整段样式**（2026-09-23 v1.0 加的 22 条规则：
   .tools-intro、.tools-status、.tools-list、.tool-card*、.tool-field*、.tool-input、.tool-readout*、
   .tool-manual、.tool-mode*、.tool-card-actions，含 .tools-list 的 1024px 两列断点）。
   随该页一并下线：上列 22 个类名在 pages/ 与 js/ 里已**无任何使用方**（逐个 grep 核实过）。
   刻意整段删而不是留着：这些类名对应的 DOM 只由 tools.js 产出，留着就是 131 行永远命不中的死样式，
   且会让后来人以为站内还有个「工具页」。
   ⚠️ 上面那段 .panel-strategy .calc-warn 等规则**不属本段**，是策略制定页的活样式，未动。
   ⚠️⚠️ 本注释内**禁止**出现「星号紧接斜杠」的字符序列。2026-09-26 踩过：
      上列类名原先用斜杠分隔，`.tool-card*` 后紧跟的那个斜杠被浏览器当成注释结束符
      （CSS 注释不能嵌套），于是从这里到下方 .field-row 之间的全部文字被当成一个
      **选择器前导**，.field-row 的 display:grid 与四列声明整块被挂上去、规则作废 ——
      表现就是策略制定页那两行的四个单元格竖着堆成四行。补写本注释时务必用顿号分隔。 */
/* ============================================================
   策略制定 · 新增两行（资金风控行 / 近期部署挂单行）—— 2026-09-26
   ============================================================
   位置在「.panel-strategy 整体缩小一号」块（本文件 ~1539 行）**之后**：
   那里是唯一的作用域，靠「同特异度 + 源序靠后」取胜。本节只新造
   .field-row / .field-cell 两个类名，**不重写 .panel-strategy 下任何已有属性** ——
   重写会撞上那个特异度陷阱（裸 .panel-xxx .form-input 是 (0,2,0)，
   会被 body:has(.app-tabbar) .form-input 的 (0,2,1) 静默压掉）。

   为什么用 fr 而不是百分比：用户要的是 30/20/30/20。写成
   `grid-template-columns: 30% 20% 30% 20%` 时，四个轨道先吃掉 100% 宽度，
   再额外加上 3 个 gap ⇒ 总宽必然超过容器、横向溢出。fr 是「先扣掉 gap，
   再把剩余空间按比例分配」，`3fr 2fr 3fr 2fr` 才是 30/20/30/20 的正确表达，
   也与既有 .tech-pair 的 fr 写法同一语言。
   ============================================================ */
.field-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.75rem;
    align-items: start;
    margin-top: 1rem;
    /* ⚠️ 必写：本行是 .form-grid（≥768px 为 1fr 1fr）的**直接子项**。
       不跨列的话它只会占半行宽，四个单元格被挤成一条。 */
    grid-column: 1 / -1;
}
.field-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
/* 单元格标签刻意**不用** .form-label：panelCopyText() 把 .form-label 当分节符，
   用它会在复制出的文本里凭空多出 8 个小节头。字段名由 PANEL_COPY_LABELS[id] 提供。 */
.field-cell-label {
    font-size: 0.82rem;
    color: var(--brand-text-muted);
}
.field-cell .calc-row { min-width: 0; }
.field-cell .form-input { min-width: 0; }
/* 只读结果格：给金额一个可见的「框」，但不用输入框外观（它不是输入项）。
   ⚠️ 只补 padding / border / radius，**不碰 font-size 与 width** ——
   字号由 .panel-strategy .calc-result 的规则统一收号，这里再写一次就会撞特异度。
   ⚠️ 横向兜底用 overflow-x:auto，**刻意不用 text-overflow:ellipsis**：
   把钱数截成「￥1234…」比撑破布局危险得多。 */
.field-cell.is-readonly .calc-result {
    padding: 0.6rem 0.85rem;
    border: 1px dashed var(--brand-border);
    border-radius: 0.7rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.field-cell.is-readonly .calc-result::-webkit-scrollbar { display: none; }
/* 本行的 ⚠️ 兜底提示（entry_warn）跨满整行。文案见 HTML，2026-09-27 已泛化，勿在此复述 */
.field-row-warn { grid-column: 1 / -1; }
/* 「受资金约束」这类只读结果格的补充说明（2026-09-27 新增）：
   小号弱化文字，作为 .field-cell 的第三个子项自动落在结果下方
   （.field-cell 已是纵向 flex + 0.4rem gap，无需另加外边距）。
   刻意不复用 .field-cell-label：那是「字段标签」的类，语义不同，
   将来改标签样式不该连带挪动这行说明。
   注意事项：本段注释内一律不写星号字符，避免再次触发注释被提前终止的事故。 */
.field-note {
    font-size: 0.76rem;
    color: var(--brand-text-muted);
}

@media (max-width: 767px) {
    .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 359px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Markdown 编辑 / 预览 单栏切换（2026-09-26）
   ============================================================
   结构由 js/markdown.js 注入：.md-wrap > (.md-toolbar + textarea + .md-preview)。
   状态真源是 .md-wrap[data-mode]，**不用 [hidden]** —— 不抢 [hidden] 的优先级，
   且 textarea 始终留在 DOM 里、.value 完好，这是「预览态复制仍是 Markdown 原文」
   与 collectPayload 零改动的前提。
   ============================================================ */
.md-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.md-toolbar {
    display: flex;
    gap: 0.3rem;
}
.md-tab {
    padding: 0.2rem 0.6rem;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--brand-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--brand-border);
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.md-tab:hover {
    color: var(--brand-text);
    border-color: var(--brand-gold);
}
.md-tab.is-active {
    color: #10161d;
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    font-weight: 600;
}
/* 单栏互斥：同时最多只有一个可见 */
.md-wrap > .md-preview { display: none; }
.md-wrap[data-mode="preview"] > .md-preview { display: block; }
.md-wrap[data-mode="preview"] > textarea { display: none; }

.md-preview {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--brand-border);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: auto;
    max-height: 32rem;
    overflow-y: auto;
}
/* 预览区内的排版：复用既有 --brand-* 令牌，不新造色值 */
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5,
.md-preview h6, .md-rendered h1, .md-rendered h2, .md-rendered h3,
.md-rendered h4, .md-rendered h5, .md-rendered h6 {
    margin: 0.9em 0 0.45em;
    line-height: 1.35;
    font-weight: 600;
    color: var(--brand-text);
}
.md-preview h1, .md-rendered h1 { font-size: 1.15rem; }
.md-preview h2, .md-rendered h2 { font-size: 1.06rem; }
.md-preview h3, .md-rendered h3 { font-size: 1rem; }
.md-preview h4, .md-preview h5, .md-preview h6, .md-rendered h4,
.md-rendered h5, .md-rendered h6 { font-size: 0.92rem; }
.md-preview > :first-child, .md-rendered > :first-child { margin-top: 0; }
.md-preview > :last-child, .md-rendered > :last-child { margin-bottom: 0; }
.md-preview p, .md-rendered p { margin: 0.5em 0; }
.md-preview a, .md-rendered a { color: var(--brand-gold); text-decoration: none; border-bottom: 1px dashed rgba(212, 168, 75, 0.45); }
.md-preview code, .md-rendered code {
    padding: 0.12em 0.38em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.86em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--brand-border);
    border-radius: 4px;
}
.md-preview pre, .md-rendered pre {
    margin: 0.7em 0;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--brand-border);
    border-radius: 0.6rem;
    overflow-x: auto;
}
.md-preview pre code, .md-rendered pre code { padding: 0; background: none; border: none; font-size: 0.84em; line-height: 1.55; }
.md-preview table, .md-rendered table { border-collapse: collapse; width: 100%; margin: 0.7em 0; font-size: 0.9em; }
.md-preview th, .md-preview td, .md-rendered th, .md-rendered td {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--brand-border);
    vertical-align: top;
}
.md-preview th, .md-rendered th { background: rgba(255, 255, 255, 0.05); font-weight: 600; }
.md-preview blockquote, .md-rendered blockquote {
    margin: 0.7em 0;
    padding: 0.45em 0.9em;
    border-left: 3px solid var(--brand-gold);
    background: rgba(212, 168, 75, 0.06);
    color: var(--brand-text-muted);
}
.md-preview blockquote p, .md-rendered blockquote p { margin: 0.3em 0; }
.md-preview ul, .md-preview ol, .md-rendered ul, .md-rendered ol { margin: 0.5em 0; padding-left: 1.5em; }
.md-preview li, .md-rendered li { margin: 0.2em 0; }
.md-preview hr, .md-rendered hr { border: none; border-top: 1px solid var(--brand-border); margin: 1.1em 0; }
.md-empty, .md-muted { color: var(--brand-text-muted); font-size: 0.9em; }

/* ============================================================
   任务看板卡片内的 Markdown **块级**渲染（2026-09-26）
   ============================================================
   由 js/markdown.js 的 render() 产出 —— 与策略制定页预览面板**同一个渲染器**，
   容器是卡片上的 .strategy-target 与 .strategy-meta-item .md-rendered。
   本类下的元素级样式就是上面那批 `.md-preview X` 规则的共选择器，
   所以两处观感逐字一致；改上面任一规则，卡片同步生效，不必两处各改一遍。

   ⚠️ 容器标签必须是 <div>：render() 会产出 <p>/<ul>/<pre>/<table> 等块级元素。
      <p> 里嵌 <p> 会被浏览器拆散（后续兄弟节点被搬到外面），<span> 是 phrasing
      content 也装不下块级元素 —— renderCard 已按此改过，改容器时两处同进同退。

   ⚠️ 裁切已按 owner 2026-09-26 的决定取消：卡片「按 Markdown 全权显示、随内容增长」。
      原先 .strategy-target 上的 -webkit-line-clamp:2 已移除 —— line-clamp 只在容器内
      全是行内内容时生效，块级子元素一进来它本就失效，留着只会变成误导后人的死配置。
      看板是单列网格（grid-template-columns: 1fr）、卡片 height:auto，所以长卡片
      只把页面拉长，不会挤压或错位别的卡片。

   ⚠️ 刻意**不**给 .md-rendered 设 font-size / line-height：让它跟随所在容器
      （目标行 0.92rem/1.6、meta 行 0.82rem/1.5），而不是被预览面板的 0.875rem/1.7 顶掉。
   ============================================================ */
.md-rendered {
    word-break: break-word;
    overflow-wrap: break-word;
    overflow-x: auto;
    min-width: 0;
}
/* 「近期部署」：标签与内容切成两列 —— 标签占首列，内容首行与标签齐平，
   换行后对齐到内容列，而不是钻到标签底下。
   ⚠️ align-self: stretch 不可省：.strategy-meta 是 align-items:flex-start 的列 flex，
      不加则本项按内容 max-content 定宽，1fr 列失去确定尺寸 → 长内容把卡片顶出横向溢出。
      拉伸后宽度由卡片给定，minmax(0,1fr) 才有界，配合 .md-rendered 的 min-width:0 正常换行。
   ⚠️ 只给「近期部署」加 is-md；同行的「计划开始」是纯文本，不受影响。
   标签与内容之间的间距沿用 strong 既有的 margin-right，故不设 column-gap。 */
.strategy-meta-item.is-md {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    align-self: stretch;
    column-gap: 0;
}
/* 标签与内容之间的间距由标签自己那个 strong 的 margin-right 提供。
   ⚠️ 上面 .strategy-meta-item strong 是**后代**选择器，会连内容里的 `**粗体**` 一起命中，
      给行内 <strong> 平白加 0.3rem 右间距（`**A**B` 会显示成「A B」）——
      预览面板没有这个间距，两处就不一致了。这里只对内容格内的 strong 归零。 */
.strategy-meta-item.is-md .md-rendered strong { margin-right: 0; }