/* =====================================================================
  一夜网 · 毛玻璃样式（css/style.css）
  ---------------------------------------------------------------------
  本文件负责网站"长什么样"：配色、毛玻璃卡片、按钮、排版、手机适配。
  ★ 各样式与"对应结果"对照 ★
  - .glass / .topbar / .site-card → 毛玻璃半透明效果
  - .quick-nav / .quick-btn       → 大板块快捷跳转按钮
  - .group-block / .group-title   → 大板块下的小板块标题
  - .brand-logo                   → 顶部 logo 图片
  - @media 断点                   → 手机/平板/电脑自适应
===================================================================== */
:root{
  /* 颜色变量：改这里的值就能全局换配色 */
  --bg-0:#0a0e1f;            /* 页面最深背景 */
  --bg-1:#101a3a;            /* 页面渐变色背景 */
  --glass:rgba(255,255,255,.07);   /* 毛玻璃基础底色 */
  --glass-2:rgba(255,255,255,.12); /* 毛玻璃加强底色（hover 用） */
  --stroke:rgba(255,255,255,.14);  /* 边框色 */
  --text:#eef2ff;            /* 主文字色 */
  --text-dim:#a9b4d0;        /* 次要文字色 */
  --text-faint:#7c87a6;      /* 弱化文字色 */
  --accent:#6d8dff;          /* 强调色（蓝） */
  --accent-2:#9a5cff;        /* 强调色（紫） */
  --radius:18px;             /* 圆角大小 */
  --shadow:0 10px 40px rgba(0,0,0,.35); /* 卡片阴影 */
}
*{box-sizing:border-box;margin:0;padding:0}
/* 让带 hidden 属性的元素真正隐藏（否则会被下面 display 覆盖导致弹窗默认显示） */
[hidden]{display:none!important}
/* 屏幕阅读器专用隐藏（人看不见，搜索引擎/读屏能读到） */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg-0),var(--bg-1)); /* 深蓝紫渐变夜空 */
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}

/* ---- 本地视频背景（背景改用视频，替代单一渐变） ----
   视频铺满全屏并裁切填充（object-fit:cover），固定在页面最底层。
   亮度调到 0.8、遮罩降到半透明，让视频内容清晰可见，同时前景文字仍可读 */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none;background:var(--bg-0);filter:brightness(.95) saturate(1.05)}
/* 深色半透明遮罩：压暗一点保证文字可读，但保留视频画面的可见度 */
.bg-veil{position:fixed;inset:0;background:linear-gradient(160deg,rgba(8,12,32,.38),rgba(16,10,46,.42));z-index:-1;pointer-events:none}

