/* 《数据库原理与应用》实验页　单栏实验指导书样式 */
:root{
  --bg:#F2F3F0; --card:#FFFFFF; --ink:#1F2328; --ink2:#454B53; --mut:#7A8088; --line:#DDE0DA; --line2:#ECEEE9;
  --pri:#2F6B63; --pri-d:#22504A; --pri-s:#E6F0EE; --pri-l:#B9D3CE;
  --acc:#B0772F; --acc-s:#FAF1E4;
  --red:#A9442C; --red-s:#FBEDE8; --grn:#4F7A3F; --grn-s:#EEF4EA;
  --code:#1C2026; --code2:#252A31;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);font-size:16.5px;line-height:1.8}
a{color:var(--pri)}
code{font-family:var(--mono);font-size:.92em;background:#F1F2EE;border:1px solid var(--line2);padding:0 5px;border-radius:3px}

/* 顶栏 */
.lt{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lt .in{max-width:1040px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:14px}
.lt .cr{flex:none;font-size:13.5px;color:var(--mut);white-space:nowrap}
.lt .cr a{color:var(--pri);text-decoration:none}
.lt .cr b{color:var(--ink)}
.lt .jp{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.lt .jp a{flex:none;font-size:13.5px;color:var(--ink2);text-decoration:none;padding:2px 10px;border-radius:12px;font-family:var(--mono)}
.lt .jp a:hover{background:var(--pri-s);color:var(--pri-d)}
.lt .jp a.on{background:var(--pri);color:#fff}
.lt .all{flex:none;font:inherit;font-size:13px;border:1px solid var(--line);background:#fff;color:var(--ink2);
  padding:3px 12px;border-radius:14px;cursor:pointer}
.lt .all:hover{border-color:var(--pri);color:var(--pri)}
.lt .all.on{background:var(--pri);border-color:var(--pri);color:#fff}

.wrap{max-width:1040px;margin:0 auto;padding:0 24px 60px}

/* 标题 */
.hero{padding:40px 0 22px}
.hero .ey{font-size:13.5px;color:var(--pri);font-weight:700;letter-spacing:.12em}
.hero h1{font-size:34px;line-height:1.3;margin:8px 0 10px;font-weight:700}
.hero p{font-size:17px;color:var(--ink2);max-width:46em}

/* 环境与注意 */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 26px}
.info>div{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 16px}
.info h3{font-size:13px;color:var(--mut);letter-spacing:.14em;margin-bottom:4px}
.info p{font-size:15px;line-height:1.7;color:var(--ink2)}
kbd{font-family:var(--mono);font-size:12.5px;background:#fff;border:1px solid #C8CCC4;border-bottom-width:2px;
  border-radius:3px;padding:0 5px;white-space:nowrap;color:var(--ink)}

/* 路线图 */
.road{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 20px 18px;margin-bottom:26px}
.road h3{font-size:13px;color:var(--mut);letter-spacing:.14em;margin-bottom:12px}
.road ol{list-style:none;display:flex;align-items:stretch;gap:0}
.road li{flex:1;min-width:0;position:relative;padding-right:22px}
.road li:not(:last-child)::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;
  border-top:2px solid var(--pri-l);border-right:2px solid var(--pri-l);transform:translateY(-50%) rotate(45deg)}
.road a{display:block;height:100%;text-decoration:none;color:var(--ink);background:var(--pri-s);border:1px solid var(--pri-l);
  border-radius:6px;padding:8px 10px}
.road a:hover{background:#D8E8E5}
.road a .n{display:block;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--pri)}
.road a .t{display:block;font-size:14.5px;line-height:1.45;font-weight:600}

/* 卡片通用 */
.box{background:var(--card);border:1px solid var(--line);border-radius:6px;margin:0 0 22px;scroll-margin-top:60px;overflow:hidden}
.box>header{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line2)}
.box>header .no{flex:none;font-family:var(--mono);font-size:19px;font-weight:700;color:#fff;background:var(--pri);
  border-radius:5px;padding:3px 11px;line-height:1.5}
.box.prep>header .no{background:var(--acc);font-family:var(--sans);font-size:14px;padding:5px 11px}
.box>header h2{font-size:21px;line-height:1.4;font-weight:700}
.box>header .rf{margin-left:auto;flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.box>header .rf a{font-size:12.5px;text-decoration:none;color:var(--pri);border:1px solid var(--pri-l);border-radius:12px;padding:0 9px;white-space:nowrap}
.box>header .rf a:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.bd{padding:14px 22px 18px}
.meta{display:grid;grid-template-columns:3.2em 1fr;gap:4px 12px;margin-bottom:10px}
.meta dt{font-size:14px;font-weight:700;color:var(--mut);padding-top:2px}
.meta dd{font-size:16px;color:var(--ink2)}
.meta dd.goal{color:var(--ink);font-weight:600}
.req{margin:2px 0 4px}
.req ol{margin:0 0 0 1.4em}
.req li{margin:3px 0;color:var(--ink)}
table.fd{border-collapse:collapse;margin:4px 0 6px;font-size:15px;min-width:62%}
table.fd th,table.fd td{border:1px solid var(--line);padding:4px 12px;text-align:left}
table.fd th{background:#F6F7F4;font-weight:600;color:var(--ink2);font-size:14px}
table.fd td.m{font-family:var(--mono);font-size:14px}
.note{font-size:15px;color:var(--ink2);margin:4px 0 8px}

/* 代码块 */
.code{margin:8px 0 4px;border-radius:5px;overflow:hidden;background:var(--code)}
.code .ch{display:flex;align-items:center;gap:8px;background:var(--code2);padding:5px 8px 5px 14px}
.code .ch span{font-size:12.5px;color:#9AA3AD;letter-spacing:.08em;flex:1}
.code .ch button,.code .ch a{font:inherit;font-size:12.5px;color:#D5DBE0;background:transparent;border:1px solid #4A535D;
  border-radius:3px;padding:1px 10px;cursor:pointer;text-decoration:none;line-height:1.7}
.code .ch button:hover,.code .ch a:hover{background:#39414A;color:#fff}
.code .ch button.ok{border-color:#6FA15C;color:#A8D69A}
.code pre{margin:0;padding:12px 16px 14px;font-family:var(--mono);font-size:14.5px;line-height:1.7;color:#E4E7EA;
  overflow-x:auto;white-space:pre;tab-size:2}
.code.tall pre{max-height:360px;overflow-y:auto}
.code pre .c{color:#86A889}
.code pre .s{color:#E6C07B}
.code pre .k{color:#8EC3F2}
.code pre .t{color:#D2A8F2}

/* 参考答案 */
.show{font:inherit;font-size:15px;font-weight:600;margin-top:8px;padding:6px 18px;border-radius:5px;cursor:pointer;
  border:1px solid var(--pri);background:#fff;color:var(--pri)}
.show:hover{background:var(--pri-s)}
.show.on{background:var(--pri);color:#fff}
.ans{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.box.open .ans{display:block}
.ans h4{font-size:13.5px;color:var(--mut);letter-spacing:.14em;margin:12px 0 4px}
.ans h4:first-child{margin-top:0}
table.ex{border-collapse:collapse;width:100%;font-size:15px}
table.ex td{border-bottom:1px solid var(--line2);padding:6px 10px;vertical-align:top;line-height:1.65}
table.ex tr:last-child td{border-bottom:none}
table.ex td:first-child{width:36%;font-family:var(--mono);font-size:14px;color:var(--pri-d);background:#F7FAF9;white-space:pre-wrap;word-break:break-word}
table.rs{border-collapse:collapse;width:100%;font-size:15px}
table.rs th,table.rs td{border:1px solid var(--line);padding:5px 12px;text-align:left}
table.rs th{background:#F6F7F4;font-weight:600;color:var(--ink2);font-size:14px}
table.rs td:first-child{font-family:var(--mono);width:4.5em;white-space:nowrap}
table.rs td.bad{color:var(--red);font-weight:600;white-space:nowrap}
table.rs td.ok{color:var(--grn);font-weight:600;white-space:nowrap}
.look{margin-top:10px;background:var(--acc-s);border-left:3px solid var(--acc);padding:7px 14px;font-size:15px;color:#4A3A22;line-height:1.7}
.look b{color:#7A4E17}

/* 翻页与页脚 */
.turn{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.turn a{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 18px;text-decoration:none;color:var(--ink2)}
.turn a:hover{border-color:var(--pri-l);background:var(--pri-s)}
.turn a .k{display:block;font-size:12.5px;color:var(--mut);letter-spacing:.1em}
.turn a .t{font-size:16px;font-weight:600;color:var(--pri-d)}
.turn a.next{text-align:right}
.foot{margin-top:40px;border-top:1px solid var(--line);padding:18px 0;text-align:center;font-size:13.5px;color:var(--mut);letter-spacing:.06em}
.foot b{color:var(--ink2);font-weight:600}
.foot span{margin:0 9px}

@media (max-width:860px){
  .info{grid-template-columns:1fr}
  .road ol{flex-direction:column;gap:8px}
  .road li{padding-right:0}
  .road li:not(:last-child)::after{display:none}
  .lt .cr{display:none}
  .box>header{flex-wrap:wrap}
  .box>header .rf{margin-left:0}
  table.ex td:first-child{width:42%}
}
@media print{
  html,body{background:#fff}
  .lt,.show,.code .ch button,.code .ch a,.turn{display:none}
  .ans{display:block!important}
  .box{break-inside:avoid-page;border-color:#bbb}
  .code{background:#f5f5f5}
  .code pre{color:#222;max-height:none!important}
  .code pre .c{color:#5b7a5e} .code pre .s{color:#7a5a1a} .code pre .k,.code pre .t{color:#1f4a7a}
}

/* 两个窗口交替执行的步骤表（第 9 章起） */
.tl{margin:8px 0 6px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.tl-h,.tl-r{display:grid;grid-template-columns:48px 1fr 1fr}
.tl-h{background:#F6F7F4;font-size:14px;border-bottom:1px solid var(--line)}
.tl-h span{padding:6px 0 6px 10px;color:var(--mut);font-size:13px}
.tl-h b{padding:6px 12px}
.tl-h .wa{color:var(--pri-d)}
.tl-h .wb{color:#35557F;border-left:1px solid var(--line2)}
.tl-r+.tl-r{border-top:1px solid var(--line2)}
.tl-r .tn{font-family:var(--mono);font-size:13.5px;color:var(--mut);padding:14px 0 0 14px}
.tl-r>div{padding:8px 10px;min-width:0}
.tl-r .ca{background:#F3F8F6}
.tl-r .cb{background:#F2F5FA;border-left:1px solid var(--line2)}
.tl-r .emp{background:transparent}
.tl .code{margin:0}
.tl .code pre{font-size:13.5px;padding:9px 12px 10px;white-space:pre-wrap;word-break:break-word}
.tl .nt{font-size:14px;color:var(--ink2);margin:5px 2px 0;line-height:1.6}
.tl .nt.wt{color:var(--acc);font-weight:700}
.tl .nt.er{color:var(--red);font-weight:700}
@media (max-width:860px){
  .tl-h{display:none}
  .tl-r{grid-template-columns:34px 1fr}
  .tl-r .emp{display:none}
  .tl-r .cb{border-left:0}
}

/* 命令提示符中执行的代码框（第 10 章起）：标题文字换成暖色，与 Workbench 的代码框区分 */
.code.cmd .ch{background:#2E2A22}
.code.cmd .ch span{color:#E6C07B}