body {
  margin:0;
  font-family:Arial, sans-serif;
  background:var(--bg, #000);
  color:var(--fg, #fff);
}

/* Login screen */
.login-screen {
  position:fixed; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  background:#111; color:white;
  z-index:9999;
}
.login-box {
  background:#222; padding:2rem; border-radius:10px;
  text-align:center; box-shadow:0 0 20px rgba(0,255,100,0.5);
}
.login-box input {
  width:80%; padding:0.6rem; margin:0.5rem 0;
  border-radius:6px; border:1px solid #444; background:#111; color:white;
}

.btn {
  cursor:pointer; padding:0.6rem 1rem;
  border-radius:8px; border:none;
  background:var(--accent, #4CAF50);
  color:#fff; margin:0.3rem;
}

.hidden { display:none !important; }

/* Layout */
.header {
  padding:1rem;
  background:#222;
  display:flex; align-items:center; gap:1rem;
}
.container {
  display:flex; flex-direction:row; height:calc(100vh - 100px);
}
.editor-layout {
  background:#111;
}
.file-explorer {
  width:200px; background:#1c1c1c; padding:1rem; color:#fff;
}
#codeEditor {
  width:100%; height:200px; padding:1rem;
  background:#222; color:#fff; border:none; font-family:monospace;
}
#previewFrame {
  width:100%; height:50vh; border:1px solid #444; margin-top:0.5rem;
}
#mediaOverlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:-1;
}

/* Theme Creator */
.theme-creator {
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  background:#222; padding:2rem; border-radius:10px;
  z-index:5000; color:#fff;
}