* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: radial-gradient(circle at top, #10243f, #05070c 60%);
color: #ffffff;
min-height: 100vh;
}

.page {
width: min(900px, 92%);
margin: 0 auto;
padding: 50px 0;
}

.hero {
text-align: center;
margin-bottom: 28px;
}

.logo {
width: 70px;
height: 70px;
margin: 0 auto 15px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 36px;
font-weight: bold;
background: #f7931a;
color: #111;
box-shadow: 0 0 30px rgba(247, 147, 26, 0.45);
}

h1 {
font-size: 48px;
margin: 0;
letter-spacing: 1px;
}

.hero p {
color: #aeb8c8;
font-size: 18px;
margin-top: 10px;
}

.state-bar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 22px;
}

.state-pill {
background: rgba(10, 18, 32, 0.72);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.state-pill span {
display: block;
color: #8492a6;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
margin-bottom: 6px;
}

.state-pill strong {
display: block;
font-size: 16px;
color: #ffffff;
}

.signal-card {
background: rgba(10, 18, 32, 0.88);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
padding: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.card-header {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
}

.label {
color: #8492a6;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
margin: 0 0 8px;
}

#bias {
margin: 0;
font-size: 38px;
}

.score {
font-size: 28px;
font-weight: bold;
padding: 14px 18px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
}

.confidence-panel {
margin-top: 20px;
padding: 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}

.confidence-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}

.confidence-top strong {
display: block;
font-size: 22px;
}

#alignmentNote {
color: #8492a6;
font-size: 13px;
}

.confidence-track {
width: 100%;
height: 12px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
}

.confidence-fill {
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 0.5s ease;
}

.confidence-fill.bullish {
background: #35f2a1;
}

.confidence-fill.bearish {
background: #ff5c7a;
}

.confidence-fill.neutral {
background: #f0c35a;
}

.alignment-explainer {
margin: 12px 0 0;
}

.alignment-explainer p {
color: #aeb8c8;
font-size: 13px;
line-height: 1.45;
margin: 0;
}

.alignment-explainer p + p {
margin-top: 4px;
color: #8492a6;
}

.alignment-breakdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}

.alignment-breakdown div {
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 12px;
}

.alignment-breakdown span {
display: block;
color: #8492a6;
font-size: 12px;
margin-bottom: 6px;
}

.alignment-breakdown strong {
display: block;
font-size: 20px;
color: #ffffff;
}

#bullishPoints {
color: #35f2a1;
}

#bearishPoints {
color: #ff5c7a;
}

#neutralPoints {
color: #f0c35a;
}

.price-row {
margin: 28px 0;
}

.price-row p {
color: #8492a6;
margin: 0 0 6px;
}

.price-row h3 {
font-size: 42px;
margin: 0;
}

.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-bottom: 28px;
}

.details-grid div {
background: rgba(255, 255, 255, 0.06);
padding: 18px;
border-radius: 16px;
}

.details-grid strong {
font-size: 22px;
}

.reasons {
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 18px;
}

ul {
margin: 0;
padding-left: 20px;
}

li {
margin: 10px 0;
color: #d8e0ed;
}

.indicator-panel {
margin-top: 20px;
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 18px;
}

.metric-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

.metric {
background: rgba(255, 255, 255, 0.06);
padding: 15px;
border-radius: 14px;
}

.metric span {
display: block;
color: #8492a6;
font-size: 12px;
margin-bottom: 8px;
}

.metric strong {
display: block;
font-size: 18px;
color: #ffffff;
}

.chart-panel {
margin-top: 20px;
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 18px;
}

.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.chart-header span {
color: #8492a6;
font-size: 13px;
}

#priceChart {
width: 100%;
height: 180px;
display: block;
background: rgba(255, 255, 255, 0.035);
border-radius: 14px;
}

.chart-note {
color: #8492a6;
font-size: 13px;
margin: 10px 0 0;
}

.chart-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}

.chart-stats div {
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 12px;
}

.chart-stats span {
display: block;
color: #8492a6;
font-size: 12px;
margin-bottom: 6px;
}

.chart-stats strong {
display: block;
color: #ffffff;
font-size: 16px;
}

#chartNetMove.bullish {
color: #35f2a1;
}

#chartNetMove.bearish {
color: #ff5c7a;
}

#chartNetMove.neutral {
color: #f0c35a;
}

.history-panel {
margin-top: 20px;
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 18px;
}

.history-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.history-header span {
color: #8492a6;
font-size: 13px;
}

.history-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 14px;
}

.history-summary div {
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 12px;
}

.history-summary span {
display: block;
color: #8492a6;
font-size: 12px;
margin-bottom: 6px;
}

.history-summary strong {
display: block;
color: #ffffff;
font-size: 18px;
}

#historyBullish {
color: #35f2a1;
}

#historyBearish {
color: #ff5c7a;
}

