:root{
  --paper:#F4F6F3;
  --card:#FFFFFF;
  --sunk:#EDF0EC;
  --ink:#14181C;
  --muted:#5E6A6B;
  --line:#DCE2DD;
  --line-firm:#C4CDC6;
  --marine:#0F4C81;
  --marine-ink:#0B3A63;
  --ok:#1B6E4B;
  --alert:#A32B1E;
  --alert-soft:#F7E7E4;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --display:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:15px;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--marine);outline-offset:2px;border-radius:6px;}
[hidden]{display:none !important;}

header{
  display:flex;align-items:center;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--line);
  background:var(--card);
}
.brand{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:17px;letter-spacing:-.02em;margin-right:auto;
}
.status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  background:var(--sunk);border:1px solid var(--line-firm);
  border-radius:999px;padding:5px 12px;
  max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto;}
.status[data-state="connected"]{color:var(--ok);border-color:var(--ok);}
.status[data-state="connected"] .dot{background:var(--ok);}
.status[data-state="offline"]{color:var(--alert);border-color:var(--alert);}
.status[data-state="offline"] .dot{background:var(--alert);}
.status[data-state="checking"]{color:var(--muted);}
.ghost{
  background:none;border:1px solid var(--line-firm);border-radius:7px;
  padding:5px 12px;font-size:13px;color:var(--muted);cursor:pointer;
}
.ghost:hover{color:var(--ink);border-color:var(--ink);}

main{max-width:560px;margin:0 auto;padding:44px 22px 80px;}

section{display:flex;flex-direction:column;gap:14px;}

.input{
  width:100%;background:var(--card);border:1px solid var(--line-firm);
  border-radius:9px;padding:15px 16px;font-family:var(--mono);font-size:15px;
}
.input::placeholder{color:var(--muted);opacity:.7;}
.input:focus{outline:none;border-color:var(--marine);}

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

.btn{
  border:1px solid var(--line-firm);background:var(--card);
  border-radius:9px;padding:14px 18px;font-weight:600;font-size:15px;
  cursor:pointer;transition:background .12s,border-color .12s;
}
.btn:hover{border-color:var(--ink);}
.btn.primary{background:var(--marine);border-color:var(--marine);color:#fff;}
.btn.primary:hover{background:var(--marine-ink);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.wide{width:100%;}

textarea{
  width:100%;min-height:150px;resize:vertical;
  background:var(--card);border:1px solid var(--line-firm);border-radius:9px;
  padding:15px 16px;font-family:var(--mono);font-size:14px;line-height:1.6;
}
textarea::placeholder{color:var(--muted);opacity:.7;}
textarea:focus{outline:none;border-color:var(--marine);}

hr{border:none;border-top:1px solid var(--line);margin:10px 0;}

.out{
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line-firm);
  border-left:3px solid var(--marine);border-radius:9px;padding:16px;
}
.out pre{
  margin:0;font-family:var(--mono);font-size:14px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;
}
.out .btn{align-self:flex-start;padding:8px 16px;font-size:13px;}

.error{
  margin:0 0 18px;padding:13px 15px;border-radius:9px;
  background:var(--alert-soft);border:1px solid var(--alert);
  color:var(--alert);font-size:14px;
}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:#fff;border-radius:999px;padding:10px 20px;
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion:reduce){*{transition:none !important;}}