:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#2dd4bf;
  --danger:#ff6b6b;
  --glass: rgba(255,255,255,0.02);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#07101a);
  color:#e6eef3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:12px;
}
#app{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* top row */
.row.top{
  display:flex;
  gap:8px;
}
.row.top select, .row.top input, .row.top button{
  height:44px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background:var(--card);
  color:inherit;
  padding:0 10px;
  font-size:14px;
}
#url{flex:1}
#send{
  min-width:72px;
  background:linear-gradient(90deg,var(--accent),#34d399);
  color:#042024;
  border:none;
  font-weight:600;
}

/* tabs */
.tabs{
  display:flex;
  gap:8px;
}
.tab{
  flex:1;
  height:40px;
  border-radius:8px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  font-weight:600;
}
.tab.active{
  background:linear-gradient(90deg,rgba(45,212,191,0.12),rgba(52,211,153,0.08));
  color:var(--accent);
  border-color:rgba(45,212,191,0.18);
}

/* panels area takes remaining space */
#panels{
  flex:1;
  display:block;
}
.panel{
  height:calc(100% - 12px);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-radius:10px;
  padding:10px;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.03);
}

/* headers list */
#headers-list{display:flex;flex-direction:column;gap:8px}
.header-row{
  display:flex;
  gap:8px;
}
.header-row input{
  height:40px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  padding:0 8px;
  background:transparent;
  color:inherit;
  flex:1;
}
.header-row .del{
  width:40px;
  background:transparent;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--danger);
}

/* body */
#body-type{height:38px;border-radius:8px;padding:0 8px;margin-bottom:8px}
#body-text{
  width:100%;
  height:calc(100% - 56px);
  min-height:120px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;
  color:inherit;
  padding:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:none;
}

/* response */
.resp-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
#status{font-weight:700;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.02)}
#time{color:var(--muted);font-size:13px}
.resp-actions button{
  margin-left:6px;
  height:36px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;
  color:var(--muted);
}
.response-pre{
  background:rgba(0,0,0,0.35);
  padding:10px;
  border-radius:8px;
  max-height:55%;
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
}

/* history */
#history-list{display:flex;flex-direction:column;gap:8px}
.hist-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
}
.hist-item button{height:36px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted)}

.h-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
@media (min-width:720px){
  #panels{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr}
}