/* G05.207 — Markets Understood Gem Detection Beta */
/* Scoped styling: bestaande header/footer blijven ongemoeid. */

.page-gem-detection .gem-page {
  padding-top: 42px;
  padding-bottom: 75px;
}

.page-gem-detection .gem-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
  gap: 35px;
  align-items: center;
  padding: 48px;
  border: 1px solid rgba(100, 140, 190, .20);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 20%, rgba(42, 119, 186, .16), transparent 45%),
    linear-gradient(135deg, #0d1728, #152840);
  color: #f4f8ff;
  overflow: hidden;
}

.page-gem-detection .gem-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #70c9ee;
}

.page-gem-detection .gem-hero h1 {
  margin: 15px 0 18px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.05;
  letter-spacing: -.045em;
  color: #fff;
}

.page-gem-detection .gem-hero p {
  max-width: 650px;
  color: #c5d4e5;
}

.page-gem-detection .gem-lead {
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 650;
  line-height: 1.45;
}

.page-gem-detection .gem-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.page-gem-detection .gem-hero-tags span,
.page-gem-detection .gem-beta-tag {
  padding: 9px 12px;
  border: 1px solid rgba(112, 201, 238, .25);
  border-radius: 8px;
  color: #bde9fa;
  background: rgba(112, 201, 238, .08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
}

.page-gem-detection .gem-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 290px;
}

.page-gem-detection .gem-orbit {
  position: absolute;
  border: 1px solid rgba(112, 201, 238, .20);
  border-radius: 50%;
}

.page-gem-detection .gem-orbit-one {
  width: 160px;
  height: 160px;
}

.page-gem-detection .gem-orbit-two {
  width: 245px;
  height: 245px;
}

.page-gem-detection .gem-orbit-three {
  width: 320px;
  height: 320px;
}

.page-gem-detection .gem-visual-core {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 135px;
  height: 135px;
  border: 1px solid rgba(112, 201, 238, .55);
  border-radius: 30px;
  background: linear-gradient(145deg, #203c5f, #101e32);
  box-shadow: 0 0 70px rgba(53, 159, 220, .18);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.08em;
}

.page-gem-detection .gem-visual-core span {
  font-size: 13px;
  letter-spacing: .24em;
  color: #70c9ee;
}

.page-gem-detection .gem-workspace {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid #dbe4ed;
  border-radius: 20px;
  background: #fff;
}

.page-gem-detection .gem-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.page-gem-detection .gem-section-heading h2 {
  margin: 7px 0 0;
  color: #14243a;
  font-size: clamp(23px, 3vw, 32px);
}

.page-gem-detection .gem-beta-tag {
  color: #126286;
  background: #eaf8fd;
  white-space: nowrap;
}

.page-gem-detection .gem-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 25px;
}

.page-gem-detection .gem-metrics > div {
  padding: 18px;
  border: 1px solid #e1e9f0;
  border-radius: 12px;
  background: #f6f9fc;
}

.page-gem-detection .gem-metrics span,
.page-gem-detection .gem-metrics strong {
  display: block;
}

.page-gem-detection .gem-metrics span {
  margin-bottom: 7px;
  color: #60748c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
}

.page-gem-detection .gem-metrics strong {
  color: #173353;
  font-size: 20px;
}

.page-gem-detection .gem-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e9f0;
  border-radius: 12px;
}

.page-gem-detection .gem-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}

.page-gem-detection .gem-table th {
  padding: 15px;
  text-align: left;
  color: #55708b;
  background: #f0f5fa;
  font-size: 12px;
}

.page-gem-detection .gem-table td {
  padding: 16px 15px;
  border-top: 1px solid #e8edf3;
  color: #253a50;
  font-size: 13px;
}

.page-gem-detection .gem-empty {
  padding: 38px !important;
  text-align: center;
  color: #6a7f92 !important;
}

.page-gem-detection .gem-disclaimer {
  margin: 19px 0 0;
  color: #64768a;
  font-size: 12px;
}

