/* ========================================
   有榜榜单 - 原型深色科技奢华风格
   基于 prototype/styles.css
   ======================================== */

/* CSS变量 */
:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --accent-gold: #d4a853;
    --accent-amber: #f59e0b;
    --accent-cyan: #22d3ee;
    --accent-emerald: #10b981;
    --accent-rose: #f43f5e;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border: rgba(212, 168, 83, 0.2);
    --border-hover: rgba(212, 168, 83, 0.5);
    --glow: rgba(212, 168, 83, 0.15);
    --glow-strong: rgba(212, 168, 83, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Noto Serif SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ====== 背景装饰 ====== */
.bg-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(212,168,83,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,168,83,.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1; opacity: .7;
}
.bg-glow {
    position: fixed; width: 600px; height: 600px; border-radius: 50%;
    filter: blur(150px); opacity: .3; pointer-events: none; z-index: 0;
}
.bg-glow-1 { top: -200px; right: -100px;
    background: radial-gradient(circle, var(--accent-gold) 0%, transparent 70%); }
.bg-glow-2 { bottom: -300px; left: -200px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    opacity: .15; }

/* ====== 导航栏（原型风格） ====== */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 0 48px; height: 72px;
    background: rgba(10,14,23,.8); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212,168,83,.1);
    transition: all .3s ease;
}
.navbar.scrolled {
    background: rgba(10,14,23,.95); border-bottom-color: var(--border);
}
.nav-container {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between; height: 100%;
}
.nav-left { display: flex; align-items: center; gap: 64px; }
.nav-right { display: flex; align-items: center; }
.nav-logo h2 {
    font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 2px;
}
.nav-menu { display: flex; gap: 40px; list-style: none; }
.nav-menu a {
    color: var(--text-secondary); text-decoration: none; font-size: 15px; font-weight: 500;
    transition: color .3s ease; position: relative;
}
.nav-menu a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--accent-gold); transition: width .3s ease;
}
.nav-menu a:hover { color: var(--accent-gold); }
.nav-menu a:hover::after { width: 100%; }
.nav-menu a.active { color: var(--accent-gold); }
.mobile-menu-icon { display: none; font-size: 20px; cursor: pointer; }
@media(max-width:768px){
    .nav-left{gap:12px!important;}
    .nav-menu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(10,14,23,.98);
        backdrop-filter:blur(20px);flex-direction:column;padding:24px;gap:24px;
        border-bottom:1px solid rgba(212,168,83,.1);z-index:999;}
    .nav-menu.active{display:flex;}
    .mobile-menu-icon{display:block;}
}

/* 导航按钮 */
.nav-auth { display: flex; align-items: center; gap: 16px; }
.login-btn, .publish-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
    text-decoration: none; transition: all .3s ease; cursor: pointer; border: none;
}
.login-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--accent-gold);
}
.login-btn:hover { background: var(--glow); border-color: var(--border-hover); }
.publish-btn {
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
    color: var(--bg-primary);
}
.publish-btn:hover {
    box-shadow: 0 0 30px var(--glow-strong); transform: translateY(-2px);
}

/* 用户下拉菜单 */
.user-dropdown { position: relative; }
.user-dropdown-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-amber));
    color: var(--bg-primary); border: none; font-size: 16px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
.user-dropdown-btn:hover { transform: scale(1.1); box-shadow: 0 0 20px var(--glow-strong); }
.dropdown-menu {
    position: absolute; top: calc(100%+8px); right: 0; min-width: 140px;
    background: var(--bg-secondary); border: 1px solid rgba(212,168,83,.15);
    border-radius: 10px; padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all .25s ease; z-index: 3000; box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.user-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu ul { list-style: none; margin: 0; padding: 0; }
.dropdown-menu li a, .dropdown-menu li button {
    display: flex; align-items: center; width: 100%; padding: 10px 16px; font-size: 14px;
    color: var(--text-secondary); text-decoration: none; background: none; border: none;
    cursor: pointer; transition: all .2s ease;
}
.dropdown-menu li a:hover, .dropdown-menu li button:hover {
    color: var(--accent-gold); background: rgba(212,168,83,.08);
}
.dropdown-user-info{display:flex;flex-direction:column;padding:12px 16px 6px;pointer-events:none;}
.dropdown-user-name{font-size:14px;font-weight:600;color:var(--text-primary);}
.dropdown-user-role{font-size:11px;color:var(--text-muted);margin-top:2px;}
.dropdown-divider{height:1px;background:rgba(255,255,255,0.06);margin:4px 0;}

/* ====== 弹框通用样式 ====== */
.modal-overlay, .share-select-overlay, .excel-upload-overlay,
.login-prompt-overlay, .ai-generate-overlay, .login-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
    z-index: 2000; opacity: 0; visibility: hidden; transition: all .3s ease;
}
.modal-overlay.active, .share-select-overlay.show, .excel-upload-overlay.show,
.login-prompt-overlay.show, .ai-generate-overlay.show, .login-modal.show {
    opacity: 1; visibility: visible;
}
.share-select-container, .excel-upload-container, .login-prompt-container,
.login-modal-content, .modal {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 20px; padding: 24px; width: 90%; max-width: 560px;
    transform: translateY(-20px); transition: transform .3s ease;
}
.share-select-overlay.show .share-select-container,
.excel-upload-overlay.show .excel-upload-container,
.login-prompt-overlay.show .login-prompt-container,
.login-modal.show .login-modal-content,
.modal-overlay.active .modal { transform: translateY(0); }
.ai-generate-container {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 20px; padding: 24px; width: 90%; max-width: 560px;
    max-height: 90vh; overflow-y: auto; transform: translateY(-20px); transition: transform .3s ease;
}
.ai-generate-overlay.show .ai-generate-container { transform: translateY(0); }

