/* CoinKK Custom Styles - Cryptocurrency Exchange Theme */

/* Color Variables */
:root {
    --coinkk-primary: #4285F4;
    --coinkk-secondary: #34A853;
    --coinkk-danger: #EA4335;
    --coinkk-warning: #FBBC04;
    --coinkk-light: #f3f5fa;
    --coinkk-border: #e0e0e0;
    --coinkk-text-primary: #212529;
    --coinkk-text-secondary: #6c757d;
    --coinkk-bg-card: #f7f8fc;
    --coinkk-bg-secondary: #f5f7fa;
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--coinkk-light);
    color: var(--coinkk-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* 移除所有按钮和链接点击后的边框 */
button,
a,
input,
select,
textarea {
    outline: none !important;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 移除点击时的高亮效果 */
button:active,
a:active,
button:focus-visible,
a:focus-visible {
    outline: none !important;
}

/* 移除 WebKit 浏览器的点击高亮 */
button,
a {
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

:root :where(.is-layout-flow) > * {
    margin-block-start: 0rem;
}

.is-layout-constrained > .alignwide {
    padding: 7px 85px;
}

/* Header Styles */
.coinkk-header {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.coinkk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 31px;
}

.coinkk-logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--coinkk-primary);
    text-decoration: none;
}

.coinkk-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.coinkk-nav-menu a {
    color: var(--coinkk-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.coinkk-nav-menu a:hover {
    color: var(--coinkk-primary);
}

/* WordPress menu dropdowns */
.coinkk-nav-menu-primary .primary-menu,
.coinkk-nav-menu-primary .menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.coinkk-nav-menu-primary .menu > li:not(:last-child)::after {
    content: "/";
    color: #ccc;
    margin-left: 15px;
    font-weight: normal;
}

.coinkk-nav-menu-primary .menu > li {
    position: relative;
}

.coinkk-nav-menu-primary .menu > li > a {
    text-decoration: none;
    color: var(--coinkk-text-primary);
    font-weight: 500;
}

.coinkk-nav-menu-primary .menu li .sub-menu {
    position: absolute;
    list-style-type: none;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--coinkk-border);
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .2s ease;
    z-index: 1000;
}

.coinkk-nav-menu-primary .menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.coinkk-nav-menu-primary .menu li .sub-menu li a {
    display: block;
    padding: 8px 14px;
    color: var(--coinkk-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.coinkk-nav-menu-primary .menu li .sub-menu li a:hover {
    background: var(--coinkk-bg-secondary);
}

/* Primary nav coloring: default gray, current page black */
#primary-nav .menu > li > a { color: #6c757d; }
#primary-nav .menu > li.current-menu-item > a,
#primary-nav .menu > li.current_page_item > a,
#primary-nav .menu > li.current-menu-ancestor > a,
#primary-nav .menu > li.current_page_parent > a,
#primary-nav .menu > li.current_page_ancestor > a { color: #111827; font-weight: 600; }

/* Loading Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Data Loading State */
tbody .loading-row {
    text-align: center;
    padding: 40px 20px;
}

tbody .loading-row td {
    color: #666;
    font-size: 14px;
}

/* Market Stats Bar */
.coinkk-market-stats {
    background: var(--coinkk-bg-secondary);
    padding: 10px 0;
    border-bottom: 1px solid var(--coinkk-border);
}

.market-stats-scroll {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 2px 57px;
}

/* Market Stats Loading State */
.market-stats-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 0;
}

.market-stats-loading .market-stat-item {
    justify-content: center;
}

.market-stats-loading .loading-spinner {
    margin-right: 8px;
}

.market-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: fit-content;
}

.stat-label {
    color: var(--coinkk-text-secondary);
}

.stat-value {
    font-weight: 600;
}

.stat-change.positive,
.data-change.positive {
    color: var(--coinkk-secondary);
}

.stat-change.negative,
.data-change.negative {
    color: var(--coinkk-danger);
}

/* Trading Cards */
.coinkk-trading-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.coinkk-card,
.contract-data-card,
.crypto-index-card,
.hero-news-card,
.articles-card,
.crypto-table-card,
.function-icons-card {
    background: var(--coinkk-bg-card);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.card-subtitle {
    color: var(--coinkk-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* Price Display */
.price-display {
    font-size: 24px;
    font-weight: 700;
    margin: 10px 0;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
}

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

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

/* Trading Table */
.coinkk-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--coinkk-bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.coinkk-table th,
.coinkk-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--coinkk-border);
}

.coinkk-table th {
    background: var(--coinkk-bg-secondary);
    font-weight: 600;
    color: var(--coinkk-text-secondary);
    font-size: 14px;
}

.coinkk-table tr:hover {
    background: var(--coinkk-bg-secondary);
}

/* Crypto Symbol */
.crypto-symbol {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crypto-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--coinkk-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Chart Container */
.chart-container {
    height: 300px;
    margin: 20px 0;
    background: var(--coinkk-bg-card);
    border-radius: 12px;
    padding: 15px;
}

/* Heatmap */
.coinkk-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2px;
    background: var(--coinkk-bg-card);
    padding: 20px;
    border-radius: 12px;
}

.heatmap-item {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
}

.heatmap-positive {
    background: var(--coinkk-secondary);
}

.heatmap-negative {
    background: var(--coinkk-danger);
}

/* Buttons */
.coinkk-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.coinkk-btn-primary {
    background: var(--coinkk-primary);
    color: white;
}

.coinkk-btn-primary:hover {
    background: #3367d6;
}

.coinkk-btn-secondary {
    background: transparent;
    color: var(--coinkk-primary);
    border: 1px solid var(--coinkk-primary);
}

.coinkk-btn-secondary:hover {
    background: var(--coinkk-primary);
    color: white;
}

/* Footer */
.coinkk-footer {
    background: #f3f5fa;
    color: #4B5563;
    padding: 0 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 24px;
}

.footer-section h4 {
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-bottom {
    padding: 16px 0;
}

.footer-bottom .footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 53px;
    color: #c4c7cf;
    font-size: 14px;
    padding: 14px 96px 0 0;
}

.footer-bottom .footer-legal .legal-text { color: #c4c7cf; }
.footer-bottom .footer-legal .legal-link { color: #c4c7cf; text-decoration: none; }
.footer-bottom .footer-legal .legal-link:hover { color: #9aa1ae; }

/* Footer WP menu columns */
.footer-menus .footer-menu-container {
    width: 100%;
}

.footer-menus .footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 57px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
}

.footer-menus .footer-menu > li {
    padding: 0;
}

.footer-menus .footer-menu a {
    color: #ccc;
    text-decoration: none;
}

.footer-menus .footer-menu .sub-menu {
    margin: 19px 0 0 0;
    padding-left: 0;
    list-style: none;
    display: block;
}

.footer-menus .footer-menu .sub-menu li {
    padding: 0 0 10px 0;
}

.footer-menus .footer-menu .sub-menu li a {
    color: #6B7280;
    font-size: 14px;
}

/* Footer menus grid next to about column */
.footer-menus .footer-menus-grid {
    display: flex;
    grid-template-columns: 1fr 2fr;
    gap: 36px;
    align-items: start;
    padding: 24px 0 0 108px;
}

.footer-menus .footer-menus-grid .footer-nav {
    padding-top: 14px;
}

.footer-menus .footer-about .custom-logo,
.footer-menus .footer-about img {
    max-height: 40px;
    width: auto;
}

.footer-menus .footer-desc {
    max-width: 664px;
    font-size: 11px;
    margin: 27px 0 0 0;
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(66, 133, 244, 0.3);
    border-radius: 50%;
    border-top-color: var(--coinkk-primary);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pagination */
.coinkk-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
}

.pagination-btn,
.timeframe-btn,
.filter-btn,
.page-btn {
    padding: 8px 12px;
    border: 1px solid var(--coinkk-border);
    background: white;
    color: var(--coinkk-text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
}

.pagination-btn:hover,
.pagination-btn.active,
.timeframe-btn:hover,
.timeframe-btn.active,
.filter-btn:hover,
.filter-btn.active,
.page-btn:hover,
.page-btn.active {
    background: var(--coinkk-primary);
    color: white;
    border-color: var(--coinkk-primary);
}

/* FAQ Section */
.faq-item {
    background: var(--coinkk-bg-card);
    border: 1px solid var(--coinkk-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 15px 20px;
    background: var(--coinkk-bg-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.faq-answer {
    padding: 15px 20px;
    display: none;
}

.faq-answer.active {
    display: block;
}

/* Contact Form */
.contact-form {
    background: var(--coinkk-bg-card);
    padding: 30px;
    border-radius: 12px;
}

/* Long/Short Ratio page specific tweaks */
.coinkk-long-short-page .lsr-top-section {
    margin: 18px 0 10px;
}
.coinkk-long-short-page .lsr-card {
    background: var(--coinkk-bg-card);
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 16px 18px;
}
.coinkk-long-short-page .lsr-top-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.coinkk-long-short-page .lsr-asset-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.coinkk-long-short-page .asset-tab { padding:6px 10px; border:1px solid var(--coinkk-border); background:#fff; border-radius:6px; font-size:12px; cursor:pointer; }
.coinkk-long-short-page .asset-tab.active, .coinkk-long-short-page .asset-tab:hover { background: var(--coinkk-primary); color:#fff; border-color: var(--coinkk-primary); }
.coinkk-long-short-page .lsr-select { padding:6px 10px; border:1px solid var(--coinkk-border); background:#fff; border-radius:6px; font-size:12px; }

/* Market Long/Short Ratio Container */
.coinkk-long-short-page .lsr-market-container { 
    background: var(--coinkk-bg-card); 
    border-radius: 12px; 
    border: 1px solid #f0f0f0; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    padding: 20px; 
    margin: 16px 0; 
}
.coinkk-long-short-page .lsr-market-title { 
    font-size: 18px; 
    font-weight: 600; 
    margin-bottom: 16px; 
    color: #111827; 
}
.coinkk-long-short-page .lsr-market-cards { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 16px; 
}

/* Donut card */
.coinkk-long-short-page .lsr-donut-card { 
    background: #fff; 
    border: 1px solid #f0f0f0; 
    border-radius: 8px; 
    padding: 16px; 
}

/* Exchange cards */
.coinkk-long-short-page .lsr-exchange-card { 
    background: #fff; 
    border: 1px solid #f0f0f0; 
    border-radius: 8px; 
    padding: 16px; 
}
.coinkk-long-short-page .exchange-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    margin-bottom: 12px; 
}
.coinkk-long-short-page .exchange-info { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.coinkk-long-short-page .exchange-icon { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    background: #111827; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    font-weight: 700; 
}
.coinkk-long-short-page .exchange-icon.binance { 
    background: #f3ba2f; 
    color: #111; 
}
.coinkk-long-short-page .exchange-icon.okx { 
    background: #111827; 
}
.coinkk-long-short-page .exchange-name { 
    font-size: 16px; 
    font-weight: 700; 
    color: #111827; 
}
.coinkk-long-short-page .exchange-subtitle { 
    font-size: 12px; 
    color: var(--coinkk-text-secondary); 
}

/* Stat rows */
.coinkk-long-short-page .stat-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 12px; 
}
.coinkk-long-short-page .stat-labels { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}
.coinkk-long-short-page .stat-main-label { 
    font-size: 13px; 
    font-weight: 600; 
    color: #111827; 
}
.coinkk-long-short-page .stat-sub-label { 
    font-size: 11px; 
    color: var(--coinkk-text-secondary); 
}
.coinkk-long-short-page .stat-values { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 2px; 
}
.coinkk-long-short-page .stat-value { 
    font-size: 14px; 
    font-weight: 600; 
    color: #111827; 
}
.coinkk-long-short-page .stat-value.positive { 
    color: #22c55e; 
}
.coinkk-long-short-page .stat-value.negative { 
    color: #ef4444; 
}
.coinkk-long-short-page .stat-sub-value { 
    font-size: 12px; 
    color: var(--coinkk-text-secondary); 
    font-weight: 500; 
}

/* Use existing table and chart card styles; only small spacing overrides */
.coinkk-long-short-page .exchange-liquidations-card .table-header,
.coinkk-long-short-page .token-liquidations-card .table-header { padding-bottom: 6px; }
.coinkk-long-short-page .liquidation-chart-card .chart-container { height:auto; padding:0; }

@media (max-width: 992px) {
    .coinkk-long-short-page .lsr-market-cards { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 768px) {
    .coinkk-long-short-page .lsr-asset-tabs { flex-wrap: wrap; }
    .coinkk-long-short-page .lsr-market-container { padding: 16px; }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--coinkk-border);
    border-radius: 6px;
    font-size: 14px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--coinkk-primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

/* New Blog Page Styles */
.coinkk-blog-page-new {
    margin: 0 auto;
    padding: 20px 85px;
}

/* Blog Navigation Tabs */
.blog-navigation-tabs {
    margin: 0;
    padding: 0 260px;
    background: #e7e9ed;
}

.blog-nav-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-nav-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    margin: 0;
    align-items: center;
}

.blog-nav-tab {
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: #898989;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

.blog-nav-tab:hover {
    color: #000000;
}

.blog-nav-tab.active {
    color: #000000;
}

/* Blog Content Layout */
.blog-articles-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Blog Articles List */
.blog-articles-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-article-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    position: relative;
}

.blog-article-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.article-image-container {
    flex-shrink: 0;
    width: 150px;
    height: 100px;
    overflow: hidden;
    border-radius: 8px;
}

.article-thumbnail {
    width: 100%;
    height: 100%;
    margin: 0;
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Article Thumbnail Background Image Style - Similar to front-page article-item */
.article-thumbnail-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.blog-article-item:hover .article-thumbnail-bg {
    transform: scale(1.03);
}

/* Full-card clickable link (without absolute overlay) */
.article-card-link {
    display: flex;
    gap: 20px;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.article-card-link:hover .article-title {
    color: #111827;
}

.article-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

.article-desc{
    margin: 0;
    font-size: 14px;
}

.article-meta{
    margin: 0;
    font-size: 14px;
}

.article-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}

.article-time {
    font-size: 14px;
    color: #6b7280;
    display: inline-block;
}

.article-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #6b7280;
}

span.article-time,
span.article-views {
    margin: 0;
    padding: 0;
}

p.article-time,
p.article-views {
    margin: 0;
    padding: 0;
}

.view-icon {
    font-size: 16px;
}

.view-count {
    font-weight: 500;
}

.article-excerpt {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.article-excerpt p {
    display: block !important;
}

/* Blog Pagination */
.blog-pagination-container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.blog-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.page-btn.active {
    background: #4285f4;
    border-color: #4285f4;
    color: #ffffff;
}

.page-dots {
    padding: 0 8px;
    color: #9ca3af;
    font-size: 14px;
}

.page-info {
    margin-left: 16px;
    font-size: 14px;
    color: #6b7280;
}


/* Derivatives & Exchange Pages */
.derivatives-content,
.exchange-content {
    margin: 30px 0;
}

.long-short-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ratio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--coinkk-border);
}

.ratio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.ratio-value {
    font-weight: 600;
    color: var(--coinkk-primary);
}

/* Compact Data Styles */
.compact-data {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.data-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--coinkk-bg-secondary);
    border-radius: 8px;
}

.data-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--coinkk-bg-card);
    border-radius: 50%;
}

.data-content {
    flex: 1;
}

.data-title {
    font-size: 12px;
    color: var(--coinkk-text-secondary);
    margin-bottom: 4px;
}

.data-value {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.data-change {
    font-size: 12px;
    font-weight: 500;
}

/* Crypto Index */
.crypto-index {
    padding: 20px;
}

.index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--coinkk-border);
}

.index-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--coinkk-primary);
}

.index-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.index-item {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.index-gauge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gauge-value {
    font-size: 24px;
    font-weight: 700;
}

.gauge-label {
    font-size: 14px;
    color: var(--coinkk-text-secondary);
}

.dominance-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
}

/* Token Liquidations */
.token-liquidations {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.token-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--coinkk-border);
}

/* Liquidation Stats */
.liquidation-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.stat-row.total {
    border-top: 1px solid var(--coinkk-border);
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 600;
}

/* Page Headers */
.page-header {
    text-align: center;
    padding: 40px 0;
    background: var(--coinkk-bg-secondary);
    margin-bottom: 30px;
    border-radius: 12px;
}

/* Mini Chart Improvements */
.mini-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    position: relative;
    border-radius: 8px;
}

.mini-echarts-chart {
    display: block;
}

.mini-chart {
    font-size: 12px;
    color: #4285f4;
}

/* BTC Detail Page Styles */
.btc-hero-section {
    margin: 20px 0;
}

.crypto-symbol.large {
    display: flex;
    align-items: center;
    gap: 15px;
}

.crypto-icon.large {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.crypto-info h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.crypto-meta {
    color: var(--coinkk-text-secondary);
    font-size: 14px;
}

.price-display-section {
    margin: 20px 0;
}

.main-price {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 10px;
}

.price-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--coinkk-text-primary);
}

.price-meta {
    color: var(--coinkk-text-secondary);
    font-size: 14px;
}

.chart-timeframe-selector {
    display: flex;
    gap: 5px;
    margin-top: 15px;
    justify-content: center;
}

.btc-calculator .currency-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.currency-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--coinkk-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.currency-option.active {
    background: var(--coinkk-primary);
    color: white;
    border-color: var(--coinkk-primary);
}

.full-width {
    width: 100%;
}

.exchange-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exchange-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--coinkk-border);
    border-radius: 8px;
    transition: background 0.3s;
}