@media (max-width: 800px) {
  .page-gem-detection .gem-hero {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .page-gem-detection .gem-hero-visual {
    min-height: 200px;
  }

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

  .page-gem-detection .gem-workspace {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .page-gem-detection .gem-hero {
    padding: 24px;
  }

  .page-gem-detection .gem-hero-visual {
    display: none;
  }

  .page-gem-detection .gem-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* G05.239 — Gem cockpit filters */
.page-gem-detection .gem-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 22px;
}
.page-gem-detection .gem-controls label {
  display: grid;
  flex: 1 1 180px;
  gap: 7px;
  color: #526983;
  font-size: 12px;
  font-weight: 700;
}
.page-gem-detection .gem-controls select,
.page-gem-detection .gem-controls input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d7e3ee;
  border-radius: 9px;
  background: #f8fbfe;
  color: #173353;
  font: inherit;
  font-size: 14px;
}
.page-gem-detection .gem-controls :focus-visible {
  outline: 2px solid #268ab8;
  outline-offset: 2px;
}
.page-gem-detection .gem-table tbody tr:hover {
  background: #f4f9fd;
}

/* G05 Gem Intelligence 2.0 — development */
.page-gem-detection .gem-v2-intro {
  margin: 24px 0;
}
.page-gem-detection .gem-v2-table {
  min-width: 850px;
}
.page-gem-detection .gem-v2-drawer[hidden] {
  display: none;
}
.page-gem-detection .gem-v2-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.page-gem-detection .gem-v2-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 16, 30, .72);
}
.page-gem-detection .gem-v2-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(760px, 100%);
  overflow-y: auto;
  padding: 30px;
  background: #fff;
  color: #18324d;
  box-shadow: -12px 0 40px rgba(0,0,0,.2);
}
.page-gem-detection .gem-v2-panel section {
  margin-top: 28px;
}
.page-gem-detection .gem-v2-chart-placeholder {
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 24px;
  border: 1px dashed #9baec2;
  border-radius: 12px;
  background: #f3f7fb;
  color: #526c84;
  text-align: center;
}
@media(max-width:600px) {
  .page-gem-detection .gem-v2-panel {
    padding: 20px;
  }
}


/* G05.253 PREMIUM UI — DEV ONLY */

.page-gem-detection .gem-workspace {
  border: 1px solid #263d59;
  background: linear-gradient(155deg,#101b2d,#16283f);
  box-shadow: 0 18px 45px rgba(10,23,42,.16);
}

.page-gem-detection .gem-section-heading h2,
.page-gem-detection .gem-v2-intro h2 {
  color: #f3f8ff;
}

.page-gem-detection .gem-v2-intro p {
  color: #b2c3d7;
  line-height: 1.7;
}

.page-gem-detection .gem-metrics > div {
  background: #1b2d46;
  border-color: #304864;
}

.page-gem-detection .gem-metrics strong {
  color: #ecf5ff;
}

.page-gem-detection .gem-metrics span {
  color: #aac2d9;
}

.page-gem-detection .gem-table-wrap {
  border-color: #304864;
  background: #13233a;
}

.page-gem-detection .gem-table th {
  color: #b8d5ee;
  background: #1c304b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.page-gem-detection .gem-table td {
  color: #e7f0fc;
  border-color: #30435c;
}

.page-gem-detection .gem-v2-result {
  transition: background .2s ease;
}

.page-gem-detection .gem-v2-result:hover {
  background: #203650;
}

.page-gem-detection .gem-v2-market {
  white-space: nowrap;
}

.page-gem-detection .gem-v2-market strong {
  color: #ffffff;
}

.page-gem-detection .gem-v2-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 35px;
  margin-right: 12px;
  padding: 0 7px;
  border: 1px solid #3d749c;
  border-radius: 9px;
  background: #203e5c;
  color: #8cddff;
  font-size: 12px;
  font-weight: 800;
}

.page-gem-detection .gem-v2-stage {
  color: #67d4e8 !important;
  font-weight: 700;
}

.page-gem-detection .gem-v2-change {
  font-weight: 800;
  white-space: nowrap;
}

.page-gem-detection .gem-v2-change.is-positive {
  color: #55dfaa;
}

.page-gem-detection .gem-v2-change.is-negative {
  color: #ff858c;
}

.page-gem-detection .gem-v2-change.is-neutral {
  color: #bacce0;
}

.page-gem-detection .gem-v2-change.is-unknown {
  color: #8da0b7;
}

.page-gem-detection .gem-v2-quality.is-provisional {
  color: #ffd181;
  font-weight: 750;
}

