:root {
        --up-color: #e53e3e;
        --down-color: rgb(34, 168, 117);
        --flat-color: #4b5563;
    }
    /* SEO 视觉隐藏标题（仅搜索引擎可读） */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    * { box-sizing: border-box; }
    body {
        background: #f7f7f8;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    .market-container {

        margin: 0 auto;
        padding: 24px 20px 60px;
    }
    .market-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }
    .left-col { flex: 3; min-width: 0; }
    .right-col {
        flex: 1;
        min-width: 240px;
        max-width: 300px;
        overflow: hidden;
    }

    .page-title-bar { text-align: center; padding: 28px 0 24px; }
    .page-title-bar h1 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0 0 6px;
    }
    .page-title-bar .subtitle {
        font-size: 0.9rem;
        color: #6b7280;
    }

    /* ===== CTA Banner ===== */
    .cta-banner {
        font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        background: #ffdb83;
        margin:-24px;
        color: #111;
        padding: 28px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;

        margin-bottom: 10px;
    }
    .cta-banner::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image:
            linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
    }
    .cta-banner .cta-left {
        flex: 1;
        position: relative;
        z-index: 1;
        min-width: 0;
    }
    .cta-banner .brand-row {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .cta-banner .cta-slogan {
        font-size: 30px;
        font-weight: 600;
        color: #111;
        line-height: 1.3;
    }
    .cta-banner .cta-desc {
        font-size: 14px;
        color:#111;
        margin-top: 10px;
        line-height: 1.6;
        max-width: 560px;
    }
    .cta-banner .cta-tags {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        flex-wrap: wrap;
    }
    .cta-banner .cta-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
    background: rgb(255 0 0 / 8%);
    border: 1px solid rgb(255 0 0 / 22%);
        border-radius: 20px;
        font-size: 12px;
        color: #111;
    }
    .cta-banner .cta-tag .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ff8c3a;
        flex-shrink: 0;
    }
    .cta-banner .cta-image {
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cta-banner .cta-image img {
        display: block;
        height: 130px;
        width: auto;
        object-fit: contain;
    }
    .cta-banner .cta-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }
    .cta-banner .cta-btn {
        padding: 12px 32px;
        border-radius: 10px;
        font-size: 15px;
        cursor: pointer;
        border: none;
        font-weight: 600;
        transition: all .2s;
        white-space: nowrap;
    }
    .cta-banner .cta-btn-primary {
        background: #ff5151;
          color: #fff;
    }
    .cta-banner .cta-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255,81,81,.3);
    }
    .cta-banner .cta-btn-secondary {
        background: transparent;
        color: #111;
        border: 1px solid rgba(255,255,255,.25);
        padding: 10px 28px;
        font-size: 14px;
    }
    .cta-banner .cta-btn-secondary:hover {
        background: rgba(255,255,255,.08);
       color: #111;
    }
    .cta-banner .cta-free {
        font-size: 11px;
        color: #111;
    }
    .cta-close {
        position: absolute;
        top: 14px;
        right: 18px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
     color: #111;
        font-size: 20px;
        border-radius: 6px;
        z-index: 2;
        transition: all .15s;
        line-height: 1;
    }
    .cta-close:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }
    .cta-banner.hidden { display: none !important; }

    /* 三大指数卡片 */
    .index-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }
    .index-row > a {
        text-decoration: none;
    }
    .index-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        overflow: hidden;
        transition: box-shadow 0.25s;
        display: flex;
        flex-direction: column;
    }
    .index-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        text-decoration: none;
    }
    .index-card .card-body {
        padding: 16px 18px 10px;
        display: flex;
        flex-direction: column;
    }
    .index-card.up .index-value,
    .index-card.up .change-rate { color: var(--up-color); }
    .index-card.down .index-value,
    .index-card.down .change-rate { color: var(--down-color); }
    .index-card.flat .index-value,
    .index-card.flat .change-rate { color: var(--flat-color); }

    .index-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    .index-name { font-size: 0.95rem; font-weight: 500; color: #333; }
    .index-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; }
    .index-card.up .index-badge { background: #fff5f5; color: var(--up-color); }
    .index-card.down .index-badge { background: #f0fff4; color: var(--down-color); }
    .index-card.flat .index-badge { background: #f9fafb; color: var(--flat-color); }

    .index-value {
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 2px;
    }
    .change-rate { font-size: 0.85rem; font-weight: 600; }

    /* 分时迷你图容器 - 无滚动条 */
    .mini-chart {
        width: 100%;
        height: 80px;
        margin-top: 6px;
        overflow: hidden;
    }

    .valuation-section { margin-top: 8px; }
    .valuation-section .section-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0 0 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #eef0f2;
    }
    .valuation-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
    .analysis-panel {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        padding: 20px;
    }
    .analysis-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .analysis-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .analysis-item:last-child {
        border-bottom: none;
    }
    .analysis-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        position: relative;
    }
    .analysis-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
.analysis-title {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }
    .analysis-title a {
        color: #222;
        text-decoration: none;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 6px 0;
    }
.analysis-title a:hover {
        color: #007bff;
        text-decoration: none;
    }
    /* 热门信息选项卡 */
    .hot-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .hot-tabs .tag-btn {
        border: none;
        padding: 6px 18px;
        border-radius: 11rem;
        background-color: #f3f3f3;
        color: #111;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .hot-tabs .tag-btn.active {
        background-color: #ff5151!important;
        color: #fff !important;
    }

    .right-placeholder {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);

        text-align: center;
    }

    .brand-footer {
        text-align: center;
        margin: 48px 0 24px;
        color: #6b7280;
        font-size: 0.9rem;
    }

    @media (max-width: 900px) {
        .market-layout { flex-direction: column; }
        .left-col, .right-col { flex: none; width: 100%; max-width: none; }
        .index-row { grid-template-columns: 1fr; }
        .valuation-row { grid-template-columns: 1fr; }
        .cta-banner { padding: 24px 20px; }
        .cta-banner .cta-image { display: none; }
        .cta-banner .cta-slogan { font-size: 20px; }
        /* 窄屏下允许文章标题换行，避免溢出 */
        .analysis-title, .analysis-title a { white-space: normal; }
    }
    @media (max-width: 768px) {
        .cta-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
        .cta-banner .cta-right { width: 100%; flex-direction: row; justify-content: flex-start; }
        .cta-banner .cta-btn { flex: 1; text-align: center; }
        .cta-banner .cta-free { display: none; }
        .cta-banner .cta-image { display: none; }
    }