#historyMixed {
color: #f0c35a;
}

.history-list {
display: grid;
gap: 10px;
}

.history-item {
display: grid;
grid-template-columns: 90px 1fr 70px 100px;
gap: 12px;
align-items: center;
background: rgba(255, 255, 255, 0.06);
padding: 12px 14px;
border-radius: 12px;
}

.history-time {
color: #aeb8c8;
font-size: 13px;
}

.history-bias {
font-weight: bold;
}

.history-score,
.history-price {
color: #d8e0ed;
font-size: 14px;
text-align: right;
}

.history-empty {
color: #8492a6;
margin: 0;
font-size: 14px;
}

.about-btcradar-panel {
margin-top: 24px;
padding: 24px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.045);
}

.about-btcradar-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}

.section-kicker {
margin: 0;
color: #8fb3ff;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.about-btcradar-top span {
color: #9fb7ff;
font-size: 13px;
border: 1px solid rgba(159, 183, 255, 0.25);
background: rgba(159, 183, 255, 0.08);
padding: 7px 11px;
border-radius: 999px;
white-space: nowrap;
}

.about-btcradar-panel > p {
margin: 0 0 18px;
color: #d8e0ed;
font-size: 14px;
line-height: 1.6;
}

.about-btcradar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}

.about-btcradar-grid div {
padding: 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}

.about-btcradar-grid strong {
display: block;
color: #ffffff;
margin-bottom: 8px;
font-size: 16px;
}

.about-btcradar-grid p {
margin: 0;
color: #aeb8c8;
font-size: 14px;
line-height: 1.45;
}

.btcradar-example-box {
margin-top: 16px;
padding: 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
color: #aeb8c8;
}

.btcradar-example-box p {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.5;
}

.btcradar-example-box p:last-child {
margin-bottom: 0;
}

.btcradar-example-box strong {
color: #ffffff;
}

.disclaimer {
margin-top: 20px;
color: #7f8ca3;
font-size: 13px;
line-height: 1.5;
}

.bullish {
color: #35f2a1;
}

.bearish {
color: #ff5c7a;
}

.neutral {
color: #f0c35a;
}

#marketMode.bullish {
color: #35f2a1;
}

#marketMode.bearish {
color: #ff5c7a;
}

#marketMode.neutral {
color: #f0c35a;
}

@media (max-width: 800px) {
.about-btcradar-top {
flex-direction: column;
align-items: flex-start;
}

.about-btcradar-top span {
white-space: normal;
}

.about-btcradar-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 700px) {
.state-bar {
grid-template-columns: 1fr;
}

.metric-grid {
grid-template-columns: 1fr;
}

.alignment-breakdown {
grid-template-columns: 1fr;
}

.history-summary {
grid-template-columns: 1fr;
}

.history-item {
grid-template-columns: 1fr;
gap: 6px;
}

.history-score,
.history-price {
text-align: left;
}

.history-header,
.chart-header {
flex-direction: column;
align-items: flex-start;
}

.chart-stats {
grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
h1 {
font-size: 38px;
}

.card-header {
flex-direction: column;
align-items: flex-start;
}

.details-grid {
grid-template-columns: 1fr;
}

.price-row h3 {
font-size: 34px;
}
}
.site-contact {
  margin-top: 16px;
  color: #7f8ca3;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.site-contact a {
  color: #9fb7ff;
  text-decoration: none;
}

.site-contact a:hover {
  text-decoration: underline;
}
.reason-term {
  position: relative;
  display: inline-block;
  color: #66b3ff;
  font-weight: 700;
  cursor: help;
  border-bottom: 1px dotted rgba(102, 179, 255, 0.45);
}

.reason-term::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 260px;
  max-width: min(260px, 70vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: #162338;
  color: #dce8ff;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(102, 179, 255, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 20;
  pointer-events: none;
}

.reason-term::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: calc(100% + 2px);
  width: 10px;
  height: 10px;
  background: #162338;
  border-left: 1px solid rgba(102, 179, 255, 0.18);
  border-top: 1px solid rgba(102, 179, 255, 0.18);
  transform: rotate(45deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 19;
  pointer-events: none;
}

.reason-term:hover::after,
.reason-term:hover::before,
.reason-term:focus::after,
.reason-term:focus::before,
.reason-term:focus-visible::after,
.reason-term:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reason-term:focus,
.reason-term:focus-visible {
  outline: 2px solid rgba(102, 179, 255, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-panel {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
}

.faq-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.faq-top span {
  color: #9fb7ff;
  font-size: 13px;
  border: 1px solid rgba(159, 183, 255, 0.25);
  background: rgba(159, 183, 255, 0.08);
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 16px;
  color: #ffffff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  color: #66b3ff;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin: 0;
  padding: 0 16px 16px;
  color: #aeb8c8;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 800px) {
  .faq-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-top span {
    white-space: normal;
  }
}