.page-gem-detection .gem-v2-quality.is-unknown {
  color: #acbacc;
}

.page-gem-detection .gem-v2-analyse-button {
  padding: 10px 15px;
  border: 1px solid #3889b8;
  border-radius: 9px;
  background: #20557d;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease,transform .2s ease;
}

.page-gem-detection .gem-v2-analyse-button:hover {
  background: #2b78a9;
  transform: translateY(-1px);
}

.page-gem-detection .gem-v2-analyse-button:focus-visible,
.page-gem-detection #gem-v2-close:focus-visible {
  outline: 3px solid #58c5f5;
  outline-offset: 3px;
}

.page-gem-detection .gem-v2-panel {
  background: linear-gradient(160deg,#101d30,#1c3049);
  color: #f0f6ff;
  border-left: 1px solid #3b5874;
}

.page-gem-detection .gem-v2-panel h2 {
  color: #ffffff;
  font-size: clamp(25px,3vw,35px);
}

.page-gem-detection .gem-v2-panel h3 {
  color: #79d8fa;
  border-bottom: 1px solid #385069;
  padding-bottom: 11px;
}

.page-gem-detection .gem-v2-panel p,
.page-gem-detection .gem-v2-panel li {
  color: #d4e3f1;
  line-height: 1.7;
}

.page-gem-detection #gem-v2-summary li {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-left: 3px solid #51c6db;
  border-radius: 8px;
  background: #233b54;
  list-style: none;
}

.page-gem-detection #gem-v2-summary ul {
  margin: 18px 0;
  padding: 0;
}

.page-gem-detection #gem-v2-summary li::before {
  content: "◆";
  margin-right: 10px;
  color: #79d8fa;
}

.page-gem-detection #gem-v2-technical p {
  padding: 11px 13px;
  margin: 7px 0;
  border: 1px solid #35506b;
  border-radius: 8px;
  background: #203750;
}

.page-gem-detection #gem-v2-risk {
  padding: 18px;
  border: 1px solid #9c7137;
  border-radius: 12px;
  background: #392e2a;
}

.page-gem-detection #gem-v2-risk::before {
  content: "⚠";
  display: inline-block;
  margin-bottom: 8px;
  color: #ffce80;
  font-size: 22px;
}

.page-gem-detection .gem-v2-chart-placeholder {
  color: #b7cada;
  background: #13253b;
  border-color: #47708d;
}

.page-gem-detection #gem-v2-close {
  display: block;
  margin-left: auto;
  padding: 10px 18px;
  border: 1px solid #5d819e;
  border-radius: 8px;
  background: #28445e;
  color: #f1f8ff;
  cursor: pointer;
}

.page-gem-detection .gem-disclaimer {
  color: #b7c9db;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .page-gem-detection .gem-v2-result,
  .page-gem-detection .gem-v2-analyse-button {
    transition: none;
  }
}

