:root{
  --bg:#0a0f1a; --panel:#111827; --panel2:#1a2234; --line:#243049;
  --fg:#e6edf7; --muted:#8b98ad; --acc:#38bdf8; --acc2:#ff79c6;
  --ok:#4ade80; --warn:#facc15; --bad:#f87171;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px; line-height:1.55; min-height:100vh;
}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;
  padding:12px 18px;background:rgba(10,15,26,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  flex-wrap:wrap;}
.brand{font-size:19px;letter-spacing:.5px;white-space:nowrap}
.logo{color:var(--acc2);font-weight:900}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:5px 11px;
  border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}
nav button.on{color:var(--acc);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.container{max-width:760px;margin:24px auto;padding:0 16px 60px}
.tool{display:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.tool.active{display:block}
h2{font-size:20px;margin-bottom:6px;color:var(--acc)}
p{color:var(--muted);margin-bottom:16px;font-size:13px}
input[type=text],input[type=password],input[type=number],textarea{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);padding:11px 13px;margin:6px 0;font-family:inherit;font-size:14px}
textarea{resize:vertical;min-height:110px}
button{background:var(--acc);color:#04121f;border:none;border-radius:10px;padding:11px 18px;
  font-family:inherit;font-weight:700;cursor:pointer;font-size:14px;margin:6px 6px 6px 0}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 12px;font-weight:400}
button:hover:not(.ghost){filter:brightness(1.1)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.row label{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.row label input[type=checkbox],input[type=radio]{width:auto}
.row input[type=text]{flex:1;min-width:220px;margin:0}
.row button{margin:0}
.out{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px;
  word-break:break-all;font-size:13px;color:var(--fg)}
.meter{width:100%;height:12px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:10px 0 6px}
#meter-bar{height:100%;width:0;background:var(--bad);transition:width .2s,background .2s}
.wait{opacity:.5;pointer-events:none}
.err{color:var(--bad)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv b{color:var(--fg);text-align:right}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700}
.tag.ok{background:rgba(74,222,128,.15);color:var(--ok)}
.tag.warn{background:rgba(250,204,21,.15);color:var(--warn)}
.tag.bad{background:rgba(248,113,113,.15);color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.sec{display:flex;align-items:center;justify-content:space-between;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px}
.sec code{font-size:10px;color:var(--muted);word-break:break-all}
.chip{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:4px 11px;
  font-size:12px;color:var(--acc);cursor:pointer;text-decoration:none}
.chip:hover{background:var(--panel2);border-color:var(--acc)}
a{color:var(--acc)}