/* =========================================================================
 * AWS Sim — styles.css
 * 元 NetSim Pro のレイアウト構造を踏襲し、AWSコンソールの配色へ
 *   ヘッダー: スクイッドインク #232f3e / アクセント: AWSオレンジ #ec7211
 *   リソース色: ネットワーク=紫 / コンピューティング=オレンジ / DB=青
 * ========================================================================= */
:root{
  --header:#161e2d;
  --header-2:#232f3e;
  --accent:#ec7211;
  --accent-hi:#ff9900;
  --ink:#16191f;
  --muted:#5f6b7a;
  --line:#d5dbdb;
  --panel:#ffffff;
  --canvas-bg:#f2f3f3;
  --ok:#1d8102;
  --ng:#d13212;
  --info:#0073bb;
  --net:#8c4fff;          /* ネットワーク系(VPC/IGW/NAT) */
  --compute:#ed7100;      /* EC2 */
  --db:#2074d5;           /* RDS */
  --sub-public:#1d8102;   /* パブリックサブネット */
  --sub-private:#0073bb;  /* プライベートサブネット */
  --radius:8px;
  --shadow:0 8px 28px rgba(15,23,42,.18);
  font-size:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Amazon Ember","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  color:var(--ink);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--canvas-bg);
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
/* Safari等のネイティブselect描画(角丸・内側シャドウ)を消し、共通のカスタム矢印にする */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%3E%3Cpath%20d='M1%201l4%204%204-4'%20fill='none'%20stroke='%235f6b7a'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
}
select::-ms-expand{display:none}
code{background:#f1f3f3;border:1px solid #e3e6e6;border-radius:4px;padding:0 4px;font-size:.92em}

/* ---------------- header ---------------- */
header{
  height:46px;flex:0 0 46px;
  background:linear-gradient(180deg,var(--header-2),var(--header));
  color:#e8edf3;
  display:flex;align-items:center;gap:12px;
  padding:0 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 2px 8px rgba(0,0,0,.25);
  z-index:20;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
header::-webkit-scrollbar{height:6px}
header::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.brand{flex:0 0 auto;}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:15px;letter-spacing:.2px}
.brand .smile{color:var(--accent-hi)}
.brand small{font-weight:400;color:#9aa9ba;font-size:11.5px}
header .spacer{flex:1}
header select{
  background:rgba(255,255,255,.08);color:#e8edf3;border:1px solid rgba(255,255,255,.15);
  border-radius:6px;padding:0 8px;max-width:240px;height:30px;flex:0 0 auto;
}
header select option{color:#111}
.hbtn{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#dde6ee;border-radius:6px;padding:0 12px;font-size:12.5px;
  height:30px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;
}
.hbtn:hover{background:rgba(255,255,255,.14)}
.hbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.hbtn.primary:hover{background:var(--accent-hi)}

/* ---------------- layout ---------------- */
main{flex:1;display:flex;min-height:0}
aside{
  width:128px;flex:0 0 128px;background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
  padding:10px 8px;overflow-y:auto;
}
aside h4{
  font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;
  margin:6px 2px 2px;
}
.tools,.palette{display:flex;flex-direction:column;gap:5px}
.palette-label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:8px 0 1px;padding-left:2px;text-transform:uppercase}
.tools button,.palette button{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--line);border-radius:7px;background:#fff;
  padding:7px 4px;font-size:11px;color:#3b4656;line-height:1.1;
}
.tools button:hover,.palette button:hover{border-color:var(--accent);background:#fff7ef}
.tools button.active,.palette button.active{
  border-color:var(--accent);background:#fdf0e3;box-shadow:0 0 0 2px rgba(236,114,17,.18);
  color:#9a4a07;font-weight:600;
}

.canvas-wrap{flex:1;position:relative;min-width:0;display:flex;flex-direction:column}
#canvas{
  flex:1;width:100%;height:100%;
  background:
    linear-gradient(0deg,rgba(22,25,31,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,25,31,.035) 1px,transparent 1px);
  background-size:24px 24px;
  touch-action:none;
}

/* ---------------- canvas: コンテナと機器 ---------------- */
.vpc-box{fill:rgba(140,79,255,.04);stroke:var(--net);stroke-width:2;rx:10}
.vpc-box.sel{stroke-width:3;filter:drop-shadow(0 0 4px rgba(140,79,255,.5))}
.vpc-label{font-size:12.5px;font-weight:700;fill:var(--net)}
.vpc-sub{font-size:11px;fill:#7a64a8}
.subnet-box{stroke-width:1.6;stroke-dasharray:7 4;rx:8}
.subnet-box.public{fill:rgba(29,129,2,.05);stroke:var(--sub-public)}
.subnet-box.private{fill:rgba(0,115,187,.05);stroke:var(--sub-private)}
.subnet-box.sel{stroke-width:2.6}
.subnet-label{font-size:11.5px;font-weight:700}
.subnet-label.public{fill:var(--sub-public)}
.subnet-label.private{fill:var(--sub-private)}
.subnet-sub{font-size:10.5px;fill:var(--muted)}
.resize-handle{fill:#fff;stroke:#94a3b8;stroke-width:1.4;cursor:nwse-resize}
.dev{cursor:grab}
.dev.sel .dev-frame{filter:drop-shadow(0 0 5px rgba(236,114,17,.7))}
.dev-name{font-size:11px;font-weight:600;fill:#1f2937;text-anchor:middle}
.dev-ip{font-size:10px;fill:var(--muted);text-anchor:middle}
.badge-public{font-size:9px;font-weight:700;fill:#fff}
.cloud{cursor:pointer}
.flash-ok{animation:flash-ok .9s ease-out}
.flash-ng{animation:flash-ng .9s ease-out}
@keyframes flash-ok{0%{filter:drop-shadow(0 0 10px rgba(29,129,2,.9))}100%{filter:none}}
@keyframes flash-ng{0%{filter:drop-shadow(0 0 10px rgba(209,50,18,.9))}100%{filter:none}}

/* ---------------- statusbar ---------------- */
.statusbar{
  height:30px;flex:0 0 30px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 12px;
  font-size:11.5px;color:var(--muted);
}
.statusbar #hint{flex:1;color:#9a4a07;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend{display:flex;gap:12px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.zoom-controls{display:inline-flex;gap:4px}
.mini{
  border:1px solid var(--line);background:#fff;border-radius:5px;
  font-size:11px;padding:2px 8px;color:#3b4656;
}
.mini:hover{border-color:var(--accent)}

/* ---------------- 経路チェック結果ドック ---------------- */
#reachDock{
  position:absolute;left:12px;bottom:42px;width:430px;max-height:62%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;z-index:15;
}
.dock-head{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:#fafbfc;border-bottom:1px solid var(--line);
  font-weight:700;font-size:12.5px;
}
.dock-head .spacer{flex:1}
#reachResult{padding:10px 12px;overflow-y:auto}
.reach-verdict{font-weight:800;font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.reach-verdict.ok{color:var(--ok)}
.reach-verdict.ng{color:var(--ng)}
.step{display:flex;gap:9px;padding:7px 0;border-bottom:1px dashed #e6eaee}
.step:last-child{border-bottom:0}
.step .mark{flex:0 0 20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;margin-top:1px}
.step.ok .mark{background:var(--ok)}
.step.ng .mark{background:var(--ng)}
.step.info .mark{background:var(--info)}
.step b{font-size:12.5px;display:block;margin-bottom:2px}
.step p{font-size:12px;color:#3b4656;line-height:1.55}

/* ---------------- レッスンパネル ---------------- */
#lessonPanel,#challengePanel{
  width:330px;flex:0 0 330px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;position:relative;
}
.panel-resize{
  position:absolute;left:-3px;top:0;width:9px;height:100%;cursor:ew-resize;z-index:6;touch-action:none;
}
.panel-resize::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:4px;height:42px;border-radius:3px;background:#c7cfd8;opacity:0;transition:opacity .15s;
}
.panel-resize:hover::before,.panel-resize.dragging::before{opacity:.95;background:var(--accent)}
body.col-resizing{cursor:ew-resize;user-select:none}
#lessonPanel.hidden,#challengePanel.hidden{display:none}
.lesson-head{
  padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfc;
  display:flex;align-items:center;gap:8px;
}
.lesson-head h3{font-size:13.5px}
.lesson-head .spacer{flex:1}
#lessonSel{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 8px;margin:10px 12px 0;width:calc(100% - 24px)}
.lesson-body{flex:1;overflow-y:auto;padding:10px 14px 16px}
.lesson-intro{
  font-size:12.5px;line-height:1.7;color:#2b3440;background:#f7f8fa;
  border:1px solid #e6eaee;border-left:3px solid var(--accent);
  border-radius:6px;padding:10px 12px;margin-bottom:12px;
}
.goal{
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;margin-bottom:8px;
  background:#fff;
}
.goal.done{border-color:#bfe3b4;background:#f4faf1}
.goal-row{display:flex;gap:9px;align-items:flex-start}
.goal .gmark{
  flex:0 0 19px;height:19px;border-radius:50%;border:2px solid #c4ccd4;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:800;
}
.goal.done .gmark{background:var(--ok);border-color:var(--ok)}
.goal p{font-size:12.5px;line-height:1.5;flex:1}
.goal.done p{color:#2f6b22}
.hint-btn{border:0;background:none;color:var(--info);font-size:11.5px;padding:0;margin-top:5px;text-decoration:underline}
.hint-text{font-size:11.5px;color:#5f6b7a;background:#f0f6fb;border-radius:5px;padding:6px 9px;margin-top:6px;line-height:1.55}
.lesson-done{
  margin-top:6px;text-align:center;font-weight:800;color:var(--ok);
  background:#f0f9eb;border:1px solid #bfe3b4;border-radius:8px;padding:12px;font-size:13.5px;
}

/* ---------------- フローティング設定ウィンドウ ---------------- */
.devwin{
  position:absolute;width:480px;max-width:92vw;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;z-index:50;
}
.devwin-head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:grab;
  background:var(--header-2);color:#fff;font-weight:700;font-size:13px;
}
.devwin-head>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.devwin-head .rid{font-weight:400;color:#9aa9ba;font-size:11.5px;flex-shrink:0}
.devwin-head .spacer{flex:1}
.devwin-head .x{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:5px;width:24px;height:24px;line-height:1}
.devwin-tabs{display:flex;border-bottom:1px solid var(--line);background:#fafbfc;overflow-x:auto;scrollbar-width:thin}
.devwin-tabs::-webkit-scrollbar{height:5px}
.devwin-tabs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
.devwin-tabs button{
  border:0;background:none;padding:9px 14px;font-size:12.5px;color:var(--muted);
  border-bottom:2px solid transparent;font-weight:600;white-space:nowrap;flex:0 0 auto;
}
.devwin-tabs button.active{color:#9a4a07;border-bottom-color:var(--accent)}
.devwin-body{padding:14px;max-height:min(440px,72vh);overflow-y:auto}
.frow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.frow label{flex:0 0 130px;font-size:12px;color:var(--muted)}
.frow input[type=text],.frow select{
  flex:1;border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:13px;min-width:0;
}
.frow input:focus,.frow select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(236,114,17,.15)}
.frow .static{font-size:13px}
.note{font-size:11.5px;color:var(--muted);line-height:1.6;background:#f7f8fa;border-radius:6px;padding:8px 10px;margin:8px 0}
.err{color:var(--ng);font-size:11.5px;margin:-4px 0 8px 140px}
.switch{position:relative;width:44px;height:24px;flex:0 0 44px}
.switch input{opacity:0;width:0;height:0}
.switch .knob{
  position:absolute;inset:0;width:100%;height:100%;background:#c4ccd4;border-radius:999px;transition:.15s;cursor:pointer;
}
.switch .knob::after{
  content:'';position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.switch input:checked + .knob{background:var(--accent)}
.switch input:checked + .knob::after{left:22px}
/* .frow label{flex:0 0 130px} がスイッチ(label要素)にも効いて横伸びするのを防ぐ */
.frow label.switch{flex:0 0 44px;width:44px}

table.rt{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
table.rt th{
  text-align:left;font-size:11px;color:var(--muted);font-weight:600;
  border-bottom:2px solid var(--line);padding:5px 7px;text-transform:uppercase;letter-spacing:.4px;
}
table.rt td{border-bottom:1px solid #edf0f3;padding:6px 7px}
.del{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;border:0;background:transparent;color:#5f6b7a;font-size:15px;line-height:1;padding:0;cursor:pointer}
.del:hover{background:#f2f3f3;color:#d13212}
.addrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.addrow select,.addrow input{border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12.5px}
.addrow input{width:130px}
.btn{
  border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 13px;font-size:12.5px;font-weight:600;
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{color:var(--ng);border-color:#f0b6a8}

/* ---------------- 経路チェックのテスト種別ダイアログ ---------------- */
#testDialog{
  position:fixed;inset:0;background:rgba(22,25,31,.45);display:none;
  align-items:center;justify-content:center;z-index:90;
}
#testDialog.open{display:flex}
.test-card{
  width:430px;max-width:92vw;background:#fff;border-radius:10px;box-shadow:var(--shadow);
  padding:18px;
}
.test-card h3{font-size:14.5px;margin-bottom:4px}
.test-card .pair{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.test-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ---------------- toast / help ---------------- */
#toast{
  position:fixed;left:50%;bottom:46px;transform:translateX(-50%) translateY(20px);
  background:#16191f;color:#fff;border-radius:8px;padding:9px 16px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:80vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#helpModal{
  position:fixed;inset:0;background:rgba(22,25,31,.5);display:none;
  align-items:flex-start;justify-content:center;z-index:80;overflow-y:auto;padding:40px 16px;
}
#helpModal.open{display:flex}
.help-card{
  width:760px;max-width:100%;background:#fff;border-radius:12px;box-shadow:var(--shadow);
  padding:26px 30px;line-height:1.75;font-size:13px;
}
.help-card h2{font-size:18px;margin-bottom:10px}
.help-card h3{font-size:14px;margin:18px 0 6px;color:#9a4a07}
.help-card ul{padding-left:20px}
.help-card li{margin-bottom:4px}
.help-card .btn{margin-top:16px}

@media (max-width:1100px){
  #lessonPanel,#challengePanel{width:280px;flex-basis:280px}
}

/* ===== シミュレートブラウザ ===== */
.browser-win{width:560px;max-width:92vw}
.browser-head .bdots{display:flex;gap:5px;margin-right:8px}
.browser-head .bdots i{width:10px;height:10px;border-radius:50%;background:#fff5;display:inline-block}
.browser-head .bdots i:nth-child(1){background:#ff5f57}
.browser-head .bdots i:nth-child(2){background:#febc2e}
.browser-head .bdots i:nth-child(3){background:#28c840}
.bbar{display:flex;gap:6px;padding:8px 10px;background:#f1f3f5;border-bottom:1px solid var(--line);align-items:center}
.bbar .burl{flex:1;border:1px solid var(--line);border-radius:14px;padding:5px 12px;font-size:12.5px;background:#fff}
.bbar .burl:focus{outline:2px solid var(--accent);outline-offset:-1px}
.bbtn{border:none;background:none;font-size:16px;cursor:pointer;color:#51616f;padding:2px 4px;border-radius:6px}
.bbtn:hover{background:#e3e7ea}
.bpage{min-height:230px;max-height:340px;overflow:auto;background:#fff;padding:0}
.bhome{padding:38px 24px;text-align:center}
.berr{padding:30px 26px;text-align:left}
.berr-title{font-weight:800;font-size:15px;margin:10px 0 6px;color:#202b3a}
.berr-detail{font-size:12.5px;line-height:1.75;color:#3b4656}
.berr-code{margin-top:10px;font-family:ui-monospace,monospace;font-size:11.5px;color:#8b97a5}
/* 表示されるサイト */
.site{display:flex;flex-direction:column}
.served{background:#eef4ff;border-bottom:1px solid #d4e2ff;color:#2a4a8b;font-size:11.5px;padding:6px 12px;font-weight:600}
.site-hero{background:linear-gradient(120deg,#5b3a1e,#8a5a2b);color:#fff;font-size:21px;font-weight:800;padding:26px 22px;letter-spacing:.5px}
.site-hero.apache{background:#f2f3f3;color:#16191f;border-bottom:1px solid #d5dbdb;font-weight:700;letter-spacing:0}
.site-hero.board{background:linear-gradient(120deg,#1c4587,#3b6fc4)}
.site-hero.err{background:linear-gradient(120deg,#7a1f1f,#b13a3a);font-size:17px}
.site-body{padding:16px 20px;font-size:13.5px;line-height:1.8}
.site-foot{margin-top:14px;border-top:1px dashed var(--line);padding-top:9px;font-size:11px;color:var(--muted)}
.dberr{background:#fdecec;border:1px solid #f3b8b8;color:#a02222;border-radius:7px;padding:9px 12px;font-weight:700;font-size:12.5px;margin-bottom:10px}
.post-form{display:flex;gap:7px;margin-bottom:12px}
.post-form input{border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12.5px}
.posts{display:flex;flex-direction:column;gap:8px}
.post{background:#f7f8f9;border:1px solid var(--line);border-radius:7px;padding:8px 11px}
.post-text{font-size:12.5px}
.post-at{font-size:10.5px;color:var(--muted);margin-top:3px}
/* ユーザーデータのスクリプト */
.udscript{background:#1e2733;color:#cfe3c3;font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.6;border-radius:7px;padding:10px 12px;overflow:auto;white-space:pre;margin:0 0 8px}

/* ===== v4: Route 53 / NACL / HTTPS ===== */
.secure{background:#e7f5e7;border-bottom:1px solid #bfe3bf;color:#1d6b1d;font-size:11.5px;padding:6px 12px;font-weight:700}
.domain-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0}
.domain-head{display:flex;align-items:center;margin-bottom:6px;font-size:13px}

/* ===== v5: ガイド付きデモ(アニメーション) ===== */
#demoOverlay{position:fixed;inset:0;z-index:4000;background:transparent;pointer-events:auto}
.demo-mask{position:fixed;inset:0;background:rgba(10,16,24,.0);pointer-events:none}
.demo-cursor{position:fixed;left:0;top:0;z-index:4030;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:transform .6s cubic-bezier(.45,.05,.35,1)}
.demo-cursor.press svg{transform:scale(.8)}
.demo-cursor svg{transition:transform .12s ease;display:block}
.demo-click{position:absolute;left:-3px;top:-3px;width:32px;height:32px;border-radius:50%;
  border:2.5px solid var(--accent);opacity:0;pointer-events:none}
.demo-click.go{animation:demoRip .5s ease-out}
@keyframes demoRip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.demo-ring{position:fixed;z-index:4010;pointer-events:none;border-radius:11px;
  border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(236,114,17,.22);
  animation:demoRing 1.2s ease-in-out infinite;transition:left .25s,top .25s,width .25s,height .25s}
@keyframes demoRing{50%{box-shadow:0 0 0 9px rgba(236,114,17,.10)}}
.demo-caption{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:4020;
  width:min(620px,calc(100vw - 28px));background:rgba(22,30,42,.97);color:#eef3f8;border-radius:14px;
  padding:15px 18px 13px;box-shadow:0 16px 48px rgba(0,0,0,.5);backdrop-filter:blur(5px);pointer-events:auto}
.demo-cap-head{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.demo-cap-step{font-size:11px;font-weight:800;letter-spacing:.5px;color:#ff9d4d;white-space:nowrap}
.demo-cap-title{font-size:15.5px;font-weight:800}
.demo-cap-text{font-size:13px;line-height:1.7;color:#cfd9e4;margin:0 0 8px}
.demo-cap-why{font-size:12px;line-height:1.65;color:#a9c7e8;background:rgba(80,140,230,.14);
  border-left:3px solid #5b8fd6;border-radius:0 7px 7px 0;padding:7px 11px;margin:0 0 10px}
.demo-cap-why b{color:#cfe0f5}
.demo-cap-btns{display:flex;align-items:center;gap:8px}
.demo-cap-btns .spacer{flex:1}
.demo-cap-btns .dbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#e8eef5;font-size:12px;padding:0 12px;height:30px;display:inline-flex;align-items:center;
  border-radius:7px;cursor:pointer}
.demo-cap-btns .dbtn:hover{background:rgba(255,255,255,.2)}
#demoQuit{border-color:rgba(255,140,120,.4)!important;color:#ffb3a3!important}
@media (max-width:620px){.demo-caption{bottom:12px;padding:12px 14px}.demo-cap-text{font-size:12.5px}}

/* デモ選択メニュー */
.demo-menu{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4100;
  width:min(560px,calc(100vw - 32px));background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);padding:20px;max-height:84vh;overflow:auto}
.demo-menu-h{font-size:17px;font-weight:800;color:var(--ink,#16202e)}
.demo-menu-sub{font-size:12.5px;color:var(--muted);margin:4px 0 14px;line-height:1.6}
.demo-menu-item{display:block;width:100%;text-align:left;border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;margin-bottom:9px;background:#fff;cursor:pointer;transition:all .12s}
.demo-menu-item:hover{border-color:var(--accent);background:#fff7ef;transform:translateY(-1px)}
.demo-menu-title{display:block;font-size:14px;font-weight:700;color:#16202e}
.demo-menu-desc{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55}
.demo-menu-close{display:block;margin:6px auto 0;border:1px solid var(--line);background:#f4f6f8;
  border-radius:8px;padding:7px 18px;cursor:pointer;font-size:13px}
.demo-menu-close:hover{background:#e9edf0}

.lesson-demo-btn{display:block;width:100%;border:1.5px solid var(--accent);background:#fff7ef;color:#c2570d;
  font-weight:700;font-size:13px;border-radius:9px;padding:9px 12px;margin:0 0 12px;cursor:pointer;transition:all .12s}
.lesson-demo-btn:hover{background:var(--accent);color:#fff}

/* ===== v6: Auto Scaling ===== */
.asg-bar{position:relative;height:22px;background:#f2f3f3;border:1px solid #d5dbdb;border-radius:4px;overflow:hidden;margin:6px 0 4px}
.asg-bar-fill{position:absolute;left:0;top:0;bottom:0;background:#5a9e6f;transition:width .35s ease}
.asg-bar span{position:absolute;left:0;right:0;top:0;line-height:22px;text-align:center;font-size:11px;font-weight:700;color:#16191f}

/* ===== v7: オンボーディング / 用語 / 進捗 ===== */
/* 常設の操作レジェンド */
.legend-ops{color:var(--muted)}
.legend-ops b{color:var(--ink);font-weight:700}

/* ウェルカムモーダル */
#welcomeModal{position:fixed;inset:0;z-index:5000;background:rgba(12,18,28,.55);display:none;align-items:center;justify-content:center;padding:18px}
#welcomeModal.open{display:flex}
.welcome-card{background:#fff;border-radius:18px;max-width:560px;width:100%;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.45);max-height:90vh;overflow:auto}
.welcome-emoji{font-size:40px;text-align:center}
.welcome-card h2{margin:6px 0 4px;text-align:center;font-size:22px;color:var(--ink)}
.welcome-lead{font-size:13.5px;line-height:1.75;color:#3b4656;margin:0 0 16px;text-align:center}
.welcome-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wstep{display:flex;gap:12px;align-items:flex-start;background:#f7f9fb;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.6;color:#3b4656}
.wstep b{color:var(--ink)}
.wnum{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.welcome-tip{font-size:12px;line-height:1.65;color:#6b4a12;background:#fff7e9;border:1px solid #f0d9a8;border-radius:10px;padding:9px 12px;margin-bottom:16px}
.welcome-tip b{color:#7a3e00}
.welcome-btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.welcome-btns .btn{font-size:13px;padding:9px 16px;border-radius:9px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.welcome-btns .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.welcome-btns .btn.primary:hover{background:#d2630c}
.welcome-btns .btn.ghost{color:var(--muted);border-color:transparent}
.welcome-btns .btn:hover{background:#f0f2f4}
.welcome-btns .btn.primary:hover{background:#d2630c}

/* 空キャンバスのガイド */
#emptyGuide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5}
#emptyGuide[hidden]{display:none}
.empty-card{position:relative;pointer-events:auto;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;padding:24px 28px;text-align:center;box-shadow:0 12px 40px rgba(15,23,42,.12);max-width:420px}
.empty-x{position:absolute;top:10px;right:12px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(15,23,42,.06);color:#5b6677;font-size:18px;line-height:1;cursor:pointer}
.empty-x:hover{background:rgba(15,23,42,.12);color:#1a2433}
.empty-emoji{font-size:34px}
.empty-title{font-weight:800;font-size:16px;color:var(--ink);margin:6px 0 4px}
.empty-sub{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.empty-btns{display:flex;gap:9px;justify-content:center;margin-bottom:10px}
.ebtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 15px;font-size:13px;cursor:pointer;color:var(--ink)}
.ebtn:hover{background:#f0f2f4}
.ebtn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.ebtn.primary:hover{background:#d2630c}
.empty-hint{font-size:11.5px;color:var(--muted)}

/* レッスン: 進捗・ナビ */
.lesson-progress{font-size:11.5px;color:var(--muted);font-weight:700;margin-right:8px;white-space:nowrap}
.lesson-nav{display:flex;gap:6px;align-items:center;padding:0 12px 8px}
.lesson-nav select{flex:1;min-width:0}
.lesson-nav .mini{flex:none}

/* 次にやるゴールの強調 + 自動ヒント */
.goal.next{border-left:3px solid var(--accent);background:#fff7ef}
.goal.next .gmark{color:var(--accent);font-weight:800}
.hint-text.next{background:#fff3e0;border-left:3px solid var(--accent);color:#7a3e00}

/* 用語ツールチップ */
.term{border-bottom:1px dotted #8aa0b6;cursor:help}

/* デモ完了モーダル */
.demo-done-modal{position:fixed;inset:0;z-index:5000;background:rgba(12,18,28,.5);display:flex;align-items:center;justify-content:center;padding:18px}
.demo-done-card{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.demo-done-emoji{font-size:34px}
.demo-done-title{font-weight:800;font-size:17px;color:var(--ink);margin:6px 0 6px}
.demo-done-sub{font-size:13px;color:#3b4656;line-height:1.7;margin-bottom:16px}
.demo-done-btns{display:flex;flex-direction:column;gap:9px}
.demo-done-btns .btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 14px;font-size:13px;cursor:pointer;color:var(--ink)}
.demo-done-btns .btn:hover{background:#f0f2f4}
.demo-done-btns .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.demo-done-btns .btn.primary:hover{background:#d2630c}

/* ===== v12: メッセージ配信トレース(SQS/SNS/Lambda) ===== */
.trace-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-top:4px}
.trace-step{display:flex;gap:8px;align-items:flex-start;background:#f7f9fb;border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.trace-ico{font-size:15px;flex:none;line-height:1.4}
.trace{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.trace .trace-step{flex-direction:column;gap:2px;font-size:12px;line-height:1.45}
.trace-note{font-size:11px;color:var(--muted);line-height:1.5}

/* ===== v13: Well-Architected 構成レビュー ===== */
.rev-summary{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.rev-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.rev-pillar{font-weight:800;font-size:13px;margin:12px 0 5px;padding-bottom:3px;border-bottom:2px solid var(--line)}
.rev-item{border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:8px 11px;margin-bottom:6px;background:#fafbfc}
.rev-item-h{display:flex;align-items:center;gap:7px}
.rev-ic{font-size:13px;flex:none}
.rev-title{font-weight:700;font-size:12.5px;flex:1}
.rev-badge{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:#eef1f4;color:#555;flex:none}
.rev-detail{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.rev-item.sev-risk{border-left-color:#d13212}
.rev-item.sev-warn{border-left-color:#e8a317}
.rev-item.sev-good{border-left-color:#1d8102}
.rev-chip.sev-risk{background:#fdf0ed;color:#d13212;border-color:#f3c9bf}
.rev-chip.sev-warn{background:#fdf7e8;color:#9a6a00;border-color:#f0dca6}
.rev-chip.sev-good{background:#eef7ec;color:#1d8102;border-color:#c3e0b8}
.rev-item.rev-clickable{cursor:pointer;transition:background .12s,box-shadow .12s}
.rev-item.rev-clickable:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.rev-open{font-size:11px;font-weight:700;color:var(--accent,#0073bb);margin-top:5px}
.rev-score{display:flex;align-items:center;gap:12px;background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.rev-grade{font-size:30px;font-weight:900;width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border:3px solid;border-radius:12px;line-height:1}
.rev-meter{height:9px;background:#e6ebf0;border-radius:999px;overflow:hidden;margin-top:5px}
.rev-meter-fill{height:100%;border-radius:999px;transition:width .4s}

/* ===== v17: Step Functions ワークフロー ===== */
.sfn-step{border:1px solid var(--line);border-left:3px solid #cd2264;border-radius:9px;padding:7px 10px;margin-bottom:6px;background:#fafbfc}
.sfn-step-h{display:flex;align-items:center;gap:6px}
.sfn-num{flex:none;width:20px;height:20px;border-radius:50%;background:#cd2264;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ===== v18: パレット検索 ===== */
.pal-search-wrap{padding:2px 0 8px}
.pal-search{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;background:#fff;color:var(--ink,#1a2233)}
.pal-search:focus{outline:none;border-color:var(--accent,#0073bb);box-shadow:0 0 0 3px rgba(0,115,187,.12)}

/* ===== v18: アイコン凡例 ===== */
.legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:7px;margin:6px 0 4px}
.legend-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink,#1a2233)}
.legend-ico{flex:none;min-width:40px;height:26px;padding:0 7px;border-radius:7px;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.2px}

/* ===== v18: ノードホバー説明 ===== */
.node-tip{position:fixed;z-index:9000;display:none;max-width:240px;background:#1a2433;color:#fff;border-radius:9px;padding:8px 11px;box-shadow:0 6px 22px rgba(0,0,0,.28);pointer-events:none;font-size:12px;line-height:1.45}
.node-tip-h{font-weight:800;font-size:12.5px;margin-bottom:2px}
.node-tip-b{color:#c9d3e0;font-size:11px}

/* ===== v18: 構成レビュー評価バッジ ===== */
.review-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:6px;background:#666;color:#fff;font-size:11px;font-weight:800;vertical-align:middle}

/* ===== v18: レビュー満点バナー ===== */
.rev-clear{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:#eef7ec;border:1px solid #bfe0b4;color:#1d6f0a;font-weight:700;font-size:12.5px}
.rev-clear-soft{background:#eef3fb;border-color:#bcd3ef;color:#1b5fa8}

/* ===== v18: 経路チェック結果クリック ===== */
.step-clickable{cursor:pointer}
.step-clickable:hover{background:rgba(0,115,187,.07);border-radius:8px}
.step-open{color:var(--accent,#0073bb);font-weight:700;font-size:11px;margin-top:3px}

/* ===== v19: デモメニューのカテゴリ見出し ===== */
.demo-menu-cat{margin:10px 4px 4px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#8a93a3;text-transform:none;border-top:1px solid var(--line,#e6e9ee);padding-top:8px}
.demo-menu-cat:first-of-type{border-top:none;margin-top:6px}

/* ===== v19: レッスン進捗バー ===== */
.lesson-progbar{height:6px;background:#e9edf2;border-radius:99px;margin:0 0 8px;overflow:hidden}
.lesson-progbar-fill{height:100%;background:linear-gradient(90deg,#1d8102,#5fb728);border-radius:99px;transition:width .35s ease}

/* ===== v19: レビュー柱ごとの件数 ===== */
.rev-pillar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rev-pillar-tally{font-size:11px;font-weight:700;color:#6b7686;letter-spacing:.02em}

/* ===== v19: ロードマップの章見出し ===== */
.help-card .rm-chapter{list-style:none;margin:12px 0 4px -22px;font-size:12px;font-weight:800;letter-spacing:.03em;color:#0073bb;text-transform:none}
.help-card .rm-chapter:first-child{margin-top:2px}

/* ===== 通信パケットのアニメーション ===== */
.fx-packet{position:absolute;width:14px;height:14px;border-radius:50%;background:#1d8102;
  box-shadow:0 0 10px #1d8102, inset 0 0 3px rgba(255,255,255,.9);transform:translate(-50%,-50%);
  pointer-events:none;z-index:6}
.fx-packet.fx-fail{background:#d13212;box-shadow:0 0 10px #d13212}
.fx-packet.fx-arrive{animation:fxArrive .34s ease forwards}
.fx-packet.fx-blocked{animation:fxBlocked .54s ease forwards}
@keyframes fxArrive{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@keyframes fxBlocked{0%{opacity:1}25%{opacity:.15}50%{opacity:1}75%{opacity:.15}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}

/* 理解度チェック(SAAシナリオ問題) */
.lesson-quiz{margin-top:14px;border-top:1px dashed #d7dee6;padding-top:10px}
.quiz-head{font-weight:800;font-size:12.5px;color:#2a3f54;margin-bottom:8px}
.quiz-card{background:#f7f9fc;border:1px solid #e2e9f0;border-radius:8px;padding:10px;margin-bottom:8px}
.quiz-q{font-size:12.5px;font-weight:600;line-height:1.6;margin-bottom:8px;color:#1f2d3d}
.quiz-choice{display:block;width:100%;text-align:left;font-size:12px;line-height:1.5;padding:7px 10px;margin:5px 0;border:1px solid #cfd9e3;border-radius:6px;background:#fff;cursor:pointer;transition:background .12s,border-color .12s}
.quiz-choice:hover{background:#eef4fb;border-color:#9fb6cc}
.quiz-choice.correct{background:#e7f7ec;border-color:#46c06a;color:#0f7a33;font-weight:600}
.quiz-choice.wrong{background:#fdeceb;border-color:#e8736a;color:#b42318;font-weight:600}
.quiz-explain{font-size:11.5px;line-height:1.6;border-radius:6px;padding:8px 10px;margin-top:7px}
.quiz-explain.ok{background:#e7f7ec;color:#10632c}
.quiz-explain.ng{background:#fdeceb;color:#9a2820}

/* SAA 5本柱スコア */
.rev-pillars{margin-top:10px;background:#f7f9fc;border:1px solid #e2e9f0;border-radius:8px;padding:9px 11px}
.rev-pillars-head{font-weight:800;font-size:11.5px;color:#2a3f54;margin-bottom:7px}
.rev-pillar-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.rev-pillar-name{width:92px;font-size:11.5px;color:#34495e;flex:none}
.rev-pillar-bar{flex:1;height:10px;background:#e6ecf2;border-radius:5px;overflow:hidden}
.rev-pillar-fill{height:100%;border-radius:5px;transition:width .3s}
.rev-pillar-grade{width:34px;text-align:right;font-weight:800;font-size:12px;flex:none}

/* 接続線トグル + 凡例(キャンバス左上オーバーレイ) */
#edgeCtl{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;z-index:5}
.edge-toggle{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:11.5px;font-weight:600;color:#34495e;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.edge-toggle input{cursor:pointer}
#edgeLegendBtn{background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#edgeLegend{position:absolute;top:38px;left:0;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;box-shadow:0 4px 16px rgba(0,0,0,.14);min-width:230px}
.leg-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#42505e;padding:2px 0}
.leg-line{width:26px;height:3px;border-radius:2px;flex:none;background:var(--c,#888)}
.leg-line.dash{background:repeating-linear-gradient(90deg,var(--c,#888) 0 5px,transparent 5px 9px)}
.edge-line{pointer-events:none}

/* 簡略化の注意リスト(学習ガイド内) */
.caveat-list{margin:6px 0 10px;padding-left:18px}
.caveat-list li{font-size:12.5px;line-height:1.7;color:#42505e;margin:3px 0}
.caveat-list b{color:#b45309}

/* ---------------- 学習進捗マップ ---------------- */
.map-overlay{position:fixed;inset:0;background:rgba(15,20,28,.55);display:flex;align-items:center;justify-content:center;z-index:90;padding:24px 14px;overflow-y:auto}
.map-card{background:#fff;border-radius:16px;max-width:680px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.45);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.map-head{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.map-title{font-size:16px;font-weight:800;color:#16202b}
.map-count{margin-left:auto;font-size:12.5px;font-weight:700;color:#1d8102;background:#e9f6e3;border-radius:999px;padding:3px 10px}
.map-bar{height:8px;background:#e9edf2;border-radius:999px;margin:0 16px;overflow:hidden}
.map-bar-fill{height:100%;background:linear-gradient(90deg,#7aa116,#39b54a);border-radius:999px;transition:width .4s ease}
.map-legend{display:flex;flex-wrap:wrap;gap:12px;padding:10px 16px 4px;font-size:11.5px;color:#5b6675}
.map-legend span{display:inline-flex;align-items:center;gap:5px}
.map-dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.map-dot.done{background:#39b54a}
.map-dot.now{background:#9ccb5a}
.map-dot.todo{background:#dfe4ea}
.map-dot.cur{background:#fff;border:2px solid #ec7211}
.map-body{padding:6px 16px 4px;overflow-y:auto}
.map-sec{margin:8px 0 12px}
.map-sec-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:#34404e;margin-bottom:6px;border-left:3px solid #8c4fff;padding-left:8px}
.map-sec-count{font-size:11px;color:#8895a5;font-weight:600}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.map-chip{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:#dfe4ea;color:#3a4654;font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s ease,box-shadow .12s ease}
.map-chip:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.16)}
.map-chip.done{background:#39b54a;color:#fff;border-color:#2f9e40}
.map-chip.now{background:#cdeab0;color:#2c5a14;border-color:#a9cc4a}
.map-chip.todo{background:#eef1f4;color:#7a8696}
.map-chip.cur{outline:3px solid #ec7211;outline-offset:1px}
.map-chip-badge{position:absolute;top:-6px;right:-5px;font-size:11px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.map-foot{padding:8px 16px 14px;font-size:11px;color:#8895a5}
@media (max-width:520px){ .map-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))} }

/* ---------------- リッチなレッスン本文(長文教材) ---------------- */
.lesson-intro.rich{font-size:13.5px;line-height:1.85;color:#2a3340}
.lesson-intro.rich h2{font-size:16px;font-weight:800;color:#16202b;margin:18px 0 8px;padding-bottom:5px;border-bottom:2px solid #ec7211}
.lesson-intro.rich h2:first-child{margin-top:2px}
.lesson-intro.rich h3{font-size:14px;font-weight:800;color:#23527c;margin:14px 0 6px;padding-left:9px;border-left:4px solid #8c4fff}
.lesson-intro.rich p{margin:9px 0}
.lesson-intro.rich strong{color:#b3471a;font-weight:700}
.lesson-intro.rich code{background:#eef1f4;border:1px solid #dfe4ea;border-radius:4px;padding:1px 5px;font-size:12px;color:#0b3a66}
.lesson-intro.rich ul{margin:8px 0 8px 2px;padding-left:18px}
.lesson-intro.rich li{margin:5px 0;line-height:1.7}
.lesson-intro.rich table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12.5px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.lesson-intro.rich thead tr{background:linear-gradient(90deg,#23527c,#2e6da4);color:#fff}
.lesson-intro.rich th{padding:8px 10px;text-align:left;font-weight:700;font-size:12px}
.lesson-intro.rich td{padding:7px 10px;border-top:1px solid #eef1f4;vertical-align:top}
.lesson-intro.rich tbody tr:nth-child(even){background:#f7f9fb}
.lesson-intro.rich tbody tr:hover{background:#fff6ef}

/* =========================================================================
 * AWS simulation workspace
 * ========================================================================= */
[hidden]{display:none!important}
body[data-aws-sim-layout="workspace"]{
  min-width:0;
  background:#eef1f4;
}
.sim-workspace{
  flex:1;
  width:100%;
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.workspace-view{width:100%;height:100%;min-width:0;min-height:0}
.architecture-pane{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  position:relative;
}
.architecture-toolbar{
  min-height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:6px 12px;
  background:#fff;
  border-bottom:1px solid #d5dbdb;
}
.architecture-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.architecture-mark{
  width:6px;
  height:30px;
  flex:0 0 6px;
  border-radius:2px;
  background:#8c4fff;
}
.architecture-heading h1{
  font-size:14px;
  line-height:1.15;
  letter-spacing:0;
}
.architecture-heading p{
  margin-top:2px;
  color:#687078;
  font-size:10.5px;
}
.architecture-heading p strong{color:#16191f}
.architecture-actions{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.sample-picker{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#5f6b7a;
  font-size:10.5px;
  white-space:nowrap;
}
.sample-picker select{
  width:min(260px,30vw);
  height:30px;
  min-width:128px;
  border:1px solid #aab7b8;
  border-radius:2px;
  background:#fff;
  color:#16191f;
  padding:0 26px 0 8px;
  font-size:11.5px;
}
.zoom-controls{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.icon-button,.zoom-value{
  height:28px;
  border:1px solid #aab7b8;
  border-radius:2px;
  background:#fff;
  color:#16191f;
}
.icon-button{width:28px;font-size:17px;line-height:1}
.zoom-value{min-width:50px;padding:0 7px;font-size:10.5px}
.icon-button:hover,.zoom-value:hover{background:#f2f3f3;border-color:#687078}
.architecture-pane .canvas-wrap{
  flex:1;
  min-height:0;
  overflow:hidden;
  background:#f7f8f8;
}
.architecture-pane #canvas{
  min-height:0;
  background-color:#f7f8f8;
  background-size:20px 20px;
}
.architecture-empty{
  position:absolute;
  inset:48px 0 27px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#687078;
  background:rgba(247,248,248,.9);
  pointer-events:none;
  text-align:center;
  padding:16px;
}
.architecture-empty::before{
  content:"";
  width:32px;
  height:22px;
  margin-bottom:3px;
  border:2px solid #879596;
  border-radius:50% 50% 44% 44%;
  opacity:.55;
}
.architecture-empty strong{font-size:12.5px;color:#414d5c}
.architecture-empty span{font-size:10.5px}
.architecture-pane .statusbar{
  height:27px;
  flex-basis:27px;
  gap:10px;
  padding:0 10px;
  font-size:10px;
}
.architecture-pane .statusbar #hint{color:#5f6b7a;font-weight:500}
.architecture-legend{display:flex;align-items:center;gap:5px;white-space:nowrap}
.architecture-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:4px}
.legend-vpc{border:2px solid #8c4fff;background:#f7f2ff}
.legend-public{border:2px solid #1d8102;background:#eff9ec}
.legend-private{border:2px solid #0073bb;background:#edf7fc}

.aws-console{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  overflow:hidden;
}
.aws-console-nav{
  min-height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  color:#fff;
  background:#232f3e;
  border-bottom:1px solid #111820;
}
.sim-global-header{
  height:46px;
  min-height:46px;
  flex:0 0 46px;
  overflow:visible;
  padding:0 8px;
  gap:7px;
  box-shadow:0 2px 7px rgba(15,23,42,.28);
}
.workspace-tabs{
  flex:1;
  min-width:0;
  display:flex;
  align-self:stretch;
  align-items:stretch;
  gap:1px;
  overflow-x:auto;
  scrollbar-width:none;
}
.workspace-tabs::-webkit-scrollbar{display:none}
.workspace-tab{
  min-width:72px;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:#d5dbdb;
  padding:2px 10px 0;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.workspace-tab:hover{background:#314154;color:#fff}
.workspace-tab.active{border-bottom-color:#ff9900;background:#161e2d;color:#fff}
.workspace-count{
  min-width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#52677f;
  color:#fff;
  padding:0 5px;
  font-size:9px;
}
.workspace-tab.active .workspace-count{background:#ec7211;color:#16191f}
.console-commandbar{
  min-height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  background:#fafafa;
  border-bottom:1px solid #d5dbdb;
}
.console-commandbar .console-nav-button{background:#fff;color:#16191f;border-color:#879596;font-weight:700}
.console-commandbar .console-nav-button:hover{background:#f2f3f3;border-color:#687078}
.console-commandbar .console-search-wrap{max-width:620px}
.aws-wordmark{
  width:52px;
  height:36px;
  flex:0 0 52px;
  border:0;
  background:transparent;
  color:#fff;
  position:relative;
  font-weight:800;
  font-size:15px;
  letter-spacing:0;
}
.aws-wordmark i{
  position:absolute;
  left:11px;
  bottom:5px;
  width:30px;
  height:7px;
  border-bottom:2px solid #ff9900;
  border-radius:0 0 70% 60%;
  transform:rotate(3deg);
}
.console-nav-button,.console-utilities button{
  height:30px;
  border:1px solid #5f6b7a;
  border-radius:2px;
  background:#314154;
  color:#fff;
  padding:0 10px;
  font-size:11.5px;
  white-space:nowrap;
}
.console-nav-button:hover,.console-utilities button:hover{background:#41536a;border-color:#879596}
.console-search-wrap{
  flex:1;
  min-width:120px;
  max-width:520px;
  position:relative;
}
.console-search-wrap input{
  width:100%;
  height:32px;
  border:1px solid #879596;
  border-radius:2px;
  background:#fff;
  color:#16191f;
  padding:0 10px 0 31px;
  font-size:12px;
}
.console-search-wrap input:focus{outline:2px solid #00a1c9;outline-offset:0;border-color:#00a1c9}
.console-search-icon{
  position:absolute;
  left:11px;
  top:9px;
  z-index:2;
  width:12px;
  height:12px;
  border:2px solid #687078;
  border-radius:50%;
  pointer-events:none;
}
.console-search-icon::after{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  right:-5px;
  bottom:-3px;
  background:#687078;
  transform:rotate(45deg);
}
.console-search-results{
  position:absolute;
  top:35px;
  left:0;
  right:0;
  z-index:80;
  max-height:260px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #879596;
  box-shadow:0 6px 16px rgba(15,23,42,.22);
}
.console-search-result{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  border:0;
  border-bottom:1px solid #eaeded;
  background:#fff;
  color:#16191f;
  text-align:left;
  padding:6px 10px;
}
.console-search-result:last-child{border-bottom:0}
.console-search-result:hover,.console-search-result:focus{background:#f1faff;outline:0}
.console-search-result small{display:block;color:#687078;font-size:10px;margin-top:1px}
.console-region,.console-account{font-size:10.5px;white-space:nowrap;color:#e7edf3;display:inline-flex;align-items:center;gap:5px;cursor:default}
.console-region small{color:#aab7b8;font-size:8.5px;display:none}
.console-region .caret,.console-account .caret{color:#aab7b8;font-size:8px;font-weight:400}
.console-region:hover,.console-account:hover{color:#fff}
.console-region{cursor:pointer}
/* リージョン選択メニュー(action-menuを流用) */
.region-menu{min-width:238px}
.region-menu button{display:flex;align-items:center;gap:8px}
.region-check{color:#0073bb;font-weight:700;flex:0 0 12px;text-align:center}
.region-item.selected{background:#f2f8fd}
.console-utilities{display:flex;gap:4px}
.console-utilities button{padding:0 8px;font-size:10.5px}
.console-breadcrumb{
  min-height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  background:#fafafa;
  border-bottom:1px solid #eaeded;
  color:#5f6b7a;
  font-size:10.5px;
}
.console-breadcrumb button{border:0;background:transparent;color:#0073bb;font-size:10.5px;padding:2px}
.console-breadcrumb button:hover{text-decoration:underline}
.console-content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  background:#fff;
  padding:16px clamp(14px,2.2vw,28px) 24px;
}
.console-content:focus{outline:0}
/* --- AWS風: サービス別サイドバー + メインの2カラムシェル --- */
.console-content.has-shell{padding:0;overflow:hidden;display:flex}
.console-shell{display:flex;flex:1;min-height:0;width:100%}
.console-sidebar{
  flex:0 0 208px;width:208px;background:#fafafa;border-right:1px solid #d5dbdb;
  overflow-y:auto;padding:0 0 24px;font-size:12px;
  transition:flex-basis .13s ease,width .13s ease;
}
/* 折りたたみ */
.console-sidebar.collapsed{flex:0 0 34px;width:34px;overflow:hidden}
.console-sidebar.collapsed .sidebar-body{display:none}
.sidebar-toggle-row{display:flex;justify-content:flex-end;padding:7px 8px 3px;position:sticky;top:0;background:#fafafa;z-index:1}
.console-sidebar.collapsed .sidebar-toggle-row{justify-content:center;padding:8px 0}
.sidebar-toggle{
  border:1px solid #d5dbdb;background:#fff;color:#414d5c;width:22px;height:22px;
  border-radius:4px;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
}
.sidebar-toggle:hover{background:#0073bb;border-color:#0073bb;color:#fff}
.console-sidebar-title{
  font-weight:700;font-size:14.5px;color:#16191f;padding:8px 16px 12px;
  display:flex;align-items:center;gap:9px;border-bottom:1px solid #eaeded;margin-bottom:6px;
}
.console-sidebar-title .svc-badge{width:22px;height:22px;border-radius:4px;flex:0 0 22px}
.console-sidebar-section{
  font-weight:700;color:#16191f;font-size:11.5px;padding:13px 16px 3px;
}
.console-sidebar .side-item{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  color:#0073bb;font-size:12px;padding:6px 16px 6px 22px;cursor:pointer;line-height:1.45;
}
.console-sidebar .side-item:hover{background:#f0f1f2;text-decoration:underline}
.console-sidebar .side-item.active{
  background:#f0f7ff;color:#16191f;font-weight:700;
  border-left:3px solid #ec7211;padding-left:19px;text-decoration:none;
}
.console-sidebar .side-item.muted{color:#5f6b7a;cursor:default}
.console-sidebar .side-item.muted:hover{background:transparent;text-decoration:none}
.console-main{flex:1;min-width:0;overflow-y:auto;padding:16px clamp(14px,2.2vw,28px) 28px}
.console-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px 12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.console-page-head>div:first-child{min-width:0;flex:1 1 auto}
.console-page-head h2{font-size:20px;line-height:1.25;letter-spacing:0;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
/* 「情報」リンク(AWSの見出し横のヘルプリンク) */
.info-link{
  border:0;background:transparent;color:#0073bb;font-size:11px;font-weight:400;
  margin-left:10px;cursor:pointer;vertical-align:middle;
}
.info-link:hover{text-decoration:underline}
/* アクション▼ ドロップダウン */
.action-dd{position:relative;display:inline-block}
.aws-button.dd-caret::after{content:"▾";margin-left:7px;font-size:11px;color:#16191f}
/* アイコンのみのボタン(更新など)は正方形にしてアイコンを中央・十分な大きさで表示 */
.aws-button.icon-btn{width:32px;min-width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.aws-button.icon-btn svg{display:block}
.action-menu{
  position:absolute;top:calc(100% + 3px);right:0;min-width:170px;z-index:40;
  background:#fff;border:1px solid #d5dbdb;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,28,36,.18);padding:4px 0;
}
.action-menu button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  color:#16191f;font-size:11.5px;padding:7px 14px;cursor:pointer;white-space:nowrap;
}
.action-menu button:hover{background:#f2f8fd}
.action-menu button:disabled{color:#aab7b8;cursor:default;background:transparent}
.console-page-head p{max-width:720px;margin-top:4px;color:#5f6b7a;font-size:11.5px;line-height:1.55}
.console-page-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.aws-button{
  min-height:30px;
  border-radius:2px;
  padding:5px 12px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.aws-button.primary{border:1px solid #8d4005;background:#ec7211;color:#16191f}
.aws-button.primary:hover{background:#ff9900}
.aws-button.secondary{border:1px solid #879596;background:#fff;color:#16191f}
.aws-button.secondary:hover{background:#f2f3f3}
.console-section{margin-top:18px}
.console-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px 12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.console-section-title h3{font-size:14px;letter-spacing:0;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.console-section-title span{color:#687078;font-size:10.5px}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(128px,1fr));
  gap:8px;
}
.service-card{
  min-height:86px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid #d5dbdb;
  border-radius:4px;
  background:#fff;
  color:#16191f;
  padding:11px;
  text-align:left;
}
.service-card:hover,.service-card:focus{border-color:#0073bb;box-shadow:0 0 0 1px #0073bb;outline:0}
.service-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.service-card strong{display:block;font-size:12px;line-height:1.3}
.service-card small{display:block;margin-top:4px;color:#687078;font-size:9.5px;line-height:1.35}
.resource-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr));
  gap:8px;
}
.summary-tile{
  min-height:66px;
  border:1px solid #d5dbdb;
  border-radius:4px;
  background:#fafafa;
  padding:9px 11px;
}
.summary-tile span{display:block;color:#5f6b7a;font-size:10px}
.summary-tile strong{display:block;margin-top:3px;font-size:22px;line-height:1;color:#16191f}
.summary-tile small{display:block;margin-top:3px;color:#687078;font-size:9px}
.console-filterbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 8px;
}
.console-filterbar input{
  width:min(320px,100%);
  height:30px;
  border:1px solid #879596;
  border-radius:2px;
  padding:0 9px;
  font-size:11px;
}
.console-filterbar span{color:#687078;font-size:10.5px;white-space:nowrap}
.resource-table-wrap{width:100%;overflow-x:auto;border:1px solid #d5dbdb}
.resource-table{width:100%;min-width:620px;border-collapse:collapse;font-size:11px}
.resource-table th{
  height:34px;
  background:#fafafa;
  color:#414d5c;
  border-bottom:1px solid #aab7b8;
  padding:7px 9px;
  text-align:left;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.resource-table td{height:39px;border-bottom:1px solid #eaeded;padding:7px 9px;white-space:nowrap}
.resource-table tr:last-child td{border-bottom:0}
.resource-table tbody tr:hover{background:#f1faff}
.resource-table tbody tr.row-selected{background:#f0f7ff}
/* チェックボックス列 */
.resource-table th.th-check,.resource-table td.td-check{width:34px;padding:7px 8px 7px 12px;text-align:center}
.resource-table td.td-check input,.resource-table th.th-check input{cursor:pointer;accent-color:#0073bb;width:14px;height:14px}
.resource-table td.td-action{text-align:right}
/* ソート可能なヘッダ */
.resource-table th .th-sort{
  border:0;background:transparent;color:#414d5c;font-size:10px;font-weight:700;
  padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.resource-table th .th-sort:hover{color:#0073bb}
.resource-table th .sort-arrow{font-size:8px;color:#0073bb;min-width:8px}
/* フィルターバーの件数 + ページャ */
.rt-pager{display:flex;align-items:center;gap:6px;margin-left:auto}
.rt-count{color:#687078;font-size:10.5px;white-space:nowrap}
.rt-pager .pg{
  border:1px solid #d5dbdb;background:#fff;color:#879596;min-width:26px;height:26px;
  border-radius:4px;font-size:12px;cursor:default;
}
.rt-pager .pg-num{color:#16191f;font-size:11px;min-width:16px;text-align:center}
.resource-link{border:0;background:transparent;color:#0073bb;font-size:11px;padding:0;text-align:left}
.resource-link:hover{text-decoration:underline}
.resource-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#414d5c;font-size:10px}
.status-pill{display:inline-flex;align-items:center;gap:5px;color:#1d8102;font-size:10px}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#1d8102}
.status-pill.stopped{color:#687078}.status-pill.stopped::before{background:#879596}
.empty-table{
  border:1px solid #d5dbdb;
  background:#fafafa;
  padding:26px 16px;
  text-align:center;
  color:#5f6b7a;
}
.empty-table strong{display:block;color:#16191f;font-size:12.5px}
.empty-table span{display:block;margin-top:4px;font-size:10.5px}
.service-catalog{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:14px;
}
.catalog-group{border-top:2px solid #879596;padding-top:8px}
.catalog-group h3{font-size:12px;margin-bottom:4px}
.catalog-group button{
  width:100%;
  border:0;
  background:transparent;
  color:#0073bb;
  padding:5px 2px;
  text-align:left;
  font-size:11px;
}
.catalog-group button:hover{text-decoration:underline;background:#f1faff}

.console-detail-identity{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:9px 11px;
  border:1px solid #d5dbdb;
  background:#fafafa;
}
.console-detail-identity strong{display:block;font-size:12px}
.console-detail-identity .resource-id{display:block;margin-top:2px}
.console-detail-tabs{
  display:flex;
  align-items:flex-end;
  gap:0;
  overflow-x:auto;
  border-bottom:1px solid #879596;
  background:#fff;
}
.console-detail-tabs button{
  min-height:34px;
  flex:0 0 auto;
  border:0;
  border-bottom:3px solid transparent;
  background:#fff;
  color:#414d5c;
  padding:6px 13px 5px;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}
.console-detail-tabs button:hover{background:#f2f3f3;color:#16191f}
.console-detail-tabs button.active{border-bottom-color:#ec7211;color:#16191f}
.console-detail-panel{
  min-height:160px;
  padding:14px;
  border:1px solid #d5dbdb;
  border-top:0;
  background:#fff;
}
.console-detail-page>.console-detail-panel{border-top:1px solid #d5dbdb}
.console-detail-tabs+.console-detail-panel{border-top:0}
.console-detail-panel .frow{max-width:760px}
.console-detail-panel .frow label{font-size:10.5px}
.console-detail-panel .frow input[type="text"],
.console-detail-panel .frow select{border-radius:2px}
.console-detail-panel .btn{border-radius:2px}
.console-detail-panel .btn.primary{background:#ec7211;border-color:#8d4005;color:#16191f}
.console-detail-panel .btn.primary:hover{background:#ff9900}

.console-create-form{max-width:780px;border:1px solid #d5dbdb;background:#fff}
.console-form-body{padding:16px}
.console-form-section{border:1px solid #d5dbdb;border-radius:4px;margin-bottom:12px}
.console-form-section:last-child{margin-bottom:0}
.console-form-section h3{padding:8px 11px;background:#fafafa;border-bottom:1px solid #d5dbdb;font-size:11.5px}
.console-form-fields{padding:11px}
.console-field{display:grid;grid-template-columns:minmax(130px,38%) 1fr;gap:12px;align-items:start;margin-bottom:11px}
.console-field:last-child{margin-bottom:0}
.console-field label{padding-top:6px;color:#414d5c;font-size:10.5px;font-weight:700}
.console-field input[type="text"],.console-field input[type="number"],.console-field select{
  width:100%;
  min-width:0;
  height:31px;
  border:1px solid #879596;
  border-radius:2px;
  background:#fff;
  padding:0 8px;
  color:#16191f;
  font-size:11.5px;
}
.console-field input:focus,.console-field select:focus{outline:2px solid #00a1c9;outline-offset:0;border-color:#00a1c9}
.console-field-control small{display:block;margin-top:4px;color:#687078;font-size:9.5px;line-height:1.45}
.console-check{display:flex;align-items:flex-start;gap:8px;padding-top:5px;font-size:11px;color:#16191f}
.console-check input{margin-top:1px}
.console-form-error{margin:0 16px;padding:8px 10px;border-left:4px solid #d13212;background:#fff0f0;color:#7c271a;font-size:10.5px}
.console-form-actions{display:flex;justify-content:flex-end;gap:7px;padding:11px 16px;border-top:1px solid #d5dbdb;background:#fafafa;flex-wrap:wrap}

body[data-aws-sim-layout="workspace"] .devwin{
  position:fixed;
  z-index:5500!important;
  width:min(620px,94vw);
  max-width:94vw;
  border-radius:4px;
  box-shadow:0 14px 42px rgba(15,23,42,.34);
}
body[data-aws-sim-layout="workspace"] .devwin-head{cursor:default;background:#232f3e}
body[data-aws-sim-layout="workspace"] .devwin-body{max-height:min(520px,68vh)}

/* ---------------- user browser ---------------- */
.user-browser-view{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#dfe3e8;
}
.user-browser-chrome{
  min-height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  background:#eef1f4;
  border-bottom:1px solid #c6cbd1;
}
.browser-window-controls{display:flex;align-items:center;gap:5px;margin-right:5px}
.browser-window-controls i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.browser-window-controls i:nth-child(2){background:#febc2e}
.browser-window-controls i:nth-child(3){background:#28c840}
.browser-tool-button{
  width:30px;
  height:30px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#414d5c;
  font-size:20px;
  line-height:1;
}
.browser-tool-button:hover{background:#d5d9de}
.browser-tool-button:disabled{color:#aab0b6;cursor:default;background:transparent}
.user-browser-address-wrap{flex:1;min-width:80px;position:relative}
.user-browser-address-wrap input{
  width:100%;
  height:32px;
  border:1px solid #c0c5ca;
  border-radius:16px;
  background:#fff;
  padding:0 13px 0 31px;
  font-size:12px;
  color:#20252b;
}
.user-browser-address-wrap input:focus{outline:2px solid #0073bb;border-color:#0073bb}
.browser-security{
  position:absolute;
  left:12px;
  top:11px;
  z-index:2;
  width:10px;
  height:10px;
  border:2px solid #687078;
  border-radius:50%;
}
.browser-security.secure{border-color:#1d8102;background:#e7f5e7}
.user-browser-bookmarks{
  min-height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  gap:5px;
  overflow-x:auto;
  padding:4px 10px;
  background:#f7f8f9;
  border-bottom:1px solid #d5d9de;
}
.browser-bookmark{
  height:25px;
  flex:0 0 auto;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:#414d5c;
  padding:0 8px;
  font-size:10.5px;
  white-space:nowrap;
}
.browser-bookmark:hover{border-color:#c4c9cf;background:#fff}
.user-browser-page{flex:1;min-height:0;overflow:auto;background:#fff}
.user-browser-page .berr{max-width:760px;margin:8vh auto 0}
.user-browser-page .site{min-height:100%}
.browser-new-tab{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#687078;
}
.browser-new-tab strong{font-size:18px;color:#414d5c}
.user-browser-statusbar{
  min-height:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 10px;
  background:#eef1f4;
  border-top:1px solid #c6cbd1;
  color:#687078;
  font-size:9.5px;
}

/* ---------------- user terminal ---------------- */
.user-terminal-view{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#090d12;
  color:#d7e0e8;
}
.terminal-toolbar{
  min-height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  background:#171d25;
  border-bottom:1px solid #303a46;
}
.terminal-toolbar>div{margin-right:auto}
.terminal-toolbar strong{display:block;font-size:11.5px;color:#f0f4f8}
.terminal-toolbar>div span{display:block;margin-top:1px;color:#8ea0b3;font-size:9px}
.terminal-toolbar label{display:flex;align-items:center;gap:6px;color:#9aacbd;font-size:9.5px}
.terminal-toolbar select{
  width:min(270px,32vw);
  height:30px;
  border:1px solid #536272;
  border-radius:2px;
  background:#0f141a;
  color:#d7e0e8;
  padding:0 8px;
  font-size:10.5px;
}
.terminal-toolbar .aws-button.secondary{border-color:#536272;background:#232c36;color:#e4ebf2}
.terminal-toolbar .aws-button.secondary:hover{background:#303b47}
.terminal-screen{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px 16px 18px;
  background:#090d12;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  line-height:1.6;
}
.terminal-output{min-height:0}
.terminal-line{white-space:pre-wrap;overflow-wrap:anywhere}
.terminal-line.command{color:#f3f6f9}
.terminal-line.output{color:#bdc9d4}
.terminal-line.error{color:#ff8d82}
.terminal-line.success{color:#80d989}
.terminal-line.muted{color:#708295}
.terminal-input-row{
  min-height:20px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  background:transparent;
  font:inherit;
}
.terminal-input-row span{max-width:45%;overflow:hidden;color:#7ee787;white-space:nowrap;text-overflow:ellipsis}
.terminal-input-row input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#f0f4f8;
  caret-color:#f0f4f8;
  font:inherit;
}
.terminal-input-row input:focus{outline:0}
.terminal-screen,.terminal-input-row{cursor:text}

@media (max-width:900px){
  .service-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}
  .service-catalog{grid-template-columns:repeat(2,minmax(170px,1fr))}
  .console-account{display:none}
  .sample-picker span{display:none}
}
@media (max-width:680px){
  .architecture-toolbar{gap:8px;padding-left:8px;padding-right:8px}
  .architecture-heading p,.architecture-legend{display:none}
  .sample-picker select{width:132px}
  .aws-console-nav{gap:5px;padding:0 6px}
  .aws-wordmark{width:45px;flex-basis:45px}
  .console-region,.console-utilities{display:none}
  .console-nav-button{padding:0 7px}
  .console-content{padding:13px 10px 20px}
  .console-page-head{flex-direction:column;align-items:stretch}
  .console-page-actions{justify-content:flex-start}
  .console-page-head h2{font-size:17px}
  /* 狭幅ではサービス左メニューを細い帯に畳み、メイン領域(見出し/作成ボタン/フォーム)を切らさず操作可能にする */
  .console-shell .console-sidebar,.console-shell .console-sidebar.collapsed{flex:0 0 38px;min-width:0}
  .console-shell .console-sidebar .sidebar-body{display:none}
  .service-grid{grid-template-columns:repeat(2,minmax(118px,1fr))}
  .resource-summary-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}
  .service-catalog{grid-template-columns:1fr}
  .console-field{grid-template-columns:1fr;gap:4px}
  .console-field label{padding-top:0}
  .workspace-tab{min-width:68px;padding-left:7px;padding-right:7px;font-size:10.5px}
  .browser-window-controls{display:none}
  .terminal-toolbar label span{display:none}
  .terminal-toolbar select{width:150px}
}
@media (max-width:480px){
  .sample-picker{display:none}
  .architecture-actions{gap:4px}
  .architecture-toolbar{justify-content:space-between}
  .console-detail-panel .frow{flex-wrap:wrap;gap:5px}
  .console-detail-panel .frow>label:not(.switch){flex:0 0 100%;padding-top:0}
  .console-detail-panel .err{margin-left:0}
  .sim-global-header .aws-wordmark{display:none}
  .workspace-tab{min-width:72px}
  .user-browser-chrome{padding-left:6px;padding-right:6px}
  .browser-tool-button{width:25px}
  .user-browser-chrome .aws-button{padding-left:8px;padding-right:8px}
  .terminal-toolbar{padding-left:8px;padding-right:8px}
  .terminal-toolbar>div{display:none}
  .terminal-toolbar select{width:140px}
  #terminalInsertEndpoint{display:none}
}
@media (max-height:620px){
  .architecture-toolbar{min-height:42px;flex-basis:42px}
  .architecture-pane .statusbar{display:none}
}

/* カスタム矢印ぶんの右余白（各selectの padding 短縮形より後に置いて上書き） */
.frow select,
.console-field select,
.console-detail-panel .frow select,
.addrow select,
.sample-picker select,
.terminal-toolbar select,
.lesson-nav select,
header select{
  padding-right:26px;
}