/* FFV6_GLOBAL_VISUAL_CONSISTENCY_V1 */
/* Bedside Whisper unified visual layer: color, typography, cards, buttons, forms, nav. */

:root {
  color-scheme: dark;
  --bw-bg-0: #10070f;
  --bw-bg-1: #170817;
  --bw-bg-2: #211022;
  --bw-card: rgba(255,255,255,.065);
  --bw-card-strong: rgba(255,255,255,.095);
  --bw-border: rgba(255,255,255,.14);
  --bw-border-strong: rgba(255,255,255,.28);
  --bw-text: #fff;
  --bw-muted: rgba(255,255,255,.68);
  --bw-soft: rgba(255,255,255,.52);
  --bw-pink: #ff6ad5;
  --bw-purple: #9565ff;
  --bw-warm: #ffd37e;
  --bw-radius-xl: 28px;
  --bw-radius-lg: 20px;
  --bw-shadow: 0 18px 48px rgba(0,0,0,.24);
  --bw-shadow-soft: 0 10px 28px rgba(0,0,0,.18);
  --bw-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: var(--bw-bg-0);
  color: var(--bw-text);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% -10%, rgba(255,106,213,.22), transparent 34%),
    radial-gradient(circle at 84% 0%, rgba(149,101,255,.18), transparent 32%),
    linear-gradient(180deg, var(--bw-bg-1), var(--bw-bg-0));
  color: var(--bw-text);
  font-family: var(--bw-font);
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
}

img, video {
  max-width: 100%;
}

main,
.bw-page,
.bw-chat-page,
.bw-video-page,
.bw-install-page,
.bw-cart-page,
.bw-support-page,
.bw-affiliate-page,
.bw-performer-page,
.bw-gallery-page,
.bw-companion-page,
.bw-plans-page,
.bw-access-page,
.bw-live-page {
  color: var(--bw-text);
}

h1, h2, h3 {
  color: var(--bw-text);
  letter-spacing: -.035em;
}

h1 {
  letter-spacing: -.06em;
}

p, li, small, label {
  color: var(--bw-muted);
}

strong {
  color: var(--bw-text);
}

button,
input,
textarea,
select {
  font-family: var(--bw-font);
}

input,
textarea,
select {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--bw-border);
  color: var(--bw-text);
  border-radius: 18px;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--bw-border-strong);
  box-shadow: 0 0 0 3px rgba(255,106,213,.12);
}

button,
[type="button"],
[type="submit"],
.bw-button,
.bw-video-button,
.bw-chat-form button,
.bw-install-button,
.bw-cart-checkout,
a[href*="checkout"],
a[href*="plans"],
a[href*="cart"] {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover,
.bw-button:hover,
.bw-video-button:hover,
.bw-install-button:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: .55;
}

.bw-card,
.card,
.panel,
section[class*="panel"],
article[class*="panel"],
div[class*="panel"],
.bw-chat-panel,
.bw-video-panel,
.bw-install-card,
.bw-install-hero,
.bw-video-hero,
.bw-chat-hero {
  border-color: var(--bw-border);
  background-color: var(--bw-card);
  box-shadow: var(--bw-shadow);
}

.bw-pill,
[class*="pill"],
[class*="tag"],
[class*="badge"] {
  border-color: rgba(255,255,255,.13);
  background-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}

#bw-static-global-public-nav-v1,
nav#bw-static-global-public-nav-v1 {
  font-family: var(--bw-font);
  color: var(--bw-text);
}

#bw-static-global-public-nav-v1 a,
nav#bw-static-global-public-nav-v1 a {
  color: var(--bw-text);
  text-decoration: none;
}

#bw-static-global-public-nav-v1 a:hover,
nav#bw-static-global-public-nav-v1 a:hover {
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.10);
}

#bw-static-global-public-nav-v1 a[aria-current="page"],
nav#bw-static-global-public-nav-v1 a[aria-current="page"] {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.14);
}

.bw-cart-brand span,
.bw-brand-mark,
[class*="avatar"],
[class*="active-icon"] {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(135deg, rgba(255,106,213,.85), rgba(149,101,255,.70));
}

.bw-note,
.bw-video-note,
.bw-install-note,
[class*="note"] {
  border-color: rgba(255,211,126,.28);
  background-color: rgba(255,184,77,.08);
  color: #ffe7ba;
}

.bw-muted,
[class*="muted"] {
  color: var(--bw-muted);
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border-color: rgba(255,255,255,.10);
}

::selection {
  background: rgba(255,106,213,.34);
  color: #fff;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 16% -8%, rgba(255,106,213,.20), transparent 32%),
      radial-gradient(circle at 86% 2%, rgba(149,101,255,.16), transparent 30%),
      linear-gradient(180deg, var(--bw-bg-1), var(--bw-bg-0));
  }
}