/* Versona Web panel inside the Versona Hub's Export tab. Follows the Export cards: same surfaces, radius and accent. */
#versona-web-panel.show { display: block; }
.vwp { color: var(--text-primary); }
.vwp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.vwp-head h3 { margin: 0; font-size: 18px; color: var(--accent-primary); flex: 1; }
.vwp-docs { color: var(--accent-primary); font-size: 14px; }
.vwp-empty { color: var(--text-secondary); padding: 18px; border: 1px dashed rgba(217, 164, 65, 0.3); border-radius: var(--border-radius); text-align: center; }
.vwp-list { display: grid; gap: 12px; }
.vwp-site { background-color: rgba(26, 19, 14, 0.7); border: 1px solid rgba(217, 164, 65, 0.2); border-radius: var(--border-radius); padding: 14px 16px; display: grid; gap: 8px; }
.vwp-site[data-inactive] { opacity: 0.75; }
.vwp-site-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vwp-site-name { font-weight: 600; font-size: 16px; }
.vwp-site-url { color: var(--text-secondary); font-size: 13px; word-break: break-all; }
.vwp-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(217, 164, 65, 0.35); color: var(--text-primary); }
.vwp-pill[data-state="running"], .vwp-pill[data-state="queued"] { border-color: var(--accent-primary); }
.vwp-pill[data-state="failed"] { border-color: #e5484d; color: #ffb4b7; }
.vwp-off { font-size: 12px; color: var(--text-secondary); }
.vwp-usage { font-size: 13px; color: var(--text-secondary); }
.vwp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vwp-btn { padding: 7px 12px; border-radius: 2px; border: 1px solid rgba(217, 164, 65, 0.35); background: transparent; color: var(--text-primary); cursor: pointer; font: inherit; font-size: 13px; }
.vwp-btn:hover { border-color: var(--accent-primary); }
.vwp-btn[data-danger] { border-color: rgba(229, 72, 77, 0.6); }
.vwp-btn[data-primary] { background: var(--accent-primary); color: #1a130e; border-color: var(--accent-primary); font-weight: 600; }
.vwp-btn:disabled { opacity: 0.5; cursor: default; }
.vwp-form { display: grid; gap: 14px; margin-top: 8px; }
.vwp-field { display: grid; gap: 4px; }
.vwp-field label { font-size: 14px; font-weight: 600; }
.vwp-help { font-size: 12px; color: var(--text-secondary); }
.vwp-error { font-size: 12px; color: #ffb4b7; }
.vwp-corners { display: flex; gap: 8px; flex-wrap: wrap; }
.vwp-corner { padding: 6px 10px; border-radius: 2px; border: 1px solid rgba(217, 164, 65, 0.35); background: transparent; color: var(--text-primary); cursor: pointer; font: inherit; font-size: 13px; }
.vwp-corner[data-active] { border-color: var(--accent-primary); background: rgba(217, 164, 65, 0.15); }
.vwp-accent { display: flex; gap: 8px; align-items: center; }
.vwp-accent input[type="color"] { width: 44px; height: 34px; padding: 0; border: 1px solid rgba(217, 164, 65, 0.35); border-radius: 2px; background: transparent; }
.vwp-questions { display: grid; gap: 6px; }
.vwp-key { font-family: Consolas, Menlo, monospace; font-size: 13px; word-break: break-all; }
.vwp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vwp-sheet { display: grid; gap: 12px; }
.vwp-sheet textarea { width: 100%; min-height: 92px; font-family: Consolas, Menlo, monospace; font-size: 12px; }
.vwp-note { font-size: 13px; color: var(--text-secondary); }
.vwp-links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .vwp-site-top { flex-direction: column; align-items: flex-start; } }