:root{
  --bg:#07111f;
  --bg-soft:#0b1628;
  --panel:rgba(16,29,49,.82);
  --panel-solid:#101d31;
  --panel-2:#15243a;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);
  --text:#f7f9fd;
  --muted:#91a0b9;
  --purple:#7c5cff;
  --purple-2:#9a85ff;
  --teal:#35d4c7;
  --teal-soft:#173d3d;
  --coral:#ff7a6b;
  --coral-soft:#43262a;
  --gold:#f6c968;
  --danger:#ff6b75;
  --shadow:0 28px 90px rgba(0,0,0,.34);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent
}

html{
  background:var(--bg);
  scroll-behavior:smooth
}

html,
body{
  min-height:100%
}

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% -10%,rgba(124,92,255,.18),transparent 36%),
    radial-gradient(circle at 90% 10%,rgba(53,212,199,.11),transparent 34%),
    linear-gradient(180deg,#07111f 0%,#091525 50%,#07111f 100%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow-x:hidden;
}

button,
input,
select{
  font:inherit
}

button{
  user-select:none
}

.hidden{
  display:none!important
}

.ambient{
  position:fixed;
  pointer-events:none;
  filter:blur(90px);
  opacity:.3;
  z-index:0
}

.ambient-a{
  width:360px;
  height:360px;
  background:var(--purple);
  top:-170px;
  left:-120px;
  border-radius:50%
}

.ambient-b{
  width:320px;
  height:320px;
  background:var(--teal);
  right:-160px;
  top:30%;
  border-radius:50%;
  opacity:.12
}

.app-shell{
  width:min(1120px,calc(100% - 28px));
  margin:0 auto;
  padding:18px 0 44px;
  position:relative;
  z-index:1
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:6px 2px 20px
}

.brand{
  display:flex;
  align-items:center;
  gap:12px
}

.brand-mark{
  width:42px;
  height:42px;
  filter:drop-shadow(0 12px 24px rgba(124,92,255,.22))
}

.brand-mark svg{
  width:100%;
  height:100%;
  display:block
}

.brand-name{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.04em
}

.brand-tag{
  font-size:11px;
  color:var(--muted);
  margin-top:2px
}

.plan{
  display:flex;
  align-items:center;
  gap:9px
}

.badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted)
}

.badge.prem{
  background:linear-gradient(135deg,#f6c968,#ffe3a2);
  border-color:transparent;
  color:#2d240c;
  box-shadow:0 8px 24px rgba(246,201,104,.2)
}

.meter{
  font-size:11px;
  color:var(--muted)
}

.ghost-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  padding:8px 11px;
  border-radius:11px;
  cursor:pointer
}

.ghost-btn:hover{
  color:var(--text);
  border-color:var(--line-strong)
}

.auth-screen{
  min-height:calc(100vh - 90px);
  display:grid;
  place-items:center
}

.auth-layout{
  width:100%;
  display:grid;
  grid-template-columns:1.1fr .82fr;
  gap:56px;
  align-items:center;
  padding:50px 3vw 90px
}

.auth-copy h1,
.hero-panel h1{
  font-family:'Manrope',sans-serif;
  letter-spacing:-.055em;
  line-height:1.02
}

.auth-copy h1{
  font-size:clamp(42px,6vw,76px);
  max-width:760px;
  margin:12px 0 18px
}

.auth-copy>p{
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  max-width:610px
}

.eyebrow,
.section-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--teal);
  text-transform:uppercase
}

.auth-points{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px
}

.auth-points span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  padding:9px 12px;
  border-radius:999px;
  font-size:12px;
  color:#c8d2e3
}

.authcard{
  position:relative;
  background:linear-gradient(180deg,rgba(18,34,56,.96),rgba(12,24,41,.98));
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px)
}

.auth-logo{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:20px;
  background:linear-gradient(135deg,var(--purple),var(--teal));
  margin-bottom:22px;
  box-shadow:0 14px 35px rgba(124,92,255,.25)
}

.authcard h2{
  font-family:'Manrope',sans-serif;
  font-size:24px;
  letter-spacing:-.03em
}

.authcard .sub{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin:7px 0 20px
}

.input-label{
  display:block;
  color:#aab7ca;
  font-size:11px;
  font-weight:700;
  margin:0 0 7px 3px
}

.field,
.input,
select.sel{
  width:100%;
  border:1px solid var(--line);
  background:#0c192b;
  color:var(--text);
  border-radius:14px;
  outline:none;
  transition:.18s
}

.field{
  padding:13px 14px;
  margin-bottom:13px
}

.field:focus,
.input:focus,
select.sel:focus{
  border-color:rgba(124,92,255,.72);
  box-shadow:0 0 0 4px rgba(124,92,255,.1)
}

.primary,
.cta{
  width:100%;
  border:0;
  border-radius:14px;
  padding:14px 16px;
  font-weight:800;
  cursor:pointer;
  transition:.18s
}

.primary{
  background:linear-gradient(135deg,var(--purple),#6546f4);
  color:#fff;
  box-shadow:0 12px 30px rgba(124,92,255,.22)
}

.primary:hover,
.cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.05)
}

.switch{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-top:15px
}

.switch b{
  color:#c8bfff;
  cursor:pointer
}

.authmsg{
  font-size:12px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:13px
}

.authmsg.err{
  color:#ffd9dc;
  background:rgba(255,107,117,.11);
  border:1px solid rgba(255,107,117,.25)
}

.authmsg.ok{
  color:#d5fff9;
  background:rgba(53,212,199,.1);
  border:1px solid rgba(53,212,199,.22)
}

.workspace{
  display:flex;
  flex-direction:column;
  gap:14px
}

.hero-panel,
.conversation-card,
.settings-card,
.help{
  background:linear-gradient(180deg,rgba(18,32,53,.88),rgba(12,24,41,.88));
  border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.16);
  backdrop-filter:blur(18px)
}

.hero-panel{
  border-radius:var(--radius-xl);
  padding:24px
}

.hero-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px
}

.hero-panel h1{
  font-size:clamp(30px,4.5vw,50px);
  margin-top:6px
}

.connection-chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:#d8e0ec;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  white-space:nowrap
}

.connection-chip:hover,
.connection-chip.on{
  border-color:rgba(53,212,199,.55);
  background:rgba(53,212,199,.08);
  color:#bffcf6
}

.language-card{
  display:grid;
  grid-template-columns:1fr 54px 1fr;
  align-items:end;
  gap:12px;
  background:rgba(4,13,25,.48);
  border:1px solid var(--line);
  border-radius:20px;
  padding:13px
}

.lang label{
  display:block;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin:0 0 7px 5px;
  color:var(--muted)
}

.lang.a label{
  color:#ff9a90
}

.lang.b label{
  color:#77e2d8
}

select.sel{
  appearance:none;
  padding:13px 14px;
  background-color:#0c192b;
  font-weight:700;
  cursor:pointer
}

