:root{
  --bg:#0b0d10; --panel:#11151a; --sidebar:#0e1217;
  --text:#e2e8f0; --muted:#8b97a9; --accent:#38bdf8; --border:#1f2937;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif}

/* Header */
.toolbar{display:flex;align-items:center;justify-content:flex-start;gap:1rem;padding:.8rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}
.brand{font-weight:700;color:var(--accent)}
.toolbar-actions{display:flex;gap:.6rem;align-items:center;margin-left:1rem}
.dropdown{position:relative}
.btn{border:1px solid var(--border);background:#0f172a;color:var(--text);padding:.5rem .75rem;border-radius:.6rem;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
/* Dropdown overflow fix */
.dropdown .menu{position:absolute;top:110%;left:0;right:auto;background:#111827;border:1px solid var(--border);border-radius:.6rem;display:none;min-width:220px;max-width:90vw;overflow-x:auto;z-index:100}
.dropdown:hover .menu{display:block}
.menu .menu-item{display:block;padding:.55rem .7rem;background:transparent;color:var(--text);text-align:left;border:0;cursor:pointer}
.menu .menu-item:hover{background:#1f2937;color:var(--accent)}

/* Layout */
.layout{display:grid;grid-template-columns:260px 300px 1fr;height:calc(100vh - 56px);transition:grid-template-columns .3s ease}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar .head{padding:.8rem;border-bottom:1px solid var(--border)}
.toggle{border:1px solid var(--border);background:#0f172a;color:var(--text);padding:.45rem .7rem;border-radius:.6rem;cursor:pointer}
.menu-vertical{padding:.75rem;display:flex;flex-direction:column;gap:.5rem;overflow:auto;flex:1}
.linkbtn{border:1px solid var(--border);background:#0f172a;color:var(--text);padding:.6rem .9rem;border-radius:.7rem;text-decoration:none}
.linkbtn:hover{border-color:#334155;background:#12254a}
.status{color:var(--muted);font-size:.85em;margin-top:auto;padding:.5rem}
.adbox{background:#111827;border:1px solid var(--border);border-radius:12px;padding:.55rem;text-align:center;margin-top:1rem}
.adbox small{display:block;color:var(--muted);font-size:.8em;margin-bottom:.35rem}

/* Explorer */
.explorer{background:#0e1217;border-right:1px solid var(--border);overflow:auto}
.explorer-header{padding:.6rem .8rem;border-bottom:1px solid var(--border);color:var(--muted)}
.tree{padding:.6rem .8rem}
.tree ul{list-style:none;margin-left:.8rem}
.tree li{margin:.15rem 0;cursor:pointer;color:var(--text)}
.tree li:hover{color:var(--accent)}
.tree .folder::before{content:"📁 "}
.tree .file::before{content:"📄 "}

/* Main area */
.main{display:flex;flex-direction:column;overflow:hidden}
.content{display:grid;grid-template-columns:1fr 6px 1fr;height:100%;overflow:hidden;transition:grid-template-columns .3s ease}
.panel{display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
.panel-header{padding:.6rem .8rem;border-bottom:1px solid var(--border);color:var(--muted);font-size:.9rem}
.panel-body{flex:1;overflow:hidden}
#editor{width:100%;height:100%}
iframe.preview{width:100%;height:100%;border:0;background:#fff}
.divider{width:6px;cursor:col-resize;background:var(--border)}
.divider:hover{background:var(--accent)}

/* Drag & drop glow */
.drop-glow{outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 0 0 4px rgba(56,189,248,.35) inset}

/* Responsive */
@media (max-width: 900px){
  .toolbar-actions{flex-wrap:wrap}
  .dropdown .menu{left:auto;right:0;max-width:85vw}
  .layout{grid-template-columns:72px 1fr;grid-template-rows:260px 1fr}
  .explorer{grid-column:1/-1;grid-row:1/2}
  .main{grid-column:1/-1;grid-row:2/3}
  .divider{display:none}
  iframe.preview{height:50vh}
}

/* Toasts */
.toast-root{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:.4rem;z-index:9999}
.toast{background:#111827;border:1px solid var(--border);color:var(--text);padding:.6rem .8rem;border-radius:.6rem;min-width:220px}
.toast.success{border-color:#10b981}
.toast.error{border-color:#ef4444}