/*!
 * iModel 教程演示引擎 - 样式
 * 由 page-tutorial.php 只在教程页加载。全部规则作用域在 .imdemo 之下，
 * 不影响主题与任何已有页面。
 */
.imdemo{
  --ink:#101a26; --ink-2:#4a5766; --ink-3:#7b8798;
  --paper:#f2f4f7; --surface:#ffffff; --line:#dfe4ea; --line-2:#eef1f5;
  --amber:#E8A33D; --amber-soft:#fdf3e2; --navy:#0d1b2e;
  --red:#c8382f; --yellow:#f0b323; --green:#3f9e4d;
  --node:#FFCC00; --node-line:#8a7000;
  --shadow:0 1px 2px rgba(16,26,38,.06), 0 8px 24px rgba(16,26,38,.06);
  --radius:10px;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Consolas","Microsoft YaHei",monospace;
  font-family:var(--sans); color:var(--ink); margin:34px 0 10px;
}
.imdemo *{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){
  .imdemo *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

.imdemo .demo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin:22px 0 8px; overflow:hidden;
}
.imdemo .demo-head{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line-2);
  font-size:13px; color:var(--ink-3); background:var(--surface);
}
.imdemo .demo-head .t{color:var(--ink-2); font-weight:600}
.imdemo .demo-head .spacer{flex:1}
.imdemo .stage{
  position:relative; background:#f0f0f0; color:#1b1b1b; overflow:hidden;
  font-size:13px; line-height:1.5;
}
.imdemo .stage, .imdemo .stage *{font-family:var(--sans)}
.imdemo .screen{
  position:absolute; top:0; left:0; width:980px; height:430px; transform-origin:top left;
  transform:scale(var(--k,1)) translate(var(--ox,0px),0); background:#f0f0f0; overflow:hidden;
}
.imdemo .demo.zoom{position:fixed; inset:0; z-index:200; margin:0; border-radius:0; border:0;
  display:flex; flex-direction:column; background:var(--surface)}
