/* ══════════════════════════════════════════════════════════════
 * EDITOR MODE — overrides on top of techpackr.css
 *
 * This file contains styles that ONLY apply to editor mode:
 *   - Editor toolbar buttons (.etb-btn, .etb-ai, .etb-sep, .danger-btn)
 *   - Left tool panel (.tool-btn)
 *   - Right properties panel (.pfg, .prop-btn, .prop-action-btn)
 *   - Editor-only utility (.adv-only)
 *   - Editor-mode visibility rules (body:not(.simple-mode) ...)
 *
 * Loaded AFTER techpackr.css in index.html so source order guarantees
 * these rules win at equal specificity.
 *
 * Touch only this file when working on editor mode. Simple-mode and
 * shared layout styles live in techpackr.css.
 * ══════════════════════════════════════════════════════════════ */

/* ── EDITOR MODE THEME — overrides simple defaults from techpackr.css ── */
body:not(.simple-mode){
  --bg:#0d0d0f;--surface:#161618;--surface2:#1e1e21;--border:#2a2a2e;
  --accent:#6c63ff;--accent2:#00d4aa;--text:#e8e8ed;--text2:#9898a6;--text3:#5a5a6b;
  --danger:#ff4d6d;--warn:#f4a261;
}

.adv-only{display:none!important}
.tool-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;font-size:16px;color:var(--text3);transition:.15s;user-select:none;flex-shrink:0}
.tool-btn:hover{background:var(--surface2);color:var(--text)}
.tool-btn.active{background:var(--accent);color:#fff}
.etb-btn{padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.etb-btn:hover{background:var(--surface2);color:var(--text)}
.etb-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.etb-ai{background:rgba(108,99,255,.1);color:var(--accent);border-color:rgba(108,99,255,.3)}
.etb-ai:hover{background:rgba(108,99,255,.2)!important}
.etb-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 2px}
.danger-btn{color:var(--danger)!important;border-color:rgba(255,77,109,.2)!important}
.danger-btn:hover{background:rgba(255,77,109,.1)!important}
.pfg{margin-bottom:10px}
.pfg label{font-size:10px;color:var(--text3);display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.pfg input[type=text],.pfg input[type=number],.pfg select{padding:5px 8px;font-size:12px}
.pfg input[type=range]{height:3px;margin-top:4px}
.prop-btn{padding:5px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:12px;cursor:pointer;transition:.15s;font-family:inherit}
.prop-btn:hover{background:var(--border);color:var(--text)}
.prop-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prop-btn.danger{color:var(--danger);border-color:rgba(255,77,109,.2)}
.prop-action-btn{width:100%;padding:7px;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);border-radius:8px;color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:.15s;margin-bottom:6px}
.prop-action-btn:hover{background:rgba(108,99,255,.2)}
body:not(.simple-mode) #toolPanel { display:flex !important; }