:root {
  --sound-navy: #063247;
  --sound-cyan: #13bfe8;
  --sound-green: #36b982;
  --sound-orange: #ff7300;

  --sound-muted: #647b89;

  --sound-border:
    rgba(6, 50, 71, 0.11);

  --sound-panel:
    rgba(255, 255, 255, 0.90);
}


.gcg-sound-app {
  padding-bottom: 50px;
}


/* HERO */

.gcg-sound-hero {
  padding:
    46px 0 28px;
}


.gcg-sound-hero h1 {
  margin:
    8px 0 12px;

  color:
    var(--sound-navy);

  font-size:
    clamp(42px, 6vw, 72px);

  line-height:
    1.02;

  letter-spacing:
    -0.04em;
}


.gcg-sound-lead {
  max-width:
    760px;

  color:
    var(--sound-muted);

  font-size:
    17px;

  line-height:
    1.65;
}


.gcg-sound-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    22px;
}


.gcg-sound-status {
  display:
    inline-flex;

  margin-top:
    16px;

  padding:
    8px 11px;

  border:
    1px solid var(--sound-border);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.8);

  color:
    var(--sound-muted);

  font-size:
    12px;

  font-weight:
    700;
}


.gcg-sound-status.active {
  border-color:
    rgba(54,185,130,.25);

  background:
    rgba(54,185,130,.06);

  color:
    #247353;
}



/* LAYOUT */

.gcg-sound-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(300px, .65fr);

  gap:
    16px;
}


.gcg-sound-panel {
  padding:
    20px;

  border:
    1px solid var(--sound-border);

  border-radius:
    24px;

  background:
    var(--sound-panel);

  box-shadow:
    0 16px 44px
    rgba(6,50,71,.07);
}



/* HEADER */

.gcg-panel-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-bottom:
    16px;
}


.gcg-panel-label {
  display:
    block;

  color:
    var(--sound-orange);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.gcg-panel-header strong {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--sound-navy);

  font-size:
    18px;
}


.gcg-event-status {
  padding:
    8px 10px;

  border:
    1px solid var(--sound-border);

  border-radius:
    999px;

  color:
    var(--sound-muted);

  font-size:
    11px;

  font-weight:
    800;
}


.gcg-event-status.active {
  border-color:
    rgba(54,185,130,.25);

  background:
    rgba(54,185,130,.07);

  color:
    #247353;
}



/* CANVAS */

#spectrum {
  display:
    block;

  width:
    100%;

  height:
    350px;

  border:
    1px solid
    rgba(6,50,71,.08);

  border-radius:
    18px;

  background:

    linear-gradient(
      180deg,
      rgba(239,250,253,.95),
      rgba(247,251,253,.98)
    );
}



/* METER */

.gcg-meter {
  margin-top:
    16px;
}


.gcg-meter-track {
  position:
    relative;

  height:
    15px;

  overflow:
    visible;

  border-radius:
    999px;

  background:
    #edf3f5;
}


.gcg-meter-fill {
  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:

    linear-gradient(
      90deg,
      #36b982,
      #e3b52c,
      #ef6868
    );

  transition:
    width .06s linear;
}


.gcg-meter-threshold {
  position:
    absolute;

  top:
    -5px;

  bottom:
    -5px;

  width:
    2px;

  background:
    var(--sound-navy);
}


.gcg-meter-labels {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    6px;

  color:
    #8da0aa;

  font-size:
    10px;
}



/* MÉTRICAS */

.gcg-noise-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    10px;

  margin-top:
    18px;
}


.gcg-noise-grid article {
  padding:
    14px;

  border:
    1px solid
    var(--sound-border);

  border-radius:
    14px;

  background:
    rgba(248,252,253,.8);
}


.gcg-noise-grid span {
  display:
    block;

  color:
    var(--sound-muted);

  font-size:
    11px;
}


.gcg-noise-grid strong {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--sound-navy);
}



/* CONTROLES */

.gcg-controls-panel {
  display:
    flex;

  flex-direction:
    column;

  gap:
    22px;
}


.gcg-control-group {
  padding-bottom:
    18px;

  border-bottom:
    1px solid
    var(--sound-border);
}


.gcg-control-group label {
  display:
    flex;

  justify-content:
    space-between;

  margin-bottom:
    9px;

  color:
    var(--sound-navy);

  font-weight:
    800;
}


.gcg-control-group label strong {
  color:
    var(--sound-cyan);
}


.gcg-control-group input[type="range"] {
  width:
    100%;
}


.gcg-control-group small {
  display:
    block;

  margin-top:
    8px;

  color:
    var(--sound-muted);

  line-height:
    1.45;
}


.gcg-control-group select {
  width:
    100%;

  padding:
    12px;

  border:
    1px solid
    var(--sound-border);

  border-radius:
    12px;

  background:
    #ffffff;

  color:
    var(--sound-navy);
}



/* TOGGLES */

.gcg-toggle-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;
}


.gcg-toggle-row strong {
  display:
    block;

  color:
    var(--sound-navy);
}


.gcg-toggle-row span {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--sound-muted);

  font-size:
    12px;
}


.gcg-toggle-row input {
  width:
    20px;

  height:
    20px;
}



/* WARNING */

.gcg-sound-warning {
  padding:
    14px;

  border:
    1px solid
    rgba(231,173,40,.20);

  border-radius:
    14px;

  background:
    rgba(255,248,226,.8);
}


.gcg-sound-warning strong {
  color:
    #9a6a00;
}


.gcg-sound-warning p {
  margin:
    6px 0 0;

  color:
    #7c7053;

  font-size:
    12px;

  line-height:
    1.45;
}



/* EVENTOS */

.gcg-events-panel {
  margin-top:
    16px;
}


.gcg-event-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    14px;

  margin-top:
    8px;

  padding:
    12px 14px;

  border:
    1px solid
    var(--sound-border);

  border-radius:
    13px;

  background:
    rgba(248,252,253,.88);
}


.gcg-event-row strong {
  color:
    var(--sound-navy);
}


.gcg-event-row span {
  color:
    var(--sound-muted);

  font-size:
    12px;
}


.gcg-empty-events {
  color:
    var(--sound-muted);

  padding:
    8px 0;
}



/* DISCLAIMER */

.gcg-sound-disclaimer {
  margin-top:
    16px;

  padding:
    18px 20px;

  border:
    1px solid
    var(--sound-border);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.72);
}


.gcg-sound-disclaimer strong {
  color:
    var(--sound-navy);
}


.gcg-sound-disclaimer p {
  margin:
    6px 0 0;

  color:
    var(--sound-muted);

  font-size:
    13px;

  line-height:
    1.55;
}



/* RESPONSIVE */

@media (max-width: 850px) {

  .gcg-sound-layout {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 620px) {

  .gcg-sound-hero h1 {
    font-size:
      42px;
  }


  .gcg-sound-actions > * {
    width:
      100%;
  }


  #spectrum {
    height:
      250px;
  }


  .gcg-noise-grid {
    grid-template-columns:
      1fr;
  }


  .gcg-event-row {
    flex-direction:
      column;
  }

}