/* storage connections */
.top{flex-wrap:wrap}
.top-r{align-items:center;min-width:0}
.sw{display:flex;gap:6px;align-items:center;min-width:0}
.sw label{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600;min-width:0}
.sw select{width:auto;max-width:220px;min-width:0;padding:5px 8px;font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:500}
.sw .btn{padding:5px 10px;font-size:12px}
.sw-state{font-size:11.5px;color:var(--mute);white-space:nowrap}
.conns{list-style:none;margin:0;padding:0;display:grid;gap:10px;padding:14px 16px}
.conn{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;border-left:3px solid var(--line2)}
.conn.editing{border-color:var(--accent);background:var(--accent-s)}
.conn.ok{border-left-color:var(--ok)}.conn.bad{border-left-color:var(--bad)}.conn.idle{border-left-color:#e0a21a}
.conn-t{min-width:0;flex:1 1 220px}
.conn-t b{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.conn-t small{display:block;color:var(--mute);overflow-wrap:anywhere}
.conn-a{display:flex;gap:6px;flex-wrap:wrap}
.conn-a form{display:inline}
.badge.cur{background:var(--accent);color:#fff}
.badge.def{background:var(--accent-s);color:var(--accent-d)}
.badge.t-ok{background:var(--ok-s);color:var(--ok)}
.badge.t-bad{background:var(--bad-s);color:var(--bad)}
.badge.t-idle{background:var(--warn-s);color:var(--warn)}
input[readonly]{background:#f1f4f9;color:var(--mute)}
dialog.modal.storage-modal{width:min(700px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0}
.storage-modal[open]{display:flex}
.storage-modal > form{display:flex;flex-direction:column;width:100%;min-height:0;max-height:calc(100dvh - 32px)}
.storage-modal header{flex-shrink:0;align-items:flex-start}
.storage-modal header .hint{margin:4px 0 0;overflow-wrap:anywhere}
.storage-modal-body{padding:18px 20px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.storage-modal footer{flex-shrink:0;background:var(--panel)}
body:has(.storage-modal[open]){overflow:hidden}
@media (max-width:520px){
  .storage-modal-body{grid-template-columns:1fr;padding:16px}
  .storage-modal-body .span2{grid-column:1}
}
@media (max-width:760px){
  .top{gap:8px;padding:8px 12px}
  .top-r{width:100%;margin-left:0;order:3}
  .sw{width:100%;flex-wrap:wrap}
  .sw label{flex:1 1 150px}
  .sw select{flex:1;max-width:none;width:100%}
  .sw-state{width:100%}
  .search{order:2;flex:1 1 100%;max-width:none}
}