/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --dark:       #00081E;
      --navy:       #010E30;
      --navy-mid:   #041630;
      --navy-light: #0a1e45;
      --slate:      #767B9A;
      --slate-deep: #3d4266;
      --light:      #EDEDED;
      --light-dim:  #b0b3c0;
      --gold:       #BEB998;
      --gold-deep:  #8a8570;
    }

    body {
      background: var(--navy);
      color: var(--light);
      font-family: 'Trebuchet MS', 'Gill Sans', sans-serif;
      min-height: 100vh;
      padding: 36px 24px 56px;
    }

    /* ── Header ── */
    .header {
      text-align: center;
      margin-bottom: 36px;
    }
    .header-badge {
      display: inline-block;
      border-top: 1px solid var(--gold-deep);
      border-bottom: 1px solid var(--gold-deep);
      padding: 6px 28px;
      margin-bottom: 14px;
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 5px;
      text-transform: uppercase;
    }
    .header h1 {
      font-family: Georgia, serif;
      font-weight: 400;
      font-size: 26px;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      color: var(--light);
    }
    .header h1 span { color: var(--gold); }
    .header p {
      color: var(--slate);
      font-size: 13px;
    }

    /* ── Layout ── */
    .layout {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      max-width: 1140px;
      margin: 0 auto;
    }

    /* ── Painel esquerdo ── */
    .panel-left {
      background: linear-gradient(180deg, var(--navy-mid) 0%, var(--dark) 100%);
      border: 1px solid var(--navy-light);
      border-radius: 12px;
      padding: 24px 22px;
      flex: 0 0 300px;
      min-width: 260px;
    }

    /* ── Painel direito ── */
    .panel-right {
      flex: 1;
      min-width: 340px;
    }

    /* ── Section title ── */
    .section-title {
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--navy-light);
      padding-bottom: 8px;
    }

    /* ── Sliders ── */
    .slider-wrap {
      margin-bottom: 20px;
    }
    .slider-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 5px;
    }
    .slider-label {
      color: var(--light-dim);
      font-size: 12px;
    }
    .slider-value {
      font-family: Georgia, serif;
      font-size: 15px;
      font-weight: 700;
    }
    .slider-footer {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--slate-deep);
      margin-top: 3px;
    }
    .slider-footer .hint {
      color: var(--slate-deep);
      font-style: italic;
    }
    input[type="range"] {
      width: 100%;
      cursor: pointer;
      height: 4px;
      border-radius: 2px;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
    }
    input[type="range"].gold {
      accent-color: var(--gold);
      background: linear-gradient(to right, var(--gold) 0%, var(--slate-deep) 0%);
    }
    input[type="range"].slate {
      accent-color: var(--slate);
      background: linear-gradient(to right, var(--slate) 0%, var(--slate-deep) 0%);
    }
    input[type="range"].gold-deep {
      accent-color: var(--gold-deep);
      background: linear-gradient(to right, var(--gold-deep) 0%, var(--slate-deep) 0%);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--dark);
      cursor: pointer;
    }
    input[type="range"].gold::-webkit-slider-thumb  { background: var(--gold); }
    input[type="range"].slate::-webkit-slider-thumb { background: var(--slate); }
    input[type="range"].gold-deep::-webkit-slider-thumb { background: var(--gold-deep); }

    /* ── Resumo de retornos ── */
    .returns-box {
      margin-top: 8px;
      background: var(--dark);
      border: 1px solid var(--navy-light);
      border-radius: 8px;
      padding: 14px 16px;
    }
    .returns-box .box-title {
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .returns-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 12px;
    }
    .returns-row span:first-child { color: var(--light-dim); }

    /* ── Cards ── */
    .cards {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .card {
      background: linear-gradient(145deg, var(--navy-mid) 0%, var(--dark) 100%);
      border-radius: 10px;
      padding: 14px 18px;
      flex: 1;
      min-width: 140px;
    }
    .card-label {
      color: var(--slate);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 8px;
    }
    .card-value {
      font-family: Georgia, serif;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }
    .card-sub {
      color: var(--light-dim);
      font-size: 11px;
      margin-top: 6px;
    }

    /* ── Chart containers ── */
    .chart-box {
      background: linear-gradient(180deg, var(--navy-mid) 0%, var(--dark) 100%);
      border: 1px solid var(--navy-light);
      border-radius: 12px;
      padding: 20px 20px 16px;
      margin-bottom: 16px;
    }
    .chart-box p {
      color: var(--slate);
      font-size: 11px;
      margin-bottom: 14px;
    }
    .chart-wrap {
      position: relative;
    }
    canvas { max-width: 100%; }

    /* ── Legend manual ── */
    .legend {
      display: flex;
      gap: 20px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--light-dim);
    }
    .legend-dot {
      width: 24px;
      height: 3px;
      border-radius: 2px;
    }

    /* ── Insight ── */
    .insight {
      background: linear-gradient(135deg, var(--navy-mid) 0%, var(--dark) 100%);
      border: 1px solid var(--gold-deep);
      border-radius: 10px;
      padding: 18px 22px;
      margin-bottom: 16px;
    }
    .insight-title {
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .insight-dot {
      width: 6px;
      height: 6px;
      background: var(--gold);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .insight p {
      color: var(--light-dim);
      font-size: 13px;
      line-height: 1.75;
    }
    .insight strong.gold  { color: var(--gold); }
    .insight strong.slate { color: var(--slate); }

    /* ── Tooltip ── */
    #tooltip {
      position: fixed;
      background: var(--dark);
      border: 1px solid var(--gold);
      border-radius: 8px;
      padding: 12px 16px;
      min-width: 210px;
      font-size: 12px;
      pointer-events: none;
      display: none;
      z-index: 999;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    .tt-title { color: var(--gold); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
    .tt-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
    .tt-sep { border-top: 1px solid var(--slate-deep); margin-top: 8px; padding-top: 8px; display: flex; justify-content: space-between; }
    .tt-dim { color: var(--light-dim); }

    /* ── Footer ── */
    footer {
      text-align: center;
      margin-top: 40px;
      border-top: 1px solid var(--navy-light);
      padding-top: 20px;
      color: var(--slate-deep);
      font-size: 11px;
      letter-spacing: 0.5px;
    }