/* ==================== 全球股市行情：胶囊轮播 + 展开面板 ==================== */

/* ⋯ 菜单中的「全球行情」开关 */
.market-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: none;
    cursor: pointer;
}

.market-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.market-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(160, 140, 115, 0.25);
    transition: background 0.2s ease;
    pointer-events: none;
}

.market-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(90, 70, 60, 0.2);
    transition: transform 0.2s ease;
}

.market-toggle input:checked + .market-toggle-track {
    background: var(--primary, #4a7dbd);
}

.market-toggle input:checked + .market-toggle-track::after {
    transform: translateX(16px);
}

/* 页头保持单行：胶囊始终内联在 logo 与账本选择器之间，不换行掉到下方 */
.app-container > .header {
    flex-wrap: nowrap;
}

/* 两端固定，中间胶囊吸收全部空间变化 */
.app-container > .header > .logo,
.app-container > .header > .header-actions {
    flex: none;
}

/* 定位容器：占据页头标题与右侧操作区之间的空白 */
.market-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    /* 胶囊与展开面板内所有元素禁止长按选择/弹出菜单 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.market-ticker {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: background 0.25s;
}

.market-ticker:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* 轮播视窗：一次只显示一条，纵向滑入切换 */
.market-ticker-viewport {
    flex: 1;
    min-width: 0;
    height: 18px;
    overflow: hidden;
    position: relative;
}

.mt-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    animation: mtSlideIn 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes mtSlideIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.mt-name {
    font-size: 12px;
    font-weight: 700;
    color: #6B6560;
    flex: none;
}

.mt-chg {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-chg.up, .mp-badge.up { color: #1f9d55; }
.mt-chg.down, .mp-badge.down { color: #d64541; }
.mt-chg.flat, .mp-badge.flat { color: #9a938c; }

/* ---------- 展开面板（苹果股市风格列表）：fixed 定位，由 JS 对齐到胶囊下方 ---------- */
.market-panel {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(138, 122, 110, 0.15);
    box-shadow: 0 12px 40px rgba(60, 50, 42, 0.16);
    padding: 6px 0;
    z-index: 9000;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
    /* 隐藏滚动条但保留滚动能力 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.market-panel::-webkit-scrollbar {
    display: none;
}

.market-panel.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 6px;
    font-size: 11px;
    color: #A89C93;
}

.mp-header-title {
    font-weight: 700;
    letter-spacing: 1px;
    color: #8a7e76;
}

/* 顶部小搜索框 */
.mp-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: 130px;
    margin: 0 8px;
}

.mp-search-input {
    width: 100%;
    height: 20px;
    padding: 0 18px 0 10px;
    border: none;
    border-radius: 999px;
    background: rgba(138, 122, 110, 0.08);
    font-size: 11px;
    color: #3d3833;
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.mp-search-input::placeholder {
    color: #B8AFA6;
}

.mp-search-input:focus {
    background: rgba(138, 122, 110, 0.12);
    box-shadow: 0 0 0 2px rgba(74, 125, 189, 0.18);
}

.mp-search-clear {
    position: absolute;
    right: 4px;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: rgba(138, 122, 110, 0.25);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mp-search-clear:hover {
    background: rgba(138, 122, 110, 0.45);
}

/* 搜索联想列表 */
.mp-suggest {
    padding: 2px 0 4px;
    border-bottom: 1px solid rgba(138, 122, 110, 0.1);
    margin-bottom: 2px;
}

.mp-sug-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.mp-sug-row:hover {
    background: rgba(138, 122, 110, 0.05);
}

.mp-sug-sym {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #3d3833;
    font-variant-numeric: tabular-nums;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-sug-name {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: #8a7e76;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-sug-exch {
    flex: none;
    font-size: 10px;
    color: #B8AFA6;
}

.mp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    transition: background 0.2s;
    cursor: pointer;
}

.mp-row:hover {
    background: rgba(138, 122, 110, 0.05);
}

.mp-info {
    flex: 1;
    min-width: 0;
}

.mp-name {
    font-size: 14px;
    font-weight: 700;
    color: #3d3833;
    line-height: 1.25;
}

.mp-sub {
    font-size: 10.5px;
    color: #B0A69D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-spark {
    flex: none;
    width: 64px;
    height: 28px;
}

.mp-right {
    flex: none;
    text-align: right;
}

.mp-price {
    font-size: 14px;
    font-weight: 700;
    color: #3d3833;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.mp-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.mp-badge.up { background: #34C759; }
.mp-badge.down { background: #FF3B30; }
.mp-badge.flat { background: #B8B0A8; }

.mp-empty {
    padding: 18px 16px;
    text-align: center;
    font-size: 12px;
    color: #B0A69D;
}

/* ---------- 指数详情页 ---------- */
.mp-detail {
    padding: 4px 0 8px;
}

.mp-detail-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 2px;
}

.mp-back {
    flex: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8a7e76;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mp-back:hover {
    background: rgba(138, 122, 110, 0.1);
}

.mp-detail-title {
    min-width: 0;
}

.mp-detail-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 16px 2px;
}

.mp-big-price {
    font-size: 26px;
    font-weight: 700;
    color: #3d3833;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.mp-detail-price .mp-badge {
    margin-top: 0;
}

.mp-chart {
    display: block;
    width: calc(100% - 32px);
    height: 120px;
    margin: 8px 16px 4px;
}

.mp-stats {
    display: flex;
    justify-content: space-between;
    padding: 2px 18px 10px;
    font-size: 11px;
    color: #A89C93;
    font-variant-numeric: tabular-nums;
}

.mp-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 16px 4px;
}

.mp-pill {
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #8a7e76;
    background: rgba(138, 122, 110, 0.08);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mp-pill:hover {
    background: rgba(138, 122, 110, 0.16);
}

.mp-pill.active {
    background: var(--primary, #4a7dbd);
    color: #fff;
}

/* 公司概况 */
.mp-profile {
    margin: 8px 14px 0;
    padding-top: 6px;
    border-top: 1px solid rgba(138, 122, 110, 0.1);
}

.mp-tabs {
    display: flex;
    gap: 6px;
    padding: 0 2px 8px;
}

.mp-fin-period {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 0 6px;
}

.mp-fin-period button {
    border: 0;
    border-radius: 999px;
    padding: 3px 9px;
    color: #8a7e76;
    background: rgba(138, 122, 110, 0.08);
    font-size: 10px;
    cursor: pointer;
}

.mp-fin-period button.active {
    color: #fff;
    background: #477fc2;
}

.mp-tab {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8a7e76;
    background: rgba(138, 122, 110, 0.08);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mp-tab:hover {
    background: rgba(138, 122, 110, 0.16);
}

.mp-tab.active {
    background: #4a7dbd;
    color: #fff;
}

.mp-tab-body {
    animation: mpTabIn 0.25s ease;
}

/* F10 财务多期表 */
.ft-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ft-wrap::-webkit-scrollbar {
    display: none;
}

.ft-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: #3d3833;
}

.ft-table th,
.ft-table td {
    padding: 4px 5px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid rgba(138, 122, 110, 0.08);
}

.ft-table th {
    font-weight: 700;
    color: #8a7e76;
    background: rgba(138, 122, 110, 0.05);
}

.ft-table .ft-label {
    text-align: left;
    color: #8a7e76;
    font-weight: 400;
}

.ft-table td.neg {
    color: #d64541;
}

.ft-table tr.ft-sec td {
    text-align: left;
    font-weight: 700;
    color: #6B6560;
    background: rgba(138, 122, 110, 0.06);
    padding: 5px;
}

/* 概况/财务两列指标表 */
.mp-fund {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #3d3833;
}

.mp-fund td {
    padding: 4px 5px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid rgba(138, 122, 110, 0.08);
}

.mp-fund td.ft-label {
    text-align: left;
    color: #8a7e76;
    font-weight: 400;
    width: 30%;
}

/* 股东：机构/基金持有者名单 */
.mp-hsec {
    margin: 6px 0 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: #6B6560;
}

.mp-hlist {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: #3d3833;
}

.mp-hlist td {
    padding: 3px 5px;
    border-bottom: 1px solid rgba(138, 122, 110, 0.08);
}

.mp-hlist th {
    padding: 3px 5px;
    text-align: right;
    font-size: 9px;
    font-weight: 500;
    color: #8a7e76;
    border-bottom: 1px solid rgba(138, 122, 110, 0.08);
}

.mp-hlist th:first-child {
    text-align: left;
}

.mp-hlist .hh-name {
    text-align: left;
}

.mp-hlist .hh-val {
    text-align: right;
    width: 60px;
    color: #6B6560;
}

.mp-hlist .hh-pct {
    text-align: right;
    width: 44px;
    color: #8a7e76;
}

.mp-insider-list .hh-val,
.mp-insider-list .hh-pct {
    width: 68px;
}

.mp-insider-relation {
    color: #8a7e76;
    font-size: 9px;
}

/* F10 十大流通股东表 */
.ht-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ht-wrap::-webkit-scrollbar {
    display: none;
}

.ht-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: #3d3833;
}

.ht-table th,
.ht-table td {
    padding: 4px 5px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid rgba(138, 122, 110, 0.08);
}

.ht-table th {
    font-weight: 700;
    color: #8a7e76;
    background: rgba(138, 122, 110, 0.05);
}

.ht-table .ht-name {
    text-align: left;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ht-chg {
    margin-left: 4px;
    color: #d64541;
    font-size: 9.5px;
}

@keyframes mpTabIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mp-profile-sector {
    font-size: 11px;
    color: #8a7e76;
    padding: 0 2px 4px;
}

.mp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 6px;
}

.mp-chip {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(138, 122, 110, 0.08);
    font-size: 10.5px;
    font-weight: 600;
    color: #6B6560;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-officers {
    padding: 0 2px;
}

.mp-officer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 2.5px 0;
    font-size: 11px;
}

.mp-officer-name {
    color: #3d3833;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-officer-title {
    color: #B0A69D;
    font-size: 10px;
    flex: none;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-event {
    font-size: 11px;
    color: #6B6560;
    line-height: 1.5;
    padding: 2px 2px;
}

.mp-event-date {
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #8a7e76;
    font-variant-numeric: tabular-nums;
}

/* 详情相关新闻 */
.mp-news {
    margin: 6px 14px 0;
    padding-top: 6px;
    border-top: 1px solid rgba(138, 122, 110, 0.1);
}

.mp-news-title-head {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #A89C93;
    padding: 2px 2px 4px;
}

.mp-news-item {
    display: block;
    padding: 6px 6px;
    border-radius: 8px;
}

.mp-news-title {
    font-size: 12px;
    font-weight: 600;
    color: #3d3833;
    line-height: 1.35;
}

.mp-news-meta {
    margin-top: 2px;
    font-size: 10px;
    color: #B0A69D;
}