/* WSV Local UI (Bootstrap-inspired) - self-contained, mobile-friendly */
.wsv-container{max-width:980px;margin:16px auto;padding:0 12px;box-sizing:border-box}
.wsv-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;gap:12px}
.wsv-title{margin:0;font-size:22px;line-height:1.2}
.wsv-subtitle{color:#666;font-size:13px;margin-top:4px}

.wsv-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 900px){.wsv-grid{grid-template-columns:1fr 1fr}.wsv-card-span2{grid-column:1 / span 2}}

.wsv-card{border:1px solid #e5e7eb;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.wsv-card-header{padding:10px 12px;font-weight:600;background:#f8fafc;border-bottom:1px solid #e5e7eb}
.wsv-card-body{padding:12px}

.wsv-label{display:block;font-size:13px;font-weight:600;margin:8px 0 6px}
.wsv-input{width:100%;padding:10px 11px;border:1px solid #d1d5db;border-radius:10px;box-sizing:border-box;font-size:14px;background:#fff}
.wsv-input:focus{outline:none;border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.25)}
textarea.wsv-input{min-height:120px;resize:vertical}

.wsv-btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wsv-btn{appearance:none;border:1px solid #cbd5e1;background:#fff;color:#111827;border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer}
.wsv-btn:hover{background:#f8fafc}
.wsv-btn:disabled{opacity:.6;cursor:not-allowed}
.wsv-btn-primary{background:#111827;color:#fff;border-color:#111827}
.wsv-btn-primary:hover{background:#0b1220}

.wsv-check-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 12px}
.wsv-check{display:flex;align-items:center;gap:6px;font-size:14px}
.wsv-check input{transform:scale(1.1)}

.wsv-terminal{
  height:360px;overflow:auto;border:1px solid #111;border-radius:10px;
  background:#0b0b0b;color:#e6e6e6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;padding:10px;white-space:pre-wrap
}

.wsv-instructions{margin-top:10px;padding:10px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc;font-size:13px}
.wsv-kv{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:6px 0}
.wsv-kv label{min-width:90px;font-weight:600;color:#111827}
.wsv-kv code{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px;display:block;word-break:break-all}

.wsv-copy{border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;background:#fff;cursor:pointer;font-size:13px}
.wsv-copy:hover{background:#f8fafc}

.wsv-alert{padding:10px 12px;border-radius:10px;border:1px solid #fde68a;background:#fffbeb;color:#92400e}
.wsv-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.2);font-size:13px;z-index:99999;max-width:calc(100% - 24px)}
/* Realtime metrics grid */
.wsv-rt-metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.wsv-rt-box{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(0,0,0,.25);
}
.wsv-rt-k{ font-size:12px; opacity:.75; margin-bottom:4px; }
.wsv-rt-v{ font-size:18px; font-weight:700; }
.wsv-muted{ opacity:.75; font-size:12px; }
@media (max-width: 720px){
  .wsv-rt-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}