/* ===== STATICFORGE v1.0 — style.css ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1117;--bg2:#1a1d2e;--bg3:#252840;--bg4:#2e3250;
  --accent:#6c63ff;--accent2:#00d4ff;
  --text:#e8eaf0;--text2:#9ba3c4;--text3:#5a6282;
  --border:#2e3250;--border2:#404680;
  --success:#00c87a;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tc1:#1a1a2e;--tc2:#6c63ff;--tc3:#00d4ff;--tc4:#ffffff;
  --tc5:#f8f8fc;--tc6:#333333;--tc7:#e0e0e8;--tc8:#ff6b6b;
  --tf:'Georgia',serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:13px}

/* TOPBAR */
#topbar{height:44px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0}
#logo{padding:0 14px;font-size:12px;color:var(--accent2);letter-spacing:2px;border-right:1px solid var(--border);font-family:monospace;white-space:nowrap}
.tb-btn{height:100%;padding:0 11px;border:none;background:transparent;color:var(--text2);cursor:pointer;font-size:12px;font-family:var(--font);display:flex;align-items:center;gap:5px;transition:all .15s;border-right:1px solid var(--border);white-space:nowrap}
.tb-btn:hover{background:var(--bg3);color:var(--text)}
.tb-btn.active{color:var(--accent2);background:var(--bg3)}
.tb-badge{font-size:9px;background:var(--accent);color:#fff;padding:1px 5px;border-radius:8px;margin-left:3px}
#tb-right{margin-left:auto;display:flex;align-items:center;height:100%;border-left:1px solid var(--border)}

/* MAIN LAYOUT */
#main{flex:1;display:flex;overflow:hidden}

/* LEFT PANEL */
#panel-left{width:196px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.panel-tabs{display:flex;border-bottom:1px solid var(--border)}
.ptab{flex:1;padding:7px 0;text-align:center;font-size:10px;color:var(--text3);cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .15s}
.ptab.active{color:var(--accent2);border-bottom:2px solid var(--accent2)}
.panel-body{flex:1;overflow-y:auto;padding:6px}
.comp-group{margin-bottom:10px}
.cg-label{font-size:9px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;padding:4px 3px 5px}
.comp-item{padding:7px 8px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);margin-bottom:3px;cursor:grab;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:7px;transition:all .13s;user-select:none}
.comp-item:hover{border-color:var(--accent);color:var(--text);background:var(--bg4)}
.comp-item:active{cursor:grabbing;transform:scale(.97)}
.ci-icon{width:18px;text-align:center;font-size:11px;flex-shrink:0;color:var(--text3)}

/* CANVAS AREA */
#canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
#canvas-toolbar{height:36px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px;padding:0 10px;flex-shrink:0}
.ct-btn{height:26px;padding:0 9px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11px;transition:all .13s}
.ct-btn:hover{border-color:var(--accent);color:var(--text)}
#canvas-wrap{flex:1;overflow-y:auto;overflow-x:auto;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,255,255,.02) 19px,rgba(255,255,255,.02) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.02) 19px,rgba(255,255,255,.02) 20px);display:flex;justify-content:center;align-items:flex-start;padding:20px}
#canvas{width:860px;min-height:500px;height:auto;background:#fff;border-radius:3px;box-shadow:0 4px 60px rgba(0,0,0,.7);position:relative;transition:width .3s;align-self:flex-start}
#canvas.drag-over{outline:2px dashed var(--accent2)}
#drop-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:14px;pointer-events:none}
#preview-frame{display:none;flex:1;border:none;width:100%;height:100%}