.site-footer {
      margin:-24px;

    border-top: 1px solid #e8e8e8;

color: #111;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .footer-copy { margin: 0; }
  .footer-links {
    display: flex;
    gap: 20px;
  }
  .footer-links a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-links a:hover { color: #374151; }
  @media (min-width: 640px) {
    .footer-inner {
      flex-direction: row;
      justify-content: space-between;
    }
  }
    #hotModalContent {
        font-size: 16px;
        line-height: 1.8;
    }
    #hotModalContent img {
        max-width:100%;
        height:auto;
        display:block;
    }
    #hotModalContent table {
        max-width:100%;
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        background-color: white;
        border: 1px solid #e5e7eb;
        font-size: 16px;
    }
    #hotModalContent th, #hotModalContent td {
        border: 1px solid #e5e7eb;
        font-size: 16px;
        text-align: center;
        padding: 12px 8px;
    }
    #hotModalContent th {
        background-color: #f3f4f6;
    }
    /* 弹窗头部作者信息 */
    .modal-header-left {
        display: flex;
        align-items: center;
        flex: 1;
    }
    .modal-header-left .author-info {
        margin-left: 12px;
    }
    .modal-header-left .author-info .modal-title {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 2px;
        line-height: 1.3;
    }
    .modal-header-left .author-info .meta-info {
        font-size: 13px;
        color: #6c757d;
    }
    /* 评分按钮 */
    #hotLikeBtn, #hotDislikeBtn {
        transition: all 0.2s ease;
        font-size: 14px;
        padding: 6px 16px;
        border-radius: 20px;
    }
    #hotLikeBtn.active {
        background-color: #3b82f6;
        color: #fff;
        border-color: #3b82f6;
    }
    #hotDislikeBtn.active {
        background-color: #6c757d;
        color: #fff;
        border-color: #6c757d;
    }
    /* 评论列表 */
    .comments-list {
        max-height: 300px;
        overflow-y: auto;
    }
    .comment-item {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        gap: 10px;
    }
    .comment-item:last-child {
        border-bottom: none;
    }
    .comment-item .comment-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .comment-item .comment-body {
        flex: 1;
    }
    .comment-item .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }
    .comment-item .comment-author {
        font-weight: 600;
        font-size: 14px;
        color: #333;
    }
    .comment-item .comment-time {
        font-size: 12px;
        color: #a0a8b0;
    }
    .comment-item .comment-text {
        font-size: 14px;
        color: #495057;
        line-height: 1.5;
        word-break: break-word;
    }
    /* 评论输入框 */
    .comment-input-area .input-group {
        display: flex;
        gap: 0;
    }
    .comment-input-area textarea {
        border-radius: 12px 0 0 12px;
        border: 1px solid #e0e0e0;
        padding: 10px 14px;
        font-size: 14px;
        resize: none;
        flex: 1;
    }
    .comment-input-area textarea:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
        outline: none;
    }
    .comment-input-area button {
        border-radius: 0 12px 12px 0;
        padding: 10px 20px;
        font-weight: 600;
    }