/* BeVisibleHQ shared visual system
   One palette for every public tool. This stylesheet changes presentation only. */
:root {
  color-scheme: dark;
  --bv-bg: #080808;
  --bv-surface: #141414;
  --bv-surface-raised: #1d1d1d;
  --bv-surface-deep: #050505;
  --bv-line: #303030;
  --bv-text: #f5f5f5;
  --bv-muted: #a3a3a3;
  --bv-yellow: #ffd633;
  --bv-yellow-hover: #ffe36a;
  --bv-yellow-soft: #2b240d;
  --bv-yellow-line: #6b5711;
  --bv-green: #75c58c;
  --bv-green-soft: #14251a;
  --bv-red: #f0786a;
  --bv-red-soft: #301816;
  --bv-shadow: 0 10px 28px rgba(0,0,0,.32);

  /* Bridge existing tool-specific design tokens into the shared palette. */
  --bg: var(--bv-bg);
  --paper: var(--bv-bg);
  --surface: var(--bv-surface);
  --surface-2: var(--bv-surface-raised);
  --card: var(--bv-surface);
  --panel: var(--bv-surface);
  --ink: var(--bv-text);
  --text: var(--bv-text);
  --muted: var(--bv-muted);
  --line: var(--bv-line);
  --accent: var(--bv-yellow);
  --accent-ink: #111111;
  --yellow: var(--bv-yellow);
  --yellow2: #e7bf20;
  --pink: var(--bv-yellow);
  --blue: var(--bv-yellow);
  --purple: var(--bv-yellow);
  --violet: var(--bv-yellow);
  --orange: var(--bv-yellow);
  --pale: var(--bv-yellow-soft);
  --mono-bg: var(--bv-surface-deep);
  --mono-ink: var(--bv-text);
  --good: var(--bv-green);
  --good-bg: var(--bv-green-soft);
  --green: var(--bv-green);
  --warn: var(--bv-yellow);
  --warn-bg: var(--bv-yellow-soft);
  --bad: var(--bv-red);
  --red: var(--bv-red);
  --bad-bg: var(--bv-red-soft);
  --shadow: var(--bv-shadow);
}

html {
  color-scheme: dark !important;
  background: var(--bv-bg) !important;
}

body {
  background: var(--bv-bg) !important;
  background-image: none !important;
  color: var(--bv-text) !important;
}

/* Shared text and link treatment. */
h1, h2, h3, h4, h5, h6,
p, label, legend, summary, dt, dd, li, th, td,
.muted, .hint, .help, .sub, .meta, .desc, .cat,
.local, .privacy, .field label, .stat label,
.head p, .hero p, .brand small, .footer, .empty,
.serp .title, .creatinfo p, .copycard p {
  color: var(--bv-text) !important;
}
.muted, .hint, .help, .sub, .meta, .desc, .cat,
.local, .privacy, .field label, .stat label,
.head p, .hero p, .brand small, .footer {
  color: var(--bv-muted) !important;
}
a, a:visited {
  color: var(--bv-yellow) !important;
}
a:hover {
  color: var(--bv-yellow-hover) !important;
}
.brand b, .eyebrow, .arrow, .mark, .brandmark {
  color: var(--bv-yellow) !important;
}

/* Common cards, panels, workspaces and data surfaces. */
.panel, .card, .stat, .metric, .trend, .result,
.post, .ad, .setup, .board .col, .tablewrap,
.table, .report, .codewrap, .serp, .copycard,
.saved, .creative, .rankgrid, .mini-table,
.tabpane, .check, .tasklist, .seedbar,
.notice {
  background: var(--bv-surface) !important;
  color: var(--bv-text) !important;
  border-color: var(--bv-line) !important;
  box-shadow: var(--bv-shadow);
}
.panel, .card, .stat, .metric, .trend, .result,
.post, .ad, .setup, .board .col, .tablewrap,
.table, .report, .codewrap, .serp, .copycard,
.saved, .creative, .rankgrid, .mini-table,
.tabpane, .check, .tasklist, .seedbar {
  border-color: var(--bv-line) !important;
}
.empty {
  background: var(--bv-surface) !important;
  color: var(--bv-muted) !important;
  border-color: #454545 !important;
}
.empty strong {
  color: var(--bv-text) !important;
}
.report .eyebrow {
  color: var(--bv-yellow) !important;
}

