:root{--bg:#0f1115;--card:#171923;--text:#e8eaf0;--muted:#9aa3b2;--accent:#8ab4f8;--border:#2a2f3a;--topbar-h:56px;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem 0}
h1{font-size:1.6rem}h2{font-size:1.2rem}h3{font-size:1.05rem}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* Header uses CSS Grid so the middle cell stays centered */
.topbar{
  display:grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:#0b0d12;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  min-height:var(--topbar-h);
}
.topbar .brand{justify-self:start}
.topbar .brand a{color:#fff;font-weight:700}
.topbar .tooltitle{
  justify-self:center;
  margin:0;
  font-weight:600;
  color:#cdd6e3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: min(70vw, 1000px);
  text-align:center;
}
.nav{justify-self:end; display:flex; gap:12px}
.nav a{}

.container{max-width:1100px;margin:20px auto;padding:0 16px}
.container.wide{max-width:100vw;padding:0;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.group{margin:16px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.card.narrow{max-width:420px;margin:40px auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border)}
.table th.right,.table td.right{text-align:right}
.tool-list{list-style:none;padding:0;margin:0}
.tool-list li{padding:6px 0;border-bottom:1px dashed var(--border)}
.tool-list li:last-child{border-bottom:0}
.flashwrap{margin:12px 0}
.flash{padding:10px 12px;border-radius:8px;margin-bottom:8px;background:#18202b;border:1px solid var(--border)}
.flash.error{background:#2b1818}
.form label{display:block;margin:8px 0}
.form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.form input[type=text],.form input[type=password],.form input[type=email],.form input[type=url],.form select,.form textarea{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:#0c0f15;color:var(--text)}
.form textarea{resize:vertical}
.button,button{display:inline-block;background:#1f6feb;border:0;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.button:hover,button:hover{filter:brightness(1.05)}
button.danger{background:#c34747}
.inline{display:inline}
.actions{margin-top:10px;display:flex;gap:8px;align-items:center}
.scroll{max-height:240px;overflow:auto;padding:8px;border:1px dashed var(--border);border-radius:8px;background:#10141d}
.iframe-wrap{height:75vh;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.iframe-wrap.full{height:calc(100vh - var(--topbar-h));border:0;border-radius:0}
.iframe-wrap iframe{width:100%;height:100%;border:0;background:#fff}

/* Tool view: fill all space after header, full-width, no page scroll */
body.tool-view{overflow:hidden}
body.tool-view .container.wide{height:calc(100vh - var(--topbar-h));width:100vw;margin:0;padding:0;max-width:none;overflow:hidden}
body.tool-view .iframe-wrap{height:100%;width:100%;border:0;border-radius:0}
body.tool-view .iframe-wrap iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:900px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}