/* ==================================================================
   学无止境 · 笔记网站系统 全局样式表
   包含：深浅主题变量、导航栏、首页卡片、登录框、后台管理表格
   ================================================================== */

* { margin:0; padding:0; box-sizing:border-box;
    font-family:"Microsoft YaHei","PingFang SC",Helvetica,Arial,sans-serif; }

html, body { width:100%; height:100%; }

/* ---------- 主题变量：深色默认 ---------- */
:root {
    --bg-page:#080c18;              /* 页面底色（深蓝黑） */
    --text-main:#ffffff;            /* 主文字 */
    --text-sub:#90a4ae;             /* 次要文字 */
    --accent:#42a5f5;               /* 强调色（蓝） */
    --card-bg:rgba(12,18,32,0.55);  /* 卡片底色 */
    --card-border:rgba(66,165,245,0.22); /* 卡片边框 */
    --input-bg:rgba(255,255,255,0.08);  /* 输入框底色 */
    --nav-bg:rgba(10,16,28,0.94);   /* 导航栏底色（提高不透明度，sticky 时不被正文穿透） */
    --table-head:#14213b;           /* 表格表头底色 */
    --table-row:rgba(20,33,59,0.4); /* 表格行底色 */
    --danger:#ff6b6b;               /* 危险/删除按钮色 */
    --success:#4caf50;              /* 成功/保存按钮色 */
}

/* ---------- 主题变量：浅色（点按钮切换） ---------- */
html.light {
    --bg-page:#ffffff;
    --text-main:#1a1a1a;
    --text-sub:#546e7a;
    --accent:#1976d2;
    --card-bg:rgba(246,249,253,0.94);
    --card-border:rgba(25,118,210,0.24);
    --input-bg:rgba(0,0,0,0.05);
    --nav-bg:rgba(255,255,255,0.96);
    --table-head:#e3edf7;
    --table-row:rgba(227,237,247,0.6);
}

/* ---------- 基础 ---------- */
/* 背景同时挂到 html 根节点：不依赖 body→viewport 背景传播，
   切换主题/合成层缓存时根底色也能即时、完整铺满 */
html { background:var(--bg-page); }
/* 背景不做 transition：主题在 <head> 内联脚本里于首次绘制前确定，
   瞬切可避免浅色系用户先见深底闪烁，也不依赖可能被节流的动画帧 */
body { background:var(--bg-page); color:var(--text-main); }

/* 星空粒子画布：铺满全屏，放最底层 */
#canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }

/* 主内容容器：盖在粒子层上方 */
.wrap { position:relative; z-index:2; width:100%; min-height:100%; }

