*{box-sizing:border-box}

body{
margin:0;
font-family:Inter,system-ui;
background:#0f172a;
color:#e2e8f0;
}

.wrap{
max-width:1300px;
margin:auto;
padding:30px;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.brand{
font-size:28px;
font-weight:700;
letter-spacing:-0.5px;
}

.tools button{
margin-left:10px;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.box{
background:#111827;
border-radius:14px;
padding:16px;
box-shadow:0 15px 35px rgba(0,0,0,.4);
display:flex;
flex-direction:column;
}

.boxhead{
font-weight:600;
margin-bottom:10px;
}

textarea{
width:100%;
height:420px;
resize:none;
border:none;
outline:none;
background:#020617;
color:#e2e8f0;
padding:14px;
border-radius:10px;
font-family:"JetBrains Mono",monospace;
font-size:14px;
}

pre{
flex:1;
margin:0;
background:#020617;
padding:14px;
border-radius:10px;
overflow:auto;
font-family:"JetBrains Mono",monospace;
font-size:14px;
}

.tabs{
display:flex;
gap:8px;
margin-bottom:10px;
}

.tabs button{
background:#1f2937;
border:none;
padding:8px 12px;
border-radius:8px;
color:#e2e8f0;
cursor:pointer;
}

.tabs button.active{
background:#6366f1;
}

.actions{
display:flex;
gap:10px;
margin-top:10px;
}

button{
border:none;
padding:10px 14px;
border-radius:8px;
background:#6366f1;
color:white;
cursor:pointer;
font-weight:600;
}

button:hover{
opacity:.9;
}

.status{
margin-top:8px;
font-size:13px;
opacity:.7;
}

.foot{
text-align:center;
margin-top:25px;
opacity:.4;
font-size:14px;
}

.light{
background:#f1f5f9;
color:#0f172a;
}

.light .box{
background:white;
}

.light textarea,
.light pre{
background:#f8fafc;
color:#0f172a;
}