.exchange-item:hover {
    background: var(--coinkk-bg-secondary);
}

.exchange-info {
    flex: 1;
}

.exchange-name {
    font-weight: 600;
    font-size: 14px;
}

.exchange-pair {
    font-size: 12px;
    color: var(--coinkk-text-secondary);
}

.exchange-price {
    font-weight: 600;
    font-size: 14px;
}

.info-tabs {
    display: flex;
    gap: 0;
    margin: 30px 0;
    border-bottom: 1px solid var(--coinkk-border);
}

.market-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Learn Section */
.learn-card {
    margin-bottom: 20px;
}

.learn-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--coinkk-bg-card);
    border-radius: 12px;
    border: 1px solid var(--coinkk-border);
}

.learn-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.learn-content h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
}

.learn-content p {
    margin: 0;
    font-size: 14px;
    color: var(--coinkk-text-secondary);
    line-height: 1.4;
}

/* Funding Rate Page Styles */
.funding-rate-section {
    margin-bottom: 30px;
}

.funding-rate-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--coinkk-bg-secondary);
    border-radius: 8px;
}

.rate-selector {
    display: flex;
    align-items: center;
    gap: 15px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 30px;
}

.toggle-label:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.toggle-input:checked + .toggle-label {
    background-color: var(--coinkk-primary);
}

.toggle-input:checked + .toggle-label:before {
    transform: translateX(30px);
}

.funding-rate-table {
    font-size: 12px;
}

.funding-rate-table th,
.funding-rate-table td {
    padding: 8px 12px;
    text-align: center;
}

.funding-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
}

.funding-tabs .tab-btn {
    padding: 10px 20px;
    border: 1px solid var(--coinkk-border);
    background: white;
    color: var(--coinkk-text-primary);
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0;
}

.funding-tabs .tab-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.funding-tabs .tab-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.funding-tabs .tab-btn.active {
    background: var(--coinkk-primary);
    color: white;
    border-color: var(--coinkk-primary);
}