/* ---- 背景氛围光球（叠加在视频与遮罩之上，增加层次；纯装饰） ---- */
.bg-orbs{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.orb-a{width:420px;height:420px;top:-120px;left:-80px;background:radial-gradient(circle,#3b6dff,#1e3a8a55)}
.orb-b{width:360px;height:360px;top:20%;right:-100px;background:radial-gradient(circle,#9a5cff,#4a1e8a55)}
.orb-c{width:380px;height:380px;bottom:-120px;left:30%;background:radial-gradient(circle,#00b3c2,#0a5a6a55)}

/* ---- 毛玻璃通用卡片（半透明 + 模糊 + 细边框） ---- */
.glass{
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ================= 顶部导航 ================= */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,14,31,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke)}
.topbar-inner{display:flex;align-items:center;gap:16px;height:62px}
/* 品牌：logo 图片 + 站名 */
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid var(--stroke);flex-shrink:0}  /* 顶部 logo 图片：固定宽高、自动裁切、不缩放变形 */
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.brand-name{font-size:18px;font-weight:700;letter-spacing:.5px}
.main-nav{display:flex;gap:4px;margin-left:10px}
.nav-link{padding:7px 12px;border-radius:9px;font-size:15px;color:var(--text-dim);transition:.2s}
.nav-link:hover{color:var(--text);background:var(--glass-2)}
.nav-link.active{color:#fff;background:var(--glass-2)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{display:none}  /* 手机端菜单按钮，窄屏才显示 */

/* ---- 按钮 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;font-size:15px;padding:9px 16px;transition:.2s;min-height:40px}
.btn-ghost{background:var(--glass);border:1px solid var(--stroke);color:var(--text)}
.btn-ghost:hover{background:var(--glass-2)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-block{width:100%}

/* ================= 搜索框 ================= */
.search-card{margin:24px 0 14px;padding:6px}
.search-inner{display:flex;align-items:center;gap:12px;padding:6px 16px}
.search-inner svg{color:var(--text-dim);flex:none}
.search-inner input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:16px;min-height:40px}
.search-inner input::placeholder{color:var(--text-faint)}
.search-count{color:var(--text-faint);font-size:13px;white-space:nowrap}

/* ================= 大板块快捷跳转按钮 =================
  结果：一行 8 个按钮，点击平滑滚动到对应大板块；窄屏可左右滑动。
  ★ 吸顶固定：滚动时始终贴在顶部导航下方，随时可点分类，避免长页面翻不到头 */
.quick-nav{display:flex;gap:8px;overflow-x:auto;padding:10px;margin:0 0 14px;-webkit-overflow-scrolling:touch;position:sticky;top:62px;z-index:44;background:rgba(10,14,31,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px}
.quick-btn{flex:none;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:11px;background:var(--glass);border:1px solid var(--stroke);color:var(--text);font-size:14px;transition:.2s}
.quick-btn:hover{background:var(--glass-2);border-color:rgba(109,141,255,.5)}
.quick-ico{display:grid;place-items:center;color:var(--accent)}

/* ================= 今日历卡（农历 + 节日 + 时间轴） ================= */
.today-card{margin:0 0 18px;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.today-main{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.today-date{display:flex;flex-direction:column}
.today-week{font-size:22px;font-weight:700}
.today-solar{color:var(--text-dim);font-size:14px;margin-top:2px}
.today-lunar{text-align:right}
.today-lunar-line{font-size:18px;font-weight:600}
.today-festival{display:inline-block;margin-top:6px;font-size:14px;color:#ffd57a;background:rgba(255,190,60,.12);border:1px solid rgba(255,190,60,.3);padding:3px 10px;border-radius:20px}
/* 节日倒计时时间轴（横向可滑动） */
.today-axis{display:flex;gap:8px;overflow-x:auto;padding:6px 0 4px;-webkit-overflow-scrolling:touch}
.axis-node{flex:none;min-width:118px;background:var(--glass-2);border:1px solid var(--stroke);border-radius:12px;padding:10px 12px}
.axis-node .ax-tag{font-size:12px;color:var(--accent);font-weight:600}
.axis-node .ax-name{font-size:14px;font-weight:600;margin-top:2px}
.axis-node .ax-days{font-size:12px;color:var(--text-faint)}

/* ================= 广告位 ================= */
/* 广告位容器：毛玻璃透明框（半透明 + 模糊 + 细边框 + 圆角），契合网站整体；
   内部放"广告位招租"文字 或 广告图片；三个广告位各自独立 */
.ad{overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-radius:16px;display:flex;align-items:center;justify-content:center}
/* 广告框：固定高度（顶部/底部横幅、侧边竖版）。广告素材(图片/GIF/视频)占满整个框、不变形自适应(cover) */
.ad-top{padding:0;margin:0 0 18px;height:150px;text-align:center;overflow:hidden}
.ad-side{padding:0;margin:0 0 16px;height:320px;text-align:center;overflow:hidden}
.ad-bottom{padding:0;margin:18px 0 0;height:150px;text-align:center;overflow:hidden}
.ad a{display:block;width:100%;height:100%;color:inherit}
.ad-title{font-weight:700;font-size:15px}
.ad-text{font-size:13px;color:var(--text-dim);margin-top:4px}
.ad img,.ad video{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}  /* 素材占满广告框、cover 保持比例不变形 */

/* ================= 布局（左主目录 + 右侧栏） ================= */
.layout{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.main-col{min-width:0}
.side-col{display:flex;flex-direction:column;gap:16px}

/* ================= 分类目录 ================= */
.cat-block{margin-bottom:26px}
.cat-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cat-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(109,141,255,.25),rgba(154,92,255,.25));border:1px solid var(--stroke);color:var(--accent)}
.cat-name{font-size:18px;font-weight:700}
.cat-desc{font-size:13px;color:var(--text-faint);margin-top:1px}
/* ---- 小分类 tab（需求：小板块改为"可选分类按钮"，点击切换集中显示，避免平铺臃肿） ---- */
.group-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.group-tab{padding:6px 13px;border-radius:999px;font-size:13px;color:var(--text-dim);background:var(--glass);border:1px solid var(--stroke);transition:.18s}
.group-tab:hover{color:var(--accent);border-color:rgba(109,141,255,.45)}
.group-tab.active{color:#fff;background:linear-gradient(135deg,#5b7cff,#9a5cff);border-color:transparent;box-shadow:0 4px 12px rgba(109,80,255,.35)}
/* 面板：默认只显示当前选中的小分类，其余隐藏 */
.group-panel{display:none}
.group-panel.active{display:block}
/* 网站卡片网格 */
.site-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.site-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .18s,border-color .18s,background .18s}
.site-card:hover{transform:translateY(-3px);border-color:rgba(109,141,255,.5);background:var(--glass-2)}
.site-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:20px;color:#fff;overflow:hidden;position:relative}
.site-ico img{width:100%;height:100%;object-fit:contain;padding:3px;border-radius:10px}   /* 网站真实图标：填满 44px 框，保持比例、不拉伸变形 */
.site-ico span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#fff}  /* favicon 抓不到时的首字母回退 */
.site-info{min-width:0;flex:1}
.site-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-desc{font-size:13px;color:var(--text-dim);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site-go{color:var(--text-faint);flex:none;transition:.2s}
.site-card:hover .site-go{color:var(--accent);transform:translateX(2px)}

/* ================= 右侧栏 ================= */
.side-block{padding:18px}
.side-title{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-title::before{content:"";width:4px;height:14px;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.friend-list,.contact-list{list-style:none}
.friend-list li,.contact-list li{padding:8px 2px;border-bottom:1px solid var(--stroke)}
.friend-list li:last-child,.contact-list li:last-child{border-bottom:none}
.friend-list a{display:block;font-size:14px;color:var(--text-dim);transition:.2s}
.friend-list a:hover{color:var(--accent);padding-left:4px}
.contact-list li{font-size:14px;color:var(--text-dim)}
.contact-list .k{color:var(--text-faint);margin-right:6px}
/* ---- 侧栏"今日公告"滚动卡片（公告文字实时滚动） ---- */
.notice-scroll{overflow:hidden;border:1px solid var(--stroke);border-radius:12px;background:rgba(8,12,30,.4)}
.notice-track{white-space:nowrap;padding:10px 12px;font-size:13px;color:var(--text-dim);display:inline-block;animation:notice-scroll 18s linear infinite}
.notice-track:hover{animation-play-state:paused}
@keyframes notice-scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ================= 页脚 ================= */
.footer{margin-top:40px;padding:24px 0 32px;border-top:1px solid var(--stroke);background:rgba(10,14,31,.5)}
.footer-inner{text-align:center}
.footer-brand{font-size:16px;font-weight:700;letter-spacing:1px}
.footer-links{margin-top:8px;display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}
.footer-links a{color:var(--text-dim);font-size:14px;transition:.2s}
.footer-links a:hover{color:var(--accent)}
.dot{color:var(--text-faint)}
.footer-icp{margin-top:8px;color:var(--text-faint);font-size:12px}

/* ================= 右下角悬浮挂件 ================= */
.float-dock{position:fixed;right:18px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--stroke);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);box-shadow:var(--shadow);transition:.2s}
.float-btn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}

/* ================= 弹窗（公告 / 申请收录） ================= */
.modal-mask{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,8,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:18px}
.modal{width:100%;max-width:440px;max-height:86vh;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--stroke)}
.modal-head h3{font-size:17px;font-weight:700}
.modal-close{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--text-dim);transition:.2s}
.modal-close:hover{background:var(--glass-2);color:#fff}
.modal-body{padding:18px 20px 22px}
.modal-tip{font-size:14px;color:var(--text-dim);margin-bottom:14px}
.apply-form{display:flex;flex-direction:column;gap:14px}
.apply-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-dim)}
.apply-form input,.apply-form select{height:44px;border-radius:10px;border:1px solid var(--stroke);background:var(--glass);color:var(--text);padding:0 12px;font-size:16px;outline:none}
.apply-form input:focus,.apply-form select:focus{border-color:var(--accent)}
.apply-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
/* 下拉选项颜色：深色底 + 浅色字，保证"所属分类"展开后选项文字清晰可见（不会白底白字） */
.apply-form select option{background:#0d1330;color:#e6ecff}

/* ================= 响应式（手机优先，桌面在 768px 扩展） ================= */
@media (min-width:768px){
  .site-grid{grid-template-columns:repeat(3,1fr)}   /* 桌面每行 3 张卡片 */
  .layout{grid-template-columns:1fr 300px}          /* 桌面显示右侧栏 */
  .cat-block:last-child{margin-bottom:0}
}
@media (max-width:640px){
  .wrap{padding:0 14px}
  .main-nav{display:none}                            /* 手机隐藏横向导航，用菜单按钮 */
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--text)}
  .main-nav.open{display:flex;flex-direction:column;position:absolute;top:62px;left:0;right:0;background:rgba(10,14,31,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke);padding:12px}
  .main-nav.open .nav-link{padding:13px 16px}
  .top-actions .btn-ghost{display:none}              /* 手机隐藏"申请收录"按钮（可用挂件） */
  .brand-logo{width:34px;height:34px;border-radius:8px}  /* 手机端 logo 略小，保证不挤压 */
  /* 小分类 tab：可横向滑动；按钮加大，触控更友好 */
  .group-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .group-tab{padding:9px 16px;font-size:14px;min-height:40px}
  /* 网站卡片：手机改 2 列（更紧凑、像 app 图标网格，减少滚动）；隐藏描述省空间 */
  .site-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .site-card{padding:12px;gap:10px;border-radius:14px}
  .site-ico{width:38px;height:38px;font-size:17px}
  .site-name{font-size:14px}
  .site-desc{display:none}
  /* 大分类快捷按钮：加大触控区 */
  .quick-btn{padding:10px 15px;font-size:14px;min-height:40px}
  /* 搜索框 */
  .search-card{margin:16px 0 12px}
  .search-inner{padding:4px 14px}
  .search-inner input{font-size:16px}
  /* 今日历卡 / 节日时间轴：手机端略紧凑 */
  .today-card{padding:16px}
  .today-week{font-size:20px}
  .axis-node{min-width:100px;padding:9px 11px}
  /* 广告：手机端广告框缩小，素材仍占满框不变形 */
  .ad-top,.ad-bottom{height:110px}
  .ad-side{height:260px}
  /* 按钮：触控友好（不低于 44px） */
  .btn{min-height:44px}
  /* 悬浮挂件 / 弹窗 */
  .float-dock{right:12px;bottom:16px}
  .modal-mask{padding:14px}
}