:root{
  --bg:#0b1220;
  --card:#0f1b2e;
  --bd:rgba(255,255,255,.10);
  --tx:rgba(255,255,255,.92);
  --mut:rgba(255,255,255,.62);
  --pri:#0031a7;
  --acc:#ff7a00;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:linear-gradient(180deg,#070b14,#0b1220);color:var(--tx)}
.top{position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bd);background:rgba(11,18,32,.86);backdrop-filter: blur(10px)}
.brand{display:flex;gap:10px;align-items:center}
.dot{width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(255,122,0,.18)}
.t1{font-weight:700;letter-spacing:.2px}
.t2{font-size:12px;color:var(--mut)}
.actions{display:flex;gap:8px;align-items:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.card{border:1px solid var(--bd);background:rgba(15,27,46,.8);border-radius:14px;padding:12px;min-height:calc(100vh - 120px)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
label{font-size:12px;color:var(--mut)}
select,input,button,textarea{border:1px solid var(--bd);background:rgba(0,0,0,.18);color:var(--tx);border-radius:10px;padding:10px}
textarea#editor{width:100%;height:calc(100vh - 240px);resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.5;outline:none}
button{cursor:pointer}
button.pri{background:linear-gradient(90deg,var(--pri),#001b60);border-color:rgba(0,49,167,.8)}
button:hover{filter:brightness(1.08)}
.status{font-size:12px;color:var(--mut);justify-self:end}
.out{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.18);border:1px solid var(--bd);border-radius:12px;padding:12px;height:calc(100vh - 320px);overflow:auto;font-family:var(--mono);font-size:12px}
.hint{margin-top:10px;color:var(--mut);font-size:12px}
.foot{padding:10px 14px;border-top:1px solid var(--bd);color:var(--mut);display:flex;gap:10px;align-items:center}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{text-decoration:underline}
.sep{opacity:.5}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .card{min-height:auto}
  textarea#editor{height:46vh}
  .out{height:46vh}
}