:root{ --bg:#ffffff; --card:#ffffff; --soft:#f5f7fb; --text:#0b1220; --muted:#51607a; --brand:#7c3aed; --accent:#a78bfa; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "PingFang SC", "Microsoft YaHei", sans-serif; background:var(--bg); color:var(--text); }
a{ color:var(--brand); text-decoration:none; }
.header{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e5e9f2; }
.container{ max-width:clamp(1100px, 96vw, 1500px); margin:0 auto; padding:0 16px; }
.topbar{ display:flex; align-items:flex-end; gap:16px; height:64px; padding-top:6px; }
.logo{ font-weight:800; letter-spacing:.5px; }
.search{ flex:1; }
.search input{ width:100%; height:40px; border-radius:10px; border:1px solid #223055; background:var(--soft); color:var(--text); padding:0 12px; }
.nav{ display:flex; gap:12px; white-space:nowrap; padding-bottom:8px; }
.nav a{ padding:8px 12px; border-radius:8px; background:#f7f9fc; border:1px solid #e5e9f2; color:var(--muted); }
.nav a.active{ color:#0b1220; border-color:var(--brand); background:#eef4ff; }
.layout{ display:grid; grid-template-columns: 1fr 5fr 1.64fr; gap:24px; padding:16px 0 20px; margin-right: 10px;}
.sidebar{ background:var(--card); border:1px solid #e6ebf5; border-radius:12px; padding:12px; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card{ background:var(--card); border:1px solid #e6ebf5; border-radius:12px; padding:14px; display:flex; gap:12px; }
.card:hover{ border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.card .meta{ flex:1; }
.tag{ display:inline-block; padding:2px 8px; border:1px solid #e1e7f0; border-radius:999px; color:var(--muted); margin-right:6px; font-size:12px; }
.section-title{ margin:8px 0 12px; font-size:14px; color:var(--muted); letter-spacing:.5px; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:#f7f9fc; border:1px solid #e5e9f2; color:#0b1220; }
.btn.primary{ background:linear-gradient(180deg,#8b5cf6,#7c3aed); border-color:#7c3aed; color:#ffffff; }
.kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin:12px 0; }
.kpi{ background:#f7f9fc; border:1px solid #e6ebf5; border-radius:10px; padding:10px; text-align:center; color:var(--muted); }
.footer{ border-top:1px solid #e6ebf5; color:#6b7280; padding:24px 0; font-size:13px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#f7f9fc; border:1px solid #e5e9f2; color:#4b5563; font-size:12px; }
.rating{ color:#f59e0b; }

@media (max-width: 1100px){ .layout{ grid-template-columns: 1fr; } .grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .nav{ display:none; } .grid{ grid-template-columns: 1fr;} }

/* 自定义：右侧大号收录按钮 */
.cta-apply{ display:flex; align-items:center; justify-content:center; width:100%; padding:12px 16px; border-radius:12px; font-weight:600; background:linear-gradient(135deg, #f13b907b, #6981e7da 0%, #55088ccb 50%  100%); color:#fff; border:none; box-shadow:0 8px 25px rgba(102,126,234,0.3); margin-top:8px; transition:all 0.3s ease; }
.cta-apply:hover{ transform:translateY(-2px); box-shadow:0 12px 35px rgba(102,126,234,0.4); filter:brightness(1.1); }

/* 左侧条目以四字为主，收紧行高与留白 */
#left-nav .btn{ justify-content:flex-start; padding:8px 10px; }
#left-nav .section-title{ margin-top:0; }

/* 头部统一高度与对齐 */
.header{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e5e9f2; }
.header .container{ max-width:100%; padding-left:16px; padding-right:16px; margin-left: 20px;}
.topbar{ display:flex; align-items:center; gap:16px; height:56px; padding-top:0; }
.logo.brand{ display:flex; align-items:center; min-width:160px; font-size:30px; color:var(--brand); line-height:56px; margin-left: 20px;}
.nav-plain a, .top-actions .link{ display:inline-flex; align-items:center; height:56px; line-height:56px; padding:0 10px; font-size:15px; }
.nav-plain a{ border:none; background:transparent; color:#374151; }
.nav-plain a:hover{ color:var(--brand); }
.nav-plain a.active{ color:var(--brand); font-weight:700; }
.nav-plain{ margin-top: 15px; overflow:visible; }
.top-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; margin-right: 20px;margin-top: 10px;}
.top-actions .link{ color:#374151; }
.top-actions .link:hover{ color:var(--brand); }

/* 头部导航：移除背景块，改为底部高亮线 */
.nav-plain a{ background:transparent !important; border:none !important; }
.nav-plain a.active{ background:transparent !important; border:none !important; color:var(--brand); font-weight:700; position:relative; }

/* 左侧分类：可滚动列表样式（贴近 360） */
#left-nav{ position:sticky; top:56px; max-height:calc(100vh - 64px); overflow:auto; }
#left-nav .section-title{ margin:0 0 8px; font-weight:600; color:#6b7280; text-align:center; }
#left-nav .btn{ display:block; width:100%; background:transparent; border:none; justify-content:flex-start; padding:10px 12px; border-radius:8px; color:#374151; }
#left-nav .btn:hover{ background:#f7f9fc; }
#left-nav .btn.active{ background:#eef4ff; color:var(--brand); border-left:3px solid var(--brand); border-top-left-radius:0; border-bottom-left-radius:0; }

/* 右侧推荐标题居中 */
#right-rail .section-title{ text-align:center; font-size:16px; font-weight:600; color:#374151; margin-bottom:12px; }

/* 右侧按钮居中显示 */
#right-rail .btn{ display:block; text-align:center; justify-content:center; width:100%; }

/* 顶部下拉菜单 - 确保浮在最上层 */
.dropdown{ position:relative; }
.dropdown .dropdown-menu{ display:none; position:absolute; top:100%; left:0; min-width:180px; background:#fff; border:1px solid #e5e9f2; border-radius:10px; padding:6px; box-shadow:0 8px 20px rgba(0,0,0,.06); z-index:9999; overflow:visible; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:block; }
.dropdown .dropdown-menu a{ display:block; padding:8px 10px; border-radius:8px; color:#374151; white-space:nowrap; }
.dropdown .dropdown-menu a:hover{ background:#f7f9fc; color:var(--brand); }


