:root{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c232c; --border:#2b333d;
  --fg:#e6edf3; --muted:#8b98a8; --primary:#22d3ee; --signal:#facc15;
  --danger:#f87171; --ok:#4ade80;
  --grid:#1a222b; --grid-strong:#243040;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:12px}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}

.grid-canvas{background:
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/20px 20px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/20px 20px,
  linear-gradient(var(--grid-strong) 1px,transparent 1px) 0 0/100px 100px,
  linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px) 0 0/100px 100px,
  var(--bg);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--fg);
  cursor:pointer;font:inherit;transition:all .15s}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary);color:#08131a;border-color:var(--primary);font-weight:600}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger{background:rgba(248,113,113,.12);color:var(--danger);border-color:rgba(248,113,113,.45);font-weight:600}
.btn.danger:hover{background:rgba(248,113,113,.2);border-color:var(--danger)}
.btn.ghost{background:transparent}
.btn.big{padding:12px 22px;font-size:15px}
.icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid transparent;background:transparent;color:var(--fg);
  cursor:pointer;font-size:16px}
.icon-btn:hover{background:var(--panel-2)}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--border);background:var(--panel)}
.topbar nav{display:flex;gap:8px;align-items:center}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--fg)}
.brand.small{font-size:13px}
.brand .bolt{color:var(--primary);font-size:18px}
.navlink{padding:6px 12px;border-radius:6px;color:var(--muted)}
.navlink:hover,.navlink.active{color:var(--fg);background:var(--panel-2);text-decoration:none}
.chip{display:inline-block;padding:4px 10px;border:1px solid var(--primary);color:var(--primary);
  border-radius:99px;font-size:12px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:16px}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;
  padding:80px 24px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 20px}
.hero .accent{color:var(--primary)}
.hero p{color:var(--muted);font-size:17px;line-height:1.5;margin-bottom:28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-canvas{border:1px solid var(--border);border-radius:12px;padding:20px;aspect-ratio:5/3}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:40px 20px}.hero h1{font-size:32px}}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;
  margin:0 auto;padding:20px 24px 80px}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px}
.feature h3{margin:0 0 8px;color:var(--primary)}
.feature p{color:var(--muted);margin:0}
@media(max-width:800px){.features{grid-template-columns:1fr}}
.footer{text-align:center;padding:24px;color:var(--muted);border-top:1px solid var(--border)}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;gap:24px}
.auth-card{width:100%;max-width:420px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px}
.card h2{margin:0 0 6px}
form label{display:block;margin:14px 0;font-size:13px;color:var(--muted)}
form input,form select,form textarea{
  display:block;width:100%;margin-top:6px;padding:9px 11px;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;color:var(--fg);font:inherit}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--primary)}
.auth-err{color:var(--danger);margin-top:12px;min-height:20px}
.auth-switch{margin-top:20px;text-align:center;color:var(--muted)}
.ok{color:var(--ok);margin-left:12px}

/* Container / dashboard */
.container{max-width:1100px;margin:0 auto;padding:32px 24px}
.container.narrow{max-width:640px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:20px;flex-wrap:wrap}
.page-head h1{margin:0}
.empty{text-align:center;color:var(--muted);padding:60px 20px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.project-card{position:relative;color:var(--fg);display:block;transition:all .15s}
.project-card:hover{border-color:var(--primary);text-decoration:none;transform:translateY(-2px)}
.project-card h3{margin:6px 0 8px}
.proj-head{display:flex;justify-content:space-between;align-items:center}
.std{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--primary);
  border:1px solid var(--primary);border-radius:4px;padding:2px 6px}
.proj-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px}
.proj-del:hover{color:var(--danger)}

/* Dialog */
.dlg{border:1px solid var(--border);background:var(--panel);color:var(--fg);border-radius:12px;
  padding:24px;min-width:360px;max-width:90vw}
.dlg::backdrop{background:rgba(0,0,0,.6)}
.dlg h3{margin:0 0 8px}
.dlg menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:20px 0 0}

