/* 人生K线 H5 —— 暗黑行情风
 * 默认铺满手机整个可视区（无上下黑边）；
 * 需要严格 9:16 画框时在地址后加 ?rec=916（上下留边、中间即抖音标准比例）。 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
    --up: #ff4b47;      /* 涨·红 */
    --down: #00d98e;    /* 跌·绿 */
    --gold: #f5c542;
    --ink: #e8ecf2;
    --dim: #6b7686;
    --panel: #12151c;
    --line: #232a36;
    --w916: 100%;       /* 默认满屏宽 */
    --h916: 100dvh;     /* 默认满屏高 */
}
html {
    height: 100%; background: #05070a; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #e8ecf2;
    width: var(--w916);
    height: 100vh; height: 100dvh; height: var(--vhpx, 100dvh);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
/* 录屏用 9:16 画框（地址加 ?rec=916） */
body.rec916 {
    --w916: min(100vw, calc(100vh * 9 / 16));
    --h916: calc(var(--w916) * 16 / 9);
    width: var(--w916); height: var(--h916); max-height: 100vh;
}
/* 电脑宽屏预览时按 9:16 居中显示（手机不受影响） */
@media (min-width: 720px) {
    body {
        --w916: min(100vw, calc(100vh * 9 / 16));
        --h916: calc(var(--w916) * 16 / 9);
        width: var(--w916); height: var(--h916);
    }
}

#app { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }

/* ============ 顶部主体信息 ============ */
.kv-top { padding: 12px 14px 8px; background: linear-gradient(180deg, #141924 0%, #0a0c10 100%); flex: none; }
.subj-row { display: flex; align-items: center; gap: 10px; }
.badge {
    width: 46px; height: 46px; flex: none;
    background: #d5281e; color: #fff; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    box-shadow: 0 0 18px rgba(213, 40, 30, .35);
}
.subj-meta { flex: 1; min-width: 0; }
.subj-name { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.subj-sub { font-size: 11px; color: var(--dim); margin-top: 2px; letter-spacing: .5px; }
/* 右上角：企业一句话核心介绍 */
.subj-intro {
    flex: none; max-width: 42%; margin-left: 6px; padding: 4px 8px 4px 9px;
    text-align: right; font-size: 9.5px; line-height: 1.5; letter-spacing: .2px;
    color: #d8c48a; background: rgba(245, 197, 66, .07);
    border-right: 2px solid rgba(245, 197, 66, .5); border-radius: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kv-mid { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.year-big { font-size: 52px; font-weight: 800; letter-spacing: 2px; line-height: 1; font-variant-numeric: tabular-nums; }
.age-line { font-size: 13px; color: #aab4c4; margin-top: 5px; }
.age-line b { color: var(--gold); font-weight: 700; }
.kv-right { text-align: right; }
.price-big {
    font-size: 40px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--up);
    text-shadow: 0 0 22px rgba(255, 75, 71, .45);
    transition: color .2s, text-shadow .2s;
}
.price-big.down { color: var(--down); text-shadow: 0 0 22px rgba(0, 217, 142, .45); }
.chg-line { font-size: 13px; margin-top: 6px; color: var(--up); font-variant-numeric: tabular-nums; }
.chg-line.down { color: var(--down); }
.chg-line b { font-weight: 600; margin-left: 6px; }

.kv-stat { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--dim); }
.kv-stat b { color: #c6cedb; font-variant-numeric: tabular-nums; }

/* ============ 图表区（约屏高 1/4，竖屏黄金比例） ============ */
.chart-panel { position: relative; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex: none; }
.chart-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px 3px; font-size: 11px; color: var(--dim); }
.chart-title { color: #9aa5b5; letter-spacing: .5px; }
.legend .dot { display: inline-block; width: 8px; height: 2px; margin: 0 4px 2px 10px; vertical-align: middle; }
.legend .ma5 { background: #e8b34b; }
.legend .ma20 { background: #7f8ea3; }
.chart-wrap { position: relative; height: 25vh; margin: 0 6px; }
#klineCanvas { width: 100%; height: 100%; display: block; }
.phase-bar { display: flex; height: 26px; margin: 0 6px 8px; gap: 2px; flex: none; }
.phase-bar span {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; color: #5d6775; background: #191e28; border-radius: 3px;
    white-space: nowrap; overflow: hidden;
}
.phase-bar span.cur { background: #31415c; color: #dce4f0; font-weight: 600; }
.phase-bar span.past { color: #8b96a8; }

/* ============ 大事记（flex 撑满剩余屏高，内部滚动，页面整体不滚动） ============ */
.event-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 16px; }
.ep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ep-role { font-size: 12px; color: var(--dim); display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ep-cap { flex: none; }
.ep-role b { color: #e8ecf2; font-size: 15px; white-space: nowrap; }
.ep-role em { font-style: normal; font-size: 10.5px; color: #5d6775; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tip { flex: none; font-size: 9.5px; color: #565f6e; border: 1px solid #242b38; border-radius: 3px; padding: 2px 6px; }
.ep-cap2 { font-size: 12.5px; font-weight: 700; color: #c6cedb; margin: 10px 0 6px; letter-spacing: 1px; flex: none; }
.ep-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ep-list::-webkit-scrollbar { display: none; }
.ep-list li {
    display: flex; gap: 10px; padding: 7px 8px 7px 10px;
    border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
    opacity: .38; transition: opacity .25s, background .25s;
}
.ep-list li.shown { opacity: .62; }
.ep-list li.cur { opacity: 1; background: #171c26; border-left-color: var(--up); }
.ep-list li.cur.down { border-left-color: var(--down); }
.ep-year { flex: none; width: 46px; font-size: 13px; font-weight: 700; color: var(--up); font-variant-numeric: tabular-nums; padding-top: 1px; }
li.down .ep-year { color: var(--down); }
.ep-body { min-width: 0; }
.ep-title { font-size: 14px; font-weight: 600; color: #dfe5ee; }
.ep-desc { font-size: 11.5px; color: #8b96a8; margin-top: 3px; line-height: 1.5; }
.ep-kw { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ep-kw i { font-style: normal; font-size: 10px; color: #7f8ea3; background: #1c222e; border-radius: 3px; padding: 1px 5px; }

/* ============ 大事闪现层 ============ */
.flash-layer {
    position: absolute; inset: 0;
    z-index: 40; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(5, 7, 10, .72); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .18s;
}
.flash-layer.show { opacity: 1; }
.flash-year { font-size: 15px; color: #aab4c4; letter-spacing: 3px; margin-bottom: 10px; }
.flash-text {
    font-size: 52px; font-weight: 900; letter-spacing: 6px; text-align: center;
    color: var(--up); padding: 0 24px;
    text-shadow: 0 0 34px rgba(255, 75, 71, .55);
    transform: scale(.7); transition: transform .22s cubic-bezier(.2, 1.4, .4, 1);
}
.flash-layer.show .flash-text { transform: scale(1); }
.flash-text.down { color: var(--down); text-shadow: 0 0 34px rgba(0, 217, 142, .5); }

/* ============ 开场层 ============ */
.start-layer {
    position: absolute; inset: 0;
    z-index: 60;
    background: radial-gradient(120% 80% at 50% 30%, #171d29 0%, #08090c 70%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    transition: opacity .4s;
}
.start-layer.hide { opacity: 0; pointer-events: none; }
.start-logo {
    width: 76px; height: 76px; border-radius: 16px;
    background: #d5281e; color: #fff; font-size: 40px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 46px rgba(213, 40, 30, .5);
}
.start-name { font-size: 21px; font-weight: 800; letter-spacing: 2px; }
.start-sub { font-size: 11.5px; color: var(--dim); letter-spacing: 1px; }
.start-btn {
    margin-top: 18px; width: 210px; height: 52px;
    background: linear-gradient(180deg, #e6392e 0%, #c01f16 100%);
    color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 6px;
    border: none; border-radius: 26px; cursor: pointer;
    box-shadow: 0 8px 30px rgba(213, 40, 30, .45);
}
.start-btn:active { transform: scale(.97); }
/* 点击开盘后的 1.5 秒等待：按钮变"开盘中…"并呼吸发光 */
.start-layer.arming .start-btn { pointer-events: none; animation: btnPulse 1s ease infinite; }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(213, 40, 30, .45); }
    50%      { box-shadow: 0 8px 44px rgba(245, 197, 66, .55); transform: scale(1.035); }
}
.start-tip { font-size: 10px; color: #565f6e; letter-spacing: 1px; }
/* 开场标语：两行两种颜色 */
.start-slogan { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 24px; text-align: center; }
.start-slogan span { font-size: 21px; font-weight: 800; letter-spacing: 5px; line-height: 1.2; }
.start-slogan .s1 { color: #8e99a9; }
.start-slogan .s2 { color: var(--gold); text-shadow: 0 0 20px rgba(245, 197, 66, .38); }

/* ============ 开盘集合竞价 ============ */
.open-layer {
    position: absolute; inset: 0;
    z-index: 50; pointer-events: none;
    background: rgba(6, 8, 12, .92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
}
.open-layer.show { opacity: 1; visibility: visible; }
.open-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.open-head b { color: #e8ecf2; }
.open-head span { color: #5d6775; font-size: 10.5px; }
.open-head i { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.open-cap { margin-top: 30px; font-size: 14px; color: #8b96a8; letter-spacing: 6px; }
.open-price {
    font-size: 74px; font-weight: 900; color: var(--up); letter-spacing: 2px;
    text-shadow: 0 0 40px rgba(255, 75, 71, .5); font-variant-numeric: tabular-nums;
    margin-top: 8px;
}
.open-stamp {
    position: absolute; z-index: 2;
    top: 20%; left: 0; right: 0; margin: 0 auto; width: max-content;
    font-size: 42px; font-weight: 900; letter-spacing: 8px; color: #ff2d20;
    border: 5px solid #ff2d20; border-radius: 8px; padding: 6px 18px;
    transform: rotate(-14deg) scale(2.4); opacity: 0;
    text-shadow: 0 0 24px rgba(255, 45, 32, .6);
    box-shadow: 0 0 30px rgba(255, 45, 32, .28), inset 0 0 24px rgba(255, 45, 32, .18);
}
.open-layer.stamped .open-stamp { animation: stampIn .38s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stampIn { to { transform: rotate(-14deg) scale(1); opacity: .96; } }
.open-bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; margin-top: 36px; }
.open-bars i { width: 9px; border-radius: 2px 2px 0 0; }

/* ============ 终局全景（覆盖在图表区内，不出竖屏） ============ */
.end-layer {
    position: absolute; inset: 0; z-index: 30;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 8px 14px 10px; pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 9, 13, .92) 0%, rgba(7, 9, 13, .18) 34%, rgba(7, 9, 13, .18) 58%, rgba(7, 9, 13, .92) 100%);
    opacity: 0; visibility: hidden; transition: opacity .5s;
}
.end-layer.show { opacity: 1; visibility: visible; }
.end-layer.show .end-foot { pointer-events: auto; }
.end-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.end-title { font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #dfe5ee; white-space: nowrap; }
.end-range { font-size: 9.5px; color: var(--dim); letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-line { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .5px; font-variant-numeric: tabular-nums; text-align: center; }
.end-credit {
    display: block; margin: 8px auto 0;
    color: #8b96a8; font-size: 11.5px; letter-spacing: 2px; text-align: center;
}

/* 开场层"更多企业"入口 */
.start-more { font-size: 11px; color: #5d6775; letter-spacing: 1px; text-decoration: none; border-bottom: 1px solid #2a3342; padding-bottom: 1px; }
.start-more:active { color: #8b96a8; }

/* ============ 终局名牌浮层（K线走完后的大名字幕） ============ */
.name-card {
    position: absolute; inset: 0; z-index: 45;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(58% 34% at 50% 50%, rgba(38, 14, 12, .6) 0%, rgba(5, 7, 10, .86) 78%);
    -webkit-backdrop-filter: blur(6px) saturate(1.12); backdrop-filter: blur(6px) saturate(1.12);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 1.15s ease;   /* 慢慢消失 */
}
.name-card.show { opacity: 1; visibility: visible; }
.nc-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 14px; }
.nc-glow {
    position: absolute; left: 50%; top: 50%;
    width: 80vw; height: 80vw; max-width: 440px; max-height: 440px;
    transform: translate(-50%, -50%) scale(.55); border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 197, 66, .22) 0%, rgba(255, 75, 71, .17) 44%, transparent 70%);
    opacity: 0;
}
.name-card.show .nc-glow { animation: ncGlow 2.2s ease-out .08s forwards; }
@keyframes ncGlow {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    42%  { opacity: 1; }
    100% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
}
/* 企业名字：艺术字（衬线 + 金色到朱红渐变 + 扫光） */
.nc-name { font-family: "STKaiti", "Kaiti SC", "KaiTi", "Songti SC", "STSong", "Noto Serif SC", serif; font-weight: 900; line-height: 1.06; text-align: center; white-space: nowrap; }
.nc-name-in {
    display: block; letter-spacing: .04em;
    background: linear-gradient(100deg, #ffe6b0 0%, #fffdf6 16%, #f5c542 32%, #ff6f57 56%, #f5c542 78%, #fffdf6 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 20px rgba(245, 197, 66, .5)) drop-shadow(0 0 52px rgba(255, 75, 71, .45));
    opacity: 0; transform: scale(1.42);
}
.name-card.show .nc-name-in {
    animation: ncNameIn .95s cubic-bezier(.16, 1, .3, 1) forwards,
               ncShine 3.4s linear .95s infinite;
}
@keyframes ncNameIn { to { opacity: 1; transform: scale(1); } }
@keyframes ncShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
/* 下行：“企业K线图”，字号更小、字距拉开 */
.nc-sub { display: flex; align-items: center; gap: 12px; margin-top: 16px; opacity: 0; transform: translateY(10px); }
.name-card.show .nc-sub { animation: ncSubIn .7s cubic-bezier(.2, .9, .3, 1) .36s forwards; }
@keyframes ncSubIn { to { opacity: 1; transform: translateY(0); } }
.nc-sub span { font-size: clamp(13px, 4.4vw, 19px); font-weight: 700; letter-spacing: .5em; padding-left: .5em; color: #f0d9a4; }
.nc-sub i { display: block; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 197, 66, .8)); }
.nc-sub i:last-child { background: linear-gradient(270deg, transparent, rgba(245, 197, 66, .8)); }