/*
 * 前台展示与登录样式（移动端竖屏优先）
 * 功能：
 *   1. 首页：无顶部标题区，直接从第一张行情卡片开始；卡片内含各自数据年龄，
 *      底部页脚为“离岸汇率 + 更新时间 + 退出按钮”；
 *   2. 登录页与提示页：密码输入、错误提示、封禁提示；
 *   3. 手机竖屏下两张卡片一屏完整显示，间距紧凑但不拥挤；
 *   4. 关键数值使用等宽数字（tabular-nums）与固定宽度，避免刷新时左右跳动；
 *   5. 全站统一红涨绿跌：price-up 红色、price-down 绿色、price-zero 中性灰；
 *   6. 字号使用 rem/clamp 随屏宽自适应，并适配 iPhone 底部安全区；
 *   7. 禁用长按选中与长按弹出系统菜单，避免误触选中文本。
 */

:root {
    --bg: #f2f4f7;
    --card-bg: #ffffff;
    --text-main: #1f2937;
    --text-sub: #6b7280;
    /* 次要字段数值的默认中性色，比主文本浅一档 */
    --text-value: #4b5563;
    --line: #e5e7eb;
    /* 涨跌配色统一走变量：--up 红涨 / --down 绿跌 / --flat 中性（零值或数据缺失） */
    --up: #c62828;
    --down: #1e7e34;
    --flat: #6b7280;
    --accent: #2563eb;
    --warn: #b45309;
    --radius: 12px;
}

/* 根字号随屏宽在 14~16px 之间自适应，卡片字号用 rem 继承 */
html {
    font-size: clamp(14px, 4vw, 16px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--bg);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.4;
    min-height: 100vh;
    min-height: 100dvh;
    /* 移动端禁用长按选中与长按弹出系统菜单；输入框单独恢复可选 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.page {
    max-width: 48rem;
    margin: 0 auto;
    /* 底部叠加 iPhone 安全区，避免内容被 Home 指示条遮挡 */
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
}

/* ===== 提示页（IP 封禁 / 页面不存在） ===== */
.message-box {
    margin-top: 2.5rem;
    padding: 1.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.message-box h1 {
    margin-bottom: 0.5rem;
    font-size: clamp(1.0625rem, 5vw, 1.25rem);
}

.message-box p {
    color: var(--text-sub);
    font-size: 0.875rem;
}

/* ===== 登录页 ===== */
.login-box {
    max-width: 22.5rem;
    margin: clamp(1.5rem, 8vh, 3rem) auto 0;
    padding: 1.5rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.login-title {
    font-size: clamp(1.125rem, 5vw, 1.375rem);
    font-weight: 700;
}

.login-subtitle {
    margin-top: 0.375rem;
    color: var(--text-sub);
    font-size: 0.8125rem;
}

.login-error {
    margin-top: 0.875rem;
    padding: 0.5625rem 0.625rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 0.8125rem;
}

/* 通用隐藏类：错误框为空时不占位 */
.hidden {
    display: none !important;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.login-label {
    color: var(--text-sub);
    font-size: 0.75rem;
}

.login-input {
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-main);
    /* 16px 以上可避免 iOS 聚焦输入框时自动放大页面 */
    font-size: max(16px, 1rem);
    outline: none;
    /* 密码框允许选中与复制，覆盖全局禁用 */
    -webkit-user-select: text;
    user-select: text;
}

.login-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.login-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 0.375rem;
    padding: 0.625rem 0;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.login-btn:active {
    opacity: 0.85;
}

.login-hint {
    margin-top: 0.875rem;
    color: var(--text-sub);
    font-size: 0.75rem;
    text-align: center;
}

/* ===== 页脚：离岸汇率、更新时间与退出按钮 ===== */
/* 顶部标题/副标题已整块移除，退出入口改放在页脚右侧 */
.page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.125rem;
    color: var(--text-sub);
    font-size: 0.6875rem;
}

/* 汇率与更新时间：窄屏可换行，不挤占右侧退出按钮 */
.footer-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    min-width: 0;
}

.footer-item {
    white-space: nowrap;
}

