.vcp-host { box-sizing: border-box; width: 100%; max-width: 1080px; margin: 12px auto; padding: 0 12px; color: #e7eeee; font: 13px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main > .vcp-host { padding: 0; margin: 0 0 14px; }
.vcp-host *, .vcp-host *::before, .vcp-host *::after { box-sizing: border-box; }
.vcp-host [hidden] { display: none !important; }
.vcp-entry { display: flex; justify-content: flex-end; min-width: 0; }
.vcp-host button, .vcp-login { font: inherit; min-height: 40px; cursor: pointer; line-height: 1.3; }
.vcp-settings { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid #425457; border-radius: 8px; background: #1b282c; color: #e7eeee; font-weight: 650 !important; }
.vcp-settings-state { padding-left: 8px; border-left: 1px solid #425457; color: #b2c7cd; font-size: 11px; font-weight: 500; }
.vcp-settings[data-state="ready"] .vcp-settings-state { color: #a4efbd; }
.vcp-card { position: relative; max-width: 600px; margin: 9px 0 0 auto; padding: 14px; border: 1px solid #455f66; border-radius: 10px; background: #19262b; box-shadow: 0 6px 18px rgba(0,0,0,.12); text-align: left; }
.vcp-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vcp-title { min-width: 0; margin: 0; color: #f0f7f8; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.vcp-close { flex: 0 0 36px; min-height: 36px !important; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b9cdd2; font-size: 23px !important; }
.vcp-description, .vcp-status, .vcp-help, .vcp-footnote { margin: 7px 0 0; overflow-wrap: anywhere; }
.vcp-description { color: #bdcfd4; font-size: 12px; }
.vcp-status { color: #e3edf0; font-size: 12px; }
.vcp-card[data-state="ready"] .vcp-status { color: #a4efbd; }
.vcp-card[data-state="error"] .vcp-status, .vcp-card[data-state="denied"] .vcp-status { color: #f3bbc4; }
.vcp-help { padding: 8px; border-radius: 6px; background: #23353b; color: #d0e1e5; font-size: 12px; }
.vcp-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.vcp-primary, .vcp-secondary, .vcp-sound-toggle { padding: 8px 12px; border: 1px solid #5a7179; border-radius: 7px; background: #23363d; color: #e8f3f5; }
.vcp-primary { background: #a5dfce; border-color: #a5dfce; color: #102923; font-weight: 700 !important; }
.vcp-secondary { color: #c9dade; }
.vcp-host button:disabled { cursor: default; opacity: .55; }
.vcp-host button:focus-visible, .vcp-login:focus-visible { outline: 2px solid #a5dfce; outline-offset: 3px; }
.vcp-host button:not(:disabled):hover { filter: brightness(1.08); }
.vcp-login { display: inline-flex; align-items: center; margin-top: 8px; color: #a5dfce; text-decoration: underline; }
.vcp-sound { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #344950; }
.vcp-sound-toggle { flex: 0 0 auto; min-height: 36px !important; padding: 6px 9px; font-size: 11px !important; }
.vcp-sound-toggle[aria-pressed="true"] { color: #a4efbd; border-color: #75af8c; }
.vcp-sound-status { min-width: 0; color: #b4c9cf; font-size: 11px; overflow-wrap: anywhere; }
.vcp-footnote { color: #9eb5bd; font-size: 10px; line-height: 1.45; }
@media(max-width:420px) {
  .vcp-host { padding: 0 10px; margin: 10px auto; }
  main > .vcp-host { padding: 0; }
  .vcp-card { padding: 11px; }
  .vcp-title { font-size: 14px; }
  .vcp-settings { padding: 8px 10px; font-size: 12px !important; }
  .vcp-settings-state { font-size: 10px; }
  .vcp-actions .vcp-primary { flex: 1 1 140px; }
  .vcp-actions .vcp-secondary { flex: 1 1 90px; }
  .vcp-sound { flex-direction: column; align-items: flex-start; gap: 6px; }
}