:root {
  --bg: #050b14;
  --panel: #0b1524;
  --panel2: #101d30;
  --line: #20324c;

  --txt: #ecf5ff;
  --muted: #8ea3ba;

  --cyan: #42d7ff;
  --blue: #3887ff;
  --green: #41d58b;
  --red: #ff5d70;
  --amber: #ffc55b;

  --shadow:
    0 18px 50px
    rgba(0,0,0,.38);
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;

  background:
    radial-gradient(
      circle at 50% -10%,
      #15304d 0,
      #081321 28%,
      var(--bg) 67%
    );

  color: var(--txt);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


body {
  min-height: 100vh;
}


.shell {
  width: min(760px,100%);

  margin: auto;

  padding:
    calc(18px + env(safe-area-inset-top))
    14px
    calc(28px + env(safe-area-inset-bottom));
}


.topbar {
  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    7px
    4px
    18px;
}


.brandmark {
  width: 46px;
  height: 46px;

  border-radius: 15px;

  display: grid;
  place-items: center;

  font-weight: 900;
  font-size: 24px;

  color: #04111d;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #8af0ff
    );

  box-shadow:
    0 0 26px
    rgba(66,215,255,.25);
}


.brandmark.large {
  width: 62px;
  height: 62px;

  border-radius: 20px;

  font-size: 32px;

  margin:
    0 auto 14px;
}


.brandtext {
  min-width: 0;
}


.topbar h1 {
  font-size: 22px;
  letter-spacing: .18em;

  margin: 0;
}


.topbar p {
  margin:
    3px 0 0;

  color: var(--muted);

  font-size: 13px;
}


.iconBtn {
  margin-left: auto;

  background: #0c1829;

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

  color: white;

  border-radius: 13px;

  width: 43px;
  height: 43px;

  font-size: 17px;
}


.card {
  background:
    linear-gradient(
      160deg,
      rgba(16,29,48,.97),
      rgba(8,18,32,.97)
    );

  border:
    1px solid
    rgba(109,164,213,.18);

  border-radius: 23px;

  padding: 18px;

  box-shadow:
    var(--shadow);

  margin-bottom: 14px;

  backdrop-filter:
    blur(16px);
}


.eyebrow {
  color: #75dbff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .16em;

  margin-bottom: 12px;
}


.roles {
  display: grid;

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

  gap: 9px;
}


.role {
  min-height: 86px;

  text-align: left;

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

  border-radius: 17px;

  background:
    #091525;

  color:
    var(--txt);

  padding: 12px;

  display: grid;

  grid-template-columns:
    30px 1fr;

  grid-template-rows:
    auto auto;

  align-items: center;

  transition:
    .18s ease;
}


.role span {
  grid-row:
    1 / 3;

  font-size: 18px;

  color:
    var(--muted);
}


.role b {
  font-size: 14px;
}


.role small {
  font-size: 11px;

  color:
    var(--muted);

  margin-top: 3px;
}


.role.active {
  border-color:
    var(--cyan);

  background:
    linear-gradient(
      145deg,
      rgba(37,119,166,.28),
      rgba(9,21,37,.94)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(66,215,255,.17);
}


.role.active span {
  color:
    var(--cyan);
}


.statusRow {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #c9d9e8;

  font-size: 13px;
}


.statusRow strong {
  margin-left: auto;

  font-variant-numeric:
    tabular-nums;

  font-size: 19px;

  letter-spacing: .04em;
}


.dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--green);

  box-shadow:
    0 0 12px
    var(--green);
}


.dot.recording {
  background:
    var(--red);

  box-shadow:
    0 0 14px
    var(--red);

  animation:
    pulse 1.1s infinite;
}


@keyframes pulse {
  50% {
    transform:
      scale(1.55);

    opacity:
      .65;
  }
}


.waveWrap {
  position: relative;

  height: 170px;

  margin:
    15px -4px 16px;

  border-radius: 18px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #07111f,
      #07101b
    );

  border:
    1px solid
    rgba(63,122,174,.18);
}


#wave {
  width: 100%;
  height: 100%;

  display: block;
}


#waveHint {
  position: absolute;

  inset: 0;

  display: grid;
  place-items: center;

  color:
    #607a94;

  font-size:
    12px;

  pointer-events:
    none;
}


.controls {
  display: grid;

  grid-template-columns:
    1.25fr 1fr;

  gap: 10px;
}


button {
  cursor: pointer;

  font:
    inherit;

  font-weight:
    800;

  border:
    0;
}


button:disabled {
  opacity:
    .35;

  cursor:
    not-allowed;
}


.primary,
.primary2 {
  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #3a8cff
    );

  color:
    #04111d;
}


.primary,
.danger {
  height:
    52px;

  border-radius:
    16px;

  letter-spacing:
    .04em;
}


.danger {
  background:
    #36131c;

  color:
    #ff91a0;

  border:
    1px solid
    #6d2635;
}


