/* ===== 主题变量：白 / 黑两套，简约科技风 ===== */
:root{
  --bg:#f6f7f9; --bg-2:rgba(255,255,255,.82); --bg-3:#eef0f3;
  --card:rgba(255,255,255,.86); --card-border:#e4e7ec;
  --text:#1a1d21; --text-2:#5a6068; --text-3:#8b9099;
  --accent:#2563eb; --accent-2:#60a5fa; --accent-soft:#e8f0fe;
  --shadow:0 1px 3px rgba(16,24,40,.06);
  --radius:12px;
}
html[data-theme="dark"]{
  --bg:#0d1117; --bg-2:rgba(22,27,34,.84); --bg-3:#1c2330;
  --card:rgba(22,27,34,.88); --card-border:#2a3140;
  --text:#e6e9ef; --text-2:#9aa3b2; --text-3:#6b7280;
  --accent:#3b82f6; --accent-2:#93c5fd; --accent-soft:#16233a;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  transition:background .25s,color .25s;
}
#app{min-height:100vh;display:flex;flex-direction:column}
main.container{flex:1;width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{
  font-family:inherit;font-size:14px;color:var(--text);
  background:var(--bg-3);border:1px solid var(--card-border);
  border-radius:8px;padding:8px 12px;outline:none;width:100%;
}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:120px}