/* Notes and callouts use a restrained yellow-on-charcoal treatment. */
.note, .notice {
  background: var(--bv-yellow-soft) !important;
  border: 1px solid var(--bv-yellow-line) !important;
  color: #f3e7b0 !important;
}
.note strong, .notice strong {
  color: var(--bv-yellow) !important;
}
.banner {
  background: var(--bv-yellow) !important;
  border-color: var(--bv-yellow) !important;
  color: #111111 !important;
}
.banner * {
  color: #111111 !important;
}

/* Controls. */
button, .btn, .tab, .control {
  background: var(--bv-surface-raised) !important;
  color: var(--bv-text) !important;
  border-color: #414141 !important;
}
button:hover, .btn:hover, .tab:hover, .control:hover {
  border-color: var(--bv-yellow) !important;
}
button:disabled, .btn:disabled {
  opacity: .48;
}
button.primary, .primary, .btn.primary,
.btn.primary *, .tab[aria-selected="true"],
.navbtn[aria-current="true"] {
  background: var(--bv-yellow) !important;
  color: #111111 !important;
  border-color: var(--bv-yellow) !important;
}
.btn.dark {
  background: #050505 !important;
  color: var(--bv-text) !important;
  border-color: #414141 !important;
}
.navbtn {
  color: var(--bv-muted) !important;
}
.navbtn[aria-current="true"] {
  color: #111111 !important;
}
input, select, textarea {
  background: var(--bv-surface-deep) !important;
  color: var(--bv-text) !important;
  border-color: #414141 !important;
  color-scheme: dark;
}
input::placeholder, textarea::placeholder {
  color: #858585 !important;
}
input[type="checkbox"], input[type="radio"], progress {
  accent-color: var(--bv-yellow) !important;
}
input[type="color"] {
  background: var(--bv-surface) !important;
}
select option {
  background: var(--bv-surface) !important;
  color: var(--bv-text) !important;
}
label[style*="background"] {
  background: var(--bv-yellow) !important;
  color: #111111 !important;
  border-color: var(--bv-yellow) !important;
}
:focus-visible {
  outline-color: var(--bv-yellow) !important;
}

/* Tables, code and separators. */
table, th, td {
  color: var(--bv-text) !important;
  border-color: var(--bv-line) !important;
}
th {
  background: var(--bv-surface-raised) !important;
}
tr:nth-child(even) td {
  background: rgba(255,255,255,.018);
}
pre, code, textarea {
  background-color: var(--bv-surface-deep) !important;
  color: var(--bv-text) !important;
}
hr {
  border-color: var(--bv-line) !important;
}

/* Accent marks and charts. */
.mark, .brandmark, .brand .dot {
  background: #050505 !important;
  color: var(--bv-yellow) !important;
}
.bar, .meter {
  background: #303030 !important;
}
.bar i, .meter > span {
  background: var(--bv-yellow) !important;
}
.spark {
  color: var(--bv-yellow) !important;
}
.toast {
  background: var(--bv-surface) !important;
  color: var(--bv-text) !important;
  border-color: var(--bv-yellow-line) !important;
}

