:root{
  /* 冷调蓝绿玻璃配色 */
  --bg:#06141f;
  --glass-bg:
    radial-gradient(40% 34% at 12% 6%,  rgba(34,211,238,.42), transparent 60%),
    radial-gradient(44% 40% at 90% 12%, rgba(45,212,191,.38), transparent 60%),
    radial-gradient(52% 48% at 80% 95%, rgba(59,130,246,.40), transparent 62%),
    linear-gradient(135deg,#06141f 0%,#0b2733 55%,#04141c 100%);
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.14);
  --text:#e6f4f9; --muted:#9fb8c4;
  --primary:#38bdf8; --primary-d:#0ea5e9;
  --danger:#fb7185; --ok:#34d399;
  --radius:12px;
  --topbar-bg: rgba(8,20,28,.45);
  --glass-blur: blur(16px) saturate(150%);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.30);
  --on-glass:#eafcff; --on-glass-muted: rgba(234,252,255,.72);
  --accent-a:#7dd3fc; --accent-b:#5eead4;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background-image:var(--glass-bg);background-attachment:fixed;background-size:cover;
  color:var(--text);line-height:1.65;min-height:100vh}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.brand a{color:var(--text)}
.logo{color:var(--primary);font-size:22px}
.topbar nav{display:flex;align-items:center;gap:18px}
.topbar nav a{color:var(--muted);font-size:14px}
.topbar nav a:hover{color:var(--text);text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:24px}

/* 按钮 */
.btn{display:inline-block;padding:9px 16px;border-radius:8px;background:var(--panel-2);
  color:var(--text);border:1px solid var(--line);cursor:pointer;font-size:14px}
.btn:hover{background:#2b3543;text-decoration:none}
.btn-primary{background:var(--primary);border-color:var(--primary-d);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-danger{color:var(--danger);border-color:#3a2a2a}
.btn-danger:hover{background:#2a1f1f}
.btn-sm{padding:5px 11px;font-size:13px}

/* 仪表盘统计 */
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-align:center}
.stat .num{font-size:30px;font-weight:700;color:var(--primary)}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:4px}

/* 布局 */
.layout{display:grid;grid-template-columns:240px 1fr;gap:24px}
.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;height:fit-content}
.sidebar h3{font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin:18px 0 10px}
.sidebar h3:first-child{margin-top:0}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;
  color:var(--text);font-size:14px}
.cat-list li a span{color:var(--muted);font-size:12px}
.cat-list li.active a,.cat-list li a:hover{background:var(--panel-2);text-decoration:none}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;padding:3px 9px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:20px;font-size:12px;color:var(--muted)}
.tag:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}

