/* Console-only tweaks on top of /ui/shared/base.css */

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
@media(max-width:900px){ .two-col{grid-template-columns:1fr} }

/* connection hero card */
.hero{display:flex; align-items:center; gap:1.1rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem 1.4rem; flex-wrap:wrap}
.hero .glyph{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;flex:none}
.hero .glyph.ok{background:var(--green-d)} .hero .glyph.bad{background:var(--red-d)} .hero .glyph.warn{background:var(--amber-d)}
.hero .meta{flex:1 1 16rem; min-width:0}
.hero .meta b{font-size:1.05rem; display:block; margin-bottom:.15rem}
.hero .meta p{color:var(--mut); font-size:.86rem}
.hero .acts{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* webhook event picker grid */
.wh-events{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.35rem .8rem}
.wh-ev{display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-family:var(--mono); cursor:pointer; padding:.2rem .25rem; border-radius:5px; color:var(--mut)}
.wh-ev:hover{background:var(--panel-2); color:var(--text)}
.wh-ev.rec{color:var(--text)}
.wh-ev input{cursor:pointer}