/* Ala Team · original Ala logo palette. All assets and fonts are self-hosted. */

:root {
  --bg: #071125;
  --panel: #112442;
  --line: #294569;
  --text: #f1f6ff;
  --muted: #a1b5d0;
  --mint: #82d8ff;
  --mint-ink: #102d53;
  --brand-blue: #478bf5;
  --brand-cyan: #67dcf8;
  --brand-gradient: linear-gradient(115deg, #b6efff 0%, #76d9ff 43%, #76aaff 100%);
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(ellipse at 8% 24%, #165fab25, transparent 48%),
    radial-gradient(ellipse at 96% 70%, #13a5d311, transparent 48%),
    repeating-linear-gradient(0deg, transparent 0 55px, #8bb9e407 55px 56px),
    repeating-linear-gradient(90deg, transparent 0 55px, #8bb9e407 55px 56px),
    linear-gradient(125deg, #071122 0%, #0b1a33 52%, #09142b 100%);
}

input, button, select { font-family: inherit; }
input, select { line-height: 1.55; }
input, select, button, .brand { -webkit-font-smoothing: antialiased; }

.topbar {
  background: linear-gradient(110deg, #0b1831ed, #0c1d36b8 60%, #102540b0);
  border-bottom-color: #6aa9ed1c;
}
.brand { gap: 13px; font-size: 25px; font-weight: 500; letter-spacing: -.85px; }
.brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 0; }
.brand b {
  font-weight: 700;
  color: #a8e3ff;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top-meta { font-size: 11px; color: #a2bed9; font-weight: 400; }
.status i, .hint-dot { background: #7bdcfa; }
.status.warn i { background: #edc38d; }
.status.offline i { background: #dc968c; }

.eyebrow { color: #91b5d9; font-weight: 600; letter-spacing: 1.65px; }
.short-line { background: var(--brand-gradient); width: 32px; }
h1 { font-size: clamp(42px, 4.2vw, 64px); font-weight: 600; letter-spacing: -2.8px; line-height: 1.21; margin-top: 27px; }
h1 > span {
  color: #a8e6ff;
  background: linear-gradient(105deg, #d2f5ff 0%, #76d8ff 48%, #82aaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead { color: #b6c8e0; font-size: 16px; font-weight: 400; line-height: 1.85; }
.feature-row { gap: 20px; }
.feature-row > span { color: #c0d4e9; font-size: 12px; font-weight: 400; }
.feature-row svg { color: #78c6ed; }
.intro-note { color: #7899bb; }
.subtle { color: var(--muted); font-weight: 400; }

.entry-card {
  position: relative;
  background: linear-gradient(145deg, #18375bcc 0%, #142a4bed 42%, #0e203deb 100%);
  border: 1px solid #77b2ed38;
  border-radius: 23px;
  box-shadow: 0 25px 70px #02091c48, inset 0 1px 0 #d9f1ff0d;
}
.entry-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 29px;
  right: 29px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8edfff8c 35%, #7fa9ff5e 70%, transparent);
  pointer-events: none;
}
.entry-card h2 { font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: -.7px; margin-top: 21px; }
.entry-card > .subtle { font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
.tag { color: #9bddff; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.card-mark { font-family: inherit; color: #789cbf; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; }
label { color: #c8d9ed; font-size: 12px; font-weight: 500; }
input, select { background: #0a1930cc; border-color: #6c96c442; color: #eef5ff; }
input::placeholder { color: #7893b1; opacity: 1; }
input:focus, select:focus { border-color: #80d7ffb3; }
#nameInput { font-size: 14px; }
.preview { background: linear-gradient(145deg, #09172d, #0b1d36); border-color: #8ab4e516; border-radius: 12px; }
.preview-avatar { color: #7e9cbc; }
.preview-avatar svg { color: #85afd3; }
.preview-bottom { background: #06152cc2; color: #99b6d5; font-size: 9px; }
.preview-controls { gap: 8px; }
.small-control { border-color: #6086b148; color: #d0e1f5; font-weight: 400; }
.small-control:hover { background: #5c9bde12; }
.small-control[aria-pressed=true] { background: #54b9f80e; border-color: #75cdff65; color: #c4ecff; }
.small-control[aria-pressed=false] { border-color: #46698c5c; color: #9bb0c8; }
.text-control { color: #9bdcff; font-weight: 500; }

.primary {
  color: #102842;
  background: var(--brand-gradient);
  border: 1px solid #cbf1ff36;
  box-shadow: 0 6px 19px #03152b33, inset 0 1px 0 #ffffff4d;
  font-size: 13px;
  font-weight: 600;
  min-height: 47px;
  border-radius: 10px;
}
.primary:hover { background: linear-gradient(115deg, #c9f3ff 0%, #91e0ff 43%, #91bcff 100%); }
.primary:disabled { box-shadow: none; }
.entry-divider { color: #7c9ebf; font-size: 8px; letter-spacing: 1.25px; }
.entry-divider::before, .entry-divider::after { background: #7199c321; }
.open-link { border-color: #6c96c442; background: #09182a4d; }
.open-link input { font-size: 11px; }
.open-link button { background: linear-gradient(145deg, #224a70, #1c365b); color: #b7e3ff; }
.open-link button:hover { background: #2b547d; }
.fine-print { color: #8ba6c3; font-size: 10px; }

.meeting-heading h2 { font-weight: 600; letter-spacing: -.6px; }
.meeting-info { color: #9eb6d1; }
.meeting-info .divider, .control-divider { background: #35537580; }
.participant { background: linear-gradient(140deg, #192f55, #112642); border-color: #608bb744; }
.participant.tone-1 { background: linear-gradient(145deg, #193e5b, #102b49); }
.participant.tone-2 { background: linear-gradient(145deg, #243b63, #142843); }
.participant.tone-3 { background: linear-gradient(145deg, #263754, #16243f); }
.participant.tone-4 { background: linear-gradient(145deg, #18445c, #142a49); }
.participant.tone-5 { background: linear-gradient(145deg, #1d365c, #162b47); }
.participant .avatar { color: #d2eaff; border-color: #b1d7ff1a; background: #b4d8ff0c; font-weight: 500; }
.participant.speaking { border-color: #8bdfff; box-shadow: inset 0 0 0 1px #8bdfff; }
.tile-name { font-weight: 400; }
.tile-meta { color: #c2d6eb; }
.quality-dot { background: #82dbf8; }
.quality-dot.poor { background: #ddaa7c; }
.quality-dot.lost { background: #d88f87; }
.alone-hint { color: #90abc8; }
.alone-hint button { color: #a0dcff; font-weight: 500; }
.share-stage { background: #050d1b; border-color: #5f89b447; }
.stage-bar { background: linear-gradient(105deg, #163151, #112541); color: #c4d9ef; }
.icon-button { color: #b8d6f1; }
.icon-button:hover { background: #83b8ed1a; }
.footer-label { color: #92adca; }
.footer-label img { width: 30px; height: 30px; border-radius: 0; opacity: 1; object-fit: contain; }
.footer-name { color: #9db5cf; }
.call-button { background: linear-gradient(145deg, #1b3758, #142946); border-color: #5d87b44a; color: #d1e4f6; font-weight: 400; }
.call-button:hover { background: linear-gradient(145deg, #234665, #1a3557); }
.call-button svg { color: #b6e8ff; }
.call-button.is-off { background: linear-gradient(145deg, #243249, #19283e); border-color: #48627e52; color: #a5b8cf; }
.call-button.is-off svg { color: #a5b8cf; }
.call-button.active { background: var(--brand-gradient); border-color: #b6efff9c; color: #102842; }
.call-button.active svg { color: #102842; }
.call-button.leave { background: linear-gradient(145deg, #663f45, #4a2b36); border-color: #c17c7c4d; color: #ffdedb; }
.call-button.leave svg { color: #ffdedb; }
.call-button.leave:hover { background: #74464b; }
.audio-unlock { background: linear-gradient(120deg, #183e5c, #16314d); border-color: #6fc8f67d; color: #d0f0ff; }
.toast { background: linear-gradient(110deg, #cdf2ff, #b4d8ff); color: #18354b; font-weight: 500; }
.toast.error { background: #ebc6be; color: #502c28; }
.dialog { background: linear-gradient(145deg, #193755, #10213e); border-color: #77b2ed4d; box-shadow: 0 24px 90px #01091c80; }
.dialog h2 { font-weight: 600; letter-spacing: -.5px; line-height: 1.5; }
.dialog label { margin-top: 20px; }
.dialog .subtle { line-height: 1.8; color: #acbfd8; }
.home-link { color: #b0cae3; }

@media (max-width: 1050px) and (min-width: 761px) {
  h1 { font-size: clamp(37px, 4.5vw, 47px); letter-spacing: -1.8px; }
  .feature-row { gap: 13px; }
  .feature-row > span { font-size: 11px; }
}
@media (max-width: 760px) {
  .brand { gap: 10px; font-size: 21px; letter-spacing: -.65px; }
  .brand img { width: 46px; height: 46px; }
  .top-meta { font-size: 10px; }
  .intro h1 { font-size: 39px; letter-spacing: -1.9px; line-height: 1.23; }
  .intro .lead { font-size: 13px; line-height: 1.8; }
  .feature-row { gap: 16px; }
  .feature-row > span { font-size: 11px; }
  .entry-card h2 { font-size: 21px; line-height: 1.5; }
  .meeting-heading h2 { font-size: 16px; }
  .meeting-heading .eyebrow { font-size: 7px; letter-spacing: .8px; }
  .meeting-info { font-size: 9px; }
  .meeting-info .small-control { font-size: 8px; }
  .call-button { font-size: 8px; }
}
@media (max-height: 720px) and (min-width: 761px) {
  h1 { font-size: 46px; letter-spacing: -2px; }
  .entry-card h2 { font-size: 20px; }
}

/* Inter: consistent Vietnamese text and tabular figures. */
html,body{font-optical-sizing:auto;font-feature-settings:'liga' 1,'calt' 1;font-variant-numeric:tabular-nums;letter-spacing:-.012em}
#roomPassword{font-size:14px;line-height:1.55}
#entrySubtitle{overflow-wrap:anywhere}

/* A small meeting illustration in the open space above the headline. */
.intro{position:relative}
.meeting-art{position:absolute;right:-8px;top:-110px;width:255px;pointer-events:none;opacity:.96}
.meeting-art svg{display:block;width:100%;height:auto;overflow:visible}
.meeting-float{animation:meeting-float 7s ease-in-out infinite;transform-origin:center}
.meeting-signal{animation:meeting-signal 2.8s ease-in-out infinite}
.meeting-wave{transform-box:fill-box;transform-origin:center bottom;animation:meeting-wave 1.25s ease-in-out infinite}
.meeting-wave:nth-child(2){animation-delay:-.35s}.meeting-wave:nth-child(3){animation-delay:-.7s}
@keyframes meeting-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes meeting-signal{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes meeting-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(max-width:1050px){.meeting-art{position:relative;top:auto;right:auto;width:190px;margin:0 0 22px auto}}
@media(prefers-reduced-motion:reduce){.meeting-float,.meeting-signal,.meeting-wave{animation:none}}