.swap{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#13223a;
  color:var(--text);
  font-size:20px;
  cursor:pointer;
  transition:.25s;
  justify-self:center
}

.swap:hover{
  transform:rotate(180deg);
  border-color:rgba(124,92,255,.5)
}

.roombar{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(53,212,199,.08);
  border:1px solid rgba(53,212,199,.2);
  padding:12px 15px;
  border-radius:16px
}

.rb-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#63738c;
  flex:none
}

.roombar.live .rb-dot{
  background:var(--teal);
  box-shadow:0 0 0 5px rgba(53,212,199,.12)
}

.rb-main{
  flex:1;
  min-width:0
}

.rb-code{
  font-weight:700;
  font-size:13px
}

.rb-code b{
  color:var(--teal);
  letter-spacing:.15em
}

.rb-status{
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.rb-leave{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer
}

.conversation-card{
  border-radius:var(--radius-xl);
  padding:20px;
  min-height:460px;
  display:flex;
  flex-direction:column;
  gap:14px
}

.conversation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 4px
}

.conversation-head h2{
  font-family:'Manrope',sans-serif;
  font-size:20px;
  letter-spacing:-.03em;
  margin-top:3px
}

.conversation-tools{
  display:flex;
  gap:7px
}

.conversation-tools button{
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  border-radius:10px;
  padding:7px 10px;
  font-size:11px;
  cursor:pointer
}

.conversation-tools button:hover{
  color:var(--text)
}

.stream{
  flex:1;
  min-height:210px;
  max-height:43vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px 4px 2px;
  scrollbar-width:thin;
  scrollbar-color:#304159 transparent
}

.empty{
  margin:auto;
  text-align:center;
  max-width:420px;
  padding:35px 15px;
  color:var(--muted)
}

.empty .big{
  font-family:'Manrope',sans-serif;
  font-size:19px;
  color:var(--text);
  margin-bottom:7px
}

.empty .sm{
  font-size:12.5px;
  line-height:1.65
}

.msg{
  max-width:82%;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
  animation:rise .26s ease
}

.msg.a{
  align-self:flex-start;
  background:linear-gradient(135deg,rgba(255,122,107,.16),rgba(255,122,107,.07));
  border-color:rgba(255,122,107,.19);
  border-bottom-left-radius:6px
}

.msg.b{
  align-self:flex-end;
  background:linear-gradient(135deg,rgba(53,212,199,.13),rgba(53,212,199,.06));
  border-color:rgba(53,212,199,.18);
  border-bottom-right-radius:6px
}

.msg .src{
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:6px
}

.msg .tgt{
  font-size:17px;
  line-height:1.45;
  font-weight:600;
  display:flex;
  gap:7px
}

.msg .pron{
  font-size:12px;
  color:#7de7de;
  font-style:italic
}

.msg.a .pron{
  color:#ffaaa1
}

.tools{
  display:flex;
  gap:6px
}

.tools button{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:8px;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer
}

.interim{
  align-self:center;
  border:1px dashed rgba(124,92,255,.4);
  background:rgba(124,92,255,.07);
  color:#c8bfff;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-style:italic
}

@keyframes rise{
  from{
    opacity:0;
    transform:translateY(7px)
  }

  to{
    opacity:1;
    transform:none
  }
}

.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.mic{
  position:relative;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--text);
  border-radius:22px;
  padding:16px 12px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:.2s;
  overflow:hidden
}

.mic:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.045)
}

.mic:disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none
}

.mic-orb,
.ring{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  font-size:21px;
  transition:.2s;
  background:#0d1a2c
}

.mic.a .mic-orb,
.mic.a .ring{
  box-shadow:inset 0 0 0 1px rgba(255,122,107,.07);
  color:var(--coral)
}

.mic.b .mic-orb,
.mic.b .ring{
  box-shadow:inset 0 0 0 1px rgba(53,212,199,.07);
  color:var(--teal)
}

.mic.live.a{
  border-color:rgba(255,122,107,.55);
  box-shadow:0 0 0 4px rgba(255,122,107,.06)
}

.mic.live.b{
  border-color:rgba(53,212,199,.55);
  box-shadow:0 0 0 4px rgba(53,212,199,.06)
}

.mic.live.a .mic-orb,
.mic.live.a .ring{
  background:var(--coral-soft);
  border-color:rgba(255,122,107,.4)
}

.mic.live.b .mic-orb,
.mic.live.b .ring{
  background:var(--teal-soft);
  border-color:rgba(53,212,199,.4)
}

.mic .lbl{
  font-size:13px;
  font-weight:800
}

.mic .sub{
  font-size:10.5px;
  color:var(--muted)
}

.wave{
  display:flex;
  align-items:center;
  gap:3px;
  height:13px
}

.wave span{
  width:3px;
  height:3px;
  border-radius:4px;
  background:#52637c
}

.mic.a .wave span{
  background:rgba(255,122,107,.8)
}

.mic.b .wave span{
  background:rgba(53,212,199,.8)
}

.mic.live .wave span{
  animation:wv .85s ease-in-out infinite
}

.wave span:nth-child(2){
  animation-delay:.1s
}

.wave span:nth-child(3){
  animation-delay:.2s
}

.wave span:nth-child(4){
  animation-delay:.3s
}

.wave span:nth-child(5){
  animation-delay:.15s
}

.wave span:nth-child(6){
  animation-delay:.05s
}

.wave span:nth-child(7){
  animation-delay:.24s
}

@keyframes wv{
  0%,
  100%{
    height:3px
  }

  50%{
    height:13px
  }
}

.room-mic{
  max-width:420px;
  margin:0 auto;
  width:100%
}

.composer{
  display:grid;
  grid-template-columns:1fr 44px 44px;
  gap:8px;
  background:rgba(4,13,25,.42);
  border:1px solid var(--line);
  padding:8px;
  border-radius:17px
}

.input{
  border:none;
  background:transparent;
  padding:11px 10px;
  font-size:14px
}

.input:focus{
  box-shadow:none
}

.send{
  border:1px solid var(--line);
  border-radius:12px;
  background:#12223a;
  color:var(--text);
  font-weight:800;
  cursor:pointer
}

.send.a:hover{
  border-color:rgba(255,122,107,.5);
  color:#ffafa7
}

.send.b:hover{
  border-color:rgba(53,212,199,.5);
  color:#9ef3eb
}

.note{
  font-size:12px;
  color:#ffd7da;
  background:rgba(255,107,117,.08);
  border:1px solid rgba(255,107,117,.18);
  border-radius:12px;
  padding:10px 12px;
  line-height:1.55
}

.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.feature-card{
  position:relative;
  display:flex;
  align-items:center;
  text-align:left;
  gap:12px;
  border:1px solid var(--line);
  background:rgba(18,32,53,.78);
  color:var(--text);
  border-radius:20px;
  padding:15px;
  cursor:pointer;
  transition:.18s
}

.feature-card:hover,
.feature-card.on{
  transform:translateY(-1px);
  border-color:rgba(124,92,255,.4);
  background:rgba(22,39,65,.92)
}