/* ===== 顶栏 ===== */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:12px 24px;background:var(--bg-2);border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(8px);
}
.topbar .logo{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.logo-dot{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.topbar nav a{
  padding:6px 14px;border-radius:8px;font-size:14px;color:var(--text-2);
  transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.topbar nav a:hover,.topbar nav a.active{background:var(--accent-soft);color:var(--accent)}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-btn{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--card-border);background:var(--bg-2);color:var(--text-2);font-size:15px;
  transition:all .15s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ===== 内容区 ===== */
.container{max-width:1100px;margin:0 auto;padding:28px 20px 0}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ===== 卡片模块 ===== */
.card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;
  position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card h3{font-size:16px;margin-bottom:8px;font-weight:600}
.card p{font-size:13px;color:var(--text-2)}
.card .meta{font-size:12px;color:var(--text-3);margin-top:12px;display:flex;gap:12px}
.tag{
  display:inline-block;font-size:11px;padding:2px 10px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);margin-right:6px;
}

/* 文章卡片 */
.post-card .excerpt{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* 导航标签卡片 */
.nav-card{display:flex;align-items:center;gap:12px;padding:14px 18px}
.nav-card img,.nav-card .nav-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--accent);font-weight:600;object-fit:contain;
}
.nav-card .info{flex:1;min-width:0}
.nav-card .info .name{font-size:14px;font-weight:500}
.nav-card .info .url{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Alist 文件卡片 */
.file-card{display:flex;align-items:center;gap:12px;padding:14px 18px}
.file-card .f-icon{font-size:22px}
.file-card .info{flex:1;min-width:0}
.file-card .info .name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card .info .size{font-size:12px;color:var(--text-3)}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;
  font-size:14px;font-weight:500;transition:all .15s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{opacity:.88}
.btn-ghost{border:1px solid var(--card-border);color:var(--text-2);background:var(--bg-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:#dc2626;color:#fff}
.btn-sm{padding:4px 12px;font-size:13px}

/* ===== 空状态 ===== */
.empty{
  text-align:center;padding:60px 20px;color:var(--text-3);font-size:14px;
}
.empty .big{font-size:40px;margin-bottom:12px;opacity:.5}

/* ===== 自然风景背景：每个大类页面不同风景 ===== */
.page-bg{
  position:fixed;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  background-image:url(/img/bg-home.jpg);
}
body[data-page="bg-home"] .page-bg{background-image:url(/img/bg-home.jpg)}
body[data-page="bg-posts"] .page-bg{background-image:url(/img/bg-posts.jpg)}
body[data-page="bg-nav"] .page-bg{background-image:url(/img/bg-nav.jpg)}
body[data-page="bg-files"] .page-bg{background-image:url(/img/bg-files.jpg)}
.page-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,247,249,.55),rgba(246,247,249,.78) 60%,rgba(246,247,249,.92));
}
html[data-theme="dark"] .page-bg::after{
  background:linear-gradient(180deg,rgba(13,17,23,.55),rgba(13,17,23,.8) 60%,rgba(13,17,23,.94));
}

/* ===== 首页：欢迎横幅 + 大链接方块 ===== */
.home-hero{padding:36px 30px;margin-bottom:24px}
.home-hero h2{font-size:26px;margin-bottom:8px}
.home-hero p{color:var(--text-2);font-size:15px}
.home-entries{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-bottom:36px;
}
.entry-card{
  display:flex;align-items:center;gap:18px;padding:26px 24px;border-radius:16px;
  background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.entry-card:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 8px 24px rgba(37,99,235,.15);
}
.entry-card .e-icon{
  font-size:32px;width:64px;height:64px;border-radius:14px;flex-shrink:0;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
}
.entry-card .e-info{flex:1;min-width:0;display:block}
.entry-card .e-info .name{display:block;font-size:18px;font-weight:700;margin-bottom:4px}
.entry-card .e-info .desc{display:block;font-size:13px;color:var(--text-2)}
.entry-card .e-arrow{font-size:20px;color:var(--text-3);transition:transform .18s,color .18s}
.entry-card:hover .e-arrow{transform:translateX(4px);color:var(--accent)}
.section-title{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ===== 页脚备案 ===== */
.footer{
  margin-top:48px;padding:24px;text-align:center;font-size:13px;color:var(--text-3);
  border-top:1px solid var(--card-border);
  background:var(--bg-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.footer a{color:var(--text-3)}
.footer a:hover{color:var(--accent)}

/* ===== 编辑器/文章页 ===== */
.page-header{margin-bottom:24px}
.page-header h2{font-size:22px;font-weight:700}
.page-header .sub{font-size:14px;color:var(--text-2);margin-top:4px}
.article-view{max-width:780px}
.article-view .title{font-size:26px;font-weight:700;margin-bottom:12px}
.article-view .content{font-size:15px;word-break:break-word}
.article-view .content h1,.article-view .content h2{margin:18px 0 8px}

/* ===== 分类标签筛选 chips ===== */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{
  padding:6px 16px;border-radius:20px;font-size:13px;color:var(--text-2);
  background:var(--card);border:1px solid var(--card-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all .15s;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.group-title{
  font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.group-title::before{content:'';width:4px;height:16px;border-radius:2px;background:var(--accent)}
.group-title .cnt{font-size:12px;font-weight:400;color:var(--text-3);background:var(--bg-3);padding:1px 10px;border-radius:12px}

/* ===== 富文本正文渲染 ===== */
.rich-content{line-height:1.8}
.rich-content p{margin:6px 0}
.rich-content img{max-width:100%;border-radius:10px;margin:8px 0}
.rich-content blockquote{
  border-left:4px solid var(--accent);background:var(--accent-soft);
  padding:10px 16px;margin:12px 0;border-radius:0 10px 10px 0;color:var(--text-2);
}
.rich-content h2,.rich-content h3,.rich-content h4{margin:18px 0 8px}
.rich-content ul,.rich-content ol{padding-left:24px;margin:8px 0}
.rich-content a{color:var(--accent);text-decoration:underline}
.rich-content .video-wrap{margin:12px 0}
.rich-content video{max-width:100%;border-radius:10px;background:#000}

/* ===== 代码块（展示 + 高亮） ===== */
pre.code-block{
  position:relative;background:#0d1117;border:1px solid #2a3140;border-radius:10px;
  padding:16px 18px;margin:14px 0;overflow-x:auto;
}
pre.code-block code{
  font-family:Consolas,Monaco,'Courier New',monospace;font-size:13px;line-height:1.6;
  color:#e6e9ef;white-space:pre;display:block;
}
.tk-kw{color:#ff7b72}
.tk-str{color:#a5d6ff}
.tk-cm{color:#8b949e;font-style:italic}
.tk-num{color:#79c0ff}
.code-copy{
  position:absolute;top:8px;right:8px;font-size:12px;padding:3px 10px;border-radius:6px;
  background:#21262d;color:#9aa3b2;border:1px solid #30363d;
}
.code-copy:hover{color:#fff;border-color:#58a6ff}
.code-lang{
  position:absolute;top:8px;right:64px;font-size:11px;color:#6b7280;
  background:#21262d;padding:2px 8px;border-radius:6px;border:1px solid #30363d;
}

/* ===== 富文本编辑器（后台） ===== */
.re-wrap{border:1px solid var(--card-border);border-radius:10px;overflow:visible;background:var(--bg-3)}
.re-toolbar{
  display:flex;gap:3px;flex-wrap:wrap;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--card-border);background:var(--bg-2);
  border-radius:10px 10px 0 0;position:sticky;top:0;z-index:5;
}
.re-btn{
  min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-size:13px;color:var(--text-2);
  display:inline-flex;align-items:center;justify-content:center;
}
.re-btn:hover{background:var(--accent-soft);color:var(--accent)}
.re-select{width:auto;padding:4px 8px;font-size:12px;height:30px}
.re-sep{width:1px;height:20px;background:var(--card-border);margin:0 4px}
.re-area{
  min-height:280px;max-height:52vh;overflow-y:auto;padding:16px 18px;outline:none;
  font-size:14px;line-height:1.8;background:var(--bg-2);border-radius:0 0 10px 10px;
}
.re-area img{max-width:100%;border-radius:8px}
.re-area blockquote{border-left:4px solid var(--accent);background:var(--accent-soft);padding:8px 14px;margin:10px 0;border-radius:0 8px 8px 0}
.re-area pre.code-block{margin:10px 0}
.re-pop{
  position:absolute;top:46px;left:10px;z-index:30;
  background:var(--bg-2);border:1px solid var(--card-border);border-radius:10px;
  padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);backdrop-filter:blur(12px);
}
.re-color{display:inline-block;width:22px;height:22px;border-radius:6px;margin:3px;cursor:pointer;border:1px solid var(--card-border)}
.re-emoji-pop{width:min(430px,80vw);max-height:220px;overflow-y:auto}
.re-emoji{font-size:20px;padding:4px;cursor:pointer;display:inline-block;border-radius:6px}
.re-emoji:hover{background:var(--accent-soft)}
.re-code-input{
  font-family:Consolas,Monaco,'Courier New',monospace;font-size:13px;
  min-height:200px;background:#0d1117;color:#e6e9ef;border-color:#2a3140;
}

/* ===== 管理后台 ===== */
.admin-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;
}
.admin-panel{
  background:var(--bg-2);border:1px solid var(--card-border);border-radius:16px;
  width:min(960px,94vw);max-height:92vh;overflow:auto;padding:28px;
}
.admin-panel h2{font-size:18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.admin-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--card-border);padding-bottom:12px;flex-wrap:wrap}
.admin-tabs button{padding:7px 16px;border-radius:8px;font-size:14px;color:var(--text-2)}
.admin-tabs button.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.admin-section{display:none}
.admin-section.active{display:block}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.list-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--card-border);
  border-radius:10px;margin-bottom:10px;background:var(--card);
}
.list-item .grow{flex:1;min-width:0}
.list-item .name{font-size:14px;font-weight:500}
.list-item .desc{font-size:12px;color:var(--text-3)}
.drag-handle{cursor:grab;color:var(--text-3);padding:0 4px;user-select:none}
.list-item.dragging{opacity:.4}
.list-item.drag-over{border-color:var(--accent);border-style:dashed}

/* 模块选择器（新增模块） */
.module-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.module-picker .opt{
  border:1px solid var(--card-border);border-radius:10px;padding:16px;text-align:center;
  cursor:pointer;transition:all .15s;
}
.module-picker .opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.module-picker .opt .ic{font-size:26px;margin-bottom:6px}
.module-picker .opt .nm{font-size:13px;font-weight:500}

@media(max-width:640px){
  .form-grid,.module-picker{grid-template-columns:1fr}
  .topbar{padding:10px 14px;flex-wrap:wrap}
  .topbar nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
}