:root{ --bg:#0f172a; --panel:#111827ee; --panel-2:#0b1229ee; --text:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; --accent-2:#60a5fa; --danger:#ef4444; --border:#1f2937; --input:#0b1022; }
*{box-sizing:border-box}
html,body{height:100%; overflow-x: hidden;}

body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(1200px 800px at 20% -10%, #1e293b 0%, transparent 60%),
              radial-gradient(1000px 700px at 120% 10%, #0b1325 0%, transparent 60%), var(--bg);
  color:var(--text);
}
header{display:flex; gap:.75rem; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg, #111827ee, #0b1229ee); position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);}
.brand{display:flex; align-items:center; gap:.6rem}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 2px #0008}
.brand h1{font-size:1rem; margin:0; letter-spacing:.2px}
.controls{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
input[type="text"], .btn{height:36px; border-radius:10px; border:1px solid var(--border)}
input[type="text"]{background:var(--input); color:var(--text); padding:0 .8rem; min-width:220px}
.btn{background:#0f172a; color:var(--text); padding:0 .9rem; cursor:pointer}
.btn:hover{border-color:#2a3950}
.btn.primary{background:linear-gradient(180deg, #1b2b45, #0d1a30); border-color:#2a3950}
.btn.accent{background:linear-gradient(180deg, #1f5a2f, #0f3a1a); border-color:#23512a}
.btn.danger{background:linear-gradient(180deg, #3a1212, #2a0b0b); border-color:#4a1a1a}
.kbd{font:600 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background:#121826; color:#cbd5e1; border:1px solid #243041; border-radius:6px; padding:.15rem .35rem}
label.switch{display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .6rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem}


main {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 6px minmax(280px, 1fr);
  column-gap: 0;      /* kein horizontales Gap mehr */
  row-gap: 10px;      /* nur noch vertikaler Abstand */
  height: calc(100% - 60px);
}


@media (max-width: 900px){ main{grid-template-columns:1fr; grid-auto-rows:minmax(300px, auto)} #divider{display:none} }

.panel{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, var(--panel), var(--panel-2)); min-height:0}
.panel h2{font-size:.9rem; margin:0; padding:.6rem .8rem; border-bottom:1px solid var(--border); color:#cbd5e1; display:flex; align-items:center; justify-content:space-between}
.editor-wrap{display:grid; grid-template-columns:1fr; gap:10px; padding:10px; height:calc(100% - 42px)}
@media (max-width: 900px){ .editor-wrap{grid-template-columns:1fr; grid-auto-rows:minmax(200px, auto)} }

.editor{display:flex; flex-direction:column; min-height:0}
.editor label{font-size:.8rem; color:var(--muted); margin-bottom:.4rem}
.monaco{border-radius:12px; border:1px solid var(--border); overflow:hidden; min-height:200px; background:#0b1022; flex:1;}
.hint{font-size:.8rem; color:var(--muted); padding:.4rem .8rem}

.preview{display:flex; flex-direction:column; height:100%}
.preview .bar{display:flex; gap:.5rem; padding:.6rem .8rem; align-items:center; border-bottom:1px solid var(--border)}
.preview iframe{flex:1; width:100%; border:0; background:#fff; border-radius:0}

.divider{width:6px; cursor:col-resize; background:linear-gradient(180deg,#0b1229,#111827); border:1px solid var(--border); border-left:none; border-right:none; border-radius:8px;}
.divider:focus{outline:2px solid var(--accent-2)}

.note{font-size:.8rem; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:.4rem; padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:#cbd5e1}

/* Dynamische Hoehenaufteilung der Editoren */
.panel { display:flex; flex-direction:column; }
.editor-wrap { flex:1; display:flex; flex-direction:column; gap:10px; height:auto; }
.editor { flex:1; min-height:0; display:flex; flex-direction:column; }
.monaco { flex:1; min-height:160px; }

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-overlay.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

.modal {
  position: relative;
  width: min(900px, 96vw);
  max-height: 80vh;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: 14px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal .dlg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal .dlg-body {
  padding: .8rem 1rem;
  overflow: auto;
}

.modal .dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
}

.projects-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.projects-list th,
.projects-list td {
  border-bottom: 1px solid var(--border);
  padding: .5rem .4rem;
  text-align: left;
}

.projects-list tbody tr:hover {
  background: #0f1526;
}


#sessionDisplay {
  font-size: 0.8rem;
}

@media (max-width: 900px){
  .editor { min-height:220px; }
}