.feature-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#0c192b;
  border:1px solid var(--line);
  font-size:18px
}

.feature-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1
}

.feature-copy b{
  font-size:13px
}

.feature-copy small{
  font-size:10.5px;
  color:var(--muted);
  line-height:1.35
}

.pill{
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  color:#2d240c;
  background:var(--gold);
  padding:4px 6px;
  border-radius:7px
}

.settings-card{
  border-radius:var(--radius-xl);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px
}

.settings-title{
  font-size:11px;
  font-weight:800;
  color:#b9c5d8;
  margin-bottom:9px
}

.stylebar,
.phrasebar{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 5px;
  scrollbar-width:none
}

.stylebar::-webkit-scrollbar,
.phrasebar::-webkit-scrollbar{
  display:none
}

.stylebar .lead{
  display:none
}

.stylechip,
.phrase{
  flex:none;
  border:1px solid var(--line);
  background:#0d1a2c;
  color:var(--muted);
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  cursor:pointer;
  white-space:nowrap
}

.stylechip:hover,
.phrase:hover{
  color:var(--text);
  border-color:var(--line-strong)
}

.stylechip.on{
  color:#d5d0ff;
  border-color:rgba(124,92,255,.48);
  background:rgba(124,92,255,.11)
}

.preference-row{
  border-top:1px solid var(--line);
  padding-top:15px
}

.toggles{
  display:flex;
  gap:18px;
  flex-wrap:wrap
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  cursor:pointer
}

.tk{
  position:relative;
  width:38px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#0c192b;
  transition:.2s
}

.tk::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#71809a;
  top:2px;
  left:2px;
  transition:.2s
}

.toggle.on{
  color:#dce5f2
}