/* Retain semantic meaning for positive, warning and negative states. */
.pass, .good, .status.Approved, .chip.good {
  color: var(--bv-green) !important;
}
.status.Approved, .chip.good {
  background: var(--bv-green-soft) !important;
  border-color: #28543a !important;
}
.fail, .bad, .status.Declined, .chip.bad, .pill.cooling {
  color: var(--bv-red) !important;
}
.status.Declined, .chip.bad, .pill.cooling {
  background: var(--bv-red-soft) !important;
  border-color: #60302b !important;
}
.warn, .status.Contacted, .status.Negotiating,
.status.Completed, .pill.exploding, .pill.rising,
.chip.warn, .badge, .tag {
  color: var(--bv-yellow) !important;
  background: var(--bv-yellow-soft) !important;
  border-color: var(--bv-yellow-line) !important;
}
.status.Prospect, .pill.stable {
  color: var(--bv-muted) !important;
  background: var(--bv-surface-raised) !important;
  border-color: var(--bv-line) !important;
}

/* Keep generated ad artwork, uploaded images, and chart geometry intact. */
img, canvas, video {
  max-width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------------------------------------------------------------
   Visual quality pass: spacing, touch targets, overflow and mobile
   These rules are presentation-only. They do not change tool logic.
   --------------------------------------------------------------- */

:root {
  --bv-radius-sm: 9px;
  --bv-radius-md: 13px;
  --bv-radius-lg: 17px;
  --bv-space-1: 6px;
  --bv-space-2: 10px;
  --bv-space-3: 14px;
  --bv-space-4: 18px;
  --bv-space-5: 24px;
}

html {
  min-width: 320px;
  scroll-padding-top: 16px;
}

body {
  min-width: 320px;
  overflow-x: clip;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell, .wrap {
  min-width: 0;
  width: min(100%, 1500px);
  margin-inline: auto;
}

header, .top, .hero, .viewhead, .head,
.actions, .filters, .controls, .formactions, .row {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

h1, h2, h3 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
}

h2 {
  line-height: 1.2;
}

p, li, label, th, td {
  overflow-wrap: anywhere;
}

.panel, .stat, .metric, .trend, .result,
.post, .ad, .setup, .creative, .copycard,
.saved, .check, .report, .card {
  min-width: 0;
  border-radius: var(--bv-radius-md);
}

.panel {
  padding: clamp(13px, 2vw, 20px);
}

.stat {
  padding: clamp(12px, 1.8vw, 17px);
}

.grid, .layout, .stats, .metrics, .formgrid,
.setup, .rankgrid, .adgrid, .posts, .checks,
.row2, .creative-grid, .copygrid {
  min-width: 0;
}

.grid > *, .layout > *, .stats > *, .metrics > *,
.formgrid > *, .setup > *, .rankgrid > *,
.adgrid > *, .posts > *, .checks > *,
.row2 > *, .creative-grid > *, .copygrid > * {
  min-width: 0;
  max-width: 100%;
}

.tablewrap, .table, .tablewrap > div {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

pre, code, textarea {
  max-width: 100%;
  overflow-wrap: anywhere;
}

input, select, textarea, button, .btn, .tab, .control {
  max-width: 100%;
  font-family: inherit;
}

input, select, textarea {
  min-height: 42px;
}

button, .btn, .tab {
  min-height: 40px;
  line-height: 1.25;
  border-radius: var(--bv-radius-sm);
  touch-action: manipulation;
}

button.sm, .btn.sm, .btn.small, .btn.ghost,
button.small {
  min-height: 34px;
}

button:focus-visible, .btn:focus-visible, .tab:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--bv-yellow) !important;
  outline-offset: 3px;
}

.brand, .brandmark, .mark {
  flex-shrink: 0;
}

.brand small, .local, .privacy, .badge, .tag, .pill {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.empty, .note, .notice {
  line-height: 1.55;
}

.empty {
  padding: clamp(16px, 2.5vw, 24px);
}

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

img, video {
  height: auto;
}

.spark, canvas {
  display: block;
  max-width: 100%;
}

.board {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.rail {
  min-width: 0;
}

@media (max-width: 900px) {
  .hero {
    align-items: flex-start;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .setup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top, header {
    align-items: flex-start;
  }

  .filters > input, .filters > select,
  .controls > input, .controls > select {
    min-width: min(100%, 180px);
    flex: 1 1 180px;
  }
}

@media (max-width: 600px) {
  .shell, .wrap {
    width: 100%;
    padding: 16px 14px 34px !important;
  }

  .top, .hero, .viewhead, .head {
    align-items: flex-start;
    flex-direction: column;
  }

  .actions, .formactions, .controls {
    width: 100%;
  }

  .actions > button, .actions > a,
  .formactions > button, .controls > button {
    flex: 1 1 130px;
  }

  .grid, .layout, .formgrid, .setup,
  .rankgrid, .adgrid, .posts, .checks, .row2,
  .creative-grid, .copygrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stats, .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field, .formrow, .formgrid .field {
    min-width: 0;
    width: 100%;
  }

  .field input, .field select, .field textarea,
  .formrow input, .formrow select, .formrow textarea {
    width: 100%;
    min-width: 0;
  }

  .panel {
    padding: 13px;
  }

  .tablewrap, .table {
    margin-inline: 0;
  }

  .board {
    grid-template-columns: repeat(5, minmax(210px, 1fr));
  }

  .footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 380px) {
  .stats, .metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell, .wrap {
    padding-inline: 11px !important;
  }

  button, .btn, .tab {
    padding-inline: 10px;
  }
}


/* Dark-surface consistency pass for legacy tool-specific hard-coded colors. */
:root {
  --ink: var(--bv-text);
  --fg: var(--bv-text);
  --accent-ink: #111111;
}

.local, .privacy, .pill {
  background: var(--bv-surface-raised) !important;
  color: var(--bv-muted) !important;
  border-color: var(--bv-line) !important;
}

.local strong, .privacy strong {
  color: var(--bv-text) !important;
}

.nav button, .navbtn, .control, .btn, button, .tab {
  color: var(--bv-text) !important;
}

.nav button[aria-selected="true"], .nav button.active,
.navbtn[aria-current="true"], .tab[aria-selected="true"],
button.primary, .btn.primary, .primary {
  background: var(--bv-yellow) !important;
  color: #111111 !important;
  border-color: var(--bv-yellow) !important;
}

.stat, .panel, .setup, .check, .creative, .post,
.result, .metric, .empty, .serp, .copycard, .tablewrap,
.report, .codewrap, .saved, .tasklist, .tabpane,
.rankgrid, .mini-table, .board .col {
  background-color: var(--bv-surface) !important;
  color: var(--bv-text) !important;
  border-color: var(--bv-line) !important;
}

th {
  background: var(--bv-surface-raised) !important;
  color: var(--bv-muted) !important;
}

.bar, .meter {
  background: #343434 !important;
}

.ad img, .creative img, .creative .preview,
.card .img-placeholder {
  background-color: var(--bv-surface-raised) !important;
}

.note {
  background: var(--bv-yellow-soft) !important;
  border-color: var(--bv-yellow-line) !important;
  color: #f3e7b0 !important;
}

.badge, .tag, .pill.exploding, .pill.rising,
.chip.warn {
  background: var(--bv-yellow-soft) !important;
  color: var(--bv-yellow) !important;
  border-color: var(--bv-yellow-line) !important;
}

.pill.stable, .status.Prospect {
  background: var(--bv-surface-raised) !important;
  color: var(--bv-muted) !important;
  border-color: var(--bv-line) !important;
}

.pill.cooling, .status.Declined, .chip.bad {
  background: var(--bv-red-soft) !important;
  color: var(--bv-red) !important;
  border-color: #60302b !important;
}

.pill.rising, .status.Approved, .chip.good {
  background: var(--bv-green-soft) !important;
  color: var(--bv-green) !important;
  border-color: #28543a !important;
}

/* Coming-soon card remains visible but distinct from live tools. */
a.card.coming-soon {
  background: linear-gradient(145deg, #1c1a11, #141414) !important;
  border-color: var(--bv-yellow-line) !important;
}
a.card.coming-soon .eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bv-yellow-line);
  background: var(--bv-yellow-soft);
  border-radius: 999px;
  padding: 4px 8px;
}