*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ROOT COLORS */

:root{

  --bg:#0b1120;

  --card:#111827;

  --editor:#0f172a;

  --text:#e2e8f0;

  --secondaryText:#94a3b8;

  --blue:#3b82f6;

  --blueHover:#2563eb;

  --border:#1e293b;

  --shadow:
  0 10px 30px rgba(0,0,0,0.35);

}

/* LIGHT THEME */

body.light{

  --bg:#f1f5f9;

  --card:#ffffff;

  --editor:#e2e8f0;

  --text:#0f172a;

  --secondaryText:#475569;

  --blue:#2563eb;

  --blueHover:#1d4ed8;

  --border:#cbd5e1;

  --shadow:
  0 10px 25px rgba(0,0,0,0.08);

}

/* BODY */

body{

  height:100vh;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #020617,
    var(--bg)
  );

  color:var(--text);

  font-family:
  "Segoe UI",
  sans-serif;

  transition:0.3s;

}

/* HEADER */

header{

  height:70px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:0 24px;

  background:
  rgba(17,24,39,0.8);

  backdrop-filter:blur(10px);

  border-bottom:
  1px solid var(--border);

}

/* LOGO */

header h1{

  font-size:24px;

  font-weight:700;

  letter-spacing:1px;

  background:
  linear-gradient(
    to right,
    #60a5fa,
    #3b82f6
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}

/* BUTTON GROUP */

.header-buttons{

  display:flex;

  gap:12px;

}

/* BUTTONS */

button{

  padding:10px 18px;

  border:none;

  border-radius:12px;

  background:var(--blue);

  color:white;

  cursor:pointer;

  font-weight:600;

  transition:0.25s;

  box-shadow:
  0 4px 15px
  rgba(59,130,246,0.25);

}

button:hover{

  background:var(--blueHover);

  transform:
  translateY(-2px)
  scale(1.02);

}

/* THEME BUTTON */

#themeBtn{

  width:50px;

  height:50px;

  border-radius:50%;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:20px;

  padding:0;

}

#themeBtn:hover{

  transform:
  rotate(20deg)
  scale(1.08);

}

/* MAIN CONTAINER */

.container{

  display:flex;

  height:calc(100vh - 70px);

}

/* EDITOR SECTION */

.editor-section{

  width:50%;

  padding:12px;

  display:flex;

  flex-direction:column;

  gap:12px;

}

/* TABS */

.tabs{

  display:flex;

  gap:10px;

}

.tab{

  background:#1e293b;

}

.tab.active{

  background:var(--blue);

  color:white;

}

/* EDITOR CARD */

.editor-box{

  flex:1;

  background:var(--card);

  border-radius:18px;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  border:
  1px solid var(--border);

  box-shadow:var(--shadow);

  transition:0.3s;

}

/* ACTIVE EDITOR GLOW */

.editor-box:focus-within{

  border-color:#3b82f6;

  box-shadow:
  0 0 0 1px #3b82f6,
  0 0 20px rgba(59,130,246,0.15);

}

/* EDITOR TITLE */

.editor-title{

  padding:12px 15px;

  background:
  rgba(255,255,255,0.03);

  border-bottom:
  1px solid var(--border);

  font-weight:600;

  color:var(--secondaryText);

  letter-spacing:1px;

}

/* TEXTAREA */

textarea{

  flex:1;

  resize:none;

  border:none;

  outline:none;

  background:var(--editor);

  color:var(--text);

  padding:18px;

  font-size:15px;

  font-family:
  Consolas,
  monospace;

  line-height:1.7;

  caret-color:#3b82f6;

}

/* SCROLLBAR */

textarea::-webkit-scrollbar{

  width:8px;

}

textarea::-webkit-scrollbar-thumb{

  background:#334155;

  border-radius:10px;

}

/* DIVIDER */

.divider{

  width:6px;

  background:
  linear-gradient(
    to bottom,
    #60a5fa,
    #2563eb
  );

  cursor:col-resize;

}

/* OUTPUT SECTION */

.output-section{

  width:50%;

  padding:12px;

}

/* IFRAME */

iframe{

  width:100%;

  height:100%;

  border:none;

  border-radius:18px;

  background:white;

  box-shadow:var(--shadow);

}

/* MOBILE */

@media(max-width:900px){

  .container{

    flex-direction:column;

  }

  .editor-section,
  .output-section{

    width:100%;

    height:50%;

  }

  .divider{

    width:100%;

    height:6px;

    cursor:row-resize;

  }

  header h1{

    font-size:18px;

  }

  button{

    padding:8px 14px;

    font-size:14px;

  }

}