.toggle.on .tk{
  background:linear-gradient(135deg,var(--purple),#6546f4);
  border-color:transparent
}

.toggle.on .tk::after{
  transform:translateX(16px);
  background:white
}

.help{
  border-radius:18px;
  padding:13px 15px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.6
}

.help summary{
  cursor:pointer;
  color:#c8d2e2;
  font-weight:700;
  list-style:none
}

.help p{
  margin-top:9px
}

.helpbtn{
  margin-top:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(3,8,16,.76);
  backdrop-filter:blur(14px);
  display:grid;
  place-items:center;
  padding:20px;
  z-index:100
}

.modal,
.ob-card{
  width:min(100%,410px);
  background:linear-gradient(180deg,#14233a,#0d1a2c);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  box-shadow:var(--shadow);
  text-align:center;
  position:relative;
  overflow:hidden
}

.modal h3,
.ob-title{
  font-family:'Manrope',sans-serif;
  font-size:23px;
  letter-spacing:-.035em
}

.modal-icon{
  width:48px;
  height:48px;
  margin:0 auto 14px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#0a1627;
  border:1px solid var(--line);
  font-size:20px
}

.modal-subcopy,
.ob-text{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
  margin:8px 0 16px
}

.cta{
  background:linear-gradient(135deg,var(--teal),#5ce3d8);
  color:#062824;
  margin-top:12px
}

.orline{
  font-size:10px;
  color:var(--muted);
  margin:14px 0
}

.roomcode-big{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  letter-spacing:.17em;
  color:var(--teal);
  font-weight:800;
  margin:4px 0
}

.x{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11.5px;
  cursor:pointer;
  margin-top:13px
}

.price{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:800;
  margin:14px 0
}

.price small{
  font-size:13px;
  color:var(--muted);
  font-weight:600
}

.premium-badge{
  font-size:9px;
  letter-spacing:.13em;
  color:#271f0b;
  background:linear-gradient(135deg,#f6c968,#ffe3a2);
  display:inline-block;
  padding:6px 8px;
  border-radius:999px;
  font-weight:900;
  margin-bottom:14px
}

.premium-modal ul{
  list-style:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:15px 0
}

.premium-modal li{
  font-size:12.5px;
  display:flex;
  gap:8px;
  color:#dbe4f0
}

.premium-modal li b{
  color:var(--teal)
}

.premium-glow{
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  background:rgba(246,201,104,.12);
  filter:blur(50px);
  top:-130px;
  right:-80px
}

.flagnote{
  font-size:10px;
  color:var(--muted);
  margin-top:10px
}

.ob-emoji{
  font-size:48px;
  margin-bottom:12px
}

.ob-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:18px 0
}

.ob-dots i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#33445d
}

.ob-dots i.on{
  width:19px;
  border-radius:999px;
  background:var(--purple)
}

.ob-actions{
  display:flex;
  flex-direction:column;
  gap:8px
}

.ob-skip{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:6px
}

.ob-slide{
  animation:rise .25s ease
}

@media(max-width:820px){
  .auth-layout{
    grid-template-columns:1fr;
    padding:26px 0 60px;
    gap:26px
  }

  .auth-copy{
    text-align:center
  }

  .auth-copy>p{
    margin:0 auto
  }

  .auth-points{
    justify-content:center
  }

  .auth-copy h1{
    font-size:clamp(38px,11vw,60px)
  }
}

@media(max-width:620px){
  .app-shell{
    width:min(100% - 18px,1120px);
    padding-top:10px
  }

  .topbar{
    padding-bottom:13px
  }

  .brand-tag{
    display:none
  }

  .meter{
    display:none
  }

  .hero-panel,
  .conversation-card,
  .settings-card{
    border-radius:22px
  }

  .hero-panel{
    padding:17px
  }

  .hero-topline{
    align-items:center;
    margin-bottom:16px
  }

  .hero-panel h1{
    font-size:27px
  }

  .connection-chip{
    font-size:11px;
    padding:9px
  }

  .language-card{
    grid-template-columns:1fr 42px 1fr;
    gap:7px;
    padding:9px
  }

  .swap{
    width:40px;
    height:40px;
    font-size:17px
  }

  select.sel{
    font-size:13px;
    padding:12px 10px
  }

  .conversation-card{
    padding:14px;
    min-height:430px
  }

  .conversation-head h2{
    font-size:18px
  }

  .conversation-tools button{
    padding:6px 8px
  }

  .stream{
    max-height:38vh;
    min-height:190px
  }

  .msg{
    max-width:91%
  }

  .msg .tgt{
    font-size:15.5px
  }

  .controls{
    gap:8px
  }

  .mic{
    border-radius:18px;
    padding:14px 8px 12px
  }

  .feature-grid{
    grid-template-columns:1fr
  }

  .settings-card{
    padding:15px
  }

  .auth-screen{
    min-height:calc(100vh - 70px)
  }

  .auth-copy{
    display:none
  }

  .auth-layout{
    padding:18px 0
  }

  .authcard{
    padding:24px;
    border-radius:24px
  }

  .plan{
    gap:6px
  }

  .badge{
    padding:6px 8px
  }

  .ghost-btn{
    padding:7px 8px;
    font-size:11px
  }
}



/* =========================================================
   PARLA VOICE 2.0 — PREMIUM VOICE STATES
   LISTENING / TRANSLATING / SPEAKING
   ========================================================= */

/* Keep the microphone card visually calm while idle */
.mic{
  isolation:isolate;
  transform:translateZ(0);
}

/* Soft ambient glow layer */
.mic::before{
  content:"";
  position:absolute;
  inset:-45%;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  z-index:-1;
  filter:blur(30px);
  transform:scale(.7);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.mic.a::before{
  background:radial-gradient(
    circle,
    rgba(255,122,107,.28) 0%,
    rgba(255,122,107,.08) 34%,
    transparent 68%
  );
}

.mic.b::before{
  background:radial-gradient(
    circle,
    rgba(53,212,199,.28) 0%,
    rgba(53,212,199,.08) 34%,
    transparent 68%
  );
}

/* ---------------------------------------------------------
   LISTENING
   --------------------------------------------------------- */

.mic.live{
  transform:translateY(-2px);
}

.mic.live::before{
  opacity:1;
  transform:scale(1);
  animation:voiceAmbientPulse 1.9s ease-in-out infinite;
}

.mic.live.a{
  background:
    linear-gradient(
      180deg,
      rgba(255,122,107,.08),
      rgba(255,255,255,.025)
    );
  border-color:rgba(255,122,107,.7);
  box-shadow:
    0 0 0 1px rgba(255,122,107,.08),
    0 14px 42px rgba(255,122,107,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.mic.live.b{
  background:
    linear-gradient(
      180deg,
      rgba(53,212,199,.08),
      rgba(255,255,255,.025)
    );
  border-color:rgba(53,212,199,.7);
  box-shadow:
    0 0 0 1px rgba(53,212,199,.08),
    0 14px 42px rgba(53,212,199,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.mic.live .mic-orb,
.mic.live .ring{
  position:relative;
  transform:scale(1.05);
  animation:voiceOrbPulse 1.2s ease-in-out infinite;
}

.mic.live.a .mic-orb,
.mic.live.a .ring{
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,122,107,.24),
      rgba(67,38,42,.88)
    );
  box-shadow:
    0 0 0 5px rgba(255,122,107,.07),
    0 0 28px rgba(255,122,107,.18),
    inset 0 0 20px rgba(255,122,107,.09);
}

.mic.live.b .mic-orb,
.mic.live.b .ring{
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(53,212,199,.22),
      rgba(23,61,61,.9)
    );
  box-shadow:
    0 0 0 5px rgba(53,212,199,.07),
    0 0 28px rgba(53,212,199,.18),
    inset 0 0 20px rgba(53,212,199,.09);
}

/* Stronger, more organic waveform while listening */
.mic.live .wave{
  gap:4px;
}

.mic.live .wave span{
  width:3px;
  border-radius:999px;
  animation:
    voiceWave 720ms ease-in-out infinite;
  transform-origin:center;
}

.mic.live .wave span:nth-child(1){animation-delay:0ms}
.mic.live .wave span:nth-child(2){animation-delay:90ms}
.mic.live .wave span:nth-child(3){animation-delay:180ms}
.mic.live .wave span:nth-child(4){animation-delay:270ms}
.mic.live .wave span:nth-child(5){animation-delay:150ms}
.mic.live .wave span:nth-child(6){animation-delay:60ms}
.mic.live .wave span:nth-child(7){animation-delay:220ms}

/* ---------------------------------------------------------
   TRANSLATING
   --------------------------------------------------------- */

.mic.translating{
  border-color:rgba(124,92,255,.66);
  background:
    linear-gradient(
      180deg,
      rgba(124,92,255,.09),
      rgba(255,255,255,.025)
    );
  box-shadow:
    0 0 0 1px rgba(124,92,255,.07),
    0 14px 42px rgba(124,92,255,.09),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.mic.translating::before{
  opacity:.85;
  transform:scale(.95);
  background:
    radial-gradient(
      circle,
      rgba(124,92,255,.32) 0%,
      rgba(124,92,255,.08) 40%,
      transparent 70%
    );
  animation:translateAmbient 1.35s ease-in-out infinite;
}

.mic.translating .mic-orb,
.mic.translating .ring{
  color:#c9c0ff;
  border-color:rgba(124,92,255,.5);
  background:
    linear-gradient(
      145deg,
      rgba(124,92,255,.22),
      rgba(22,27,55,.95)
    );
  box-shadow:
    0 0 0 5px rgba(124,92,255,.06),
    0 0 26px rgba(124,92,255,.18),
    inset 0 0 18px rgba(124,92,255,.08);
  animation:translateSpinPulse 1.25s ease-in-out infinite;
}

.mic.translating .wave span{
  background:rgba(154,133,255,.88);
  animation:translateBars 1s ease-in-out infinite;
}

.mic.translating .wave span:nth-child(1){animation-delay:0ms}
.mic.translating .wave span:nth-child(2){animation-delay:80ms}
.mic.translating .wave span:nth-child(3){animation-delay:160ms}
.mic.translating .wave span:nth-child(4){animation-delay:240ms}
.mic.translating .wave span:nth-child(5){animation-delay:320ms}
.mic.translating .wave span:nth-child(6){animation-delay:400ms}
.mic.translating .wave span:nth-child(7){animation-delay:480ms}

.mic.translating .sub{
  color:#c6bcff;
}

/* ---------------------------------------------------------
   SPEAKING
   --------------------------------------------------------- */

.mic.speaking{
  transform:translateY(-2px);
}

.mic.speaking.a{
  border-color:rgba(255,122,107,.72);
  background:
    linear-gradient(
      180deg,
      rgba(255,122,107,.11),
      rgba(255,255,255,.025)
    );
  box-shadow:
    0 0 0 1px rgba(255,122,107,.08),
    0 16px 46px rgba(255,122,107,.11);
}

.mic.speaking.b{
  border-color:rgba(53,212,199,.72);
  background:
    linear-gradient(
      180deg,
      rgba(53,212,199,.11),
      rgba(255,255,255,.025)
    );
  box-shadow:
    0 0 0 1px rgba(53,212,199,.08),
    0 16px 46px rgba(53,212,199,.11);
}

.mic.speaking::before{
  opacity:1;
  transform:scale(1.08);
  animation:speakingGlow 1.05s ease-in-out infinite;
}

.mic.speaking .mic-orb,
.mic.speaking .ring{
  transform:scale(1.06);
  animation:speakerPulse 920ms ease-in-out infinite;
}

.mic.speaking.a .mic-orb,
.mic.speaking.a .ring{
  color:#ffd1cc;
  background:
    linear-gradient(
      145deg,
      rgba(255,122,107,.28),
      rgba(67,38,42,.94)
    );
  box-shadow:
    0 0 0 5px rgba(255,122,107,.07),
    0 0 34px rgba(255,122,107,.23);
}

.mic.speaking.b .mic-orb,
.mic.speaking.b .ring{
  color:#c7fff9;
  background:
    linear-gradient(
      145deg,
      rgba(53,212,199,.26),
      rgba(23,61,61,.94)
    );
  box-shadow:
    0 0 0 5px rgba(53,212,199,.07),
    0 0 34px rgba(53,212,199,.23);
}

.mic.speaking .wave span{
  animation:speakingWave 560ms ease-in-out infinite;
}

.mic.speaking .wave span:nth-child(1){animation-delay:0ms}
.mic.speaking .wave span:nth-child(2){animation-delay:70ms}
.mic.speaking .wave span:nth-child(3){animation-delay:140ms}
.mic.speaking .wave span:nth-child(4){animation-delay:210ms}
.mic.speaking .wave span:nth-child(5){animation-delay:105ms}
.mic.speaking .wave span:nth-child(6){animation-delay:35ms}
.mic.speaking .wave span:nth-child(7){animation-delay:175ms}

.mic.speaking.a .sub{
  color:#ffb9b2;
}

.mic.speaking.b .sub{
  color:#9ef3eb;
}

/* ---------------------------------------------------------
   APP NOTE — VOICE STATUS
   --------------------------------------------------------- */

.note:not(.hidden){
  animation:voiceNoteIn .22s ease;
}

/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes voiceWave{
  0%,
  100%{
    height:3px;
    opacity:.52;
  }

  50%{
    height:15px;
    opacity:1;
  }
}

@keyframes voiceOrbPulse{
  0%,
  100%{
    transform:scale(1.02);
  }

  50%{
    transform:scale(1.09);
  }
}

@keyframes voiceAmbientPulse{
  0%,
  100%{
    opacity:.58;
    transform:scale(.92);
  }

  50%{
    opacity:1;
    transform:scale(1.08);
  }
}

@keyframes translateAmbient{
  0%,
  100%{
    opacity:.45;
    transform:scale(.84);
  }

  50%{
    opacity:1;
    transform:scale(1.02);
  }
}

@keyframes translateSpinPulse{
  0%,
  100%{
    transform:scale(.98) rotate(-3deg);
  }

  50%{
    transform:scale(1.07) rotate(3deg);
  }
}

@keyframes translateBars{
  0%,
  100%{
    height:3px;
    opacity:.4;
  }

  50%{
    height:11px;
    opacity:1;
  }
}

@keyframes speakingGlow{
  0%,
  100%{
    opacity:.55;
    transform:scale(.92);
  }

  50%{
    opacity:1;
    transform:scale(1.12);
  }
}

@keyframes speakerPulse{
  0%,
  100%{
    transform:scale(1.02);
  }

  50%{
    transform:scale(1.10);
  }
}

@keyframes speakingWave{
  0%,
  100%{
    height:4px;
    opacity:.6;
  }

  50%{
    height:14px;
    opacity:1;
  }
}

@keyframes voiceNoteIn{
  from{
    opacity:0;
    transform:translateY(-4px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ---------------------------------------------------------
   MOBILE VOICE POLISH
   --------------------------------------------------------- */

@media(max-width:620px){

  .mic.live,
  .mic.speaking{
    transform:none;
  }

  .mic.live .mic-orb,
  .mic.live .ring,
  .mic.speaking .mic-orb,
  .mic.speaking .ring{
    width:58px;
    height:58px;
  }

  .mic .sub{
    min-height:14px;
    text-align:center;
  }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .mic::before,
  .mic.live .wave span,
  .mic.translating .wave span,
  .mic.speaking .wave span,
  .mic.live .mic-orb,
  .mic.live .ring,
  .mic.translating .mic-orb,
  .mic.translating .ring,
  .mic.speaking .mic-orb,
  .mic.speaking .ring{
    animation:none!important;
  }

}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}


/* =========================================================
   PARLA PHASE 2 — HISTORY + ACCOUNT
   ========================================================= */

.topbar-action{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:7px 10px;
  color:#cbd6e6;
  background:rgba(10,22,39,.58);
  font:600 11px/1 'Inter',sans-serif;
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.topbar-action:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  background:rgba(18,34,55,.86);
  color:#fff;
}

.modal.history-modal,
.modal.account-modal{
  width:min(100%,640px);
  max-height:min(84vh,760px);
  text-align:left;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:24px;
}

.modal.account-modal{
  width:min(100%,520px);
  overflow:auto;
}

.modal-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.modal-head-row h3{
  margin:3px 0 0;
}

.icon-close{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(7,17,31,.56);
  color:#aebbd0;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:.18s ease;
}

.icon-close:hover{
  color:#fff;
  border-color:var(--line-strong);
  background:#122238;
}

.history-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.primary.compact{
  width:auto;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:12px;
}

.history-refresh{
  min-height:38px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 13px;
  background:rgba(7,17,31,.52);
  color:var(--muted);
  font:600 11px/1 'Inter',sans-serif;
  cursor:pointer;
}

.history-refresh:hover{
  color:#fff;
  border-color:var(--line-strong);
}

.history-status{
  padding:11px 12px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  background:rgba(7,17,31,.45);
  font-size:11px;
}

.history-list{
  overflow:auto;
  padding-right:4px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.history-empty{
  display:grid;
  place-items:center;
  min-height:220px;
  text-align:center;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  color:var(--muted);
  padding:28px;
}

.history-empty b{
  display:block;
  margin-bottom:6px;
  color:#e5ecf7;
  font-size:15px;
}

.history-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 14px 14px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(17,33,54,.82),rgba(10,23,39,.76));
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.history-item:hover{
  transform:translateY(-1px);
  border-color:rgba(124,92,255,.35);
  background:linear-gradient(180deg,rgba(20,38,62,.92),rgba(12,26,44,.88));
}

.history-main{
  min-width:0;
  cursor:pointer;
}

.history-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf3fb;
  font:700 13px/1.3 'Manrope',sans-serif;
}

.history-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  color:var(--muted);
  font-size:10.5px;
}

.history-langs{
  color:#cdd7e7;
}

.history-delete{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,122,107,.16);
  border-radius:11px;
  color:#ff9a90;
  background:rgba(255,122,107,.06);
  cursor:pointer;
  transition:.18s ease;
}

.history-delete:hover{
  border-color:rgba(255,122,107,.38);
  background:rgba(255,122,107,.12);
}

.account-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(124,92,255,.09),rgba(53,212,199,.06));
}

.account-avatar{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg,var(--purple),var(--teal));
  color:#fff;
  font:800 18px/1 'Manrope',sans-serif;
  box-shadow:0 10px 30px rgba(124,92,255,.18);
}

.account-identity{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.account-identity b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f1f5fb;
  font-size:13px;
}

.account-identity span{
  color:var(--muted);
  font-size:11px;
}

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

.account-stat{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(7,17,31,.42);
}

.account-stat span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
}

