/* jy-align.css（1.2）— 新壳（#jy-app：实盘 / 信号 / 统计 / 复盘 / 更多 / 闸门）对齐旧版（index.html + jiaoyi.css + components.css）的视觉语言。
 * 只改外观：卡片 / 按钮 / 分段 / 标签 / 输入 / 顶栏 / 底栏图标 / 字号 / 间距；不改结构和交互，不碰旧页面（全部限定在 #jy-app 内）。
 * 回退：index.html 删掉 <link href="css/jy-align.css"> 这一行即可（page-live.js 里的卡片包裹在没有本文件时也能正常显示）。
 * 对照表：
 *   旧 .card        白底 + 1px --color-border + radius-xl(16) + shadow-xs + 24px 内边距（≤560px：16px / radius-lg 12）
 *   旧 .card__title 18px 600；.card__desc 13px 次要色
 *   旧 .btn         胶囊、高 --control-h（36，触屏 44）、13px 500；.btn.blue 主操作蓝；.btn.ghost 白底描边
 *   旧 .seg         浅轨道 surface-2 + 白选中块 shadow-sm
 *   旧 .app-main    桌面 32px 上 / 32px 左右；手机 20px 上 / 16px 左右；区块间距 24（手机 16）
 *   旧 底部标签栏   图标 22px + 11px 字，当前项墨色 + 顶部 24×2 指示条；「录入」蓝色圆圈加号
 */

/* ---------- 顶栏：与旧版顶栏 / 页头同族（品牌 J 标 + 标题） ---------- */
#jy-app .jy-appbar { height: 60px; padding: 0 var(--side-pad, 16px); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
#jy-app .jy-appbar__in { max-width: 1088px; } /* = .jy-main 1120 − 左右内边距，标题与内容左对齐 */
#jy-app #jy-offline:empty { display: none; }
#jy-app .jy-appbar__title { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
#jy-app .jy-appbar__title::before {
  content: "J"; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-ink); color: var(--color-on-ink); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0;
}
#jy-app .jy-appbar__back + .jy-appbar__title::before { display: none; }
#jy-app .jy-appbar .jy-chip { height: var(--control-h-sm); font-size: var(--text-xs); }
#jy-app .jy-old-link { font-size: var(--text-sm); color: var(--color-text-2); }

/* ---------- 主区：间距与旧版 .app-main 一致 ---------- */
#jy-app .jy-main { max-width: 1120px; gap: var(--space-4); padding: var(--space-5) var(--side-pad, 16px) calc(var(--tabbar-h) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }
#jy-app .jy-section-label { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-2); }

/* 页头（page-live 等注入的 .jy-page-head，用旧版 .page-head 的字号） */
#jy-app .jy-page-head { display: none; }

/* ---------- 卡片 = 旧 .card ---------- */
#jy-app .jy-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: var(--space-6); }
#jy-app .jy-card--flush { padding: 0; }
#jy-app .jy-card.jy-exec { padding: var(--space-4) var(--space-6); }
#jy-app .jy-card__head { margin-bottom: var(--space-4); }
#jy-app .jy-card__title { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
#jy-app .jy-card__meta { font-size: var(--text-sm); line-height: var(--lh-sm); }
#jy-app .jy-card__desc { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-text-2); }
#jy-app .jy-tile { border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-4) var(--space-5); }
#jy-app .jy-tile__k { font-size: var(--text-sm); }
#jy-app .jy-tile__v { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
#jy-app .jy-ai { background: var(--color-surface); border-color: var(--color-border); }
#jy-app .jy-banner { border-radius: var(--radius-lg); }

/* 实盘：控制区卡（page-live.js 1.2 包裹） */
#jy-app .jy-live-panel { display: flex; flex-direction: column; gap: var(--space-4); }
#jy-app .jy-live-panel .jy-card__head { margin-bottom: 0; }
#jy-app .jy-live-panel .jy-opts { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* ---------- 按钮 = 旧 .btn ---------- */
#jy-app .jy-btn { min-height: var(--control-h); padding: 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-medium); }
#jy-app .jy-btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
#jy-app .jy-btn--ink { background: var(--color-ink); }
#jy-app .jy-live-btn { min-height: 52px; border-radius: var(--radius-pill); }
#jy-app .jy-live-btn__main { font-size: var(--text-base); }

/* ---------- 分段 / 标签（chip）= 旧 .seg / .btn.ghost ---------- */
#jy-app .jy-seg button, #jy-app .jy-seg a { min-height: calc(var(--control-h) - 6px); font-size: var(--text-sm); }
#jy-app .jy-chip { height: var(--control-h); font-size: var(--text-sm); border-color: var(--color-border-strong); }
#jy-app .jy-chip:hover { background: var(--color-surface-2); }
#jy-app .jy-chip.is-on, #jy-app .jy-chip.is-on:hover { background: var(--color-ink); }
#jy-app .jy-opts__label { font-size: var(--text-xs); }