/* PAGE BLOCKS */
.page-block{position:relative;border:1px solid transparent;cursor:pointer;transition:border-color .13s}
.page-block:hover{border-color:rgba(108,99,255,.3)}
.page-block.selected{border-color:var(--accent)!important}
.block-handle{position:absolute;top:-1px;left:-1px;right:-1px;height:22px;background:var(--accent);display:none;align-items:center;justify-content:space-between;padding:0 6px;z-index:20}
.page-block.selected .block-handle{display:flex}
.bh-label{font-size:9px;color:#fff;font-family:monospace;letter-spacing:1px}
.bh-btns{display:flex;gap:3px}
.hbtn{width:16px;height:16px;border-radius:2px;border:none;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;font-size:9px;display:flex;align-items:center;justify-content:center}
.hbtn:hover{background:rgba(255,255,255,.4)}
.hbtn.del{color:#ffaaaa}

/* RIGHT PANEL */
#panel-right{width:252px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.rpanel-tabs{display:flex;border-bottom:1px solid var(--border)}
.rptab{flex:1;padding:7px 0;text-align:center;font-size:10px;color:var(--text3);cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all .15s}
.rptab.active{color:var(--accent2);border-bottom:2px solid var(--accent2)}
#right-body{flex:1;overflow-y:auto;padding:10px}
.rg{margin-bottom:12px}
.rg-label{font-size:9px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;display:block}
.ri{width:100%;padding:5px 7px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:11px;outline:none}
.ri:focus{border-color:var(--accent)}
textarea.ri{resize:vertical}
.rprop-row{display:flex;gap:5px;align-items:center}
.color-pick{width:28px;height:26px;border-radius:3px;border:1px solid var(--border);cursor:pointer;padding:1px;flex-shrink:0}
.rselect{flex:1;padding:5px 6px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:11px}
.sep{height:1px;background:var(--border);margin:10px 0}

/* CSS PROPERTY GRID */
.css-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px}
.css-cell{display:flex;flex-direction:column;gap:3px}
.css-cell label{font-size:9px;color:var(--text3);letter-spacing:.5px}
.css-cell input,.css-cell select{width:100%;padding:4px 6px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--text);font-size:11px;outline:none}
.css-cell input:focus,.css-cell select:focus{border-color:var(--accent)}
.css-full{grid-column:1/-1}
.toggle-row{display:flex;gap:4px;flex-wrap:wrap}
.tog-btn{padding:4px 8px;border-radius:3px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:10px;transition:all .13s}
.tog-btn:hover{border-color:var(--accent)}
.tog-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* LAYERS */
.layer-item{padding:6px 7px;border-radius:4px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--text2);margin-bottom:2px}
.layer-item:hover{background:var(--bg3)}
.layer-item.sel{background:var(--bg3);color:var(--text);border-left:2px solid var(--accent);padding-left:5px}
.ldot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.no-sel{font-size:11px;color:var(--text3);text-align:center;margin-top:20px;line-height:1.7}
.rpbtn{width:100%;padding:7px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11px;margin-bottom:3px;transition:all .13s;text-align:left}
.rpbtn:hover{border-color:var(--accent);color:var(--text)}
.rpbtn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;text-align:center}

/* THEME PANEL */
.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.tc-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.tc-swatch{width:34px;height:34px;border-radius:5px;border:1px solid var(--border2);cursor:pointer;position:relative}
.tc-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.tc-num{font-size:9px;color:var(--text3);font-family:monospace}
.font-btn{width:100%;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11px;margin-bottom:3px;text-align:left;transition:all .13s}
.font-btn:hover{border-color:var(--accent);color:var(--text)}
.font-btn.active{border-color:var(--accent2);color:var(--accent2);background:var(--bg4)}
.theme-preset{padding:7px 9px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11px;margin-bottom:3px;display:flex;align-items:center;gap:8px;transition:all .13s}
.theme-preset:hover{border-color:var(--accent);color:var(--text)}
.preset-dots{display:flex;gap:3px}
.pd{width:11px;height:11px;border-radius:2px}

/* EFFECT BAR */
#effect-bar{height:0;background:var(--bg2);border-top:1px solid var(--border);overflow:hidden;transition:height .3s;position:relative;flex-shrink:0}
#effect-bar.open{height:120px}
#effect-canvas{width:100%;height:100%}
#eff-ctrls{position:absolute;top:6px;right:8px;display:flex;gap:4px;z-index:10}
.eff-btn{height:22px;padding:0 8px;border-radius:3px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:10px;font-family:monospace;transition:all .13s}
.eff-btn.on{border-color:var(--accent2);color:var(--accent2)}
#eff-label{position:absolute;top:7px;left:10px;font-size:9px;color:var(--text3);font-family:monospace;letter-spacing:2px}

/* SCROLLLINE */
#scrollline-bar{height:0;overflow:hidden;transition:height .2s;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;position:relative}
#scrollline-bar.open{height:32px}
#scrollline-wrap{overflow:hidden;flex:1;height:100%;position:relative}
#scrollline-inner{display:flex;white-space:nowrap;position:absolute;top:50%;transform:translateY(-50%);font-family:monospace;font-size:12px;letter-spacing:1px;will-change:transform}
#sl-edit{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:5;display:flex;gap:5px;align-items:center}
#sl-input{background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--text);font-size:10px;padding:2px 6px;width:200px;font-family:monospace;outline:none}

/* STATUSBAR */
#statusbar{height:22px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:14px;flex-shrink:0}
#statusbar span{font-size:10px;color:var(--text3);font-family:monospace}
#smsg{color:var(--success)!important}

/* MODAL */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center}
#modal.open{display:flex}
#mbox{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:20px;width:480px;max-height:80vh;overflow-y:auto}
#mbox h2{font-size:14px;margin-bottom:14px}
.mclose{float:right;background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px}
.ff{margin-bottom:10px}
.ff label{display:block;font-size:10px;color:var(--text3);margin-bottom:3px;text-transform:uppercase;letter-spacing:1px}
.ff input{width:100%;padding:7px 9px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:12px;outline:none}
.ff input:focus{border-color:var(--accent)}
.mbrow{display:flex;gap:8px;margin-top:14px}
.mbtn2{flex:1;padding:8px;border-radius:5px;border:none;cursor:pointer;font-size:12px;font-weight:600}
.mbtn2.s{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.mbtn2.p{background:var(--accent);color:#fff}
#exp-code{width:100%;height:180px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--accent2);font-family:monospace;font-size:10px;padding:8px;resize:none;margin-top:8px}