.mic {
  display:
    inline-block;

  margin-right:
    5px;

  color:
    #07111c;
}


.limit {
  text-align:
    center;

  color:
    var(--muted);

  font-size:
    11px;

  margin:
    11px 0 0;
}


.silence {
  width:
    100%;

  margin-top:
    10px;

  height:
    46px;

  border-radius:
    14px;

  background:
    #2c240f;

  color:
    #ffd977;

  border:
    1px solid
    #66541c;
}


.processing {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.processing small {
  display:
    block;

  color:
    var(--muted);

  margin-top:
    5px;
}


.spinner {
  width:
    34px;

  height:
    34px;

  border:
    3px solid
    #24405d;

  border-top-color:
    var(--cyan);

  border-radius:
    50%;

  animation:
    spin .85s linear infinite;
}


@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}


.resultHead {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;
}


.result h2 {
  margin:
    0 0 13px;

  font-size:
    20px;
}


.ready {
  font-size:
    10px;

  letter-spacing:
    .11em;

  color:
    var(--green);

  border:
    1px solid
    #246847;

  background:
    #0e2e21;

  padding:
    6px 8px;

  border-radius:
    99px;
}


textarea {
  width:
    100%;

  min-height:
    310px;

  resize:
    vertical;

  background:
    #06101c;

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

  color:
    #eaf4ff;

  border-radius:
    16px;

  padding:
    15px;

  line-height:
    1.6;

  font:
    14px/1.6
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  outline:
    none;
}


textarea:focus {
  border-color:
    #3b8cc6;
}


.shareGrid {
  display:
    grid;

  grid-template-columns:
    .8fr 1fr 1fr;

  gap:
    8px;

  margin-top:
    11px;
}


.shareGrid button,
.ghost,
.loginCard button {
  height:
    46px;

  border-radius:
    14px;

  background:
    #15243a;

  color:
    white;

  border:
    1px solid
    #2a405c;
}


.shareGrid .primary2,
.loginCard .primary2 {
  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #3a8cff
    );

  color:
    #04111d;

  border:
    0;
}


.shareGrid .whatsapp {
  background:
    #103521;

  color:
    #80e6ad;

  border-color:
    #245c3b;
}


.ghost {
  width:
    100%;

  margin-top:
    11px;

  background:
    transparent;
}


details {
  margin-top:
    12px;

  border-top:
    1px solid
    var(--line);

  padding-top:
    12px;
}


summary {
  cursor:
    pointer;

  color:
    #90a7be;

  font-size:
    12px;
}


pre {
  white-space:
    pre-wrap;

  color:
    #aebed0;

  font:
    12px/1.55
    ui-monospace,
    monospace;

  max-height:
    220px;

  overflow:
    auto;
}


audio {
  width:
    100%;

  margin-top:
    13px;
}


footer {
  text-align:
    center;

  color:
    #536b82;

  font-size:
    10px;

  padding:
    7px;
}


.hidden {
  display:
    none !important;
}


.modal {
  position:
    fixed;

  z-index:
    50;

  inset:
    0;

  background:
    rgba(2,7,13,.82);

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  backdrop-filter:
    blur(12px);
}


.loginCard {
  width:
    min(360px,100%);

  background:
    #0d1929;

  border:
    1px solid
    #29415e;

  border-radius:
    24px;

  padding:
    24px;

  box-shadow:
    var(--shadow);

  text-align:
    center;
}


.loginCard h2 {
  margin:
    6px 0;
}


.loginCard p {
  color:
    var(--muted);

  font-size:
    13px;
}


.loginCard input {
  width:
    100%;

  height:
    52px;

  border-radius:
    14px;

  background:
    #07111e;

  border:
    1px solid
    #2a405b;

  color:
    white;

  text-align:
    center;

  font-size:
    22px;

  letter-spacing:
    .18em;

  margin:
    8px 0 10px;

  outline:
    none;
}


.loginCard button {
  width:
    100%;
}


.loginCard small {
  display:
    block;

  color:
    #ff8d9b;

  margin-top:
    10px;

  min-height:
    16px;
}


.toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    calc(
      22px +
      env(safe-area-inset-bottom)
    );

  transform:
    translate(-50%,20px);

  background:
    #e9f6ff;

  color:
    #07101a;

  padding:
    10px 15px;

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    800;

  opacity:
    0;

  pointer-events:
    none;

  transition:
    .2s;

  z-index:
    80;

  white-space:
    nowrap;
}


.toast.show {
  opacity:
    1;

  transform:
    translate(-50%,0);
}


@media(max-width:540px) {

  .shell {
    padding-left:
      10px;

    padding-right:
      10px;
  }


  .card {
    padding:
      14px;

    border-radius:
      20px;
  }


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


  .role {
    min-height:
      82px;

    padding:
      10px;
  }


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


  .waveWrap {
    height:
      150px;
  }


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


  .shareGrid .whatsapp {
    grid-column:
      1 / 3;
  }


  textarea {
    min-height:
      280px;
  }
}