.imdemo .demo.zoom .stage{flex:1; display:grid; place-items:center; background:#33383f}
.imdemo .demo.zoom .cap{min-height:88px}
.imdemo .demo.zoom .cap .d{font-size:17px}
.imdemo .demo.zoom .cap .t{font-size:17px}
.imdemo body.zoomed{overflow:hidden}
.imdemo .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.imdemo .bar button{
  background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:6px 13px;
  font-size:13.5px; color:var(--ink-2);
}
.imdemo .bar button:hover:not(:disabled){border-color:var(--amber); color:var(--ink)}
.imdemo .bar button:disabled{opacity:.4; cursor:default}
.imdemo .bar .play{background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600; min-width:92px}
.imdemo .bar .play:hover{background:var(--amber); border-color:var(--amber); color:#2a1d05}
.imdemo .bar .spacer{flex:1}
.imdemo .bar .pos{font:500 12.5px/1 var(--mono); color:var(--ink-3)}
.imdemo .dots{display:flex; gap:5px; align-items:center}
.imdemo .dots i{width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:.2s}
.imdemo .dots i.done{background:var(--green)}
.imdemo .dots i.cur{background:var(--yellow); transform:scale(1.5); box-shadow:0 0 0 3px rgba(240,179,35,.2)}
.imdemo .cap{
  padding:13px 16px 15px; border-top:1px solid var(--line-2); background:var(--line-2);
  min-height:74px;
}
.imdemo .cap .k{font-size:12px; font-weight:600; color:var(--amber); margin-bottom:3px; font-family:var(--mono)}
.imdemo .cap .t{font-weight:650; margin-right:8px}
.imdemo .cap .d{color:var(--ink-2); font-size:14.5px}
.imdemo .ui{position:absolute; inset:0; display:flex; flex-direction:column; background:#f0f0f0}
.imdemo .ui-menu{display:flex; gap:2px; padding:4px 8px; background:#f0f0f0; border-bottom:1px solid #d6d6d6; font-size:12.5px; position:relative; z-index:5}
.imdemo .ui-menu span{padding:2px 9px; border-radius:3px; color:#222; transition:.2s}
.imdemo .ui-menu span.hot{background:#cfe3ff; box-shadow:0 0 0 1px #6ba4ef}
.imdemo .ui-tool{display:flex; gap:6px; align-items:center; padding:4px 8px; background:#f7f7f7; border-bottom:1px solid #d6d6d6}
.imdemo .ui-tool i{width:16px; height:16px; border-radius:3px; background:#dcdcdc; display:block}
.imdemo .ui-tool i.y{background:var(--node)}
.imdemo .ui-body{flex:1; display:flex; min-height:0}
.imdemo .ui-left{width:206px; border-right:1px solid #d6d6d6; background:#fafafa; display:flex; flex-direction:column; min-height:0; transition:box-shadow .3s}
.imdemo .ui-panel-t{background:#e8eef7; border-bottom:1px solid #d6d6d6; padding:3px 8px; font-size:12px; font-weight:600; color:#20364f; display:flex; align-items:center; gap:5px}
.imdemo .ui-panel-t::before{content:""; width:9px; height:9px; background:var(--node); border:1px solid #8a7000; border-radius:2px; display:block}
.imdemo .ui-search{margin:6px; padding:3px 7px; border:1px solid #b9c0cb; background:#fff; border-radius:3px; font-size:12px; color:#888; display:flex; align-items:center; gap:5px}
.imdemo .ui-search .q{color:#111}
.imdemo .ui-search .caret{width:1px; height:12px; background:#111; animation:blink 1s steps(1) infinite}
.imdemo .tree{padding:2px 0 8px; overflow:auto; font-size:12.5px; flex:1}
.imdemo .tree div{padding:2px 8px 2px 0; display:flex; align-items:center; gap:5px; white-space:nowrap; transition:.25s}
.imdemo .tree .l1{padding-left:8px; font-weight:600}
.imdemo .tree .l2{padding-left:22px}
.imdemo .tree .l3{padding-left:36px}
.imdemo .tree .ico{width:13px; height:13px; border-radius:2px; background:#cbd3dd; flex:none}
.imdemo .tree .ico.y{background:var(--node); border:1px solid #8a7000}
.imdemo .tree .dim{opacity:.22}
.imdemo .tree .hit{background:#fff4d6; box-shadow:inset 0 0 0 1px var(--amber); border-radius:3px}
.imdemo .ui-canvas{flex:1; position:relative; background:#fff; overflow:hidden; min-width:0}
.imdemo .ui-tabs{display:flex; gap:1px; background:#e9e9e9; border-bottom:1px solid #d6d6d6; padding:3px 4px 0}
.imdemo .ui-tabs span{padding:3px 12px; font-size:12px; background:#dcdcdc; border-radius:4px 4px 0 0; color:#444; transition:.25s}
.imdemo .ui-tabs span.on{background:#fff; color:#111; font-weight:600; box-shadow:0 -1px 0 #d6d6d6 inset}
.imdemo .ui-bottom{height:104px; border-top:1px solid #d6d6d6; background:#fafafa; display:flex; flex-direction:column; transition:height .35s}
.imdemo .ui-bottom.tall{height:150px}
.imdemo .ui-btabs{display:flex; gap:10px; padding:3px 10px; background:#eef1f5; border-bottom:1px solid #d6d6d6; font-size:12px}
.imdemo .ui-btabs span{padding:1px 6px; border-radius:3px; color:#555}
.imdemo .ui-btabs span.on{background:#fff; color:#111; font-weight:600; box-shadow:0 0 0 1px #d6d6d6}
.imdemo .ui-bcontent{flex:1; overflow:hidden; padding:6px 10px; font-size:12px; color:#333; position:relative}
.imdemo .node{position:absolute; width:78px; text-align:center; transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .35s}
.imdemo .node .cap-t{font-size:11.5px; font-weight:600; color:#111; margin-bottom:2px; white-space:nowrap; line-height:1.2}
.imdemo .node .box{display:flex; align-items:center; justify-content:center; gap:2px}
.imdemo .node .glyph{
  width:34px; height:34px; border-radius:4px; background:var(--node); border:1px solid #8a7000;
  display:grid; place-items:center; font:700 13px/1 var(--mono); color:#241d00; position:relative;
}
.imdemo .node[data-kind="read"] .glyph{background:#f2913c; border-color:#a35a13; color:#fff}
.imdemo .node[data-kind="rule"] .glyph{background:#5cc08a; border-color:#2c7a4d; color:#0e3a20}
.imdemo .node .port{width:0; height:0; border:5px solid transparent; border-left-color:#111; border-right:0}
.imdemo .node .port.in{border-left-color:transparent; border-left:0; border-right:5px solid #111}
.imdemo .node[data-kind="read"] .port.in{opacity:0}
.imdemo .node .lamps{display:flex; gap:3px; justify-content:center; margin-top:3px; padding:2px 4px; background:#e8e8e8; border-radius:3px; width:fit-content; margin-inline:auto; border:1px solid #cfcfcf}
.imdemo .node .lamps i{width:7px; height:7px; border-radius:50%; background:#cfcfcf; transition:background .3s, box-shadow .3s}
.imdemo .node .lamps{position:relative}
.imdemo .node[data-state="idle"] .lamps i:nth-child(1){background:var(--red)}
.imdemo .node[data-state="ready"] .lamps i:nth-child(2){background:var(--yellow)}
.imdemo .node[data-state="run"] .lamps i:nth-child(2){background:var(--yellow); box-shadow:0 0 0 3px rgba(240,179,35,.3); animation:pulse .9s infinite}
.imdemo .node[data-state="ok"] .lamps i:nth-child(3){background:var(--green)}
.imdemo .node[data-state="fail"] .lamps i:nth-child(1){background:var(--red); box-shadow:0 0 0 3px rgba(200,56,47,.25)}
.imdemo .node[data-state="run"] .lamps::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--yellow) 38%,#d9dde2 38%); background-size:260% 100%;
  animation:prog 1.1s linear infinite;
}
.imdemo .node .nm{font:11px/1.3 var(--mono); color:#444; margin-top:2px}
.imdemo .node .badge{position:absolute; right:-7px; bottom:-4px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#fff; opacity:0; transform:scale(.5); transition:.3s}
.imdemo .node[data-state="fail"] .badge{opacity:1; transform:scale(1); background:var(--red)}
.imdemo .node.sel .glyph{box-shadow:0 0 0 2px #1a6fd4, 0 0 0 5px rgba(26,111,212,.2)}
.imdemo .node.ghost{opacity:.55; filter:saturate(.6)}
.imdemo .wire{position:absolute; height:2px; background:#8c8c8c; transform-origin:left center; transition:width .5s ease}
.imdemo .wire.flow{background:linear-gradient(90deg,#8c8c8c 50%, transparent 0) repeat-x; background-size:10px 2px; animation:march .6s linear infinite}
.imdemo .cursor{
  position:absolute; width:20px; height:26px; left:0; top:0; z-index:30; pointer-events:none;
  transition:transform .75s cubic-bezier(.35,.1,.25,1), opacity .3s; opacity:0;
}
.imdemo .cursor svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.imdemo .cursor.on{opacity:1}
.imdemo .cursor.click::after{
  content:""; position:absolute; left:-9px; top:-9px; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--amber); animation:ping .55s ease-out;
}
.imdemo .tip{
  position:absolute; z-index:28; background:#101a26; color:#fff; font-size:12.5px; line-height:1.5;
  padding:7px 11px; border-radius:7px; max-width:230px; box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0; transform:translateY(6px); transition:.3s; pointer-events:none;
}
.imdemo .tip.on{opacity:1; transform:translateY(0)}
.imdemo .tip::after{content:""; position:absolute; left:18px; bottom:-5px; width:10px; height:10px; background:#101a26; transform:rotate(45deg)}
.imdemo .tip.up::after{bottom:auto; top:-5px}
.imdemo .ring{
  position:absolute; border:2.5px solid var(--red); border-radius:50%; z-index:26; pointer-events:none;
  opacity:0; transform:scale(.9); transition:.35s;
}
.imdemo .ring.on{opacity:1; transform:scale(1)}
.imdemo .ring.rect{border-radius:5px}
.imdemo .dlg{
  position:absolute; background:#fff; border:1px solid #9aa3ae; border-radius:6px; z-index:20;
  box-shadow:0 14px 44px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.98); transition:.32s; pointer-events:none;
}
.imdemo .dlg.on{opacity:1; transform:none}
.imdemo .dlg-t{background:#e9edf2; border-bottom:1px solid #cdd3db; padding:5px 10px; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px; color:#1b2733}
.imdemo .dlg-t .x{margin-left:auto; color:#666; font-weight:400}
.imdemo .dlg-tabs{display:flex; gap:2px; padding:6px 8px 0; border-bottom:1px solid #d6d6d6; font-size:12px; flex-wrap:wrap}
.imdemo .dlg-tabs span{padding:3px 9px; border-radius:4px 4px 0 0; color:#555; border:1px solid transparent; border-bottom:0; white-space:nowrap; transition:.2s}
.imdemo .dlg-tabs span.on{background:#fff; color:#111; font-weight:600; border-color:#d6d6d6; box-shadow:0 1px 0 #fff}
.imdemo .dlg-body{flex:1; padding:10px 12px; overflow:hidden; font-size:12.5px; position:relative}
.imdemo .fld{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.imdemo .fld label{color:#444; white-space:nowrap}
.imdemo .fld .inp{flex:1; border:1px solid #b9c0cb; border-radius:3px; background:#fff; padding:3px 7px; min-height:23px; color:#111; transition:.25s}
.imdemo .fld .btn{border:1px solid #b9c0cb; border-radius:3px; background:#f2f2f2; padding:3px 10px; color:#222}
.imdemo .fld .num{width:56px; border:1px solid #b9c0cb; border-radius:3px; padding:2px 6px; background:#fff; text-align:center; transition:.25s}
.imdemo .hi{box-shadow:0 0 0 2px var(--amber); border-color:var(--amber) !important}
.imdemo .chk{display:inline-flex; align-items:center; gap:5px; margin-right:14px; color:#333}
.imdemo .chk .bx{width:13px; height:13px; border:1px solid #7a8493; border-radius:2px; background:#fff; display:grid; place-items:center; font-size:10px; color:#fff; transition:.2s}
.imdemo .chk.on .bx{background:#1a6fd4; border-color:#1a6fd4}
.imdemo .chk.on .bx::after{content:"✓"}
.imdemo .grp{border:1px solid #dcdfe4; border-radius:5px; padding:9px 10px 6px; margin-bottom:10px; position:relative}
.imdemo .grp>.gt{position:absolute; top:-9px; left:9px; background:#fff; padding:0 5px; font-size:11.5px; color:#5a6472}
.imdemo .tb{width:100%; border-collapse:collapse; font-size:11.5px; table-layout:fixed}
.imdemo .tb th, .imdemo .tb td{border:1px solid #d3d8de; padding:2px 6px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.imdemo .tb th{background:#eef1f5; font-weight:600; color:#20364f}
.imdemo .tb .rid{background:#f5f5f5; color:#a33; font-weight:600; width:52px}
.imdemo .tb tr{transition:opacity .4s, background .3s}
.imdemo .tb tr.gone{opacity:.28}
.imdemo .tb tr.gone td{text-decoration:line-through; color:#98a1ac}
.imdemo .tb tr.mark{background:#ffe9e6}
.imdemo .tb tr.head-row{background:#fff8e0}
.imdemo .tb td.miss{color:#c8382f; text-align:center}
.imdemo .tb-wrap{border:1px solid #d3d8de; overflow:hidden; border-radius:3px; background:#fff}
.imdemo .ctb{display:flex; border:1px solid #d3d8de; background:#fff; border-radius:3px; overflow:hidden}
.imdemo .ctb .col{flex:1 1 0; min-width:0; transition:flex-basis .5s, flex-grow .5s, opacity .4s, padding .5s; overflow:hidden}
.imdemo .ctb .col.gone{flex-grow:0; flex-basis:0; opacity:0}
.imdemo .ctb .col .ch{background:#eef1f5; font-weight:600; color:#20364f; font-size:11.5px; padding:3px 6px; border-bottom:1px solid #d3d8de; white-space:nowrap}
.imdemo .ctb .col .cc{font-size:11.5px; padding:2px 6px; border-bottom:1px solid #eceff3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.imdemo .ctb .col+.col{border-left:1px solid #e6e9ee}
.imdemo .twin{display:grid; grid-template-columns:1fr 34px 1fr; gap:8px; align-items:stretch}
.imdemo .twin .lst{border:1px solid #c6ccd4; border-radius:4px; background:#fff; min-height:112px; padding:3px; position:relative; overflow:hidden}
.imdemo .twin .lh{font-size:11.5px; color:#5a6472; margin-bottom:3px}
.imdemo .twin .it{font-size:11.5px; padding:2px 6px; border-radius:3px; transition:.4s; background:#fff}
.imdemo .twin .it.sel{background:#cfe3ff; box-shadow:inset 0 0 0 1px #6ba4ef}
.imdemo .twin .it.hide{opacity:0; height:0; padding:0; overflow:hidden}
.imdemo .twin .mid{display:flex; flex-direction:column; gap:4px; justify-content:center; align-items:center}
.imdemo .twin .mid b{width:26px; height:22px; border:1px solid #c6ccd4; border-radius:3px; display:grid; place-items:center; font-size:12px; color:#555; background:#f7f7f7; transition:.25s}
.imdemo .twin .mid b.hot{background:var(--amber); border-color:var(--amber); color:#2a1d05}
.imdemo .twin .empty{color:#98a1ac; font-style:italic; font-size:11.5px; text-align:center; padding-top:36px; transition:.3s}
.imdemo [data-from]{opacity:0; transition:opacity .35s ease, transform .35s ease}
.imdemo [data-from].on{opacity:1}
.imdemo [data-from].rise{transform:translateY(8px)}
.imdemo [data-from].rise.on{transform:none}
.imdemo [data-from].pop{transform:scale(.94)}
.imdemo [data-from].pop.on{transform:none}



/* 关键帧 */
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(240,179,35,0)}}
@keyframes prog{from{background-position:100% 0} to{background-position:-70% 0}}
@keyframes march{to{background-position:10px 0}}
@keyframes ping{from{transform:scale(.3); opacity:1} to{transform:scale(1.15); opacity:0}}

/* 自动播放状态提示 */
.imdemo .auto-flag{
  font-size:12px; color:var(--ink-3); padding:2px 10px; border-radius:999px;
  background:var(--line-2); display:none; align-items:center; gap:6px;
}
.imdemo.is-auto:not(.is-manual) .auto-flag{display:inline-flex}
.imdemo .auto-flag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:imdemo-blink 1.6s ease-in-out infinite;
}
.imdemo.is-auto:not(.is-manual) .demo{border-color:#e3e8ef}
.imdemo .demo-head .tbtn{
  background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:5px 11px; font-size:13px; color:var(--ink-2); cursor:pointer; font-family:inherit;
}
.imdemo .demo-head .tbtn:hover{border-color:var(--amber); color:var(--ink)}
.imdemo .bar button{font-family:inherit}
body.imdemo-zoomed{overflow:hidden}
@keyframes imdemo-blink{0%,100%{opacity:1} 50%{opacity:.25}}

/* 悬停时给出「已暂停」的暗示，避免读者以为卡住了 */
.imdemo.is-auto:not(.is-manual) .demo:hover .auto-flag::before{animation:none; background:var(--yellow)}
.imdemo.is-auto:not(.is-manual) .demo:hover .auto-flag{color:var(--ink-2)}