.account-stat b{
  color:#e9eff8;
  font-size:13px;
}

.account-section{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(7,17,31,.34);
}

.account-section-title{
  margin-bottom:9px;
  color:#eef3fa;
  font:700 12px/1 'Manrope',sans-serif;
}

.account-pref-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:var(--muted);
  font-size:11px;
}

.account-pref-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.account-pref-row b{
  color:#cfd9e8;
  text-align:right;
  font-weight:600;
}

.account-copy{
  margin:0 0 12px;
  color:var(--muted);
  font-size:10.8px;
  line-height:1.55;
}

.danger-soft{
  width:100%;
  min-height:38px;
  border:1px solid rgba(255,122,107,.22);
  border-radius:12px;
  background:rgba(255,122,107,.07);
  color:#ffaaa2;
  font:700 11px/1 'Inter',sans-serif;
  cursor:pointer;
}

.danger-soft:hover{
  background:rgba(255,122,107,.12);
  border-color:rgba(255,122,107,.4);
}

.account-logout{
  width:100%;
  min-height:42px;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#0b1829;
  color:#d8e1ee;
  font:700 11.5px/1 'Inter',sans-serif;
  cursor:pointer;
}

.account-logout:hover{
  border-color:var(--line-strong);
  background:#102038;
}

@media(max-width:760px){
  .topbar-action span{
    display:none;
  }

  .topbar-action{
    width:34px;
    padding:0;
  }

  .modal.history-modal,
  .modal.account-modal{
    width:100%;
    max-height:88vh;
    padding:19px;
    border-radius:23px;
  }

  .history-item{
    padding:12px;
  }
}