/* 内容区 */
.content-head{margin-bottom:18px}
.search{display:flex;gap:8px}
.search input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:14px}
.search button{padding:10px 20px;border:none;border-radius:8px;background:var(--primary);
  color:#fff;cursor:pointer}
.search.big input{padding:14px 18px;font-size:16px}

.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;transition:border-color .15s}
.card:hover{border-color:var(--primary)}
.card-title{display:block;font-size:16px;font-weight:600;color:var(--text);margin-bottom:10px}
.card-excerpt{color:var(--muted);font-size:13px;margin-bottom:10px;line-height:1.6}
.card-title:hover{color:var(--primary);text-decoration:none}
.card-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px;align-items:center}
.card-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.badge{background:var(--primary-d);color:#fff;padding:2px 8px;border-radius:6px;font-size:11px}
.badge-lock{background:#43371a;color:#f6c453;border:1px solid #6b5320}

.empty{padding:40px;text-align:center;color:var(--muted);background:var(--panel);
  border:1px dashed var(--line);border-radius:var(--radius)}

/* 笔记详情 */
.note-view{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.note-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.note-head h1{margin:0 0 10px;font-size:26px}
.note-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;align-items:center}
.note-actions{display:flex;gap:8px;flex-shrink:0}
.note-body{font-size:15px}
.note-body h1,h2,h3,h4{margin:22px 0 10px;line-height:1.3}
.note-body h1{font-size:24px;border-bottom:1px solid var(--line);padding-bottom:8px}
.note-body h2{font-size:20px}
.note-body p{margin:10px 0}
.note-body ul{margin:10px 0;padding-left:22px}
.note-body li{margin:4px 0}
.note-body blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid var(--primary);
  background:var(--panel-2);color:var(--muted);border-radius:0 8px 8px 0}
.note-body code{background:var(--panel-2);padding:2px 6px;border-radius:5px;font-size:13px;
  font-family:"SFMono-Regular",Consolas,monospace}
.note-body pre.code{background:#0b0f14;border:1px solid var(--line);border-radius:8px;
  padding:16px;overflow:auto}
.note-body pre.code code{background:none;padding:0}
.note-body .md-table{width:100%;border-collapse:collapse;margin:14px 0}
.note-body .md-table th,.note-body .md-table td{border:1px solid var(--line);padding:8px 12px;
  text-align:left;font-size:14px}
.note-body .md-table th{background:var(--panel-2)}

/* 表单 */
.form{max-width:760px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.form label{display:block;margin:16px 0 6px;font-size:13px;color:var(--muted)}
.form input[type=text],.form textarea,.form select{width:100%;padding:11px 14px;
  border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-size:14px;font-family:inherit}
.form textarea{font-family:"SFMono-Regular",Consolas,monospace;resize:vertical}
.form-actions{margin-top:22px;display:flex;gap:10px}
.inline-form{display:flex;gap:10px;align-items:flex-end;margin-bottom:20px}
.inline-form input{padding:10px 12px}

/* 表格（分类管理） */
.table{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
.table th{background:var(--panel-2);color:var(--muted);font-weight:600}
.table input{width:100%;padding:7px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:13px}
.table .row-actions{white-space:nowrap;width:1%}
.cat-manage h2{margin-top:0}

/* 提示框 */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px}
.alert-success{background:rgba(34,197,94,.12);border:1px solid var(--ok);color:#86efac}
.alert-error{background:rgba(239,68,68,.12);border:1px solid var(--danger);color:#fca5a5}

.footer{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

.result-count{color:var(--muted);font-size:14px}

/* 用户菜单 */
.user{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px;
  padding:4px 10px;background:var(--panel-2);border-radius:20px}
.user em{color:var(--primary);font-style:normal;font-size:11px}

/* 登录 / 注册 */
.auth-wrap{max-width:420px;margin:40px auto}
.auth-form h2{margin-top:0;text-align:center}
.auth-foot{text-align:center;color:var(--muted);font-size:13px;margin:18px 0 0}

/* 附件 */
.attachments{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.attachments h3{font-size:15px;margin:0 0 14px;color:var(--muted)}
.upload-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.upload-form input[type=file]{flex:1;min-width:200px;padding:9px 12px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:13px}
.upload-form .hint{color:var(--muted);font-size:12px}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.att-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px}
.att-list li a:first-child{flex:1;color:var(--text)}
.att-list li a:first-child:hover{color:var(--primary)}
.att-meta{color:var(--muted);font-size:12px}
.empty.small{padding:14px;font-size:13px}

/* 搜索高亮 */
mark{background:#f6c453;color:#1a2029;padding:0 2px;border-radius:3px}

/* 实时预览编辑器（左右分栏） */
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row > div{flex:1;min-width:140px}
.editor-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.editor-split textarea{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;
  line-height:1.6;min-height:60vh;resize:vertical}
.preview-pane{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:18px;overflow:auto;min-height:60vh}
.preview-pane .empty{padding:20px}
.editor-hint{color:var(--muted);font-size:12px;margin:6px 0 10px}

/* 目录 TOC */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:22px}
.toc h4{margin:0 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{padding:3px 0}
.toc li a{color:var(--text);font-size:13px}
.toc li a:hover{color:var(--primary)}
.toc .lvl-3{padding-left:14px}
.toc .lvl-4{padding-left:28px;font-size:12px;color:var(--muted)}

/* 代码语法高亮（浅色代码块背景更柔和） */
.note-body pre.code{position:relative}
.note-body pre.code[data-lang]::before{content:attr(data-lang);position:absolute;top:6px;right:10px;
  font-size:11px;color:var(--muted);text-transform:uppercase}
.hljs{background:transparent!important;padding:0!important}

/* 浅色主题 */
:root[data-theme="light"]{
  --glass-bg:
    radial-gradient(40% 34% at 12% 6%,  rgba(56,189,248,.30), transparent 60%),
    radial-gradient(44% 40% at 90% 12%, rgba(45,212,191,.26), transparent 60%),
    radial-gradient(52% 48% at 80% 95%, rgba(99,102,241,.22), transparent 62%),
    linear-gradient(135deg,#eaf5fb 0%,#e2f3f3 55%,#eafaf4 100%);
  --panel: rgba(255,255,255,.55);
  --panel-2: rgba(255,255,255,.72);
  --line: rgba(15,42,51,.14);
  --text:#0f2a33; --muted:#3f5d66;
  --primary:#0ea5e9; --primary-d:#0284c7;
  --danger:#e11d48; --ok:#059669;
  --topbar-bg: rgba(255,255,255,.55);
  --glass-shadow: 0 8px 32px rgba(15,42,51,.14);
  --on-glass:#0f2a33; --on-glass-muted: rgba(15,42,51,.7);
  --accent-a:#0284c7; --accent-b:#0d9488;
}

/* 分页 */
.pager{display:flex;justify-content:center;gap:6px;margin:24px 0 8px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);color:var(--text);font-size:13px}
.pager a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}
.pager .current{background:var(--primary);border-color:var(--primary);color:#fff}
.pager .disabled{opacity:.4;pointer-events:none}

@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .dashboard{grid-template-columns:repeat(2,1fr)}
  .note-head{flex-direction:column}
  .editor-split{grid-template-columns:1fr}
  .editor-split textarea{min-height:30vh}
}

/* ============================================================
   全局玻璃拟态（Glassmorphism）· 冷调蓝绿配色
   所有页面统一采用磨砂玻璃质感，背景为蓝绿光斑渐变
   ============================================================ */

/* 玻璃表面：统一磨砂模糊 + 阴影（背景/描边由 --panel/--line 提供） */
.glass,
.topbar, .hero, .dashboard .stat, .sidebar, .card,
.note-view, .toc, .form, .table, .cat-manage .table,
.attachments, .att-list li, .preview-pane,
.pager a, .pager span, .empty, .alert,
.search input, .form input, .form textarea, .form select,
.table input, .user{
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* 顶栏 */
.topbar{ background: var(--topbar-bg); border-bottom:1px solid rgba(255,255,255,.10); }
.topbar nav a{ color: var(--on-glass-muted); }
.topbar nav a:hover{ color: var(--on-glass); }
.brand a, .logo{ color: var(--on-glass); }
.user{ color: var(--on-glass-muted); background: var(--panel-2); }
.btn{ color: var(--on-glass); background: var(--panel-2); border:1px solid var(--line); }
.btn:hover{ background: rgba(255,255,255,.16); text-decoration:none; }
.btn-primary{ background:linear-gradient(135deg,#22d3ee,#0ea5e9); border:none; color:#04222b; font-weight:600; }
.btn-primary:hover{ background:linear-gradient(135deg,#38e0f0,#22b6e6); }
.btn-danger{ color:#fecdd3; border-color: rgba(251,113,133,.45); }
.btn-danger:hover{ background: rgba(251,113,133,.15); }

/* Hero 欢迎区（首页） */
.hero{ position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius:22px; padding:30px 32px; margin-bottom:24px; flex-wrap:wrap;
  background: var(--panel); border:1px solid var(--line); }
/* Hero 动态流光（极光）背景 */
.hero::before{
  content:""; position:absolute; inset:-60%; z-index:0; pointer-events:none;
  background: conic-gradient(from 0deg,
    rgba(34,211,238,.42), rgba(45,212,191,.28),
    rgba(59,130,246,.36), rgba(34,211,238,.42));
  filter: blur(64px); opacity:.9;
  animation: heroFlow 14s linear infinite;
}
.hero > *{ position:relative; z-index:1; }
@keyframes heroFlow{
  0%{ transform: rotate(0deg)   scale(1); }
  50%{ transform: rotate(180deg) scale(1.15); }
  100%{ transform: rotate(360deg) scale(1); }
}
.hero h1{ margin:0 0 8px; font-size:28px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--accent-a),#67e8f9 55%,var(--accent-b));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ margin:0; color: var(--on-glass-muted); font-size:15px; }
.hero-cta{ padding:13px 24px; font-size:15px; border-radius:14px; font-weight:600;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9); border:none; color:#04222b;
  box-shadow:0 8px 24px rgba(34,211,238,.45); transition:transform .15s, filter .15s; }
.hero-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); text-decoration:none; }

/* 统计卡片 */
.dashboard{ gap:18px; }
.dashboard .stat{ border-radius:20px; padding:22px 24px; text-align:left;
  display:flex; flex-direction:column; gap:4px; transition:transform .2s, box-shadow .2s; }
.dashboard .stat:hover{ transform:translateY(-5px); border-color:rgba(45,212,191,.5);
  box-shadow:0 16px 44px rgba(0,0,0,.42); }
.dashboard .stat .num{ font-size:34px; font-weight:800; line-height:1;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.dashboard .stat .lbl{ font-size:13px; color: var(--on-glass-muted); }

/* 侧边栏 */
.sidebar{ border-radius:20px; padding:22px; }
.sidebar h3{ color: var(--on-glass-muted); }
.cat-list li a{ color:var(--on-glass); border-radius:12px; }
.cat-list li a span{ color: var(--on-glass-muted); }
.cat-list li.active a, .cat-list li a:hover{ background: var(--panel-2); text-decoration:none; }

/* 搜索框 */
.search input{ border-radius:16px; border:1px solid var(--line); background: var(--panel-2); color: var(--on-glass); }
.search input::placeholder{ color: var(--on-glass-muted); }
.search button{ border-radius:16px; border:none; font-weight:600;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9); color:#04222b; transition:filter .15s; }
.search button:hover{ filter:brightness(1.08); }

/* 笔记卡片 */
.content-head{ margin-bottom:22px; }
.note-grid{ gap:18px; }
.card{ border-radius:20px; padding:22px; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.card::after{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.40), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.card:hover{ transform:translateY(-6px); border-color:rgba(45,212,191,.6); box-shadow:0 20px 52px rgba(0,0,0,.45); }
.card-title{ color: var(--on-glass); }
.card-title:hover{ color:var(--accent-a); text-decoration:none; }
.card-meta{ color: var(--on-glass-muted); }

/* 标签 / 徽章 */
.tag{ background: var(--panel-2); border:1px solid var(--line); color: var(--on-glass-muted); }
.tag:hover{ color: var(--on-glass); border-color:#2dd4bf; text-decoration:none; }
.badge{ background: rgba(14,165,233,.9); }
.badge-lock{ background: rgba(251,191,36,.22); color:#fcd34d; border:1px solid rgba(251,191,36,.4); }

/* 笔记详情 */
.note-view{ border-radius:20px; padding:30px; border:1px solid var(--line); }
.note-head{ border-bottom:1px solid var(--line); }
.note-body blockquote{ background: var(--panel-2); border-left:3px solid var(--primary); }
.note-body code{ background: var(--panel-2); }
.note-body pre.code{ background: var(--panel-2); border:1px solid var(--line);
  border-radius:14px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.toc{ border-radius:18px; border:1px solid var(--line); }
.attachments{ border-top:1px solid var(--line); }
.att-list li{ border-radius:12px; border:1px solid var(--line); background: var(--panel-2); }
.preview-pane{ border-radius:14px; border:1px solid var(--line); background: var(--panel-2); }
.result-count{ color: var(--on-glass-muted); }

/* 表单（登录 / 注册 / 编辑） */
.form{ border-radius:20px; padding:28px; border:1px solid var(--line); }
.form label{ color: var(--on-glass-muted); }
.form input[type=text], .form textarea, .form select{
  background: var(--panel-2); border:1px solid var(--line); color: var(--on-glass); }
.form input::placeholder, .form textarea::placeholder{ color: var(--on-glass-muted); }
.auth-wrap{ margin:40px auto; }
.auth-form h2{ margin-top:0; text-align:center; color: var(--on-glass); }
.auth-foot{ color: var(--on-glass-muted); }

/* 表格（分类管理） */
.table{ border-radius:18px; border:1px solid var(--line); overflow:hidden; }
.table th{ background: var(--panel-2); color: var(--on-glass-muted); }
.table td, .table th{ border-bottom:1px solid var(--line); }
.table input{ background: var(--panel-2); border:1px solid var(--line); color: var(--on-glass); }
.cat-manage h2{ color: var(--on-glass); }

/* 编辑器分栏 */
.editor-split textarea{ background: var(--panel-2); border:1px solid var(--line); color: var(--on-glass); }
.editor-hint{ color: var(--on-glass-muted); }

/* 空状态 / 分页 / 提示 */
.empty{ border:1px dashed var(--line); color: var(--on-glass-muted); }
.pager a, .pager span{ background: var(--panel); border:1px solid var(--line); color: var(--on-glass); }
.pager a:hover{ border-color:#2dd4bf; color: var(--on-glass); text-decoration:none; }
.pager .current{ background:linear-gradient(135deg,#22d3ee,#0ea5e9); border-color:transparent; color:#04222b; }
.alert-success{ background: rgba(52,211,153,.14); border:1px solid var(--ok); color:#6ee7b7; }
.alert-error{ background: rgba(251,113,133,.14); border:1px solid var(--danger); color:#fda4af; }

.footer{ border-top:1px solid rgba(255,255,255,.10); color: var(--on-glass-muted); }

/* 移动端 */
@media(max-width:860px){
  .hero{ padding:22px; }
  .hero h1{ font-size:24px; }
}