:root{--bg: #10151e;--panel: #171e29;--panel2: #1b2431;--line: #303c4b;--line2: #394659;--text: #dbe7f4;--muted: #8d9fb5;--accent: #43aeef;--ok: #78e0b0;--warn: #ffcd69;--err: #ff9797;font-family:IBM Plex Sans Thai,Inter,Segoe UI,Tahoma,sans-serif;color:var(--text);background:var(--bg);font-size:13px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}button{font-family:inherit}.mono{font-family:JetBrains Mono,ui-monospace,Consolas,monospace}.muted{color:var(--muted)}.small{font-size:11px}.grow{flex:1}.app{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;gap:14px;height:58px;padding:0 18px;background:#171e29;border-bottom:1px solid var(--line);flex-wrap:nowrap}.brand{display:flex;align-items:baseline;gap:14px}.logo-t{font-weight:750;font-size:22px;letter-spacing:-.6px}.logo-t span{color:#78e0b0}.logo-s{font-size:12px;color:#8d9fb5;letter-spacing:.6px;text-transform:uppercase}.tb-group{display:flex;align-items:center;gap:4px}.tb-group.seg{background:#0b1220;border:1px solid var(--line2);border-radius:8px;padding:2px}.tb-group.seg .btn{border:0;background:transparent}.tb-group.seg .btn.on{background:#1e3a5f;color:#7dd3fc}.zoom{width:44px;text-align:center;color:var(--muted);font-size:11px}.proj{width:230px;font-weight:600}.btn{background:#16213a;color:var(--text);border:1px solid var(--line2);border-radius:7px;padding:6px 10px;cursor:pointer;font-size:12.5px;white-space:nowrap;transition:.12s}.btn:hover:not(:disabled){background:#1d2b4a;border-color:#36507a}.btn:disabled{opacity:.4;cursor:default}.btn.run{background:#78e0b0;border-color:#78e0b0;color:#0d3023;font-weight:750;padding:8px 14px}.btn.run:hover{background:#8ae8bc}.btn.pause{background:#78e0b0;border-color:#78e0b0;color:#0d3023;font-weight:750;padding:8px 14px}.btn.on{background:#1267a6;border-color:#43aeef;color:#fff}.btn.danger{background:#3a1620;border-color:#7f1d1d;color:#fecaca}.btn.warn{background:#3a2a10;border-color:#a16207;color:#fde68a}.btn.ok{background:#12351f;border-color:#16a34a;color:#bbf7d0}.btn.tiny{padding:3px 8px;font-size:11px}.btn.full{width:100%}.input{background:#0b1220;color:var(--text);border:1px solid var(--line2);border-radius:7px;padding:6px 8px;font-size:12.5px;font-family:inherit;outline:none;min-width:0}.input:focus{border-color:var(--accent)}.speed{width:60px}.sim-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);padding:5px 10px;border-radius:7px;background:#0b1220;border:1px solid var(--line2)}.sim-status .dot{width:8px;height:8px;border-radius:50%;background:#475569}.sim-status.on{color:#86efac}.sim-status.on .dot{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:blink 1s infinite}.sim-status.paused{color:#fcd34d}.sim-status.paused .dot{background:#f59e0b}.badge{background:var(--err);color:#fff;border-radius:10px;padding:0 6px;font-size:10px;margin-left:4px;font-weight:700}.menu-wrap{position:relative}.menu{position:absolute;top:110%;left:0;z-index:50;width:380px;background:#0f172a;border:1px solid var(--line2);border-radius:10px;padding:6px;box-shadow:0 16px 40px #000a}.menu-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:8px 10px;background:transparent;border:0;color:var(--text);border-radius:7px;cursor:pointer}.menu-item:hover{background:#1a2742}.main{flex:1;display:flex;min-height:0}.center{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.palette{width:272px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.pal-head{padding:10px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}.lib-h{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#8eabc7;margin:2px 0 4px}.note{font-size:12px;color:#879cb3;line-height:1.5}.group-label{margin:14px 4px 6px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#7894b0}.group-toggle{display:flex;align-items:center;gap:6px;width:calc(100% - 8px);background:var(--panel);border:0;border-radius:6px;padding:6px 4px;margin:8px 4px 2px;cursor:pointer;font-family:inherit;text-align:left;position:sticky;top:0;z-index:1}.group-toggle:hover{color:#b9d3ea;background:#1d2735}.group-toggle .chev{display:inline-block;width:10px;transition:transform .15s}.group-toggle.shut .chev{transform:rotate(-90deg)}.group-toggle .group-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-toggle .count{background:#1e293b;border-radius:8px;padding:0 7px;font-size:10px;letter-spacing:0;color:var(--muted)}.pal-fold{display:flex;gap:6px}.pal-list{overflow-y:auto;flex:1;padding:4px 6px 20px}.pal-cat{margin-bottom:2px}.pal-cat-h{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:0;color:var(--text);padding:8px 4px;cursor:pointer;font-size:12px;position:sticky;top:0;background:var(--panel);z-index:1}.pal-cat-h .muted{font-size:10px}.pal-cat-h .count{margin-left:auto;background:#1e293b;border-radius:8px;padding:0 6px;font-size:10px;color:var(--muted)}.pal-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;cursor:grab;border:1px solid #344153;background:#202a38;-webkit-user-select:none;user-select:none;margin:6px 0}.pal-item:hover{background:#28364a;border-color:#4a6178}.log{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11.5px;line-height:1.7;color:#8fb2cd;max-height:160px;overflow:auto}.pal-item:active{cursor:grabbing}.pal-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#0b1220;border:1.5px solid;color:#cbd5e1;flex-shrink:0}.pal-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pal-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{padding:24px;color:var(--muted);text-align:center;line-height:1.7}.canvas{flex:1;width:100%;min-height:0;display:block;background:#101721;cursor:default;touch-action:none;-webkit-user-select:none;user-select:none}.stage-bar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#1b2431;border-bottom:1px solid #344153;flex-wrap:nowrap;overflow-x:auto}.statusbar span:nth-child(3){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-bar .input,.stage-bar .btn{padding:7px 10px}.preset{max-width:220px}.statusbar{height:36px;display:flex;align-items:center;gap:18px;padding:0 16px;background:#182331;border-top:1px solid #33465b;color:#99b0c7;font-size:12.5px;flex-shrink:0}.statusbar .on{color:#78e0b0;font-weight:700}.help-dialog{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:80;display:grid;place-items:center}.help-card{width:min(620px,92vw);background:#1a2636;border:1px solid #4b6078;border-radius:14px;padding:22px 24px}.help-card h2{margin:0 0 8px}.help-card ol{line-height:1.75;color:#dce9f6;padding-left:20px}.help-card p{color:#93a7bc;line-height:1.6}.login-card{width:min(380px,92vw)}.login-card .btns{justify-content:flex-end;margin-top:12px}.login-err{color:#fca5a5!important;font-size:12.5px;margin:2px 0 0}.opt-locked{color:#6b7280}.input.preset.locked{color:#8a94a3}.btn.locked{background:#222a36;border-color:#3a4352;color:#8a94a3}.btn.locked:hover:not(:disabled){background:#283140;border-color:#4a5566}.canvas.symbol{background:#f8fafc}.canvas.panning{cursor:grabbing}.canvas text{pointer-events:none;font-family:IBM Plex Sans Thai,system-ui,sans-serif}.canvas text.mono{font-family:JetBrains Mono,ui-monospace,monospace}.comp{cursor:move}.comp .port{cursor:crosshair;transition:r .1s}.comp .port:hover{r:7;stroke-width:3}.comp .ctl{cursor:pointer}.comp .ctl:hover{filter:brightness(1.25)}.comp.sel>rect:first-child{filter:drop-shadow(0 0 6px #38bdf8aa)}.wire-hit{cursor:pointer}.noevents{pointer-events:none}.flow{animation:flow .7s linear infinite}.flow.fast{animation-duration:.45s}.flow.fault{animation:flow .3s linear infinite,blink .4s infinite}@keyframes flow{to{stroke-dashoffset:-16}}@keyframes blink{50%{opacity:.25}}.spin{animation:spin 1s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes spin{to{transform:rotate(360deg)}}.heat{animation:heat 1.2s ease-in-out infinite}@keyframes heat{50%{stroke:#fde047}}.pulse{animation:pulse .6s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes pulse{0%{transform:scale(.8);opacity:1}to{transform:scale(1.4);opacity:0}}.canvas-empty{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);pointer-events:none}.canvas-empty h2{color:var(--text);margin:0 0 6px}.inspector{width:300px;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding-bottom:30px}.ins-head{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}.ins-icon{width:40px;height:40px;border-radius:9px;border:2px solid;display:grid;place-items:center;background:#0b1220;flex-shrink:0}.ins-title{font-weight:700;font-size:14px}.sec{padding:10px 12px;border-bottom:1px solid var(--line)}.sec-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;display:flex;align-items:center;gap:6px}.sec.live{background:#0c1a17}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);display:inline-block;animation:blink 1.2s infinite}.desc{margin:0 0 10px;color:#b6c2d6;line-height:1.55;font-size:12px}.field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;font-size:11.5px;color:var(--muted)}.field.inline{flex-direction:row;align-items:center;justify-content:space-between}.field .input{width:100%}.field input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.range{width:100%;accent-color:var(--warn)}.row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}.row>span{color:var(--muted);flex-shrink:0}.row>b{text-align:right;font-weight:600;word-break:break-word}.btns{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0;align-items:center}.ports{display:flex;flex-direction:column;gap:3px}.port-row{display:flex;align-items:center;gap:7px;font-size:12px;padding:2px 0}.port-row .muted{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdot{width:11px;height:11px;border-radius:50%;border:2.5px solid;flex-shrink:0}.pc{font-size:10px;background:#1e293b;border-radius:7px;padding:0 6px;color:var(--muted);margin-left:auto}.pc.on{background:#12351f;color:#86efac}.advice .desc{margin-bottom:4px}.hint{padding:8px 0 2px;border-top:1px solid #2a384c}.hint:first-of-type{border-top:0;padding-top:2px}.hint-to{font-size:12px;line-height:1.45;color:#e7eef8}.hint-plan{font-size:11px;color:#78e0b0;margin-top:3px;line-height:1.4}.hint-now{font-size:11px;color:#93c5fd;margin-top:3px;line-height:1.4}.pal-text{min-width:0;flex:1}.hint-btn{flex-shrink:0;border:1px solid #3d5270;background:#172033;color:#9fd8ff;border-radius:6px;font-size:10px;padding:4px 6px;cursor:pointer}.hint-btn.on{background:#1c3d34;color:#78e0b0;border-color:#2f6b56}.pal-advice{margin:-2px 4px 8px;padding:4px 10px 8px;border:1px solid #344153;border-radius:8px;background:#151c28}.port-tip{position:fixed;z-index:60;width:240px;background:#172033;border:1px solid #4a6178;border-radius:10px;padding:8px 10px;pointer-events:none;box-shadow:0 10px 28px #000a}.port-tip-h{font-size:11px;color:#8eabc7;margin-bottom:3px}.port-tip-h b{color:#78e0b0}.wline{width:22px;height:4px;border-radius:2px;flex-shrink:0}.howto{margin:0;padding-left:18px;line-height:1.7;color:#b6c2d6;font-size:12px}.swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sw{width:22px;height:22px;border-radius:6px;border:2px solid #0b1220;cursor:pointer;outline:1px solid var(--line2)}.sw.on{outline:2px solid #38bdf8}.st{padding:1px 8px;border-radius:8px;background:#1e293b}.st-ac,.st-p3{background:#3a2a10;color:#fcd34d}.st-dc{background:#3a1620;color:#fca5a5}.st-sig{background:#3a2a10;color:#fbbf24}.st-data{background:#0f2f2c;color:#5eead4}.st-fault{background:#7f1d1d;color:#fff}.bottom{border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}.bottom.open{height:330px}.tabs{display:flex;align-items:center;gap:2px;padding:4px 8px;border-bottom:1px solid var(--line);background:#0d1526}.tab{background:transparent;color:var(--muted);border:0;padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12.5px}.tab:hover{color:var(--text);background:#16213a}.tab.on{color:#7dd3fc;background:#132544}.tab-body{flex:1;overflow:auto;padding:10px 12px}.disp-grid{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}.disp-card{background:#0b1220;border:1px solid var(--line2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}.disp-h{display:flex;align-items:center;gap:8px;cursor:pointer}.disp-h .muted{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.disp-svg{display:block;border-radius:6px}.disp-svg text{font-family:IBM Plex Sans Thai,system-ui,sans-serif}.disp-svg text.mono{font-family:JetBrains Mono,monospace}.pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:9px;background:#1e293b;color:var(--muted)}.pill.ok{background:#12351f;color:#86efac}.pill.nocomm{background:#3a2a10;color:#fcd34d}.pill.off{background:#3a1620;color:#fca5a5}.process{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.process-info{width:280px}.gauge text,.process text{font-family:IBM Plex Sans Thai,system-ui,sans-serif}.gauge text.mono{font-family:JetBrains Mono,monospace}.trends{display:flex;gap:12px}.trend-list{width:300px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}.trend-item{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px;border-radius:6px;cursor:pointer}.trend-item:hover{background:#16213a}.sw-mini{width:10px;height:10px;border-radius:3px}.trend-svg text{font-family:inherit}.tbl{width:100%;border-collapse:collapse;font-size:12px}.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line2);position:sticky;top:-10px;background:var(--panel)}.tbl td{padding:5px 8px;border-bottom:1px solid var(--line)}.tbl tr.clickable{cursor:pointer}.tbl tr.clickable:hover td{background:#131f36}.al-crit td{background:#2a0f15;color:#fecaca}.al-warn td{background:#2a1e0b;color:#fde68a}.al-cleared td{color:var(--muted)}.bar{position:relative;height:16px;background:#1e293b;border-radius:4px;overflow:hidden;min-width:140px}.bar>div{height:100%}.bar>span{position:absolute;top:0;right:0;bottom:0;left:0;font-size:10px;display:grid;place-items:center;color:#fff}.draw-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:90;display:flex;justify-content:center;overflow:auto;padding:24px 16px}.draw-dialog{width:min(1180px,100%);background:#171e29;border:1px solid #4b6078;border-radius:14px;padding:18px 20px 28px;color:var(--text)}.draw-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.draw-head h2{margin:0;font-size:22px}.draw-fields{display:grid;grid-template-columns:2fr 1fr .6fr 1.3fr 1.4fr;gap:12px;margin-top:14px}.draw-fields label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#a2b6cb}.draw-preview{background:#fff;border-radius:4px;overflow:auto;margin-top:8px}.draw-preview svg{display:block;width:100%;height:auto}.draw-h{margin:18px 0 8px;font-size:14px;letter-spacing:.4px;color:#bcd7ed}.draw-dialog .tbl th{position:static;background:#243c52;color:#bcd7ed}.draw-dialog .tbl td{background:#1b2431}@media (max-width: 800px){.draw-fields{grid-template-columns:1fr 1fr}}.check-dialog{width:min(820px,100%);align-self:flex-start;background:#171e29;border:1px solid #4b6078;border-radius:14px;padding:18px 20px 22px;color:var(--text)}.check-sum{display:flex;gap:8px;margin:14px 0 10px}.chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap}.chip.crit{background:#4c1d1d;color:#fecaca;border:1px solid #b91c1c}.chip.warn{background:#3a2a10;color:#fde68a;border:1px solid #a16207}.chip.info{background:#1e293b;color:#bcd7ed;border:1px solid #475569}.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.check-item{display:flex;align-items:flex-start;gap:10px;background:#1b2431;border:1px solid #2c3b4f;border-left-width:4px;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5}.check-item.crit{border-left-color:#ef4444}.check-item.warn{border-left-color:#f59e0b}.check-item.info{border-left-color:#64748b}.check-body{flex:1;min-width:0}.check-fix{color:#9fe3c4;font-size:12px;margin-top:3px}.check-ok{padding:22px;text-align:center;color:#86efac;font-size:15px;background:#13261d;border:1px solid #166534;border-radius:10px}.btn.check-btn.bad{border-color:#b91c1c;color:#fecaca}.btn .badge{display:inline-block;margin-left:6px;background:#b91c1c;color:#fff;border-radius:999px;padding:0 6px;font-size:10px}.wire-issue p{margin:4px 0 8px;font-size:12.5px;line-height:1.55}.wire-issue.crit{background:#2a1416;border-left:3px solid #ef4444}.wire-issue.warn{background:#2a2312;border-left:3px solid #f59e0b}.burnt-smoke{animation:smoke 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}.burnt-smoke.s2{animation-delay:.6s}.burnt-smoke.s3{animation-delay:1.2s}@keyframes smoke{0%{opacity:.7;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-22px) scale(1.6)}}.toast{position:fixed;bottom:350px;left:50%;transform:translate(-50%);background:#1e293b;border:1px solid #334155;color:var(--text);padding:10px 18px;border-radius:10px;box-shadow:0 10px 30px #000a;z-index:100;font-size:13px}.tabs{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap}.tab{flex-shrink:0}.bottom.open{height:min(330px,42vh)}@media (max-width: 1280px){.logo-s{display:none}.proj{width:170px}.palette{width:232px}.inspector{width:260px}}@media (max-width: 1000px){.toolbar{gap:6px;padding:6px 8px}.logo-s{display:none}.proj{width:130px}.btn{padding:5px 8px}.palette{width:196px}.pal-sub{display:none}.inspector{width:220px}.tb-group.seg .btn{padding:5px 6px;font-size:11.5px}}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#243149;border-radius:6px}::-webkit-scrollbar-track{background:transparent}