/* 弹框头部 */
.share-select-header, .excel-upload-header, .login-prompt-header,
.login-modal-header, .ai-generate-header, .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.share-select-title, .excel-upload-title, .login-prompt-title,
.ai-generate-title, .modal-header h3 {
    font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 600; color: var(--text-primary);
}
.share-select-close, .excel-upload-close, .login-prompt-close,
.ai-generate-close, .close-btn, .modal-close {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 24px; cursor: pointer; transition: color .3s ease;
}
.share-select-close:hover, .excel-upload-close:hover, .login-prompt-close:hover,
.ai-generate-close:hover, .close-btn:hover, .modal-close:hover { color: var(--accent-gold); }

/* 登录提示弹框 */
.login-prompt-content {
    display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.login-prompt-icon { font-size: 48px; color: var(--accent-gold); }
.login-prompt-message { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0; }
.login-prompt-description { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.login-prompt-actions { display: flex; gap: 16px; margin-top: 12px; }
.login-prompt-cancel, .login-prompt-confirm {
    padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .3s ease;
}
.login-prompt-cancel {
    background: transparent; color: var(--text-secondary); border: 1px solid rgba(255,255,255,.1);
}
.login-prompt-cancel:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.login-prompt-confirm {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-amber));
    color: var(--bg-primary);
}
.login-prompt-confirm:hover { box-shadow: 0 0 30px var(--glow-strong); transform: translateY(-2px); }

/* 发布方式选择 */
.share-select-options, .option-content { display: flex; flex-direction: column; gap: 16px; }
.share-select-option {
    display: flex; align-items: center; gap: 16px; padding: 16px;
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px; cursor: pointer; transition: all .3s ease;
}
.share-select-option:hover {
    background: rgba(212,168,83,.05); border-color: var(--border); transform: translateX(4px);
}
.option-icon { font-size: 32px; }
.option-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.option-description { font-size: 13px; color: var(--text-muted); }

/* ====== AI生成表单 ====== */
.ai-form-group { margin-bottom: 18px; }
.ai-form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.ai-form-label .required { color: #e74c3c; }
.ai-form-input {
    width: 100%; padding: 10px 14px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; font-size: 14px; color: var(--text-primary);
    outline: none; transition: all .3s ease;
}
.ai-form-input:focus { border-color: var(--accent-gold); box-shadow: 0 0 12px rgba(212,168,83,.15); }
.ai-form-input::placeholder { color: var(--text-muted); }
.ai-form-input select,
.ai-form select {
    width: 100%; padding: 10px 14px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; font-size: 14px; color: var(--text-primary);
    outline: none; transition: all .3s ease;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
}
.ai-form select option,
.ai-form-input option { background: #1a1f2e; color: #e8e8e8; }
.ai-source-options { display: flex; gap: 20px; }
.ai-source-checkbox, .ai-field-checkbox {
    display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-secondary); user-select: none;
}
.ai-source-checkbox input, .ai-field-checkbox input { display: none; }
.ai-checkbox-custom {
    width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,.15); border-radius: 4px;
    display: flex; align-items: center; justify-content: center; transition: all .2s ease; flex-shrink: 0;
}
.ai-source-checkbox input:checked+.ai-checkbox-custom,
.ai-field-checkbox input:checked+.ai-checkbox-custom { background: var(--accent-gold); border-color: var(--accent-gold); }
.ai-source-checkbox input:checked+.ai-checkbox-custom::after,
.ai-field-checkbox input:checked+.ai-checkbox-custom::after { content:'\2713';font-size:12px;color:var(--bg-primary);font-weight:700; }
.ai-field-checkbox small { color: var(--text-muted); font-size: 12px; }
.ai-output-config { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 16px; }
.ai-config-row { display: flex; align-items: flex-start; gap: 16px; }
.ai-config-row+.ai-config-row { margin-top: 16px; }
.ai-config-label { font-size: 13px; color: var(--text-muted); min-width: 60px; padding-top: 4px; flex-shrink: 0; }
.ai-rank-options { display: flex; flex-wrap: wrap; gap: 12px; }
.ai-rank-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--text-secondary); user-select: none; }
.ai-rank-radio input { display: none; }
.ai-radio-custom {
    width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,.15); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: all .2s ease; flex-shrink: 0;
}
.ai-rank-radio input:checked+.ai-radio-custom { border-color: var(--accent-gold); }
.ai-rank-radio input:checked+.ai-radio-custom::after {
    content:'';width:10px;height:10px;background:var(--accent-gold);border-radius:50%;
}
.ai-field-options { display: flex; flex-wrap: wrap; gap: 16px; }
.ai-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.05); }
.ai-form-cancel {
    padding: 10px 20px; background: transparent; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-secondary); font-size: 14px; cursor: pointer; transition: all .3s ease;
}
.ai-form-cancel:hover { background: rgba(255,255,255,.05); border-color: var(--border-hover); }
.ai-form-submit {
    padding: 10px 24px; background: linear-gradient(135deg, var(--accent-gold), var(--accent-amber));
    border: none; border-radius: 8px; color: var(--bg-primary); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .3s ease; display: flex; align-items: center; gap: 8px;
}
.ai-form-submit:hover { box-shadow: 0 0 30px var(--glow-strong); transform: translateY(-2px); }
@keyframes ai-spin{to{transform:rotate(360deg)}}
.ai-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(10,14,23,.3);border-top-color:var(--bg-primary);border-radius:50%;animation:ai-spin .8s linear infinite;}