/* Editor */
.editor{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.editor-top{height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;
  border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0}
.editor-title{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.editor-title #proj-name{font-weight:600}
.dirty-dot{color:var(--signal);font-family:'JetBrains Mono',monospace;font-size:11px}
.editor-tools{display:flex;gap:2px;border-left:1px solid var(--border);border-right:1px solid var(--border);padding:0 8px;margin:0 8px;height:32px;align-items:center}
.editor-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.dropdown{position:relative}
.menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--panel-2);border:1px solid var(--border);
  border-radius:6px;min-width:200px;z-index:20;overflow:hidden}
.menu button{display:block;width:100%;text-align:left;padding:8px 12px;background:transparent;
  border:none;color:var(--fg);cursor:pointer;font:inherit}
.menu button:hover{background:var(--panel)}

.editor-body{flex:1;display:flex;overflow:hidden}
.palette,.props{width:240px;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden}
.props{border-right:none;border-left:1px solid var(--border);width:280px}
.panel-head{padding:0 12px;height:36px;display:flex;align-items:center;border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.palette-list{flex:1;overflow:auto;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.palette-item{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:6px;cursor:grab;display:flex;flex-direction:column;align-items:center;gap:4px}
.palette-item:hover{border-color:var(--primary);background:rgba(34,211,238,.05)}
.palette-item svg{width:100%;height:44px}
.palette-item span{font-size:10px;color:var(--muted);text-align:center;line-height:1.1}
.palette-cat{grid-column:1/-1;padding:8px 4px 4px;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-top:1px solid var(--border);margin-top:6px}
.palette-cat:first-child{border-top:none;margin-top:0}

.canvas-wrap{flex:1;position:relative;overflow:hidden}
#canvas{width:100%;height:100%;cursor:crosshair;display:block;user-select:none}
/* Reglas milimetradas */
.ruler{position:absolute;background:rgba(13,17,23,.92);color:#c9d1d9;pointer-events:none;z-index:5;font:10px/1 ui-monospace,Menlo,monospace}
.ruler-h{top:0;left:0;right:0;height:22px;border-bottom:1px solid var(--border,#30363d)}
.ruler-v{top:0;left:0;bottom:0;width:22px;border-right:1px solid var(--border,#30363d)}
.ruler-corner{top:0;left:0;width:22px;height:22px;background:rgba(13,17,23,.92);border-right:1px solid var(--border,#30363d);border-bottom:1px solid var(--border,#30363d);z-index:6}
.canvas-wrap #canvas{padding-left:0}
html:is([data-theme="office-blue"],[data-theme="word-cream"],[data-theme="notion-light"],[data-theme="solarized-light"]) .ruler,
html:is([data-theme="office-blue"],[data-theme="word-cream"],[data-theme="notion-light"],[data-theme="solarized-light"]) .ruler-corner{background:rgba(245,245,240,.95);color:#333}
.canvas-wrap.sim-on #canvas{cursor:pointer}
.sim-hud{position:absolute;top:12px;left:12px;background:rgba(15,23,42,.92);border:1px solid #22d3ee;
  border-radius:8px;padding:10px 14px;font-size:12px;color:#e2e8f0;max-width:320px;z-index:5;
  box-shadow:0 4px 18px rgba(0,0,0,.4)}
.sim-hud-title{font-weight:700;color:#22d3ee;margin-bottom:4px}
.sim-hud-info{margin-bottom:6px}
.sim-hud-info.fault{color:#f87171}
.sim-hud-hint{opacity:.7;font-size:11px}
.sim-probe{position:absolute;pointer-events:none;background:rgba(15,23,42,.95);border:1px solid #22d3ee;
  border-radius:6px;padding:6px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#e2e8f0;
  z-index:6;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.icon-btn.sim-active{background:#22d3ee;color:#0b1220;border-color:#22d3ee}
.hud{position:absolute;bottom:12px;left:12px;background:rgba(22,27,34,.85);border:1px solid var(--border);
  border-radius:6px;padding:6px 12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  display:flex;gap:12px;backdrop-filter:blur(4px)}
.hud .z{color:var(--primary)}

.props-body{padding:14px;overflow:auto;flex:1}
.props-body .row{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.btn.small{padding:5px 10px;font-size:12px}
.btn.small.active{background:rgba(34,211,238,0.15);border-color:var(--primary);color:var(--primary)}
#prop-color{width:100%;height:32px;padding:2px;background:var(--bg);border:1px solid var(--border);border-radius:6px}
#prop-scale,#prop-sw,#ps-scale{width:100%}
.scale-card{margin:10px 0 14px;padding:12px;border:1px solid rgba(34,211,238,.55);background:rgba(34,211,238,.08);border-radius:8px}
.scale-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--fg)}
.scale-head strong{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--primary)}
.scale-head span{font-size:13px;color:var(--signal)}

/* Custom symbol modal */
.cs-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.cs-modal[hidden]{display:none!important}
.cs-dialog{width:min(760px,92vw);max-height:90vh;background:var(--panel,#161b22);border:1px solid var(--border,#30363d);border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.cs-head{padding:12px 16px;border-bottom:1px solid var(--border,#30363d);display:flex;align-items:center;justify-content:space-between}
.cs-body{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:18px;overflow:auto}
.cs-form label{display:block;margin-bottom:12px;font-size:12px;color:var(--muted,#8b949e)}
.cs-form input[type=text],.cs-form input[type=file]{width:100%;margin-top:4px;padding:7px 9px;background:#0d1117;border:1px solid var(--border,#30363d);border-radius:6px;color:#e6edf3;font-size:13px}
.cs-row{display:flex;gap:10px}
.cs-preview{display:flex;flex-direction:column;gap:6px}
.cs-canvas-wrap{aspect-ratio:1/1;background:#0d1117;border:1px solid var(--border,#30363d);border-radius:6px;overflow:hidden}
.cs-canvas-wrap svg{width:100%;height:100%;display:block;cursor:crosshair}
.cs-foot{padding:12px 16px;border-top:1px solid var(--border,#30363d);display:flex;align-items:center;justify-content:flex-end;gap:8px}
.cs-foot-spacer{flex:1}
.palette-item{position:relative}
.palette-item .del-btn{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;background:rgba(239,68,68,0.85);color:#fff;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:none}
.palette-item:hover .del-btn{display:block}
.palette-item img.custom-thumb{width:100%;height:56px;object-fit:contain;background:#fff;border-radius:4px}

/* Crop tool */
.cs-crop-stage{margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.cs-crop-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#0d1117 repeating-conic-gradient(#12181f 0 25%,#0d1117 0 50%) 50%/16px 16px;border:1px solid var(--border);border-radius:6px;overflow:hidden;user-select:none;touch-action:none}
.cs-crop-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.cs-crop-box{position:absolute;border:1.5px dashed var(--primary);box-shadow:0 0 0 9999px rgba(0,0,0,0.45);cursor:move}
.cs-crop-handle{position:absolute;width:12px;height:12px;background:var(--primary);border:1px solid #08131a;border-radius:2px}
.cs-crop-handle[data-h=nw]{left:-6px;top:-6px;cursor:nwse-resize}
.cs-crop-handle[data-h=ne]{right:-6px;top:-6px;cursor:nesw-resize}
.cs-crop-handle[data-h=sw]{left:-6px;bottom:-6px;cursor:nesw-resize}
.cs-crop-handle[data-h=se]{right:-6px;bottom:-6px;cursor:nwse-resize}

.cs-dialog{width:min(1040px,96vw)}
.cs-body{grid-template-columns:260px 1fr 1fr}
.cs-list-panel{border-right:1px solid var(--border);padding-right:12px;display:flex;flex-direction:column;min-height:360px}
.cs-list-head{display:flex;gap:6px;margin-bottom:8px}
.cs-list-head input[type=search]{flex:1;padding:6px 8px;background:#0d1117;border:1px solid var(--border);border-radius:6px;color:var(--fg);font-size:12px}
.cs-list{overflow:auto;flex:1;display:flex;flex-direction:column;gap:4px;max-height:60vh}
.cs-list-item{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid transparent;border-radius:6px;cursor:pointer}
.cs-list-item:hover{background:var(--panel-2);border-color:var(--border)}
.cs-list-item.active{border-color:var(--primary);background:rgba(34,211,238,0.08)}
.cs-list-item img{width:34px;height:34px;object-fit:contain;background:#0d1117;border-radius:4px;padding:2px}
.cs-list-item .meta{flex:1;min-width:0}
.cs-list-item .meta b{display:block;font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-list-item .meta span{font-size:10px;color:var(--muted)}
.cs-list-item .row-actions{display:flex;gap:4px;opacity:1}
.cs-list-item .row-actions button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--muted);cursor:pointer;padding:0;font-size:14px}
.cs-list-item .row-actions button:hover{color:var(--fg)}
.cs-list-item .row-actions button.danger:hover{color:var(--danger)}
.cs-list-empty{color:var(--muted);font-size:12px;padding:14px;text-align:center}
@media(max-width:900px){.cs-body{grid-template-columns:1fr}.cs-list-panel{border-right:none;border-bottom:1px solid var(--border);padding:0 0 12px}}


/* ============== Drawing tools bar ============== */
.editor-draw-tools{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-top:1px solid #1f2733;
  background:#0b1220; flex-wrap:wrap;
}
.editor-page-tools{ background:#0a1526; gap:10px; }
.editor-shape-tools{ background:#0b1220; }
.editor-style-tools{ background:#0a1a24; border-top:1px dashed #22d3ee33; }
.tool-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border:1px solid #1f2937; border-radius:8px;
  background:rgba(34,211,238,.05);
}
.tool-pill .tool-group-label{ color:#22d3ee; opacity:.85; }
.tool-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:#0f172a; color:#cbd5e1; border:1px solid #1f2937; border-radius:6px;
  cursor:pointer; font-size:14px; padding:0;
}
.tool-btn:hover{ border-color:#22d3ee; color:#22d3ee; }
.tool-btn.active{ background:#0e2a34; border-color:#22d3ee; color:#22d3ee; box-shadow:0 0 0 1px #22d3ee55 inset; }
.tool-sep{ width:1px; height:20px; background:#1f2937; margin:0 4px; }
.tool-inline{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#94a3b8; }
.tool-inline span{ text-transform:uppercase; letter-spacing:.04em; }
.tool-inline input[type=color]{
  width:26px; height:22px; border:1px solid #1f2937; border-radius:4px; background:#0f172a; padding:0; cursor:pointer;
}
.tool-inline select{
  background:#0f172a; color:#e2e8f0; border:1px solid #1f2937; border-radius:4px; padding:2px 6px; font-size:11px;
}
.canvas-wrap.tool-crosshair svg{ cursor:crosshair; }
.canvas-wrap.tool-text svg{ cursor:text; }
[hidden]{ display:none !important; }

/* Page tabs */
.page-tabs{ display:flex; align-items:center; gap:6px; padding:4px 8px; background:#0b1220; border-bottom:1px solid #1f2937; overflow-x:auto; }
.page-tabs-list{ display:flex; gap:4px; flex:1; min-width:0; }
.page-tab{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:#0f172a; border:1px solid #1f2937; border-radius:6px 6px 0 0; color:#cbd5e1; font-size:12px; cursor:pointer; white-space:nowrap; }
.page-tab:hover{ border-color:#22d3ee; color:#22d3ee; }
.page-tab.active{ background:#0e2a34; border-color:#22d3ee; color:#22d3ee; }
.page-tab-close{ background:transparent; color:inherit; border:none; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:.6; }
.page-tab-close:hover{ opacity:1; color:#f87171; }

/* Layers panel */
.layers-panel{ margin:8px 0; padding:8px; background:#0b1220; border:1px solid #1f2937; border-radius:6px; }
.layers-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.layers-head strong{ font-size:12px; color:#e2e8f0; text-transform:uppercase; letter-spacing:.05em; }
.layers-list{ display:flex; flex-direction:column; gap:3px; }
.layer-row{ display:grid; grid-template-columns:24px 24px 30px 1fr 24px; align-items:center; gap:4px; padding:4px 6px; background:#0f172a; border:1px solid #1f2937; border-radius:4px; cursor:pointer; font-size:12px; color:#cbd5e1; }
.layer-row.active{ border-color:#22d3ee; background:#0e2a34; color:#22d3ee; }
.layer-row button{ background:transparent; border:none; color:inherit; cursor:pointer; font-size:13px; padding:0; }
.layer-row .lyr-color{ width:24px; height:18px; padding:0; border:1px solid #1f2937; border-radius:3px; background:#0f172a; cursor:pointer; }
.layer-row .lyr-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-row .lyr-del:hover{ color:#f87171; }
.btn.small{ padding:2px 8px; font-size:11px; }

/* Phase / conductor preset buttons */
.phase-btn { min-width:26px; padding:2px 6px; font-weight:700; font-family:'JetBrains Mono',monospace; font-size:11px; border:1px solid rgba(255,255,255,.15); border-radius:4px; }
.phase-btn.active { outline:2px solid #facc15; outline-offset:1px; box-shadow:0 0 0 1px #0b1220 inset; }
.tool-group-label { font-size:11px; opacity:.75; padding:0 4px; text-transform:uppercase; letter-spacing:.05em; }

/* ---- Theme overrides (v33) ---- */
html[data-theme="carbon"]{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1c232c; --border:#2b333d;
  --fg:#e6edf3; --muted:#8b98a8; --primary:#22d3ee; --signal:#facc15;
}
html[data-theme="vs-dark"]{
  --bg:#1e1e1e; --panel:#252526; --panel-2:#2d2d30; --border:#3c3c3c;
  --fg:#d4d4d4; --muted:#858585; --primary:#569cd6; --signal:#dcdcaa;
}
html[data-theme="monokai"]{
  --bg:#272822; --panel:#2d2e27; --panel-2:#3e3d32; --border:#49483e;
  --fg:#f8f8f2; --muted:#75715e; --primary:#a6e22e; --signal:#fd971f;
}
html[data-theme="nord"]{
  --bg:#2e3440; --panel:#3b4252; --panel-2:#434c5e; --border:#4c566a;
  --fg:#eceff4; --muted:#a3adbf; --primary:#88c0d0; --signal:#ebcb8b;
}
html[data-theme="graphite"]{
  --bg:#2b2b2b; --panel:#323232; --panel-2:#3a3a3a; --border:#4a4a4a;
  --fg:#e8e8e8; --muted:#a0a0a0; --primary:#5b9bd5; --signal:#f2c811;
}
html[data-theme="office-blue"]{
  --bg:#eef3fa; --panel:#ffffff; --panel-2:#f4f7fc; --border:#c7d3e3;
  --fg:#1f2a44; --muted:#5a6b85; --primary:#2b6cb0; --signal:#dd6b20;
}
html[data-theme="word-cream"]{
  --bg:#faf7f0; --panel:#ffffff; --panel-2:#f3ecdc; --border:#d9cfb7;
  --fg:#2b2a25; --muted:#6b6555; --primary:#2b579a; --signal:#c05621;
}
html[data-theme="notion-light"]{
  --bg:#ffffff; --panel:#fbfaf7; --panel-2:#f1f0ec; --border:#e6e4de;
  --fg:#1f1f1f; --muted:#6b6b6b; --primary:#2383e2; --signal:#e0913e;
}
html[data-theme="solarized-light"]{
  --bg:#fdf6e3; --panel:#eee8d5; --panel-2:#e7e0c8; --border:#d5cbaa;
  --fg:#073642; --muted:#657b83; --primary:#268bd2; --signal:#b58900;
}

/* ---- Component/wire color remap for LIGHT themes (v45) ----
   Los símbolos y cables se diseñaron con colores para fondo oscuro
   (cyan #22d3ee, textos claros, cuerpos oscuros). Sobre temas claros
   quedan invisibles o con bajo contraste. Aquí forzamos, mediante
   selectores de atributo SVG, versiones oscuras equivalentes que sí
   se ven sobre fondo claro. Se aplica a la lona (#canvas) y a la
   biblioteca (#palette-list). */
html:is([data-theme="office-blue"],[data-theme="word-cream"],[data-theme="notion-light"],[data-theme="solarized-light"]) :is(#canvas,#palette-list) {
  /* Cyan principal (cables/símbolos) -> azul oscuro legible */
  [stroke="#22d3ee" i]{ stroke:#0b3d91 !important; }
  [fill="#22d3ee" i]{ fill:#0b3d91 !important; }
  [stroke="#0ea5e9" i]{ stroke:#0b5ea8 !important; }
  [fill="#0ea5e9" i]{ fill:#0b5ea8 !important; }
  /* Grises/blancos claros (textos, cuerpos suaves) -> grises oscuros */
  [stroke="#e6edf3" i]{ stroke:#1f2937 !important; }
  [fill="#e6edf3" i]{ fill:#1f2937 !important; }
  [fill="#c7ccd1" i]{ fill:#6b7280 !important; }
  [fill="#e5e7eb" i]{ fill:#9ca3af !important; }
  [fill="#d1d5db" i]{ fill:#6b7280 !important; }
  [fill="#94a3b8" i]{ fill:#475569 !important; }
  [stroke="#94a3b8" i]{ stroke:#475569 !important; }
  /* Fondos casi negros usados como “huecos” -> tonos claros contrastados */
  [fill="#0b1220" i]{ fill:#e5e7eb !important; }
  [fill="#0f172a" i]{ fill:#e5e7eb !important; }
  [fill="#111827" i]{ fill:#f3f4f6 !important; }
  [fill="#1f2937" i]{ fill:#e5e7eb !important; }
  [stroke="#0f172a" i]{ stroke:#334155 !important; }
  [stroke="#111827" i]{ stroke:#334155 !important; }
  [stroke="#1f2937" i]{ stroke:#334155 !important; }
  [stroke="#4b5563" i]{ stroke:#374151 !important; }
  [fill="#4b5563" i]{ fill:#374151 !important; }
  /* Texto SVG genérico (currentColor / sin fill) */
  text{ fill:#1f2937; }
}

/* =========================================================
   Responsive layout — PC / Tablet / Móvil  (v46)
   Se añaden reglas para adaptar topbar, hero, dashboard,
   modales y el editor completo a pantallas medianas y
   pequeñas sin tocar la estructura existente.
   ========================================================= */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px){
  .topbar{ padding:10px 14px; gap:8px; flex-wrap:wrap }
  .topbar nav{ flex-wrap:wrap }
  .container{ padding:22px 16px }
  .hero{ gap:36px; padding:56px 20px }
  .hero h1{ font-size:36px }
  .features{ grid-template-columns:repeat(2,1fr) }
  .palette{ width:200px }
  .props{ width:240px }
  .editor-top{ flex-wrap:wrap; height:auto; padding:6px 10px; gap:6px }
  .editor-tools{ order:5; width:100%; margin:4px 0; border-left:none; border-right:none; overflow-x:auto; padding:0 4px }
  .editor-actions{ order:4; margin-left:auto }
  .editor-draw-tools{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch }
  .editor-draw-tools > *{ flex-shrink:0 }
}

/* Móvil (≤ 720px) */
@media (max-width: 720px){
  html,body{ font-size:13px }
  .topbar{ padding:8px 10px }
  .topbar nav .navlink{ padding:4px 8px; font-size:12px }
  .brand{ font-size:14px }
  .btn{ padding:7px 12px }
  .btn.big{ padding:10px 16px; font-size:14px }

  .hero{ grid-template-columns:1fr; padding:32px 16px; gap:24px }
  .hero h1{ font-size:28px }
  .hero p{ font-size:15px }
  .hero-canvas{ aspect-ratio:4/3 }
  .features{ grid-template-columns:1fr; padding:16px 16px 48px }
  .footer{ padding:16px; font-size:12px }

  .container{ padding:16px 12px }
  .page-head{ flex-direction:column; align-items:flex-start; gap:12px }
  .projects-grid{ grid-template-columns:1fr; gap:12px }

  .card{ padding:18px }
  .dlg{ min-width:0; width:calc(100vw - 32px); padding:18px }
  .cs-dialog{ width:calc(100vw - 16px); max-height:94vh }
  .cs-body{ grid-template-columns:1fr; padding:12px; gap:12px }
  .cs-list-panel{ border-right:none; border-bottom:1px solid var(--border); padding:0 0 10px; min-height:auto; max-height:40vh }
  .cs-list{ max-height:32vh }
  .cs-foot{ flex-wrap:wrap; gap:6px }

  /* -------- Editor en móvil: paneles como cajones deslizantes -------- */
  .editor-top{ padding:4px 6px }
  .editor-title{ order:1; flex:1 1 100%; padding:4px 2px }
  .editor-title #proj-name{ font-size:13px }
  .editor-tools{ order:5 }
  .editor-actions{ order:4; flex-wrap:wrap; gap:6px }
  .editor-actions .btn{ padding:6px 10px; font-size:12px }
  .theme-picker select{ max-width:110px }

  .editor-body{ position:relative }
  .palette, .props{
    position:absolute; top:0; bottom:0; z-index:30;
    width:82vw; max-width:320px;
    transition:transform .22s ease;
    box-shadow:0 0 24px rgba(0,0,0,.55);
  }
  .palette{ left:0; transform:translateX(-100%); border-right:1px solid var(--border) }
  .props{ right:0; transform:translateX(100%); border-left:1px solid var(--border) }
  .palette.mobile-open{ transform:translateX(0) }
  .props.mobile-open{ transform:translateX(0) }

  /* FAB toggles */
  .mobile-fab-group{
    position:fixed; bottom:14px; right:14px; z-index:40;
    display:flex; gap:8px;
  }
  .mobile-fab{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border); background:var(--panel-2); color:var(--fg);
    box-shadow:0 4px 14px rgba(0,0,0,.5); cursor:pointer; font-size:18px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .mobile-fab.active{ background:var(--primary); color:#08131a; border-color:var(--primary) }
  .mobile-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:25; display:none;
  }
  .mobile-backdrop.on{ display:block }

  .hud{ font-size:10px; padding:4px 8px; gap:8px }
  .sim-hud{ max-width:calc(100vw - 24px); font-size:11px }
  .page-tabs{ padding:2px 4px }
  .page-tab{ padding:3px 8px; font-size:11px }
}

/* Ocultar los FABs por defecto (solo aparecen en móvil vía CSS arriba) */
.mobile-fab-group{ display:none }
@media (max-width:720px){ .mobile-fab-group{ display:flex } }

/* Panel flotante de zoom */
.zoom-panel{position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:4px;
  background:rgba(15,23,42,.92);border:1px solid #334155;border-radius:8px;padding:4px 6px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:20;color:#e2e8f0;font-size:12px}
.zoom-panel .zbtn{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;background:transparent;border:1px solid transparent;border-radius:6px;
  color:#e2e8f0;cursor:pointer;padding:0}
.zoom-panel .zbtn:hover{background:#1e293b;border-color:#475569}
.zoom-panel .zbtn.active{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.zoom-panel .zsep{width:1px;height:20px;background:#334155;margin:0 2px}
.zoom-panel .zlabel{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;
  padding:0 6px;color:#94a3b8;font-weight:600}
.lupa-rect{position:absolute;border:1.5px dashed #22d3ee;background:rgba(34,211,238,.12);
  pointer-events:none;z-index:19}