:root{
  --bg:#0b1220;
  --card:#0f1724;
  --accent:#60a5fa;
  --muted:#9aa6b2;
  --radius:12px;
  --maxW:1000px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{
  background:linear-gradient(180deg,var(--bg), #1b2a41);
  color:#e6eef8;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Container */
.app {
  width:100%;
  max-width:var(--maxW);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Header */
.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.title {
  margin:0;
  font-size:1.15rem;
  color:var(--accent);
}

/* Panels */
.panel-row {
  display:flex;
  gap:18px;
}

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding:12px;
  flex:1;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  min-height: 280px;
}

/* Editor textarea */
#editor {
  width:100%;
  height:100%;
  min-height:220px;
  resize:vertical;
  background:transparent;
  color:#e6eef8;
  border:none;
  outline:none;
  font-family: 'Courier New', monospace;
  font-size:0.95rem;
  line-height:1.5;
}

/* Preview area */
#preview {
  width:100%;
  height:100%;
  min-height:220px;
  overflow:auto;
  color:#e6eef8;
}

/* Styling rendered markdown */
#preview h1{font-size:1.4rem; margin:6px 0}
#preview h2{font-size:1rem; margin:6px 0; color:var(--accent)}
#preview p{margin:8px 0; color:#dbeafe}
#preview a{color:var(--accent); text-decoration:underline}
#preview code{background:#071024; padding:2px 6px; border-radius:6px; color:#93c5fd}
#preview pre{background:#071024; padding:10px; border-radius:8px; overflow:auto}
#preview ul{padding-left:20px}
#preview blockquote{border-left:4px solid var(--accent); padding-left:12px; color:var(--muted); margin:8px 0}
#preview img{max-width:100%; border-radius:8px; display:block; margin:8px 0}

/* Controls row */
.controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.btn{
  background:var(--accent);
  color:#04203a;
  padding:8px 12px;
  border-radius:8px;
  border:none;
  font-weight:700;
  cursor:pointer;
}

/* Responsive */
@media (max-width:900px){
  .panel-row{
    flex-direction:column;
  }
  .panel{min-height:200px}
  #editor, #preview{min-height:180px}
}