/* ====== Excel上传表单 ====== */
.excel-upload-content{padding:0;}
.excel-upload-form{display:flex;flex-direction:column;gap:16px;}
.excel-upload-template{
    display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
    background:rgba(212,168,83,.05);border:1px solid rgba(212,168,83,.12);border-radius:10px;gap:12px;
}
.template-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.template-info svg{color:var(--accent-gold);flex-shrink:0;}
.template-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.template-title{font-size:14px;font-weight:600;color:var(--text-primary);}
.template-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
.template-download-btn{
    display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
    background:rgba(212,168,83,.12);border:1px solid rgba(212,168,83,.25);
    border-radius:8px;color:var(--accent-gold);font-size:13px;font-weight:500;cursor:pointer;
    transition:all .3s ease;white-space:nowrap;flex-shrink:0;
}
.template-download-btn:hover{background:rgba(212,168,83,.2);border-color:var(--accent-gold);transform:translateY(-1px);}
.excel-upload-area{
    border:2px dashed rgba(212,168,83,.2);border-radius:14px;padding:32px 20px;text-align:center;
    transition:all .3s ease;cursor:pointer;
}
.excel-upload-area:hover{border-color:rgba(212,168,83,.4);background:rgba(212,168,83,.03);}
.upload-icon{font-size:40px;margin-bottom:12px;}
.upload-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
.upload-description{font-size:13px;color:var(--text-muted);margin-bottom:16px;}
.upload-btn{
    padding:8px 20px;background:rgba(212,168,83,.1);border:1px solid rgba(212,168,83,.25);
    border-radius:8px;color:var(--accent-gold);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;
}
.upload-btn:hover{background:rgba(212,168,83,.2);border-color:var(--accent-gold);}
.excel-upload-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px;}
.upload-cancel{
    padding:10px 20px;background:transparent;border:1px solid var(--border);
    border-radius:8px;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .3s ease;
}
.upload-submit{
    padding:10px 24px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));
    border:none;border-radius:8px;color:var(--bg-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;
}
.upload-submit:hover{box-shadow:0 0 30px var(--glow-strong);transform:translateY(-2px);}

/* ====== 英雄区（首页） ====== */
.hero-section {
    position: relative; z-index: 1; min-height: 60vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 100px 48px 40px; text-align: center;
}
.hero-title {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(32px, 8vw, 48px); font-weight: 700; line-height: 1.1; margin-bottom: 24px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-gold) 50%, var(--text-primary) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-search{max-width:560px;margin:0 auto 48px;display:flex;align-items:center;gap:8px;}
.hero-search-input{
    flex:1;padding:16px 24px;background:var(--bg-secondary);border:1px solid var(--border);
    border-radius:100px;font-size:16px;color:var(--text-primary);outline:none;transition:all .3s ease;
}
.hero-search-input:focus{border-color:var(--accent-gold);box-shadow:0 0 40px var(--glow);}
.hero-search-input::placeholder{color:var(--text-muted);}
.hero-search-btn{
    padding:16px 28px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));
    border:none;border-radius:100px;color:var(--bg-primary);font-weight:600;cursor:pointer;transition:all .3s ease;
}
.hero-search-btn:hover{box-shadow:0 0 30px var(--glow-strong);transform:scale(1.02);}

/* 热门榜单轮播滑块 */
.hot-rankings-slider{margin-top:30px;}
.slider-container{position:relative;overflow:hidden;}
.slider-track{
    display:flex;gap:24px;padding:16px 0;overflow-x:auto;scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none;}
.ranking-slide{
    flex-shrink:0;width:320px;
    background:linear-gradient(145deg,rgba(17,24,39,.8),rgba(31,41,55,.5));
    border:1px solid var(--border);border-radius:20px;padding:24px;cursor:pointer;
    transition:all .4s ease;position:relative;overflow:hidden;text-align:left;
}
.ranking-slide.latest-ranking{width:280px;padding:16px;}
.ranking-slide::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent-gold),var(--accent-amber));opacity:0;transition:opacity .3s ease;
}
.ranking-slide:hover{transform:translateY(-8px);border-color:var(--border-hover);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px var(--glow);}
.ranking-slide:hover::before{opacity:1;}
.ranking-image{
    width:100%;height:160px;border-radius:14px;margin-bottom:16px;
    background:linear-gradient(145deg,var(--bg-secondary),var(--bg-tertiary));
}
.ranking-number{
    position:absolute;top:16px;left:16px;width:40px;height:40px;
    background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));
    border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:600;color:var(--bg-primary);
}
.ranking-type{
    display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;margin-bottom:12px;
}
.ranking-type.big-data{background:rgba(34,211,238,.15);color:var(--accent-cyan);border:1px solid rgba(34,211,238,.3);}
.ranking-type.ai{background:rgba(16,185,129,.15);color:var(--accent-emerald);border:1px solid rgba(16,185,129,.3);}
.ranking-type.manual{background:rgba(245,158,11,.15);color:var(--accent-amber);border:1px solid rgba(245,158,11,.3);}
.ranking-slide h3{font-family:'Noto Serif SC',serif;font-size:18px;font-weight:600;margin-bottom:12px;line-height:1.4;}
.ranking-stats{display:flex;gap:16px;font-size:12px;color:#fff;}

/* ====== 分类标签 ====== */
.categories-section{
    position:relative;z-index:1;padding:48px 48px;
    background:rgba(17,24,39,.4);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.categories-tags{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.tag{
    padding:10px 24px;background:transparent;border:1px solid var(--border);border-radius:100px;
    color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;
}
.tag:hover{border-color:var(--border-hover);color:var(--text-primary);}
.tag.active{background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));border-color:transparent;color:var(--bg-primary);}

/* ====== 最新榜单区域 ====== */
.latest-section{position:relative;z-index:1;padding:60px 48px;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.main-content{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;}
.latest-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;}
.latest-title{font-family:'Noto Serif SC',serif;font-size:32px;font-weight:600;margin-bottom:8px;}
.all-rankings-link{display:flex;align-items:center;gap:8px;color:var(--accent-gold);text-decoration:none;font-size:14px;font-weight:500;transition:gap .3s ease;}
.all-rankings-link:hover{gap:12px;}
.rankings-list{display:flex;flex-direction:column;gap:16px;}
.rankings-list.compact-list{gap:12px;}

/* 榜单卡片（紧凑列表样式） */
.ranking-item{
    display:flex;flex-direction:column;gap:16px;padding:24px;
    background:var(--bg-secondary);border:1px solid rgba(255,255,255,.05);border-radius:16px;
    cursor:pointer;transition:all .3s ease;
}
.ranking-item.compact-item{padding:16px;gap:12px;background:linear-gradient(145deg,var(--bg-secondary),var(--bg-tertiary));}
.ranking-item:hover{background:var(--bg-tertiary);border-color:var(--border);transform:translateX(8px);}
.ranking-item.compact-item:hover{transform:translateX(4px);}
.ranking-top{display:flex;gap:24px;align-items:flex-start;}
.ranking-info{flex:1;min-width:0;}
.ranking-left{
    flex-shrink:0;width:120px;height:120px;
    background:linear-gradient(135deg,var(--glow),transparent);border:1px solid var(--border);border-radius:14px;
    display:flex;align-items:center;justify-content:center;
}
.ranking-left.compact-left{width:246px;height:120px;}
.ranking-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ranking-header.compact-header{margin-bottom:8px;gap:12px;}
.ranking-header h3{font-family:'Noto Serif SC',serif;font-size:20px;font-weight:600;flex:1;line-height:1.4;min-width:0;overflow:visible;text-overflow:clip;}
.ranking-header h3.compact-title{font-size:18px;line-height:1.4;}
.ranking-data{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.ranking-data.compact-data{gap:6px;margin-bottom:12px;}
.data-item{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;}
.data-item.compact-data-item{font-size:13px;gap:6px;}
.ranking-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;width:100%;}
.ranking-footer.compact-footer{padding-top:8px;}
.ranking-meta{font-size:13px;color:var(--text-muted);}
.ranking-meta.compact-meta{font-size:12px;}
.ranking-stats{display:flex;gap:24px;font-size:13px;color:var(--text-muted);}
.ranking-stats.compact-stats{gap:16px;font-size:12px;}
.ranking-stats span{display:flex;align-items:center;gap:4px;}
.ranking-bottom{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--border);}