@media(max-width:520px){
  .account-grid{
    grid-template-columns:1fr;
  }

  .history-toolbar{
    align-items:stretch;
  }

  .primary.compact,
  .history-refresh{
    flex:1;
  }
}


/* =========================================================
   PARLA PHASE 3 — TWO-DEVICE MODE 2.0
   ========================================================= */
.roommodal-v2{width:min(100%,680px);text-align:left}
.roommodal-v2 h3,.roommodal-v2>.modal-subcopy{text-align:center}
.secure-room-icon{background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(53,212,199,.12));border-color:rgba(124,92,255,.28);box-shadow:0 12px 38px rgba(124,92,255,.12)}
.room-code-input{text-transform:uppercase;letter-spacing:.14em;font-weight:800;text-align:center}
.secure-room-wait{margin-top:4px}
.secure-share-grid{display:grid;grid-template-columns:176px minmax(0,1fr);gap:16px;align-items:center;margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(8,19,33,.82),rgba(15,29,48,.78))}
.room-qr-shell{display:grid;place-items:center;width:176px;height:176px;border-radius:18px;background:#fff;padding:16px;box-shadow:0 16px 45px rgba(0,0,0,.2)}
.room-qr{width:144px;height:144px;display:grid;place-items:center}
.room-qr img,.room-qr canvas{display:block;width:144px!important;height:144px!important}
.qr-fallback{color:#111827;font-size:11px;text-align:center}
.secure-share-copy{min-width:0}
.share-label{display:block;margin:3px 0 6px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.14em}
.secure-share-copy .roomcode-big{margin:0 0 15px;text-align:left;font-size:31px;letter-spacing:.13em}
.invite-copy-row{display:flex;gap:8px}
.invite-link{min-width:0;flex:1;font-size:10px}
.copy-invite{flex:0 0 auto;min-height:42px;padding:0 13px;border:1px solid rgba(124,92,255,.32);border-radius:12px;background:rgba(124,92,255,.1);color:#d8d2ff;font:700 10.5px/1 'Inter',sans-serif;cursor:pointer}
.copy-invite:hover{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.5)}
.room-security-note{display:flex;align-items:flex-start;gap:9px;margin:10px 0 13px;padding:10px 12px;border:1px solid rgba(53,212,199,.16);border-radius:13px;background:rgba(53,212,199,.055);color:#a8c9c7;font-size:10.5px;line-height:1.45}
.room-wait-status{min-height:20px;text-align:center}
.roombar{position:relative;overflow:hidden}
.roombar::after{content:"";position:absolute;inset:auto -20% -28px auto;width:150px;height:70px;border-radius:50%;background:rgba(124,92,255,.09);filter:blur(22px);pointer-events:none}
.roombar.live{border-color:rgba(53,212,199,.28);box-shadow:0 10px 30px rgba(53,212,199,.06)}
.roombar.live .rb-status{color:#91e6df}
.connection-chip.on{border-color:rgba(53,212,199,.34);color:#b7f2ed;background:rgba(53,212,199,.08)}
@media(max-width:620px){.secure-share-grid{grid-template-columns:1fr}.room-qr-shell{margin:0 auto}.secure-share-copy .roomcode-big{text-align:center;font-size:27px}.invite-copy-row{flex-direction:column}.copy-invite{min-height:40px}}



/* AUTH HOTFIX 2 — deterministic login/signup switch */
.auth-switch-link{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:#c8bfff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.auth-switch-link:hover{
  color:#e2dcff;
  text-decoration:underline;
}


/* =========================================================
   PARLA PHASE 4 — CAMERA TRANSLATOR PRO
   ========================================================= */

.camera-pro-modal{
  width:min(100%,720px);
  max-height:min(92vh,860px);
  text-align:left;
  overflow:auto;
  padding:22px;
}

.camera-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:15px;
}

.camera-modal-head h3{
  margin-top:4px;
}

.camera-stage{
  position:relative;
  width:100%;
  min-height:280px;
  max-height:430px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 40%,rgba(124,92,255,.08),transparent 45%),
    #081422;
}

.camera-stage img{
  width:100%;
  max-height:430px;
  object-fit:contain;
  display:block;
}

.scanner-frame{
  position:absolute;
  inset:9%;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  pointer-events:none;
  box-shadow:
    0 0 0 999px rgba(2,7,14,.16),
    inset 0 0 60px rgba(124,92,255,.035);
}

.scan-corner{
  position:absolute;
  width:26px;
  height:26px;
  border-color:rgba(91,228,211,.88);
  border-style:solid;
}

.scan-corner.tl{left:-1px;top:-1px;border-width:3px 0 0 3px;border-radius:10px 0 0 0}
.scan-corner.tr{right:-1px;top:-1px;border-width:3px 3px 0 0;border-radius:0 10px 0 0}
.scan-corner.bl{left:-1px;bottom:-1px;border-width:0 0 3px 3px;border-radius:0 0 0 10px}
.scan-corner.br{right:-1px;bottom:-1px;border-width:0 3px 3px 0;border-radius:0 0 10px 0}

.scan-line{
  position:absolute;
  left:5%;
  right:5%;
  height:1px;
  top:18%;
  background:linear-gradient(90deg,transparent,rgba(53,212,199,.9),transparent);
  box-shadow:0 0 14px rgba(53,212,199,.6);
  animation:cameraScan 2.3s ease-in-out infinite;
}

@keyframes cameraScan{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(180px);opacity:1}
}

.camera-stage-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  padding:25px;
  text-align:center;
  color:var(--muted);
}

.camera-stage-empty span{
  font-size:34px;
}

.camera-stage-empty b{
  color:#e8eef7;
  font-size:13px;
}

.camera-stage-empty small{
  max-width:340px;
  font-size:10.5px;
  line-height:1.5;
}

.camera-meta{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:12px;
  margin-top:12px;
}

.camera-file-meta,
.camera-target-wrap{
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(7,17,31,.42);
}

.camera-file-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.camera-file-meta span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e7eef8;
  font-size:11.5px;
  font-weight:700;
}