/* G05.278 — Premium Intelligence */
.page-gem-detection .gem-v2-table {min-width:1120px}
.page-gem-detection .gem-v2-table th {
  text-align:center;
  vertical-align:middle;
}
.page-gem-detection .gem-v2-table td {
  text-align:center;
  vertical-align:middle;
}
.page-gem-detection .gem-v2-market {
  text-align:left !important;
}
.page-gem-detection .gem-v2-first-age {
  color:#91dfff;
  font-weight:800;
  white-space:nowrap;
}
.page-gem-detection .gem-v2-panel {
  width:min(820px,100%);
}
.page-gem-detection .gem-v2-timeline {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:22px 0;
}
.page-gem-detection .gem-v2-time-card {
  padding:18px;
  border:1px solid #3a709a;
  border-radius:14px;
  background:linear-gradient(135deg,#234b6c,#183149);
  box-shadow:0 5px 16px rgba(0,0,0,.12);
}
.page-gem-detection .gem-v2-time-card span,
.page-gem-detection .gem-v2-time-card small {
  display:block;
  color:#afc9e0;
  font-size:11px;
}
.page-gem-detection .gem-v2-time-card strong {
  display:block;
  color:#7fe4ff;
  font-size:26px;
  margin:8px 0;
}
.page-gem-detection .gem-v2-indicator-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0 22px;
}
.page-gem-detection .gem-v2-indicator {
  padding:16px;
  border:1px solid #3b698c;
  border-radius:13px;
  background:linear-gradient(145deg,#244561,#1a3047);
}
.page-gem-detection .gem-v2-indicator span {
  display:block;
  font-size:11px;
  color:#bad7ee;
  margin-bottom:10px;
}
.page-gem-detection .gem-v2-indicator strong {
  display:block;
  font-size:22px;
  color:#81e9d4;
}
.page-gem-detection .gem-v2-indicator.is-missing strong {
  color:#ffcd89;
}
.page-gem-detection .gem-v2-chart-placeholder {
  min-height:135px;
}
@media(max-width:520px) {
  .page-gem-detection .gem-v2-timeline,
  .page-gem-detection .gem-v2-indicator-grid {
    grid-template-columns:1fr;
  }
}

/* G05.279 Gem chart */
.page-gem-detection .indicator-chart-tools {
 display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;
}
.page-gem-detection .indicator-chart-tools button {
 padding:9px;border-radius:8px;border:1px solid #527896;
 background:#203e58;color:#e5f5ff;cursor:pointer;
}
.page-gem-detection .indicator-chart-tools button[aria-pressed="true"] {
 background:#256a91;border-color:#69c9eb;
}
.page-gem-detection .indicator-chart {
 width:100%;min-height:340px;background:#112237;
}
.page-gem-detection .indicator-volume {
 width:100%;min-height:115px;background:#112237;margin-top:8px;
}
.page-gem-detection #gem-v2-chart-status {
 color:#bdd1e3;font-size:12px;
}

/* G05.280 — white chart retained */
.page-gem-detection .gem-v2-detection-legend {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:12px 0;
  font-size:12px;
  font-weight:700;
  color:#e5f5ff;
}
.page-gem-detection .gem-v2-detection-legend span {
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.page-gem-detection .gem-v2-detection-legend i {
  display:inline-block;
  height:17px;
  width:4px;
  border-radius:2px;
}
.page-gem-detection .gem-first-dot {
  background:#18864d;
}
.page-gem-detection .gem-last-dot {
  background:#1678bd;
}

/* G05.281: detectietijden boven grafiek */
.page-gem-detection .gem-v2-detection-legend {
  align-items:center;
  gap:12px 20px;
  margin:14px 0;
}
.page-gem-detection .gem-v2-detection-legend strong {
  display:inline-block;
  padding:5px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* G05.282 technical analysis */
.page-gem-detection .gem-v2-market-assessment {
  margin:20px 0 26px;
  padding:18px;
  border:1px solid #376585;
  border-radius:15px;
  background:#18344b;
}
.page-gem-detection .gem-v2-market-assessment h3 {
  color:#88f0d7;
  margin:0 0 8px;
  font-size:19px;
}
.page-gem-detection .gem-assessment-intro {
  color:#c3dbe9;
  line-height:1.5;
  margin:0 0 17px;
}
.page-gem-detection .gem-assessment-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.page-gem-detection .gem-assessment-tile {
  padding:14px;
  border:1px solid #527b98;
  border-radius:11px;
  background:#204660;
  min-width:0;
}
.page-gem-detection .gem-assessment-tile span {
  display:block;
  color:#c3deed;
  font-size:12px;
}
.page-gem-detection .gem-assessment-tile strong {
  display:block;
  font-size:20px;
  color:#8beccf;
  margin:8px 0;
  overflow-wrap:anywhere;
}
.page-gem-detection .gem-assessment-tile p {
  color:#d8e8f1;
  font-size:12px;
  line-height:1.5;
  margin:0;
}
.page-gem-detection .gem-assessment-risk {
  margin:14px 0 0;
  padding:11px 13px;
  border-left:3px solid #f2bc73;
  background:#20384b;
  color:#f0e2c9;
  font-size:12px;
  line-height:1.5;
}
.page-gem-detection .gem-v2-indicator[hidden] {
  display:none!important;
}
.page-gem-detection .gem-v2-missing-summary {
  font-size:12px;
  color:#f2ca99;
  line-height:1.6;
}
@media(max-width:640px) {
  .page-gem-detection .gem-assessment-grid {
    grid-template-columns:1fr;
  }
}