*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#050505;--panel:#0a0a0a;--border:#1a1a1a;--text:#777;--accent:#ff1030;
  --accent-g:rgba(255,16,48,.5);--green:#00ee44;--yellow:#eedd00;--red:#ff1030;
  --white:#dde0ff;--pink:#ff2266;
}
body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;display:flex;height:100vh;overflow:hidden;user-select:none;}

/* ═══ TOP BAR ═══ */
.topbar{position:fixed;top:0;left:0;right:0;height:42px;background:#080808;border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:12px;z-index:100;}
.topbar .logo{font-family:'Orbitron',sans-serif;font-size:13px;color:var(--accent);letter-spacing:2px;
text-shadow:0 0 8px var(--accent-g);white-space:nowrap;}
.topbar .sep{width:1px;height:24px;background:#222;}
.topbar .info{font-size:10px;color:#555;flex:1;}
.tbtn{padding:5px 14px;background:#111;border:1px solid #2a2a2a;color:#666;font-family:inherit;
  font-size:10px;letter-spacing:1px;cursor:pointer;border-radius:3px;transition:all .2s;white-space:nowrap;}
.tbtn:hover{border-color:var(--accent);color:var(--accent);}
.tbtn.g{border-color:#1a3a1a;color:#4a8;}
.tbtn.g:hover{border-color:var(--green);color:var(--green);}
.tbtn.y{border-color:#3a3a1a;color:#aa8833;}
.tbtn.y:hover{border-color:var(--yellow);color:var(--yellow);}
.tbtn.active{border-color:var(--accent);color:var(--accent);text-shadow:0 0 6px var(--accent-g);}

/* ═══ TOOLBOX (left) ═══ */
.toolbox{width:180px;background:var(--panel);border-right:1px solid var(--border);
padding:52px 8px 8px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:6px;}
.toolbox h3{font-size:9px;color:#444;letter-spacing:2px;margin:8px 0 2px;text-transform:uppercase;}
.tool-btn{
  padding:10px 8px;background:#0e0e0e;border:1px solid #1a1a1a;color:#666;
  font-family:inherit;font-size:10px;cursor:pointer;border-radius:3px;
  transition:all .2s;text-align:left;display:flex;align-items:center;gap:8px;
}
.tool-btn:hover{border-color:var(--accent);color:var(--accent);background:#110808;}
.tool-icon{width:28px;height:16px;border-radius:2px;flex-shrink:0;border:1px solid #333;}
.tool-icon.ti-led{background:#1a2a1a;}
.tool-icon.ti-bar5{background:repeating-linear-gradient(90deg,#1a2a1a 0,#1a2a1a 4px,#0a0a0a 4px,#0a0a0a 5px);background-size:5px 100%;}
.tool-icon.ti-seg7{background:#111;color:#2a3a2a;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:bold;width:20px;}
.tool-icon.ti-ind{background:#1a2520;width:24px;height:18px;}

/* Board size controls */
.board-ctrl{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid #1a1a1a;}
.board-ctrl label{font-size:9px;color:#444;letter-spacing:1px;}
.board-ctrl input[type=number]{width:100%;background:#111;border:1px solid #222;color:#888;
font-family:inherit;font-size:11px;padding:4px 6px;border-radius:2px;}

/* Overlay controls in toolbox */
.overlay-section{margin-top:8px;padding-top:8px;border-top:1px solid #1a1a1a;display:flex;flex-direction:column;gap:4px;}
.overlay-section label{font-size:9px;color:#444;letter-spacing:1px;}
.overlay-section input[type=file]{font-size:9px;color:#555;width:100%;}
.overlay-section input[type=range]{width:100%;accent-color:var(--yellow);height:12px;}

/* ═══ BOARD AREA (center) ═══ */
.board-area{flex:1;padding:52px 10px 10px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;}
.board-wrap{position:relative;flex-shrink:0;}
.board{
  background:#0c0c0c;position:relative;border-radius:4px;
  box-shadow:0 0 0 2px #1a1a1a,0 0 0 4px #111,0 4px 30px rgba(0,0,0,.8);
  overflow:hidden;
  /* PCB texture */
  background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(30,50,30,.02) 3px,rgba(30,50,30,.02) 4px),
    repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(30,50,30,.015) 3px,rgba(30,50,30,.015) 4px);
}
.board.power-on{box-shadow:0 0 0 2px #221111,0 0 0 4px #110808,0 4px 60px rgba(255,0,30,.08);}
.overlay-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:80;border-radius:4px;display:none;}

/* ═══ PLACED COMPONENT ═══ */
.comp{position:absolute;cursor:grab;z-index:10;border:2px solid transparent;border-radius:3px;padding:2px;transition:border-color .15s;}
.comp:hover{border-color:rgba(255,255,100,.25);}
.comp.selected{border-color:rgba(255,255,0,.6);z-index:20;}
.comp.dragging{cursor:grabbing;z-index:30;opacity:.9;}
.comp .comp-inner{pointer-events:none;}

/* LED segment (off state) */
.led-seg{background:#151f15;border:.5px solid #1e2e1e;border-radius:1px;transition:background .2s,box-shadow .2s;}

/* 7-segment elements */
.seg7-digit{position:relative;display:inline-block;}
.seg7-s{position:absolute;background:#151f15;border:.5px solid #1e2e1e;transition:background .2s,box-shadow .2s;}
.seg7-s.h{clip-path:polygon(12% 0%,88% 0%,100% 50%,88% 100%,12% 100%,0% 50%);}
.seg7-s.v{clip-path:polygon(0% 8%,50% 0%,100% 8%,100% 92%,50% 100%,0% 92%);}

/* Indicator block */
.ind-block{background:#1a2520;border:.5px solid #2a352a;border-radius:1px;transition:background .2s,box-shadow .2s;}

/* ═══ PROPERTIES PANEL (right) ═══ */
.props{width:240px;background:var(--panel);border-left:1px solid var(--border);
padding:52px 8px 8px;overflow-y:auto;flex-shrink:0;font-size:10px;}
.props h3{font-size:9px;color:#444;letter-spacing:2px;margin:10px 0 4px;text-transform:uppercase;}
.props .none-msg{color:#333;font-size:11px;text-align:center;margin-top:40px;letter-spacing:1px;}
.prop-row{display:flex;align-items:center;gap:5px;margin:3px 0;}
.prop-row label{width:50px;text-align:right;color:#445;font-size:9px;flex-shrink:0;letter-spacing:.5px;}
.prop-row input[type=range]{flex:1;height:12px;accent-color:var(--accent);cursor:pointer;}
.prop-row input[type=number],.prop-row input[type=text]{
  flex:1;background:#111;border:1px solid #222;color:#888;font-family:inherit;font-size:10px;padding:3px 5px;border-radius:2px;}
.prop-row .pval{width:32px;text-align:right;color:#666;font-size:9px;flex-shrink:0;}
.prop-row input[type=color]{width:28px;height:20px;border:1px solid #333;background:#111;cursor:pointer;padding:0;}

/* Color preset buttons */
.color-presets{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0;}
.cpre{width:24px;height:20px;border:1px solid #333;border-radius:2px;cursor:pointer;transition:all .15s;}
.cpre:hover{transform:scale(1.15);border-color:#666;}
.cpre.active{border-color:#fff;box-shadow:0 0 6px rgba(255,255,255,.3);}

.del-btn{width:100%;padding:6px;margin-top:10px;background:#1a0808;border:1px solid #331111;
color:#aa3333;font-family:inherit;font-size:10px;cursor:pointer;border-radius:3px;letter-spacing:1px;}
.del-btn:hover{background:#220a0a;border-color:#552222;color:#ff4444;}
.dup-btn{width:100%;padding:6px;margin-top:4px;background:#0a1a0a;border:1px solid #113311;
  color:#338833;font-family:inherit;font-size:10px;cursor:pointer;border-radius:3px;letter-spacing:1px;}
.dup-btn:hover{border-color:#225522;color:#44cc44;}