:root{
  --bg:#eef2ff; --bg2:#f8fafc; --panel:#ffffffcc; --card:#ffffff;
  --text:#0f172a; --muted:#64748b; --border:#cbd5e1aa;
  --accent:#22c55e; --accent2:#16a34a; --danger:#ef4444;
}
body.dark{
  --bg:#0f172a; --bg2:#020617; --panel:#111827e0; --card:#1e293b;
  --text:#e2e8f0; --muted:#94a3b8; --border:#334155;
  --accent:#22c55e; --accent2:#16a34a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;color:var(--text);padding:12px;
  background:radial-gradient(1200px 600px at 5% -10%,#22c55e33,transparent),linear-gradient(var(--bg2),var(--bg));
}
.wrapper{max-width:1700px;margin:auto}
.app-header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;background:var(--panel);border:1px solid var(--border);padding:12px 14px;border-radius:16px}
.eyebrow{margin:0;font-size:12px;color:var(--muted);font-weight:700}
.app-header h1{margin:2px 0 0;font-size:20px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
.chip-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:8px 12px;display:flex;align-items:center;gap:6px;font-weight:700}
.hidden{display:none!important}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:12px}
.sidebar-left,.sidebar-right,.board-wrap,.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(8px)}
.sidebar-left,.sidebar-right{padding:14px;max-height:calc(100vh - 110px);overflow:auto}
.main-area{display:flex;flex-direction:column;gap:12px;min-width:0}
.board-wrap{padding:10px;min-height:620px;display:flex;flex-direction:column}
.board-toolbar{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:0 2px 8px}
#aiHint{color:var(--accent);font-weight:700}
#board{position:relative;min-height:560px;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:linear-gradient(90deg,#94a3b826 1px,transparent 1px),linear-gradient(#94a3b826 1px,transparent 1px),linear-gradient(var(--bg2),var(--bg));background-size:24px 24px,24px 24px,100% 100%}
#board.grab{cursor:grab}
#board.grabbing{cursor:grabbing}
#boardContent{position:absolute;inset:0;transform-origin:0 0}
#wireLayer{position:absolute;inset:0;overflow:visible;pointer-events:none}
#wireLayer path{pointer-events:stroke;cursor:pointer;transition:filter .2s}
#wireLayer path.selected{filter:drop-shadow(0 0 6px var(--accent))}
.control-group{margin-bottom:10px}
.control-group label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:700}
.control-group input,.control-group select,textarea{width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.control-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.control-buttons button,.tab-buttons button,button{padding:9px 10px;border:0;border-radius:10px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;transition:transform .16s,filter .2s}
button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.panel{padding:10px}
#connectionsList{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:150px;overflow:auto}
#connectionsList li{border:1px solid var(--border);padding:8px;border-radius:8px;font-size:12px;background:var(--card)}
.button{
  position:absolute;width:170px;min-height:90px;border-radius:14px;padding:8px;background:linear-gradient(170deg,#1e293b,#334155);color:#fff;
  border:1px solid #ffffff22;box-shadow:0 10px 30px #0000003b;cursor:grab;user-select:none;
}
.button.red{background:linear-gradient(170deg,#ef4444,#991b1b)}
.button.green{background:linear-gradient(170deg,#22c55e,#166534)}
.button.blue{background:linear-gradient(170deg,#3b82f6,#1e3a8a)}
.button.black{background:linear-gradient(170deg,#334155,#020617)}
.button.yellow{background:linear-gradient(170deg,#facc15,#a16207);color:#111}
.button.locked{outline:2px dashed #f59e0b}
.button.selected{outline:2px solid #22c55e}
.component-title{font-size:13px;font-weight:800}
.component-meta{font-size:11px;opacity:.85}
.pin{
  width:16px;height:16px;border-radius:50%;position:absolute;display:grid;place-items:center;
  font-size:9px;font-weight:700;border:2px solid #fff;box-shadow:0 0 0 2px #0f172a80;background:#111827;color:#fff;
}
.pin.female{background:#fff;color:#111}
.pin.selected{outline:3px solid #22c55e80}
.removeBtn{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:999px;background:var(--danger);display:grid;place-items:center;color:#fff;font-weight:900;cursor:pointer}
.wire-label{font-size:10px;fill:var(--text);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
body.dark .wire-label{stroke:#0f172a}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:8px 12px;border-radius:999px;z-index:90}
.tab-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.tab-pane{display:none}
.tab-pane.active{display:block}
.tab-btn{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.tab-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;color:#fff!important}
.saved-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;margin-bottom:8px}
.saved-actions{display:flex;gap:6px}.saved-actions button{flex:1}
#templatesList,#historyList{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#templatesList li,#historyList li{padding:8px;border-radius:8px;background:var(--card);border:1px solid var(--border);cursor:pointer}
.popup-overlay,.legal-popup-overlay{position:fixed;inset:0;background:#0008;display:none;z-index:100;align-items:center;justify-content:center;padding:12px}
.popup-overlay.active,.legal-popup-overlay{display:flex}
.popup-box,.legal-popup-box{max-width:700px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;position:relative}
.popup-close{position:absolute;top:8px;right:8px}
.tool-extra-actions{display:flex;gap:8px;margin-top:10px}
.tool-toggle-btn{background:var(--card);color:var(--text);border:1px solid var(--border)}
@media (max-width:1200px){.layout{grid-template-columns:290px 1fr}.sidebar-right{display:none}}
@media (max-width:930px){
  body{padding:8px}.layout{grid-template-columns:1fr}
  .sidebar-left,.sidebar-right{max-height:none}
  .sidebar-right{display:block}
  .control-buttons{grid-template-columns:1fr}
  .app-header{position:sticky;top:8px;z-index:40}
}