:root{
  --bg:#080c18; --panel:#0e1426; --panel2:#121a31; --line:#1c2744; --line2:#27365e;
  --text:#dde6ff; --mut:#7d8bb3; --acc:#38bdf8; --acc2:#2dd4bf; --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --pink:#e879f9;
  font-family:"Leelawadee UI","Noto Sans Thai","Segoe UI",Tahoma,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;font-size:13px}
button,select,input{font-family:inherit}
#app{display:grid;height:100vh;grid-template-columns:236px 1fr 350px;grid-template-rows:42px 1fr 58px;grid-template-areas:"top top top" "left stage right" "bottom bottom bottom"}
#top{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 14px;background:#0a0f1e;border-bottom:1px solid var(--line)}
#top .brand{font-size:15px;letter-spacing:.2px}
#top .sub{color:var(--mut);font-size:12px}
.spacer{flex:1}
#logo{display:flex}
.btn{background:#142040;color:var(--text);border:1px solid var(--line2);border-radius:7px;padding:5px 11px;cursor:pointer;font-size:12px}
.btn:hover{background:#1b2c58;border-color:#35508f}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:2px 8px;font-size:11px;margin-left:auto}
.btn.icon{width:32px;padding:5px 0;text-align:center}
.btn.primary{background:linear-gradient(180deg,#0ea5e9,#0284c7);border-color:#38bdf8;color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger:hover{background:#4a1d28;border-color:#b84b60}

/* ซ้าย */
#left{grid-area:left;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:6px 8px 20px}
.catcat{font-size:10.5px;letter-spacing:.8px;color:var(--mut);margin:14px 4px 6px;font-weight:700}
.cathint{font-size:11px;color:var(--mut);line-height:1.5;padding:6px 6px 0}
.item{display:flex;gap:10px;align-items:center;padding:7px 22px 7px 7px;border-radius:9px;border:1px solid transparent;cursor:pointer;position:relative;margin-bottom:3px;user-select:none;outline:none}
.item:hover,.item:focus-visible{background:#141d38}
.item.sel{background:#102148;border-color:#2b5fc4;box-shadow:0 0 0 1px #1d3f8a inset}
.item .ic{width:42px;height:42px;border-radius:9px;background:radial-gradient(circle at 30% 25%,#22305a,#0c1330);border:1px solid #243258;padding:4px;flex:none}
.item .tx{min-width:0}
.item .nm{font-weight:600;font-size:12.5px;line-height:1.25}
.item .sb{font-size:10.5px;color:var(--mut);margin-top:2px}
.item .st{font-size:10.5px;margin-top:3px;color:#7d8bb3;font-weight:600}
.item .led{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;background:#2a3558;box-shadow:0 0 0 1px #0b1226}
.item.on .led{background:#34d399;box-shadow:0 0 8px #34d399aa,0 0 0 1px #0b1226}
.item.on .st{color:#6ee7b7}
.item.warn .led{background:#fbbf24;box-shadow:0 0 8px #fbbf24aa,0 0 0 1px #0b1226}
.item.warn .st{color:#fcd34d}
.item.na{opacity:.55}

/* กลาง */
#stage{grid-area:stage;position:relative;overflow:hidden;background:#000}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
#pills{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none;flex-wrap:wrap;justify-content:center;width:70%}
.pill{padding:6px 14px;border-radius:999px;border:1px solid #2a3a66;background:rgba(10,18,40,.82);backdrop-filter:blur(6px);font-size:12.5px;white-space:nowrap}
.pill.good{border-color:#1fa97e;background:rgba(6,60,45,.85);color:#7df0c0;font-weight:600}
.pill.warn{border-color:#c98e1c;background:rgba(70,48,6,.85);color:#fcd77a}
.pill.bad{border-color:#c4505f;background:rgba(70,14,24,.85);color:#ffb0bb}
#viewOpts{position:absolute;top:12px;right:12px;background:rgba(10,18,40,.82);border:1px solid #243258;border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;font-size:12px;backdrop-filter:blur(6px)}
#viewOpts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.r{background:#ff4d4d}.dot.y{background:#ffd24a}.dot.c{background:#4dd8ff}
.lbl{position:absolute;left:0;top:0;pointer-events:none;font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px;background:rgba(10,20,45,.8);border:1px solid #38bdf8;color:#cdeeff;white-space:nowrap}
.lbl.iss{border-color:#6b7aa8;color:#c3cbe6;font-weight:500}
#stageHint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:11px;color:#8d9ac0;pointer-events:none;text-shadow:0 1px 3px #000}
#toasts{position:absolute;top:56px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:rgba(70,18,28,.95);border:1px solid #c4505f;color:#ffd3d9;padding:7px 14px;border-radius:9px;font-size:12.5px;animation:fade 3.4s forwards}
.toast.ok{background:rgba(6,60,45,.95);border-color:#1fa97e;color:#b9f7de}
@keyframes fade{0%{opacity:0;transform:translateY(-6px)}8%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
#result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,16,.55);backdrop-filter:blur(2px)}
#result[hidden]{display:none}
.resbox{width:420px;max-width:92%;background:linear-gradient(180deg,#101b38,#0b1226);border:1px solid #2b4a8f;border-radius:16px;padding:20px 22px;box-shadow:0 20px 60px #000a}
.resbox h2{margin:0 0 4px;font-size:19px}
.stars{font-size:34px;letter-spacing:6px;margin:6px 0 10px}
.stars .on{color:#fbbf24;text-shadow:0 0 14px #f59e0b88}.stars .off{color:#2c3658}
.resgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:10px 0 14px}
.resgrid div{background:#0c1530;border:1px solid #1c2a52;border-radius:8px;padding:6px 9px}
.resgrid small{display:block;color:var(--mut);font-size:10.5px}
.resbox ul{margin:6px 0 12px;padding-left:0;list-style:none;color:#b9c6ee}
.resbox li{margin:3px 0}

/* ขวา */
#right{grid-area:right;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:8px 8px 20px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px}
.cardhead{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.cardhead h3{margin:0;font-size:13px}
.mut{color:var(--mut);font-size:11px}
.cardhead select{margin-left:auto;background:#0e1730;color:var(--text);border:1px solid #2a3a66;border-radius:6px;font-size:11.5px;padding:3px 5px;max-width:170px}
.card p{margin:5px 0;line-height:1.55;color:#c6d1f2;font-size:12.2px}
.chip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700}
.chip.good{background:#0f3b2e;color:#6ee7b7;border:1px solid #1d6b52}
.chip.warn{background:#3b2c0a;color:#fcd34d;border:1px solid #7a5a12}
.chip.bad{background:#3d1520;color:#fda4af;border:1px solid #7a2a3c}
.chip.info{background:#10294a;color:#93c5fd;border:1px solid #1d4a85}
.tag{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--pink);color:#1a0b22;font-weight:700;font-size:10.5px}
.obj{list-style:none;margin:8px 0 0;padding:0}
.obj li{display:flex;gap:8px;align-items:flex-start;padding:4px 0;color:#b8c5ec;font-size:12px;border-top:1px solid #18223e}
.obj li:first-child{border-top:0}
.obj .ck{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #3b4a78;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#07110d}
.obj li.done .ck{background:var(--ok);border-color:var(--ok)}
.obj li.done{color:#d3f9e8}
.bar{height:6px;background:#0a1128;border:1px solid #1b2850;border-radius:4px;overflow:hidden;position:relative}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#0ea5e9,#2dd4bf);transition:width .2s}
.bar.warn>i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bar.bad>i{background:linear-gradient(90deg,#ef4444,#fb7185)}
.bar.good>i{background:linear-gradient(90deg,#10b981,#34d399)}
.starsm{font-size:15px;letter-spacing:3px;color:#2c3658}.starsm .on{color:#fbbf24}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kv{background:#0c1530;border:1px solid #1b2850;border-radius:7px;padding:5px 8px}
.kv small{display:block;color:var(--mut);font-size:10px}
.kv b{font-size:14px;font-variant-numeric:tabular-nums}
.kv.big b{font-size:22px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:10.5px;color:var(--mut)}
.legend i{display:inline-block;width:9px;height:3px;margin-right:4px;vertical-align:middle;border-radius:2px}
.legend .band i{width:12px;height:8px;background:#10b98133;border:1px solid #10b981}
#chart{width:100%;height:120px;display:block;margin-top:8px;background:#080e20;border:1px solid #1b2850;border-radius:7px}
.budget{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.budget .row{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-bottom:3px}
.budget b{color:var(--text)}
.empty{padding:14px 8px;text-align:center;color:var(--mut);border:1px dashed #26345f;border-radius:9px;line-height:1.6}

.dev{border:1px solid #223158;border-radius:9px;padding:8px 9px;margin-top:7px;background:#0d1530}
.dev.off{opacity:.55}
.dev .hd{display:flex;align-items:center;gap:8px}
.dev .hd .ic{width:26px;height:26px;flex:none}
.dev .hd b{font-size:12.5px}
.dev .hd .x{margin-left:auto;display:flex;gap:6px;align-items:center}
.dev .rm{background:none;border:0;color:#7d8bb3;cursor:pointer;font-size:15px;padding:0 3px}.dev .rm:hover{color:var(--bad)}
.sw{position:relative;width:30px;height:16px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw input:focus-visible+span{outline:2px solid #38bdf8;outline-offset:2px}
.sw span{position:absolute;inset:0;background:#26335c;border-radius:99px;cursor:pointer;transition:.15s}
.sw span::after{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;background:#cbd5ff;border-radius:50%;transition:.15s}
.sw input:checked+span{background:#0f8f6f}
.sw input:checked+span::after{left:16px;background:#fff}
.dev .row{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:11.5px;color:#aebbe4}
.dev .row label{min-width:56px;color:var(--mut)}
.dev select{flex:1;background:#0e1730;color:var(--text);border:1px solid #2a3a66;border-radius:6px;font-size:11.5px;padding:3px 5px}
.dev input[type=range]{flex:1}
.dev .val{min-width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.dev .warnline{margin-top:6px;font-size:11.5px;color:#fcd34d}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
.mini3 .m{font-size:10.5px;color:var(--mut)}
.mini3 .m .bar{margin-top:3px;height:5px}
.mini3 .m b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.fbtns{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:7px}
.fbtns button{background:#18264d;border:1px solid #2c3f75;border-radius:6px;color:#dbe5ff;padding:5px 0;font-size:11px;cursor:pointer;user-select:none;touch-action:none}
.fbtns button:active,.fbtns button.hot{background:#c2410c;border-color:#fb923c}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.infoTitle{font-size:15px;font-weight:700;margin:6px 0 4px}
.hint{display:flex;gap:8px;padding:7px 9px;border-radius:8px;margin-top:6px;line-height:1.5;font-size:12px;border:1px solid}
.hint.info{background:#0e2140;border-color:#1d4a85;color:#bcd7ff}
.hint.warn{background:#35280a;border-color:#7a5a12;color:#fde7a2}
.hint.good{background:#0b3326;border-color:#1d6b52;color:#bbf7d9}
.hint .ico{flex:none}

/* ล่าง */
#bottom{grid-area:bottom;background:#0a0f1e;border-top:1px solid var(--line);display:grid;grid-template-columns:1.3fr 1fr 1fr 150px;gap:26px;align-items:center;padding:0 22px}
.ctl{display:flex;flex-direction:column;gap:3px;min-width:0}
.ctl.warp{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.ctl.warp .btn{grid-row:1/3}
.ctl label{font-size:11.5px;color:var(--mut)}
.ctl label b,.simtime b{color:var(--text);margin-left:6px;font-size:12.5px}
.simtime{align-items:flex-end}.simtime b{font-size:19px;font-variant-numeric:tabular-nums;color:#7dd3fc;margin:0}
input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:4px;background:#1a2748;outline:none;width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#e8f1ff;border:2px solid #38bdf8;cursor:pointer;box-shadow:0 0 0 3px #38bdf822}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#e8f1ff;border:2px solid #38bdf8;cursor:pointer}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:#1f2b4d;border-radius:9px}::-webkit-scrollbar-track{background:transparent}

@media (max-width:1100px){
  #app{grid-template-columns:190px 1fr 300px}
  #top .sub{display:none}
}

/* ===== หน้าต่างห้องโดยสาร (กล้องติดตัวดาวเทียม) ===== */
#cabin{position:absolute;z-index:2;display:none;--sz:262px;--bd:14px}
#cabin.pip,#cabin.full{display:block}
#cabin.pip{left:12px;bottom:34px;width:var(--sz);height:calc(var(--sz) + 22px)}
#cabin.full{inset:0}
#cabin .win{position:absolute;overflow:hidden}
#cabin.pip .win{left:0;top:22px;width:var(--sz);height:var(--sz)}
#cabin.full .win{inset:0}
/* แผ่นโลหะรอบหน้าต่าง: pip = แผ่นสี่เหลี่ยมเจาะรูกลม, full = กรอบหน้าต่างมนใหญ่ */
#cabin .plate{position:absolute;pointer-events:none}
#cabin.pip .plate{left:0;top:22px;width:var(--sz);height:var(--sz);border-radius:14px;
  background:radial-gradient(circle calc(var(--sz)/2 - var(--bd)) at 50% 50%,transparent 99%,#1a2238 100%);
  box-shadow:0 0 0 2px #2c3a63,0 8px 24px #000a}
#cabin.pip .plate::before,#cabin.pip .plate::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#56648f;box-shadow:0 0 0 1px #0b1226}
#cabin.pip .plate::before{left:8px;top:8px}#cabin.pip .plate::after{right:8px;bottom:8px}
#cabin .ring{position:absolute;pointer-events:none}
#cabin.pip .ring{left:var(--bd);top:calc(22px + var(--bd));width:calc(var(--sz) - 2*var(--bd));height:calc(var(--sz) - 2*var(--bd));border-radius:50%;
  border:5px solid #8793b3;box-shadow:inset 0 0 0 2px #0b1226,inset 0 0 28px 6px rgba(0,0,0,.55),0 0 0 2px #0b1226}
#cabin.full .plate{inset:0;border:26px solid #18203a;border-radius:54px;box-shadow:inset 0 0 0 4px #0b1226,inset 0 0 120px 30px rgba(0,0,0,.6),0 0 0 100vmax #18203a}
#cabin.full .ring{inset:22px;border-radius:34px;border:4px solid #8793b3;box-shadow:0 0 0 2px #0b1226}
#cabin.full .win{inset:26px;border-radius:30px}
#cabin .cbar{position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;gap:5px;padding:0 4px;background:#141c36;border:1px solid #2c3a63;border-bottom:0;border-radius:9px 9px 0 0;font-size:10.5px;color:#aebbe4}
#cabin.full .cbar{left:50%;right:auto;transform:translateX(-50%);top:0;border-radius:0 0 12px 12px;border:1px solid #2c3a63;border-top:0;height:30px;padding:0 10px;gap:8px;z-index:3;font-size:12px}
#cabin .cbar .ttl{white-space:nowrap}
#cabin.pip .cbar .ttl{display:none}
#cabin .cbar select{flex:1;min-width:0;background:#0e1730;color:var(--text);border:1px solid #2a3a66;border-radius:5px;font-size:10.5px;padding:1px 3px}
#cabin.full .cbar select{flex:none;font-size:12px;padding:3px 6px}
#cabin .mini{background:#1a2748;border:1px solid #2c3f75;color:#dbe5ff;border-radius:5px;width:22px;height:17px;padding:0;cursor:pointer;font-size:11px;line-height:1}
#cabin.full .mini{width:28px;height:22px;font-size:13px}
#cabin .mini:hover{background:#27407a}
#cabin .cross{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;opacity:.55}
#cabin .cross::before,#cabin .cross::after{content:"";position:absolute;background:#bfe9ff}
#cabin .cross::before{left:0;right:0;top:12px;height:1px;box-shadow:0 0 3px #000}
#cabin .cross::after{top:0;bottom:0;left:12px;width:1px;box-shadow:0 0 3px #000}
#cabin .mk{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:3px;font-size:11px;white-space:nowrap;padding:2px 7px;border-radius:99px;pointer-events:none;
  background:rgba(8,18,40,.78);border:1px solid #38bdf8;color:#cdeeff;text-shadow:0 1px 2px #000}
#cabin .mk.sun{border-color:#fbbf24;color:#ffe9a8}
#cabin .mk .ar{display:none;font-size:11px;color:inherit}
#cabin .mk.out{opacity:.85}
#cabin .mk.out .ar{display:inline-block;transform:rotate(var(--ang,0deg))}
#cabin .mk.in{background:rgba(8,18,40,.35)}
#cabin.pip .mk{font-size:10px;padding:1px 5px}
#cabin .cread{position:absolute;left:0;right:0;pointer-events:none;font-size:11px;color:#cfe6ff;text-shadow:0 1px 3px #000,0 0 6px #000;text-align:center;line-height:1.35}
#cabin.pip .cread{top:calc(22px + var(--sz) - 36px);font-size:10px}
#cabin.full .cread{bottom:40px;font-size:13px}
#cabin .cread b{color:#7dd3fc;font-variant-numeric:tabular-nums}
@media (max-width:1100px){#cabin{--sz:210px}}
#pills,#viewOpts{z-index:4}
#toasts{z-index:8}
#result{z-index:6}
#cabin.full ~ #viewOpts{top:46px}
.lbl{z-index:1}
#cabin.full .cbar{top:auto;bottom:0;transform:translateX(-50%);border-radius:12px 12px 0 0;border:1px solid #2c3a63;border-bottom:0}
#cabin.full .cread{bottom:46px}
#cabin.pip .cread .note{display:none}

/* ===== กราฟขยาย (ปุ่มแว่นขยาย) ===== */
.chartwrap{position:relative;margin-top:8px}
.chartwrap #chart{margin-top:0}
.zoombtn{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #2f4a86;background:rgba(14,24,52,.88);color:#cfe3ff;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.zoombtn:hover{background:#1d3a7a;border-color:#5b93f0;transform:scale(1.08)}
.zoombtn:active{transform:scale(.96)}
.zoombtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
#chartModal{position:fixed;left:0;right:0;top:42px;bottom:58px;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,7,18,.8);backdrop-filter:blur(3px)}
#chartModal[hidden]{display:none}
.cmbox{width:min(1200px,100%);height:min(680px,100%);display:flex;flex-direction:column;background:linear-gradient(180deg,#101b38,#0b1226);border:1px solid #2b4a8f;border-radius:16px;box-shadow:0 24px 70px #000c;padding:12px 16px}
.cmhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cmhead h3{margin:0;font-size:16px}
.cmhead .legend{margin:0;font-size:12px}
.cmbody{position:relative;flex:1;min-height:0;background:#080e20;border:1px solid #1b2850;border-radius:10px}
#chartBig{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.cmfoot{margin-top:10px;display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:12.5px;color:#d3e0ff}
.cmfoot .mut{font-size:11.5px}

/* ===== โหมดภารกิจวงโคจร (ภารกิจ 2: นัดพบ ISS) ===== */
#right{display:flex;flex-direction:column}
#right>.card{flex:none}
.orbit-only{display:none}
.mode-orbit .orbit-only{display:block}
.mode-orbit .att-only{display:none !important}
.mode-orbit #cOrb{order:1}
.mode-orbit #cMission{order:2}
.mode-orbit #cHints{order:5}
.orbnote{background:#0c2140;border:1px solid #1d4a85;border-radius:8px;padding:6px 9px;color:#bcd7ff !important}
.mission-orb[hidden],#missionAtt[hidden]{display:none}

#orbitView{position:absolute;inset:0;z-index:1;pointer-events:none}
#orbitView[hidden]{display:none}
#stage #orbitView .ocv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ob-top{position:absolute;left:12px;top:50px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ob-chip{background:rgba(8,14,34,.86);border:1px solid #243a72;border-radius:9px;padding:5px 11px;font-size:12.5px;color:#cfdcff;backdrop-filter:blur(5px);white-space:nowrap}
.ob-chip b{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.ob-chip small{color:#8fa3d4;margin-left:4px}
.ob-chip.good{border-color:#1fa97e;background:rgba(6,60,45,.88);color:#9ff3cf}
.ob-chip.warn{border-color:#c98e1c;background:rgba(70,48,6,.88);color:#fcd77a}
.ob-views{position:absolute;right:12px;top:50px;display:flex;gap:6px;pointer-events:auto}
.ob-vb{background:rgba(8,14,34,.86);color:#cfdcff;border:1px solid #243a72;border-radius:9px;padding:6px 11px;cursor:pointer;font-size:12px}
.ob-vb:hover{border-color:#4f86e8}
.ob-vb.on{background:#16408a;border-color:#4f86e8;color:#fff}
.ob-bottom{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:10px;align-items:flex-end}
.ob-card{background:rgba(8,14,34,.88);border:1px solid #243a72;border-radius:12px;padding:8px 10px;pointer-events:auto;backdrop-filter:blur(6px)}
.ob-h{font-size:11.5px;font-weight:700;color:#9fb6ee;margin-bottom:5px;letter-spacing:.2px}
.ob-h.inline{margin:0 6px 0 0;display:inline-block}
.ob-relcard{width:226px;flex:none}
#stage #orbitView .relcv{position:static;width:204px;height:204px;display:block;margin:0 auto}
.ob-relread{font-size:11px;color:#a9bbe8;text-align:center;margin-top:3px}
.ob-deck{flex:1 1 auto;min-width:0;max-height:calc(100vh - 170px);overflow-y:auto}
.ob-engines{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:7px}
.ob-eng{background:#112048;border:1px solid #2c4685;border-radius:9px;color:#dbe6ff;padding:4px 9px;cursor:pointer;text-align:left;display:flex;flex-direction:column;line-height:1.25}
.ob-eng small{font-size:10px;color:#9fb6ee}
.ob-eng.sel{border-color:#38bdf8;background:#123a6b;box-shadow:0 0 0 1px #38bdf8 inset}
.ob-noeng{font-size:12px;color:#fcd77a;background:#35280a;border:1px solid #7a5a12;border-radius:8px;padding:6px 9px}
.ob-deckrow{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ob-padwrap{flex:none}
.ob-pad{display:grid;grid-template-columns:repeat(3,70px);grid-auto-rows:52px;gap:4px}
.ob-pad-empty{display:block}
.ob-pb{position:relative;background:#14275a;border:1px solid #2f4d92;border-radius:9px;color:#e4edff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1.1;user-select:none;touch-action:none}
.ob-pb b{font-size:17px}
.ob-pb small{font-size:9.5px;color:#a9bbe8}
.ob-pb i{position:absolute;right:4px;top:2px;font-size:9px;color:#6f86c4;font-style:normal}
.ob-pb:hover{background:#1b3478}
.ob-pb.hot{background:#c2410c;border-color:#fb923c}
.ob-pb:disabled{opacity:.4;cursor:not-allowed}
.ob-pb.mid{border-color:#c084fc}
.ob-padnote{font-size:10px;color:#8fa3d4;max-width:226px;margin-top:3px;line-height:1.35}
.ob-plan{flex:1 1 250px;min-width:230px}
.ob-row{display:flex;gap:6px;align-items:center;margin-top:5px;font-size:11.5px;color:#b9c8f0}
.ob-row.wrap{flex-wrap:wrap}
.ob-row label{min-width:30px;color:#8fa3d4}
.ob-row select{flex:1;min-width:0;background:#0e1730;color:#dde6ff;border:1px solid #2a3a66;border-radius:6px;font-size:11.5px;padding:3px 5px}
.ob-row input[type=range]{flex:1;min-width:60px}
.ob-row input[type=number]{width:64px;background:#0e1730;color:#fff;border:1px solid #2a3a66;border-radius:6px;padding:3px 5px;font-size:12px}
.ob-row .u{color:#8fa3d4}
.ob-sm{background:#142040;color:#dbe6ff;border:1px solid #2c4685;border-radius:7px;padding:4px 8px;font-size:11px;cursor:pointer}
.ob-sm:hover:not(:disabled){background:#1d3270;border-color:#4f86e8}
.ob-sm:disabled{opacity:.4;cursor:not-allowed}
.ob-go,.ob-sched,.ob-cancel{border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;border:1px solid}
.ob-go{background:linear-gradient(180deg,#f97316,#c2410c);border-color:#fb923c;color:#fff;font-weight:700}
.ob-sched{background:#12315f;border-color:#3b82f6;color:#dbe9ff}
.ob-cancel{background:#3a1a24;border-color:#b84b60;color:#ffd3d9}
.ob-go:disabled,.ob-sched:disabled{opacity:.45;cursor:not-allowed}
.ob-planread{font-size:11.5px;line-height:1.5;color:#cfdcff;margin-top:6px;min-height:34px}
.ob-planread .g{color:#6ee7b7}.ob-planread .a{color:#fcd34d}.ob-planread .r{color:#fda4af}
.ob-chk{display:flex;align-items:center;gap:6px;font-size:11px;color:#9fb6ee;margin-top:6px;cursor:pointer}
.ob-warp{display:flex;flex-direction:column;gap:6px;width:190px}
.ob-warpstat{font-size:11px;color:#fcd77a;min-height:15px}
.ob-legend{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:#9fb6ee;margin-top:3px}
.ob-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.kv2{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;padding:2px 0;border-bottom:1px solid #17223f;color:#9fb0dc}
.kv2 b{color:#fff;font-variant-numeric:tabular-nums}
.kv2 em{color:#6f7ca8;font-style:normal;font-size:10px}
.ob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-grid2 .sub{font-size:11px;font-weight:700;color:#7dd3fc;margin-bottom:2px}
.ob-dvbox{margin-top:8px}
.ob-dvbox .row2{display:flex;justify-content:space-between;font-size:11.5px;color:#9fb0dc;margin-bottom:4px}
.ob-dvbox .row2 b{color:#fff}
#orbitView.v3d .ob-top{top:50px}
.ob-deckhead{display:flex;align-items:flex-start;gap:8px}
.ob-deckhead .ob-engines{flex:1 1 auto;min-width:0}
.ob-deckbtn{flex:none;white-space:nowrap}
/* โหมดย่อแผง: เหลือเฉพาะปุ่มข้ามเวลา/ยกเลิก/ตัวช่วยเบรก + มุมมองสัมพัทธ์ขนาดเล็ก */
.ob-bottom.min .ob-padwrap,.ob-bottom.min .ob-plan>:not(.q),.ob-bottom.min .ob-go,.ob-bottom.min .ob-sched{display:none}
.ob-bottom.min .ob-plan{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:3px 14px;align-items:center}
.ob-bottom.min .ob-plan .ob-row,.ob-bottom.min .ob-plan .ob-chk{margin-top:0}
.ob-bottom.min .ob-engines{margin-bottom:4px}
.ob-bottom.min .ob-relcard{width:142px}
.ob-bottom.min .ob-relcard .ob-h,.ob-bottom.min .ob-relread{display:none}
#stage #orbitView .ob-bottom.min .relcv{width:120px;height:120px}
/* จอเตี้ย (โน้ตบุ๊ก 1366×768 ฯลฯ): บีบแผงล่างให้กินที่น้อยลง */
@media (max-height:820px){
  .ob-card{padding:6px 8px}
  .ob-h{margin-bottom:3px}
  .ob-relcard{width:176px}
  #stage #orbitView .relcv{width:154px;height:154px}
  .ob-engines{margin-bottom:4px}
  .ob-pad{grid-template-columns:repeat(3,62px);grid-auto-rows:40px;gap:3px}
  .ob-pb b{font-size:15px}
  .ob-padnote{max-width:196px;font-size:9.5px}
  .ob-row{margin-top:3px}
  .ob-planread{margin-top:3px;min-height:0;line-height:1.4}
  .ob-chk{margin-top:3px}
  .ob-top,.ob-views{top:46px}
}

/* ===== สถานะระบบ: ชิปอุปกรณ์ที่เปิดอยู่ ===== */
.onchips{display:flex;flex-wrap:wrap;gap:6px}
.onchip{display:flex;align-items:center;gap:6px;background:#0f3b2e;border:1px solid #1d6b52;color:#b9f7de;border-radius:99px;padding:2px 10px 2px 3px;font-size:11px;cursor:pointer}
.onchip:hover{background:#14523f}
.onchip.warn{background:#3b2c0a;border-color:#7a5a12;color:#fde7a2}
.onchip .ic{width:22px;height:22px;display:flex;flex:none}
.onchip .ic svg{width:100%;height:100%}

/* ===== แผงควบคุมอุปกรณ์ (ป๊อปอัพกลางเวที — คลิกไอคอนทางซ้าย) ===== */
.dpop{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;background:linear-gradient(180deg,#101b38,#0b1226);border:1px solid #2b4a8f;border-radius:16px;box-shadow:0 22px 64px #000c,0 0 0 1px #0a1530;overflow:hidden}
.dpop[hidden]{display:none}
.dp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(20,32,64,.92);border-bottom:1px solid #1f3566;cursor:grab;user-select:none;touch-action:none}
.dp-head:active{cursor:grabbing}
.dp-ic{width:40px;height:40px;flex:none;border-radius:10px;background:radial-gradient(circle at 30% 25%,#22305a,#0c1330);border:1px solid #243258;padding:4px}
.dp-ttl{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.dp-name{font-size:15px;font-weight:700;line-height:1.2}
.dp-power{display:flex;align-items:center;gap:8px;cursor:default}
.dp-swtext{font-size:11.5px;color:var(--mut);font-weight:600;white-space:nowrap}
.dp-swtext.on{color:#6ee7b7}
.dp-power .sw{width:42px;height:22px}
.dp-power .sw span::after{width:18px;height:18px;left:2px;top:2px}
.dp-power .sw input:checked+span::after{left:22px}
.dp-x{background:#142040;border:1px solid var(--line2);color:#cdd8ff;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:14px}
.dp-x:hover{background:#3a1a24;border-color:#b84b60;color:#ffd3d9}
.dp-body{display:flex;flex-wrap:wrap;gap:12px;padding:12px;overflow:auto;min-height:0}
.dp-live{flex:1 1 340px;min-width:0}
.dp-doc{flex:1 1 250px;min-width:0;border-left:1px solid #1c2a52;padding-left:12px}
.dp-doc p{font-size:12px}
.dp-sec{margin-top:0}
.dp-sub{font-size:11px;font-weight:700;color:#7dd3fc;margin:10px 0 5px}
.dp-doc .dp-sub{margin-top:0}
.dp-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;color:var(--mut);margin-top:7px}
.dp-line b{color:var(--text);font-variant-numeric:tabular-nums;font-size:13px;text-align:right}
.dp-offmsg{display:none;font-size:11.5px;color:#fcd34d;background:#35280a;border:1px solid #7a5a12;border-radius:8px;padding:5px 9px;margin-bottom:8px}
.dev.off .dp-offmsg,.dp-offmsg.show{display:block}
.dp-sec.off{opacity:1}
.dp-sec.off>*:not(.dp-offmsg){opacity:.5}
#stage .dpop canvas{position:static;inset:auto;display:block}
#stage .dpop .dp-scope{width:100%;height:104px;background:#080e20;border:1px solid #1b2850;border-radius:7px;margin-top:2px}
#stage .dpop .dp-dial{width:150px;height:150px;flex:none}
#stage .dpop .dp-dial.wide{width:230px;height:170px;border-radius:6px}
@media (max-width:1100px){.dp-body{padding:10px}.dp-doc{border-left:0;padding-left:0;border-top:1px solid #1c2a52;padding-top:8px}}