/* ====== 广告语区域 ====== */
.ad-banner-section{position:relative;z-index:1;padding:80px 48px 40px;background:linear-gradient(180deg,rgba(212,168,83,.08),transparent);}
.ad-banner{text-align:center;}
.ad-title{font-family:'Noto Serif SC',serif;font-size:36px;font-weight:700;margin-bottom:12px;
    background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-gold) 50%,var(--text-primary) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ad-description{font-size:16px;color:var(--text-muted);}

/* ====== 筛选区域（所有榜单页） ====== */
.filter-section{position:relative;z-index:1;padding:40px 48px;background:rgba(17,24,39,.4);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.filter-category{margin-bottom:20px;}
.category-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.filter-tags{display:flex;flex-wrap:wrap;gap:8px;}
.filter-tag{
    cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
    background:transparent;border:1px solid var(--border);border-radius:100px;
    color:var(--text-secondary);font-size:14px;font-weight:500;transition:all .3s ease;
}
.filter-tag:hover{border-color:var(--border-hover);color:var(--text-primary);}
.filter-tag input{display:none;}
.filter-tag:has(input:checked){background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));border-color:transparent;color:var(--bg-primary);}
.search-group{flex:1;}
.search-container{display:flex;align-items:center;gap:8px;max-width:600px;width:100%;}
.search-type{padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:14px;cursor:pointer;}
.search-input{flex:1;padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;font-size:14px;color:var(--text-primary);outline:none;}
.search-input:focus{border-color:var(--accent-gold);box-shadow:0 0 20px var(--glow);}
.search-input::placeholder{color:var(--text-muted);}
.search-btn{padding:10px 24px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));border:none;border-radius:8px;color:var(--bg-primary);font-weight:600;cursor:pointer;}
.search-btn:hover{box-shadow:0 0 30px var(--glow-strong);transform:translateY(-2px);}

/* ====== 榜单网格（所有榜单页卡片） ====== */
.rankings-section{position:relative;z-index:1;padding:60px 48px;}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;}
.section-title{font-family:'Noto Serif SC',serif;font-size:28px;font-weight:600;margin-bottom:8px;}
.results-count{font-size:14px;color:var(--text-muted);}
.rankings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:32px;}
.rankings-grid .ranking-item{display:flex;flex-direction:column;gap:16px;}
.rankings-grid .ranking-image{width:100%;height:200px;background:linear-gradient(135deg,var(--glow),transparent);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;}

/* ====== 分页 ====== */
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:48px;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;}
.page-btn:hover:not(:disabled){background:rgba(255,255,255,.05);border-color:var(--border-hover);color:var(--text-primary);}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}
.page-btn.active{background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));border-color:transparent;color:var(--bg-primary);}

/* ====== 详情页 ====== */
.detail-header{position:relative;z-index:1;padding:120px 48px 60px;background:linear-gradient(180deg,rgba(212,168,83,.08),transparent);}
.detail-info{max-width:800px;margin:0 auto;text-align:center;}
.detail-title-section{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.detail-title{font-family:'Noto Serif SC',serif;font-size:42px;font-weight:700;line-height:1.2;
    background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-gold) 50%,var(--text-primary) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.detail-meta{display:flex;align-items:center;justify-content:center;gap:32px;margin-bottom:32px;flex-wrap:wrap;}
.meta-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-muted);}
.detail-stats{display:flex;align-items:center;justify-content:center;gap:48px;margin-bottom:32px;flex-wrap:wrap;}
.stat-item{display:flex;flex-direction:column;align-items:center;}
.stat-count{font-size:32px;font-weight:700;color:var(--accent-gold);line-height:1;margin-bottom:4px;}
.stat-label{font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;}
.detail-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.action-btn-detail{
    display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
    background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:100px;
    color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;
}
.action-btn-detail:hover{background:rgba(212,168,83,.1);border-color:var(--border-hover);color:var(--accent-gold);transform:translateY(-2px);}