.camera-file-meta small,
.camera-target-wrap > span{
  color:var(--muted);
  font-size:9.5px;
}

.camera-target-wrap{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.camera-target-wrap .sel{
  min-height:38px;
  margin:0;
}

.camera-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:13px 14px;
  border:1px solid rgba(124,92,255,.22);
  border-radius:15px;
  background:rgba(124,92,255,.07);
}

.camera-status b{
  display:block;
  color:#e9e5ff;
  font-size:11.5px;
}

.camera-status small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9.5px;
}

.camera-spinner{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:var(--purple-2);
  border-radius:50%;
  animation:cameraSpin .8s linear infinite;
}

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

.camera-result{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.camera-result-block{
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(7,17,31,.46);
}

.camera-result-translation{
  border-color:rgba(53,212,199,.18);
  background:rgba(53,212,199,.045);
}

.camera-result-label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.camera-result-text{
  white-space:pre-wrap;
  color:#cfd9e7;
  font-size:11.5px;
  line-height:1.55;
  max-height:180px;
  overflow:auto;
}

.camera-result-text.strong{
  color:#f1f7fb;
  font-size:12.5px;
  font-weight:600;
}

.camera-actions{
  display:flex;
  gap:10px;
  margin-top:13px;
}

.camera-secondary{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#0b1829;
  color:#cfd8e6;
  font:700 11px/1 'Inter',sans-serif;
  cursor:pointer;
}

.camera-secondary:hover{
  border-color:var(--line-strong);
  color:#fff;
}

.camera-primary{
  flex:1;
  min-height:42px;
}

.camera-footnote{
  margin-top:9px;
  color:#71809a;
  font-size:9.5px;
  text-align:center;
  line-height:1.4;
}

@media(max-width:640px){
  .camera-pro-modal{
    padding:17px;
    max-height:94vh;
  }

  .camera-stage{
    min-height:240px;
  }

  .camera-meta,
  .camera-result{
    grid-template-columns:1fr;
  }

  .camera-actions{
    flex-direction:column-reverse;
  }

  .camera-secondary,
  .camera-primary{
    width:100%;
  }

  .scanner-frame{
    inset:7%;
  }
}

@media(prefers-reduced-motion:reduce){
  .scan-line,
  .camera-spinner{
    animation:none!important;
  }
}


/* =========================================================
   PARLA PHASE 5A — PREMIUM ENTITLEMENTS + SUBSCRIPTIONS UI
   ========================================================= */

.subscription-account-section{
  border-color:rgba(246,201,104,.16);
  background:
    linear-gradient(180deg,rgba(246,201,104,.045),rgba(124,92,255,.025));
}

.subscription-state-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(7,17,31,.42);
}

.subscription-state-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
}

.subscription-state-row:last-child{
  border-bottom:0;
}

.subscription-state-row span{
  color:var(--muted);
  font-size:9.5px;
}

.subscription-state-row b{
  max-width:62%;
  overflow-wrap:anywhere;
  color:#eef3fb;
  font-size:10.5px;
  text-align:right;
}

.subscription-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.subscription-actions .primary{
  grid-column:1/-1;
}

.account-secondary-btn{
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b1829;
  color:#cbd5e5;
  font:700 10px/1.1 'Inter',sans-serif;
  cursor:pointer;
}

.account-secondary-btn:hover{
  border-color:var(--line-strong);
  color:#fff;
}

.account-secondary-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.subscription-copy{
  margin-top:10px;
}

.premium-v2-modal{
  position:relative;
  width:min(100%,540px);
  overflow:hidden;
}

.premium-close-top{
  position:absolute;
  top:13px;
  right:13px;
  z-index:3;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(7,17,31,.64);
  color:#dce5f2;
  font-size:21px;
  cursor:pointer;
}

.premium-price-card{
  margin:16px 0 14px;
  padding:14px;
  border:1px solid rgba(246,201,104,.2);
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%,rgba(246,201,104,.10),transparent 48%),
    rgba(7,17,31,.48);
}

.premium-price-card .price{
  margin:0;
}

.premium-price-card > span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9.5px;
}

.premium-feature-list{
  display:grid;
  gap:8px;
}

.premium-feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(7,17,31,.34);
}

.premium-feature-list li > b{
  width:25px;
  flex:0 0 25px;
  text-align:center;
}

.premium-feature-list li > span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.premium-feature-list strong{
  color:#f3f6fb;
  font-size:10.5px;
}

.premium-feature-list small{
  color:var(--muted);
  font-size:9px;
  line-height:1.4;
}

.premium-entitlement-status{
  margin-top:11px;
  padding:9px 10px;
  border:1px solid rgba(53,212,199,.15);
  border-radius:12px;
  background:rgba(53,212,199,.045);
  color:#9fded8;
  font-size:9.5px;
  line-height:1.45;
}

.premium-legal{
  margin:10px auto 0;
  max-width:430px;
  color:#6f7e95;
  font-size:8.8px;
  line-height:1.5;
  text-align:center;
}

@media(max-width:540px){
  .subscription-actions{
    grid-template-columns:1fr;
  }

  .subscription-actions .primary{
    grid-column:auto;
  }

  .subscription-state-row{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .subscription-state-row b{
    max-width:100%;
    text-align:left;
  }
}


/* =========================================================
   PARLA PHASE 6 — VOICE ENGINE PRO
   ========================================================= */

.voice-pro-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(53,212,199,.20);
  border-radius:999px;
  background:rgba(53,212,199,.07);
  color:#7de4d9;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.10em;
  white-space:nowrap;
}

.voice-pro-chip::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 12px rgba(53,212,199,.75);
}

.voice-pro-chip.limited{
  border-color:rgba(246,201,104,.20);
  background:rgba(246,201,104,.06);
  color:#e9cc86;
}

.voice-pro-chip.limited::before{
  background:var(--gold);
  box-shadow:0 0 12px rgba(246,201,104,.60);
}

.voice-account-section{
  border-color:rgba(53,212,199,.14);
  background:
    linear-gradient(180deg,rgba(53,212,199,.035),rgba(124,92,255,.02));
}

.voice-engine-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(7,17,31,.42);
}

.voice-engine-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
}

.voice-engine-row:last-child{
  border-bottom:0;
}

.voice-engine-row span{
  color:var(--muted);
  font-size:9.5px;
}

.voice-engine-row b{
  max-width:64%;
  overflow-wrap:anywhere;
  color:#eef3fb;
  font-size:10.5px;
  text-align:right;
}

