/* Shared Custara product-demo layer. The interaction logic remains in the demo file. */
:root {
  --wavr-ink: #17212d;
  --wavr-ink-soft: #53606d;
  --wavr-muted: #7b8783;
  --wavr-line: #d9e0dc;
  --wavr-surface: #ffffff;
  --wavr-canvas: #f7f5f0;
  --wavr-sidebar: #17212d;
  --wavr-sidebar-soft: #233441;
  --wavr-teal: #0e9b91;
  --wavr-blue: #0e9b91;
  --wavr-purple: #7359e8;
  --wavr-green: #0e9b91;
  --wavr-orange: #d88429;
  --wavr-red: #c35d70;
  --wavr-yellow: #d5a33d;
  --wavr-shadow: 0 14px 34px rgba(23, 33, 45, .07);
  --wavr-radius-lg: 16px;
  --wavr-radius-md: 11px;
  --wavr-radius-sm: 7px;
  --wavr-font: "DM Sans", Arial, sans-serif;
}

body { background: var(--wavr-canvas); letter-spacing: -.01em; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: rgba(14, 155, 145, .28); }
.wavr-sidebar { width: 242px; padding: 22px 15px 17px; background: var(--wavr-sidebar); }
.wavr-brand { gap: 11px; padding: 0 10px 28px; }
.wavr-brand-mark { position: relative; width: 29px; height: 29px; border: 2px solid #71d5ca; border-radius: 9px 9px 9px 3px; background: transparent; box-shadow: none; color: transparent; font-size: 0; transform: rotate(-9deg); }
.wavr-brand-mark::after { position: absolute; width: 6px; height: 6px; right: 4px; bottom: 4px; border-radius: 50%; background: #eea04a; content: ""; }
.wavr-brand-text strong { font-size: 18px; letter-spacing: -.06em; }.wavr-brand-text span { color: #94a5b0; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.wavr-nav-label { color: #718390; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .1em; }.wavr-nav button { border-radius: 8px; color: #b2c0c8; font-size: 13px; }.wavr-nav button.is-active { background: var(--wavr-sidebar-soft); box-shadow: inset 2px 0 0 #73d4ca; }.wavr-nav button:hover { background: #263945; }.wavr-nav-count { color: #ffd4dc; background: rgba(195, 93, 112, .22); }.wavr-branch-card { border-radius: 9px; background: #20313e; }.wavr-branch-card small, .wavr-user span { color: #92a3ae; }.wavr-user { border-top-color: rgba(255,255,255,.11); }.wavr-avatar { color: #1d5e59; background: #c5e6df; }.wavr-user .wavr-avatar { color: #6250b0; background: #e2dcff; }

.wavr-topbar { height: 72px; padding: 0 30px; background: rgba(255,255,255,.94); }.wavr-breadcrumb { color: #84908b; font-family: "DM Mono", monospace; font-size: 10px; }.wavr-breadcrumb strong { color: var(--wavr-ink); font-family: "DM Sans", Arial, sans-serif; font-size: 13px; }.wavr-topbar-actions { gap: 9px; }.wavr-back-site { display: inline-flex; align-items: center; gap: 7px; color: #61706a; font-size: 11px; font-weight: 700; }.wavr-back-site:hover { color: var(--wavr-teal); }.wavr-back-site::before { content: "←"; font-size: 14px; }.wavr-button { min-height: 38px; border-radius: 8px; color: #485751; font-size: 11px; }.wavr-button.primary { background: var(--wavr-teal); border-color: var(--wavr-teal); box-shadow: 0 7px 16px rgba(14,155,145,.18); }.wavr-button.primary:hover { background: #087c75; border-color: #087c75; }.wavr-button.dark { background: var(--wavr-ink); border-color: var(--wavr-ink); }.wavr-icon-button:hover { color: var(--wavr-teal); background: var(--wavr-canvas); }.wavr-top-avatar { border-left-color: var(--wavr-line); }.wavr-top-avatar .wavr-avatar { color: #176f67; background: #d9f2ed; }

.wavr-content { max-width: 1460px; padding: 31px 32px 52px; }.wavr-page-head h1 { font-size: 29px; }.wavr-page-head p { color: var(--wavr-ink-soft); font-size: 13px; }.wavr-kpi, .wavr-panel, .wavr-card, .wavr-table-wrap, .wavr-modal { border-color: var(--wavr-line); border-radius: var(--wavr-radius-md); box-shadow: 0 5px 18px rgba(23,33,45,.035); }.wavr-kpi { background: rgba(255,255,255,.86); }.wavr-kpi-value { font-family: "DM Mono", monospace; font-size: 25px; font-weight: 500; letter-spacing: -.07em; }.wavr-kpi-top { color: #5d6b66; }.wavr-kpi-icon { border-radius: 8px; }.wavr-kpi-icon.blue, .wavr-kpi-icon.teal { color: var(--wavr-teal); background: #e5f7f3; }.wavr-kpi-icon.purple { color: var(--wavr-purple); background: #ede9ff; }.wavr-kpi-icon.orange { color: #b86a19; background: #fff0df; }.wavr-kpi-foot strong { color: var(--wavr-teal); }.wavr-panel-head h2, .wavr-card h2 { letter-spacing: -.035em; }.wavr-panel-head p { color: #71807a; }.wavr-status.success { color: #08736d; background: #e3f5f0; }.wavr-status.warning { color: #a66318; background: #fff0da; }.wavr-status.danger { color: #ad4b5d; background: #fbe8ec; }.wavr-chip { border-radius: 5px; color: #4d625b; background: #eef4f1; }.wavr-link-button { color: var(--wavr-teal); }.wavr-table th { color: #73817b; font-family: "DM Mono", monospace; font-size: 9px; }.wavr-table td { border-top-color: #e6ebe8; }.wavr-table tr:hover td { background: #fbfcfa; }

.wavr-modal-backdrop { background: rgba(23,33,45,.48); backdrop-filter: blur(3px); }.wavr-modal { box-shadow: 0 24px 70px rgba(23,33,45,.2); }.wavr-modal-head { border-bottom-color: var(--wavr-line); }.wavr-modal-foot { border-top-color: var(--wavr-line); }.wavr-toast { border-radius: 9px; background: var(--wavr-ink); box-shadow: 0 12px 28px rgba(23,33,45,.2); }.wavr-demo-progress .is-active .wavr-demo-step-index, .wavr-demo-step.is-done .wavr-demo-step-index { background: var(--wavr-teal); }.wavr-demo-overlay { background: rgba(23,33,45,.74); backdrop-filter: blur(4px); }.wavr-demo-card { border-radius: 15px; box-shadow: 0 24px 70px rgba(23,33,45,.22); }.wavr-demo-spotlight { border-color: rgba(14,155,145,.72); }

@media (max-width: 900px) { .wavr-sidebar { width: 212px; }.wavr-back-site { display: none; }.wavr-content { padding: 26px 22px 42px; }.wavr-topbar { padding: 0 22px; } }
@media (max-width: 720px) { .wavr-sidebar { width: 100%; }.wavr-brand { padding-bottom: 13px; }.wavr-topbar { padding: 0 15px; }.wavr-top-avatar { display: none; }.wavr-content { padding: 22px 15px 37px; }.wavr-page-head h1 { font-size: 25px; } }

/* Simulation and segments: concise, owner-facing controls with no decorative AI treatment. */
.wavr-demo-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; padding: 20px 22px; border-radius: 13px; background: #1e3438; box-shadow: 0 14px 32px rgba(23,33,45,.14); }
.wavr-demo-copy { min-width: 0; }.wavr-demo-bar h2 { font-size: 18px; }.wavr-demo-bar p { max-width: 560px; color: #bdcecc; }.wavr-demo-kicker { color: #89d8ce; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; }.wavr-demo-progress { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding-top: 16px; border-top: 1px solid rgba(188,222,216,.18); }.wavr-demo-step-line { height: 3px; margin-bottom: 8px; background: #496166; }.wavr-demo-step.is-done .wavr-demo-step-line { background: #7ed1c6; }.wavr-demo-step.is-current .wavr-demo-step-line { background: #eea04a; }.wavr-demo-step span { color: #9db3b2; font-family: "DM Mono", monospace; font-size: 8px; white-space: normal; }.wavr-demo-step.is-done span, .wavr-demo-step.is-current span { color: #e8f4f1; }.wavr-demo-actions { align-self: start; justify-content: flex-end; }.wavr-demo-actions .wavr-button { min-height: 36px; }.wavr-demo-actions .wavr-button.secondary { color: #cfdfdc; border-color: #577075; background: transparent; }

.wavr-segments-panel { padding: 22px; }.wavr-segment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.wavr-segment-card { position: relative; display: block; width: 100%; min-height: 206px; padding: 19px; border: 1px solid #d8e1dc; border-radius: 11px; color: var(--wavr-ink); background: #fff; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.wavr-segment-card:hover { border-color: #84cfc5; box-shadow: 0 10px 22px rgba(23,33,45,.07); transform: translateY(-2px); }.wavr-segment-card:focus-visible { outline: 3px solid rgba(14,155,145,.22); outline-offset: 3px; }.wavr-segment-index { position: absolute; top: 18px; right: 18px; color: #8a9892; font-family: "DM Mono", monospace; font-size: 9px; }.wavr-segment-label { display: block; margin-bottom: 26px; color: var(--wavr-teal); font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .08em; }.wavr-segment-card h3 { max-width: 210px; margin: 0 0 8px; font-size: 17px; letter-spacing: -.04em; }.wavr-segment-card p { min-height: 39px; margin: 0; color: #64716d; font-size: 11px; line-height: 1.5; }.wavr-segment-card .wavr-segment-meta { position: absolute; right: 19px; bottom: 17px; left: 19px; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #e4e9e6; color: #64716d; font-size: 10px; }.wavr-segment-card .wavr-segment-meta > span:last-child { display: inline-flex; align-items: center; gap: 5px; color: var(--wavr-teal); font-weight: 700; }.wavr-segment-card .wavr-segment-meta strong { color: var(--wavr-ink); font-family: "DM Mono", monospace; font-size: 14px; font-weight: 500; }.wavr-segment-card .wavr-segment-meta svg { width: 12px; }

/* Reuse one quiet, operational icon language across dashboard, people, and segments. */
.wavr-opportunity-icon, .wavr-opportunity-icon.red, .wavr-opportunity-icon.orange, .wavr-opportunity-icon.purple { display: grid; width: 23px; height: 23px; place-items: center; flex: 0 0 23px; border-radius: 0; color: var(--wavr-teal); background: transparent; }.wavr-opportunity-icon svg { width: 17px; height: 17px; }.wavr-person-icon { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; color: var(--wavr-teal); }.wavr-person-icon svg { width: 17px; height: 17px; }.wavr-profile-hero .wavr-person-icon { width: 48px; height: 48px; border: 1px solid #d9e6e1; border-radius: 50%; background: #f2faf7; }.wavr-segment-top { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }.wavr-segment-top .wavr-segment-label { margin: 0; }.wavr-segment-icon { display: grid; width: 18px; height: 18px; place-items: center; color: var(--wavr-teal); }.wavr-segment-icon svg { width: 16px; height: 16px; }

/* Keep the owner-facing demo spatially calm and free from implementation-level alerts. */
.wavr-sidebar { justify-content: flex-start; }.wavr-sidebar-bottom { margin-top: auto; }.wavr-brand { display: block; padding: 0 10px 22px; }.wavr-brand-logo { display: block; width: 192px; height: auto; }.wavr-brand-mark, .wavr-brand-text { display: none; }.wavr-nav button > .wavr-nav-icon { flex: 0 0 17px; }.wavr-nav button > span:not(.wavr-nav-icon) { flex: 0 1 auto; }#pageRoot .wavr-panel-head > .wavr-status { display: none; }#pageRoot[data-page="transactions"] > .wavr-notice, #pageRoot[data-page="campaigns"] .wavr-notice, #pageRoot[data-page="campaigns"] .wavr-result-note, #pageRoot[data-page="settings"] > .wavr-panel { display: none; }

@media (max-width: 1050px) { .wavr-demo-bar { grid-template-columns: 1fr; }.wavr-demo-actions { justify-content: flex-start; }.wavr-segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wavr-demo-bar { padding: 17px; }.wavr-demo-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 8px; }.wavr-demo-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }.wavr-demo-actions .wavr-button { width: 100%; }.wavr-segments-panel { padding: 15px; }.wavr-segment-grid { grid-template-columns: 1fr; }.wavr-segment-card { min-height: 187px; } }