/* ===== Unity 学习笔记系统样式（与原静态版完全一致 + 后台扩展） ===== */
:root{
  --bg:#f6f8fa; --card:#ffffff; --text:#1f2328; --muted:#57606a;
  --border:#d8dee4; --primary:#0969da; --accent:#1a7f37; --warn:#cf222e;
  --gold:#9a6700; --thead:#eef2f6; --inline:#eef1f4;
  --pre-bg:#0d1117; --pre-text:#e6edf3;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:15px; line-height:1.75;
}
.page{max-width:1080px; margin:0 auto; padding:24px 20px 60px}

/* ===== 页头 ===== */
header.hero{
  background:linear-gradient(135deg,#0b2d5c 0%,#155fa8 60%,#1a7f37 130%);
  color:#fff; border-radius:14px; padding:34px 36px; margin:10px 0 22px;
}
header.hero h1{margin:0 0 6px; font-size:26px; letter-spacing:1px}
header.hero p{margin:0; opacity:.85; font-size:14px}
header.hero .meta{margin-top:14px; font-size:12.5px; opacity:.75}

/* ===== 使用说明 ===== */
.usage{
  background:#fff8e6; border:1px solid #f0d998; border-left:5px solid var(--gold);
  border-radius:8px; padding:10px 16px; margin-bottom:22px; font-size:13.5px; color:#6b5400;
}

/* ===== 左侧目录 + 右侧内容（双栏布局） ===== */
.layout{display:flex; gap:22px; align-items:flex-start}
nav.sidebar{
  position:sticky; top:12px; width:250px; flex:0 0 250px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 10px; margin-bottom:28px;
}
.side-title{
  font-size:15px; font-weight:bold; color:#0b2d5c;
  padding:4px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:10px;
}
a.navitem{
  display:block; padding:9px 12px; margin-bottom:3px; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:14px; cursor:pointer;
  border-left:3px solid transparent;
}
a.navitem:hover{background:#f0f5fb}
a.navitem.active{background:#e7f0fc; border-left-color:var(--primary); color:var(--primary); font-weight:bold}
.side-hint{color:var(--muted); font-size:12px; padding:10px 10px 2px}
main.content{flex:1; min-width:0}

/* ===== 手机/窄屏适配：目录折叠 + 表格横滚 + 紧凑间距 ===== */
.side-toggle{display:none}   /* 桌面上不显示目录按钮 */
@media (max-width:860px){
  .layout{flex-direction:column}

  /* —— 目录：默认收起，点按钮展开 —— */
  .side-toggle{
    display:block; width:100%; padding:12px 14px; margin:0 0 12px;
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    font-size:15px; font-weight:bold; color:#0b2d5c; cursor:pointer; text-align:left;
    font-family:inherit;
  }
  nav.sidebar{
    display:none;                                   /* 手机默认收起 */
    position:static; width:auto; flex:none; margin:0 0 14px;
    max-height:56vh; overflow-y:auto;               /* 笔记多时目录内部滚动 */
  }
  nav.sidebar.open{display:block}

  /* —— 紧凑间距 —— */
  .page{padding:14px 12px 40px}
  header.hero{padding:20px 18px; border-radius:12px}
  header.hero h1{font-size:20px}
  section.qa{padding:18px 16px 16px}
  section.qa>h2{
    margin:-18px -16px 14px; padding:13px 16px;
    font-size:17px; border-radius:12px 12px 0 0;
  }
  .qa .askdate{margin-top:-8px}
  section.qa h3{font-size:15.5px}
  section.qa h4{font-size:14.5px}

  /* —— 表格：在容器内横向滚动，不再撑破版面 —— */
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  th,td{padding:6px 9px}

  pre{padding:12px 14px; font-size:12.5px}
  .field textarea{min-height:320px}

  /* —— 后台列表窄屏隐藏次要列（配合 .hide-sm） —— */
  .hide-sm{display:none}
  .admin-head h1{font-size:17px}
}

/* ===== 问答回合卡片 ===== */
section.qa{
  display:none;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:26px 30px 22px; margin-bottom:28px;
}
section.qa.active{display:block}
section.qa>h2{
  margin:-26px -30px 20px; padding:16px 30px;
  background:#f0f5fb; border-bottom:1px solid var(--border); border-radius:12px 12px 0 0;
  font-size:18.5px; color:#0b2d5c;
}
section.qa>h2 .qbadge{
  display:inline-block; background:var(--primary); color:#fff; font-size:13px;
  border-radius:6px; padding:2px 10px; margin-right:10px; vertical-align:2px;
}
section.qa h3{
  font-size:16.5px; margin:26px 0 10px; padding-left:10px;
  border-left:4px solid var(--primary); color:#0b2d5c;
}
section.qa h4{font-size:15px; margin:18px 0 8px; color:#333}
.qa .askdate{color:var(--muted); font-size:12.5px; margin-top:-12px; margin-bottom:16px}

/* ===== 提示框 ===== */
.law{
  background:#fff8e6; border:1px solid #f0d998; border-left:5px solid var(--gold);
  border-radius:8px; padding:12px 18px; margin:14px 0; font-weight:bold; color:#5c4700;
}
.law b{color:var(--gold)}
.ctx{
  background:#eef5ff; border:1px solid #bcd4f0; border-left:5px solid var(--primary);
  border-radius:8px; padding:12px 18px; margin:14px 0; font-size:14px;
}
.ctx .t{font-weight:bold; color:var(--primary)}
.warnbox{
  background:#fff0f0; border:1px solid #f2c5c5; border-left:5px solid var(--warn);
  border-radius:8px; padding:10px 16px; margin:12px 0; font-size:14px; color:#7a1d1d;
}
.tipbox{
  background:#eefaf0; border:1px solid #bfe3c8; border-left:5px solid var(--accent);
  border-radius:8px; padding:10px 16px; margin:12px 0; font-size:14px; color:#14522a;
}

/* ===== 表格 ===== */
table{width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:14px}
th,td{border:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top}
thead th{background:var(--thead); color:#0b2d5c; white-space:nowrap}
tbody tr:nth-child(even){background:#fafbfc}
td.center,th.center{text-align:center}
.ok{color:var(--accent); font-weight:bold}
.bad{color:var(--warn); font-weight:bold}
.star{color:#e3a008; font-weight:bold}

/* ===== 代码 ===== */
code{
  font-family:Consolas,"Courier New",monospace; font-size:13.5px;
  background:var(--inline); border-radius:4px; padding:1px 6px; color:#c7254e;
}
pre{
  background:var(--pre-bg); color:var(--pre-text); border-radius:10px;
  padding:14px 18px; overflow-x:auto; line-height:1.6; margin:12px 0 18px;
}
pre code{background:none; padding:0; color:inherit; font-size:13.5px}
pre .c{color:#8b949e}      /* 注释 */
pre .k{color:#ff7b72}      /* 关键字 */
pre .t{color:#79c0ff}      /* 类型 */
pre .m{color:#d2a8ff}      /* 方法 */
pre .s{color:#a5d6ff}      /* 字符串 */
pre .hl{color:#ffa657}     /* 高亮 */
pre.flow{background:#f0f5fb; color:#0b2d5c; border:1px solid #c8d8ee}

ul,ol{padding-left:26px}
li{margin:4px 0}

footer{
  text-align:center; color:var(--muted); font-size:12.5px; margin-top:30px;
  border-top:1px solid var(--border); padding-top:16px;
}
footer a{color:var(--primary); text-decoration:none}

/* ============================================================ */
/* ===== 后台管理页专用（前台笔记样式不变） ===== */
.admin-head{
  background:linear-gradient(135deg,#0b2d5c 0%,#155fa8 100%);
  color:#fff; border-radius:12px; padding:16px 22px; margin:10px 0 18px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.admin-head h1{margin:0; font-size:20px}
.admin-head-btns{display:flex; gap:8px; flex-wrap:wrap}
.admin-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0}
.admin-hint{color:var(--muted); font-size:12.5px}

.btn{
  display:inline-block; padding:7px 16px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:14px; cursor:pointer;
  text-decoration:none; line-height:1.6;
}
.btn:hover{background:#f0f5fb}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:#0a58ca}
.btn-light{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff}
.btn-light:hover{background:rgba(255,255,255,.25)}
.btn-danger{background:#fff; border-color:var(--warn); color:var(--warn)}
.btn-danger:hover{background:#fff0f0}
.btn-small{padding:3px 10px; font-size:12.5px; border-radius:6px}

.field{margin:14px 0}
.field label{display:block; font-weight:bold; color:#0b2d5c; margin:10px 0 4px; font-size:14px}
.field input[type=text],.field input[type=password],.field input[type=date],
.field input[type=number],.field textarea{
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--text);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--primary); outline-offset:-1px}
.field textarea{
  min-height:420px; font-family:Consolas,"Courier New",monospace; font-size:13px;
  line-height:1.65; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}
.field-row{display:flex; gap:14px; flex-wrap:wrap}
.field-row .field{flex:1; min-width:200px}
.req{color:var(--warn); font-weight:bold}
.muted{color:var(--muted); font-size:12.5px}

.preview-title{
  font-size:16.5px; margin:26px 0 10px; padding-left:10px;
  border-left:4px solid var(--accent); color:#0b2d5c;
}
.preview-box{padding:26px 30px 22px}