:root{
  --cww-bg: #070A12;
  --cww-card: rgba(255,255,255,.06);
  --cww-card2: rgba(255,255,255,.08);
  --cww-border: rgba(255,255,255,.10);
  --cww-text: rgba(255,255,255,.92);
  --cww-muted: rgba(255,255,255,.65);
}

.cww-body{
  background: radial-gradient(1200px 700px at 20% 10%, rgba(66,120,255,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(0,210,255,.12), transparent 55%),
              var(--cww-bg);
  color: var(--cww-text);
}

.cww-nav{
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
}

.letter-tight{ letter-spacing: -0.02em; }

.cww-card{
  background: var(--cww-card);
  border: 1px solid var(--cww-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.cww-mini-card{
  background: var(--cww-card2);
  border: 1px solid var(--cww-border);
  border-radius: 16px;
}

.cww-input, .cww-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--cww-text);
}
.cww-input:focus, .cww-select:focus{
  box-shadow: none;
  border-color: rgba(255,255,255,.28);
}

.cww-pill{
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.cww-btn{ border-color: rgba(255,255,255,.22); }

.cww-hr{
  border-color: rgba(255,255,255,.10);
  opacity: 1;
}

.cww-list{
  max-height: 420px;
  overflow: auto;
  padding-right: 6px;
}

.cww-list-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
}
.cww-list-item:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

.cww-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  object-fit: cover;
}

.cww-chart-wrap{
  height: 620px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

.cww-chart{ width: 100%; height: 100%; display: block; }

.cww-modal{
  background: rgba(10,12,20,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  color: var(--cww-text);
}

.cww-modal-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.cww-facts div{ margin-bottom: 6px; }
.cww-copy{ color: rgba(255,255,255,.80); line-height: 1.55; }

.cww-primary{
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}


/* ===== Readability + contrast fixes for dark glass UI ===== */

/* Stronger, consistent text tokens */
:root{
  --cww-text: rgba(255,255,255,.92);
  --cww-text-2: rgba(255,255,255,.84);     /* secondary body text */
  --cww-muted: rgba(255,255,255,.72);      /* previously too faint */
  --cww-muted-2: rgba(255,255,255,.62);    /* for less important notes */
  --cww-border: rgba(255,255,255,.14);     /* slightly stronger border */
}

/* Ensure all text defaults are readable */
.cww-body{
  color: var(--cww-text);
}

/* Bootstrap utility overrides inside this app (keeps the look, fixes contrast) */
.cww-body .text-muted{
  color: var(--cww-muted) !important;
}

.cww-body .text-secondary{
  color: var(--cww-muted-2) !important;
}

/* Buttons and nav links in dark mode can inherit low contrast */
.cww-nav .navbar-brand,
.cww-nav .nav-link,
.cww-nav a{
  color: var(--cww-text) !important;
}

/* Cards: slightly stronger border helps readability without "brightening" the design */
.cww-card,
.cww-mini-card{
  border-color: var(--cww-border);
}

/* Form controls: text, placeholder, and dropdown options */
.cww-input,
.cww-select,
.form-select,
.form-control{
  color: var(--cww-text) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Placeholder text is often the worst offender */
.cww-input::placeholder,
.form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
  opacity: 1;
}

/* Select dropdown menu items (important: options render outside the select styling in many browsers) */
.form-select option,
.cww-select option{
  color: #0b1020;              /* dark text */
  background: #ffffff;         /* light dropdown list for legibility */
}

/* If you prefer a dark dropdown list instead, use this instead of the two lines above:
.form-select option,
.cww-select option{
  color: rgba(255,255,255,.92);
  background: #0b1020;
}
*/

/* Labels above inputs (Search, Region, Industry) */
.form-label,
label{
  color: rgba(255,255,255,.74) !important;
}

/* Sidebar list items */
.cww-list-item{
  color: var(--cww-text);
}

.cww-list-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Badge contrast */
.badge.text-bg-secondary{
  background-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16);
}

/* Quadrant axis labels (SVG text can end up too faint) */
.cww-chart text{
  fill: rgba(255,255,255,.74) !important;
}

/* Modal copy and facts (keep hierarchy but readable) */
.cww-copy{
  color: var(--cww-text-2);
}

.cww-facts .text-muted{
  color: rgba(255,255,255,.70) !important;
}

/* Footnote disclaimer */
.cww-footnote{
  color: rgba(255,255,255,.55) !important;
}

.cww-methodology h4{
  color: rgba(255,255,255,.92);
}

.cww-methodology p{
  margin-bottom: 0.9rem;
}

.cww-methodology strong{
  color: rgba(255,255,255,.92);
}

.cww-methodology .cww-mini-card{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}