:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#11151c; --line:#30363d; --ink:#c9d1d9; --muted:#8b949e;
  --green:#7ee787; --blue:#2f81f7; --amber:#e3b341; --red:#f85149; --term:#0a0e14;
  --canvas:#0b0f16;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* display:flex 等のクラス指定が [hidden] を上書きしないように */
html,body{margin:0;height:100%}
body{font-family:-apple-system,"Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); height:100vh; display:flex; flex-direction:column; overflow:hidden}
header{display:flex; align-items:center; gap:10px; padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line)}
header h1{font-size:16px; margin:0; font-weight:700}
header h1 .sub{font-size:11px; color:var(--muted); font-weight:500; margin-left:6px}
.safe-badge{font-size:11px; color:var(--green); background:rgba(126,231,135,.1); border:1px solid rgba(126,231,135,.35); padding:3px 9px; border-radius:999px}
.spacer{flex:1}
.selwrap{font-size:12px; color:var(--muted)}
select,.hbtn,.mini{background:#21262d; color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:5px 12px; font-size:12px; cursor:pointer}
.hbtn:hover,select:hover,.mini:hover{background:#2d333b}
.hbtn.sm{padding:3px 10px; font-size:11px}

/* ===== 2カラム: 左=教材 / 仕切り / 右=ツール（タブで切替。ネットワーク図もタブの1つ）=====
   仕切り（.pl-split）はドラッグで左カラムの横幅を変更する。ツール側は残り幅を埋める。
   コース埋め込み時は教材カラムを畳み、ツールだけの1画面になる（.pl-embed で上書き）。 */
.lab{flex:1; display:grid;
  grid-template-columns:var(--pl-c1,31%) var(--pl-sw,6px) minmax(0,1fr);
  min-height:0}
.col{min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden}

/* ===== ツール作業領域: タブ（上）＋アクティブなツールペイン（下） =====
   タブで ネットワーク図/ターミナル/HTTP/ブラウザ/キャプチャ/Kali を切り替える。トンマナは
   InfraAcademy 準拠（下線式のアクティブ表示・ブランド青アクセント。アイコンは付けない）。 */
.toolcol{min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden}
.toolcol>.col{flex:1}                     /* アクティブなペインが残り高さを埋める */
.tool-tabs{display:flex; align-items:stretch; gap:2px; flex:0 0 auto;
  background:var(--panel); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none}
.tool-tabs::-webkit-scrollbar{display:none}
.tool-tab{appearance:none; border:0; border-bottom:2px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap;
  font:inherit; font-size:12.5px; font-weight:700; padding:9px 14px 8px;
  transition:color .12s, border-color .12s, background .12s}
.tool-tab:hover{color:var(--ink); background:rgba(255,255,255,.03)}
.tool-tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--blue)}

/* ドラッグで横幅を変更する仕切り */
.pl-split{background:var(--line); cursor:col-resize; position:relative; z-index:5;
  touch-action:none; transition:background .15s}
.pl-split:hover,.pl-split.is-drag{background:var(--blue)}
.pl-split::after{content:""; position:absolute; inset:0 -4px}  /* 当たり判定を左右に拡張 */
body.pl-resizing{cursor:col-resize; user-select:none}
body.pl-resizing iframe{pointer-events:none}

/* コース埋め込みモード（iframe / ?embed=1）: 上部ヘッダーとクリアCTAは出さない */
.pl-embed header{display:none !important}
.pl-embed #btnNextDone{display:none !important}
/* コースへ埋め込むとき（iframe）は、教材は InfraAcademy 側の左ペインが担う。PenLab 自身の
   教材カラムと左仕切りは畳み、ツール（タブ＋作業領域）＋ネットワーク図/戦利品だけを見せる
   （aws-sim の埋め込みと同じ考え方）。ツールタブのコマンドは教材本文の指示どおり手入力する。 */
.pl-embed .courseware{display:none !important}
.pl-embed .pl-split[data-split="a"]{display:none !important}
.pl-embed .lab{grid-template-columns:minmax(0,1fr)}

