/* =====================================================================
   《数据库原理与应用》讲义页样式（理论讲义 / 上机练习共用）
   方格纸底色 + 墨蓝文字 + 荧光笔划重点；每一步一屏，左侧步骤栏标出位置
   ===================================================================== */
:root{
  --paper:#F5F7FA; --grid:rgba(30,64,140,.05); --card:#FFFFFF;
  --ink:#172340; --ink2:#4A5672; --mute:#7C879D;
  --line:#DCE2EC; --line2:#EDF1F6;
  --blue:#2557D6; --blue-d:#1B3F9E; --blue-s:#EBF1FD; --blue-l:#BCCDF4;
  --marker:#FFE047; --marker-s:#FFF6BF;
  --story:#9A6514; --story-s:#FFF9EC; --story-l:#F0DFB6;
  --ok:#138A57; --ok-s:#E4F4EC; --ok-l:#A9D9C2;
  --err:#D2433A; --err-s:#FCEBE9; --err-l:#F2B9B3;
  --wait:#C27A12; --wait-s:#FDF2DE;
  --con:#142142; --con2:#1D2D56; --con-t:#E3EAF7;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --mono:"Cascadia Mono","JetBrains Mono","SF Mono",Consolas,Menlo,"Courier New",monospace;
  --top:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.ls{font:17px/1.75 var(--sans);color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;min-height:100vh}
:where(.ls) a{color:var(--blue)}
:where(.ls) :is(b,strong){font-weight:700;color:var(--ink)}
:where(.ls) :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
:where(.ls) button{font:inherit;color:inherit}
:where(.ls) code{font-family:var(--mono);font-size:.88em;background:#F0F3F8;border:1px solid var(--line2);border-radius:5px;padding:0 5px;color:#26355C;overflow-wrap:anywhere}
:where(.ls) kbd{font:12.5px var(--mono);background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;white-space:nowrap}
:where(.ls) svg.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;flex:none}

/* ---------- 顶栏 ---------- */
.ls-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ls-top .in{height:var(--top);max-width:1520px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px}
.ls-home{font-weight:700;color:var(--ink)!important;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.ls-home .ic{color:var(--blue);font-size:20px}
.ls-crumb{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:15px;white-space:nowrap;min-width:0}
.ls-crumb::before{content:"/";color:var(--line)}
.ls-crumb a{color:var(--ink2);text-decoration:none}
.ls-crumb a:hover{color:var(--blue)}
.ls-crumb span{color:var(--ink);font-weight:600}
.ls-crumb i{font-style:normal;color:var(--line)}
.ls-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.ls-tbtn{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink2);cursor:pointer;font-size:14.5px;white-space:nowrap}
.ls-tbtn:hover{border-color:var(--blue-l);color:var(--blue)}
.ls-tbtn.on{background:var(--blue-s);border-color:var(--blue-l);color:var(--blue-d)}
.ls-tbtn.warn{color:var(--err)} .ls-tbtn.warn:hover{border-color:var(--err-l)}
.ls-pager{display:flex;align-items:center;gap:6px}
.ls-pager .ls-cnt{font:600 14px var(--mono);color:var(--ink2);min-width:3.6em;text-align:center}
.ls-pbar{height:3px;background:var(--line2)}
.ls-pbar i{display:block;height:100%;width:0;background:var(--blue);transition:width .45s ease}

/* ---------- 主体：左侧步骤栏 + 内容 ---------- */
.ls-shell{max-width:1520px;margin:0 auto;display:grid;grid-template-columns:272px minmax(0,1fr);align-items:start}
.ls-rail{position:sticky;top:calc(var(--top) + 3px);max-height:calc(100vh - var(--top) - 3px);overflow:auto;padding:30px 22px 30px 26px;scrollbar-width:thin}
.ls-chap{font-size:14px;color:var(--mute);text-wrap:balance}
.ls-title{font-size:22px;line-height:1.4;font-weight:800;color:var(--ink);margin:4px 0 18px;letter-spacing:-.01em}
.ls-kind{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--blue-d);background:var(--blue-s);border-radius:999px;padding:2px 10px;margin-bottom:10px}
.ls-kind.lab{color:#0F6B48;background:var(--ok-s)}
.ls-steps{list-style:none;position:relative}
.ls-steps li{position:relative;padding-left:42px}
.ls-steps li::before{content:"";position:absolute;left:14px;top:30px;bottom:-6px;width:2px;background:var(--line);transition:background .4s}
.ls-steps li:last-child::before{display:none}
.ls-steps li.past::before{background:var(--blue-l)}
.ls-steps a{display:block;text-decoration:none;color:var(--ink2);padding:6px 0 14px;position:relative}
.ls-steps .d{position:absolute;left:-42px;top:5px;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);
  display:grid;place-items:center;font:700 13px var(--mono);color:var(--mute);transition:all .3s}
