:root {
  color-scheme: light;
  --bg: #f5f7f4;
  --surface: #ffffff;
  --surface-strong: #eef4f6;
  --ink: #18201f;
  --muted: #60706d;
  --line: #d8e1dd;
  --accent: #0d7f79;
  --accent-dark: #085e59;
  --warm: #b8572d;
  --shadow: 0 16px 45px rgba(21, 43, 40, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(125deg, rgba(13, 127, 121, 0.08), transparent 34%),
    linear-gradient(315deg, rgba(184, 87, 45, 0.1), transparent 30%),
    var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

button:hover {
  background: var(--accent-dark);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

button.secondary,
button.icon-button,
button.tab-button,
button.link-button,
button.danger,
a.secondary {
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

button.secondary:hover,
button.icon-button:hover,
button.tab-button:hover,
button.tab-button.active,
button.link-button:hover,
a.secondary:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

a.secondary {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button.link-button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
}

button.danger {
  min-height: 36px;
  padding: 0 12px;
  color: #8a2b1c;
  border-color: rgba(184, 87, 45, 0.28);
  background: rgba(184, 87, 45, 0.08);
}

button.danger:hover {
  color: #fff;
  border-color: var(--warm);
  background: var(--warm);
}

a {
  color: var(--accent-dark);
  word-break: break-word;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.topbar,
.landing-hero,
.language-showcase,
.landing-features article,
.auth-panel,
.pricing-panel,
.verify-panel,
.workspace,
.listener,
.site-footer {
  border: 1px solid rgba(216, 225, 221, 0.9);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 12px 24px;
  overflow: visible;
  border-radius: 10px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  height: 80px;
  overflow: visible;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  width: auto;
  height: 86px;
  display: block;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-actions .account-link,
.hero-actions .account-link {
  margin-top: 0;
}

.topbar-actions .status-pill {
  order: 3;
  min-height: 36px;
  font-size: 0.9rem;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--warm);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 0.95;
}

h2 {
  margin-bottom: 12px;
  font-size: 1.45rem;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.muted {
  color: var(--muted);
}

.status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 9px 14px;
  color: var(--muted);
  background: var(--surface);
}

.status-pill button {
  min-height: 34px;
  margin-left: 10px;
  border-radius: 999px;
}

.status-pill.active {
  color: var(--accent-dark);
  border-color: rgba(13, 127, 121, 0.25);
  background: rgba(13, 127, 121, 0.08);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  gap: 34px;
  align-items: center;
  margin-top: 18px;
  padding: 38px;
  border-radius: 10px;
  overflow: hidden;
}

.hero-copy {
  display: grid;
  gap: 20px;
}

.hero-copy h1 {
  max-width: 600px;
  color: var(--accent);
  font-size: clamp(2rem, 3.25vw, 3.35rem);
  line-height: 1.08;
}

.hero-copy p:not(.eyebrow) {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions button {
  min-width: 136px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.hero-metrics span {
  border-left: 3px solid rgba(13, 127, 121, 0.36);
  padding: 4px 0 4px 12px;
}

.hero-metrics strong,
.hero-metrics small {
  display: block;
}

.hero-metrics strong {
  color: var(--accent-dark);
  font-size: 1.45rem;
  line-height: 1;
}

.hero-metrics small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 700;
}

.hero-preview {
  min-width: 0;
  cursor: pointer;
}

.hero-preview:focus-visible {
  outline: 4px solid rgba(13, 127, 121, 0.18);
  outline-offset: 4px;
}

.preview-window {
  border: 1px solid rgba(13, 127, 121, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f3f8f7);
  box-shadow: 0 18px 60px rgba(21, 43, 40, 0.16);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.preview-header span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(13, 127, 121, 0.3);
}

.preview-header span:nth-child(2) {
  background: rgba(184, 87, 45, 0.35);
}

.preview-header span:nth-child(3) {
  background: rgba(96, 112, 109, 0.26);
}

.preview-header strong {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.86rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 172px;
  gap: 18px;
  padding: 18px;
}

.preview-transcript {
  display: grid;
  align-content: start;
  gap: 12px;
}

.preview-label {
  margin: 0;
  color: var(--warm);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.speech-line {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.speech-line.active {
  border-color: rgba(13, 127, 121, 0.34);
  background: rgba(13, 127, 121, 0.06);
}

.speech-line span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent-dark);
  background: rgba(13, 127, 121, 0.1);
  font-size: 0.8rem;
  font-weight: 800;
}

.speech-line p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.preview-phone {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  min-height: 312px;
  padding: 28px 14px 14px;
  border: 7px solid #16211f;
  border-radius: 30px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(13, 127, 121, 0.08), transparent 36%),
    #fff;
  box-shadow:
    0 18px 38px rgba(21, 43, 40, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.phone-notch {
  position: absolute;
  top: 10px;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(24, 32, 31, 0.22);
}

.preview-phone p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.preview-phone strong {
  font-size: 1.35rem;
}

.preview-phone small {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.phone-status {
  display: flex;
  gap: 5px;
  margin: 1px 0 2px;
}

.phone-status span {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(13, 127, 121, 0.28);
}

.phone-status span:nth-child(2) {
  background: rgba(184, 87, 45, 0.28);
}

.phone-status span:nth-child(3) {
  background: rgba(96, 112, 109, 0.2);
}

.qr-mini {
  width: 92px;
  aspect-ratio: 1;
  border: 7px solid #fff;
  border-radius: 10px;
  background:
    linear-gradient(90deg, var(--accent) 12px, transparent 12px 20px, var(--accent) 20px 32px, transparent 32px),
    linear-gradient(var(--accent) 12px, transparent 12px 20px, var(--accent) 20px 32px, transparent 32px),
    #eef4f6;
  background-size: 32px 32px;
  box-shadow: 0 0 0 1px var(--line), 0 8px 18px rgba(21, 43, 40, 0.12);
}

.phone-caption {
  width: 100%;
  border-radius: 10px;
  padding: 8px 9px;
  color: var(--accent-dark);
  background: rgba(13, 127, 121, 0.09);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.language-showcase {
  display: grid;
  grid-template-columns: 0.9fr 1.35fr;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 28px;
  border-radius: 10px;
}

.language-showcase p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.7;
}

.flag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.flag-grid button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
}

.flag-grid button:hover {
  color: var(--accent-dark);
  background: rgba(13, 127, 121, 0.08);
  border-color: rgba(13, 127, 121, 0.34);
}

.flag-grid button.active-interface {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(13, 127, 121, 0.18);
}

.flag-grid button.active-listening:not(.active-interface) {
  border-color: rgba(184, 87, 45, 0.4);
  background: rgba(184, 87, 45, 0.06);
}

.flag-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(24, 32, 31, 0.14);
}

svg.flag-icon {
  display: block;
}

.flag-stack {
  display: grid;
  justify-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.flag-stack small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
}

.flag-cn {
  background: #de2910;
}

.flag-cn::before {
  content: "★";
  position: absolute;
  top: 2px;
  left: 4px;
  color: #ffde00;
  font-size: 11px;
  line-height: 1;
}

.flag-cn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 16px;
  width: 4px;
  height: 4px;
  background: #ffde00;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  box-shadow:
    5px 3px 0 -0.2px #ffde00,
    5px 8px 0 -0.2px #ffde00,
    0 11px 0 -0.2px #ffde00;
  transform:
    rotate(18deg);
}

.flag-gb {
  background:
    linear-gradient(35deg, transparent 38%, #fff 38% 44%, #c8102e 44% 50%, #fff 50% 56%, transparent 56%),
    linear-gradient(145deg, transparent 38%, #fff 38% 44%, #c8102e 44% 50%, #fff 50% 56%, transparent 56%),
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 36%, #fff 36% 64%, transparent 64%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
    #012169;
}

.flag-us {
  background:
    linear-gradient(#3c3b6e 0 54%, transparent 54%),
    repeating-linear-gradient(0deg, #b22234 0 8%, #fff 8% 15.4%);
  background-size: 46% 54%, 100% 100%;
  background-repeat: no-repeat;
}

.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

.flag-jp {
  background: radial-gradient(circle at center, #bc002d 0 31%, transparent 32%), #fff;
}

.flag-kr {
  background: radial-gradient(circle at 50% 50%, #cd2e3a 0 22%, #0047a0 23% 35%, transparent 36%), #fff;
}

.flag-es {
  background: linear-gradient(0deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.flag-ar {
  background: linear-gradient(0deg, #000 0 33.33%, #fff 33.33% 66.66%, #007a3d 66.66%);
}

.flag-ar::before {
  content: "";
  position: absolute;
  left: 0;
  width: 12px;
  height: 20px;
  background: #ce1126;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.flag-code {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--warm));
  font-style: normal;
}

.flag-us {
  background:
    linear-gradient(#3c3b6e 0 54%, transparent 54%) 0 0 / 46% 54% no-repeat,
    repeating-linear-gradient(180deg, #b22234 0 7.7%, #fff 7.7% 15.4%);
}
.flag-fr { background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66%); color: #18201f; }
.flag-jp { background: radial-gradient(circle at center, #bc002d 0 30%, transparent 31%), #fff; color: #18201f; }
.flag-kr {
  background:
    linear-gradient(90deg, #111 0 12%, transparent 12% 88%, #111 88%) 7px 4px / 20px 3px no-repeat,
    linear-gradient(90deg, #111 0 12%, transparent 12% 88%, #111 88%) 7px 15px / 20px 3px no-repeat,
    conic-gradient(from 90deg, #cd2e3a 0 50%, #0047a0 0) center / 13px 13px no-repeat,
    #fff;
  color: #18201f;
}

.flag-kr::before,
.flag-kr::after {
  position: absolute;
  color: #111;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}

.flag-kr::before {
  content: "☰";
  left: 4px;
  top: 3px;
  transform: rotate(-28deg);
}

.flag-kr::after {
  content: "☷";
  right: 4px;
  bottom: 3px;
  transform: rotate(-28deg);
}
.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); color: #18201f; }
.flag-de { background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-it { background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66%); color: #18201f; }
.flag-pt { background: linear-gradient(90deg, #006600 0 42%, #ff0000 42%); }
.flag-pt::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 28%, #003399 29% 42%, transparent 43%),
    #ffcc00;
}
.flag-ru { background: linear-gradient(#fff 0 33%, #0039a6 33% 66%, #d52b1e 66%); color: #18201f; }
.flag-hi { background: linear-gradient(#ff9933 0 33%, #fff 33% 66%, #138808 66%); color: #18201f; }
.flag-bn { background: radial-gradient(circle at 58% 50%, #f42a41 0 23%, transparent 24%), #006a4e; }
.flag-ur { background: linear-gradient(90deg, #fff 0 24%, #01411c 24%); }
.flag-bd { background: radial-gradient(circle at 58% 50%, #f42a41 0 23%, transparent 24%), #006a4e; }
.flag-pk {
  background:
    radial-gradient(circle at 60% 45%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 66% 45%, #01411c 0 18%, transparent 19%),
    linear-gradient(90deg, #fff 0 24%, #01411c 24%);
}

.flag-pk::after {
  content: "★";
  position: absolute;
  top: 6px;
  left: 22px;
  color: #fff;
  font-size: 6px;
  line-height: 1;
  transform: rotate(-18deg);
}
.flag-id { background: linear-gradient(#ce1126 0 50%, #fff 50%); color: #18201f; }
.flag-tr {
  background:
    radial-gradient(circle at 41% 50%, #fff 0 25%, transparent 26%),
    radial-gradient(circle at 49% 50%, #e30a17 0 21%, transparent 22%),
    #e30a17;
}

.flag-tr::after {
  content: "★";
  position: absolute;
  top: 7px;
  left: 23px;
  color: #fff;
  font-size: 7px;
  line-height: 1;
  transform: rotate(-18deg);
}

.flag-vi {
  display: grid;
  place-items: center;
  background: #da251d;
}

.flag-vi::before {
  content: "★";
  color: #ffde00;
  font-size: 12px;
  line-height: 1;
}
.flag-th { background: linear-gradient(#a51931 0 16%, #fff 16% 28%, #2d2a4a 28% 72%, #fff 72% 84%, #a51931 84%); }
.flag-nl { background: linear-gradient(#ae1c28 0 33%, #fff 33% 66%, #21468b 66%); color: #18201f; }
.flag-pl { background: linear-gradient(#fff 0 50%, #dc143c 50%); color: #18201f; }
.flag-sv { background: linear-gradient(90deg, transparent 0 30%, #fecc00 30% 42%, transparent 42%), linear-gradient(transparent 0 40%, #fecc00 40% 58%, transparent 58%), #006aa7; }
.flag-da { background: linear-gradient(90deg, transparent 0 28%, #fff 28% 40%, transparent 40%), linear-gradient(transparent 0 42%, #fff 42% 58%, transparent 58%), #c60c30; }
.flag-fi { background: linear-gradient(90deg, transparent 0 30%, #002f6c 30% 42%, transparent 42%), linear-gradient(transparent 0 40%, #002f6c 40% 58%, transparent 58%), #fff; color: #18201f; }
.flag-no { background: linear-gradient(90deg, transparent 0 28%, #fff 28% 44%, transparent 44%), linear-gradient(transparent 0 38%, #fff 38% 62%, transparent 62%), linear-gradient(90deg, transparent 0 32%, #00205b 32% 40%, transparent 40%), linear-gradient(transparent 0 44%, #00205b 44% 56%, transparent 56%), #ba0c2f; }
.flag-el { background: repeating-linear-gradient(#0d5eaf 0 11%, #fff 11% 22%); }
.flag-he {
  display: grid;
  place-items: center;
  background: linear-gradient(#fff 0 18%, #0038b8 18% 30%, #fff 30% 70%, #0038b8 70% 82%, #fff 82%);
  color: #18201f;
}

.flag-he::before {
  content: "✡";
  color: #0038b8;
  font-size: 11px;
  line-height: 1;
}
.flag-cs { background: linear-gradient(#fff 0 50%, #d7141a 50%); color: #18201f; }
.flag-ro { background: linear-gradient(90deg, #002b7f 0 33%, #fcd116 33% 66%, #ce1126 66%); color: #18201f; }
.flag-hu { background: linear-gradient(#ce2939 0 33%, #fff 33% 66%, #477050 66%); color: #18201f; }
.flag-uk { background: linear-gradient(#0057b7 0 50%, #ffd700 50%); color: #18201f; }
.flag-my { background: linear-gradient(#010066 0 50%, transparent 50%), repeating-linear-gradient(#cc0001 0 12%, #fff 12% 24%); }
.flag-ir { background: linear-gradient(#239f40 0 33%, #fff 33% 66%, #da0000 66%); color: #18201f; }

/* Final flag color pass: keep the CSS flags lightweight, but use closer official palettes. */
.flag-cn { background: #ee1c25; }
.flag-gb {
  background:
    linear-gradient(35deg, transparent 38%, #fff 38% 44%, #c8102e 44% 50%, #fff 50% 56%, transparent 56%),
    linear-gradient(145deg, transparent 38%, #fff 38% 44%, #c8102e 44% 50%, #fff 50% 56%, transparent 56%),
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 36%, #fff 36% 64%, transparent 64%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
    #012169;
}
.flag-us {
  background:
    linear-gradient(#3c3b6e 0 54%, transparent 54%) 0 0 / 46% 54% no-repeat,
    repeating-linear-gradient(180deg, #b22234 0 7.7%, #fff 7.7% 15.4%);
}
.flag-fr { background: linear-gradient(90deg, #002654 0 33.33%, #fff 33.33% 66.66%, #ce1126 66.66%); }
.flag-jp { background: radial-gradient(circle at center, #bc002d 0 30%, transparent 31%), #fff; }
.flag-kr {
  background:
    linear-gradient(25deg, #111 0 22%, transparent 22% 36%, #111 36% 58%, transparent 58% 72%, #111 72%) 4px 3px / 10px 6px no-repeat,
    linear-gradient(25deg, #111 0 22%, transparent 22% 36%, #111 36% 58%, transparent 58% 72%, #111 72%) 20px 13px / 10px 6px no-repeat,
    linear-gradient(-25deg, #111 0 22%, transparent 22% 36%, #111 36% 58%, transparent 58% 72%, #111 72%) 20px 3px / 10px 6px no-repeat,
    linear-gradient(-25deg, #111 0 24%, transparent 24% 38%, #111 38% 52%, transparent 52% 66%, #111 66%) 4px 13px / 10px 6px no-repeat,
    radial-gradient(circle at 50% 34%, #cd2e3a 0 19%, transparent 20%),
    radial-gradient(circle at 50% 66%, #0047a0 0 19%, transparent 20%),
    conic-gradient(from 90deg, #cd2e3a 0 50%, #0047a0 0) center / 15px 15px no-repeat,
    #fff;
}

.flag-kr::before,
.flag-kr::after {
  content: none;
}
.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.flag-ar { background: #006c35; }
.flag-ar::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 20px;
  height: 2px;
  background: #fff;
  clip-path: none;
}
.flag-sa {
  background: #006c35;
}

.flag-sa::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 20px;
  height: 2px;
  background: #fff;
  box-shadow:
    0 4px 0 #fff,
    4px 9px 0 -0.5px #fff;
}

.flag-sa::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 5px;
  width: 19px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
}
.flag-de { background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }
.flag-it { background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); }
.flag-pt { background: linear-gradient(90deg, #046a38 0 42%, #da291c 42%); }
.flag-pt::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 28%, #003399 29% 42%, transparent 43%),
    #ffcc00;
}
.flag-ru { background: linear-gradient(#fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%); }
.flag-hi { background: linear-gradient(#ff9933 0 33.33%, #fff 33.33% 66.66%, #138808 66.66%); }
.flag-bn { background: radial-gradient(circle at 58% 50%, #f42a41 0 23%, transparent 24%), #006a4e; }
.flag-ur { background: linear-gradient(90deg, #fff 0 24%, #01411c 24%); }
.flag-bd { background: radial-gradient(circle at 58% 50%, #f42a41 0 23%, transparent 24%), #006a4e; }
.flag-pk {
  background:
    radial-gradient(circle at 60% 45%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 66% 45%, #01411c 0 18%, transparent 19%),
    linear-gradient(90deg, #fff 0 24%, #01411c 24%);
}

.flag-pk::after {
  content: "★";
  position: absolute;
  top: 6px;
  left: 22px;
  color: #fff;
  font-size: 6px;
  line-height: 1;
  transform: rotate(-18deg);
}
.flag-id { background: linear-gradient(#ce1126 0 50%, #fff 50%); }
.flag-tr {
  background:
    radial-gradient(circle at 43% 50%, #fff 0 23%, transparent 24%),
    radial-gradient(circle at 49% 50%, #e30a17 0 20%, transparent 21%),
    #e30a17;
}
.flag-vi { background: #da251d; }
.flag-th { background: linear-gradient(#a51931 0 16.67%, #fff 16.67% 28%, #2d2a4a 28% 72%, #fff 72% 83.33%, #a51931 83.33%); }
.flag-nl { background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%); }
.flag-pl { background: linear-gradient(#fff 0 50%, #dc143c 50%); }
.flag-sv {
  background:
    linear-gradient(90deg, transparent 0 30%, #fecc00 30% 42%, transparent 42%),
    linear-gradient(transparent 0 40%, #fecc00 40% 58%, transparent 58%),
    #006aa7;
}
.flag-da {
  background:
    linear-gradient(90deg, transparent 0 28%, #fff 28% 40%, transparent 40%),
    linear-gradient(transparent 0 42%, #fff 42% 58%, transparent 58%),
    #c8102e;
}
.flag-fi {
  background:
    linear-gradient(90deg, transparent 0 30%, #002f6c 30% 42%, transparent 42%),
    linear-gradient(transparent 0 40%, #002f6c 40% 58%, transparent 58%),
    #fff;
}
.flag-no {
  background:
    linear-gradient(90deg, transparent 0 28%, #fff 28% 44%, transparent 44%),
    linear-gradient(transparent 0 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(90deg, transparent 0 32%, #00205b 32% 40%, transparent 40%),
    linear-gradient(transparent 0 44%, #00205b 44% 56%, transparent 56%),
    #ba0c2f;
}
.flag-el { background: repeating-linear-gradient(#0d5eaf 0 11.11%, #fff 11.11% 22.22%); }
.flag-he { background: linear-gradient(#fff 0 18%, #0038b8 18% 30%, #fff 30% 70%, #0038b8 70% 82%, #fff 82%); }
.flag-cs {
  background:
    linear-gradient(30deg, #11457e 0 28%, transparent 28%),
    linear-gradient(150deg, #11457e 0 28%, transparent 28%),
    linear-gradient(#fff 0 50%, #d7141a 50%);
}
.flag-ro { background: linear-gradient(90deg, #002b7f 0 33.33%, #fcd116 33.33% 66.66%, #ce1126 66.66%); }
.flag-hu { background: linear-gradient(#ce2939 0 33.33%, #fff 33.33% 66.66%, #477050 66.66%); }
.flag-uk { background: linear-gradient(#0057b7 0 50%, #ffd700 50%); }
.flag-my {
  background:
    linear-gradient(#010066 0 54%, transparent 54%) 0 0 / 48% 54% no-repeat,
    repeating-linear-gradient(#cc0001 0 7.7%, #fff 7.7% 15.4%);
}
.flag-ir { background: linear-gradient(#239f40 0 33.33%, #fff 33.33% 66.66%, #da0000 66.66%); }

.scenario-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 28px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(13, 127, 121, 0.12), rgba(255, 255, 255, 0.86) 42%),
    linear-gradient(180deg, #fff, var(--surface));
}

.scenario-copy h2 {
  margin-bottom: 14px;
  color: var(--accent-dark);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.05;
}

.scenario-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.scenario-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 430px;
}

.scenario-stage::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: 999px;
  background: rgba(13, 127, 121, 0.1);
  filter: blur(36px);
  animation: scenario-glow 7s ease-in-out infinite;
}

.scenario-card {
  position: relative;
  display: grid;
  grid-template-rows: 150px auto 1fr;
  gap: 10px;
  min-height: 250px;
  border: 1px solid rgba(13, 127, 121, 0.18);
  border-radius: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(17, 33, 32, 0.08);
  transform: translateY(0);
  animation: scenario-float 8s ease-in-out infinite;
}

.scenario-card-two,
.scenario-card-four {
  animation-delay: -3s;
}

.scenario-card strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.scenario-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.scenario-visual {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: #eef6f4;
  box-shadow: inset 0 0 0 1px rgba(13, 127, 121, 0.08);
}

.scenario-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, transparent 58%, rgba(8, 36, 34, 0.12));
  pointer-events: none;
}

.scenario-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 600ms ease;
}

.scenario-card:hover .scenario-visual img {
  transform: scale(1.07);
}

.room-screen,
.demo-window {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 92px;
  height: 58px;
  border: 2px solid rgba(13, 127, 121, 0.55);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(13, 127, 121, 0.16) 18% 28%, transparent 28%),
    linear-gradient(#fff, #eaf5f4);
}

.room-speaker,
.stage-podium {
  position: absolute;
  left: 42px;
  bottom: 28px;
  width: 34px;
  height: 58px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}

.room-speaker::before,
.stage-podium::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -15px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcefeb;
  border: 2px solid #fff;
}

.room-phone {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 40px;
  height: 72px;
  border: 5px solid #172322;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 0 34%, var(--accent) 34% 48%, transparent 48%),
    linear-gradient(transparent 0 34%, var(--accent) 34% 48%, transparent 48%),
    #fff;
}

.signal {
  position: absolute;
  right: 74px;
  bottom: 60px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--warm);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: signal-pulse 2.8s ease-out infinite;
}

.signal-two {
  animation-delay: 0.8s;
}

.stage-people {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
  height: 38px;
  background:
    radial-gradient(circle at 12% 30%, var(--accent) 0 8px, transparent 9px),
    radial-gradient(circle at 28% 60%, var(--warm) 0 8px, transparent 9px),
    radial-gradient(circle at 46% 40%, var(--accent-dark) 0 8px, transparent 9px),
    radial-gradient(circle at 64% 65%, var(--accent) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 36%, var(--warm) 0 8px, transparent 9px);
}

.stage-caption {
  position: absolute;
  right: 18px;
  top: 24px;
  width: 94px;
  height: 54px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--accent) 0 18%, transparent 18%),
    repeating-linear-gradient(#fff 0 11px, #dcefeb 11px 13px);
  animation: caption-scan 3s ease-in-out infinite;
}

.meeting-table {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #dcefeb);
  border: 2px solid rgba(13, 127, 121, 0.22);
}

.meeting-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
  animation: bubble-pop 4.8s ease-in-out infinite;
}

.bubble-a { left: 18px; top: 28px; }
.bubble-b { right: 20px; top: 38px; animation-delay: 1.2s; }
.bubble-c { left: 50%; top: 18px; transform: translateX(-50%); animation-delay: 2.2s; }

.demo-qr {
  position: absolute;
  right: 22px;
  top: 24px;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 28%, var(--accent) 28% 42%, transparent 42% 72%, var(--accent) 72%),
    linear-gradient(transparent 0 25%, var(--accent) 25% 38%, transparent 38% 66%, var(--accent) 66%),
    #fff;
  border: 6px solid #fff;
  box-shadow: 0 0 0 1px rgba(13, 127, 121, 0.22);
}

.demo-summary {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--warm) 0 12%, transparent 12%),
    repeating-linear-gradient(#fff 0 8px, #dcefeb 8px 10px);
}

@keyframes scenario-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scenario-glow {
  0%, 100% { opacity: 0.65; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes signal-pulse {
  0% { opacity: 0; transform: scale(0.4) rotate(45deg); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.45) rotate(45deg); }
}

@keyframes caption-scan {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: 0 0, 0 10px; }
}

@keyframes bubble-pop {
  0%, 100% { opacity: 0.72; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-6px) scale(1.04); }
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.landing-features article {
  padding: 24px;
  border-radius: 10px;
}

.landing-features article p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.auth-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  margin-top: 18px;
  padding: 28px;
  border-radius: 10px;
}

.auth-copy p:not(.eyebrow),
.note,
.empty-state,
.pricing-card p {
  color: var(--muted);
  line-height: 1.7;
}

.auth-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.free-trial-button {
  margin-top: 12px;
}

.tab-button {
  min-height: 38px;
  border: 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
}

.tab-button.active {
  color: #fff !important;
  background: var(--accent) !important;
}

.form-heading {
  display: grid;
  gap: 4px;
}

.form-heading h3 {
  margin: 0;
  font-size: 1.35rem;
}

.login-form,
.verify-form,
.control-panel,
.share-panel,
.transcript-panel,
.listener,
.verify-panel,
.pricing-panel {
  border-radius: 10px;
}

.login-form,
.verify-form {
  display: grid;
  gap: 16px;
}

.stripe-payment .stripe-card-fields {
  display: none;
}

.login-form.attention {
  animation: attentionPulse 1400ms ease;
}

@keyframes attentionPulse {
  0%,
  100% {
    box-shadow: none;
  }
  30%,
  70% {
    box-shadow: 0 0 0 4px rgba(13, 127, 121, 0.16);
  }
}

.verify-panel {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 32px;
  margin-top: 18px;
  padding: 28px;
}

.dev-code {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid rgba(13, 127, 121, 0.22);
  padding: 10px 12px;
  color: var(--accent-dark);
  background: rgba(13, 127, 121, 0.08);
  font-weight: 800;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.field-help {
  display: none;
  position: absolute;
  left: 0;
  top: 28px;
  z-index: 8;
  max-width: min(520px, calc(100vw - 48px));
  border: 1px solid rgba(13, 127, 121, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  color: #0a66b2;
  background: #fff;
  box-shadow: 0 12px 28px rgba(21, 43, 40, 0.14);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

.field-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.field-help-trigger i {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  background: var(--warm);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.custom-file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.custom-file-picker button {
  min-height: 38px;
}

.custom-file-picker > span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

label:has(> .field-help) {
  position: relative;
}

label > .field-help-trigger:hover + .field-help,
label:focus-within > .field-help {
  display: block;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 78px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  min-height: 34px;
  padding: 0 12px;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid transparent;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(13, 127, 121, 0.6);
  box-shadow: 0 0 0 4px rgba(13, 127, 121, 0.12);
}

.pricing-panel {
  margin-top: 18px;
  padding: 22px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.pricing-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  min-height: 365px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 14px;
  background: var(--surface);
}

.pricing-card-pro {
  border-color: rgba(13, 127, 121, 0.5);
  background: linear-gradient(180deg, rgba(13, 127, 121, 0.08), #fff 42%);
  box-shadow: 0 14px 34px rgba(13, 127, 121, 0.12);
}

.pricing-card-enterprise {
  border-color: rgba(184, 87, 45, 0.45);
  background: linear-gradient(180deg, rgba(184, 87, 45, 0.08), #fff 42%);
}

.pricing-card h3 {
  margin-bottom: 8px;
  min-height: 28px;
}

.pricing-card p {
  min-height: 54px;
  margin-bottom: 0;
}

.pricing-card strong {
  display: block;
  color: var(--accent-dark);
  font-size: 1.9rem;
  line-height: 1;
}

.pricing-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.plan-badge {
  display: inline-flex !important;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  margin: 0 0 10px !important;
  border-radius: 999px;
  padding: 3px 9px;
  color: #fff !important;
  background: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.enterprise-badge {
  background: var(--warm);
}

.plan-features {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-features li {
  position: relative;
  padding-left: 17px;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.35;
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.plan-action {
  align-self: end;
  width: 100%;
}

.workspace {
  display: grid;
  grid-template-columns: 340px minmax(280px, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 10px;
}

.control-panel,
.share-panel,
.transcript-panel,
.listener {
  background: var(--surface);
  border: 1px solid var(--line);
}

.control-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 20px;
}

.host-main {
  display: grid;
  align-content: start;
  gap: 10px;
}

.host-main > .meeting-title-row {
  order: 1;
}

.host-main > .field-grid {
  order: 2;
}

.host-main > .meeting-context-panel {
  order: 3;
}

.host-main > .audio-panel {
  order: 4;
}

.host-main > .button-row {
  order: 5;
}

.host-main > .manual-send {
  order: 6;
}

.host-main > .summary-panel {
  order: 7;
}

.host-main > .transcript-panel {
  order: 8;
}

.host-main label {
  gap: 5px;
  font-size: 0.84rem;
}

.meeting-title-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.5fr) minmax(360px, 0.5fr);
  gap: 10px;
  align-items: center;
}

.meeting-setup-left {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.meeting-title-row label,
.meeting-setup-left label {
  min-width: 0;
}

.meeting-title-row label > span {
  color: var(--warm);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.meeting-language-grid label > span {
  color: var(--ink);
}

.primary-actions {
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(13, 127, 121, 0.26);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 127, 121, 0.12), rgba(255, 255, 255, 0.95) 58%),
    #fff;
  box-shadow: 0 12px 26px rgba(21, 43, 40, 0.1);
  transform: none;
}

.meeting-language-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.primary-actions button {
  width: 153px;
  min-height: 40px;
  padding: 0 10px;
  white-space: nowrap;
}

.host-main input,
.host-main select,
.host-main textarea {
  padding: 8px 10px;
}

.host-main textarea {
  min-height: 58px;
}

.host-main .meeting-context-panel,
.host-main .audio-panel,
.host-main .summary-panel {
  gap: 8px;
  padding: 10px;
}

.host-main .meeting-context-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.host-main .meeting-context-panel > .eyebrow,
.host-main .meeting-context-panel > label:first-of-type,
.host-main .meeting-context-panel > .file-summary {
  grid-column: 1 / -1;
}

.host-main .meeting-context-panel > .button-row {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.host-main .meeting-context-panel > label:nth-of-type(5) {
  grid-column: 1;
  grid-row: 5;
}

.host-main .meeting-context-panel > .instructions-preview {
  grid-column: 2;
  grid-row: 5;
  align-self: end;
}

.host-main .eyebrow {
  margin-bottom: 0;
  font-size: 0.72rem;
}

.host-main .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 8px;
}

.host-main > .field-grid::after {
  content: "";
}

.host-main .meeting-language-grid::after {
  display: none;
}

.host-main .audio-panel .field-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.host-main .audio-panel .field-grid button {
  min-width: 112px;
}

.host-main > .button-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.host-main .manual-send {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.host-main .manual-send button {
  min-width: 112px;
}

.account-summary,
.usage-history-panel,
.meeting-context-panel,
.audio-panel,
.summary-panel,
.settings-panel {
  display: grid;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgba(13, 127, 121, 0.18);
  padding: 13px;
  background: rgba(13, 127, 121, 0.06);
}

.usage-history-panel,
.meeting-context-panel,
.audio-panel,
.summary-panel,
.settings-panel {
  background: #fff;
}

.audio-panel {
  gap: 12px;
}

.audio-panel .field-grid {
  align-items: end;
}

.control-panel .audio-panel {
  gap: 10px;
  padding: 12px;
}

.control-panel .audio-panel .field-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.control-panel .audio-panel button {
  width: 100%;
}

.control-panel .audio-meter-row {
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.control-panel .audio-meter-row span {
  grid-column: 1 / -1;
}

.audio-meter-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.audio-meter-row strong {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.audio-meter {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(13, 127, 121, 0.18);
  background: var(--surface-strong);
}

.audio-meter div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  transition: width 120ms ease;
}

.audio-panel .note.active-audio {
  color: var(--accent-dark);
}

#audioQualityHint {
  display: none;
}

.usage-history-panel {
  gap: 12px;
}

.usage-history-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.usage-history-heading strong {
  color: var(--ink);
}

.usage-history-heading span,
.usage-history-panel p,
.usage-history-panel li span {
  color: var(--muted);
  font-size: 0.84rem;
}

.usage-history-panel p {
  margin: 0;
}

.usage-history-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.usage-history-panel li {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.usage-history-panel li strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.usage-history-panel .empty-usage {
  color: var(--muted);
  font-size: 0.9rem;
}

.file-summary {
  display: grid;
  gap: 8px;
}

.host-main .file-summary {
  gap: 6px;
}

.file-chip {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 10px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 0.86rem;
}

.host-main .file-chip {
  padding: 7px 8px;
  font-size: 0.78rem;
}

.file-chip strong {
  color: var(--ink);
}

.instructions-preview {
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--surface-strong);
}

.host-main .instructions-preview {
  padding: 7px 9px;
}

.instructions-preview summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 800;
}

.instructions-preview pre {
  max-height: 220px;
  overflow: auto;
  margin: 10px 0 0;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.host-main .instructions-preview pre {
  max-height: 110px;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.summary-output {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 12px;
  color: var(--ink);
  background: var(--surface-strong);
  font-size: 0.9rem;
  line-height: 1.55;
}

.host-main .summary-output {
  max-height: 190px;
  padding: 9px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.account-summary strong,
.account-summary span {
  display: block;
}

.account-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.account-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  width: fit-content;
  margin-top: 4px;
  text-decoration: none;
}

.guide-page {
  gap: 24px;
  min-width: 0;
}

.guide-hero,
.guide-layout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 34px;
}

.guide-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--accent);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.05;
}

.guide-hero p:not(.eyebrow) {
  max-width: 820px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.guide-language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.guide-language-switch button {
  min-height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.guide-language-switch button.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.guide-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  overflow: hidden;
  min-width: 0;
}

.guide-nav {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.guide-nav a {
  padding: 10px 12px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}

.guide-nav a:hover {
  color: #fff;
  background: var(--accent);
}

.guide-content {
  display: grid;
  gap: 18px;
  padding: 30px;
  min-width: 0;
}

.guide-section {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.guide-section:last-child {
  border-bottom: 0;
}

.guide-section h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.guide-section h3 {
  margin: 20px 0 8px;
  color: var(--accent-dark);
  font-size: 1.08rem;
}

.guide-section p,
.guide-list,
.guide-steps {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.guide-steps,
.guide-list {
  margin: 0;
  padding-left: 22px;
}

.guide-steps li,
.guide-list li {
  margin: 10px 0;
}

.guide-callout {
  margin-top: 18px;
  padding: 16px 18px;
  color: var(--accent-dark);
  background: rgba(13, 127, 121, 0.08);
  border: 1px solid rgba(13, 127, 121, 0.24);
  border-radius: 8px;
  line-height: 1.65;
}

.guide-code {
  overflow-x: auto;
  padding: 16px;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: pre;
}

.guide-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.guide-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--ink);
}

.guide-table th,
.guide-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.guide-table th {
  color: var(--accent-dark);
  background: var(--surface-strong);
}

.guide-table tr:last-child td {
  border-bottom: 0;
}

.guide-faq p {
  margin-top: 0;
}

.account-page {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.account-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-preferences-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.account-detail-card {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 18px;
  background: #fff;
}

.account-detail-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.account-detail-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.account-detail-card dl div,
.account-history-list li,
.account-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.account-detail-card dt,
.account-history-list span,
.account-summary-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

.account-detail-card dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
}

.account-history-list,
.account-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-history-list li strong,
.account-summary-list li strong {
  display: block;
}

.account-history-list li div span {
  display: block;
  margin-top: 4px;
}

.account-summary-list li {
  display: grid;
}

.summary-item-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.account-summary-list pre {
  max-height: 280px;
  overflow: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  line-height: 1.55;
}

.field-grid,
.button-row {
  display: grid;
  gap: 12px;
}

.button-row {
  grid-template-columns: 1fr 1fr;
}

.compact-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.manual-send {
  display: grid;
  gap: 12px;
}

.control-panel .manual-send {
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(13, 127, 121, 0.18);
  padding: 12px;
  background: #fff;
}

.control-panel .manual-send textarea {
  min-height: 58px;
  padding: 8px 10px;
}

.control-panel .manual-send button {
  width: 100%;
}

.share-panel {
  display: grid;
  grid-template-columns: 168px 1fr;
  align-items: center;
  align-self: start;
  gap: 22px;
  padding: 22px;
}

.control-panel .share-panel {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 14px;
  padding: 16px;
}

.control-panel .share-details {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.control-panel .share-details .note {
  text-align: left;
}

.qr-wrap {
  display: grid;
  place-items: center;
  width: 168px;
  min-height: 168px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.qr-wrap::before {
  content: "";
  width: 74px;
  height: 74px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--accent) 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(var(--accent) 12px, transparent 12px) 0 0 / 28px 28px,
    rgba(13, 127, 121, 0.08);
  opacity: 0.35;
}

.qr-wrap img {
  display: block;
  width: 146px;
  height: 146px;
}

.qr-wrap img:not([src]) {
  display: none;
}

.qr-wrap img[src] {
  position: relative;
  z-index: 1;
}

.qr-wrap:has(img[src])::before {
  display: none;
}

.share-details h2 {
  margin-bottom: 8px;
}

.transcript-panel {
  min-height: 360px;
  padding: 18px;
}

.host-main .transcript-panel {
  min-height: 260px;
  padding: 14px;
}

.panel-heading.inline,
.listener-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.icon-button {
  min-height: 36px;
  padding: 0 12px;
}

.transcript-list {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.message {
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 13px 14px;
  background: var(--surface-strong);
}

.message time {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.message strong,
.live-card strong {
  display: block;
  margin-bottom: 6px;
}

.translation {
  color: var(--accent-dark);
  font-weight: 800;
}

.original {
  color: var(--muted);
}

.listener {
  margin-top: 18px;
  padding: 22px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  padding: 22px;
  border-radius: 10px;
}

.site-footer strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-end;
}

.site-footer .link-button {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
}

.footer-note {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}

.contact-dialog {
  width: min(560px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.contact-dialog::backdrop {
  background: rgba(24, 32, 31, 0.42);
}

.contact-dialog form {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.language-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
  margin: 12px 0 18px;
  gap: 12px;
}

.speech-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin: -6px 0 18px;
}

.speech-controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.speech-controls span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.speech-controls output {
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.speech-controls input {
  grid-column: 1 / -1;
  padding: 0;
  accent-color: var(--accent);
}

.live-card {
  min-height: 180px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 22px;
  background: linear-gradient(135deg, rgba(13, 127, 121, 0.1), rgba(184, 87, 45, 0.08));
}

.live-card .translation {
  font-size: clamp(1.8rem, 5vw, 3.8rem);
  line-height: 1.08;
}

.voice-help {
  margin-top: 14px;
  border-radius: 8px;
  border: 1px solid rgba(184, 87, 45, 0.24);
  padding: 14px;
  background: rgba(184, 87, 45, 0.08);
}

.voice-help strong,
.voice-help span {
  display: block;
  color: var(--ink);
}

.voice-help p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.voice-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.voice-help button {
  margin-top: 12px;
}

.voice-list {
  max-height: 160px;
  overflow: auto;
  margin: 10px 0 0;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.listener-list {
  margin-top: 16px;
  max-height: 430px;
  font-size: calc(1rem * var(--listener-scale, 1));
}

.listener-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.listener-dark {
  background: #101418;
}

.listener-dark .listener {
  background: #172024;
  color: #f4f7f7;
}

.listener-dark .message,
.listener-dark .latest-card,
.listener-dark .voice-help {
  background: #1f2b30;
  color: #f4f7f7;
  border-color: #3c4a50;
}

.admin-panel {
  margin-top: 18px;
  padding: 24px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.stat-card {
  min-height: 94px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 14px;
  background: var(--surface);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.35rem;
  line-height: 1.1;
}

.admin-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.admin-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  background: var(--surface-strong);
}

.admin-table td strong,
.admin-table td span {
  display: block;
}

.admin-table td span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.discount-admin {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.settings-panel {
  grid-template-columns: 1fr minmax(220px, 320px) auto;
  align-items: end;
  margin: 18px 0;
}

.discount-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  align-items: end;
  gap: 12px;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-settings-table input {
  min-width: 120px;
}

.plan-settings-actions {
  padding: 14px;
  background: var(--surface);
}

.empty-cell {
  color: var(--muted);
  text-align: center !important;
}

.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .landing-hero,
  .language-showcase,
  .scenario-panel {
    grid-template-columns: 1fr;
  }

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

  .preview-phone {
    justify-self: center;
    width: min(220px, 100%);
  }

  .flag-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-features {
    grid-template-columns: 1fr;
  }

  .scenario-stage {
    min-height: auto;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-card {
    min-height: 330px;
  }

  .admin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .discount-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .app-shell {
    width: min(100% - 20px, 680px);
    padding-top: 10px;
  }

  .topbar,
  .landing-hero,
  .language-showcase,
  .guide-hero,
  .guide-layout,
  .auth-panel,
  .verify-panel,
  .workspace,
  .share-panel,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .account-detail-grid {
    grid-template-columns: 1fr;
  }

  .account-preferences-grid {
    grid-template-columns: 1fr;
  }

  .account-detail-card dl div,
  .account-history-list li,
  .summary-item-head {
    display: grid;
    gap: 4px;
  }

  .account-detail-card dd {
    text-align: left;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .brand-logo {
    width: auto;
    height: 74px;
    max-width: 86vw;
  }

  .landing-hero,
  .language-showcase,
  .guide-hero {
    padding: 22px;
  }

  .guide-language-switch {
    justify-content: flex-start;
  }

  .guide-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    overflow-x: auto;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }

  .guide-content {
    padding: 20px;
  }

  .guide-table {
    min-width: 680px;
  }

  .hero-metrics,
  .flag-grid,
  .scenario-stage {
    grid-template-columns: 1fr;
  }

  .scenario-panel {
    padding: 18px;
  }

  .scenario-card {
    min-height: 230px;
  }

  .workspace {
    padding: 12px;
  }

  .host-main .meeting-context-panel,
  .host-main .field-grid,
  .meeting-language-grid,
  .host-main .audio-panel .field-grid,
  .meeting-title-row,
  .host-main > .button-row,
  .host-main .manual-send {
    grid-template-columns: 1fr;
  }

  .primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: none;
  }

  .primary-actions button {
    width: 100%;
  }

  .host-main > .field-grid::after {
    display: none;
  }

  .share-panel,
  .transcript-panel {
    grid-column: auto;
  }

  .qr-wrap {
    width: 100%;
  }

  .listener-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .language-bar {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .speech-controls {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .voice-help-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 12px, 680px);
    padding-top: 6px;
  }

  .guide-page {
    gap: 12px;
  }

  .guide-hero {
    padding: 16px;
  }

  .guide-hero h1 {
    font-size: 1.75rem;
    line-height: 1.12;
  }

  .guide-hero p:not(.eyebrow) {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .guide-language-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .guide-language-switch button {
    min-height: 38px;
    padding: 0 8px;
  }

  .guide-content {
    padding: 14px;
    gap: 12px;
  }

  .guide-section {
    padding-bottom: 18px;
  }

  .guide-section h2 {
    font-size: 1.35rem;
  }

  .guide-section p,
  .guide-list,
  .guide-steps {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .guide-callout,
  .guide-code {
    padding: 12px;
    overflow-wrap: anywhere;
  }

  .guide-table th,
  .guide-table td {
    padding: 10px;
    font-size: 0.88rem;
  }

  .pricing-grid,
  .button-row,
  .admin-stats,
  .discount-form {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    min-height: auto;
  }

  .pricing-card p {
    min-height: auto;
  }

  .hero-actions {
    flex-direction: column;
  }

  .preview-window {
    margin-inline: -6px;
  }

  .speech-line {
    grid-template-columns: 1fr;
  }

  .auth-tabs {
    flex-direction: column;
  }
}


.topbar-actions #logoutButton {
  min-height: 36px;
}


.audio-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
}

.audio-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}


.log-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.log-pagination span {
  color: var(--muted);
  font-weight: 700;
  min-width: 120px;
  text-align: center;
}


.visit-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  color: var(--muted);
}

.visit-breakdown strong {
  color: var(--primary);
  margin-right: 6px;
}

.visit-breakdown span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  font-weight: 700;
}