/* CSS Variables - 更丰富的蓝色系 + 点缀色 */
:root {
/* 主题色调：夏季高端色系（海洋蓝 + 珊瑚 + 薄荷点缀） */
--forum-font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ad-height: 200px;
--nav-height: 48px;
--font-nav: 15px;
--font-content: 16px;
/* 夏日主色系 */
--primary-blue: #005a8d; /* 海洋深蓝，稳重而清爽 */
--primary-blue-light: #57d9c9; /* 薄荷/清新强调 */
--primary-blue-dark: #013049; /* 更深的海蓝，用于文字/激活态 */
--secondary-blue: #e6fbf9; /* 轻柔海雾背景 */
--accent-blue: #57d9c9; /* 按钮、渐变点缀（薄荷） */
--teal: #47d7c4;
--violet: #7b8fe8;
--gold: #ff7a66; /* 珊瑚色作为高亮（按钮/激活态小面积点缀） */
--bg-primary: #fffefb; /* 接近沙滩的浅暖白 */
--bg-secondary: #f0fbf9; /* 卡片浅海色 */
/* 夏日渐变（卡片/背景用） */
--ice-blue: linear-gradient(180deg, #fbfffc 0%, #e9fbf7 55%, #e6f8ff 100%);
--bg-gradient-ice: linear-gradient(180deg, rgba(0,90,141,0.04) 0%, rgba(87,217,201,0.01) 100%);
--text-primary-ice: #03364a;
--border-color-ice: rgba(0,90,141,0.10);
--shadow-color-ice: rgba(0,90,141,0.06);
/* ====== Override: 调整头部横幅高度以匹配 LOGO 显示（确保与截图一致） ====== */
.top-hero-container { align-items: center !important; }
.logo-block { height: auto !important; }
.top-ad-area { height: 200px !important; }
.top-ad-area .ad-item, .top-ad-area .ad-thumb-wrapper { height: 100% !important; }
@media (max-width: 760px) {
/* 移动端使用较小的头部高度，保持与 logo 缩放一致 */
.top-ad-area { height: calc(70px + 30px) !important; }
.logo-img-lg { height: calc(70px + 30px) !important; }
}
/* -------------------- 评论与点赞样式调整 -------------------- */
/* 评论项之间使用细线分隔 —— 主流网站常见样式，清晰且不突兀 */
.comments-feed { display:block; }
.comments-feed .comment-item { padding: 12px 12px; margin: 0 0 8px 0; border-radius: 8px; background: transparent; }
.comments-feed .comment-item:not(:first-child) {
border-top: 1px solid rgba(15,23,42,0.06);
padding-top: 14px;
margin-top: 14px;
}
.comments-feed .comment-item .comment-attachments img { border-radius:6px; }
/* 点赞用户：内联 pill 风格，换行显示，收纳大量昵称而不占满页面 */
.likers-wrap { position: relative; max-height: 84px; overflow: hidden; }
.likers-wrap::after {
/* 底部渐变提示——表示还有更多，视觉上优雅提示 */
content: '';
position: absolute;
left: 0; right: 0; bottom: 0; height: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.92));
pointer-events: none;
}
.likers { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.liker {
display:inline-flex; align-items:center; justify-content:center;
background: rgba(87,217,201,0.12);
color: var(--primary-blue-dark);
padding: 6px 10px; font-size:13px; border-radius:999px;
border: 1px solid rgba(87,217,201,0.18);
white-space:nowrap;
}
/* 小屏优化：降低高度以节省空间 */
@media (max-width:520px) {
.likers-wrap { max-height: 64px; }
.liker { padding:5px 8px; font-size:12px; }
.comments-feed .comment-item { padding:10px 8px; }
}
/* 如果需要显示完整列表，可在 JS 中切换 .likers-wrap.expanded（此处保留 class hook） */
.likers-wrap.expanded { max-height: none; }
/* -------------------- end 评论/点赞样式 -------------------- */
/* 柔和天蓝主题 */
--sky-light: linear-gradient(180deg, #e9f6ff 0%, #e0f1ff 55%, #d7eefc 100%);
--bg-gradient-sky: linear-gradient(180deg, rgba(0,82,204,0.06) 0%, rgba(0,58,153,0.02) 100%);
--text-primary-sky: #06142a;
--border-color-sky: rgba(0,82,204,0.10);
--shadow-color-sky: rgba(0,102,204,0.06);
/* 雾蓝主题 */
--mist-blue: linear-gradient(180deg, #f8fcff 0%, #eff6ff 55%, #dbeafe 100%);
--bg-gradient-mist: linear-gradient(180deg, rgba(59,130,246,0.05) 0%, rgba(37,99,235,0.02) 100%);
--text-primary-mist: #1e293b;
--border-color-mist: rgba(59,130,246,0.15);
--shadow-color-mist: rgba(59,130,246,0.07);
/* 清晨蓝主题 */
--morning-blue: linear-gradient(180deg, #f0f7ff 0%, #e1efff 55%, #c7e2ff 100%);
--bg-gradient-morning: linear-gradient(180deg, rgba(96,165,250,0.05) 0%, rgba(59,130,246,0.02) 100%);
--text-primary-morning: #1e40af;
--border-color-morning: rgba(96,165,250,0.15);
--shadow-color-morning: rgba(96,165,250,0.07);
--text-primary: #0f172a;
--bg-gradient: linear-gradient(180deg, rgba(0,90,141,0.04) 0%, rgba(87,217,201,0.01) 100%);
--text-secondary: #21566f;
--text-tertiary: #4b6f7f;
--border-color: rgba(0,90,141,0.10);
--border-radius: 12px;
--shadow-sm: 0 8px 28px rgba(0,90,141,0.06);
--shadow-md: 0 18px 48px rgba(0,90,141,0.08);
--shadow-lg: 0 40px 110px rgba(0,90,141,0.10);
--glass: rgba(255,255,255,0.78);
--transition: all 0.22s cubic-bezier(.2,.9,.2,1);
}
/* 全局样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: var(--forum-font);
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
background: radial-gradient(1200px 600px at 10% 10%, rgba(0,82,204,0.06), transparent), var(--bg-gradient);
min-height: 100vh;
/* 页面默认流式布局，避免所有页面垂直居中 */
display: block;
padding-top: 0; /* header 现在为 sticky 顶部，不需要全局留白 */
}
/* 统一调整 rem 基准，使 rem 单位随项目默认字号生效 */
html { font-size: 16px; }
/* 全站：默认让图片/媒体自适应容器宽度，避免溢出 */
img, picture, figure, video { max-width: 100%; height: auto; display: block; }
/* ----------------- 冰蓝主题：卡片与版式 ----------------- */
.card--sky {
background: var(--ice-blue);
border: 1px solid var(--border-color-ice);
box-shadow: 0 18px 46px var(--shadow-color-ice), inset 0 1px 0 rgba(255,255,255,0.6);
border-radius: 14px;
padding: 18px;
color: var(--text-primary-ice);
}
/* 更强调的卡片轮廓（可用于重要面板） */
.card--sky.card--outlined {
border: 2px solid rgba(0,82,204,0.16);
box-shadow: 0 28px 80px rgba(0,82,204,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Adverts list card styles */
.adverts-list { display:flex; flex-direction:column; gap:12px; }
.advert-card {
display:flex;
gap:12px;
align-items:flex-start;
padding:12px;
border-radius:10px;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,250,255,0.9));
border:1px solid rgba(0,82,204,0.06);
}
.advert-thumb { flex:0 0 140px; max-width:140px; display:block; }
.advert-thumb img, .advert-thumb-img {
width:100%;
height:100px;
object-fit:cover;
border-radius:8px;
display:block;
}
.advert-thumb-placeholder {
width:140px;
height:100px;
border-radius:8px;
background: linear-gradient(90deg,#f3f7ff,#e9f4ff);
display:flex; align-items:center; justify-content:center; color:var(--text-secondary);
}
.advert-body { flex:1; min-width:0; }
.advert-title { margin:0 0 6px 0; font-size:1.05rem; }
.advert-title a { color:var(--primary-blue-dark); text-decoration:none; }
.advert-meta { font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.advert-content { color:var(--text-primary); line-height:1.5; }
/* Profile list (我的发布) styles */
.profile-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.profile-list-item { display:block; border-radius:10px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,255,255,0.98)); border:1px solid rgba(0,82,204,0.04); }
.profile-list-row { display:flex; gap:12px; align-items:flex-start; }
.profile-thumb { flex:0 0 120px; width:120px; max-width:120px; }
.profile-thumb img { width:100%; height:84px; object-fit:cover; border-radius:8px; display:block; }
.profile-list-body { flex:1; min-width:0; }
.profile-list-body a { display:inline-block; font-weight:600; color:var(--primary-blue-dark); text-decoration:none; margin-bottom:6px; }
.profile-submeta { font-size:13px; color:var(--text-secondary); margin-top:6px; }
.profile-list-stats { display:flex; flex-direction:row; gap:12px; align-items:center; justify-content:flex-end; min-width:90px; font-size:13px; color:var(--text-secondary); }
/* Responsive: on small screens stack layout */
@media (max-width:720px) {
.profile-list-row { flex-direction:row; align-items:flex-start; }
.profile-thumb { flex:0 0 100px; width:100px; }
.profile-thumb img { height:72px; }
.profile-list-stats { min-width:70px; font-size:13px; flex-direction:row; gap:10px; }
}
@media (max-width:420px) {
.profile-list-row { flex-direction:column; gap:8px; }
.profile-thumb { width:100%; flex:0 0 auto; }
.profile-thumb img { height:160px; }
.profile-list-stats { align-items:flex-start; flex-direction:row; gap:10px; }
}
/* Desktop: show two items per row for profile lists (only desktop) */
@media (min-width:900px) {
.profile-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.profile-list-item {
padding: 12px;
}
/* keep inner row layout */
.profile-list-row { display:flex; gap:12px; align-items:flex-start; }
/* ensure thumbnail sizing within grid items */
.profile-thumb { flex:0 0 120px; width:120px; }
}
/* Message grid: desktop two columns, mobile single column */
.message-grid { display: block; }
.message-card { margin-bottom: 12px; }
@media (min-width:900px) {
.message-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: start;
}
.message-card { margin-bottom: 0; }
}
/* Mobile: make text adverts display like image adverts (grid of cards) */
@media (max-width: 700px) {
.adverts-list {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
gap: 12px;
}
.advert-card {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 8px;
}
.advert-thumb, .advert-thumb-img, .advert-thumb-placeholder {
width: 100%;
max-width: 100%;
height: 140px;
}
.advert-thumb-img { object-fit: cover; border-radius: 8px; }
.advert-body { padding-top: 8px; }
.advert-content { max-height: 6.5em; overflow: hidden; }
}
/* Image grid for adverts?page=image */
.adverts-image-grid { display:grid; gap:12px; }
.ad-image-card { border-radius:10px; overflow:hidden; padding:0; }
.ad-image-card .ad-image-link img { display:block; }
.ad-image-meta { padding:10px; }
.ad-image-meta a { font-size:14px; display:block; }
/* Responsive grid for ad-image-card used on arrogance page
- Desktop: 4 columns
- Mobile: 1 column */
.ad-image-card.ad-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); padding:12px; }
.ad-image-card.ad-grid .ad-item { width:100%; padding:8px; box-sizing: border-box; }
.ad-image-card.ad-grid .ad-item img { width:100%; height:160px; object-fit:cover; border-radius:6px; display:block; }
@media (max-width: 760px) {
.ad-image-card.ad-grid { grid-template-columns: 1fr; }
}
/* 广告缩略图样式：固定宽高，圆角，图片裁切并填充容器，适配广告容器 */
.ad-area { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ad-item { display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.ad-thumb-wrapper {
--ad-thumb-w: 140px; /* 默认缩略图宽度，可覆盖 */
--ad-thumb-h: 100px; /* 默认缩略图高度，可覆盖 */
width: var(--ad-thumb-w);
height: var(--ad-thumb-h);
flex: 0 0 var(--ad-thumb-w);
overflow: hidden;
border-radius: 10px;
background: #f6f9ff;
display: inline-block;
}
.ad-thumb-wrapper img.ad-image, .ad-thumb-wrapper img.ad-thumb {
width: 100%;
height: 100%;
object-fit: cover; /* 裁切并填充缩略图容器 */
display: block;
border-radius: inherit; /* 继承圆角 */
}
@media (max-width:520px) {
.ad-thumb-wrapper { --ad-thumb-w: 110px; --ad-thumb-h: 80px; }
}
/* 顶部横幅式广告（节选图片）— 长图、填充导航栏、高度与 LOGO/注册容器等高、圆角 */
.top-ad-area {
width: 100%;
height: var(--nav-height, 48px); /* 与导航容器同高 */
display: block;
overflow: hidden;
border-radius: calc(var(--border-radius, 12px));
}
.top-ad-area .ad-item { display:block; width:100%; height:100%; }
.top-ad-area .ad-thumb-wrapper { width:100%; height:100%; border-radius:inherit; flex:1 1 auto; }
.top-ad-area .ad-thumb-wrapper img.ad-image, .top-ad-area .ad-thumb-wrapper img.ad-thumb {
width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}
@media (max-width:520px) {
.top-ad-area { height: calc(var(--nav-height,48px) - 4px); }
}
@media (max-width:520px) {
.adverts-image-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 表单控件在天蓝卡片内的可读性调整 */
.card--sky input,
.card--sky textarea,
.card--sky select,
.card--sky .search-input {
background: #ffffff;
color: var(--text-primary);
border: 1px solid rgba(0,82,204,0.12);
border-radius: 8px;
padding: 8px 10px;
}
.card--sky input::placeholder, .card--sky textarea::placeholder { color: rgba(14,38,67,0.45); }
/* 小尺寸按钮样式 */
.btn-small { padding:6px 10px; border-radius:8px; font-size:13px; font-weight:700; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:10px; }
/* 模态内容使用统一类以便与主题一致 */
.modal-content.card--sky { width: 920px; max-width: 95%; padding: 18px; border-radius: 12px; box-shadow: var(--shadow-lg); }
.modal-content.card--sky h3 { color: var(--primary-blue-dark); }
/* 主题排版：论坛风格标题/正文 */
.page-title { font-size: 1.9rem; font-weight:800; color: var(--primary-blue-dark); }
h1, h2, h3 { font-weight: 700; color: var(--primary-blue-dark); }
p { color: var(--text-secondary); }
/* Posts header styling: compact, refined look */
.posts-header-inner { display:flex; flex-direction:column; gap:6px; }
.posts-header .page-title { font-size:18px; font-weight:700; color:var(--text-primary); margin:0; }
.posts-header .page-subtitle { font-size:13px; color:var(--text-secondary); margin:0; }
.tag-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tag { background:#f3f7ff; color:var(--primary-blue); padding:6px 10px; border-radius:999px; font-size:13px; border:1px solid rgba(25,118,210,0.06); }
/* Ensure gallery images in admin modal scale nicely */
.modal-content img { max-width:100%; height:auto; display:block; }
.modal-content video { max-width:100%; height:auto; display:block; }
/* Category navigation buttons (compact, mobile-friendly) */
.post-categories-wrapper nav { display:flex; gap:8px; flex-wrap:wrap; }
.post-categories-wrapper nav a.btn-secondary { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; font-size:13px; border-radius:8px; text-align:center; min-width:0; box-sizing:border-box; }
.post-categories-wrapper nav a.btn-secondary:hover { transform:translateY(-1px); }
/* Mobile: ensure 4 items per row on narrow screens */
@media (max-width: 600px) {
.post-categories-wrapper nav a.btn-secondary { flex: 0 0 calc(25% - 6px); font-size:12px; padding:6px 6px; }
.tag { font-size:12px; padding:5px 8px; }
}
/* Small tablets: allow up to 6 per row */
@media (min-width:601px) and (max-width:900px) {
.post-categories-wrapper nav a.btn-secondary { flex: 0 0 calc(33.333% - 6px); font-size:13px; }
}
/* Desktop: auto size but keep compact */
@media (min-width:901px) {
.post-categories-wrapper nav a.btn-secondary { flex: 0 0 auto; font-size:13px; }
}
/* 按钮与图标调整，便于一目了然 */
.btn-primary { background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light)); color: #fff; border-radius:10px; padding:0.85rem 1.4rem; font-weight:800; }
/* Video page action button tweaks: ensure the circular nickname aligns with other action buttons */
.video-actions { display:flex; flex-direction:column; gap:14px; align-items:center; position:absolute; right:12px; bottom:50px; }
.video-actions .action-btn { width:56px; height:56px; font-size:16px; border-radius:50%; padding:0; }
@media (max-width:520px) { .video-actions { right:8px; bottom:46px; } .video-actions .action-btn { width:48px; height:48px; font-size:14px; } }
/* Search page specific layout (moved from inline in search.ejs) */
.posts-page-grid { display:grid; grid-template-columns: 1fr 360px; gap:16px; }
@media (max-width:900px) { .posts-page-grid { grid-template-columns: 1fr; } }
.search-input { padding:12px 14px; font-size:16px; box-shadow: 0 6px 18px rgba(3,54,74,0.06); border-radius:10px; border:1px solid rgba(0,82,204,0.08); width:100%; }
@media (max-width:520px) { .search-input { font-size:15px; padding:10px 12px; } }
/* Mini advanced search used on /post pages */
.mini-search-card { display:block; }
.mini-search-card .search-input { padding:8px 10px; border-radius:8px; box-shadow:none; border:1px solid rgba(0,82,204,0.06); }
.mini-search-card .mini-search-scope { padding:8px 10px; border-radius:8px; border:1px solid rgba(0,82,204,0.06); background:#fff; font-size:14px; }
.mini-search-card form { align-items:center; }
@media (max-width:720px) {
.mini-search-card form { flex-direction:column; align-items:stretch; }
.mini-search-card .mini-search-scope { width:100%; }
.mini-search-card .btn-small { width:100%; }
}
.btn-secondary { background: transparent; color: var(--primary-blue-dark); border:1px solid rgba(0,82,204,0.12); border-radius:10px; padding:0.7rem 1rem; }
.btn { font-family: var(--forum-font); }
.icon { background: linear-gradient(180deg,#ffffff,#eaf6ff); color: var(--primary-blue-dark); }
/* 调整统计卡与表格的视觉 */
.stat-card { padding:16px; border-radius:12px; }
.stat-value { font-size:28px; font-weight:800; color:var(--primary-blue-dark); }
/* utility text classes */
.text-success { color: #1b6e3a; }
.text-muted { color: var(--text-tertiary); }
/* arrogance page: top posts responsive grid and truncation styling */
.arrogance-top-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.arrogance-top-item {
padding: 12px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.arrogance-top-title { margin: 0 0 4px 0; font-size: 1rem; }
.arrogance-top-title a { color: var(--primary-blue-dark); text-decoration:none; }
.arrogance-top-meta { font-size:12px; color:var(--text-secondary); }
.arrogance-top-content { color:var(--text-primary); font-size:14px; line-height:1.5; }
@media (max-width: 720px) {
.arrogance-top-grid { grid-template-columns: 1fr; }
.arrogance-top-item { padding: 10px; }
}
/* arrogance page: make ad carousel single column on small screens while keeping desktop unchanged */
@media (max-width: 720px) {
.arrogance-ad-carousel {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.arrogance-ad-carousel .ad-item {
width: 100% !important;
padding: 8px !important;
}
/* Ensure images/videos show fully on mobile: scale to container width, keep aspect ratio
and avoid being cropped by object-fit:cover. Use !important to override inline styles. */
.arrogance-ad-carousel .ad-link img,
.arrogance-ad-carousel .ad-link video,
.arrogance-ad-carousel img.ad-image,
.arrogance-ad-carousel img.ad-thumb {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
display: block !important;
border-radius: 6px;
}
.arrogance-ad-carousel .ad-link video { max-height: 480px; }
}
/* small wrapper for arrogance page ads to control spacing/layout */
.arrogance-ad-container {
padding: 6px 4px;
}
.notice { color: var(--primary-blue-dark); padding:8px; }
/* 容器 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
width: 100%;
}
/* 英雄区样式（补充） */
.hero { padding:48px 0 40px; position:relative; overflow:visible }
.hero-container { display:grid; grid-template-columns:1fr 380px; gap:36px; align-items:center }
.hero-title { font-size:2.6rem; line-height:1.04; margin:0 0 12px; font-weight:800; color:var(--text-primary) }
.hero-title .highlight { color:var(--primary-blue) }
.hero-subtitle{ color:var(--text-secondary); font-size:1.05rem; margin-bottom:18px }
.hero-buttons{ display:flex; gap:12px; align-items:center }
.hero-visual{ display:flex; justify-content:center; align-items:center }
.bg-blob{ position:absolute; right:-80px; top:20px; width:420px; height:420px; z-index:0; opacity:0.14; filter:blur(28px); background: radial-gradient(circle at 20% 30%, var(--violet), transparent 30%), radial-gradient(circle at 80% 70%, var(--primary-blue), transparent 30%); transform:rotate(12deg) }
/* 顶部轻量导航汉堡 */
.hamburger{ display:none; cursor:pointer; padding:6px; border-radius:8px }
.hamburger .bar{ display:block; width:22px; height:2px; background:var(--text-secondary); margin:4px 0; border-radius:2px }
@media (max-width:880px){ .hero-container{ grid-template-columns:1fr } .nav-menu{ display:none } .hamburger{ display:block } }
/* 通用段落标题样式 */
.section-header { text-align: left; margin-bottom: 18px; }
.section-header .section-title { font-size: 1.6rem; color:var(--text-primary); margin:0 0 6px 0; font-weight:700; }
.section-header .section-subtitle { color:var(--text-secondary); margin:0; }
/* 英雄区（Hero） */
.hero {
padding: 48px 0 40px;
}
.hero-container {
display: grid;
grid-template-columns: 1fr 360px;
gap: 36px;
align-items: center;
}
.hero-title {
font-size: 2.6rem;
line-height: 1.06;
margin: 0 0 12px 0;
color: var(--text-primary);
font-weight: 800;
}
.hero-title .highlight { color: var(--primary-blue); }
.hero-subtitle {
color: var(--text-secondary);
font-size: 1.05rem;
margin-bottom: 18px;
}
.hero-buttons { display:flex; gap:12px; align-items:center; }
.hero-visual { display:flex; justify-content:center; }
@media (max-width: 880px) {
.hero-container { grid-template-columns: 1fr; }
.hero { padding: 28px 0; }
.nav-menu { display:none; }
}
/* 保持不同容器字体一致：与管理页表格相同的基准字体（13px） */
/* 使表格、卡片、统计面板、搜索栏等容器内文字更紧凑以适配布局 */
.container table th, .container table td,
.container .table-wrapper, .container .card--sky, .container .stat-card, .container .search-container,
.container .posts-page-grid, .container .posts-page-grid * {
font-size: 13px;
}
.container .stat-card .stat-value { font-size: 18px; }
.container .table-wrapper th, .container .table-wrapper td { padding: 8px 10px; }
/* 小屏时显示简单菜单占位（可扩展汉堡菜单） */
.hamburger { display:none; }
@media (max-width:880px) { .hamburger{ display:block; } }
.navbar {
width: 100%;
position: sticky;
top: 0;
z-index: 60;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,246,255,0.92));
border-bottom: 1px solid var(--border-color);
padding: 6px 0; /* 更紧凑的导航高度 */
}
.nav-container { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-menu { list-style:none; display:flex; gap:12px; align-items:center; }
/* 全局导航字体大小（桌面与移动保持一致） */
.nav-menu .nav-link {
color: var(--text-secondary);
text-decoration: none;
padding: 4px 6px;
border-radius: 10px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
font-size: 11px; /* 稍回升以兼顾可读性 */
letter-spacing: 0.6px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 6px 18px rgba(11,97,255,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms, background 220ms;
backdrop-filter: blur(4px);
}
.nav-menu .nav-link:hover {
color: var(--primary-blue-dark);
transform: translateY(-4px);
background: linear-gradient(90deg, rgba(51,133,255,0.08), rgba(0,82,204,0.04));
box-shadow: 0 18px 40px rgba(11,97,255,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
border-color: rgba(11,97,255,0.12);
}
.nav-menu .nav-link.active {
background: linear-gradient(90deg, rgba(11,97,255,0.14), rgba(51,133,255,0.10));
color: var(--primary-blue-dark);
box-shadow: 0 22px 50px rgba(11,97,255,0.10);
transform: translateY(-2px);
}
.nav-menu.mobile-open { display:flex; flex-direction:column; gap:8px; position:absolute; left:12px; right:12px; top:64px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.96)); border:1px solid var(--border-color); padding:12px; border-radius:12px; box-shadow:var(--shadow-sm); z-index:80; }
.hamburger.open .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.open .bar:nth-child(2){ opacity: 0; transform: scaleX(0); }
.hamburger.open .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.logo { color:var(--primary-blue-dark); font-weight:800; font-size:1.4rem; }
/* 头部样式 */
.logo {
color: var(--primary-blue);
.navbar {
width: 100%;
position: sticky;
top: 0;
z-index: 60;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
border-bottom: 1px solid rgba(15,33,64,0.06);
padding: 0; /* 去掉内边距，使用固定高度使文字上下紧贴 */
}
.nav-container { display:flex; align-items:center; justify-content:space-between; gap:12px; height:var(--nav-height); }
.nav-menu { list-style:none; display:flex; gap:8px; align-items:center; height:100%; }
/* 保证桌面与移动字体一致 */
.nav-menu .nav-link { color:var(--text-secondary); text-decoration:none; padding:0 8px; border-radius:10px; font-weight:700; line-height:var(--nav-height); display:inline-flex; align-items:center; height:var(--nav-height); font-size:11px; letter-spacing:0.5px; }
width: 100%;
.main-nav { padding: 6px 12px; border-top:1px solid rgba(15,33,64,0.02); border-bottom:1px solid rgba(15,33,64,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98)); border-radius:12px; margin:12px 0; box-shadow: 0 8px 28px rgba(11,97,255,0.06); }
/* 二级导航（用于广告页的 图片广告 / 页面广告 切换） */
.sub-nav { display:flex; justify-content:center; padding:10px 0 0 0; margin-bottom:12px; }
.sub-nav .sub-links { display:flex; gap:10px; align-items:center; }
.sub-nav .sub-link {
display:inline-flex; align-items:center; justify-content:center;
/* Match /post category button sizing and weight */
padding:6px 10px; border-radius:8px; font-weight:700; font-size:13px; color:var(--primary-blue-dark);
background: transparent; border:1px solid rgba(0,82,204,0.12); text-decoration:none;
/* keep subtle depth but remove heavy glow to match category pills */
box-shadow: 0 6px 18px rgba(11,97,255,0.04);
}
.sub-nav .sub-link:hover { transform: translateY(-1px); background: linear-gradient(90deg, rgba(51,133,255,0.06), rgba(0,82,204,0.03)); }
.sub-nav .sub-link.active {
background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light));
color:#fff;
box-shadow: 0 18px 40px rgba(11,97,255,0.08);
border-color: rgba(0,58,153,0.12);
}
@media (max-width:600px){ .sub-nav { padding:8px 6px; } .sub-nav .sub-link { padding:6px 10px; font-size:12px; } }
/* 桌面：把导航固定在 LOGO + 轮播 下方，视觉更像真实导航栏 */
@media (min-width: 760px) {
.navbar {
position: sticky;
top: var(--ad-height);
z-index: 80;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
box-shadow: 0 10px 30px rgba(11,97,255,0.06);
border-bottom: 1px solid rgba(11,97,255,0.04);
}
}
/* 手机：默认收起导航，点击用户区域展开 */
@media (max-width: 759px) {
.nav-menu { display: none; }
.nav-menu.mobile-open { display:flex; flex-direction:column; gap:8px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.98)); padding:10px; border-radius:10px; box-shadow:var(--shadow-sm); margin-top:8px; }
.logo-block .user-summary { cursor: pointer; }
/* 移动端简化 logo 下方链接样式，减少阴影与间距 */
.logo-links { background:transparent; box-shadow:none; gap:6px; padding:4px 6px; }
.logo-links .logo-link { font-size:14px; padding:4px 6px; }
}
/* 让导航链接在容器中上下紧贴（更干练） */
.nav-menu .nav-link { padding-top:0; padding-bottom:0; }
.nav-menu .nav-link:hover { background: linear-gradient(90deg, rgba(11,97,255,0.06), rgba(11,97,255,0.03)); color:var(--primary-blue-dark); }
/* 桌面：让 logo-block 的宽度根据 LOGO 自适应，并让用户区宽度与 LOGO 宽度一致 */
/* --- Header ad carousel styles --- */
.top-ad-area { width:100%; }
.ad-carousel { display:block; width:100%; }
.ad-track { display:flex; gap:12px; align-items:center; justify-content:flex-start; }
.ad-item { display:flex; width:100%; align-items:center; justify-content:flex-start; }
.ad-item img.ad-slide { width:100%; height:var(--ad-height); max-height:var(--ad-height); object-fit:cover; border-radius:12px; display:block; }
/* Ensure legacy and new ad image class share same sizing and fit their container */
.ad-item img.ad-image, .ad-image { width:100%; height:var(--ad-height); max-height:var(--ad-height); object-fit:cover; border-radius:12px; display:block; }
/* Constrain the top ad area so a single large image fits the header */
.top-ad-area { height: var(--ad-height); overflow: hidden; }
.top-ad-area .ad-item { height: 100%; }
/* Thumbnail presentation for header ads: fixed size, rounded, centered */
.ad-thumb-wrapper { display:flex; align-items:center; justify-content:center; width:100%; }
.ad-thumb { width:320px; height:180px; object-fit:cover; border-radius:12px; box-shadow: 0 6px 18px rgba(11,97,255,0.04); display:block; }
@media (max-width: 760px) {
.ad-thumb { width:260px; height:160px; }
}
@media (max-width:420px) {
.ad-thumb { width:200px; height:120px; }
}
.ad-controls { display:none; }
.ad-dots { display:none; }
@media (min-width:760px) {
.ad-track { max-width: 760px; margin: 0 auto; }
.ad-item { display:flex; }
/* limit header ad width to original carousel width so single image doesn't overflow */
.top-ad-area .ad-item { max-width: 760px; margin: 0 auto; display:block; }
}
@media (max-width:759px) {
/* 在移动端缩小顶部广告高度以节省垂直空间 */
.ad-item img.ad-slide { height: 160px; max-height: 160px; }
.ad-item img.ad-image, .ad-image { height: 160px; max-height: 160px; }
.top-ad-area { height: 160px; }
.ad-controls { padding:0 8px; }
}
/* 更小屏时进一步压缩顶部广告高度 */
@media (max-width:420px) {
.ad-item img.ad-slide, .ad-item img.ad-image, .ad-image { height: 140px; max-height: 140px; }
.top-ad-area { height: 140px; }
}
@media (min-width: 760px) {
.logo-block { width: max-content; align-items: center; }
.logo-area { display:flex; justify-content:center; }
.logo-area .logo-img { display:block; }
.logo-area-extra { width:100%; display:flex; align-items:flex-end; justify-content:center; }
.user-summary { width:100%; display:flex; justify-content:center; padding:6px 8px; box-sizing:border-box; }
.user-summary .user-logged-in, .user-summary .user-logged-out { display:flex; justify-content:center; gap:8px; }
/* 保证登录时头像和按钮不会换行，文本溢出省略 */
.user-summary .user-meta { min-width:0; }
/* 高端大气的 LOGO 下方链接样式（桌面） */
/* 与下方导航栏一致：容器透明、无阴影，让链接本身使用 `.nav-link` 风格 */
.logo-links { display:flex; gap:10px; align-items:center; justify-content:center; padding:0; box-sizing:border-box; border-radius:0; background: transparent; box-shadow: none; transition: var(--transition); }
.logo-links .logo-link {
color: var(--text-primary);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.4px;
text-decoration: none;
padding: 6px 8px;
border-radius: 8px;
display: inline-block;
transition: var(--transition);
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.6);
box-shadow: 0 6px 18px rgba(11,97,255,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}
.logo-links .logo-link:hover {
color: var(--primary-blue-dark);
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(11,97,255,0.08);
background: linear-gradient(90deg, rgba(51,133,255,0.08), rgba(0,82,204,0.04));
border-color: rgba(11,97,255,0.12);
}
/* 强制：在最末端再次声明手机端一行 4 个导航项的规则以覆盖前面的全局样式 */
@media (max-width: 600px) {
.nav-menu, .logo-links { flex-wrap: wrap; }
.nav-menu .nav-link, .logo-links .logo-link {
flex: 0 0 25% !important;
padding: 1px 1px !important;
text-align: center !important;
font-size: 10px !important;
box-sizing: border-box !important;
}
}
.logo-links .divider { color:var(--text-tertiary); margin:0 6px; font-weight:700; }
/* 圆形 / 胶囊型边框容器，用来包裹 "网站首页 | 个人中心" 链接 */
.logo-links.round-badge {
/* Post detail: extracted styles from template for consistent layout */
.post-main--wrap {
padding: 18px; /* 与旧模板内联值一致，便于渐进替换 */
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.post-actions--inline {
display: flex;
gap: 8px;
align-items: center;
margin-top: 6px;
}
.post-author { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.post-author .avatar { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--primary-blue); color:#fff; font-weight:700; }
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(15,33,64,0.08);
background: rgba(255,255,255,0.72);
box-shadow: 0 6px 20px rgba(11,97,255,0.04);
transition: var(--transition);
}
.logo-links.round-badge .nav-link { padding: 0 6px; color: var(--text-primary); font-weight:700; font-size:14px; }
.logo-links.round-badge .divider { margin: 0 8px; color: var(--text-tertiary); }
@media (max-width:880px) {
.logo-links.round-badge { padding:4px 8px; gap:6px; }
}
}
/* 外层容器：包裹 网站首页/个人中心，提供更精致的背景与间距 */
.home-user-container{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px;
border-radius:14px;
background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(244,248,255,0.88));
box-shadow: 0 10px 30px rgba(11,97,255,0.06);
border: 1px solid rgba(15,33,64,0.04);
/* Title ads (textads) - prominent headline style */
.title-ad-wrapper { display:flex; flex-direction:column; gap:8px; }
.title-ad-item { background: linear-gradient(90deg, rgba(255,244,229,0.95), rgba(255,249,238,0.95)); border:1px solid rgba(255,196,77,0.12); padding:12px 14px; border-radius:10px; }
.title-ad-link { display:block; font-size:1.06rem; font-weight:800; color: #8a2be2; text-decoration:none; }
.title-ad-link:hover { text-decoration:underline; color: var(--primary-blue-dark); }
.title-ad-item + .title-ad-item { margin-top:6px; }
@media (max-width:760px) {
.title-ad-link { font-size:15px; }
.title-ad-item { padding:10px 12px; }
}
transition: var(--transition);
}
.home-user-container:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(11,97,255,0.08); }
/* 图标链接样式 */
.icon-link{ display:inline-flex; align-items:center; gap:8px; color:var(--text-primary); text-decoration:none; }
.icon-link img{ display:block; width:20px; height:20px; filter: none; }
/* 屏幕较小处微调容器尺寸 */
@media (max-width:880px){
.home-user-container{ padding:4px; border-radius:10px; box-shadow:none; background:transparent; }
.icon-link img{ width:18px; height:18px; }
}
/* 无障碍隐藏文本 */
.visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
/* 页面主体使用更小的统一字号，标题用更醒目但不夸张的权重 */
main.container.page-main,
.search-container,
.stats-container,
.table-wrapper,
.table-wrapper table,
.table-wrapper th,
.table-wrapper td,
.stat-card,
.form-group label,
.info-item .value {
font-size: var(--font-content);
}
/* 页面主标题做稍微强调但仍比导航小一号 */
.page-title { font-size: calc(var(--font-content) * 1.15); font-weight:700; color:var(--primary-blue-dark); margin-bottom:14px; }
/* 微调表格行高与输入字号 */
#usersTable th, #usersTable td { font-size: var(--font-content); }
#searchInput, .search-input { font-size: var(--font-content); }
animation: fadeInUp 0.6s cubic-bezier(.2,.9,.2,1);
}
.register-header,
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.register-header h2,
.login-header h2 {
color: var(--text-primary);
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.subtitle {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* 表单样式 */
.register-form,
.login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
color: var(--text-primary);
font-weight: 500;
font-size: 0.9rem;
}
.form-group input {
padding: 0.95rem 1rem;
border: 1px solid rgba(0,82,204,0.10);
border-radius: 10px;
font-size: 1rem;
transition: var(--transition);
background: var(--bg-primary);
color: var(--text-primary);
}
.form-group input:focus {
outline: none;
border-color: var(--primary-blue-dark);
box-shadow: 0 10px 40px rgba(0,82,204,0.10), 0 0 0 4px rgba(51,133,255,0.06);
}
.form-group input::placeholder {
color: var(--text-tertiary);
}
/* Post gallery: ensure all images/videos expand to container width and show fully (no max-height) */
.post-gallery { display:block; }
.post-gallery .post-image { margin-bottom:12px; }
.post-gallery .post-image img { width:100%; height:auto; max-height:none; display:block; border-radius:8px; object-fit:contain; }
.post-gallery .post-image video {
width: 100%;
/* 使用现代浏览器的 aspect-ratio 保持比例并填充容器 */
aspect-ratio: 16 / 9;
height: auto;
max-height: 70vh;
display: block;
border-radius: 8px;
object-fit: cover; /* 填充满容器，裁剪超出部分 */
}
/* 确保正文（文字）始终在画廊下方且与画廊分离 */
.post-side {
clear: both;
margin-top: 14px;
}
.attachment-file { margin:12px 0; display:flex; align-items:center; gap:12px; }
.attachment-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f3f7ff; color:var(--primary-blue); font-weight:700; }
@media (min-width:900px) {
/* 在大屏上为多张图片提供可读间距 */
.post-gallery { display:block; }
.post-gallery .post-image { margin-bottom:18px; }
}
/* 表单选项 */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -0.5rem;
}
.remember-me,
.terms {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.remember-me input,
.terms input {
width: auto;
margin: 0;
}
.forgot-password a {
color: var(--primary-blue);
text-decoration: none;
font-size: 0.9rem;
transition: var(--transition);
}
.forgot-password a:hover {
text-decoration: underline;
}
.terms a {
color: var(--primary-blue);
text-decoration: none;
transition: var(--transition);
}
.terms a:hover {
text-decoration: underline;
}
/* 按钮样式 */
.btn-primary,
.btn-secondary {
padding: 0.875rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: linear-gradient(90deg, var(--primary-blue-dark), var(--primary-blue));
color: #fff;
box-shadow: 0 18px 60px rgba(0,82,204,0.14);
padding: 0.95rem 1.6rem;
border-radius: 12px;
letter-spacing:0.4px;
}
.btn-primary:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 28px 90px rgba(0,82,204,0.18) }
.btn-secondary {
background: transparent;
color: var(--primary-blue-dark);
border: 1px solid rgba(0,82,204,0.10);
}
.btn-secondary:hover {
background: var(--border-color);
}
/* 链接样式 */
.login-link,
.register-link {
text-align: center;
margin-top: 1.5rem;
font-size: 0.95rem;
color: var(--text-secondary);
}
.login-link a,
.register-link a {
color: var(--primary-blue);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.login-link a:hover,
.register-link a:hover {
text-decoration: underline;
}
/* 全站超链接（非按钮/导航项）高阶样式：去掉默认蓝色下划线，使用底部渐变条和颜色过渡 */
a:not(.btn):not(.nav-link):not(.logo-link):not(.logo-link .logo-link) {
color: var(--primary-blue);
text-decoration: none;
position: relative;
font-weight: 600;
transition: color 220ms ease, transform 220ms ease;
}
a:not(.btn):not(.nav-link):not(.logo-link):not(.logo-link .logo-link)::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms cubic-bezier(.2,.9,.2,1);
border-radius: 2px;
opacity: 0.95;
}
a:not(.btn):not(.nav-link):not(.logo-link):not(.logo-link .logo-link):hover {
color: var(--primary-blue-dark);
}
a:not(.btn):not(.nav-link):not(.logo-link):not(.logo-link .logo-link):hover::after {
transform: scaleX(1);
}
/* 个人信息页面样式 */
.profile-wrapper {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,246,255,0.98));
border-radius: 14px;
box-shadow: var(--shadow-md);
padding: 2.25rem;
width: 100%;
animation: fadeInUp 0.6s cubic-bezier(.2,.9,.2,1);
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.profile-header h2 {
color: var(--text-primary);
font-size: 1.8rem;
font-weight: 600;
margin: 0;
}
.profile-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.profile-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.profile-section {
background: var(--bg-primary);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(0,82,204,0.08);
}
/* Desktop: show basic info and account settings side-by-side */
@media (min-width:900px) {
.profile-info {
flex-direction: row;
gap: 2rem;
align-items: flex-start;
}
.profile-info .profile-section {
flex: 1 1 50%;
min-width: 0;
}
}
.profile-section h3 {
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 3px solid var(--primary-blue);
display: inline-block;
}
/* 如果 profile 的外层或子区同时使用了 card--sky，优先保留天蓝卡片样式，避免被 .profile-* 通用样式覆盖 */
.profile-wrapper.card--sky {
background: linear-gradient(180deg, #e9f6ff 0%, #e0f1ff 55%, #d7eefc 100%);
border-radius: 14px;
padding: 18px;
color: var(--text-primary);
border: 1px solid rgba(0,82,204,0.10);
box-shadow: 0 18px 46px rgba(0,102,204,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.profile-section.card--sky {
/* 让 profile 内的区块在 card--sky 上保持一致的背景与输入可读性 */
background: linear-gradient(180deg, #ffffff, #f7fbff);
border-radius: 12px;
padding: 1.5rem;
border: 1px solid rgba(0,82,204,0.06);
box-shadow: none;
}
/* 管理页（manage）相关元素：确保当这些元素带有 .card--sky 时，天蓝主题生效且不会被后续通用规则覆盖 */
.stat-card.card--sky,
.search-container.card--sky,
.table-wrapper.card--sky,
.stats-container.card--sky,
.profile-section.card--sky,
.cos-list.card--sky {
background: linear-gradient(180deg, #e9f6ff 0%, #e0f1ff 55%, #d7eefc 100%);
border-radius: 14px;
padding: 16px;
color: var(--text-primary);
border: 1px solid rgba(0,82,204,0.10);
box-shadow: 0 18px 46px rgba(0,102,204,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* 保证表格与搜索容器内的输入在卡片上可读 */
.table-wrapper.card--sky input,
.table-wrapper.card--sky select,
.search-container.card--sky input,
.search-container.card--sky select,
.search-container.card--sky .search-input {
background: #ffffff;
color: var(--text-primary);
border: 1px solid rgba(0,82,204,0.12);
border-radius: 8px;
padding: 8px 10px;
}
/* COS 存储桶浏览专用样式（manage 页面） */
.cos-controls {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 8px;
}
.cos-controls .search-input { min-width:160px; }
/* COS 列表容器：当带有 card--sky 时，使用主题卡片内样式 */
#cosListContainer.card--sky {
/* 与页面上其他重要卡片保持一致的天蓝主题样式（桌面视觉统一） */
background: linear-gradient(180deg, #e9f6ff 0%, #e0f1ff 55%, #d7eefc 100%);
border-radius: 14px;
padding: 16px;
color: var(--text-primary);
border: 1px solid rgba(0,82,204,0.10);
box-shadow: 0 18px 46px rgba(0,102,204,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* 表头样式（移除行内样式后通过类控制） */
.cos-table-head {
background: linear-gradient(90deg, rgba(240,246,255,1), rgba(245,249,255,1));
}
.cos-table-head th { padding: 10px 12px; text-align: left; color: var(--text-secondary); font-weight:700; border-bottom:1px solid rgba(0,82,204,0.04); }
/* 行样式与 hover 效果 */
.cos-row td { padding: 10px 12px; border-bottom: 1px solid rgba(15,33,64,0.02); vertical-align:middle; }
.cos-row:hover { background: linear-gradient(90deg, rgba(240,246,255,0.8), rgba(250,252,255,0.8)); }
/* 链接与小组件的主题色 */
#cosListContainer.card--sky a { color: var(--primary-blue-dark); text-decoration: none; }
#cosListContainer.card--sky a:hover { text-decoration: underline; }
/* 移动端：堆叠 cos-controls 元素以节省空间 */
@media (max-width: 720px) {
.cos-controls { flex-direction: column; align-items: stretch; }
.cos-controls .search-input { width: 100%; }
}
/* 让表格在 card--sky 上呈现卡片底色，去除表格自身的白底以便一致显示 */
.table-wrapper.card--sky table { background: transparent; }
.table-wrapper.card--sky tbody tr { background: transparent; }
.table-wrapper.card--sky td, .table-wrapper.card--sky th { background: transparent; }
@media (min-width: 721px) {
/* 桌面上给 COS 列表更明显的内边距与视觉权重 */
#cosListContainer.card--sky { padding: 18px; }
}
/* 信息网格 */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
.info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.info-item .label {
color: var(--text-tertiary);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-item .value {
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
background: linear-gradient(180deg, #ffffff, #f7fbff);
padding: 0.6rem 0.9rem;
border-radius: 8px;
border: 1px solid rgba(0,82,204,0.06);
}
/* 设置列表 */
.settings-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: linear-gradient(180deg, #ffffff, #f7fbff);
border-radius: 10px;
border: 1px solid rgba(0,82,204,0.06);
transition: var(--transition);
}
.setting-item:hover {
border-color: var(--primary-blue);
box-shadow: var(--shadow-sm);
}
.setting-name {
color: var(--text-primary);
font-weight: 500;
}
.setting-action {
color: var(--primary-blue);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
}
.setting-action:hover {
text-decoration: underline;
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.register-form-wrapper,
.login-form-wrapper,
.profile-wrapper {
padding: 2rem 1.5rem;
}
.logo {
font-size: 2rem;
}
.register-header h2,
.login-header h2,
.profile-header h2 {
font-size: 1.5rem;
}
.profile-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
padding: 10px;
}
.register-form-wrapper,
.login-form-wrapper,
.profile-wrapper {
padding: 1.5rem 1rem;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.btn-primary,
.btn-secondary {
padding: 0.875rem;
}
}
/* --- 高级视觉：把主导航（网站首页/信息发布/用户管理/个人中心）设计为有质感的导航按钮 --- */
.nav-menu.nav-buttons .nav-link,
.logo-links.round-badge .logo-link {
font-size: 16px !important;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 0.85rem !important;
border-radius: 12px;
color: var(--primary-blue-dark) !important;
font-weight: 700;
/* 更有质感的背景渐变 */
background: linear-gradient(180deg, #fbfdff 0%, #eaf6ff 55%, #e6f3ff 100%);
border: 1px solid rgba(11,97,255,0.08);
box-shadow: 0 12px 34px rgba(11,97,255,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
backdrop-filter: blur(6px) saturate(120%);
text-decoration: none;
}
.nav-menu.nav-buttons .nav-link:hover,
.logo-links.round-badge .logo-link:hover {
transform: translateY(-4px);
box-shadow: 0 18px 46px rgba(11,97,255,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
background: linear-gradient(180deg, #ffffff, #e9f6ff);
}
.nav-menu.nav-buttons .nav-link.active,
.logo-links.round-badge .logo-link.active {
/* 更显眼的激活态：深蓝渐变底 + 金色字体以提升对比与可识别性 */
background: linear-gradient(90deg, var(--primary-blue-dark), var(--primary-blue));
color: var(--gold) !important;
text-shadow: 0 1px 0 rgba(0,0,0,0.12);
box-shadow: 0 22px 60px rgba(11,97,255,0.16), inset 0 2px 8px rgba(255,255,255,0.02);
transform: translateY(-2px);
border-color: rgba(11,97,255,0.22);
}
@media (max-width: 600px) {
/* 保持一行 4 个（每项 25%），但保留质感与可点性 */
.nav-menu, .logo-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 6px;
}
.nav-menu.nav-buttons .nav-link,
.logo-links.round-badge .logo-link {
flex: 0 0 25% !important;
padding: 0.35rem 0.45rem !important;
font-size: 16px !important;
border-radius: 10px;
background: linear-gradient(180deg, #fbfdff 0%, #eef8ff 60%, #e6f3ff 100%);
}
}
/* 下面是从 manage.html 提取的局部样式（统一到此文件） */
/* logo 图片样式（高端大气） */
.logo { display:inline-block; line-height:1; }
.logo-img { height:44px; width:auto; display:block; border-radius:8px; box-shadow: 0 6px 18px rgba(16,24,40,0.12); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.logo-img:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16,24,40,0.18); }
@media (max-width:600px) { .logo-img { height:36px; } }
/* 状态/角色徽章 */
.status-badge { display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; }
.status-pending { background:#fff3cd; color:#856404; }
.status-approved { background:#d4edda; color:#155724; }
.status-reject { background:#f8d7da; color:#721c24; }
.status-suspend { background:#e2e3e5; color:#383d41; }
.role-badge { display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:500; }
.role-general { background:#e3f2fd; color:#1565c0; }
.role-admin { background:#e8f5e9; color:#2e7d32; }
.role-superadmin { background:#fff3e0; color:#ef6c00; }
/* 操作按钮 */
/* 帖子详情页样式：现代社区布局 */
.post-layout { display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
.post-main { background: #fff; border-radius:12px; padding:6px; box-shadow: var(--shadow-md); border:1px solid rgba(15,33,64,0.04); }
.post-side { background: linear-gradient(180deg,#fbfdff,#f3f9ff); border-radius:12px; padding:18px; border:1px solid rgba(15,33,64,0.03); box-shadow: var(--shadow-sm); }
.post-main h1 { font-size:24px; margin-bottom:8px; color:var(--text-primary); }
.post-meta-row { display:flex; gap:12px; align-items:center; margin-bottom:14px; color:var(--text-tertiary); }
.post-meta-row .avatar { width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef5ff; color:var(--primary-blue); font-weight:700; font-size:18px; }
.post-content { font-size:17px; color:var(--text-secondary); line-height:1.95; margin-top:8px; }
.post-main img { width:100%; max-height:520px; object-fit:cover; border-radius:10px; display:block; margin:12px 0; }
.post-main video { width:100%; max-height:520px; border-radius:10px; display:block; margin:12px 0; background:linear-gradient(180deg,#014a66, #006c8a); border:1px solid rgba(87,217,201,0.06); }
.post-actions { display:flex; gap:10px; align-items:center; margin-top:18px; }
.post-side table { width:100%; border-collapse:collapse; font-size:14px; }
.post-side td { padding:8px 6px; vertical-align:top; color:var(--text-primary); }
.post-side td:first-child { color:var(--text-tertiary); width:36%; font-weight:600; }
.post-side pre { background: #fff; padding:8px; border-radius:8px; border:1px solid rgba(0,0,0,0.04); overflow:auto; max-height:260px; }
@media (max-width: 980px) {
.post-layout { grid-template-columns: 1fr; padding:0 12px; }
.post-side { order: 2; }
.post-main { order: 1; }
.post-main img { max-height:380px; }
}
/* 帖子列表页面：响应式网格与卡片 */
.posts-page-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap:20px; align-items:start; grid-auto-rows: auto; width:100%; box-sizing:border-box; }
/* Management page variant: force two-column manage layouts to single-column on desktop
so each container fills the full width (one container per row). Mobile retains
existing responsive stacking behavior. */
.posts-page-grid.manage-two-layout {
grid-template-columns: 1fr;
}
.posts-grid { display:flex; flex-wrap:wrap; gap:12px; }
/* Prevent children from forcing grid/flex to overflow: allow them to shrink */
.posts-page-grid, .posts-page-grid > *, .posts-grid, .posts-grid .post-card, .posts-grid .post-card * {
min-width: 0 !important;
}
/* Ensure images and media don't cause overflow */
.posts-page-grid img, .posts-page-grid video { max-width:100%; height:auto; }
/* Make the third column container (aside) span full width under the two-column row on desktop */
.posts-page-grid > aside {
grid-column: 1 / -1;
}
/* 卡片在桌面端使用横向缩略图（图片左、文本右），在移动端堆叠为顶部图片样式。 */
.posts-grid .post-card {
flex: 1 1 calc(50% - 12px);
max-width: calc(50% - 12px);
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
padding:12px;
border-radius:8px;
border:1px solid rgba(0,0,0,0.04);
background: linear-gradient(180deg,#fff,#f7fbff);
}
.posts-grid .post-card-image {
width:100%;
height:140px;
object-fit:cover;
border-radius:8px;
display:block;
}
/* Video placeholder uses same sizing as image thumbnails */
.posts-grid .post-card-image.video-placeholder {
background-color: #000;
background-image: url('/images/video-placeholder.png');
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.posts-grid .video-play-icon {
width:64px;
height:64px;
border-radius:50%;
/* 夏日样式：珊瑚渐变内层 + 细薄荷边框，明亮且现代 */
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,122,102,0.16));
border: 1px solid rgba(87,217,201,0.12);
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
box-shadow: 0 12px 36px rgba(255,122,102,0.10);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.posts-grid .video-play-icon:hover { transform: scale(1.06); box-shadow: 0 18px 46px rgba(255,122,102,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,122,102,0.22)); }
.posts-grid .post-card-body { display:flex; flex-direction:column; width:100%; }
.posts-grid .post-card-body h4 { margin:0; font-size:16px; }
.posts-grid .post-card-excerpt { margin:0; color:var(--text-secondary); font-size:13px; }
/* 桌面：改为横向缩略图布局，图片固定小尺寸，文本在右侧 */
@media (min-width: 760px) {
.posts-grid .post-card { flex-direction:row; align-items:flex-start; }
.posts-grid .post-card-image {
width:120px; /* 缩略图宽 */
height:90px; /* 缩略图高 */
border-radius:8px;
flex-shrink:0;
}
.posts-grid .post-card-image.video-placeholder { background-size: cover; }
.posts-grid .post-card-body { padding-left:12px; }
/* 缩减摘要长度视觉上更紧凑 */
.posts-grid .post-card-excerpt { font-size:13px; color:var(--text-secondary); max-height:44px; overflow:hidden; }
}
@media (max-width: 880px) {
.posts-page-grid { grid-template-columns: 1fr; }
.posts-grid .post-card { flex: 1 1 100%; max-width: 100%; }
#postsList { padding:12px; }
.posts-grid { gap:10px; }
/* 小屏：图片回到顶部大图，便于查看内容 */
.posts-grid .post-card-image { width:100%; height:140px; }
.posts-grid .post-card { flex-direction:column; }
}
/* 更紧凑的手机端布局（<= 600px）：减少卡片和详情页内边距，使内容更紧凑 */
@media (max-width: 600px) {
/* 页面主体与列表容器 */
.post-layout { padding: 0 8px; }
#postsList { padding:8px; }
.posts-grid { gap:8px; }
/* 卡片：减小内边距与间隔，缩略图高度略小 */
.posts-grid .post-card {
padding:8px;
gap:8px;
border-radius:8px;
}
.posts-grid .post-card-image {
width:100%;
height:140px; /* 更小的缩略图，高度更节省空间 */
object-fit:cover;
border-radius:6px;
}
.posts-grid .post-card-image.video-placeholder { background-size: cover; }
.posts-grid .post-card-body { padding-left:0; }
.posts-grid .post-card-body h4 { font-size:15px; margin-bottom:4px; }
.posts-grid .post-card-excerpt { font-size:13px; max-height:40px; }
/* 帖子详情页：正文内边距固定为 6px */
.post-main { padding:6px; }
.post-side { padding:10px; }
.post-main h1 { font-size:20px; margin-bottom:6px; }
.post-content { font-size:15px; line-height:1.7; }
.post-main img, .post-main video { margin:8px 0; max-height:360px; }
/* 分页与控件紧凑化 */
.pager { margin:8px 0; }
.btn-small { padding:6px 8px; font-size:13px; }
}
/* 附件显示样式 */
.attachment-file { display:flex; gap:12px; align-items:center; }
.attachment-icon { width:64px; height:64px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f3f7ff; color:var(--primary-blue); font-weight:700; }
.attachment-file a { text-decoration:none; }
.action-buttons { display:flex; gap:5px; }
.btn-small { padding:5px 10px; font-size:13px; border-radius:6px; cursor:pointer; border:none; transition:all 0.2s; }
.btn-view { background:#e3f2fd; color:#1976d2; }
.btn-edit { background:#e8f5e9; color:#2e7d32; }
.btn-delete { background:#ffebee; color:#c62828; }
.btn-view:hover { background:#bbdefb; }
.btn-edit:hover { background:#c8e6c9; }
.btn-delete:hover { background:#ffcdd2; }
/* 搜索容器 */
.search-container { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; padding:15px; background:var(--bg-secondary); border-radius:12px; border:1px solid var(--border-color); }
.search-input { flex:1; min-width:200px; padding:10px 15px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-primary); color:var(--text-primary); }
/* 统计卡片 */
.stats-container { display:flex; gap:15px; flex-wrap:wrap; margin-bottom:20px; }
.stat-card { flex:1; min-width:150px; padding:18px; background: linear-gradient(180deg,#ffffff,#f7fbff); border-radius:12px; border:1px solid rgba(0,82,204,0.06); box-shadow: var(--shadow-sm); }
.stat-value { font-size:24px; font-weight:800; margin-bottom:8px; color:var(--primary-blue-dark); }
.stat-label { font-size:14px; color:var(--text-secondary); }
.loading { text-align:center; padding:40px; color:var(--text-secondary); }
.no-data { text-align:center; padding:40px; color:var(--text-tertiary); }
/* 分页器样式（信息发布列表） */
.posts-pager { margin-top:12px; }
.posts-pager .btn-primary, .posts-pager .btn-secondary { padding:8px 12px; border-radius:8px; font-weight:700; }
.posts-pager div { padding:0 8px; }
/* detail page: stacked images for posts with multiple images */
.post-main-image { width:100%; display:block; max-width:100%; height:auto; object-fit:cover; border-radius:10px; }
/* 页面特定布局 */
main.container.page-main { padding-top:28px; }
.page-title { margin-bottom:20px; }
#notice { margin-bottom:20px; }
/* 顶部用户摘要（右侧） */
#userSummary { display:flex; align-items:center; gap:12px; }
#userAvatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#e3f2fd,#bbdefb); display:flex; align-items:center; justify-content:center; color:#1976d2; font-weight:700; }
/* 当头像为图片时，保证填充和圆角 */
#userAvatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
#userName { font-size:14px; font-weight:700; color:var(--text-primary); }
#userRole { font-size:12px; color:var(--text-tertiary); }
#logoutBtn { padding:6px 10px; }
/* ----------------- 手机端：小区信息列表（紧凑左缩略图 + 右文案） ----------------- */
@media (max-width: 600px) {
/* 列表与侧栏堆叠，整体留边统一为 6px（更紧凑） */
.posts-page-grid { grid-template-columns: 1fr; gap:6px; }
/* 卡片变为行内布局：左侧小图，右侧文案 */
.posts-grid { gap:6px; }
.posts-grid .post-card {
display:flex;
flex-direction:row;
align-items:flex-start;
gap:6px;
padding:6px; /* 固定留边 */
border-radius:6px;
box-shadow: none;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border:1px solid rgba(0,0,0,0.04);
}
.posts-grid .post-card-image {
width:84px;
height:64px;
flex:0 0 84px;
object-fit:cover;
border-radius:6px;
margin:0;
}
/* 保持 body 内边距为 0，外部容器由卡片 padding 控制 */
.posts-grid .post-card-body { padding:0; width: calc(100% - 94px); }
.posts-grid .post-card-body h4 { font-size:15px; margin-bottom:4px; line-height:1.2; }
.posts-grid .post-card-meta { font-size:12px; color:var(--text-tertiary); margin-bottom:6px; }
.posts-grid .post-card-excerpt { font-size:13px; color:var(--text-secondary); margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
/* 点击区域优化：使整个卡片更像可点链接（视觉提示） */
.posts-grid .post-card a { display:block; color:var(--text-primary); }
/* 分页控件更紧凑 */
.posts-pager { display:flex; gap:6px; justify-content:center; padding:6px 0; }
.posts-pager .btn-primary, .posts-pager .btn-secondary { padding:6px 8px; font-size:13px; }
/* 减少侧边栏占位（发布表单）高度，统一为 6px */
aside.card--sky { padding:6px; }
.card--sky input, .card--sky textarea, .card--sky select { padding:6px; }
/* 页面容器整体留边 */
#postsList { padding:6px; }
.post-main { padding:6px; }
.post-side { padding:6px; }
}
/* 手机端导航：尝试让四个链接一排显示（每项占 25%），字体略大以增强可读性 */
@media (max-width: 600px) {
.nav-menu, .logo-links {
display: flex;
flex-wrap: wrap; /* allow wrapping so 4 items of 25% fit */
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0 6px;
}
.nav-menu .nav-link, .logo-links .logo-link {
flex: 0 0 25%; /* 每项固定占比，保证一行四个 */
box-sizing: border-box;
text-align: center;
padding: 4px 6px; /* 适度内边距以保持可点触控友好 */
font-size: 10px; /* 保持小但可读 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
}
/* 当 logo-links 使用 round-badge 时，保留外观但仍让内部链接占位 */
.logo-links.round-badge .logo-link { padding: 4px 6px; }
}
/* 表格样式 */
.table-wrapper { overflow:auto; background:var(--bg-primary); border:1px solid rgba(0,82,204,0.06); border-radius:12px; padding:12px; box-shadow: 0 10px 30px rgba(0,82,204,0.04); }
#usersTable { width:100%; border-collapse:collapse; min-width:900px; }
#usersTable th, #usersTable td { padding:12px 15px; text-align:left; border-bottom:1px solid rgba(15,33,64,0.03); vertical-align:middle; }
#usersTable thead tr { color:var(--text-tertiary); font-weight:600; border-bottom:2px solid var(--border-color); }
#usersTable th:nth-child(1) { width:60px; }
#usersTable th:nth-child(2) { width:120px; }
#usersTable th:nth-child(3) { width:120px; }
#usersTable th:nth-child(4) { width:130px; }
#usersTable th:nth-child(5) { width:180px; }
#usersTable th:nth-child(6) { width:100px; }
#usersTable th:nth-child(7) { width:100px; }
#usersTable th:nth-child(8) { width:150px; }
#usersTable th:nth-child(9) { width:200px; }
@media (max-width: 1200px) { #usersTable { min-width:800px; } }
@media (max-width: 760px) { #usersTable { min-width:700px; } .container { padding:12px; } }
/* 模态框样式 */
.modal-overlay { display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; z-index:999; }
.modal-content { background:var(--bg-primary); width:900px; max-width:94%; margin:auto; border-radius:12px; padding:24px; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-close { background:none; border:none; font-size:20px; color:var(--text-tertiary); cursor:pointer; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.additional-fields { display:none; margin-top:15px; padding-top:15px; border-top:1px solid var(--border-color); }
.delete-modal .modal-content { width:400px; max-width:90%; }
/* 顶部大 Logo 与广告横幅 */
.top-hero {
background: #ffffffcc;
padding: 18px 0 10px;
position: sticky;
top: 0;
z-index: 95;
backdrop-filter: blur(6px);
box-shadow: 0 6px 20px rgba(11,97,255,0.04);
}
/* Ensure logo/login area is above the ad banner and visible */
.top-hero-container { position: relative; }
.logo-block { position: relative; z-index: 20; }
.logo-area-extra { position: relative; z-index: 22; }
.user-summary { position: relative; z-index: 24; }
.top-hero-container { display:flex; gap:20px; align-items:stretch; justify-content:space-between; }
.logo-block { display:flex; flex-direction:column; justify-content:space-between; height:var(--ad-height); flex:0 0 auto; }
.logo-area { flex: 0 0 auto; }
.logo-area-extra { display:flex; align-items:flex-end; }
.logo-img-lg { height:200px; width:auto; border-radius:12px; box-shadow:0 30px 80px rgba(11,97,255,0.08); transition: transform 0.18s ease; }
.logo-img-lg:hover { transform: translateY(-4px); }
.ad-area { flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; }
.ad-carousel { width:100%; max-width:980px; height:var(--ad-height); overflow:hidden; border-radius:12px; box-shadow:var(--shadow-sm); border:1px solid var(--border-color); background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(244,248,255,0.6)); }
/* 将轮播高度整体增加 40px（原 160px -> 200px），以满足视觉要求 */
.ad-carousel { height: 200px; }
.ad-track { position:relative; height:100%; }
.ad-track > a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; /* anchor wraps the slide */ }
.ad-track > a .ad-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ad-track > a { z-index: 1; pointer-events: none; /* prevent inactive anchors from blocking clicks */ }
.ad-track > a.active { z-index: 5; pointer-events: auto; }
.ad-slide { position: absolute; left:0; top:0; width:100%; height:100%; border-radius:8px; object-fit:cover; object-position:center; display:block; opacity:0; transition: opacity 0.9s ease-in-out; z-index:1; }
.ad-slide.active { opacity:1; z-index:6; }
/* 支持把激活状态放到包裹的 元素上：当 有 .active 时，显示内部图片 */
.ad-track > a.active .ad-slide { opacity:1; z-index:6; }
/* 控制按钮样式 */
/* 控制按钮：覆盖在图片上（左右两侧垂直居中），分页点保留在图片底部居中 */
.ad-controls {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none; /* 默认不拦截，按钮自己启用 pointer-events */
}
.ad-prev,
.ad-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 22;
background: rgba(0,0,0,0.45);
color: #ffffff;
width: 48px;
height: 48px;
border-radius: 10px;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
box-shadow: 0 8px 26px rgba(2,6,23,0.36);
pointer-events: auto;
transition: transform 0.18s ease, background 0.18s ease;
}
.ad-prev { left: 12px; }
.ad-next { right: 12px; }
.ad-prev:hover, .ad-next:hover { transform: translateY(-50%) scale(1.04); background: rgba(0,0,0,0.52); }
/* 分页点：覆盖在图片底部居中 */
.ad-dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 12px;
display: flex;
gap: 8px;
z-index: 24;
pointer-events: auto;
}
.ad-dots button { width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,0.6); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.ad-dots button.active { background:var(--primary-blue); }
/* 分页点 */
.ad-dots { position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:8px; z-index:12; }
.ad-dots button { width:10px; height:10px; border-radius:50%; border:none; background:rgba(255,255,255,0.6); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.ad-dots button.active { background:var(--primary-blue); }
/* 顶部 LOGO 与用户区域（高端大气排列） */
.brand-user { display:flex; align-items:center; margin-left:14px; }
.user-summary { display:flex; align-items:center; gap:12px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,252,255,0.85)); padding:8px 12px; border-radius:12px; border:1px solid rgba(11,97,255,0.06); box-shadow: 0 10px 30px rgba(11,97,255,0.04); }
.user-summary .user-logged-in { display:flex; align-items:center; gap:8px; }
.user-summary #userAvatar { width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg,#e3f2fd,#bbdefb); color:#0b61ff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(11,97,255,0.06); font-size:14px; }
.user-summary .user-meta { display:flex; flex-direction:column; min-width:0; max-width:140px; }
.user-summary #userName { font-weight:800; color:var(--text-primary); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-summary #userRole { font-size:12px; color:var(--text-tertiary); opacity:0.9; }
.user-summary .user-logged-out { display:flex; align-items:center; gap:8px; }
.user-summary .auth-link { color:var(--primary-blue); text-decoration:none; font-weight:700; padding:4px 8px; border-radius:8px; }
.user-summary .divider { color:var(--text-tertiary); }
.user-summary .btn-secondary { padding:6px 10px; border-radius:8px; font-size:13px; }
@media (max-width:880px) {
.brand-user { margin-left:0; }
.user-summary { padding:6px 10px; border-radius:10px; gap:8px; }
.user-summary #userAvatar { width:34px; height:34px; }
.user-summary .user-meta { min-width:60px; }
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ad-slide { transition:none; }
}
/* 主导航为单独一行，按钮式链接 */
.main-nav { padding: 12px 0; border-top:1px solid rgba(15,33,64,0.02); border-bottom:1px solid rgba(15,33,64,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,252,255,0.95)); }
.nav-menu.nav-buttons { display:flex; gap:12px; align-items:center; }
.nav-menu.nav-buttons .nav-link { display:inline-block; padding:10px 16px; border-radius:10px; background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)); color:var(--text-secondary); border:1px solid transparent; font-weight:700; }
.nav-menu.nav-buttons .nav-link.active { background: linear-gradient(90deg, rgba(107,72,255,0.10), rgba(11,97,255,0.06)); color:var(--primary-blue-dark); box-shadow: 0 6px 22px rgba(11,97,255,0.06); }
.nav-menu.nav-buttons .nav-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color:var(--primary-blue-dark); }
/* 保持 userSummary 与退出按钮样式一致 */
#userSummary { display:flex; align-items:center; gap:12px; }
#userSummary #userName { font-weight:700; }
/* 移动端：logo 与广告分行显示，导航为单行按钮排列（换行时居中） */
@media (max-width: 760px) {
.top-hero-container { flex-direction:column; align-items:stretch; gap:12px; }
.logo-block { flex-direction:row; height:auto; align-items:center; gap:12px; }
.logo-area { display:flex; align-items:center; }
.logo-area-extra { align-items:center; }
.ad-area { width:100%; justify-content:flex-start; order:2; }
.logo-area, .logo-area-extra { order:1; }
/* 手机视图：把 logo 与轮播高度减小为桌面尺寸的一半 */
/* 桌面： .logo-img-lg 140px, .ad-carousel 160px -> 手机: 70px / 80px */
/* 在手机上额外增加 30rpx 的高度要求，这里用 calc 增加 30px 作为接近的替代 */
.ad-carousel { height: calc(80px + 30px + 20px); }
.logo-img-lg { height: calc(70px + 30px); }
/* 移除顶部多余内边距，使头部贴顶 */
.top-hero { padding-top: 0; }
.nav-menu.nav-buttons { flex-wrap:wrap; gap:10px; justify-content:flex-start; }
}
@media (max-width: 420px) {
/* 小屏同样按一半尺寸显示，必要时可以再做微调 */
.logo-img-lg { height: calc(70px + 30px); }
.ad-carousel { height: calc(80px + 30px + 20px); }
.top-hero { padding-top: 0; }
}
/* ---------- 高端大气 视觉覆盖（更高优先级，覆盖前面的基础样式） ---------- */
/* 头部：蓝色轻微渐变 + 细边框，显得更有质感 */
.top-hero {
background: linear-gradient(180deg, rgba(11,97,255,0.05), rgba(255,255,255,0.96));
border-bottom: 1px solid rgba(11,97,255,0.04);
}
/* logo 更有浮雕感，hover 更强烈 */
.logo-img-lg {
height: 140px; /* 桌面基准 */
width: auto;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(11,97,255,0.08);
transition: transform 0.22s ease, box-shadow 0.28s ease;
}
.logo-img-lg:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 40px 110px rgba(11,97,255,0.12); }
/* 轮播容器微调：更圆、更柔和的阴影 */
.ad-carousel {
border-radius: 14px;
box-shadow: 0 12px 40px rgba(11,97,255,0.06);
border: 1px solid rgba(11,97,255,0.06);
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,248,255,0.98));
}
/* 玻璃化左右箭头按钮（更高端的视觉） */
.ad-prev, .ad-next {
width: 56px; height:56px; border-radius:14px;
background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
border: 1px solid rgba(255,255,255,0.14);
color: var(--primary-blue);
box-shadow: 0 12px 36px rgba(11,97,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.04);
transition: transform 0.22s cubic-bezier(.2,.9,.2,1), box-shadow 0.22s ease, background 0.22s ease;
}
.ad-prev:hover, .ad-next:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 18px 50px rgba(11,97,255,0.12); }
.ad-prev svg, .ad-next svg { width:22px; height:22px; color: var(--primary-blue); }
/* 分页点更精致 */
.ad-dots button { width:12px; height:12px; border-radius:50%; border: 1px solid rgba(255,255,255,0.36); background: rgba(255,255,255,0.6); box-shadow: 0 6px 18px rgba(11,97,255,0.06); transition: transform 0.18s ease; }
.ad-dots button.active { background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light)); box-shadow: 0 12px 36px rgba(11,97,255,0.14); border-color: rgba(11,97,255,0.14); }
/* 导航激活态更沉稳 */
.nav-menu.nav-buttons .nav-link.active { background: linear-gradient(90deg, rgba(11,97,255,0.10), rgba(74,140,255,0.06)); color: var(--primary-blue-dark); box-shadow: 0 10px 30px rgba(11,97,255,0.08); }
/* 统计卡片升级 */
.stat-card { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.96)); border: 1px solid rgba(11,97,255,0.04); box-shadow: 0 12px 40px rgba(11,97,255,0.04); padding:18px; border-radius:14px; }
.stat-value { font-size:28px; font-weight:800; margin-bottom:8px; color:var(--primary-blue-dark); }
/* 页面主标题更醒目 */
.page-title { font-size:2.1rem; color:var(--primary-blue-dark); font-weight:800; margin-bottom:20px; }
/* 搜索区域提升质感 */
.search-container { padding:18px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.98)); border:1px solid rgba(11,97,255,0.03); box-shadow:0 12px 40px rgba(11,97,255,0.03); }
.search-input { padding:12px 16px; border-radius:10px; }
/* 表格包装更简洁 */
.table-wrapper { padding:12px; }
/* 保证移动端的顶贴与高度微调仍生效（覆盖更早规则） */
@media (max-width: 760px) {
.logo-img-lg { height: calc(70px + 30px) !important; }
/* 手机端在原有基础上再增加 10px（近似 10rpx） */
.ad-carousel { height: calc(80px + 30px + 10px) !important; }
.top-hero { padding-top: 0 !important; }
}
/* 弹窗表单行小样式，编辑弹窗使用 */
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row label { color:var(--text-secondary); font-weight:600; font-size:0.95rem; }
.form-row input.search-input { padding:10px 12px; border-radius:8px; border:1px solid var(--border-color); background:var(--bg-primary); }
/* ----------------- COS 列表移动端适配 ----------------- */
/* 在小屏幕上允许表格容器横向滚动；在极窄屏时将表格行转换为卡片样式 */
@media (max-width: 768px) {
/* 确保 COS 列表可横向滚动 */
#cosListContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#cosTable { width: 100%; min-width: 640px; border-collapse: collapse; }
}
@media (max-width: 480px) {
/* 在极窄屏下，将表格头隐藏并把每一行显示为卡片（便于阅读与操作） */
#cosTable thead { display: none; }
#cosTable, #cosTable tbody, #cosTable tr, #cosTable td { display: block; width: 100%; }
#cosTable tr { margin-bottom: 10px; background: var(--bg-secondary); border-radius: 10px; padding: 8px; box-shadow: 0 6px 18px rgba(11,97,255,0.03); }
#cosTable td { padding: 10px 12px; text-align: left; border-bottom: none; }
/* 使用 data-label 属性在每个单元前显示字段标题 */
#cosTable td::before { content: attr(data-label) ": "; display: inline-block; min-width:86px; font-weight:700; color:var(--text-tertiary); }
/* 调整链接换行 */
#cosTable td a { word-break: break-all; display: inline; color:var(--primary-blue); }
/* 隐藏表内不必要的样式 */
#cosTable { background: transparent; }
/* 微调控制面板元素堆叠 */
.search-container { flex-direction: column; align-items: stretch; }
.search-container .search-input { width: 100%; }
/* 控件按钮在小屏时换行显示并全宽 */
#refreshCosBtn, #exportBtn, #refreshBtn { width: 100%; }
}
/* COS 控件在移动端垂直排列（每项独占一行） */
@media (max-width: 480px) {
.cos-controls { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.cos-controls > * { width:100%; min-width:0; }
.cos-controls .search-input { box-sizing:border-box; }
/* 将 select 调整为更合适的高度与内边距 */
.cos-controls select.search-input { padding:10px 12px; }
}
/* ===================== 深蓝轮廓与渐变强化（追加覆盖） ===================== */
:root {
--outline-blue-strong: rgba(0,58,153,0.18);
--outline-blue-deep: #002a7a;
--card-gradient-start: rgba(230,244,255,1);
--card-gradient-end: rgba(245,251,ff,1); /* fallback, will be overridden if invalid */
}
/* 全局背景：冬日冰霜渐变 */
body {
background: linear-gradient(180deg, #f8fcff 0%, #eef7fb 55%, #e8f3f7 100%);
}
/* 通用卡片：深蓝色轮廓 + 轻柔渐变背景 */
.card, .card--elevated, .profile-wrapper, .profile-section, .stat-card, .table-wrapper, .modal-content {
background: linear-gradient(180deg, #ffffff 0%, rgba(238,246,255,0.9) 100%);
border-radius: 14px;
padding: 14px;
position: relative;
border: 2px solid transparent;
/* border-image 支持渐变边框，兼容现代浏览器 */
-webkit-border-image: linear-gradient(90deg, var(--primary-blue-dark), var(--primary-blue)) 1;
border-image: linear-gradient(90deg, var(--primary-blue-dark), var(--primary-blue)) 1;
box-shadow: 0 18px 40px rgba(0,58,153,0.06), 0 6px 18px rgba(0,82,204,0.04);
}
/* 更明显的深色轮廓变体（用于强调面板） */
.card--outlined {
border: 2px solid var(--outline-blue-strong);
box-shadow: 0 22px 60px rgba(0,58,153,0.10), inset 0 1px 0 rgba(255,255,255,0.4);
}
/* 标题与分隔色强化 */
.profile-section h3, .page-title, .section-header .section-title {
color: var(--primary-blue-dark);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/* 按钮 - 高级样式（带图标支持） */
.btn {
display:inline-flex; align-items:center; gap:10px; justify-content:center;
padding: 0.7rem 1.2rem; border-radius: 12px; font-weight:700; cursor:pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none }
.btn-primary {
background: linear-gradient(90deg, var(--primary-blue-dark), var(--primary-blue));
color: #fff; border: none; box-shadow: 0 16px 60px rgba(0,82,204,0.14);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 28px 90px rgba(0,82,204,0.18); }
.btn-secondary {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,246,255,0.98));
color: var(--primary-blue-dark); border: 1px solid rgba(0,82,204,0.10);
}
.btn-secondary:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,82,204,0.06); }
/* 图标样式：圆形背景与色块高亮，便于辨识 */
.icon {
display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
background: linear-gradient(180deg, rgba(240,248,255,1), rgba(230,244,255,1));
color: var(--primary-blue-dark); box-shadow: 0 6px 18px rgba(0,58,153,0.06); flex:0 0 36px;
}
.icon svg, .icon img { width:18px; height:18px; display:block; }
/* 支持图标按钮 */
.btn-icon { padding: 8px 12px; }
.btn-icon .icon { width:28px; height:28px; }
/* 输入的更明显聚焦边框 */
.form-group input, .search-input, select {
border: 1px solid rgba(0,58,153,0.08);
transition: box-shadow 0.15s ease, border-color 0.12s ease;
}
.form-group input:focus, .search-input:focus, select:focus {
border-color: var(--primary-blue-dark);
box-shadow: 0 10px 36px rgba(0,82,204,0.10), 0 0 0 6px rgba(51,133,255,0.04);
outline: none;
}
/* 表格行的卡片化（强调轮廓） */
#cosTable tr, #usersTable tbody tr { background: linear-gradient(180deg,#ffffff,#f7fbff); border-radius:10px; }
#cosTable td, #usersTable td { border-bottom: 1px solid rgba(0,82,204,0.03); }
/* 弹性适配：对深蓝轮廓样式降低在极窄屏上的阴影与边框厚度 */
@media (max-width:480px){
.card, .card--elevated, .profile-wrapper, .profile-section { border:1px solid rgba(0,58,153,0.10); box-shadow: 0 8px 20px rgba(0,58,153,0.04); }
.btn { padding: 0.6rem 0.9rem; }
.icon { width:30px; height:30px; }
}
/* 小结提示：可将 .card 类添加到任何容器（例如 .profile-section, .table-wrapper）来获得统一的深蓝轮廓 */
/* 深蓝模式（用于极具视觉冲击的容器） */
.card--deep {
background: linear-gradient(180deg, #002a66 0%, #003a99 60%);
color: #ffffff;
border-radius: 14px;
padding: 18px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 30px 80px rgba(0,18,77,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.card--deep h3, .card--deep .page-title, .card--deep .section-title { color: #e6f2ff; }
.card--deep .label, .card--deep .stat-label { color: rgba(255,255,255,0.8); }
.card--deep .value, .card--deep .stat-value { color: #ffffff; font-weight:700; }
.card--deep .search-input, .card--deep input, .card--deep select { background: rgba(255,255,255,0.06); color: #ffffff; border: 1px solid rgba(255,255,255,0.06); }
.card--deep .btn-secondary { background: rgba(255,255,255,0.06); color: #cfe6ff; border: 1px solid rgba(255,255,255,0.08); }
.card--deep .btn-primary { box-shadow: 0 18px 60px rgba(0,82,204,0.18); }
.card--deep a, .card--deep a:link, .card--deep a:visited { color: #bfe3ff; }
@media (max-width:480px){
.card--deep { padding: 12px; border-width:1px; box-shadow: 0 8px 22px rgba(0,18,77,0.18); }
.card--deep .search-input, .card--deep input, .card--deep select { background: rgba(255,255,255,0.04); }
}
/* ====================================================================
Local overrides: improve CTA readability and remove harsh desktop
border for the 'About' container on large screens. Scoped to
.page-main so other admin/manage pages are unaffected.
==================================================================== */
@media (min-width: 760px) {
/* weaken the card border-image which produced a heavy blue frame on desktop */
.page-main .card {
border-image: none !important;
border: 1px solid rgba(0,90,141,0.06) !important; /* soft ocean outline */
box-shadow: 0 10px 28px rgba(0,90,141,0.04);
background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
}
/* lighten primary CTA in page content so '立即加入社区' is legible */
.page-main .btn-primary {
background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-light)) !important;
color: #ffffff !important;
box-shadow: 0 12px 36px rgba(0,90,141,0.08) !important;
border: none !important;
padding: 12px 18px !important;
font-weight: 800 !important;
}
.page-main .btn-primary:hover {
transform: translateY(-3px) !important;
box-shadow: 0 18px 48px rgba(0,90,141,0.12) !important;
}
}
/* Small screens: keep original compact button sizing but ensure contrast */
@media (max-width: 759px) {
.page-main .btn-primary {
padding: 10px 14px !important;
font-weight:700 !important;
/* mobile: use lighter-to-deeper mint->ocean gradient so button reads clearly */
background: linear-gradient(90deg, var(--primary-blue-light), var(--primary-blue)) !important;
color: #ffffff !important;
box-shadow: 0 8px 20px rgba(0,90,141,0.06) !important;
border: none !important;
}
/* reduce hover/active intensity on mobile to avoid too-dark appearance */
.page-main .btn-primary:active,
.page-main .btn-primary:focus {
transform: none !important;
box-shadow: 0 6px 14px rgba(0,90,141,0.05) !important;
}
}