/* ===== Funding Rate (new) ===== */
.coinkk-funding-rate-page { margin: 0 auto; padding: 20px 85px; }
.fr-top-cards .wp-block-columns { display:flex; gap:16px; align-items:stretch; }
.fr-top-cards .wp-block-columns > .wp-block-column { flex:1 1 0; }
.fr-card { padding: 16px; }
.fr-compact-table th, .fr-compact-table td { font-size: 12px; padding: 10px 12px; }
.fr-table-container { overflow-x: auto; }
.fr-data-section { margin: 22px 0; }
.fr-data-card { padding: 18px; }
.fr-data-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.fr-tabs { display:flex; gap:0; border-bottom: 1px solid #eef0f3; margin-bottom: 16px; }
.fr-tab-btn { padding: 10px 16px; border:none; background:transparent; color:#6c757d; cursor:pointer; border-bottom: 2px solid transparent; font-weight:500; }
.fr-tab-btn.active { color:#4285f4; border-bottom-color:#4285f4; }
.fr-tab-panels { width: 100%; }
.fr-tab-panel { display:none; }
.fr-tab-panel.active { display:block; }
/* unified table with sticky right column */
.fr-unified-table-container { background:#fff; border:1px solid #f0f0f0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.fr-table-wrapper { position: relative; }
.fr-table-sticky-header { display:flex; background:#f8f9fa; border-bottom: 1px solid #eef0f3; }
.fr-header-left { flex: 1; padding: 12px 16px; }
.fr-header-right { width: 608px; padding: 12px 0; background:#fff; border-left: 2px solid #4285f4; position: sticky; right: 0; z-index: 10; }
.fr-section-title { font-weight:600; color:#111827; font-size:14px; text-align: center; }
.fr-scroll-container { overflow-x:auto; }
.fr-unified-rate-table { width: 100%; min-width: 1200px; border-collapse: collapse; font-size: 11px; }
.fr-unified-rate-table th { background:#fafbfc; color:#6c757d; font-weight:500; text-align:center; padding: 10px 6px; border-bottom: 1px solid #f0f0f0; }
.fr-unified-rate-table td { text-align:center; padding: 8px 6px; border-bottom: 1px solid #f8f9fa; }
.fr-unified-rate-table .asset { text-align:left; }
.fr-unified-rate-table .asset-col { width: 160px; text-align:left; position: sticky; left: 0; background:#fff; z-index: 5; }
.fr-unified-rate-table .token-margined-col { width: 140px; position: sticky; background:#f8f9fa; z-index: 10; }
.fr-unified-rate-table .token-margined-cell { width: 140px; position: sticky; background:#fff; z-index: 10; font-weight: 600; }
.fr-unified-rate-table .token-margined-col.tm-col-1, .fr-unified-rate-table .token-margined-cell.tm-col-1 { right: 0; }
.fr-unified-rate-table .token-margined-col.tm-col-2, .fr-unified-rate-table .token-margined-cell.tm-col-2 { right: 132px; }
.fr-unified-rate-table .token-margined-col.tm-col-3, .fr-unified-rate-table .token-margined-cell.tm-col-3 { right: 264px; }
.fr-unified-rate-table .token-margined-col.tm-col-4, .fr-unified-rate-table .token-margined-cell.tm-col-4 { right: 396px; border-left: 2px solid #4285f4; }
.fr-tips-row { display:flex; justify-content: space-between; align-items:center; padding: 10px 0 0; }
.fr-tips { color:#6b7280; font-size:12px; margin:0; }

.fr-charts { margin: 22px 0; }
.fr-chart-card { padding: 12px 12px 2px; }
.fr-chart-switch { display:flex; gap:6px; }

.fr-contact-section { margin: 24px 0; }
.fr-contact-card { padding: 0; }
.fr-contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 20px; }
.fr-contact-info h3 { margin: 0 0 10px; font-size: 20px; }
.fr-contact-info p { margin: 6px 0; color:#4B5563; }
.fr-contact-form .form-input, .fr-contact-form .form-textarea { width:100%; border:1px solid #e9ecef; border-radius:8px; padding:10px; box-sizing:border-box; }
.fr-contact-form .submit-btn { background:#2563EB; color:#fff; border:none; border-radius:8px; padding:10px 14px; font-weight:600; }

@media (max-width: 1024px) {
    .fr-contact-grid { grid-template-columns: 1fr; }
    .fr-header-right { width: 442px; }
    .fr-unified-rate-table .token-margined-col,
    .fr-unified-rate-table .token-margined-cell { width: 110px; }
    .fr-unified-rate-table .token-margined-col.tm-col-2, .fr-unified-rate-table .token-margined-cell.tm-col-2 { right: 110px; }
    .fr-unified-rate-table .token-margined-col.tm-col-3, .fr-unified-rate-table .token-margined-cell.tm-col-3 { right: 220px; }
    .fr-unified-rate-table .token-margined-col.tm-col-4, .fr-unified-rate-table .token-margined-cell.tm-col-4 { right: 330px; }
}

@media (max-width: 768px) {
    .fr-top-cards .wp-block-columns { flex-direction: column; gap:12px; }
}

/* Open Interest Page Styles */
.oi-section {
    margin-bottom: 30px;
}

.oi-controls {
    margin: 20px 0;
}

.oi-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.oi-tabs .tab-btn {
    padding: 8px 15px;
    border: 1px solid var(--coinkk-border);
    background: white;
    color: var(--coinkk-text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
}

.oi-tabs .tab-btn.active {
    background: var(--coinkk-primary);
    color: white;
    border-color: var(--coinkk-primary);
}

.oi-filters {
    display: flex;
    gap: 10px;
}

/* Compact Table Styles */
.compact-table {
    font-size: 12px;
}

.compact-table th,
.compact-table td {
    padding: 8px 10px;
}

/* Chart Legend Styles */
.chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Long Short Chart Container */
.long-short-chart-container {
    padding: 15px;
}

/* Homepage Redesign */
.coinkk-homepage {
    max-width: 100%;
    padding: 0 85px;
    overflow-x: hidden;
}

/* Top Cards Section */
.coinkk-top-cards {
    margin-bottom: 0px;
}

.top-cards-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

.top-cards-row .wp-block-column {
    flex: 1;
}

/* Contract Data Wrapper */
.contract-data-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    height: 100%;
}

.contract-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.contract-images p {
    display:none;
}

.contract-image-item {
    width: 100%;
    height: 148px;
    border-radius: 28px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.contract-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none !important;
    color: inherit;
}

.contract-image-link:hover,
.contract-image-link:focus,
.contract-image-link:visited {
    text-decoration: none !important;
    color: inherit;
}

.contract-image-bg {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.contract-image-link:hover .contract-image-bg {
    transform: scale(1.1);
}

.contract-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.contract-image-link:hover .contract-image-overlay {
    opacity: 1;
    transform: translateY(0);
}

.contract-image-title {
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.contract-image-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.contract-mini-chart {
    width: 48px;
    height: 28px;
    background: linear-gradient(45deg, #4285f4 0%, #34a853 100%);
    border-radius: 4px;
    position: relative;
}

.contract-mini-chart::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* Contract Data Card */
.contract-data-card {
    padding: 19px 31px 56px 31px;
    flex: 1;
}

.contract-data-card img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

.blue-dot {
    width: 8px;
    height: 8px;
    background: #4285f4;
    border-radius: 50%;
}

.contract-data-content .data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 28px 6px 10px;
    border-bottom: 1px solid #f5f5f5;
}

.contract-data-content .data-row:last-child {
    border-bottom: none;
}

.data-label {
    color: #6c757d;
    font-size: 14px;
}

/* Crypto Index Card */
.crypto-index-card {
    padding: 19px 18px 15px 18px;
}

.crypto-index-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

.index-item {
    background: #f8f9fa;
    border-radius: 22px;
    padding: 1px 14px 10px 14px;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.index-item-title {
    font-size: 15px;
    color: #9ca3af;
    margin: 13px 0 0 0;
    font-weight: 500;
    text-transform: none;
    text-align: left;
    width: 100%;
}

/* Total Market Cap */
.index-item.market-cap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.index-value-large {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin-top: 16px;
    text-align: right;
}

/* ETF Net Inflow */
.index-item.etf-inflow {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.etf-values {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
    margin: 0 5px 0 0;
}

.etf-main-value {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.etf-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

.etf-number {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.etf-number.positive {
    color: #22c55e;
}

.etf-number.negative {
    color: #3366FF;
}

.etf-sub-value {
    font-size: 20px;
    color: #6c757d;
    text-align: right;
}

.etf-sub-value.positive {
    color: #22c55e;
}

.etf-sub-value.negative {
    color: #3366FF;
}

/* Panic Greed Index */
.index-item.panic-greed {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.panic-greed-layout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    justify-content: flex-end;
}

.gauge-container {
    width: 80px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}

.gauge-container canvas {
    display: block;
    margin: 0;
    padding: 0;
}

.gauge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.gauge-number {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    text-align: right;
}

.gauge-label {
    font-size: 14px;
    color: #6c757d;
    margin-top: 4px;
    text-align: right;
}

/* Market Share */
.index-item.market-share {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.market-share-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    align-items: flex-end;
}

.share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.share-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.share-dot.gray {
    background: #d1d5db;
}

.share-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    min-width: 70px;
}

.share-change {
    font-size: 12px;
    font-weight: 500;
}

.share-change.positive {
    color: #22c55e;
}

.share-change.negative {
    color: #ef4444;
}

.index-value-medium {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

.index-change-text {
    font-size: 11px;
    color: #4285f4;
}

.crypto-index-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.index-main {
    flex: 1;
}

.index-value {
    font-size: 32px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 4px;
}

.index-label {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 8px;
}

.index-change {
    color: #4285f4;
    font-size: 14px;
    font-weight: 500;
}

.stat-number {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 2px;
}

.stat-desc {
    font-size: 12px;
    color: #6c757d;
}

/* Main Content Area */
.coinkk-main-content .wp-block-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.coinkk-main-content .wp-block-column {
    flex: 1;
}

/* News Banner Card with Swiper */
.hero-news-card {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.news-swiper {
    width: 100%;
    height: 100%;
    flex: 1;
}

/* 确保 Swiper 的内部元素占满高度 */
.news-swiper .swiper-wrapper {
    height: 100%;
}

.news-swiper .swiper-slide {
    height: 100%;
}

.news-swiper .swiper-slide p {
    display:none;
}

.news-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
}

.news-banner-link:hover,
.news-banner-link:focus,
.news-banner-link:visited,
.news-banner-link:active {
    text-decoration: none !important;
    color: inherit;
}

.news-banner-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.news-banner-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-banner-image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.news-banner-link:hover .news-banner-image img {
    transform: scale(1.1);
}

.news-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 40px 20px 20px;
}

.news-banner-content {
    color: white;
}

.news-banner-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-decoration: none !important;
}

.news-banner-meta {
    display: block !important;
}

.news-banner-title a,
.news-banner-link .news-banner-title {
    text-decoration: none !important;
    color: inherit;
}

.news-banner-meta {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Swiper pagination */
.news-swiper .swiper-pagination,
.news-swiper .swiper-pagination-clickable,
.news-swiper .swiper-pagination-bullets,
.news-swiper .swiper-pagination-horizontal {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    text-align: right !important;
}

.news-swiper .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255,255,255,0.5) !important;
    opacity: 1 !important;
    margin: 0 3px !important;
    border-radius: 50% !important;
}

.news-swiper .swiper-pagination-bullet-active {
    background: rgba(255,255,255,0.9) !important;
    transform: scale(1.2) !important;
}

.news-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.news-excerpt {
    color: #6c757d;
    font-size: 14px;
    margin: 0 0 12px 0;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6c757d;
}

/* Article Icon - Background Image Style */
.article-icon {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
}

.article-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: inherit;
    transition: transform 0.3s ease;
}

/* Article Item Layout */
.article-item {
    display: flex;
    gap: 15px;
    padding: 14px 23px;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.article-item:hover {
    background-color: #fafbfc;
}

.article-item:hover .article-icon::before {
    transform: scale(1.1);
}

.article-item:last-child {
    border-bottom: none;
}

.article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Article card link - remove all underlines */
.article-card-link {
    display: flex;
    gap: 15px;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none !important;
}

.article-card-link p {
    display:none;
}

.article-card-link:hover,
.article-card-link:focus,
.article-card-link:visited,
.article-card-link:active {
    text-decoration: none !important;
    color: inherit;
}

/* Articles Card */
.articles-card {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.articles-header {
    padding: 20px 20px 0 20px;
}

.articles-tabs {
    display: flex;
    gap: 4px;
}

.articles-tabs .tab-btn {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 14px 31px;
    font-size: 15px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
}

.articles-tabs .tab-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #495057;
}

.articles-tabs .tab-btn.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.articles-list {
    margin: 13px 13px 13px 13px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    overflow-y: auto;
    background: #fdfdfd;
    height: 330px;
    min-height: 0; /* 重要：允许 flex 子项收缩到 max-height 以下 */
    flex-shrink: 0; /* 防止被压缩 */
    scrollbar-width: thin;
    scrollbar-color: #e9ecef transparent;
}

.articles-list::-webkit-scrollbar {
    width: 4px;
}

.articles-list::-webkit-scrollbar-track {
    background: transparent;
}

.articles-list::-webkit-scrollbar-thumb {
    background: #e9ecef;
    border-radius: 2px;
}

.articles-list::-webkit-scrollbar-thumb:hover {
    background: #dee2e6;
}

.articles-gradient-overlay {
    position: absolute;
    bottom: 14px;
    left: 13px;
    right: 14px;
    height: 30px;
    background: linear-gradient(transparent, rgba(255,255,255,0.9));
    pointer-events: none;
    z-index: 1;
}

/* Crypto Table Card */
.crypto-table-card {
    padding: 24px;
    margin-top: 25px;
}

/* Function Icons */
.function-icons-card {
    padding: 26px 16px 18px 16px;
    height: 100%;
}

.function-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.function-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #1f2937;
}

.function-icon .icon-box { 
    width: 63px; 
    height: 63px; 
    border: 1px solid #eef0f3; 
    border-radius: 10px; 
    background: #fafbfc; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #1f2937; 
}
.function-icon .icon-box img {
    display: block;
    max-width: 70%;
    max-height: 70%;
}

.function-icon .icon-box span { 
    font-size: 22px; 
    line-height: 1; 
}

.function-icon em {
    font-style: normal;
    font-size: 8px;
    color: #6b7280;
    margin: 5px 0;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.table-title {
    font-size: 22px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.table-subtabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    flex: 1;
}

.subtabs-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.subtab-btn {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 14px 28px;
    font-size: 19px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
}

.subtab-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.subtab-btn.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.subtabs-right {
    display: flex;
    align-items: center;
    gap: 23px;
    flex-wrap: wrap;
    padding: 4px 0 0 8px;
}

.subtab-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.subtab-link:hover {
    color: #4285f4;
}

.subtab-divider {
    color: #dee2e6;
    font-size: 14px;
    user-select: none;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-buttons .filter-btn {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 24px;
    padding: 14px 24px;
    font-size: 17px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-buttons .filter-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.crypto-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.crypto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
}

.crypto-table th {
    text-align: left;
    padding: 22px 10px;
    color: #6c757d;
    font-weight: 500;
    font-size: 17px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.crypto-table th:first-child {
    padding-left: 20px;
}

.crypto-table th:last-child {
    padding-right: 20px;
}

.crypto-table td {
    padding: 5px 0 41px 12px;
    font-size: 19px;
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
}

.crypto-table td:first-child {
    padding-left: 20px;
    color: #9ca3af;
    font-weight: 500;
}

.crypto-table td:last-child {
    padding-right: 20px;
}

.crypto-table tr:hover {
    background: #fafbfc;
}

.crypto-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
}

.crypto-name .name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
}

.crypto-name .symbol {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

.crypto-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.crypto-icon.bitcoin {
    background: #f7931a;
}

.crypto-icon.ethereum {
    background: #627eea;
}

.crypto-icon.tether {
    background: #26a17b;
}

.crypto-icon.bnb {
    background: #f3ba2f;
}

.crypto-icon.solana {
    background: #9945ff;
}

.name {
    font-weight: 500;
    color: #212529;
    font-size: 14px;
}

.price {
    font-weight: 600;
    color: #212529;
    font-size: 14px;
}

.change {
    font-weight: 500;
    font-size: 13px;
}

.change.positive {
    color: #22c55e;
}

.change.negative {
    color: #ef4444;
}

.market-cap,
.volume-text {
    color: #6c757d;
    font-size: 13px;
}

/* Volume Progress Bar */
.volume-with-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.volume-bar {
    width: 100%;
    height: 3px;
    background: #f1f3f4;
    border-radius: 2px;
    overflow: hidden;
}

.volume-progress {
    height: 100%;
    background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Volume with Progress Bar - Horizontal Layout */
.volume-with-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 280px;
}

.volume-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.volume-main {
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.volume-sub {
    color: #6c757d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.volume-bar-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 80px;
}

.volume-bar-label {
    color: #6c757d;
    font-size: 11px;
    font-weight: 400;
    text-align: right;
}

/* Mini Chart Styling */
.mini-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 13px;
    margin-left: 43px;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info {
    font-size: 14px;
    color: #6c757d;
}

.pagination-controls {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.pagination-controls .page-btn {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
}

.pagination-controls .page-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.pagination-controls .page-btn.active {
    background: #4285f4;
    border-color: #4285f4;
    color: white;
}

.pagination-controls .page-btn[disabled] {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-controls .page-btn[disabled]:hover {
    background: #f8f9fa;
    border-color: #e9ecef;
}

.page-dots {
    padding: 0 8px;
    color: #6c757d;
}

/* Footer Contact Section */
.coinkk-footer .coinkk-contact-section {
    background: #f3f5fa;
}

.coinkk-footer .contact-container {
    background: #f7f9fc;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 40px;
}

.coinkk-footer .contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 208px;
    align-items: start;
}

.coinkk-footer .contact-content .contact-info {
    padding: 35px 75px 0 131px;
}

.coinkk-footer .contact-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
}

.coinkk-footer .contact-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 21px 0 0 0;
    font-size: 15px;
}

.coinkk-footer .contact-item {
    color: #4B5563;
    line-height: 1.6;
    margin: 0;
}

.coinkk-footer .contact-info-box {
    margin-top: 18px;
}

.coinkk-footer .contact-info-box .contact-item {
    margin-bottom: 0;
}

.coinkk-footer .contact-info-box .contact-item:last-child {
    margin-bottom: 0;
}

.coinkk-footer .contact-form-section {
    background: transparent;
    padding: 54px 86px 0 0;
}

.coinkk-footer .contact-form-section p {
    margin: 0;
}


.coinkk-footer .form-row {
    display: flex;
    gap: 35px;
    margin-bottom: 13px;
}

.coinkk-footer .form-group {
    margin-bottom: 12px;
}

.coinkk-footer .form-group.half-width {
    flex: 1;
    margin-bottom: 0;
}

.coinkk-footer .form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.coinkk-footer .form-input,
.coinkk-footer .form-textarea {
    width: 100%;
    padding: 10px 10px 7px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    background: #FFFFFF;
    color: #111827;
    box-sizing: border-box;
}

.coinkk-footer .form-input::placeholder,
.coinkk-footer .form-textarea::placeholder {
    color: #9CA3AF;
}

.coinkk-footer .form-input:focus,
.coinkk-footer .form-textarea:focus {
    outline: none;
    border-color: #4285f4;
}

.coinkk-footer .form-textarea {
    resize: vertical;
    min-height: 170px;
}

.coinkk-footer .submit-btn {
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: auto;
}

.coinkk-footer .submit-btn:hover {
    background: #1D4ED8;
}

/* Header mobile navigation */
.mobile-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-nav-toggle .hamburger,
.mobile-nav-toggle .hamburger::before,
.mobile-nav-toggle .hamburger::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #111827;
    content: "";
    position: relative;
    transition: all .2s ease;
}

.mobile-nav-toggle .hamburger::before { top: -6px; position: absolute; }
.mobile-nav-toggle .hamburger::after { top: 6px; position: absolute; }
.mobile-nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.mobile-nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
.mobile-nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

/* Brand Links */
.brand-link.coinkk-logo { 
    display: inline-flex; 
    align-items: center; 
    gap: 15px; 
    text-decoration: none; 
}

.brand-link .brand-logo { 
    width: 40px; 
    height: auto; 
    object-fit: contain; 
    display: block; 
}

.brand-link .brand-text { 
    font-weight: 700; 
    font-size: 20px; 
    color: #111827; 
}

.footer-brand { 
    display: inline-flex; 
    align-items: center; 
    gap: 12px; 
    text-decoration: none; 
    margin: 12px 0 8px; 
}

.footer-brand-logo { 
    width: 31px; 
    height: 31px; 
    object-fit: contain; 
    display: block; 
}

.footer-brand-text { 
    font-weight: 700; 
    font-size: 19px; 
    color: #111827; 
}

/* Header search */
.header-actions .wp-block-search__inside-wrapper {
    width: 376px !important;
    height: 45px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    padding: 0 8px;
    box-sizing: border-box;
}

:root :where(.wp-block-search .wp-block-search__input) {
    padding-left: 0.8rem;
    padding-right: 0rem;
}

.header-actions .wp-block-search__field {
    flex: 1;
    height: 45px;
    line-height: 45px;
    border: 0;
    background: transparent;
    padding: 0 8px;
    color: #111827;
}

.header-actions .wp-block-search__field:focus { 
    outline: none; 
    box-shadow: none; 
}

.header-actions .wp-block-search__button {
    height: 45px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 8px;
    color: #000000;
}

.header-actions .wp-block-search__button svg { 
    fill: #000000; 
    width: 18px; 
    height: 18px; 
    display: block; 
}

/* External contract images banner */
.coinkk-top-cards > .contract-images { 
    display: flex; 
    gap: 16px; 
    margin: 0 0 14px 0; 
    align-items: center; 
}

.coinkk-top-cards > .contract-images .contract-image-item { 
    width: 190px; 
    height: 120px; 
    border-radius: 8px; 
    overflow: hidden; 
    border: 1px solid #e9ecef; 
    background: #f8f9fa;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.coinkk-top-cards > .contract-images .contract-image-item img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

/* Responsive Design */
@media (max-width: 1024px) {
    .blog-articles-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .coinkk-trading-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .coinkk-nav { 
        gap: 12px; 
    }
    
    .header-actions { 
        display: none; 
    }
    
    .mobile-nav-toggle { 
        display: inline-flex; 
    }
    
    #primary-nav { 
        display: none; 
        width: 100%; 
    }
    
    #primary-nav.open { 
        display: block; 
    }
    
    #primary-nav .menu.primary-menu {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 0;
    }
    
    #primary-nav .menu.primary-menu > li { 
        position: relative; 
    }
    
    #primary-nav .menu.primary-menu a { 
        padding: 10px 6px; 
        display: block; 
    }
    
    #primary-nav .menu.primary-menu .sub-menu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        background: transparent;
        padding-left: 12px;
    }
    
    #primary-nav .menu.primary-menu li.open > .sub-menu { 
        display: block; 
    }
    
    .coinkk-nav-menu-primary .menu > li:not(:last-child)::after { 
        display: none; 
    }

    .header-actions .wp-block-search__inside-wrapper { 
        width: 100%; 
    }
}

@media (max-width: 768px) {
    .coinkk-nav,
    .coinkk-nav-menu {
        flex-direction: column;
        gap: 15px;
    }
    
    .coinkk-nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .coinkk-trading-grid,
    .footer-content,
    .market-stats-grid,
    .coinkk-footer .contact-content,
    .footer-menus .footer-menus-grid {
        grid-template-columns: 1fr;
    }
    
    .market-stats-scroll {
        gap: 15px;
    }
    
    .featured-article {
        height: 200px;
    }
    
    .blog-tabs {
        justify-content: flex-start;
    }
    
    .tab-btn {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .article-content h3 {
        font-size: 14px;
    }
    
    .data-item {
        flex-direction: column;
        text-align: center;
    }

    /* New Blog Page Mobile Styles */
    .coinkk-blog-page-new {
        padding: 15px;
    }
    
    .blog-nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .blog-nav-tab {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .blog-article-item {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .article-image-container {
        width: 100%;
        height: 200px;
    }
    
    .article-title {
        font-size: 16px;
    }
    
    .article-meta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .blog-pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .page-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .crypto-symbol.large {
        flex-direction: column;
        text-align: center;
    }
    
    .main-price {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .price-value {
        font-size: 28px;
    }
    
    .chart-timeframe-selector {
        flex-wrap: wrap;
    }
    
    .exchange-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .learn-item {
        flex-direction: column;
    }
    
    .learn-image {
        width: 100%;
        height: 150px;
    }
    
    .funding-rate-controls,
    .oi-controls {
        flex-direction: column;
        gap: 15px;
    }
    
    .oi-tabs {
        justify-content: center;
    }

    .coinkk-homepage {
        padding: 0 15px;
    }
    
    .top-cards-row,
    .coinkk-main-content .wp-block-columns,
    .crypto-index-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .index-stats {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .coinkk-footer .contact-container {
        padding: 30px 20px;
    }
    
    .coinkk-footer .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .coinkk-footer .contact-content .contact-info,
    .coinkk-footer .contact-form-section {
        padding: 0;
    }
    
    .coinkk-footer .contact-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .coinkk-footer .contact-item {
        font-size: 14px;
    }
    
    .coinkk-footer .form-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .coinkk-footer .form-group.half-width {
        margin-bottom: 20px;
    }
    
    .coinkk-footer .form-submit {
        justify-content: center;
    }
    
    .coinkk-footer .submit-btn {
        width: 100%;
    }

    .footer-bottom .footer-legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0 0 0;
    }

    .footer-bottom .footer-legal .legal-link {
        margin-left: 0;
    }

    .footer-menus .footer-about {
        text-align: center;
    }
    
    .footer-menus .footer-about .custom-logo,
    .footer-menus .footer-about img { 
        margin: 0 auto; 
    }
    
    .footer-menus .footer-desc { 
        margin: 0 auto; 
    }

    .footer-menus .footer-menu {
        flex-direction: column;
        gap: 14px;
    }
    
    .footer-menus .footer-menu > li > a {
        display: block;
        font-weight: 600;
        color: #111827;
        padding: 6px 0;
    }
    
    .footer-menus .footer-menu > li > a:hover {
        color: #111827;
        opacity: .9;
    }
    
    .footer-menus .footer-menu .sub-menu {
        padding-left: 8px;
        gap: 6px;
    }
    
    .footer-menus .footer-menu .sub-menu li a {
        padding: 4px 0;
        font-size: 14px;
    }
    
    .footer-menus .footer-menu .sub-menu li a:hover {
        color: #2563EB;
    }

    .news-swiper { 
        height: 200px; 
        min-height: 200px;
    }
    
    .news-swiper .swiper-wrapper {
        height: 100%;
        min-height: 200px;
    }
    
    .news-swiper .swiper-slide {
        height: 100%;
        min-height: 200px;
    }
    
    .news-banner-container {
        min-height: 200px;
    }
    
    .news-banner-image {
        min-height: 200px;
    }
    
    .news-banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .news-banner-overlay {
        padding: 30px 15px 15px;
    }
    
    .news-banner-title {
        font-size: 16px;
    }
    
    .news-banner-meta {
        font-size: 12px;
    }

    .crypto-index-grid { 
        gap: 12px; 
        height: auto; 
    }
    
    .gauge-container { 
        width: 60px; 
        height: 38px; 
    }
    
    .gauge-container canvas {
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .gauge-number { 
        font-size: 24px; 
    }
    
    .gauge-label {
        font-size: 12px;
    }
    
    .etf-number {
        font-size: 24px;
    }
    
    .index-value-large {
        font-size: 24px;
    }

    .articles-list { 
        max-height: 220px; 
    }
    
    .articles-tabs .tab-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    .top-cards-row { 
        gap: 16px; 
    }

    .crypto-table { 
        font-size: 12px; 
    }
    
    .crypto-table th, 
    .crypto-table td { 
        padding: 10px 6px; 
    }

    .brand-link .brand-text { 
        font-size: 16px; 
    }
    
    .footer-brand-text { 
        font-size: 15px; 
    }
    
    .function-icon .icon-box { 
        width: 56px; 
        height: 56px; 
    }

    .coinkk-top-cards > .contract-images { 
        flex-direction: column; 
        gap: 10px; 
    }
    
    .coinkk-top-cards > .contract-images .contract-image-item { 
        width: 100%; 
    }

    .contract-data-wrapper { 
        flex-direction: column !important; 
        gap: 10px !important; 
    }
    
    .contract-images { 
        display: grid !important; 
        grid-template-columns: 1fr !important; 
        row-gap: 10px !important; 
        width: 100% !important; 
    }
    
    .contract-images .contract-image-item { 
        width: 100% !important; 
        height: 96px !important; 
    }
    
    .contract-data-card { 
        width: 100% !important; 
        max-width: 100% !important; 
        overflow: hidden; 
    }
    
    .contract-data-content { 
        overflow-x: hidden; 
    }

    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .table-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }
    
    .table-subtabs {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }
    
    .subtabs-right {
        gap: 8px;
    }
    
    .subtab-link {
        font-size: 13px;
    }
    
    .filter-buttons {
        justify-content: flex-start;
    }

    .pagination-controls {
        gap: 2px;
    }
    
    .page-btn {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 32px;
    }
    
    .table-pagination {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* Open Interest Page Styles */
.coinkk-open-interest-page {
    margin: 0 auto;
    padding: 20px 85px;
}

/* Top Open Interest Section */
.oi-top-section {
    margin-bottom: 40px;
}

.oi-top-tables {
    gap: 20px;
}

.oi-gainers-card,
.oi-losers-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.oi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.oi-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.oi-time-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px;
    gap: 4px;
}

.oi-time-btn {
    min-width: 40px;
    text-align: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.oi-time-btn.active {
    background: #111827;
    color: #ffffff;
}

.oi-time-btn:hover:not(.active) {
    background: rgba(17, 24, 39, 0.1);
}

.text-right {
    text-align: right;
}

.positive {
    color: #2563eb;
    font-weight: 500;
}

.negative {
    color: #ef4444;
    font-weight: 500;
}

/* Open Interest Tables */
.oi-table-container {
    overflow-x: auto;
    border-radius: 8px;
}

.oi-compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: white;
}

.oi-compact-table th {
    background: #fafbfc;
    color: #6c757d;
    font-weight: 500;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
}

.oi-compact-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
}

.oi-compact-table tr:hover {
    background: #fafbfc;
}

.rank-cell {
    color: #9ca3af;
    font-weight: 500;
    font-size: 10px;
    width: 40px;
}

.oi-value {
    font-weight: 600;
    color: #212529;
}

.change-value.positive,
.change-percent.positive {
    color: #22c55e;
    font-weight: 500;
}

.change-value.negative,
.change-percent.negative {
    color: #ef4444;
    font-weight: 500;
}

.volume-value {
    color: #6c757d;
    font-size: 11px;
}

/* BTC Open Interest Section */
.btc-oi-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 20px 0;
}

.btc-oi-controls {
    margin-bottom: 20px;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.oi-timeframe-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.timeframe-tab {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    font-weight: 500;
}

.timeframe-tab:hover,
.timeframe-tab.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.oi-view-filters {
    display: flex;
    gap: 8px;
}

.view-filter {
    padding: 6px 16px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.view-filter:hover,
.view-filter.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

/* BTC OI Table Card */
.btc-oi-table-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.btc-oi-table-container {
    overflow-x: auto;
    border-radius: 8px;
}

.btc-oi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: white;
    min-width: 1000px;
}

.btc-oi-table th {
    background: #fafbfc;
    color: #6c757d;
    font-weight: 500;
    padding: 10px 6px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    font-size: 10px;
}

.btc-oi-table th:first-child {
    text-align: left;
    width: 80px;
}

.btc-oi-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f8f9fa;
    text-align: center;
    vertical-align: middle;
}

.btc-oi-table tr:hover {
    background: #fafbfc;
}

.exchange-cell {
    text-align: left !important;
    width: 80px;
}

.crypto-icon.cme {
    background: #0052FF;
    color: white;
}

.oi-total {
    font-weight: 600;
    color: #212529;
}

.btc-amount {
    color: #6c757d;
}

.percentage {
    color: #212529;
    font-weight: 500;
}

.change-cell.positive {
    color: #22c55e;
    font-weight: 500;
}

.change-cell.negative {
    color: #ef4444;
    font-weight: 500;
}

/* Chart Section */
.oi-chart-section {
    margin-bottom: 40px;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.chart-container {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 20px;
    min-height: 450px;
}

#openInterestChart {
    width: 100% !important;
    height: 450px !important;
}

/* FAQ Section */
.oi-faq-section {
    margin-bottom: 40px;
}

.faq-title {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 30px 0;
}

.faq-container {
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.faq-question {
    padding: 18px 20px;
    background: #fafbfc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: #212529;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #f1f3f4;
}

.faq-icon {
    font-size: 18px;
    color: #6c757d;
    font-weight: normal;
    transition: transform 0.2s;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 20px;
    display: none;
    background: white;
}

.faq-answer p {
    padding: 18px 0;
    margin: 0;
    color: #6c757d;
    line-height: 1.6;
    border-top: 1px solid #f0f0f0;
}

/* Responsive Design for Open Interest Page */
@media (max-width: 768px) {
    .coinkk-open-interest-page {
        padding: 15px;
    }
    
    .oi-top-tables {
        flex-direction: column;
        gap: 20px;
    }
    
    .oi-gainers-card,
    .oi-losers-card {
        padding: 15px;
    }
    
    .oi-card-title {
        font-size: 16px;
    }
    
    .btc-oi-controls {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .oi-timeframe-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .btc-oi-table-card {
        padding: 15px;
    }
    
    .chart-container {
        padding: 15px;
        min-height: 350px;
    }
    
    #openInterestChart {
        height: 350px !important;
    }
    
    .faq-question {
        padding: 15px;
        font-size: 14px;
    }
    
    .faq-answer p {
        padding: 15px 0;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .section-title,
    .faq-title {
        font-size: 20px;
    }
    
    .oi-compact-table,
    .btc-oi-table {
        font-size: 10px;
    }
    
    .oi-compact-table th,
    .oi-compact-table td {
        padding: 6px 4px;
    }
    
    .btc-oi-table th,
    .btc-oi-table td {
        padding: 6px 3px;
    }
    
    .timeframe-tab,
    .view-filter {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Prevent overflow */
.wp-block-columns,
.wp-block-group,
.wp-block-column,
.coinkk-main-content .wp-block-columns,
.coinkk-main-content .wp-block-column,
.top-cards-row,
.top-cards-row .wp-block-column,
.swiper,
.news-swiper,
.hero-news-card,
.hero-news-card * { 
    min-width: 0; 
}

/* Contact Form 7 spinner default hidden without layout gap */
.wpcf7-spinner { 
    display: none !important; 
    margin: 0 !important; 
}
.submitting .wpcf7-spinner { 
    display: inline-block !important; 
}

img, video { 
    max-width: 100%; 
    height: auto; 
}

/* Exchange Page - Derivatives Table Styles */
.coinkk-exchange-page {
    margin: 0 auto;
    padding: 20px 85px;
}

.coinkk-exchange-page .page-header {
    background: transparent;
    border-radius: 0;
    padding: 20px 0;
    margin-bottom: 20px;
    text-align: left;
    box-shadow: none;
    border: none;
}

.coinkk-exchange-page .page-header h1 {
    color: #212529;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

/* Derivatives Table Card */
.derivatives-table-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 18px 40px rgba(15,23,42,0.08);
    border: none;
    overflow: visible;
}

.derivatives-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.derivatives-table-container .table-pagination {
    overflow-x: visible;
    margin-left: 0;
}

/* Derivatives Table */
.derivatives-table {
    width: 100%;
    border-collapse: separate;
    font-size: 13px;
    min-width: 900px;
    background: transparent;
}

.derivatives-table th {
    background: transparent;
    color: #9ca3af;
    font-weight: 500;
    padding: 8px 10px;
    text-align: left;
    border: none;
    font-size: 12px;
    white-space: nowrap;
}

.derivatives-table th:first-child {
    padding-left: 10px;
}

.derivatives-table th:last-child {
    padding-right: 10px;
    text-align: right;
}

.derivatives-table tbody tr {
    background: white;
}

.derivatives-table tbody tr:hover {
    background-color: rgb(234, 234, 234);
}

.derivatives-table td {
    padding: 14px 10px;
    border: none;
    vertical-align: middle;
    font-size: 13px;
    white-space: nowrap;
}

.derivatives-table td:first-child {
    padding-left: 10px;
}

.derivatives-table td:last-child {
    padding-right: 10px;
    text-align: right;
}

.derivatives-table td.num {
    font-variant-numeric: tabular-nums;
}

/* Table Cell Styles */
.ranking-cell {
    color: #9ca3af;
    font-weight: 500;
    width: 80px;
    text-align: center;
}

.exchange-cell {
    min-width: 140px;
}

.exchange-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exchange-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
}

.exchange-icon.binance {
    background: #f3ba2f;
}

.exchange-name {
    font-weight: 500;
    color: #212529;
    font-size: 14px;
}

.volume-cell,
.oi-cell,
.liquidation-cell {
    font-weight: 600;
    color: #212529;
    min-width: 100px;
}

.oi-percent,
.fees-cell,
.ratio-cell {
    color: #6c757d;
    text-align: right;
    min-width: 80px;
}

.score-cell {
    font-weight: 600;
    color: #212529;
    text-align: center;
    width: 60px;
}

.trade-cell {
    width: 100px;
}

.trade-btn {
    background: #4f7df3;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.trade-btn:hover {
    background: #3a5dd8;
    opacity: 0.9;
}

/* Derivatives Pagination */
.derivatives-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: white;
    border-top: 1px solid #f0f0f0;
}

.derivatives-pagination .pagination-btn {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
    text-decoration: none;
}

.derivatives-pagination .pagination-btn:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.derivatives-pagination .pagination-btn.active {
    background: #4285f4;
    border-color: #4285f4;
    color: white;
}

.derivatives-pagination .page-dots {
    padding: 0 8px;
    color: #6c757d;
}

.derivatives-pagination .page-info {
    color: #6c757d;
    font-size: 14px;
    margin-left: 16px;
}

/* Responsive Design for Exchange Page */
@media (max-width: 768px) {
    .coinkk-exchange-page {
        padding: 15px;
    }
    
    .coinkk-exchange-page .page-header {
        padding: 15px 0;
    }
    
    .coinkk-exchange-page .page-header h1 {
        font-size: 20px;
    }
    
    .derivatives-table {
        font-size: 12px;
    }
    
    .derivatives-table th,
    .derivatives-table td {
        padding: 12px 8px;
    }
    
    .derivatives-table th:first-child,
    .derivatives-table td:first-child {
        padding-left: 15px;
    }
    
    .derivatives-table th:last-child,
    .derivatives-table td:last-child {
        padding-right: 15px;
    }
    
    .exchange-info {
        gap: 8px;
    }
    
    .exchange-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .exchange-name {
        font-size: 12px;
    }
    
    .trade-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .derivatives-pagination {
        padding: 15px;
        gap: 4px;
    }
    
    .derivatives-pagination .pagination-btn {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 32px;
    }
}

@media (max-width: 480px) {
    .derivatives-table {
        font-size: 11px;
        min-width: 800px;
    }
    
    .derivatives-table th,
    .derivatives-table td {
        padding: 10px 6px;
    }
    
    .exchange-name {
        font-size: 11px;
    }
    
    .trade-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .derivatives-pagination .pagination-btn {
        padding: 4px 6px;
        font-size: 11px;
        min-width: 28px;
    }
}

/* Liquidation Page Styles */
.coinkk-liquidation-page {
    margin: 0 auto;
    padding: 20px 85px;
}

/* Liquidation Page Header */
.liquidation-page-header {
    background: transparent;
    border-radius: 0;
    padding: 20px 0;
    margin-bottom: 20px;
    text-align: left;
    box-shadow: none;
    border: none;
}

.liquidation-page-header h1 {
    color: #212529;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

/* Top Statistics Section */
.liquidation-top-stats {
    margin-bottom: 30px;
}

.liquidation-stats-row {
    gap: 20px;
    align-items: stretch;
}

/* Total Liquidations Container */
.total-liquidations-container {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    height: 100%;
}

.total-liquidations-header {
    margin-bottom: 20px;
}

.total-liquidations-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.liquidations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.liquidation-mini-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.liquidation-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mini Card Rows - Three Row Layout */
.mini-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mini-card-row:last-child {
    margin-bottom: 0;
}

/* Labels and Values */
.mini-card-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-card-total {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
}

.mini-card-sublabel {
    font-size: 11px;
    color: #8b949e;
    font-weight: 500;
}

.mini-card-value {
    font-size: 14px;
    font-weight: 600;
}

.mini-card-value.long {
    color: #22c55e;
}

.mini-card-value.short {
    color: #ef4444;
}

/* Legacy styles for backward compatibility */
.mini-card-change {
    font-size: 12px;
    font-weight: 500;
}

.mini-card-change.positive {
    color: #22c55e;
}

.mini-card-change.negative {
    color: #ef4444;
}

.liquidations-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    font-size: 13px;
    line-height: 1.5;
    color: #495057;
    border: 1px solid #e9ecef;
}

.liquidation-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.liquidation-stat-card .stat-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.liquidation-stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
}

.liquidation-stat-card .stat-change {
    font-size: 14px;
    font-weight: 500;
}

.liquidation-stat-card .stat-change.positive {
    color: #22c55e;
}

.liquidation-stat-card .stat-change.negative {
    color: #ef4444;
}

.liquidation-stat-card .stat-period {
    font-size: 12px;
    color: #9ca3af;
}

/* Liquidation Heatmap Card */
.liquidation-heatmap-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    height: 100%;
    min-height: 280px;
}

.liquidation-heatmap-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.heatmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.heatmap-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.heatmap-controls {
    display: flex;
    gap: 4px;
}

/* Remove extra padding from ECharts tooltip wrapper inside liquidation heatmap */
#liquidationHeatmap > div[style*="pointer-events: none"] {
    padding: 0 !important;
}

.heatmap-btn {
    padding: 4px 8px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    font-weight: 500;
}

.heatmap-btn:hover,
.heatmap-btn.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

/* Tables Row Layout */
.liquidation-tables-row {
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
}

/* Full Width Sections */
.liquidation-chart-section,
.token-liquidations-section {
    margin-bottom: 30px;
}

.liquidation-chart-section .liquidation-chart-card,
.token-liquidations-section .token-liquidations-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

/* Exchange Liquidations Card */
.exchange-liquidations-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.exchange-liquidations-card .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.exchange-liquidations-card .table-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.exchange-liquidations-card .table-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.timeframe-tabs {
    display: flex;
    gap: 4px;
}

.timeframe-tab {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.timeframe-tab:hover,
.timeframe-tab.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.sort-select {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: white;
    color: #6c757d;
    font-size: 12px;
    cursor: pointer;
}

/* Exchange Liquidations Table */
.exchange-liquidations-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.exchange-liquidations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

.exchange-liquidations-table th {
    background: #fafbfc;
    color: #6c757d;
    font-weight: 500;
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    white-space: nowrap;
}

.exchange-liquidations-table th:first-child {
    padding-left: 15px;
    width: 50px;
}

.exchange-liquidations-table th:last-child {
    padding-right: 15px;
    text-align: center;
}

.exchange-liquidations-table td {
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
    font-size: 13px;
}

.exchange-liquidations-table td:first-child {
    padding-left: 15px;
}

.exchange-liquidations-table td:last-child {
    padding-right: 15px;
    text-align: center;
}

.exchange-liquidations-table tr:hover {
    background: #fafbfc;
}

/* Long/Short Header */
.long-short-header {
    min-width: 140px;
}

.long-short-header-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.long-header {
    color: #22c55e;
    font-weight: 600;
    font-size: 11px;
}

.short-header {
    color: #ef4444;
    font-weight: 600;
    font-size: 11px;
}

/* Long/Short Progress Bar */
.long-short-cell {
    min-width: 140px;
}

.long-short-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 10px;
}

.long-label {
    color: #22c55e;
    font-weight: 500;
}

.short-label {
    color: #ef4444;
    font-weight: 500;
}

.long-short-progress-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f4f6;
}

.long-progress {
    background: linear-gradient(90deg, #34d399 0%, #16a34a 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.short-progress {
    background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
    height: 100%;
    transition: width 0.3s ease;
}

/* Legacy Long/Short Bar (for compatibility) */
.long-short-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.long-bar {
    background: #22c55e;
    height: 100%;
}

.short-bar {
    background: #ef4444;
    height: 100%;
}

.ratio-text {
    font-size: 10px;
    color: #6c757d;
    text-align: center;
}

.view-btn {
    background: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: #3367d6;
    transform: translateY(-1px);
}

/* Real-time Liquidations Card */
.realtime-liquidations-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.realtime-liquidations-card .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.live-text {
    font-size: 12px;
    color: #22c55e;
    font-weight: 500;
}

/* Real-time Table */
.realtime-liquidations-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.realtime-liquidations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 600px;
    background: white;
}

.realtime-liquidations-table th {
    background: #fafbfc;
    color: #6c757d;
    font-weight: 500;
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.realtime-liquidations-table td {
    padding: 8px;
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
    font-size: 11px;
}

.realtime-liquidations-table tr:hover {
    background: #fafbfc;
}

.side-cell.long {
    color: #22c55e;
    font-weight: 500;
}

.side-cell.short {
    color: #ef4444;
    font-weight: 500;
}

.new-row {
    animation: slideIn 1s ease-out;
    background: #e8f5e8 !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Liquidation Chart Card */
.liquidation-chart-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.chart-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.chart-tabs {
    display: flex;
    gap: 4px;
}

.chart-tab {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.chart-tab:hover,
.chart-tab.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.chart-timeframes {
    display: flex;
    gap: 4px;
}

.chart-timeframe {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.chart-timeframe:hover,
.chart-timeframe.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

/* Token Liquidations Card */
.token-liquidations-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.token-liquidations-card .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

.token-liquidations-card .table-title {
    margin: 0;
    flex-shrink: 0;
}

.token-liquidations-card .table-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.period-tabs {
    display: flex;
    gap: 4px;
}

.period-tab {
    padding: 6px 12px;
    border: 1px solid #e9ecef;
    background: white;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 500;
}

.period-tab:hover,
.period-tab.active {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

/* Token Liquidations Table */
.token-liquidations-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.token-liquidations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 500px;
    background: white;
}

.token-liquidations-table th {
    background: #fafbfc;
    color: #6c757d;
    font-weight: 500;
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.token-liquidations-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #f8f9fa;
    vertical-align: middle;
    font-size: 11px;
}

.token-liquidations-table tr:hover {
    background: #fafbfc;
}

/* Token Liquidations Table Headers */
.liq-header.long {
    color: #6c757d;
    font-weight: 600;
    background: #fafbfc;
    border: 1px solid #e9ecef;
}

.liq-header.short {
    color: #6c757d;
    font-weight: 600;
    background: #fafbfc;
    border: 1px solid #e9ecef;
}

/* Token Liquidations Table Cells */
.liq-cell {
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    color: #fff;
}

/* Long Liquidation Cells - Green Gradients */
.liq-cell.long-liq.gain-low {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
    color: #15803d;
    border-left: 3px solid #22c55e;
}

.liq-cell.long-liq.gain-medium {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
    color: #166534;
    border-left: 3px solid #16a34a;
}

.liq-cell.long-liq.gain-high {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 50%, #4ade80 100%);
    color: #14532d;
    border-left: 3px solid #15803d;
}

/* Short Liquidation Cells - Red Gradients */
.liq-cell.short-liq.loss-low {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 50%, #fca5a5 100%);
    color: #dc2626;
    border-left: 3px solid #ef4444;
}

.liq-cell.short-liq.loss-medium {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 50%, #f87171 100%);
    color: #b91c1c;
    border-left: 3px solid #dc2626;
}

.liq-cell.short-liq.loss-high {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 50%, #ef4444 100%);
    color: #991b1b;
    border-left: 3px solid #b91c1c;
}

.liq-cell.short-liq.loss-extreme {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    color: #7f1d1d;
    border-left: 3px solid #991b1b;
}

/* Legacy Token Liquidations Table Color Coding */
.liquidation-cell.red {
    color: #ef4444;
    font-weight: 600;
}

.long-liq-cell.green {
    color: #22c55e;
    font-weight: 600;
}

.short-liq-cell.red {
    color: #ef4444;
    font-weight: 600;
}

.volume-cell {
    color: #6c757d;
    font-weight: 500;
}

/* Exchange Icons */
.exchange-icon.okx {
    background: #000000;
}

.exchange-icon.bybit {
    background: #f7931a;
}

.exchange-icon.bitmex {
    background: #e31e24;
}

.exchange-icon.deribit {
    background: #1e88e5;
}

.exchange-icon.huobi {
    background: #2ebd85;
}

.exchange-icon.kraken {
    background: #5741d9;
}

.exchange-icon.ftx {
    background: #02d4aa;
}

/* FAQ Section */
.liquidation-faq-section {
    margin-top: 40px;
}

/* Responsive Design for Liquidation Page */
@media (max-width: 768px) {
    .coinkk-liquidation-page {
        padding: 15px;
    }
    
    .liquidation-page-header {
        padding: 15px 0;
    }
    
    .liquidation-page-header h1 {
        font-size: 20px;
    }
    
    .liquidation-stats-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .total-liquidations-container {
        padding: 15px;
    }
    
    .liquidations-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .liquidation-mini-card {
        padding: 12px;
    }
    
    .mini-card-label {
        font-size: 11px;
    }
    
    .mini-card-total {
        font-size: 14px;
    }
    
    .mini-card-sublabel {
        font-size: 10px;
    }
    
    .mini-card-value {
        font-size: 12px;
    }
    
    .liquidations-summary {
        padding: 12px;
        font-size: 12px;
    }
    
    .liquidation-tables-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .exchange-liquidations-card,
    .realtime-liquidations-card,
    .liquidation-chart-card,
    .token-liquidations-card {
        padding: 15px;
    }
    
    .exchange-liquidations-card .table-header,
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .exchange-liquidations-card .table-controls,
    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
    
    .timeframe-tabs,
    .chart-tabs,
    .chart-timeframes,
    .period-tabs {
        flex-wrap: wrap;
    }
    
    .heatmap-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .exchange-liquidations-table,
    .realtime-liquidations-table,
    .token-liquidations-table {
        font-size: 11px;
    }
    
     .liq-header.long,
     .liq-header.short {
         font-size: 10px;
         padding: 6px 4px;
     }

     .liq-cell {
         font-size: 10px;
         padding: 6px 4px;
     }

     .exchange-liquidations-table th,
     .exchange-liquidations-table td,
     .realtime-liquidations-table th,
     .realtime-liquidations-table td,
     .token-liquidations-table th,
     .token-liquidations-table td {
         padding: 8px 6px;
     }
    
        .long-short-header {
            min-width: 120px;
        }

        .long-header, .short-header {
            font-size: 10px;
        }

        .long-short-cell {
            min-width: 120px;
        }

        .long-short-labels {
            font-size: 9px;
            margin-bottom: 4px;
        }

        .long-short-progress-bar {
            height: 6px;
        }

        .long-short-bar {
            width: 50px;
            height: 6px;
        }

        .ratio-text {
            font-size: 9px;
        }
    
    .view-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .liquidation-stat-card .stat-value {
        font-size: 20px;
    }
    
    .heatmap-title,
    .chart-title {
        font-size: 14px;
    }
    
    .exchange-liquidations-table,
    .realtime-liquidations-table,
    .token-liquidations-table {
        font-size: 10px;
        min-width: 600px;
    }
    
     .liq-header.long,
     .liq-header.short {
         font-size: 9px;
         padding: 4px 2px;
     }

     .liq-cell {
         font-size: 9px;
         padding: 4px 2px;
     }

     .exchange-liquidations-table th,
     .exchange-liquidations-table td,
     .realtime-liquidations-table th,
     .realtime-liquidations-table td,
     .token-liquidations-table th,
     .token-liquidations-table td {
         padding: 6px 4px;
     }
    
    .timeframe-tab,
    .chart-tab,
    .chart-timeframe,
    .period-tab,
    .heatmap-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
        .long-short-header {
            min-width: 100px;
        }

        .long-header, .short-header {
            font-size: 9px;
        }

        .long-short-cell {
            min-width: 100px;
        }

        .long-short-labels {
            font-size: 8px;
            margin-bottom: 3px;
        }

        .long-short-progress-bar {
            height: 5px;
        }

        .long-short-bar {
            width: 40px;
            height: 5px;
        }

        .view-btn {
            padding: 3px 6px;
            font-size: 9px;
        }
}

/* Long/Short Ratio Donut Chart Custom Legend */
.donut-chart-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.legend-item:hover {
    background-color: #f8f9fa;
    transform: translateX(4px);
}

.legend-indicator {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-indicator.long {
    background-color: #5ebd8b;
}

.legend-indicator.short {
    background-color: #ee9090;
}

.legend-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 400;
    line-height: 1.2;
}

.legend-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
    line-height: 1.2;
}

/* More Posts List (Single Post Page) */
.more-posts-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.more-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.more-post-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wp--preset--spacing--30, 20px) 0;
    border-bottom: 1px solid var(--wp--preset--color--accent-6, #6c757d);
    gap: 20px;
}

.more-post-item:last-child {
    border-bottom: none;
}

.more-post-title {
    flex: 1;
    margin: 0;
    font-size: var(--wp--preset--font-size--large, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
}

.more-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.more-post-title a:hover {
    color: var(--wp--preset--color--accent-1, #4285F4);
    text-decoration: none;
}

.more-post-date {
    flex-shrink: 0;
    text-align: right;
    font-size: 14px;
    color: #6c757d;
}

.more-post-date a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.more-post-date a:hover {
    color: var(--wp--preset--color--accent-1, #4285F4);
    text-decoration: none;
}

/* Responsive for more posts */
@media (max-width: 768px) {
    .more-post-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .more-post-title {
        font-size: 1.125rem;
    }
    
    .more-post-date {
        text-align: left;
        font-size: 13px;
    }
}

/* Post Meta Info (Single Post Page - Written by section) */
.post-meta-info-wrapper {
    margin-bottom: var(--wp--preset--spacing--60, 60px);
}

.post-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2em;
    color: var(--wp--preset--color--accent-4, #FBBC04);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.5;
}

.post-meta-info .meta-written-by,
.post-meta-info .meta-in {
    color: inherit;
    font-weight: 400;
}

.post-meta-info .meta-author-link,
.post-meta-info .meta-category-link {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.post-meta-info .meta-author-link:hover,
.post-meta-info .meta-category-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.post-meta-info .meta-category-link {
    font-weight: 300;
}

/* ========================================
   Single Post Layout (文章详情页)
   ======================================== */

/* 主容器 */
.single-post-layout {
    padding: 0 85px;
}

.single-post-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 左侧：文章内容区 */
.single-post-left {
    width: 100%;
}

/* 文章标题（不在白色盒子内） */
.single-post-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #1a1a1a;
}

/* 特色图片容器（不在白色盒子内） */
.single-featured-image-wrapper {
    position: relative;
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 400px;
}

/* 文章内容白色盒子（只包裹正文内容） */
.single-post-content-box {
    background: #f7f9fc;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
}

.single-featured-image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
    position: relative;
    /* 移除直接的 background 样式，改用伪元素 */
}

/* 使用伪元素来承载背景图片，这样可以单独放大背景 */
.single-featured-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: inherit; /* 继承父元素的 background-image */
    transition: transform 0.5s ease;
    z-index: 0;
}

/* 悬停时放大背景 */
.single-featured-image-wrapper:hover .single-featured-image::before {
    transform: scale(1.1);
}

/* Featured Image as Background - 通用样式 */
.featured-image-bg {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 保留旧的 img 标签样式作为备用 */
.single-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* 图片底部的元数据叠加层 */
.single-post-meta-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 20px;
    z-index: 1; /* 确保在伪元素上方 */
}

.single-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.single-meta-info .meta-category {
    font-weight: 600;
}

.single-meta-info .meta-separator {
    opacity: 0.7;
}

.single-meta-info .meta-author-date {
    opacity: 0.9;
}

/* 文章正文 */
.single-post-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.single-post-body p {
    margin-bottom: 20px;
}

.single-post-body h2,
.single-post-body h3,
.single-post-body h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

/* 右侧：精选文章侧边栏 */
.single-post-right {
    width: 100%;
}

.single-sidebar-box {
    background: #f7f9fc;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 20px;
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.sidebar-articles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 前 4 篇：文字标题样式 */
.sidebar-article-text-item {
    padding: 15px 0;
    border-bottom: 1px solid #e5e7eb;
}

.sidebar-article-text-item:last-of-type {
    border-bottom: none;
}

.sidebar-article-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.sidebar-article-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.sidebar-article-title a:hover {
    color: var(--wp--preset--color--accent-1, #4285F4);
    transform: scale(1.02);
    text-decoration: none;
}

/* 后 2 篇：带图片背景样式 */
.sidebar-article-image-item {
    position: relative;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 15px;
    cursor: pointer;
}

.sidebar-article-image-item:first-of-type {
    margin-top: 20px;
}

.sidebar-article-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.sidebar-article-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.sidebar-article-link:hover .sidebar-article-bg {
    transform: scale(1.1);
}

/* 悬停时显示的叠加信息 */
.sidebar-article-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.sidebar-article-link:hover .sidebar-article-overlay {
    opacity: 1;
    transform: translateY(0);
}

.sidebar-article-overlay-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sidebar-article-overlay-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

.overlay-separator {
    opacity: 0.7;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .single-post-container {
        grid-template-columns: 1fr 300px;
        gap: 20px;
    }
    
    .single-post-content-box {
        padding: 30px;
    }
    
    .single-sidebar-box {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .single-post-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .single-post-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .single-featured-image-wrapper {
        min-height: 250px; /* 移动端减小高度 */
    }
    
    .single-featured-image,
    .featured-image-bg {
        min-height: 250px; /* 移动端减小高度 */
    }
    
    .single-post-content-box {
        padding: 20px;
        margin-top: 20px;
    }
    
    .single-sidebar-box {
        position: static;
    }
    
    .sidebar-article-image-item {
        height: 180px;
    }
}

/* ========================================
   WordPress Comments Section (评论区域)
   ======================================== */

/* 评论区域主容器 */
.wp-block-comments,
.wp-block-comments-query-loop {
    max-width: 1200px;
    margin: 60px auto !important;
    padding: 0;
}

/* 评论区域白色背景盒子 */
.single-post-layout .wp-block-comments {
    background: #f7f9fc;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 评论标题 */
.wp-block-comments > .wp-block-heading {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

/* 评论数量标题 */
.wp-block-comments .wp-block-comments-title {
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 25px;
}

/* 单条评论容器 */
.wp-block-comment-template .wp-block-group {
    padding: 25px 0;
    border-bottom: 1px solid #e5e7eb;
}

.wp-block-comment-template .wp-block-group:last-child {
    border-bottom: none;
}

/* 评论作者头像 */
.wp-block-avatar img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* 评论内容区域 */
.wp-block-comment-template .wp-block-group > .wp-block-group {
    flex: 1;
}

/* 评论作者名称 */
.wp-block-comment-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.wp-block-comment-author-name a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-comment-author-name a:hover {
    color: var(--wp--preset--color--accent-1, #4285F4);
}

/* 评论日期 */
.wp-block-comment-date {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.wp-block-comment-date a {
    color: #6b7280;
    text-decoration: none;
}

/* 评论内容 */
.wp-block-comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wp-block-comment-content p {
    margin-bottom: 10px;
}

/* 评论操作按钮（回复、编辑） */
.wp-block-comment-edit-link a,
.wp-block-comment-reply-link a {
    font-size: 13px;
    color: var(--wp--preset--color--accent-1, #4285F4);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wp-block-comment-edit-link a:hover,
.wp-block-comment-reply-link a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* 评论分页 */
.wp-block-comments-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.wp-block-comments-pagination a {
    color: var(--wp--preset--color--accent-1, #4285F4);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wp-block-comments-pagination a:hover {
    opacity: 0.8;
}

/* 评论表单区域 */
.wp-block-post-comments-form {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #e5e7eb;
}

/* 评论表单标题 */
.comment-reply-title,
.wp-block-post-comments-form h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
}

/* 评论表单字段 */
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-1, #4285F4);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.comment-form-comment textarea {
    min-height: 120px;
    resize: vertical;
}

/* 评论表单各字段容器 */
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 20px;
}

/* 评论表单提交按钮 */
.form-submit {
    margin-top: 20px;
}

.form-submit input[type="submit"],
.submit {
    background: var(--wp--preset--color--accent-1, #4285F4);
    color: #ffffff;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-submit input[type="submit"]:hover,
.submit:hover {
    background: #3367d6;
    box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
}

/* 必填字段标记 */
.required {
    color: #ef4444;
}

/* 评论表单说明文本 */
.comment-notes,
.comment-form-cookies-consent {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
}

.comment-form-cookies-consent label {
    display: inline;
    font-weight: 400;
    margin-left: 8px;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .single-post-layout .wp-block-comments {
        padding: 25px 20px;
        border-radius: 12px;
    }
    
    .wp-block-comments > .wp-block-heading {
        font-size: 20px;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .wp-block-comment-template .wp-block-group {
        padding: 20px 0;
    }
    
    .wp-block-avatar img {
        width: 40px;
        height: 40px;
    }
    
    .comment-reply-title,
    .wp-block-post-comments-form h3 {
        font-size: 18px;
    }
    
    .form-submit input[type="submit"] {
        width: 100%;
    }
}

/* ========================================
   Post Navigation (上一页/下一页导航)
   ======================================== */

/* 导航外层容器 */
.post-navigation-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0;
}

/* 导航白色盒子 */
.single-post-layout .post-navigation-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

/* 隐藏空的导航容器 */
.post-navigation-wrapper:empty,
.post-navigation-box:empty {
    display: none;
}

/* 单个导航链接容器 */
.post-navigation-link-previous,
.post-navigation-link-next,
.nav-link-previous,
.nav-link-next {
    flex: 1;
    max-width: 50%;
}

/* 上一页左对齐 */
.post-navigation-link-previous,
.nav-link-previous {
    text-align: left;
}

/* 下一页右对齐 */
.post-navigation-link-next,
.nav-link-next {
    text-align: right;
}

/* 导航链接样式 */
.wp-block-post-navigation-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    background: #f9fafb;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.wp-block-post-navigation-link a:hover {
    background: var(--wp--preset--color--accent-1, #4285F4);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

/* 箭头样式 */
.wp-block-post-navigation-link__arrow-previous,
.wp-block-post-navigation-link__arrow-next {
    font-size: 18px;
    font-weight: 600;
}

/* 标题样式 */
.wp-block-post-navigation-link__title {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 上一页链接（箭头在左侧） */
.nav-link-previous .wp-block-post-navigation-link a,
.post-navigation-link-previous .wp-block-post-navigation-link a {
    flex-direction: row;
}

/* 下一页链接（箭头在右侧） */
.nav-link-next .wp-block-post-navigation-link a,
.post-navigation-link-next .wp-block-post-navigation-link a {
    flex-direction: row-reverse;
}

/* 如果只有一个导航链接，让它居中 */
.post-navigation-box:has(.wp-block-post-navigation-link:only-child) {
    justify-content: center;
}

.post-navigation-box .wp-block-post-navigation-link:only-child {
    max-width: 400px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .single-post-layout .post-navigation-box {
        padding: 20px;
        flex-direction: column;
        gap: 15px;
    }
    
    .post-navigation-link-previous,
    .post-navigation-link-next,
    .nav-link-previous,
    .nav-link-next {
        max-width: 100%;
        text-align: center;
    }
    
    .wp-block-post-navigation-link a {
        width: 100%;
        justify-content: center;
    }
    
    .wp-block-post-navigation-link__title {
        max-width: 200px;
    }
}

/* ========================================
   Contract Data（首页）
   ======================================== */

/* Contract Data 容器 */
.contract-data-wrapper {
    width: 100%;
}

.contract-data-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.contract-data-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.contract-data-card .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.contract-data-card .blue-dot {
    width: 10px;
    height: 10px;
    background: #4285F4;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 数据行 */
.contract-data-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contract-data-content .data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contract-data-content .data-row:hover {
    background: #eef1f6;
    transform: translateX(3px);
}

.contract-data-content .data-label {
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    flex: 0 0 auto;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contract-data-content .data-value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
    text-align: right;
    margin: 0 8px;
}

.contract-data-content .data-change {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    flex: 0 0 auto;
    min-width: 70px;
    text-align: center;
}

.contract-data-content .data-change.positive {
    color: #34A853;
    background: rgba(52, 168, 83, 0.1);
}

.contract-data-content .data-change.negative {
    color: #EA4335;
    background: rgba(234, 67, 53, 0.1);
}

/* Loading 状态 */
.contract-data-loading .data-row {
    animation: shimmer 1.5s ease-in-out infinite;
}

.contract-data-loading .data-label,
.contract-data-loading .data-value,
.contract-data-loading .data-change {
    color: #cbd5e0;
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .contract-data-card {
        padding: 15px;
    }
    
    .contract-data-card .card-header {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
    
    .contract-data-card .card-title {
        font-size: 16px;
    }
    
    .contract-data-content {
        gap: 12px;
    }
    
    .contract-data-content .data-row {
        padding: 10px;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .contract-data-content .data-label {
        font-size: 12px;
        max-width: 100px;
    }
    
    .contract-data-content .data-value {
        font-size: 14px;
        flex: 0 0 auto;
        margin: 0 5px;
    }
    
    .contract-data-content .data-change {
        font-size: 12px;
        padding: 3px 6px;
        min-width: 60px;
    }
}

/* ========================================
   Loading Spinner（加载动画）
   ======================================== */

/* 加载动画容器 */
.loading-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

/* 旋转的圆圈加载动画 */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4285F4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 大尺寸加载动画 */
.loading-spinner-lg {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

/* 超大尺寸加载动画 */
.loading-spinner-xl {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* 旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 脉冲点动画（三个点） */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    background: #4285F4;
    border-radius: 50%;
    animation: pulse-dot 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse-dot {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 加载文本样式 */
.loading-text {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

/* 居中的加载容器 */
.loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 表格中的加载状态 */
.table-loading {
    text-align: center;
    padding: 30px 20px;
    color: #666;
}

.table-loading .loading-spinner {
    margin-bottom: 10px;
}

/* 响应式 */
@media (max-width: 768px) {
    .loading-spinner {
        width: 14px;
        height: 14px;
    }
    
    .loading-spinner-lg {
        width: 20px;
        height: 20px;
    }
    
    .loading-spinner-xl {
        width: 32px;
        height: 32px;
    }
    
    .loading-text {
        font-size: 13px;
    }
}

/* ==================== Open Interest Page - Demo Style ==================== */

.oi-table-section,
.oi-chart-section {
    margin-bottom: 20px;
}

.oi-table-card,
.chart-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.05);
    padding: 20px 24px;
}

.oi-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.oi-title-main {
    font-size: 18px;
    font-weight: 600;
    color: #1f2933;
}

.oi-subtext {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.oi-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oi-symbol-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: #f0f2f8;
    border-radius: 999px;
}

.oi-symbol-tab {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    color: #4b5563;
    transition: all .15s ease;
    border: none;
    background: transparent;
}

.oi-symbol-tab.active {
    background: #111827;
    color: #fff;
}

.oi-symbol-tab:hover:not(.active) {
    background: rgba(17, 24, 39, 0.1);
}

.oi-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f4ff;
    font-size: 11px;
    color: #6b7280;
}

.oi-table-wrapper {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #edf0f8;
    overflow-x: auto;
}

.btc-oi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.btc-oi-table thead {
    background: #f9fafc;
}

.btc-oi-table th,
.btc-oi-table td {
    padding: 10px 12px;
    text-align: right;
    white-space: nowrap;
}

.btc-oi-table th:first-child,
.btc-oi-table td:first-child {
    text-align: left;
}

.btc-oi-table th {
    font-weight: 500;
    color: #9ca3af;
}

.btc-oi-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.btc-oi-table tbody tr:nth-child(even) {
    background: #fbfcff;
}

.btc-oi-table tbody tr:hover {
    background: #eef3ff;
}

.rank-col {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rank-badge {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #4f46e5;
}

.exchange-name {
    font-size: 12px;
    font-weight: 500;
}

.tag-all {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 500;
    margin-left: 6px;
}

.oi-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.oi-chip-group {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.oi-legend-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #6b7280;
}

.oi-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oi-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.oi-dot-oi {
    background: #3b82f6;
}

.oi-dot-price {
    background: #f59e0b;
}

.oi-time-select {
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}

.oi-time-select:hover {
    border-color: #4285f4;
}

/* 响应式 */
@media (max-width: 768px) {
    .oi-header-line,
    .oi-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .btc-oi-table th,
    .btc-oi-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    
    .oi-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== Long/Short Ratio Table - Demo Style ==================== */

.ls-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
}

.ls-top {
    font-weight: 600;
    margin-bottom: 2px;
}

.ls-bottom {
    font-size: 10px;
}

.ls-bottom.long {
    color: #16a34a;
}

.ls-bottom.short {
    color: #dc2626;
}

/* 热力图背景 */
.heat-long-light {
    background: linear-gradient(to right, rgba(34,197,94,0.06), transparent);
}

.heat-long-medium {
    background: linear-gradient(to right, rgba(34,197,94,0.12), transparent);
}

.heat-long-strong {
    background: linear-gradient(to right, rgba(34,197,94,0.2), transparent);
}

.heat-short-light {
    background: linear-gradient(to right, rgba(248,113,113,0.06), transparent);
}

.heat-short-medium {
    background: linear-gradient(to right, rgba(248,113,113,0.12), transparent);
}

.heat-short-strong {
    background: linear-gradient(to right, rgba(248,113,113,0.2), transparent);
}

.coin-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fef3c7, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.coin-symbol {
    font-weight: 600;
    color: #111827;
}

.price-cell {
    font-weight: 500;
}

.pct-up {
    color: #16a34a;
}

.pct-down {
    color: #dc2626;
}

.pct-flat {
    color: #6b7280;
}

/* Demo 筛选下拉样式 */
.filter-select {
    position: relative;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 6px 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f9fafb;
    cursor: pointer;
    user-select: none;
}

.label-text {
    color: #6b7280;
}

.filter-arrow {
    border: solid #9ca3af;
    border-width: 0 1px 1px 0;
    padding: 3px;
    transform: rotate(45deg);
}

.filter-menu {
    position: absolute;
    top: 110%;
    right: 0;
    min-width: 120px;
    background: #fff;
    border-radius: 12px;
    padding: 6px 0;
    box-shadow: 0 16px 40px rgba(15,23,42,0.12);
    border: 1px solid #e5e7eb;
    display: none;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
}

.filter-option {
    padding: 6px 14px;
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
    cursor: pointer;
}

.filter-option:hover {
    background: #f3f4ff;
    color: #2563eb;
}

.filter-option.active {
    font-weight: 600;
    color: #2563eb;
    background: #e5edff;
}

/* Demo 分页箭头样式 */
.page-arrow span {
    border: solid #9ca3af;
    border-width: 0 1px 1px 0;
    padding: 3px;
    display: inline-block;
}

.page-arrow.prev span {
    transform: rotate(135deg);
}

.page-arrow.next span {
    transform: rotate(-45deg);
}

.page-btn.dot {
    cursor: default;
    border: none;
    background: transparent;
}

/* Demo 表格行背景颜色 */
.token-liquidations-table tbody tr:nth-child(odd) {
    background: #fafbff;
}

.token-liquidations-table tbody tr:nth-child(even) {
    background: #fff;
}

.token-liquidations-table tbody tr:hover {
    background: #f1f5ff;
}

/* Token Liquidations - Demo 样式 */
.currency-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin-icon img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
}

.liq-long, .liq-short {
    font-weight: 500;
    text-align: right;
    display: inline-block;
}

.liq-long {
    color: #0d9f6e;
}

.liq-short {
    color: #f05252;
}

.page-label {
    margin-left: 8px;
    color: #9ca3af;
    font-size: 11px;
}

/* ==================== Crypto Detail Page Styles ==================== */

.coinkk-crypto-detail-page {
    background: #f3f4ff;
    padding: 24px 85px;
    margin: 0 auto;
}

/* Layout: Left (main content) + Right (sidebar) */
.crypto-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
}

.crypto-detail-left {
    min-width: 0;
}

.crypto-detail-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .08);
}

.crypto-detail-top-card {
    padding: 22px 26px 20px;
    margin-bottom: 22px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
}

.coin-logo {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#f97316,#fb923c);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-right: 12px;
}

.coin-title {
    font-weight: 700;
    font-size: 18px;
}

.coin-sub {
    font-size: 13px;
    color: #9ca3af;
}

.currency-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 13px;
}

.currency-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
}

.price-main {
    margin-top: 8px;
}

.price-value {
    font-size: 34px;
    font-weight: 700;
}

.price-change {
    font-size: 14px;
    margin-top: 3px;
}

.price-change.up {
    color: #16a34a;
}

.price-change.down {
    color: #dc2626;
}

.last-updated {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

/* Chart area (ECharts) */
.chart-wrap {
    margin-top: 16px;
    border-radius: 22px;
    background: #f9fafb;
    padding: 14px;
    height: 260px;
    overflow: hidden;
    position: relative;
}

#cryptoPriceChart {
    width: 100%;
    height: 100%;
}

.chart-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px;
}

.chart-bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-tabs {
    display: inline-flex;
    gap: 6px;
    border-radius: 999px;
    background: #eef0ff;
    padding: 4px;
}

.time-btn {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.time-btn.active {
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(148,163,184,.7);
    color: #111827;
    font-weight: 600;
}

.dl-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    background: #fff;
}

/* Main tabs */
.main-tabs {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.main-tab-btn {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    cursor: pointer;
    background: #ffffff;
    color: #4b5563;
    box-shadow: 0 8px 20px rgba(148,163,184,.3);
}

.main-tab-btn.active {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

.tab-symbol {
    font-weight: 600;
}

.section-title-big {
    margin-top: 22px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 20px;
}

.section-title-big .info {
    font-size: 13px;
    color: #9ca3af;
    margin-left: 6px;
}

/* Two column layout */
.two-cols {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    gap: 18px;
    margin-top: 8px;
}

.sub-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15,23,42,.05);
    padding: 18px 22px 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    row-gap: 10px;
    font-size: 13px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-row.col-layout {
    flex-direction: column;
    align-items: flex-start;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #9ca3af;
    font-size: 12px;
}

.info-value {
    font-weight: 500;
}

.info-subtext {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    font-size: 11px;
}

.verified-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #2563eb;
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sub-title {
    font-weight: 600;
    font-size: 18px;
}

.rating {
    font-size: 13px;
    color: #f59e0b;
    margin-top: 2px;
}

.primary-btn {
    border-radius: 999px;
    padding: 8px 16px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.about-text {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
}

/* ==================== Calculator Card ==================== */
.calculator-card {
    padding: 24px;
}

.calculator-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.calc-input-group {
    position: relative;
    margin-bottom: 16px;
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.calc-icon-wrapper {
    flex-shrink: 0;
}

.calc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.calc-icon.blue-circle {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.calc-icon.orange-circle {
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.calc-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    min-width: 40px;
}

.calc-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    width: 100%;
    outline: none;
    text-align: right;
}

.calc-input::placeholder {
    color: #d1d5db;
}

.buy-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.buy-btn:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
}

/* ==================== Rankings Card ==================== */
.rankings-card {
    padding: 24px 20px;
}

.rankings-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
}

.rankings-header {
    display: grid;
    grid-template-columns: 30px 1fr 80px 90px;
    gap: 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 12px;
}

.rankings-col-header {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
}

.rankings-col-header:nth-child(3),
.rankings-col-header:nth-child(4) {
    text-align: right;
}

.rankings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 450px;
    overflow-y: auto;
}

.rankings-item {
    display: grid;
    grid-template-columns: 30px 1fr 80px 90px;
    gap: 8px;
    background: #fff;
    border-radius: 12px;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.rankings-item:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.rankings-rank {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

.rankings-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rankings-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.rankings-coin-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.rankings-coin-symbol {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 4px;
}

.rankings-price {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

.rankings-change {
    font-size: 12px;
    font-weight: 500;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.rankings-change.up {
    color: #16a34a;
}

.rankings-change.down {
    color: #dc2626;
}

.rankings-change-icon {
    font-size: 10px;
}

.rankings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 10px;
}

.rankings-loading .loading-text {
    font-size: 13px;
    color: #9ca3af;
}

/* ==================== Learn More Articles Section ==================== */
.learn-more-section {
    margin-top: 40px;
    padding: 0;
}

.learn-more-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.articles-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
}

.articles-loading .loading-text {
    font-size: 14px;
    color: #9ca3af;
}

.article-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.article-card:hover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    transform: translateY(-4px);
}

.article-image-wrapper {
    width: 100%;
    height: 180px;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 48px;
}

.article-content {
    padding: 20px;
}

.article-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-excerpt {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
}

.article-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-source {
    font-weight: 500;
    color: #6b7280;
}

.discover-more-btn {
    width: 100%;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}

.discover-more-btn:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.4);
    transform: translateY(-2px);
}

/* ==================== Exchange Detail Page Styles ==================== */
.coinkk-exchange-detail-page {
    padding: 32px 85px;
    margin: 0 auto;
}

.exchange-detail-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.exchange-tab {
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 13px;
    padding: 10px 24px;
    border-radius: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
}

.exchange-tab.active {
    color: #2563eb;
    background: #dbeafe;  /* 淡蓝色背景 */
}

.exchange-section-title {
    font-size: 22px;
    margin: 0 0 16px;
    color: #0f172a;
}

.exchange-tab-panels {
    margin-top: 8px;
}

.exchange-tab-panel {
    display: none;
}

.exchange-tab-panel.active {
    display: block;
}

.exchange-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.exchange-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
}

.exchange-card h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #0f172a;
}

.exchange-description {
    color: #475569;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 16px;
}

.exchange-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: #475569;
    align-items: center;
}

.exchange-info-row span:last-child {
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

.exchange-social-dots {
    display: flex;
    gap: 8px;
}

.exchange-social-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.exchange-social-dot.twitter {
    background: #1d9bf0;
}

.exchange-social-dot.chat {
    background: #22c55e;
}

.exchange-social-dot.reddit {
    background: #f97316;
}

.exchange-cta-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.exchange-cta-link:hover {
    text-decoration: underline;
}

.exchange-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.exchange-stat-item {
    flex: 1 1 200px;
}

.exchange-stat-item .stat-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

.exchange-stat-item .stat-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
    color: #0f172a;
    display: block;
}

.exchange-metrics-title {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 20px;
    color: #0f172a;
}

.exchange-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.exchange-chart-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
}

.exchange-chart-card h4 {
    margin: 0 0 12px;
    font-size: 16px;
    color: #0f172a;
}

.exchange-chart {
    width: 100%;
    height: 260px;
}

.exchange-area-chart {
    height: 400px;  /* 增加高度以适应底部 dataZoom 预览滑块 */
}

.exchange-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.exchange-chart-switch {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #94a3b8;
}

.exchange-chart-switch button {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.exchange-chart-switch button.active {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.exchange-chart-switch button:hover {
    background: rgba(37, 99, 235, 0.05);
}

.exchange-panel-card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
    margin-bottom: 24px;
}

.exchange-panel-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #0f172a;
}

.exchange-panel-text {
    color: #475569;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 16px;
}

.exchange-panel-text:last-child {
    margin-bottom: 0;
}

.exchange-panel-list {
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    padding-left: 18px;
    margin: 0;
}

.exchange-stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.exchange-stat-box {
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px;
}

.exchange-stat-box .stat-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

.exchange-stat-box .stat-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
    color: #0f172a;
    display: block;
}

/* Responsive for crypto detail */
@media (max-width: 1200px) {
    .crypto-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .crypto-detail-right {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }
}

@media (max-width: 768px) {
    .coinkk-crypto-detail-page {
        padding: 12px;
    }
    
    .crypto-detail-right {
        grid-template-columns: minmax(0, 1fr);
    }
    
    /* Exchange detail responsive */
    .exchange-detail-tabs {
        flex-wrap: wrap;
    }
    
    .exchange-chart-switch {
        justify-content: flex-start;
    }
    
    .exchange-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .exchange-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .two-cols {
        grid-template-columns: minmax(0,1fr);
    }
    
    .main-tabs {
        flex-wrap: wrap;
    }
    
    .rankings-header {
        grid-template-columns: 25px 1fr 70px 80px;
        gap: 6px;
        padding: 6px 8px;
    }
    
    .rankings-item {
        grid-template-columns: 25px 1fr 70px 80px;
        gap: 6px;
        padding: 10px 8px;
    }
    
    .rankings-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .rankings-coin-name {
        font-size: 12px;
    }
    
    .rankings-price,
    .rankings-change {
        font-size: 11px;
    }
    
    /* Articles grid responsive */
    .articles-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    
    .learn-more-title {
        font-size: 20px;
    }
    
    .article-title {
        font-size: 15px;
    }
    
    .article-excerpt {
        font-size: 12px;
    }
    
    .discover-more-btn {
        font-size: 15px;
        padding: 14px 28px;
    }
}

/* ------------------------------------------
   Global mobile refinements
-------------------------------------------*/
@media (max-width: 768px) {
    .coinkk-homepage,
    .coinkk-blog-page-new,
    .coinkk-open-interest-page,
    .coinkk-funding-rate-page,
    .coinkk-long-short-page,
    .coinkk-crypto-list-page,
    .coinkk-exchange-page,
    .coinkk-exchange-detail-page {
        padding: 0 16px !important;
    }

    .coinkk-top-cards .wp-block-columns,
    .coinkk-main-content .wp-block-columns {
        flex-direction: column;
        gap: 16px;
    }

    .coinkk-top-cards .wp-block-column,
    .coinkk-main-content .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .coinkk-card,
    .contract-data-card,
    .crypto-index-card,
    .articles-card,
    .crypto-table-card,
    .function-icons-card {
        padding: 18px;
    }
    
    /* hero-news-card 需要保持 padding: 0 以便新闻轮播全屏显示 */
    .hero-news-card {
        padding: 0;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .function-icon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .function-icon em {
        font-size: 11px;
    }

    .articles-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .articles-card .articles-list {
        max-height: none;
    }

    .table-controls {
        width: 100%;
    }

    .table-subtabs .subtabs-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .subtab-btn {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    .subtabs-right {
        justify-content: flex-start;
        gap: 12px;
    }

    .filter-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .filter-buttons .filter-btn {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }

    .table-pagination {
        width: 100%;
        align-items: flex-start;
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .pagination-controls .page-btn {
        min-width: 42px;
    }

    .coinkk-blog-page-new,
    .coinkk-open-interest-page,
    .coinkk-funding-rate-page {
        padding-bottom: 32px;
    }

    .coinkk-open-interest-page .oi-header-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .coinkk-open-interest-page .oi-symbol-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .coinkk-open-interest-page .oi-symbol-tab {
        flex: 1 1 calc(33.33% - 8px);
        text-align: center;
    }

    .coinkk-funding-rate-page .fr-data-header,
    .coinkk-funding-rate-page .fr-tabs {
        gap: 10px;
        flex-wrap: wrap;
    }

    .coinkk-funding-rate-page .fr-tab-btn {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    .coinkk-long-short-page .lsr-top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .derivatives-table-container,
    .exchange-liquidations-table-container,
    .token-liquidations-table-container,
    .realtime-liquidations-table-container,
    .coinkk-open-interest-page .oi-table-wrapper,
    .coinkk-open-interest-page .btc-oi-table,
    .coinkk-funding-rate-page .fr-scroll-container,
    .coinkk-funding-rate-page .fr-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .derivatives-table,
    .exchange-liquidations-table,
    .realtime-liquidations-table,
    .token-liquidations-table,
    .coinkk-open-interest-page .btc-oi-table table,
    .coinkk-funding-rate-page .fr-unified-rate-table {
        min-width: 640px;
    }
}

@media (max-width: 560px) {
    .subtab-btn,
    .filter-buttons .filter-btn,
    .coinkk-open-interest-page .oi-symbol-tab,
    .coinkk-funding-rate-page .fr-tab-btn {
        flex: 1 1 100%;
    }

    .function-icon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 16px;
    }

    .coinkk-card,
    .crypto-table-card,
    .coinkk-funding-rate-page .fr-data-card,
    .coinkk-open-interest-page .oi-table-card {
        padding: 16px;
    }

    .table-title {
        font-size: 18px;
    }

    .card-title {
        font-size: 16px;
    }

    .footer-menus .footer-menus-grid {
        flex-direction: column;
        padding: 0;
        gap: 24px;
    }

    .footer-menus .footer-about,
    .footer-menus .footer-nav {
        width: 100%;
    }

    .footer-menus .footer-desc {
        margin: 16px 0 0 0;
        max-width: 100%;
        line-height: 1.6;
    }

    .footer-menus .footer-menu {
        flex-direction: column;
        gap: 12px;
    }

    .footer-menus .footer-menu > li > a {
        font-size: 15px;
    }

    .footer-menus .footer-menu .sub-menu li a {
        font-size: 13px;
    }

    .is-layout-constrained > .alignwide {
        padding: 7px 16px;
    }
}