/* ---------- 顶部导航栏 ---------- */
.top-nav {
    position:sticky; top:0; z-index:10;
    background:var(--nav-bg);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--card-border);
}
.nav-inner {
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center;
    padding:0 20px; height:62px;
}
.nav-logo {
    font-size:1.3rem; color:var(--accent); font-weight:bold;
    margin-right:28px; white-space:nowrap; flex-shrink:0;
}
/* 菜单：空间不足时横向滚动，绝不把文字逐字竖排 */
.nav-menu {
    display:flex; gap:2px; flex:1 1 auto; min-width:0;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
}
.nav-menu::-webkit-scrollbar { display:none; height:0; }
.nav-item {
    padding:0 14px; height:62px; line-height:62px;
    cursor:pointer; color:var(--text-sub); transition:color .2s;
    text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.nav-item:hover, .nav-item.active { color:var(--accent); border-bottom:2px solid var(--accent); }
.nav-right {
    display:flex; align-items:center; gap:12px; margin-left:auto;
    flex-shrink:0; white-space:nowrap;
}
/* 登录后用户名过长时省略，不挤爆导航 */
.nav-right .nav-user {
    color:var(--text-sub); font-size:14px;
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 主题切换按钮（放导航栏右侧，解决之前悬浮重叠问题） */
.theme-toggle {
    background:transparent; border:1px solid var(--card-border); color:var(--text-main);
    font-size:20px; width:38px; height:38px; border-radius:50%;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover { background:var(--card-bg); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
html.light .theme-toggle .icon-sun{ display:block; }
html.light .theme-toggle .icon-moon{ display:none; }

/* 导航里的登录/后台/退出按钮 */
.nav-link {
    border:1px solid var(--card-border); color:var(--text-sub);
    padding:5px 14px; border-radius:5px; text-decoration:none; font-size:14px;
}
.nav-link:hover { background:var(--card-bg); color:var(--accent); }

/* ---------- 首页主体 ---------- */
.main-container { max-width:1280px; margin:0 auto; padding:26px 20px; }
.header-block { text-align:center; padding:18px 0 26px; }
.time-box { font-size:1.15rem; color:var(--text-sub); letter-spacing:2px; margin-bottom:18px; }
.title {
    font-size:2.5rem; color:var(--accent); letter-spacing:6px; margin-bottom:12px;
    text-shadow:0 0 30px rgba(66,165,245,0.3);
}
.subtitle { font-size:1.15rem; color:var(--text-sub); letter-spacing:2px; margin-bottom:26px; }
.line { width:160px; height:1px; margin:0 auto 26px;
        background:linear-gradient(90deg,transparent,var(--accent),transparent); }

/* ---------- 分类筛选 + 搜索 ---------- */
.filter-wrap { margin:0 auto 26px; }
.filter-row { margin-bottom:14px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.filter-label { color:var(--text-sub); width:64px; }
.tag-group { display:flex; gap:10px; flex-wrap:wrap; }
.tag {
    padding:6px 16px; border-radius:20px; cursor:pointer; font-size:14px;
    background:rgba(66,165,245,0.12); color:var(--text-main);
    border:1px solid var(--card-border);
}
.tag.active { background:var(--accent); color:#fff; }
.search-box { margin-left:auto; display:flex; }
.search-box input {
    background:var(--input-bg); border:1px solid var(--card-border); color:var(--text-main);
    padding:7px 12px; width:230px; border-radius:4px 0 0 4px;
    flex:1 1 auto; min-width:0;
}
.search-box button {
    border:none; background:var(--accent); color:#fff; padding:0 18px;
    border-radius:0 4px 4px 0; cursor:pointer; white-space:nowrap; flex-shrink:0;
}

/* ---------- 文章卡片 ---------- */
.article-container { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.article-card {
    border:1px solid var(--card-border); background:var(--card-bg);
    padding:22px; border-radius:10px; box-shadow:0 0 16px rgba(66,165,245,0.08);
    transition:box-shadow .25s, border-color .25s;
}
.article-card:hover { border-color:var(--accent); box-shadow:0 0 24px rgba(66,165,245,0.18); }
.art-title { font-size:17px; color:var(--text-main); margin-bottom:10px; }
.art-desc { font-size:14px; color:var(--text-sub); line-height:1.7; margin-bottom:12px; }
.art-tag {
    display:inline-block; font-size:12px; padding:3px 8px; border-radius:4px;
    background:rgba(66,165,245,0.15); color:var(--accent); margin-right:6px;
}
.art-more {
    display:inline-block; margin-top:12px; margin-right:16px; font-size:13px;
    color:var(--accent); text-decoration:none; border-bottom:1px dashed var(--accent);
    vertical-align:middle;
}
.art-views {
    font-size:12px; color:var(--text-sub); display:inline-block;
    vertical-align:middle;
}
.art-time {
    font-size:12px; color:var(--text-sub); margin-top:10px; display:block;
    padding-top:10px; border-top:1px solid var(--card-border);
}
.empty-tip { grid-column:1/-1; text-align:center; color:var(--text-sub); padding:40px 0; }

/* ---------- 文章详情：代码块与行内代码 ---------- */
.art-body { min-width:0; overflow:hidden; word-wrap:break-word; overflow-wrap:break-word; }
.code-block {
    display:block; overflow-x:auto; padding:14px 16px; margin:12px 0;
    background:#0d1526; color:#d4e3ff; border:1px solid var(--card-border);
    border-radius:8px; font-family:Consolas,"Courier New",monospace;
    font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-all;
    max-width:100%;
}
html.light .code-block { background:#f3f6fb; color:#1a3a5c; }
.art-body code {
    background:rgba(66,165,245,0.15); color:var(--accent);
    padding:2px 6px; border-radius:4px; font-family:Consolas,"Courier New",monospace;
    font-size:0.9em;
}

/* ---------- 文章详情：正文图片 ---------- */
.art-img {
    display:block; max-width:100%; width:auto; height:auto; margin:14px auto;
    border-radius:8px; border:1px solid var(--card-border);
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

/* ---------- 页脚 ---------- */
.footer { max-width:1280px; margin:50px auto 20px; text-align:center; color:var(--text-sub); font-size:0.9rem; }
.beian-tip { margin-top:8px; font-size:0.8rem; color:var(--text-sub); }
.beian-tip a { color:var(--text-sub); text-decoration:none; }
.beian-tip a:hover { color:var(--accent); text-decoration:underline; }
.beian-icon { width:14px; height:14px; vertical-align:-2px; margin-right:4px; }
.beian-sep { margin:0 10px; opacity:.45; }

/* ---------- 登录页 ---------- */
.page-login {
    position:relative; z-index:5; min-height:100vh;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card {
    width:100%; max-width:400px; border:1px solid var(--card-border);
    background:var(--card-bg); padding:32px; border-radius:12px;
}
.login-title { text-align:center; font-size:1.7rem; color:var(--accent); margin-bottom:24px; }
.form-row { margin-bottom:18px; }
.form-row label { display:block; color:var(--text-sub); margin-bottom:6px; }
.form-row input {
    width:100%; background:var(--input-bg); border:1px solid var(--card-border);
    color:var(--text-main); padding:10px 12px; border-radius:6px; font-size:1rem;
}
/* 验证码行：输入框自适应 + 图片固定尺寸，点击可刷新 */
/* 滑动拼图验证码容器 */
.slider-wrap { position:relative; width:100%; }
.slider-pic {
    position:relative; max-width:100%;
    border-radius:8px; overflow:hidden;
    border:1px solid var(--card-border); background:#ddd;
    margin-bottom:10px; user-select:none; -webkit-user-select:none; touch-action:none;
    aspect-ratio:2/1;
}
.slider-pic canvas { display:block; width:100%; height:100%; }
.slider-block {
    position:absolute; top:0; left:0;
    pointer-events:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.slider-block canvas { display:block; width:100%; height:100%; }

/* 滑轨 */
.slider-rail {
    position:relative; height:40px; max-width:100%;
    background:var(--input-bg); border:1px solid var(--card-border);
    border-radius:6px; user-select:none; -webkit-user-select:none; touch-action:none;
}
.slider-rail-text {
    position:absolute; left:0; top:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-sub); font-size:13px; pointer-events:none;
    z-index:1;   /* 让文字浮在 thumb 之上，避免被遮挡 */
}
.slider-thumb {
    position:absolute; left:0; top:0;
    width:40px; height:100%;
    background:linear-gradient(180deg,var(--accent),#8a6fff);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:grab; border-radius:6px 0 0 6px; font-weight:bold; font-size:18px; letter-spacing:-2px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    transition:background .15s;
}
.slider-thumb:active { cursor:grabbing; }
.slider-rail.slider-ok .slider-thumb { background:linear-gradient(180deg,#34c759,#28a745); }
.slider-rail.slider-fail .slider-thumb { background:linear-gradient(180deg,#ff3b30,#d32f2f); }
.slider-rail.slider-ok { border-color:#34c759; }
.slider-rail.slider-fail { border-color:#ff3b30; }

/* 人机验证行：label + 刷新按钮同一行 */
.form-row-vcaptcha .form-row-label-bar {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px;
}
.form-row-vcaptcha .form-row-label-bar label { margin-bottom:0; }

/* 刷新按钮：放到 label 同一行，放大一号 */
.slider-refresh {
    background:none; border:1px solid var(--card-border);
    border-radius:6px; cursor:pointer;
    font-size:20px; width:36px; height:36px;
    color:var(--text-sub); padding:0; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, border-color .15s;
}
.slider-refresh:hover { color:var(--accent); border-color:var(--accent); }

/* 窄屏自适应：让 JS 精确控制宽高，避免 aspect-ratio 老浏览器不兼容 */
@media (max-width:480px) {
    .slider-pic { width:100%; }
    .slider-rail { width:calc(100% - 44px); }
}
.btn-login {
    width:100%; background:var(--accent); color:#fff; border:none; padding:12px;
    border-radius:6px; font-size:1rem; cursor:pointer;
}
.tip-demo { margin-top:16px; text-align:center; color:var(--text-sub); font-size:0.85rem; }
.form-msg { margin-top:12px; text-align:center; color:var(--danger); font-size:0.95rem; }
.form-msg .ok { color:var(--success); }
.form-msg .err { color:var(--danger); }

/* ---------- 后台管理 ---------- */
.admin-wrap { position:relative; z-index:5; max-width:1200px; margin:0 auto; padding:30px 20px; }
.admin-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.admin-head h2 { color:var(--accent); }
.admin-tools { display:flex; gap:10px; align-items:center; }
.btn {
    padding:7px 16px; border-radius:6px; cursor:pointer; font-size:14px;
    border:1px solid var(--card-border); color:var(--text-main); background:var(--card-bg);
    text-decoration:none; display:inline-block;
}
.btn:hover { background:var(--card-border); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--card-border); color:#fff; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-success { background:var(--success); border-color:var(--success); color:#fff; }

/* 后台数据表格 */
/* ★ 窄屏修复：外层横向滚动包裹，表格宁可横向滚动也不把文字逐字竖排 ★ */
.table-wrap {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:10px; border-radius:8px;
    scrollbar-width:thin; scrollbar-color:var(--card-border) transparent;
}
.table-wrap::-webkit-scrollbar { height:8px; }
.table-wrap::-webkit-scrollbar-track { background:transparent; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--card-border); border-radius:4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.data-table { width:100%; min-width:560px; border-collapse:collapse; background:var(--card-bg); border:1px solid var(--card-border); }
.data-table th, .data-table td {
    padding:10px 12px; text-align:left;
    border-bottom:1px solid var(--card-border); font-size:14px;
    white-space:nowrap;   /* 默认不换行，杜绝整表竖排 */
}
/* 文章列表的"标题"列（第2列）允许换行，吸收剩余宽度；用户表不套用 */
.tbl-articles th:nth-child(2), .tbl-articles td:nth-child(2) { white-space:normal; min-width:200px; }
.data-table th { background:var(--table-head); color:var(--text-main); }
.data-table tr:nth-child(even) { background:var(--table-row); }
.data-table a { color:var(--accent); margin-right:8px; }
.data-table .btn-link {
    background:none; border:none; color:var(--danger); margin-right:8px;
    padding:0; font-size:14px; cursor:pointer; font-family:inherit;
}
.data-table .btn-link:hover { text-decoration:underline; }

/* 后台表单卡片 */
.form-card {
    max-width:760px; border:1px solid var(--card-border); background:var(--card-bg);
    padding:24px; border-radius:10px;
}
.form-card .form-row textarea {
    width:100%; background:var(--input-bg); border:1px solid var(--card-border);
    color:var(--text-main); padding:10px 12px; border-radius:6px; font-size:1rem;
    min-height:120px; font-family:"Microsoft YaHei";
}

/* 统计卡片（后台首页） */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-bottom:28px; }
.stat-card {
    border:1px solid var(--card-border); background:var(--card-bg);
    padding:22px; border-radius:10px; text-align:center;
}
.stat-num { font-size:2rem; color:var(--accent); }
.stat-label { color:var(--text-sub); margin-top:6px; font-size:14px; }

/* ---------- 响应式 ---------- */
/* ★ 关键修复：中等屏（平板/小笔记本 ≤1100px）导航换两行——
   第一行 logo + 右侧操作，第二行分类菜单（横向滚动），
   绝不再让菜单文字逐字竖排或溢出穿透正文 ★ */
@media (max-width:1100px){
    .nav-inner{
        flex-wrap:wrap; height:auto; min-height:56px;
        padding-top:8px; padding-bottom:8px; row-gap:6px;
    }
    .nav-logo{ order:1; margin-right:0; }
    .nav-right{ order:2; margin-left:auto; gap:8px; }
    .nav-menu{
        order:3; flex:0 0 100%; width:100%;
        margin:0; padding-bottom:2px;
    }
    .nav-item{ height:42px; line-height:42px; padding:0 14px; }
    .nav-link{ padding:5px 12px; font-size:13px; }
}
@media (max-width:992px){
    .article-container{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .article-container{ grid-template-columns:1fr; }
    .filter-row{ flex-direction:column; align-items:stretch; }
    .tag-group{ width:100%; }
    .search-box{ margin-left:0; width:100%; }
    .nav-inner{ padding-left:12px; padding-right:12px; }
    .nav-right{ flex-wrap:wrap; justify-content:flex-end; gap:8px; }
    .nav-item{ height:40px; line-height:40px; padding:0 12px; }
    .nav-user{ display:none; }   /* 极窄屏隐藏用户名，给按钮腾空间 */
    .main-container{ padding:20px 14px; }
    .title{ font-size:1.9rem; letter-spacing:3px; }
    .subtitle{ font-size:1rem; letter-spacing:1px; }
    .login-card{ padding:24px 20px; }
}