/* 详情排名列表 */
.detail-content{position:relative;z-index:1;padding:40px 48px 80px;}
.ranking-detail{max-width:800px;margin:0 auto;}
.ranking-list{display:flex;flex-direction:column;gap:12px;}
.ranking-position{
    width:40px;height:40px;background:rgba(212,168,83,.1);border:1px solid var(--border);
    border-radius:8px;display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:700;color:var(--accent-gold);flex-shrink:0;
}
.ranking-position.top1{background:linear-gradient(135deg,#ffd700,#ff8c00);border-color:transparent;color:#0a0e17;box-shadow:0 4px 16px rgba(255,215,0,.3);}
.ranking-position.top2{background:linear-gradient(135deg,#c0c0c0,#808080);border-color:transparent;color:#0a0e17;}
.ranking-position.top3{background:linear-gradient(135deg,#cd7f32,#8b4513);border-color:transparent;color:#fff;}
.ranking-main{flex:1;min-width:0;}
.ranking-name{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.ranking-description{font-size:13px;color:var(--text-muted);line-height:1.4;}
.ranking-metrics{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.ranking-score{font-size:20px;font-weight:700;color:var(--accent-gold);}
.ranking-label{font-size:11px;color:var(--text-muted);}

/* 侧边导航按钮 */
.side-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px;}
.side-nav.left{left:60px;}
.side-nav.right{right:60px;}
.nav-btn{width:56px;height:56px;background:var(--bg-secondary);border:1px solid rgba(212,168,83,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-secondary);text-decoration:none;}
.nav-btn:hover{background:var(--accent-gold);color:#0a0e17;border-color:var(--accent-gold);transform:scale(1.1);box-shadow:0 4px 20px rgba(212,168,83,.3);}
.back-btn{position:fixed;top:80px;left:60px;z-index:100;width:48px;height:48px;background:var(--bg-secondary);border:1px solid rgba(212,168,83,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-secondary);text-decoration:none;}
.back-btn:hover{background:var(--accent-gold);color:#0a0e17;border-color:var(--accent-gold);transform:scale(1.1);}

/* 右侧漂浮工具栏 */
.float-actions{position:fixed;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:100;}
.float-btn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .2s,opacity .2s;background:none;border:none;}
.float-btn:hover{transform:scale(1.1);}
.float-btn svg{width:22px;height:22px;color:rgba(156,163,175,.6);}
.float-btn .count{font-size:10px;font-weight:500;color:rgba(156,163,175,.6);}
.float-btn.like.active svg,.float-btn.like.active .count{color:rgba(239,68,68,.6);}
.float-btn.collect.active svg,.float-btn.collect.active .count{color:rgba(212,168,83,.6);}

/* 移动端详情 */
.mobile-container{max-width:480px;margin:0 auto;min-height:1vh;}
.mobile-header{padding:96px 12px 10px;text-align:center;background:linear-gradient(180deg,rgba(212,168,83,.08),transparent);}
.mobile-logo{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:8px;}
.mobile-logo-icon{width:18px;height:18px;color:var(--accent-gold);}
.mobile-logo-text{font-size:11px;color:var(--text-muted);}
.mobile-title-wrapper{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.mobile-title{font-family:'Noto Serif SC',serif;font-size:18px;font-weight:700;color:var(--text-primary);}
.mobile-tag{padding:3px 8px;border-radius:10px;font-size:10px;font-weight:600;background:rgba(34,211,238,.15);color:var(--accent-cyan);border:1px solid rgba(34,211,238,.3);}
.mobile-meta{display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;color:var(--text-muted);flex-wrap:wrap;}
.mobile-meta-item{display:flex;align-items:center;gap:3px;}
.mobile-list{padding:8px 10px;}
.rank-card{background:var(--bg-secondary);border-radius:8px;padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px;border:1px solid rgba(212,168,83,.06);}
.rank-position-mobile{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:rgba(212,168,83,.1);color:var(--accent-gold);flex-shrink:0;}
.rank-position-mobile.rank-top1,.rank-position.rank-top1{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#0a0e17;}
.rank-position-mobile.rank-top2,.rank-position.rank-top2{background:linear-gradient(135deg,#c0c0c0,#808080);color:#0a0e17;}
.rank-position-mobile.rank-top3,.rank-position.rank-top3{background:linear-gradient(135deg,#cd7f32,#8b4513);color:#fff;}
.rank-position{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:rgba(212,168,83,.1);color:var(--accent-gold);flex-shrink:0;}
.rank-content{flex:1;min-width:0;}
.rank-brand{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px;display:flex;align-items:center;gap:6px;}
.change-badge{padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;}
.change-badge.up{background:rgba(16,185,129,.15);color:#10b981;}
.change-badge.down{background:rgba(239,68,68,.15);color:#ef4444;}
.rank-reason{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-score{text-align:right;flex-shrink:0;}
.score-value{font-size:15px;font-weight:700;color:var(--accent-gold);}
.score-label{font-size:8px;color:var(--text-muted);text-align:center;}
.mobile-footer{padding:10px 10px 24px;text-align:center;}
.view-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border-radius:8px;background:linear-gradient(135deg,var(--accent-gold),#b8860b);border:none;color:#0a0e17;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:10px;}
.share-hint{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--text-muted);margin-bottom:6px;}
.mobile-brand{font-size:10px;color:var(--text-muted);}
.mobile-brand span{color:var(--accent-gold);font-weight:600;}

/* ====== 页脚 ====== */
.footer{position:relative;z-index:1;padding:64px 48px 32px;border-top:1px solid rgba(255,255,255,.05);background:rgba(10,14,23,.8);}
.footer p{text-align:center;color:var(--text-muted);font-size:14px;}

/* ====== 登录表单（原型风格） ====== */
.login-tabs{display:flex;gap:8px;margin-bottom:24px;background:rgba(255,255,255,.05);padding:4px;border-radius:8px;}
.login-tab{flex:1;padding:10px 16px;background:transparent;border:none;border-radius:6px;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .3s ease;}
.login-tab:hover{color:var(--text-primary);}
.login-tab.active{background:var(--accent-gold);color:var(--bg-primary);}
/* 登录模式切换（验证码/密码）- 文字链接风格 */
.login-mode-switch{text-align:right;margin-bottom:16px;font-size:13px;}
.login-mode-link{color:var(--text-muted);cursor:pointer;transition:color .2s;}
.login-mode-link:hover{color:var(--accent-gold);}
.login-mode-link.active{color:var(--accent-gold);font-weight:600;}
.mode-divider{margin:0 8px;color:rgba(255,255,255,.15);}
.login-mode-form{display:none!important;}
.login-mode-form.active{display:flex!important;flex-direction:column;gap:16px;}
.login-mode-form.active .login-form{display:flex;flex-direction:column;gap:20px;}
.login-form{display:flex;flex-direction:column;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-size:14px;font-weight:500;color:var(--text-primary);}
.form-input{
    width:100%;padding:12px 16px;background:rgba(255,255,255,.05);border:1px solid var(--border);
    border-radius:8px;font-size:14px;color:var(--text-primary);outline:none;transition:all .3s ease;
}
.form-input:focus{border-color:var(--accent-gold);box-shadow:0 0 20px var(--glow);}
.form-input::placeholder{color:var(--text-muted);}
.login-submit-btn{
    padding:12px 24px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber));
    border:none;border-radius:8px;color:var(--bg-primary);font-weight:600;cursor:pointer;transition:all .3s ease;
}
.login-submit-btn:hover{box-shadow:0 0 30px var(--glow-strong);transform:translateY(-2px);}
.verification-group{display:flex;gap:12px;}
.verification-group input{flex:1;}
.send-code-btn{
    padding:12px 16px;background:var(--bg-tertiary);border:1px solid var(--border);
    border-radius:8px;font-size:14px;color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:all .3s ease;
}
.send-code-btn:hover:not(:disabled){border-color:var(--accent-gold);color:var(--accent-gold);}
.send-code-btn:disabled{opacity:.5;cursor:not-allowed;}
.form-tip{font-size:12px;color:var(--text-muted);margin-top:4px;}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* ====== 首页右侧推荐栏 ====== */
.recommendation-sidebar{width:320px;flex-shrink:0;}
.recommendation-header{margin-bottom:16px}
.recommendation-tabs{display:flex;gap:4px;background:rgba(255,255,255,.03);border-radius:10px;padding:4px}
.recommendation-tabs .tab-btn{flex:1;padding:8px 0;border:none;background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .3s}
.recommendation-tabs .tab-btn.active{background:var(--accent-gold);color:#0a0e17;font-weight:600}
.recommendation-content{}
.recommendation-item{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;text-decoration:none;color:inherit}
.recommendation-item:last-child{border-bottom:none}
.recommendation-item:hover{background:rgba(212,168,83,.05)}
.rec-number{width:26px;height:26px;background:rgba(212,168,83,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent-gold);flex-shrink:0}
.recommendation-item h4{font-size:13px;font-weight:500;color:var(--text-primary);line-height:1.4;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ====== 首页卡片点赞/收藏按钮 ====== */
.action-btn{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:all .3s;display:inline-flex;align-items:center;gap:2px}
.action-btn:hover{color:var(--accent-rose)}
.action-btn.like-btn:hover,.action-btn.like-btn.active{color:var(--accent-rose)}
.action-btn.collect-btn:hover,.action-btn.collect-btn.active{color:var(--accent-gold)}

/* ====== Toast提示 ====== */
#toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:10px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);font-size:14px;z-index:3000;opacity:0;visibility:hidden;transition:all .3s;box-shadow:0 8px 32px rgba(0,0,0,.3);}

/* ====== 企业详情页 item-detail ====== */
.item-detail-container{max-width:900px;margin:0 auto;padding:100px 20px 40px;position:relative;z-index:1;}
.item-detail-header{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding:30px;background:var(--bg-secondary);border-radius:16px;border:1px solid rgba(212,168,83,.1);}
.item-detail-rank{width:80px;height:80px;background:linear-gradient(135deg,#ffd700,#ff8c00);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#0a0e17;box-shadow:0 4px 20px rgba(255,215,0,.3);flex-shrink:0;}
.item-detail-rank.rank-silver{background:linear-gradient(135deg,#c0c0c0,#a0a0a0);}
.item-detail-rank.rank-bronze{background:linear-gradient(135deg,#cd7f32,#b87333);}
.item-detail-info{flex:1;}
.item-detail-name{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:8px;}
.item-detail-meta{display:flex;gap:20px;font-size:14px;color:var(--text-secondary);flex-wrap:wrap;}
.item-detail-meta-item{display:flex;align-items:center;gap:6px;}
.item-detail-section{background:var(--bg-secondary);border-radius:12px;padding:24px;margin-bottom:20px;border:1px solid rgba(212,168,83,.1);}
.item-detail-section-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.item-detail-section-title::before{content:'';width:4px;height:20px;background:var(--accent-gold);border-radius:2px;}
.item-detail-content{color:var(--text-secondary);line-height:1.8;font-size:15px;}
.item-detail-stats{display:grid;grid-template-columns:1fr;gap:12px;}
.stat-card{background:rgba(255,255,255,.03);border-radius:12px;padding:28px 16px;text-align:center;border:1px solid rgba(212,168,83,.08);}
.stat-value{font-size:30px;font-weight:700;color:var(--accent-gold);margin-bottom:8px;}
.stat-label{font-size:13px;color:var(--text-muted);}
.back-label{position:fixed;top:130px;left:39px;z-index:100;font-size:11px;color:var(--text-muted);text-align:center;}
.nav-item{display:flex;flex-direction:column;align-items:center;}

/* ====== 响应式 ====== */
@media(max-width:900px){
    .main-content{grid-template-columns:1fr;gap:24px;}
    .rankings-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
    .recommendation-sidebar{
        width:100%;
        margin-top:32px;
        border-top:1px solid rgba(255,255,255,.06);
        padding-top:20px;
    }
    .recommendation-tabs{max-width:320px;margin:0 auto 16px;}
    .recommendation-item{padding:10px 8px;}
}

/* ========== 移动端（≤768px）彻底重写 ========== */
@media(max-width:768px){

    /* ---- 导航栏 ---- */
    .navbar{padding:0 16px!important;height:60px!important;}
    .nav-container{padding:0 4px!important;}
    /* Logo + 菜单图标 横排，图标在左 */
    .nav-left{gap:10px!important;flex-direction:row!important;justify-content:flex-start!important;}
    .nav-logo{
        display:flex!important;
        align-items:center!important;
        gap:10px!important;
        flex-direction:row!important;
    }
    .mobile-menu-icon{
        display:block!important;
        order:-1!important;
        font-size:20px!important;
        color:var(--accent-gold)!important;
        flex-shrink:0!important;
    }
    .nav-logo h2{font-size:20px!important;letter-spacing:1px!important;}
    .nav-right{gap:8px!important;}
    .login-btn,.publish-btn{padding:8px 14px!important;font-size:13px!important;}
    .nav-menu{top:60px!important;}

    /* ---- Hero 区域 ---- */
    .hero-section{padding:70px 14px 20px!important;}
    .hero-title{font-size:24px!important;margin-bottom:14px!important;}
    /* 搜索框：横排，按钮缩小在右边，等高 */
    .hero-search{
        flex-direction:row!important;
        width:100%!important;
        max-width:none!important;
        margin:0 auto 20px!important;
        gap:8px!important;
    }
    .hero-search-input{
        flex:1!important;
        box-sizing:border-box!important;
        padding:11px 16px!important;
        font-size:14px!important;
        height:44px!important;
    }
    .hero-search-btn{
        width:auto!important;
        padding:0 24px!important;
        font-size:13px!important;
        height:44px!important;
        flex-shrink:0!important;
    }

    /* ---- 热门轮播 ---- */
    .hot-rankings-slider{margin-top:16px;padding:0 0 6px 0!important;}
    .slider-container{overflow:visible!important;}
    .ranking-slide.latest-ranking{
        min-width:260px!important;
        width:260px!important;
        padding:12px!important;
        border-radius:14px!important;
        overflow:visible!important;
    }
    .ranking-image.latest-image{
        height:110px!important;
        border-radius:10px!important;
        margin-bottom:10px!important;
    }
    /* 排名序号：相对于图片定位，不溢出 */
    .ranking-number.latest-number{
        position:absolute!important;
        top:8px!important;
        left:8px!important;
        width:28px!important;
        height:28px!important;
        font-size:13px!important;
        border-radius:7px!important;
        z-index:2!important;
    }
    .ranking-type.latest-type{
        position:relative!important;
        font-size:9px!important;
        padding:3px 9px!important;
        display:inline-block!important;
        white-space:nowrap!important;
        margin-top:8px!important;
        margin-bottom:6px!important;
    }
    .ranking-slide.latest-ranking h3{
        font-size:14px!important;
        line-height:1.3!important;
        margin-bottom:8px!important;
    }
    .ranking-stats.latest-stats{gap:10px!important;font-size:11px!important;}

    /* ---- 广告语 ---- */
    .ad-banner-section{padding:32px 16px 24px!important;}
    .ad-title{font-size:22px!important;}
    .ad-description{font-size:13px!important;}

    /* ---- 分类标签 ---- */
    .categories-section{padding:12px 16px 0!important;}
    .categories-tags{gap:6px!important;flex-wrap:wrap!important;}
    .tag{
        padding:8px 16px!important;
        font-size:13px!important;
        border-radius:100px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        line-height:1.2!important;
        white-space:nowrap!important;
    }
    .tag.active{
        background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber))!important;
        border-color:transparent!important;
        color:var(--bg-primary)!important;
    }

    /* ---- 最新榜单区域容器 ---- */
    .latest-section{padding:24px 14px!important;}

    /* ====== 榜单卡片 - 核心修复 ====== */

    /* 卡片整体 */
    .ranking-item,
    .ranking-item.compact-item{
        flex-direction:column!important;
        padding:0!important;
        gap:0!important;
        border-radius:14px!important;
        overflow:hidden;
    }

    /* 顶部区域：图片 + 信息 → 改为纵向堆叠 */
    .ranking-top{
        display:flex!important;
        flex-direction:column!important;
        gap:0!important;
    }

    /* 左侧图片区域 */
    .ranking-left,
    .ranking-left.compact-left{
        width:100%!important;
        height:130px!important;
        min-height:0!important;
        border-radius:0!important;
        border:none!important;
        background:linear-gradient(135deg,rgba(212,168,83,.08),rgba(34,211,238,.05))!important;
    }

    /* 右侧信息区 */
    .ranking-info{
        padding:12px 14px 10px!important;
        flex:none!important;
        width:auto!important;
    }

    /* 标题行：标题 + 标签 横排 */
    .ranking-header,
    .ranking-header.compact-header{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:8px!important;
        margin-bottom:6px!important;
        flex-wrap:nowrap!important;
    }
    .compact-title,
    .ranking-header h3.compact-title{
        font-size:15px!important;
        line-height:1.4!important;
        flex:1!important;
        min-width:0!important;
        word-break:break-word!important;
        overflow:visible!important;
        text-overflow:clip!important;
        white-space:normal!important;
    }

    /* 类型标签：不换行！ */
    .ranking-type,
    .ranking-type.compact-type,
    .compact-type{
        white-space:nowrap!important;
        font-size:10px!important;
        padding:2px 8px!important;
        flex-shrink:0!important;
    }

    /* 数据列表 */
    .ranking-data,
    .ranking-data.compact-data,
    .compact-data{
        display:flex!important;
        flex-direction:column!important;
        gap:3px!important;
        margin-top:6px!important;
        margin-bottom:0!important;
    }
    .data-item,
    .data-item.compact-data-item,
    .compact-data-item{
        font-size:11px!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* 底部区域：日期 + 统计 */
    .ranking-bottom{padding-top:0!important;border-top:none!important;}
    .ranking-footer,
    .ranking-footer.compact-footer{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        padding:8px 14px 10px!important;
        gap:4px!important;
        flex-wrap:nowrap!important;
    }
    .ranking-meta,
    .ranking-meta.compact-meta,
    .compact-meta{
        font-size:11px!important;
        color:var(--text-muted)!important;
        flex-shrink:0!important;
    }
    .ranking-stats,
    .ranking-stats.compact-stats,
    .compact-stats{
        display:flex!important;
        gap:8px!important;
        font-size:11px!important;
        flex-shrink:0!important;
    }
    .ranking-stats span,
    .compact-stats span{
        white-space:nowrap!important;
        display:flex!important;
        align-items:center!important;
        gap:2px!important;
    }

    /* ---- 最新榜单头部 ---- */
    .latest-header{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        flex-wrap:wrap!important;
        gap:8px!important;
        margin-bottom:16px!important;
    }
    .latest-title{font-size:20px!important;}
    .all-rankings-link{font-size:13px!important;white-space:nowrap!important;}

    /* ---- 分页 ---- */
    .pagination{flex-wrap:wrap!important;gap:6px!important;justify-content:center!important;margin-top:20px!important;}
    .page-btn{padding:6px 12px!important;font-size:13px!important;}
    .pagination-wrap{margin-top:20px!important;}
    .pagination-wrap nav ul{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:4px!important;}
    .pagination-wrap nav ul li a,
    .pagination-wrap nav ul li span{padding:6px 12px!important;font-size:13px!important;}

    /* ---- 页脚 ---- */
    .footer{padding:32px 16px 20px!important;}
    .side-nav,.back-btn,.float-actions{display:none!important;}

    /* ---- 详情页 ---- */
    .detail-title{font-size:22px!important;}
    .detail-header,.detail-content{padding:24px 16px!important;}
    .category-row{flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;}
    .search-container{flex-direction:column!important;align-items:stretch!important;}
    .search-type,.search-input,.search-btn{width:100%!important;box-sizing:border-box!important;}
    .detail-stats{gap:16px!important;}
    .stat-count{font-size:20px!important;}

    /* ---- 筛选区 ---- */
    .filter-section{padding:24px 16px!important;}
    .category-row{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;}

    /* ---- 登录弹窗 ---- */
    .login-modal-container{width:92vw!important;max-width:380px!important;margin:30px auto!important;}
    .login-modal-body{padding:24px 18px!important;}

    /* ---- 推荐栏（底部展示）---- */
    .recommendation-sidebar{
        border-radius:12px!important;
        background:var(--bg-secondary)!important;
        padding:16px!important;
        margin-top:28px!important;
    }
    .rec-number{width:22px;height:22px;font-size:11px!important;}
    .recommendation-item h4{font-size:13px!important;}

    /* ---- 其他页面通用 ---- */
    .rankings-section{padding:32px 16px!important;}
    .filter-section{padding:24px 16px!important;}
}

/* 核心优势列表 */
.field-list{list-style:none;margin:0;padding:0}
.field-list li{margin-bottom:14px;padding-left:18px;position:relative;color:var(--text-secondary);line-height:1.7}
.field-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--accent-gold);border-radius:50%}
.field-list strong{color:var(--text-primary)}
/* 发展历程时间线 */
.timeline{position:relative;padding-left:44px}
.timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent-gold),rgba(212,168,83,.2))}
.timeline-item{position:relative;margin-bottom:24px}
.timeline-item::before{content:'';position:absolute;left:-35px;top:5px;width:12px;height:12px;background:var(--accent-gold);border-radius:50%;border:3px solid var(--bg-primary);box-sizing:border-box}
.timeline-date{font-size:13px;color:var(--accent-gold);font-weight:600;margin-bottom:4px}
.timeline-title{font-size:15px;color:var(--text-primary);font-weight:600;margin-bottom:4px}
.timeline-desc{font-size:14px;color:var(--text-secondary);line-height:1.6}

@media(max-width:768px){
    /* 响应式 */
    .item-detail-header{flex-direction:column;text-align:center;padding:20px;}
    .item-detail-name{font-size:22px;}
    .item-detail-meta{justify-content:center;}
    .item-detail-stats{grid-template-columns:1fr;}
}

/* ========== 分享弹窗 ========== */
.share-modal-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    z-index:3000;opacity:0;visibility:hidden;
    transition:all 0.3s ease;
}
.share-modal-overlay.show{opacity:1;visibility:visible;}
.share-modal-container{
    background:var(--bg-secondary);border:1px solid var(--border);
    border-radius:20px;padding:28px;width:90%;max-width:420px;
    transform:scale(0.9) translateY(20px);transition:transform 0.3s ease;
}
.share-modal-overlay.show .share-modal-container{transform:scale(1) translateY(0);}
.share-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.share-modal-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text-primary);}
.share-modal-close{background:none;border:none;color:var(--text-muted);font-size:26px;cursor:pointer;line-height:1;padding:0 4px;transition:color 0.2s;}
.share-modal-close:hover{color:var(--accent-gold);}

/* 榜单标题 */
.share-title-text{text-align:center;font-size:15px;color:var(--text-secondary);margin:0 0 18px;line-height:1.5;}

/* 二维码区域 */
.share-qr-section{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;}
.share-qr-code{
    width:160px;height:160px;background:#fff;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    padding:8px;box-sizing:border-box;
}
.share-qr-code canvas,.share-qr-code img{width:100%!important;height:100%!important;}
.share-qr-hint{font-size:12px;color:var(--text-muted);margin-top:10px;}

/* 链接复制行 */
.share-link-row{display:flex;gap:8px;margin-bottom:20px;}
.share-link-input{
    flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--border);
    border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text-secondary);
    outline:none;transition:border-color 0.2s;
}
.share-link-input:focus{border-color:var(--accent-gold);}
.share-copy-btn{
    padding:10px 18px;background:var(--accent-gold);color:#000;
    border:none;border-radius:8px;font-size:13px;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:opacity 0.2s;
}
.share-copy-btn:hover{opacity:0.85;}

/* 分享平台图标 */
.share-platforms{display:flex;justify-content:center;gap:24px;}
.share-platform-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;cursor:pointer;transition:transform 0.2s;}
.share-platform-item:hover{transform:translateY(-2px);}
.platform-icon{
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;color:#fff;
}
.weibo-icon{background:#e6162d;}
.qq-icon{background:#12b7f5;}
.more-icon{background:var(--bg-tertiary);font-size:18px;}
.share-platform-item span:last-child{font-size:12px;color:var(--text-muted);}