/* ---- 左: 教材 ---- */
.courseware{border-right:1px solid var(--line); background:var(--panel2)}
/* 教材ツールバー（固定・常時表示）：一覧 / 前へ / 次へ */
.ls-toolbar{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--panel); border-bottom:1px solid var(--line)}
.ls-tbtn{padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--ink);
  background:#21262d; border:1px solid var(--line); border-radius:8px; transition:.12s}
.ls-tbtn:hover:not(:disabled){background:#2d333b; border-color:#475063}
.ls-tbtn.list{color:#79c0ff; border-color:rgba(121,192,255,.4)}
.ls-tbtn:disabled{opacity:.35; cursor:not-allowed}
/* 教材下の前へ/次へバー（上のツールバーの下端版） */
.ls-toolbar-bottom{border-top:1px solid var(--line); border-bottom:0; flex:0 0 auto}
/* 目標一覧は右下パネルへ一本化（旧・左目標バーのCSSは廃止） */
.lesson{flex:1; overflow-y:auto; padding:16px 16px 64px; font-size:13.5px; line-height:1.9}
.lesson p{margin:0 0 11px} .lesson p:last-child{margin-bottom:0}

/* ---- 中央: ターミナル ---- */
.termcol{background:var(--term); border-right:1px solid var(--line)}
.term-head{display:flex; align-items:center; gap:7px; padding:8px 12px; background:#0f141b; border-bottom:1px solid var(--line)}
.term-title{font-size:12px; color:var(--muted); margin-left:6px; font-family:ui-monospace,monospace}

/* ---- 中央(Webラボ): HTTP リクエスト・コンソール ---- */
.httpcol{background:var(--term); border-right:1px solid var(--line)}
.http-base{font-size:11px; color:#79c0ff; font-family:ui-monospace,monospace}
.http-edit{padding:10px 12px; border-bottom:1px solid var(--line); background:#0f141b}
.http-line{display:flex; gap:7px; align-items:center}
.http-line select{flex:0 0 auto; font-family:ui-monospace,monospace}
.req-url{flex:1; min-width:0; background:#0a0e14; border:1px solid var(--line); border-radius:7px; color:var(--ink);
  font-family:ui-monospace,monospace; font-size:12.5px; padding:7px 9px; outline:none}
.req-url:focus{border-color:var(--blue)}
.hbtn.send{flex:0 0 auto; background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700}
.hbtn.send:hover{background:#3b8eff}
.req-sub{display:flex; align-items:center; gap:8px; margin-top:8px}
.req-lbl{font-size:10.5px; color:var(--muted); flex:0 0 46px; font-weight:700}
.req-cookie{flex:1; min-width:0; background:#0a0e14; border:1px solid var(--line); border-radius:6px; color:var(--amber);
  font-family:ui-monospace,monospace; font-size:12px; padding:5px 8px; outline:none}
.req-cookie:focus{border-color:var(--amber)}
.req-bodywrap{margin-top:8px} .req-bodywrap summary{font-size:11px; color:var(--muted); cursor:pointer}
/* JWT/base64 ツール */
.tool-wrap{margin-top:8px; border-top:1px dashed var(--line); padding-top:8px}
.tool-wrap summary{font-size:11px; color:#79c0ff; cursor:pointer; font-weight:700}
.tool-ta,.tool-in{width:100%; margin-top:4px; background:#0a0e14; border:1px solid var(--line); border-radius:6px; color:var(--ink);
  font-family:ui-monospace,monospace; font-size:11.5px; padding:6px 8px; outline:none; resize:vertical}
.tool-ta:focus,.tool-in:focus{border-color:var(--blue)}
.tool-row{display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap}
.tool-row .req-lbl{flex:0 0 auto}
.tool-row .mini{padding:4px 8px; font-size:11px}
.tool-jwt{margin-top:8px; padding:8px; background:#0c1016; border:1px solid var(--line); border-radius:7px}
.tool-jwt .tool-in{margin-bottom:4px}
.tool-jwt select{font-size:11px}
#toolJwtKey{flex:1; min-width:90px; margin-top:0}
.req-body{width:100%; margin-top:6px; background:#0a0e14; border:1px solid var(--line); border-radius:6px; color:var(--ink);
  font-family:ui-monospace,monospace; font-size:12px; padding:6px 8px; outline:none; resize:vertical}
.http-resp{flex:1; overflow-y:auto; padding:12px 14px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word}
.resp-empty{color:var(--muted); white-space:normal; line-height:1.7}
.resp-status{font-weight:800; margin-bottom:6px}
.resp-status.s2{color:var(--green)} .resp-status.s4{color:var(--amber)} .resp-status.s5{color:var(--red)}
.resp-flag{margin-top:10px; color:#0d1117; background:var(--green); border-radius:7px; padding:7px 10px; font-weight:800; white-space:normal}
.http-hist-h{font-size:10.5px; color:var(--muted); font-weight:700; padding:7px 12px 4px; border-top:1px solid var(--line)}
.http-hist{max-height:32%; overflow-y:auto; padding:0 8px 8px}
.hist-item{display:flex; gap:8px; align-items:center; padding:5px 8px; border-radius:6px; cursor:pointer; font-family:ui-monospace,monospace; font-size:11.5px}
.hist-item:hover{background:#1b212b}
.hist-item .m{flex:0 0 auto; color:#79c0ff; font-weight:700}
.hist-item .u{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.hist-item .st{flex:0 0 auto; font-weight:700}
.hist-item .st.s2{color:var(--green)} .hist-item .st.s4{color:var(--amber)} .hist-item .st.s5{color:var(--red)}

/* ---- 中央(XSSラボ): ブラウザ/DOM サンドボックス ---- */
.domcol{background:var(--term); border-right:1px solid var(--line)}
.dom-payload{display:flex; align-items:center; gap:7px; padding:10px 12px; border-bottom:1px solid var(--line); background:#0f141b}
.dom-payload .req-lbl{flex:0 0 auto}
.dom-urlbar{padding:6px 12px; font-family:ui-monospace,monospace; font-size:11.5px; color:#79c0ff; background:#0b0f16; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dom-stage{position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
.dom-viewport{flex:1; overflow-y:auto; padding:14px 16px; background:#fff; color:#111; font-family:-apple-system,sans-serif; font-size:13px; line-height:1.6}
.dom-viewport .vp-source{margin-top:12px; font-family:ui-monospace,monospace; font-size:11.5px; color:#444; white-space:pre-wrap; word-break:break-word; background:#f1f3f5; border-radius:7px; padding:9px 11px}
.dom-viewport .vp-inj{background:#fff3bf; border-radius:3px; padding:0 2px; outline:1px solid #ffd43b}
.dom-viewport .vp-note{margin-top:10px; font-size:12px; padding:8px 10px; border-radius:7px}
.dom-viewport .vp-note.fire{background:#fff0f0; border:1px solid #ffc9c9; color:#c92a2a}
.dom-viewport .vp-note.inert{background:#ebfbee; border:1px solid #b2f2bb; color:#2b8a3e}
.dom-popup{position:absolute; left:50%; top:38px; transform:translateX(-50%); width:90%; max-width:380px; z-index:8;
  background:#f3f4f6; border:1px solid #adb5bd; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.4); overflow:hidden}
.dom-popup .pop-bar{background:#e9ecef; padding:7px 12px; font-size:12px; font-weight:700; color:#212529; border-bottom:1px solid #ced4da}
.dom-popup .pop-body{padding:14px; font-family:ui-monospace,monospace; font-size:12.5px; color:#111; word-break:break-all}
.dom-popup .pop-foot{padding:8px 14px 12px; text-align:right}
.dom-popup .pop-ok{background:#1971c2; color:#fff; border:none; border-radius:6px; padding:5px 18px; font-weight:700; cursor:pointer}
.dom-popup .pop-steal{margin-top:8px; font-size:11px; color:#c92a2a}

/* ---- 中央(盗聴ラボ): パケットキャプチャ / MITM ---- */
.snifcol{background:var(--term); border-right:1px solid var(--line)}
.snif-status{font-size:11px; color:var(--muted); font-family:ui-monospace,monospace}
.snif-status.on{color:var(--red); font-weight:700}
.snif-toolbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid var(--line); background:#0f141b}
.snif-ip{width:108px; background:#0a0e14; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-family:ui-monospace,monospace; font-size:11.5px; padding:5px 7px; outline:none}
.snif-ip:focus{border-color:var(--blue)} .snif-arrow{color:var(--muted)}
.snif-packets{flex:1; overflow-y:auto; padding:4px 0; font-family:ui-monospace,monospace; font-size:11.5px}
.pkt{display:grid; grid-template-columns:42px 110px 110px 56px 1fr; gap:6px; padding:4px 12px; cursor:pointer; border-bottom:1px solid #161b22; align-items:center}
.pkt:hover{background:#161b22}
.pkt.sel{background:#13233a}
.pkt.secret{background:rgba(248,81,73,.08)}
.pkt.secret:hover{background:rgba(248,81,73,.14)}
.pkt .pt{color:var(--muted)} .pkt .psrc{color:#79c0ff; overflow:hidden; text-overflow:ellipsis} .pkt .pdst{color:#7ee787; overflow:hidden; text-overflow:ellipsis}
.pkt .pproto{color:var(--amber); font-weight:700} .pkt .pinfo{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pkt.secret .pinfo::after{content:" 🔑"; }
.pkt-head{display:grid; grid-template-columns:42px 110px 110px 56px 1fr; gap:6px; padding:5px 12px; color:var(--muted); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--term); font-weight:700}
.snif-detail{flex:0 0 auto; max-height:42%; overflow-y:auto; border-top:1px solid var(--line); padding:10px 12px; background:#0b0f16; font-family:ui-monospace,monospace; font-size:12px; white-space:pre-wrap; word-break:break-word}
.snif-detail .sd-h{color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
.snif-detail .sd-creds{margin-top:10px; color:#0d1117; background:var(--green); border-radius:7px; padding:8px 10px; font-weight:700; white-space:normal}
.snif-detail mark{background:#ffec99; color:#111; border-radius:3px; padding:0 2px}

/* ---- 中央(資格対策): Kali実機演習シェル（端末スタイルを流用・標準3カラム） ---- */
.kalicol{background:var(--term); border-right:1px solid var(--line)}
/* 教材末尾の「関連ハンズオンで確かめる」導線 */
.lesson .exam-rl-wrap{display:flex; flex-wrap:wrap; gap:6px}
.lesson .exam-rl{display:inline-flex; align-items:center; font-size:12px; color:#7ee787; background:rgba(126,231,135,.08);
  border:1px solid rgba(126,231,135,.3); border-radius:999px; padding:5px 11px; cursor:pointer; transition:.12s}
.lesson .exam-rl:hover{background:rgba(126,231,135,.16); border-color:var(--green)}

/* 教材内の 盗聴アクション・ステップ */
.lesson .ls-action{display:block; font-size:12.5px; color:#ffd8a8; background:#1a140a; border:1px solid #5c4a2b; border-radius:7px; padding:8px 10px; cursor:pointer; transition:.12s}
.lesson .ls-action:hover{border-color:var(--amber); background:#241c0e}
.lesson .ls-action::before{content:"📡 この操作を実行  "; color:var(--muted); font-size:10.5px}

/* 教材内の XSSペイロード・ステップ */
.lesson .ls-payload{display:block; font-family:ui-monospace,monospace; font-size:12px; color:#ffa8a8; background:#1a0e0e;
  border:1px solid #5c2b2b; border-radius:7px; padding:8px 10px; cursor:pointer; transition:.12s; word-break:break-all}
.lesson .ls-payload:hover{border-color:var(--red); background:#241010}
.lesson .ls-payload::before{content:"🧪 ペイロードを読み込む  "; color:var(--muted); font-size:10.5px}

/* 教材内の HTTPリクエスト・ステップ */
.lesson .ls-req{display:block; font-family:ui-monospace,monospace; font-size:12px; color:#79c0ff; background:#0a0e14;
  border:1px solid var(--line); border-radius:7px; padding:8px 10px; cursor:pointer; transition:.12s; word-break:break-all}
.lesson .ls-req:hover{border-color:var(--blue); background:#0d141c}
.lesson .ls-req::before{content:"🌐 リクエストを読み込む  "; color:var(--muted); font-size:10.5px}
.lesson .ls-req .ck{display:block; color:var(--amber); margin-top:3px; font-size:11px}

/* ---- 右: 上=ネットワーク図, 下=戦利品 ---- */
.net-pane{position:relative; flex:1; min-height:0; overflow:hidden; background:
  radial-gradient(circle at 1px 1px, #1b2230 1px, transparent 0) 0 0/26px 26px, var(--canvas)}
.pane-cap{position:absolute; top:8px; left:12px; z-index:2; font-size:11px; color:var(--muted); font-weight:700; pointer-events:none}
.detail-overlay{position:absolute; top:30px; right:10px; width:248px; max-height:calc(100% - 80px); overflow-y:auto; z-index:6; box-shadow:0 10px 30px rgba(0,0,0,.5)}
#canvas{width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.zoom-controls{position:absolute; left:12px; bottom:34px; display:flex; gap:4px; background:rgba(13,17,23,.85); border:1px solid var(--line); border-radius:8px; padding:3px}
.zoom-controls .mini{padding:3px 9px; min-width:34px}
.statusbar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:5px 12px;
  background:linear-gradient(transparent, rgba(13,17,23,.92)); font-size:10.5px; color:var(--muted); pointer-events:none}
.sb-hint b{color:var(--ink); font-weight:600}
.legend{display:flex; gap:8px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:3px; vertical-align:middle}
.legend .s-discovered{background:#8b949e}.legend .s-scanned{background:#2f81f7}.legend .s-foothold{background:#e3b341}.legend .s-root{background:#f85149}

/* ---- SVG キャンバス要素 ---- */
.cable{stroke:#46535f; stroke-width:2.4}
.cable.pivot{stroke:var(--amber); stroke-dasharray:5 4}
.cable.down{stroke:#3a2226}
.led{stroke:#0d1117; stroke-width:1.4; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}
.cable-label{fill:var(--amber); font-size:11px; text-anchor:middle; font-family:ui-monospace,monospace}
.dev{cursor:grab}
.dev.ghost{opacity:.4}
.dev.ghost:hover{opacity:.7}
.dev.ghost .devlabel,.dev.ghost .deviplabel{font-style:italic}
.cable.ghost{opacity:.32; stroke-dasharray:2 5}
.dev-halo{fill:transparent; stroke:transparent; stroke-width:1.6}
.dev:hover .dev-halo{fill:rgba(47,129,247,.06)}
.dev.sel .dev-halo{stroke:var(--green); fill:rgba(126,231,135,.07); stroke-dasharray:5 4}
.devlabel{fill:var(--ink); font-size:13px; font-weight:600; text-anchor:middle; font-family:ui-monospace,monospace}
.deviplabel{fill:var(--muted); font-size:10px; text-anchor:middle; font-family:ui-monospace,monospace}
.shellbadge{fill:#0d1117; font-size:12px; font-weight:800; text-anchor:middle; font-family:ui-monospace,monospace}
.fx{pointer-events:none}
.you-badge{fill:#0d1117; font-size:8.5px; font-weight:800; text-anchor:middle}
.crosshair{stroke:var(--blue); stroke-width:2; stroke-linecap:round}
.flow-arrow{fill:none; stroke:var(--blue); stroke-width:2.6; stroke-dasharray:6 5}
.flow-label{fill:#fff; font-size:11px; font-weight:700; text-anchor:middle; font-family:ui-monospace,monospace}

/* ---- ターミナルヘッダの信号機ドット（各ラボの term-head 共通） ---- */
.dot{width:11px; height:11px; border-radius:50%}.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
/* 本物のターミナル風: 出力と入力行を 1つのスクロール領域にまとめ、プロンプトは出力直後にインライン表示 */
.term-body{flex:1; min-height:0; overflow-y:auto; cursor:text;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; padding:10px 12px}
.term-out{white-space:pre-wrap; word-break:break-word}
.term-line.echo{color:var(--green)} .term-line.banner{color:var(--blue); font-weight:700} .term-line.dim{color:var(--muted)} .term-line.win{color:var(--green); font-weight:700}
.term-row{display:flex; align-items:center; gap:8px}
.term-prompt{color:var(--green); font-family:ui-monospace,monospace; font-size:12.5px; white-space:nowrap}
.term-input{flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:ui-monospace,monospace; font-size:12.5px; padding:0; caret-color:var(--green)}

/* ---- 右クリック メニュー ---- */
.ctxmenu{position:fixed; z-index:300; background:#1c232d; border:1px solid var(--line); border-radius:8px; padding:4px; min-width:200px; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ctx-head{font-size:11px; color:var(--muted); padding:4px 8px 6px; border-bottom:1px solid var(--line); margin-bottom:4px}
.ctx-head span{font-family:ui-monospace,monospace}
.ctx-item{padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; display:flex; flex-direction:column; gap:2px}
.ctx-item:hover{background:#2d333b}
.ctx-item code{color:var(--blue); font-size:11px; font-family:ui-monospace,monospace}

/* ---- リプレイ ---- */
.replay{position:fixed; inset:0; z-index:400; background:rgba(5,8,12,.66); display:flex; align-items:center; justify-content:center}
.replay-card{width:640px; max-width:92vw; background:var(--term); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.replay-head{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#0f141b; border-bottom:1px solid var(--line); font-size:13px}
.replay-out{height:300px; overflow-y:auto; padding:12px 14px; font-family:ui-monospace,monospace; font-size:12.5px; line-height:1.6}
.replay-foot{display:flex; align-items:center; gap:10px; padding:8px 14px; border-top:1px solid var(--line)}
.replay-bar{flex:1; height:6px; background:#21262d; border-radius:3px; overflow:hidden}
#rpFill{height:100%; width:0; background:var(--blue); transition:width .2s}
#rpProg{font-size:11px; color:var(--muted); font-family:ui-monospace,monospace}

/* ---- サイドバー ---- */
.side{display:flex; flex-direction:column; gap:12px; padding:12px; overflow-y:auto; background:var(--bg)}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.panel-h{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px}
.panel-h .x{float:right; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0}
.panel-h .x:hover{color:var(--ink)}
.loot{font-size:12px; font-family:ui-monospace,monospace; line-height:1.7; word-break:break-all}
.loot-h{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 2px}
.loot-h:first-child{margin-top:0}
.prog-row{font-family:var(--sans, system-ui); font-size:12px; line-height:1.45; color:var(--muted); padding:1px 0; word-break:normal}
.prog-row.done{color:var(--green)}
.loot .dim,.detail .dim{color:var(--muted)} .loot .flag{color:var(--amber)}

/* ---- 教材（レッスン） ---- */
.lesson .ls-hook{font-size:13.5px; font-weight:700; color:var(--green); background:rgba(126,231,135,.08);
  border:1px solid rgba(126,231,135,.25); border-radius:10px; padding:12px 14px; margin-bottom:16px; line-height:1.8}
.lesson .ls-story{color:var(--ink); margin-bottom:18px}
.lesson .ls-sec{margin:26px 0 12px; font-size:12.5px; font-weight:800; color:#79c0ff; letter-spacing:.02em;
  border-top:1px solid var(--line); padding-top:16px}
.lesson .ls-sec:first-child{border-top:none; padding-top:0; margin-top:0}
.lesson .ls-concept{margin:0 0 16px; padding:2px 0 2px 13px; border-left:3px solid rgba(121,192,255,.35)}
.lesson .ls-concept b{display:block; color:var(--ink); margin-bottom:4px; font-size:13px}
.lesson .ls-concept .body{color:var(--muted); font-size:12.5px; line-height:1.85}
.lesson .ls-phase{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--amber); margin:22px 0 9px; padding-bottom:4px; border-bottom:1px dashed rgba(227,179,65,.3)}
.lesson .ls-step{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 13px; margin-bottom:13px}
.lesson .ls-cmd{display:flex; align-items:center; gap:8px; font-family:ui-monospace,monospace; font-size:12.5px;
  color:#7ee787; background:#0a0e14; border:1px solid var(--line); border-radius:7px; padding:8px 10px; cursor:pointer; transition:.12s}
.lesson .ls-cmd:hover{border-color:var(--green); background:#0d141c}
.lesson .ls-cmd::before{content:"▶"; color:var(--muted); font-size:10px}
.lesson .ls-cmd .num{color:var(--muted); margin-left:auto; font-size:10px}
.lesson .ls-step .does{margin-top:10px; font-size:12.5px; line-height:1.8} .lesson .ls-step .does b{color:#79c0ff}
.lesson .ls-step .why{color:var(--muted); font-size:12.5px; margin-top:7px; line-height:1.75}
.lesson .ls-step .read{color:var(--green); font-size:12.5px; margin-top:7px; line-height:1.75}
/* book形式（読みながら実行）：説明とコマンドが一体で上から流れる */
.lesson .ls-book{margin-top:6px}
.lesson .bk-head{font-size:13.5px; font-weight:800; color:#79c0ff; margin:24px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line)}
.lesson .bk-head:first-child{margin-top:4px}
.lesson .bk-subhead{font-size:12.5px; font-weight:800; color:#ffa657; margin:14px 0 8px}
.lesson .bk-text{color:var(--ink); font-size:13.5px; line-height:1.95; margin:0 0 12px}
.lesson .bk-text p{margin:0 0 11px} .lesson .bk-text p:last-child{margin-bottom:0}
.lesson .bk-step{margin:0 0 16px; padding-left:12px; border-left:3px solid rgba(126,231,135,.35)}
.lesson .bk-step .ls-cmd{margin-bottom:8px}
.lesson .bk-real,.lesson .ls-step .real{font-size:12.2px; line-height:1.75; color:#c9d1d9; margin:6px 0 7px; padding:7px 9px; border:1px solid rgba(88,166,255,.24); background:rgba(56,139,253,.08); border-radius:8px}
.lesson .bk-real b,.lesson .ls-step .real b{color:#79c0ff; font-weight:700; margin-right:4px}
.lesson .bk-run{font-size:12.5px; line-height:1.8; color:var(--ink)} .lesson .bk-run b{color:var(--green); font-weight:700; margin-right:4px}
.lesson .bk-why{font-size:12.5px; line-height:1.8; color:var(--muted); margin-top:5px} .lesson .bk-why b{color:#79c0ff; font-weight:700; margin-right:4px}
.lesson .ls-list{margin:6px 0 0; padding-left:20px} .lesson .ls-list li{margin-bottom:9px; line-height:1.75}
.lesson .ls-defense li{color:#9fb3c8}
/* 脆弱なサーバコードの解説 */
.lesson .vuln-block{margin-top:4px}
.lesson .vuln-tag{font-size:11px; font-weight:800; letter-spacing:.02em; margin:10px 0 4px; display:inline-block; padding:2px 9px; border-radius:6px}
.lesson .vuln-tag.bad{color:#ff6b6b; background:rgba(248,81,73,.12); border:1px solid rgba(248,81,73,.35)}
.lesson .vuln-tag.fix{color:#7ee787; background:rgba(126,231,135,.1); border:1px solid rgba(126,231,135,.3)}
.lesson pre.code{margin:0 0 4px; padding:11px 12px; border-radius:9px; overflow-x:auto; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px; line-height:1.65; white-space:pre; tab-size:2}
.lesson pre.code.bad{background:#1a1012; border:1px solid #5c2b2b; color:#e6c3c3}
.lesson pre.code.fix{background:#0c1a10; border:1px solid #2b5c3a; color:#bfe6c8}
.lesson pre.code mark.dgr{background:rgba(248,81,73,.28); color:#ffd0d0; border-radius:3px; padding:0 2px; font-weight:700}
.lesson .vuln-why{font-size:12.5px; line-height:1.8; color:var(--muted); margin:4px 0 8px}
.lesson .vuln-why b{color:#ff8787}
.lesson .vuln-why.fix b{color:var(--green)}
.lesson .ls-empty{color:var(--muted); padding:24px 6px; text-align:center; line-height:1.9}

/* 完了→次のシナリオへ の導線 */
.cta-next{display:block; width:100%; margin-top:10px; padding:9px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
  color:#0d1117; background:var(--green); border:none; border-radius:8px; transition:.12s}
.cta-next:hover{background:#9bf0a3}
.hbtn.nav{padding:5px 9px; font-weight:700}

/* 教材一覧の戻るボタン等で使う共通ボタン（ナビは上部の固定ツールバーへ移設済み） */
.ls-navbtn{flex:1; padding:9px 8px; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--ink);
  background:#21262d; border:1px solid var(--line); border-radius:8px; transition:.12s}
.ls-navbtn:hover:not(:disabled){background:#2d333b; border-color:#475063}
.ls-navbtn.list{flex:0 0 34%; color:#79c0ff}
.ls-navbtn:disabled{opacity:.38; cursor:not-allowed}

/* 教材一覧（インデックス） */
.ls-listhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.ls-listhead b{font-size:15px}
.ls-listhead .ls-navbtn{flex:0 0 auto; padding:6px 10px}
.ls-group{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 8px}
.ls-card{position:relative; padding:11px 12px; margin-bottom:9px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); cursor:pointer; transition:.12s}
.ls-card:hover{border-color:#475063; background:#1b212b}
.ls-card.active{border-color:var(--green); box-shadow:inset 0 0 0 1px rgba(126,231,135,.4)}
.ls-card-t{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; padding-right:64px; line-height:1.5}
.ls-card.cleared .ls-card-t{color:var(--green)}
.ls-card-d{font-size:12px; color:var(--muted); line-height:1.7}
.ls-card-badge{position:absolute; top:11px; right:12px; font-size:10px; font-family:ui-monospace,monospace; color:var(--amber);
  background:rgba(227,179,65,.12); border:1px solid rgba(227,179,65,.3); border-radius:6px; padding:1px 7px}
.ls-card.active .ls-card-badge::after{content:" ・今ここ"; color:var(--green)}

/* ---- 詳細カード ---- */
.detail{font-size:12px}
.d-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.d-head b{font-size:14px; font-family:ui-monospace,monospace}
.d-ip{color:var(--muted); font-family:ui-monospace,monospace; font-size:11px}
.d-badge{color:#0d1117; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px}
.d-row{display:flex; gap:8px; padding:2px 0}
.d-row span:first-child{color:var(--muted); flex:0 0 56px}
.d-sec{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:8px 0 3px; border-top:1px solid var(--line); padding-top:6px}
.d-port{font-family:ui-monospace,monospace; font-size:12px; padding:1px 0}
.d-vuln{color:var(--red); font-weight:700}
.d-shell{display:inline-block; background:rgba(227,179,65,.15); color:var(--amber); border:1px solid rgba(227,179,65,.4); border-radius:5px; padding:1px 8px; font-family:ui-monospace,monospace; font-size:11px}
.d-shell.root{background:rgba(248,81,73,.15); color:var(--red); border-color:rgba(248,81,73,.4)}
.d-actions{margin-top:8px}
.d-hint{margin-top:8px; padding:8px 10px; background:rgba(47,129,247,.08); border:1px solid rgba(47,129,247,.25); border-radius:7px; color:#79c0ff; font-size:12px; line-height:1.4}

/* ---- toast ---- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1c232d; border:1px solid var(--line); color:var(--ink); padding:9px 16px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:500}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}