/* 页脚数值：深色加粗 + 等宽数字，避免时间刷新时抖动 */
.footer-value {
    color: var(--text-main);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.footer-dot {
    color: var(--line);
}

/* 退出按钮：位于页脚右侧，点按区域高度不低于 44px */
.logout-form {
    flex: none;
}

.logout-btn {
    min-height: 44px;
    padding: 0 1.125rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-sub);
    font-size: 0.8125rem;
    cursor: pointer;
}

.logout-btn:active {
    background: #f8fafc;
}

/* 数据年龄超过 3 秒：橙色提醒（只变颜色，不加粗，字号保持小字） */
.age-warn {
    color: var(--warn);
}

/* 数据年龄超过 10 秒：红色警告，与涨跌红色同源 */
.age-danger {
    color: var(--up);
}

/* 首页使用纵向弹性布局，让页脚始终贴在页面底部 */
.page-home {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.page-home .page-footer {
    margin-top: auto;
}

/* ===== 卡片布局 ===== */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.data-card {
    position: relative;
    padding: 0.625rem 0.75rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 股票名称 + A 股代码 + 合约代码 + 数据年龄：同一行，代码与年龄用次要色小字 */
.stock-title {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    flex-wrap: nowrap;
}

/* 名称可省略，保证合约代码和数据年龄始终完整可见 */
.stock-name {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-code {
    color: var(--text-sub);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
}

/* 合约代码跟在 A 股代码后面，字号比代码再小一号 */
.contract-symbol {
    color: var(--accent);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex: none;
}

/* 合约代码与数据年龄之间的分隔点 */
.title-dot {
    color: var(--text-sub);
    font-size: 0.6875rem;
    flex: none;
}

/* 标题行的合约资金费率：小一号次要色，不抢主数值视觉（字号小于股票名称） */
.card-funding {
    color: var(--text-sub);
    font-size: 0.6875rem;
    font-weight: 400;
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 资金费率正负配色：正费率红色、负费率绿色，零值/缺失保持中性灰 */
.card-funding.price-up {
    color: var(--up);
}

.card-funding.price-down {
    color: var(--down);
}

.card-funding.price-zero {
    color: var(--text-sub);
}

/* 资金费率与“资费调整后股票价差”之间的斜杠：中性灰，不参与涨跌配色 */
.title-sep {
    color: var(--text-sub);
    font-size: 0.6875rem;
    font-weight: 400;
    flex: none;
}

/* 资费调整后的股票价差：小一号次要色，正红负绿，不显示参数名 */
.card-spread {
    font-size: 0.6875rem;
    font-weight: 400;
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.card-spread.price-up {
    color: var(--up);
}

.card-spread.price-down {
    color: var(--down);
}

.card-spread.price-zero {
    color: var(--text-sub);
}

/* 时间格里的年龄/休市状态：跟在具体时间后面的括号内，固定灰色小字 */
.time-age {
    color: var(--text-sub);
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 时间格年龄超阈值的颜色：只覆盖颜色，不改字号/字重 */
.time-age.age-warn {
    color: var(--warn);
}

.time-age.age-danger {
    color: var(--up);
}

/* ===== 三列主值行：股票现价 / 合约现价 / 实时溢价率 ===== */
/* 三列等宽分配，一行排完不换行；窄屏靠 clamp 字号下限兜底 */
.quote-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    margin: 0.4375rem 0 0.5rem;
    padding: 0.375rem 0.25rem;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

/* 单项：数值大字在上、参数名小字在下，水平居中 */
.quote-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
}

/* 参数名：约 0.65rem 灰色小字，明显小于数值 */
.quote-label {
    color: var(--text-sub);
    font-size: clamp(0.625rem, 2.7vw, 0.6875rem);
    line-height: 1.2;
    white-space: nowrap;
}

/* 主数值：1.06~1.5rem 大字加粗，等宽数字 + nowrap，窄屏用 clamp 缩字号也不换行 */
.quote-value {
    color: var(--text-main);
    font-size: clamp(1.0625rem, 5.2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 溢价率固定占位宽度并居中：正号/负号/零值切换时数值框宽度不变，刷新不跳动 */
.quote-value[data-field="premium_rate"] {
    min-width: 6ch;
    text-align: center;
}

.price-up {
    color: var(--up);
}

.price-down {
    color: var(--down);
}

.price-zero {
    color: var(--flat);
}

/* ===== 数据网格 ===== */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
}

.data-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.3125rem 0.5rem;
    background: var(--card-bg);
}

.data-label {
    flex: none;
    color: var(--text-sub);
    font-size: 0.6875rem;
    white-space: nowrap;
}

/* 次要字段弱化：字号比主值小、颜色更淡，避免和首行三个主值抢视觉 */
.data-value {
    min-width: 0;
    overflow: hidden;
    color: var(--text-value);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 次要字段同样按正负上色：涨跌、价差用红/绿，零值与缺失保持中性灰 */
.data-value.price-up {
    color: var(--up);
}

.data-value.price-down {
    color: var(--down);
}

.data-value.price-zero {
    color: var(--flat);
}

.data-time {
    color: var(--text-sub);
    font-size: 0.6875rem;
    font-weight: 400;
}

/* 时间格：标签左对齐，值区域占满剩余宽度，保证“时间列”起点固定 */
.data-item-time {
    justify-content: flex-start;
}

.data-item-time .data-value {
    flex: 1;
    text-align: left;
}

/* 分源时间：两行 × 两列（时间列 + 倒计时列），各自左对齐。
   时间列宽度由两行中最长的时间决定、倒计时列紧随其后，
   倒计时文字变长（2秒 → 1分5秒）只会向右延伸，时间位置不再左右跳动 */
.data-time-lines {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: baseline;
    column-gap: 0.25rem;
    row-gap: 0.0625rem;
    white-space: nowrap;
    line-height: 1.25;
}

/* 让每一行的“时间”和“倒计时”直接成为网格的两列，保证上下两行对齐 */
.time-line {
    display: contents;
}

/* 合并后的组合数值（股票/合约）：不换行、不截断，窄屏用 clamp 缩字号，
   两个数字的符号与整数部分都能完整显示 */
.data-value-pair {
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(0.625rem, 2.9vw, 0.75rem);
}

/* 组合数值之间的斜杠：中性灰，不参与涨跌配色 */
.data-value-pair .pair-sep {
    color: var(--text-sub);
    padding: 0 0.0625rem;
}

/* 超窄屏（如 320px）再收紧左右留白，保证两张卡片仍能一屏看完 */
@media (max-width: 360px) {
    .page {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    .data-card {
        padding: 0.5rem 0.625rem;
    }

    /* 超窄屏压缩主值行内边距与列间距，给三个数值留出横向空间 */
    .quote-row {
        gap: 0.125rem;
        padding: 0.3125rem 0.125rem;
    }

    /* 超窄屏压缩次要字段左右内边距，保证“股票/合约”组合数值不被裁切 */
    .data-item {
        padding: 0.25rem 0.375rem;
        gap: 0.125rem;
    }

    /* 超窄屏时间格改为“标签在上、两列时间在下”，
       避免“A股 12:05:47（午间休市）”与标签挤在同一行导致右侧被裁切 */
    .data-item-time {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
    }

    .data-item-time .data-label {
        font-size: 0.625rem;
    }

    .data-item-time .data-value {
        flex: none;
        width: 100%;
        font-size: 0.625rem;
    }

    .data-time-lines {
        column-gap: 0.125rem;
    }

    /* 超窄屏标题行收紧：资费、斜杠、资费价差都用更小字号，避免“资费 x% / y”把卡片撑出屏幕 */
    .stock-title {
        gap: 0.25rem;
    }

    .card-funding,
    .card-spread,
    .title-sep {
        font-size: 0.625rem;
    }
}

/* ===== 桌面端：两列并排，信息更紧凑 ===== */
@media (min-width: 640px) {
    .page {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }

    .cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    /* 桌面两列并排时卡片变窄，主值字号略收（仍大于移动端最小值） */
    .quote-value {
        font-size: 1.375rem;
    }
}