.ls-steps .t{display:block;font-size:15.5px;font-weight:600;line-height:1.45;padding-top:3px}
.ls-steps .s{display:block;font-size:13px;color:var(--mute);line-height:1.5;margin-top:1px}
.ls-steps .c{font:600 12px var(--mono);color:var(--mute);margin-left:6px}
.ls-steps a:hover .t{color:var(--blue)}
.ls-steps li.seen .d{border-color:var(--blue-l);color:var(--blue)}
.ls-steps li.done .d{background:var(--ok);border-color:var(--ok);color:#fff}
.ls-steps li.done .d b{display:none} .ls-steps li.done .d::after{content:"✓";font-size:14px}
.ls-steps li.done .c{color:var(--ok)}
.ls-steps li.on .d{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px rgba(37,87,214,.15)}
.ls-steps li.on .t{color:var(--ink);font-weight:800}
.ls-steps li.on a::after{content:"正在这里";position:absolute;right:0;top:9px;font-size:11.5px;font-weight:700;color:var(--blue-d);background:var(--blue-s);border-radius:999px;padding:0 8px}
.ls-railfoot{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px}
.ls-railfoot a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.ls-railfoot a:hover{border-color:var(--blue-l)}
.ls-railfoot small{display:block;color:var(--mute);font-weight:400;font-size:12.5px}

.ls-main{min-width:0;padding:30px 36px 20px 28px}

/* ---------- 一步 ---------- */
.ls-step,.ls-task{display:none}
.ls-step.on,.ls-task.on{display:block;animation:ls-in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes ls-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ls-sh{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.ls-no{flex:none;min-width:52px;height:52px;padding:0 10px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 22px var(--mono)}
.ls-no.word{font:800 17px var(--sans);letter-spacing:.06em;background:var(--blue)}
.ls-sh h2{font-size:30px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
.ls-sh p{font-size:15.5px;color:var(--mute);margin-top:2px}

/* 引例 */
.ls-story{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;background:var(--story-s);border:1px solid var(--story-l);border-radius:16px;padding:16px 20px;margin-bottom:18px}
.ls-story .ib{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--story-l);display:grid;place-items:center;color:var(--story);font-size:28px}
.ls-story .ib .ic{stroke-width:1.6}
.ls-story h3{font-size:15px;font-weight:700;color:var(--story);margin-bottom:2px}
.ls-story p{font-size:17.5px;line-height:1.8;color:#3E3420}
.ls-story p+p{margin-top:4px}
.ls-story .so{color:var(--blue-d);font-weight:600;font-size:16.5px;display:flex;gap:8px;align-items:baseline;margin-top:8px}
.ls-story .so .ic{color:var(--blue)}

/* 划重点 */
.ls-key{display:flex;gap:14px;align-items:flex-start;margin:6px 0 22px}
.ls-key>em{flex:none;font-style:normal;font-size:13px;font-weight:800;background:var(--marker);color:var(--ink);border-radius:6px;padding:3px 9px;margin-top:5px;letter-spacing:.08em}
.ls-key>span{font-size:23px;line-height:1.65;font-weight:800;color:var(--ink)}
.ls-key mark{color:inherit;background-color:transparent;background-image:linear-gradient(transparent 56%,var(--marker) 56%,var(--marker) 92%,transparent 92%);
  background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px;transition:background-size .9s cubic-bezier(.6,.1,.3,1) .25s}
.on .ls-key mark,.ls-print .ls-key mark{background-size:100% 100%}
.ls-key code{font-size:.82em;background:rgba(255,255,255,.7)}

/* 两栏 */
.ls-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.ls-col>*+*{margin-top:16px}
.ls-h{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ls-h::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--blue)}
.ls-p{color:var(--ink2);line-height:1.8}
.ls-p b{color:var(--ink)}
.ls-def{background:var(--blue-s);border-radius:12px;padding:12px 16px;color:#22325E;line-height:1.75}
.ls-def b{color:var(--blue-d)}
.ls-note{background:var(--err-s);border-radius:12px;padding:11px 16px;color:#6B2620;font-size:16px;line-height:1.75}
.ls-note>b:first-child{color:var(--err);margin-right:6px}
.ls-note code{background:#fff}

/* 卡片式小条目（并列的几项） */
.ls-items{display:grid;gap:8px}
.ls-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ls-item>em{font-style:normal;font-weight:800;font-size:15px;color:#fff;background:var(--ink);border-radius:8px;padding:2px 10px;white-space:nowrap;margin-top:2px}
.ls-item>em.b{background:var(--blue)} .ls-item>em.g{background:var(--ok)} .ls-item>em.r{background:var(--err)} .ls-item>em.y{background:var(--wait)}
.ls-item p{color:var(--ink2);line-height:1.7}
.ls-item p b{color:var(--ink)}
.ls-item small{display:block;color:var(--mute);font-size:14px}
.ls-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ls-links a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);font-weight:700}
.ls-links a small{display:block;font-weight:400;color:var(--mute);font-size:13.5px}
.ls-links a:hover{border-color:var(--blue-l);background:var(--blue-s)}
.ls-links a .n{font:700 13px var(--mono);color:var(--blue);margin-right:6px}

/* 语句清单 */
.ls-cmds{list-style:none;display:grid;gap:6px}
.ls-cmds li{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;transition:all .3s}
.ls-cmds li>b{font-size:14.5px;color:var(--ink2)}
.ls-cmds li.on{border-color:#E9C93A;background:#FFFCEB;box-shadow:inset 4px 0 0 var(--marker)}
.ls-cmds li.past{opacity:.55}
.ls-sql{font:14.5px/1.65 var(--mono);color:#1E2A4A;white-space:pre-wrap;overflow-wrap:anywhere}
.ls-sql .k,.ls-con .k{color:var(--blue);font-weight:700}
.ls-sql .s{color:#1F7A4A} .ls-sql .f{color:#A0551B} .ls-sql .c{color:#8A93A8} .ls-sql .q{color:#7A4FB8} .ls-sql .x{color:#B03A7A;font-weight:700}

/* 表格 */
.ls-tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15.5px}
.ls-tbl th,.ls-tbl td{padding:8px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line2)}
.ls-tbl tr:last-child td{border-bottom:none}
.ls-tbl th{background:#F3F6FB;font-weight:700;color:var(--ink2);font-size:14.5px}
.ls-tbl td.m{font-family:var(--mono);font-size:14.5px;color:#26355C;white-space:nowrap}
.ls-tbl .y{color:var(--ok);font-weight:800} .ls-tbl .n{color:var(--err);font-weight:800}
.ls-tw{overflow-x:auto}

/* ---------- 动手看（演示） ---------- */
.ls-demo{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ls-demo+.ls-demo{margin-top:16px}
.ls-dh{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line2);font-weight:700;font-size:16px}
.ls-dh em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue-d);background:var(--blue-s);border-radius:999px;padding:1px 10px;flex:none}
.ls-db{padding:14px 16px 16px}
.ls-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ls-seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:#EEF2F8;border-radius:10px;padding:3px}
.ls-seg>span{font-size:13.5px;color:var(--mute);padding:4px 6px 0 8px}
.ls-seg button{border:none;background:transparent;border-radius:8px;padding:4px 12px;cursor:pointer;font-size:14.5px;color:var(--ink2);line-height:1.6}
.ls-seg button:hover{color:var(--blue)}
.ls-seg button.on{background:#fff;color:var(--blue-d);font-weight:700;box-shadow:0 1px 3px rgba(23,35,64,.12)}
.ls-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;font-size:14.5px;color:var(--ink2);white-space:nowrap;transition:border-color .15s,background .15s}
.ls-btn:hover{border-color:var(--blue-l);color:var(--blue)}
.ls-btn.pri{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.ls-btn.pri:hover{background:var(--blue-d)}
.ls-btn:disabled{opacity:.38;cursor:default;pointer-events:none}
.ls-btns{display:flex;flex-wrap:wrap;gap:6px}
.ls-msg{margin-top:12px;background:#F6F8FC;border-radius:10px;padding:10px 14px;line-height:1.7;min-height:2.9em;color:var(--ink)}
.ls-v{display:inline-block;font-size:13px;font-weight:800;color:#fff;border-radius:6px;padding:1px 9px;margin-right:8px;background:var(--mute)}
.ls-v.ok{background:var(--ok)} .ls-v.no{background:var(--err)} .ls-v.mid{background:var(--wait)} .ls-v.info{background:var(--blue)}
.ls-term{margin-top:12px;font:14px/1.7 var(--mono);background:var(--con);color:var(--con-t);border-radius:10px;padding:10px 14px;min-height:2.6em;white-space:pre-wrap;overflow-wrap:anywhere}
.ls-term .p{color:#7FC7B4;margin-right:8px}
.ls-term .cur{display:inline-block;width:8px;height:1.05em;background:var(--marker);vertical-align:-2px;margin-left:2px;animation:ls-blink 1s steps(1) infinite}
@keyframes ls-blink{50%{opacity:0}}
.ls-term .e{color:#FF9F92} .ls-term .o{color:#8FE0B5}
.ls-term:empty{display:none}

/* ---------- 代码框 ---------- */
.ls-con{background:var(--con);border-radius:12px;overflow:hidden}
.ls-con .hd{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;background:var(--con2);font-size:13px;color:#A9B6D3}
.ls-con .hd>span{flex:1;min-width:0}
.ls-con .hd a,.ls-con .hd button{font-size:12.5px;color:#DCE4F4;background:transparent;border:1px solid #3B4D7E;border-radius:6px;padding:1px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
.ls-con .hd a:hover,.ls-con .hd button:hover{background:#2A3D6E}
.ls-con .hd button.ok{border-color:#3FA27A;color:#9BE3C3}
.ls-con pre{margin:0;padding:12px 16px 14px;font:14.5px/1.7 var(--mono);color:var(--con-t);overflow-x:auto;white-space:pre}
.ls-con.tall pre{max-height:300px;overflow:auto}
.ls-con .k{color:#8CB4FF} .ls-con .s{color:#F2D38A} .ls-con .c{color:#7E8DB0} .ls-con .f{color:#E8A7FF} .ls-con .x{color:#FF9FCB;font-weight:700} .ls-con .o{color:#9BE3C3}

/* 「在哪里执行」的标签 */
.ls-tag{display:inline-flex;align-items:center;gap:4px;font:700 12.5px/1.6 var(--mono);border-radius:6px;padding:0 8px;white-space:nowrap;vertical-align:1px}
.ls-tag.t0{background:#E6E9EF;color:#2F3A52}
.ls-tag.t1{background:#DCE7FD;color:#1B3F9E}
.ls-tag.t2{background:#EDE5FB;color:#5B39A8}
.ls-tag.t3{background:#D8F1EC;color:#0F6457}
.ls-tag.t4{background:#FCEBD3;color:#8C520C}
.ls-tag.t5{background:#FBE1E7;color:#9C2747}
.ls-tag.ro{background:#fff;color:#5B39A8;border:1px dashed #A891D9}
.ls-con .hd .ls-tag{font-size:12px}

/* ---------- 上机练习 ---------- */
.ls-work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.ls-th{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ls-th h2{font-size:28px;line-height:1.3;font-weight:800}
.ls-th .cnt{margin-left:auto;flex:none;font:700 14px var(--mono);color:var(--mute);border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 12px;transition:all .3s}
.ls-th .cnt.full{background:var(--ok);border-color:var(--ok);color:#fff}
.ls-scene{display:flex;gap:12px;align-items:flex-start;background:var(--story-s);border:1px solid var(--story-l);border-radius:14px;padding:12px 16px;margin-bottom:16px;color:#3E3420}
.ls-scene .ic{color:var(--story);font-size:22px;margin-top:3px}
.ls-scene b{color:var(--story)}
.ls-subs{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ls-sub{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px;padding:14px 20px 14px 12px;border-bottom:1px solid var(--line2);transition:background .3s}
.ls-sub:last-child{border-bottom:none}
.ls-sub.ok{background:#F6FBF8}
.ls-ck{width:32px;height:32px;border-radius:50%;border:2px solid #C5CEDC;background:#fff;cursor:pointer;margin:2px auto 0;display:grid;place-items:center;font:700 13px var(--mono);color:var(--mute);transition:all .25s}
.ls-ck:hover{border-color:var(--ok);color:var(--ok)}
.ls-sub.ok .ls-ck{background:var(--ok);border-color:var(--ok);color:#fff;transform:scale(1.05)}
.ls-sub.ok .ls-ck b{display:none}
.ls-sub.ok .ls-ck::after{content:"✓";font-size:16px}
.ls-sb>*+*{margin-top:9px}
.ls-do{font-size:17px;line-height:1.75}
.ls-sub.ok .ls-do{color:var(--ink2)}
.ls-hint{font-size:15px;color:var(--ink2);background:#F6F8FC;border-radius:10px;padding:7px 12px;line-height:1.75}
.ls-hint>span{font-size:13px;font-weight:700;color:var(--mute);margin-right:8px}
.ls-hint code{background:none;border:none;padding:0;color:#26355C}
details.ls-ans>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--blue);border:1px solid var(--blue-l);border-radius:999px;padding:2px 14px;background:#fff;user-select:none}
details.ls-ans>summary::-webkit-details-marker{display:none}
details.ls-ans>summary::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
details.ls-ans[open]>summary{background:var(--blue);color:#fff;border-color:var(--blue)}
details.ls-ans[open]>summary::before{transform:rotate(90deg)}
details.ls-ans>.ls-con{margin-top:8px;animation:ls-drop .3s ease}
@keyframes ls-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ls-see{font-size:15.5px;line-height:1.75;background:var(--ok-s);border-radius:10px;padding:7px 12px;color:#164A33}
.ls-see>span{font-size:13px;font-weight:800;color:var(--ok);margin-right:8px}
.ls-see b{color:var(--err)}
.ls-see .rv{border:1px dashed var(--ok);background:#fff;color:var(--ok);border-radius:7px;padding:0 10px;cursor:pointer;font-size:14px}
.ls-see.hid em{display:none}
.ls-see:not(.hid) .rv{display:none}
.ls-see em{font-style:normal}
.ls-tf{display:flex;align-items:center;gap:10px;margin-top:16px}
.ls-tf .nx{margin-left:auto}
.ls-tf .ls-btn{height:40px;font-size:15.5px;padding:0 18px}
.ls-tf .nx.pulse{animation:ls-pulse 1.2s ease 2}
@keyframes ls-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,87,214,.45)}50%{box-shadow:0 0 0 9px rgba(37,87,214,0)}}

/* 状态看板 */
.ls-board{position:sticky;top:calc(var(--top) + 20px);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ls-board h3{font-size:16px;padding:12px 16px 10px;border-bottom:1px solid var(--line2)}
.ls-board h3 small{display:block;font-size:12.5px;color:var(--mute);font-weight:400}
.ls-bd{padding:8px 12px 12px;display:grid;gap:7px}
.ls-bi{border:1px solid var(--line2);border-radius:11px;padding:8px 10px;transition:opacity .3s}
.ls-bi .hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ls-bi .hd .st{margin-left:auto;font-size:12.5px;color:var(--mute)}
.ls-bi .ps{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.ls-bi .pv{font:12.5px/1.55 var(--mono);color:var(--ink2);background:#F4F6FA;border-radius:6px;padding:2px 8px}
.ls-bi .pv s{color:var(--err)}
.ls-bi .pv.hot{background:var(--wait-s);color:#7A4A06}
.ls-bi .pv.good{background:var(--ok-s);color:#145B3C}
.ls-bi .pv.bad{background:var(--err-s);color:#8C2A22}
.ls-bi .none{font-size:12.5px;color:var(--mute);margin-top:4px}
.ls-bi.off{opacity:.45;border-style:dashed}
.ls-bi.flash{animation:ls-flash 1.3s ease}
@keyframes ls-flash{0%{background:var(--marker-s);border-color:#E9C93A}100%{background:#fff;border-color:var(--line2)}}
.ls-board .ft{font-size:12.5px;color:var(--mute);padding:0 16px 12px}

/* 抽屉：报错速查 */
.ls-mask{position:fixed;inset:0;background:rgba(23,35,64,.32);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}
.ls-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);background:#fff;z-index:81;transform:translateX(100%);visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;display:flex;flex-direction:column}
body.ls-open .ls-mask{opacity:1;pointer-events:auto}
body.ls-open .ls-drawer{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 32px rgba(23,35,64,.16)}
.ls-drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.ls-drawer header b{font-size:18px}
.ls-drawer header button{border:none;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--mute)}
.ls-drawer .lst{overflow:auto;padding:6px 20px 20px}
.ls-er{padding:12px 0;border-bottom:1px solid var(--line2)}
.ls-er>b{font:800 18px var(--mono);color:var(--err);margin-right:10px}
.ls-er>em{font-style:normal;font-weight:700}
.ls-er p{font-size:15px;color:var(--ink2);line-height:1.7;margin-top:2px}
.ls-er.tip>b{font:800 16px var(--sans);color:var(--blue)}

/* 底部翻页、页脚 */
.ls-turn{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:18px;border-top:1px dashed var(--line)}
.ls-turn .ls-btn{height:44px;font-size:16px;padding:0 20px}
.ls-turn .tip{font-size:13.5px;color:var(--mute)}
.ls-foot{text-align:center;color:var(--mute);font-size:13.5px;padding:26px 0 34px;letter-spacing:.04em}
.ls-foot span{margin:0 10px;color:var(--line)}

/* ---------- 窄屏 ---------- */
@media (max-width:1380px){
  .ls-work{grid-template-columns:minmax(0,1fr)}
  .ls-board{position:static}
}
@media (max-width:1180px){
  .ls-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .ls-top .in{padding:0 14px;gap:10px}
  .ls-crumb{display:none}
  .ls-tbtn .tx,.ls-pager .tx{display:none}
  .ls-pager .ls-btn{padding:0 10px}
  .ls-shell{grid-template-columns:minmax(0,1fr)}
  .ls-rail{position:sticky;top:calc(var(--top) + 3px);z-index:40;max-height:none;overflow:visible;padding:0;background:rgba(245,247,250,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  .ls-chap,.ls-title,.ls-kind,.ls-railfoot,.ls-steps .s{display:none}
  .ls-steps{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}
  .ls-steps::-webkit-scrollbar{display:none}
  .ls-steps li{padding:0;flex:none}
  .ls-steps li::before{display:none}
  .ls-steps a{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px;background:#fff}
  .ls-steps .d{position:static;width:24px;height:24px;font-size:12px;border-width:1.5px}
  .ls-steps .t{font-size:14px;padding:0}
  .ls-steps li.on a{border-color:var(--blue);background:var(--blue-s)}
  .ls-steps li.on a::after{display:none}
  .ls-main{padding:20px 14px 10px}
  .ls-sh h2,.ls-th h2{font-size:23px}
  .ls-no{min-width:42px;height:42px;font-size:18px;border-radius:11px}
  .ls-key>span{font-size:19px}
  .ls-story{grid-template-columns:1fr;padding:14px}
  .ls-story .ib{display:none}
  .ls-sub{grid-template-columns:40px minmax(0,1fr);padding-right:14px}
  .ls-turn .tip{display:none}
  .ls-turn .ls-btn,.ls-tf .ls-btn{min-width:0;padding:0 14px}
  .ls-turn .ls-next,.ls-tf .nx{max-width:70%}
  .ls-turn .ls-next .tx,.ls-tf .nx .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .ls-tbl{font-size:14.5px}
  .ls-tbl th,.ls-tbl td{padding:7px 10px}
  .ls-tbl td.m{white-space:normal;overflow-wrap:anywhere;font-size:13.5px}
}
@media (max-width:560px){
  .ls-home{font-size:0;gap:0}
  .ls-tools{gap:6px}
  .ls-tbtn{padding:0 9px}
  .ls-pager .ls-cnt{min-width:3em;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{
  body.ls{background:#fff}
  .ls-top,.ls-rail,.ls-turn,.ls-board,.ls-drawer,.ls-mask,.ls-tf,.ls-btns,.ls-ctl{display:none!important}
  .ls-shell{display:block}
  .ls-step,.ls-task{display:block!important;break-before:page}
  .ls-key mark{background-size:100% 100%}
  .ls-see.hid em{display:inline} .ls-see .rv{display:none}
}