:root {
  --sos-navy: #063247;
  --sos-cyan: #13bfe8;
  --sos-orange: #ff7300;
  --sos-red: #e94f55;
  --sos-muted: #647b89;

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

  --sos-panel:
    rgba(255, 255, 255, 0.91);
}


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


/* HERO */

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


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

  color: var(--sos-navy);

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

  line-height: 1.02;

  letter-spacing: -0.04em;
}


.gcg-sos-lead {
  max-width: 780px;

  color: var(--sos-muted);

  font-size: 17px;

  line-height: 1.65;
}


/* LAYOUT */

.gcg-sos-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(300px, 0.7fr);

  gap: 16px;
}


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

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

  border-radius: 24px;

  background:
    var(--sos-panel);

  box-shadow:
    0 16px 44px
    rgba(6, 50, 71, 0.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(--sos-orange);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.12em;
}


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

  margin-top: 5px;

  color: var(--sos-navy);

  font-size: 18px;
}


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

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

  border-radius: 999px;

  color: var(--sos-muted);

  font-size: 11px;

  font-weight: 800;
}


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

  background:
    rgba(54, 185, 130, 0.07);

  color:
    #247353;
}


/* SIGNAL DISPLAY */

.gcg-signal-display {
  min-height: 360px;

  display: grid;

  place-items: center;

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

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f5fafc
    );

  overflow: hidden;
}


.gcg-signal-display.active {
  background:
    #ffffff;
}


.gcg-signal-text {
  color:
    var(--sos-navy);

  font-size:
    clamp(70px, 12vw, 150px);

  font-weight:
    900;

  letter-spacing:
    0.06em;

  transition:
    opacity 0.08s linear,
    transform 0.08s linear;
}


.gcg-signal-text.flash-on {
  opacity: 1;

  transform:
    scale(1.04);
}


.gcg-signal-text.flash-off {
  opacity: 0.05;
}


/* ACTIONS */

.gcg-sos-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}


/* CONTROLS */

.gcg-sos-controls {
  display: flex;

  flex-direction: column;

  gap: 14px;
}


.gcg-sos-controls h2 {
  margin: 7px 0 6px;

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


.gcg-mode-btn {
  width: 100%;

  padding: 16px;

  text-align: left;

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

  border-radius: 14px;

  background:
    rgba(248, 252, 253, 0.9);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.gcg-mode-btn:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(19, 191, 232, 0.30);

  background:
    #ffffff;
}


.gcg-mode-btn strong {
  display: block;

  color: var(--sos-navy);

  font-size: 14px;
}


.gcg-mode-btn span {
  display: block;

  margin-top: 4px;

  color: var(--sos-muted);

  font-size: 12px;

  line-height: 1.4;
}


/* WARNING */

.gcg-sos-warning {
  margin-top: 4px;

  padding: 14px;

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

  border-radius: 14px;

  background:
    rgba(255, 248, 226, 0.80);
}


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


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

  color: #7c7053;

  font-size: 12px;

  line-height: 1.45;
}


/* INFO */

.gcg-sos-info {
  margin-top: 16px;

  padding: 18px 20px;

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

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.74);
}


.gcg-sos-info strong {
  color: var(--sos-navy);
}


.gcg-sos-info p {
  margin: 6px 0 0;

  color: var(--sos-muted);

  font-size: 13px;

  line-height: 1.55;
}


/* FULLSCREEN */

.gcg-fullscreen-signal {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: none;

  place-items: center;

  background: #ffffff;
}


.gcg-fullscreen-signal.active {
  display: grid;
}


.gcg-fullscreen-content {
  color: #000000;

  font-size:
    clamp(90px, 20vw, 260px);

  font-weight: 900;

  letter-spacing: 0.06em;
}


.gcg-fullscreen-close {
  position: absolute;

  top: 18px;
  right: 18px;

  padding: 10px 14px;

  border: 1px solid rgba(0, 0, 0, 0.16);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.88);

  color: #111111;

  font-weight: 800;

  cursor: pointer;
}


/* MOBILE */

@media (max-width: 850px) {

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

}


@media (max-width: 620px) {

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


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


  .gcg-signal-display {
    min-height: 270px;
  }

}