/* ---------- 表单 = 旧 .field ---------- */
#jy-app .jy-input { height: var(--control-h); border-radius: var(--radius-sm); font-size: var(--text-sm); }
#jy-app .jy-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
#jy-app .jy-field__label { font-size: var(--text-xs); }

/* ---------- 列表 / 表格 = 旧 .table ---------- */
#jy-app .jy-row { font-size: var(--text-sm); }
#jy-app table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
#jy-app table th { color: var(--color-text-2); font-size: var(--text-xs); font-weight: var(--fw-medium); }

/* ---------- 底部标签栏：加图标（同旧版底栏 / 侧栏的图标），CSS mask，跟随文字颜色 ---------- */
#jy-app .jy-tabbar { height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
#jy-app .jy-tab { gap: 3px; font-size: 11px; color: var(--color-text-3); }
#jy-app .jy-tab::after {
  content: ""; order: -1; display: block; width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: var(--jy-ico) center / 22px 22px no-repeat; mask: var(--jy-ico) center / 22px 22px no-repeat;
}
#jy-app .jy-tab.is-current { color: var(--color-text); }
#jy-app .jy-tab[href="#/live"]    { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
#jy-app .jy-tab[href="#/signals"] { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11'/%3E%3Cpath d='M9 12h11'/%3E%3Cpath d='M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E"); }
#jy-app .jy-tab[href="#/stats"]   { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E"); }
#jy-app .jy-tab[href="#/review"]  { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
#jy-app .jy-tab[href="#/more"]    { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E"); }
/* 「＋」= 旧版「录入」：蓝色圆圈加号 + 文字 */
#jy-app .jy-tab--add { font-size: 0; color: var(--color-primary); }
#jy-app .jy-tab--add::after { --jy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
#jy-app .jy-tab--add::before, #jy-app .jy-tab--add.is-current::before {
  content: "录入"; position: static; width: auto; height: auto; border-radius: 0; background: none; font-size: 11px; line-height: 1.2; color: var(--color-text-3);
}

/* ---------- 桌面（≥1101px）：对齐旧版桌面主区 ---------- */
@media (min-width: 1101px) {
  #jy-app .jy-appbar { height: 64px; padding: 0 var(--space-8); }
  #jy-app .jy-appbar__in { max-width: 1056px; }
  #jy-app .jy-appbar__title { font-size: var(--text-xl); line-height: var(--lh-xl); }
  #jy-app .jy-appbar__title::before { display: none; } /* 桌面侧栏已有品牌 J 标 */
  #jy-app .jy-main { gap: var(--space-6); padding: var(--space-8) var(--space-8) calc(var(--tabbar-h) + var(--space-12)); }
  #jy-app .jy-page-head { display: block !important; }
  #jy-app .jy-page-head .page-head__title { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
  #jy-app .jy-page-head .page-head__desc { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-2); }
  /* 实盘：左 控制区（吸顶，同旧版右侧录入面板）｜右 结果 */
  #jy-app .jy-main--live { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; column-gap: var(--space-6); }
  #jy-app .jy-main--live > * { grid-column: 1 / -1; }
  #jy-app .jy-main--live > .jy-page-head { grid-row: 1; }
  #jy-app .jy-main--live > .jy-live-panel { grid-column: 1; grid-row: 2; position: sticky; top: calc(64px + var(--space-6)); }
  #jy-app .jy-main--live > #jy-result { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  #jy-app .jy-main--live > #jy-result:empty::before {
    content: "点左侧「分析刚收盘这根」，结果会显示在这里。"; display: block; padding: var(--space-8) var(--space-6); border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl); color: var(--color-text-2); font-size: var(--text-sm); text-align: center; background: var(--color-surface);
  }
  #jy-app .jy-main--live > .jy-disclaimer { grid-column: 1; grid-row: 3; align-self: start; }
  #jy-app .jy-tabbar { justify-content: center; }
  #jy-app .jy-tab { flex: 0 1 140px; }
}

/* ---------- 手机（≤560px）：旧 .card 的手机内边距 / 圆角 ---------- */
@media (max-width: 560px) {
  #jy-app .jy-card { padding: var(--space-4); border-radius: var(--radius-lg); }
  #jy-app .jy-card--flush { padding: 0; }
  #jy-app .jy-card.jy-exec { padding: var(--space-3) var(--space-4); }
  #jy-app .jy-card__title { font-size: var(--text-base); }
  #jy-app .jy-tile__v { font-size: var(--text-xl); line-height: var(--lh-xl); }
  #jy-app .jy-tile { padding: var(--space-3) var(--space-4); }
}