*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0f1a;--panel:#0d1422;--border:#1e3a5f;--text:#c8d8f0;}
.light{  --bg:#f5f7fb;--panel:#ffffff;--border:#cfd8e3;--text:#1a2a3a;}
body{font-family:'Courier New',monospace;background:#0a0f1a;color:#c8d8f0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
#topbar{height:44px;background:#0d1422;border-bottom:1px solid #1e3a5f;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
#topbar h1{font-size:13px;color:#3ddc84;letter-spacing:2px;margin-right:12px}
.tool-btn{padding:5px 12px;background:#111927;border:1px solid #1e3a5f;color:#7ec8e3;border-radius:3px;cursor:pointer;font-family:inherit;font-size:10px;letter-spacing:1px;transition:all 0.15s}
.tool-btn:hover{border-color:#2a6a9f;background:#162038}
.tool-btn.active{border-color:#2ea86a;color:#3ddc84;background:#0a1f14}
.tool-btn.danger{border-color:#7a2a2a;color:#e05a5a}
.tool-btn.danger:hover{background:#2a1010}
#main{flex:1;display:flex;overflow:hidden}
#sidebar{width:180px;background:#0d1422;border-right:1px solid #1e3a5f;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
#sidebar-header{padding:8px 10px;border-bottom:1px solid #1e3a5f;font-size:9px;color:#4a7fa5;letter-spacing:2px}
#components{padding:6px;flex:1;overflow-y:auto}
#components::-webkit-scrollbar{width:4px}
#components::-webkit-scrollbar-track{background:#0a0f1a}
#components::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:2px}
.sec-title{font-size:9px;color:#2a5a7a;padding:6px 2px 3px;letter-spacing:1px}
.comp-item{display:flex;align-items:center;gap:6px;padding:6px 6px;border:1px solid #162030;border-radius:3px;cursor:grab;margin-bottom:3px;background:#0f1828;transition:all 0.15s;font-size:11px;user-select:none}
.comp-item:hover{border-color:#2a6a9f;background:#162038;color:#7ec8e3}
.comp-item:active{cursor:grabbing;background:#1e3a5f}
.comp-icon{width:32px;height:20px;flex-shrink:0}
#canvas-wrap{flex:1;position:relative;overflow:hidden}
canvas#grid{position:absolute;inset:0;pointer-events:none}
svg#canvas{position:absolute;inset:0;width:100%;height:100%}
#panel{width:210px;background:#0d1422;border-left:1px solid #1e3a5f;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
#panel-header{padding:8px 10px;border-bottom:1px solid #1e3a5f;font-size:9px;color:#4a7fa5;letter-spacing:2px}
#panel-body{padding:10px;flex:1;overflow-y:auto;font-size:11px}
#panel-body::-webkit-scrollbar{width:4px}
#panel-body::-webkit-scrollbar-track{background:#0a0f1a}
#panel-body::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:2px}
.info-row{display:flex;justify-content:space-between;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #111d2e}
.lbl{color:#2a5a7a;font-size:10px}
.val{color:#7ec8e3;font-weight:bold;font-size:11px}
.hint{color:#2a4a6a;font-size:10px;line-height:1.7;padding:4px 0}
#result-area{margin-top:10px}
.r-block{padding:8px;background:#090e1a;border:1px solid #1e3a5f;border-radius:3px;margin-bottom:6px}
.r-title{font-size:9px;color:#2ea86a;letter-spacing:1px;margin-bottom:5px}
.r-big{font-size:18px;color:#3ddc84;font-weight:bold;margin-bottom:2px}
.r-sub{font-size:10px;color:#2a6a4a}
.r-warn{padding:6px;background:#0f1400;border:1px solid #3a4a00;border-radius:3px;font-size:10px;color:#a0b040}
#statusbar{height:24px;background:#090e1a;border-top:1px solid #1e3a5f;display:flex;align-items:center;padding:0 10px;gap:16px;font-size:9px;color:#2a4a6a;flex-shrink:0}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:999}
.modal{background:#0d1422;border:1px solid #2a6a9f;border-radius:6px;padding:20px;min-width:260px}
.modal h3{color:#7ec8e3;margin-bottom:14px;font-size:12px;letter-spacing:1px}
.modal input{width:100%;background:#0a0f1a;border:1px solid #1e3a5f;color:#c8d8f0;padding:8px 10px;border-radius:3px;font-family:inherit;font-size:14px;margin-bottom:8px}
.modal input:focus{outline:none;border-color:#2a6a9f}
.modal-hint{font-size:10px;color:#2a5a7a;margin-bottom:14px}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.mbtn{padding:5px 14px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:11px;border:1px solid}
.mbtn.ok{background:#0a1f14;border-color:#2ea86a;color:#3ddc84}
.mbtn.cancel{background:#111927;border-color:#1e3a5f;color:#4a7fa5}

/* カラーコードモーダル */
.cc-bands{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.cc-bands::-webkit-scrollbar{height:4px}
.cc-bands::-webkit-scrollbar-track{background:#0a0f1a}
.cc-bands::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:2px}
.cc-col{display:flex;flex-direction:column;min-width:54px;flex:1}
.cc-col-label{font-size:8px;color:#4a7fa5;letter-spacing:.5px;text-align:center;padding:3px 0;white-space:nowrap}
.cc-color-list{display:flex;flex-direction:column;gap:2px}
.cc-color-row{display:flex;align-items:center;padding:3px 5px;border-radius:3px;cursor:pointer;gap:3px;min-height:22px;transition:opacity .1s;border:1.5px solid transparent}
.cc-color-row:hover{opacity:.85;border-color:rgba(255,255,255,.3)}
.cc-sel{border:2px solid #3ddc84 !important}