.voice-engine-copy{
  margin-top:10px;
}

.mic.speaking .wave span{
  animation-duration:.75s;
}

.mic.translating .mic-orb{
  box-shadow:
    0 0 0 1px rgba(124,92,255,.18),
    0 0 34px rgba(124,92,255,.16);
}

@media(max-width:640px){
  .voice-pro-chip{
    min-height:25px;
    padding:0 7px;
    font-size:7.5px;
  }

  .voice-engine-row{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .voice-engine-row b{
    max-width:100%;
    text-align:left;
  }
}


/* =========================================================
   PHASE 7C — TOUR GUIDE 1 -> MANY
   ========================================================= */
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tourbar{display:flex;align-items:center;gap:12px;margin:14px 0;padding:13px 15px;border:1px solid rgba(124,92,255,.22);border-radius:16px;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(53,212,199,.055));box-shadow:0 14px 35px rgba(0,0,0,.14)}
.tourbar.live .rb-dot,.tour-live-badge span{background:#35d4c7;box-shadow:0 0 0 5px rgba(53,212,199,.10),0 0 18px rgba(53,212,199,.7)}
.tour-dashboard{display:grid;grid-template-columns:minmax(110px,.45fr) 1.1fr 1.6fr;gap:10px;margin:0 0 14px}
.tour-stat{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.035)}
.tour-stat>span{display:block;color:#8190a9;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.tour-stat>b{font-family:Manrope,sans-serif;font-size:28px}
.tour-language-stats{display:flex;gap:7px;flex-wrap:wrap;color:#d9e3f4;font-size:12px}
.tour-language-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(124,92,255,.18);border-radius:999px;background:rgba(124,92,255,.07)}
.tour-guide-last{font-size:12px;line-height:1.55;color:#dce5f3;max-height:58px;overflow:auto}
.tour-screen{width:100%;padding:18px 0 40px}
.tour-listener-shell{max-width:820px;margin:0 auto;padding:24px;border:1px solid rgba(124,92,255,.14);border-radius:24px;background:linear-gradient(180deg,rgba(13,25,43,.94),rgba(7,17,31,.97));box-shadow:0 30px 90px rgba(0,0,0,.28)}
.tour-listener-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.tour-listener-head h1{font-family:Manrope,sans-serif;margin:7px 0 8px;font-size:clamp(28px,5vw,44px)}
.tour-listener-head p{margin:0;color:#91a0b7}
.tour-live-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid rgba(53,212,199,.18);border-radius:999px;color:#a9eee8;font-size:11px;font-weight:900;letter-spacing:.08em}
.tour-live-badge span{display:block;width:8px;height:8px;border-radius:50%}
.tour-public-card{max-width:480px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}
.tour-public-card .field,.tour-public-card .sel{margin-bottom:10px}
.tour-listener-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.tour-session-code{font-family:Manrope,sans-serif;font-size:24px;font-weight:800;letter-spacing:.12em}
.tour-listener-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.compact-select{width:auto;min-width:155px}
.tour-mute{min-height:42px;padding:0 13px;border:1px solid rgba(124,92,255,.24);border-radius:12px;background:rgba(124,92,255,.08);color:#dce5f4;font-weight:800;cursor:pointer}
.tour-mute.muted{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#9aa6b8}
.tour-caption-stream{min-height:330px;max-height:56vh;overflow:auto;padding:18px 2px;display:flex;flex-direction:column;gap:12px}
.tour-empty{margin:auto;color:#6f7d92;text-align:center;font-size:13px}
.tour-caption{padding:16px 17px;border:1px solid rgba(124,92,255,.15);border-radius:17px;background:rgba(124,92,255,.055);animation:tourIn .22s ease-out}
.tour-caption-source{font-size:11px;line-height:1.4;color:#7f8ca2;margin-bottom:7px}
.tour-caption-text{font-size:19px;line-height:1.48;color:#f3f7fc;font-weight:600}
.tour-caption-time{margin-top:9px;font-size:9px;color:#647086;text-align:right}
.tour-listener-note{padding:11px 12px;border:1px solid rgba(53,212,199,.12);border-radius:12px;background:rgba(53,212,199,.04);color:#8db8b5;font-size:10.5px;line-height:1.45}
@keyframes tourIn{from{transform:translateY(5px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:760px){.hero-actions{justify-content:flex-start}.tour-dashboard{grid-template-columns:1fr 1fr}.tour-stat-wide{grid-column:1/-1}.tour-listener-shell{padding:17px;border-radius:19px}.tour-listener-toolbar{align-items:flex-start;flex-direction:column}.tour-listener-actions{justify-content:flex-start;width:100%}.compact-select{flex:1;min-width:140px}.tour-caption-text{font-size:17px}}

/* Phase 7C.6 interactive tour */
.tour-interactive-box{display:grid;gap:12px;margin-top:14px}
.tour-listener-mic{width:100%;min-height:126px}
.tour-listener-composer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.tour-listener-composer .input{min-width:0}
.tour-caption.mine{border-color:rgba(124,92,255,.55)}
.tour-caption-sender{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin-bottom:5px}


/* =========================================================
   PHASE 9 — PRODUCTION RELIABILITY / ACCESSIBILITY
   ========================================================= */
.network-banner{
  position:sticky;top:0;z-index:9999;width:100%;padding:10px 16px;
  border-bottom:1px solid rgba(255,190,70,.22);background:rgba(35,25,8,.96);
  color:#ffe0a3;text-align:center;font-size:12px;font-weight:800;line-height:1.35;
  backdrop-filter:blur(12px)
}
.parla-offline .cta,.parla-offline .mic{filter:saturate(.78)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(124,92,255,.72);outline-offset:3px
}
button:disabled{cursor:not-allowed;opacity:.55}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(max-width:640px){.network-banner{font-size:11px;padding:9px 12px}}


/* =========================================================
   PHASE 10 — ACCOUNT / GDPR / UI LANGUAGE
   ========================================================= */
.ui-lang-select {
  min-width: 58px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 0 8px;
  font-weight: 700;
}
.auth-link-btn {
  width: 100%; margin-top: 8px; border: 0; background: transparent;
  color: var(--muted, #aeb8c7); cursor: pointer; text-decoration: underline;
}
.privacy-links-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:.9rem; }
.privacy-links-row a, .privacy-notice a { color: #8bdad4; }
.privacy-notice {
  position: fixed; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom)); z-index: 9999;
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:18px;
  background: rgba(7,17,31,.97); box-shadow:0 18px 60px rgba(0,0,0,.4); backdrop-filter: blur(14px);
}
.privacy-notice.hidden { display:none; }
.privacy-notice-copy { display:grid; gap:5px; max-width:760px; }
.privacy-notice-copy span { color:var(--muted, #aeb8c7); font-size:.9rem; line-height:1.45; }
.privacy-notice-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:760px){ .privacy-notice{align-items:stretch; flex-direction:column;} .privacy-notice-actions{justify-content:space-between;} }