:root {
  --ink:#0b1020; --navy:#111936; --navy2:#1c3473; --blue:#2257df; --cyan:#16a9c9;
  --mist:#f4f7fc; --line:#d9e0ec; --muted:#56647c; --danger:#bd2342; --success:#087a55;
  --shadow:0 26px 70px rgba(17,25,54,.12),0 4px 14px rgba(17,25,54,.06);
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--mist); }
body { margin:0; min-height:100%; font-family:Manrope,system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 0%,#e4edff 0,transparent 34rem),radial-gradient(circle at 90% 8%,#dffafd 0,transparent 26rem),linear-gradient(#fbfcff,var(--mist)); -webkit-font-smoothing:antialiased; }
button,input,select,summary,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid rgba(34,87,223,.35); outline-offset:3px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; transform:translateY(-150%); padding:10px 14px; border-radius:10px; background:#fff; color:var(--ink); font-weight:800; }
.skip-link:focus { transform:none; }
.shell { width:min(100% - 28px,680px); margin:0 auto; padding:20px 0 28px; }
.brand { display:flex; align-items:center; gap:11px; padding:6px 2px 22px; }
.brand img { border-radius:15px; box-shadow:0 9px 25px rgba(17,25,54,.18); }
.brand-copy { display:grid; line-height:1.08; }
.brand-copy strong { font-size:18px; font-weight:800; letter-spacing:-.5px; }
.brand-copy span { font-size:12px; color:var(--muted); font-weight:700; }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
.language-control select { min-height:38px; width:auto; padding:7px 28px 7px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; font:800 12px Manrope; color:#344054; }
.secure-badge { display:flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.8); border:1px solid var(--line); backdrop-filter:blur(12px); font-size:12px; font-weight:750; color:#344054; }
.secure-badge>span:first-child { color:var(--success); font-size:17px; }
.card { background:rgba(255,255,255,.96); border:1px solid rgba(217,224,236,.95); border-radius:28px; box-shadow:var(--shadow); padding:24px; backdrop-filter:blur(18px); }
.view { display:none; }
.view.active { display:block; }
.hero-card,.state-card { text-align:center; padding:58px 25px; }
.hero-card h1,.state-card h1 { margin:22px 0 8px; }
.hero-card p,.state-card p { color:var(--muted); line-height:1.6; }
.loader { width:48px; height:48px; margin:auto; border:4px solid #dfe7f8; border-top-color:var(--blue); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
h1 { font-size:clamp(26px,8vw,38px); line-height:1.1; letter-spacing:-1.25px; margin:8px 0 12px; font-weight:800; }
.lead { color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 22px; }
.eyebrow { text-transform:uppercase; letter-spacing:1.35px; color:var(--blue); font-weight:800; font-size:12px; }
.notice { display:flex; gap:11px; text-align:left; border-radius:18px; padding:15px; background:#eaf1ff; color:#263650; font-size:13px; line-height:1.58; }
.notice svg { flex:0 0 21px; width:21px; height:21px; fill:var(--blue); }
.concise-notice { margin-bottom:16px; }
.privacy-details { margin:12px 0 4px; }
.privacy-details summary { cursor:pointer; padding:10px 2px; color:var(--blue); font-size:13px; font-weight:800; }
.privacy-list { list-style:none; padding:0; margin:10px 0 18px; display:grid; gap:10px; }
.privacy-list li { display:flex; gap:13px; text-align:left; padding:15px; border-radius:19px; background:#f7f9fd; border:1px solid #e8edf5; }
.privacy-list>li>span { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:10px; background:#e2ebff; color:var(--blue); font-size:12px; font-weight:800; }
.privacy-list div { display:grid; gap:3px; flex:1; }
.privacy-list strong { font-size:14px; }
.privacy-list small { font-size:13px; line-height:1.55; color:var(--muted); }
.check-row { display:flex; align-items:flex-start; gap:11px; text-align:left; margin:19px 2px; color:#344054; font-size:13px; line-height:1.55; cursor:pointer; }
.check-row input { width:20px; height:20px; accent-color:var(--blue); margin:0; flex:0 0 auto; }
.button { width:100%; border:0; border-radius:18px; min-height:55px; padding:15px 19px; font:750 14px Manrope; cursor:pointer; transition:.18s transform,.18s box-shadow,.18s opacity; display:flex; align-items:center; justify-content:center; gap:9px; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:active:not(:disabled) { transform:translateY(1px); }
.button.primary { color:white; background:linear-gradient(135deg,var(--blue),#1747bd); box-shadow:0 13px 28px rgba(34,87,223,.25); }
.button.secondary { background:#e8efff; color:#1747bd; margin-top:20px; }
.button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.micro { text-align:center; font-size:12px; color:var(--muted); line-height:1.55; margin:13px 0 0; }
.micro a,.download-cta { color:var(--blue); font-weight:800; }
.state-icon { width:52px; height:52px; margin:auto; display:grid; place-items:center; border-radius:18px; background:#eef3ff; color:var(--blue); font-weight:800; font-size:25px; }
.state-icon.danger { color:var(--danger); background:#fff0f3; }
.door-heading { display:flex; align-items:center; gap:14px; }
.door-heading h1 { font-size:29px; margin:3px 0 0; }
.door-symbol { width:58px; height:58px; border-radius:19px; background:linear-gradient(145deg,var(--navy),var(--navy2)); display:grid; place-items:center; box-shadow:0 12px 28px rgba(17,25,54,.2); }
.door-symbol:before { content:""; width:21px; height:31px; border:3px solid white; border-bottom-color:var(--cyan); border-radius:4px 4px 1px 1px; }
.field-group { display:grid; gap:9px; margin-top:20px; }
.field-group label,.field-label { font-size:13px; font-weight:800; color:#344054; }
.field-group label em { font-style:normal; color:var(--muted); font-weight:600; }
input,select { width:100%; border:1px solid var(--line); border-radius:17px; background:#fff; padding:15px 16px; min-height:52px; font:600 14px Manrope; color:var(--ink); outline:none; transition:.18s border,.18s box-shadow; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(34,87,223,.10); }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; background:#edf1f7; border-radius:17px; gap:3px; }
.segmented button { border:0; background:transparent; border-radius:13px; min-height:43px; padding:10px 5px; font:700 12px Manrope; color:var(--muted); cursor:pointer; }
.segmented button.selected { background:#fff; color:var(--ink); box-shadow:0 4px 13px rgba(17,25,54,.08); }
.field-note { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
#ringBtn { margin-top:24px; }
.hidden { display:none!important; }
.inline-error { margin:12px 0 0; padding:12px 14px; border-radius:14px; background:#fff0f3; color:#9e1936; font-size:13px; line-height:1.5; font-weight:700; }
.session-view.active { display:grid; gap:12px; }
.session-status { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; padding:19px; }
.session-status h1 { font-size:21px; margin:3px 0; }
.session-status p { font-size:13px; line-height:1.45; color:var(--muted); margin:0; }
.ring-pulse { width:53px; height:53px; border-radius:18px; background:#e9f0ff; display:grid; place-items:center; }
.ring-pulse span { width:16px; height:16px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 rgba(34,87,223,.35); animation:pulse 1.7s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 15px rgba(34,87,223,0); } 100% { box-shadow:0 0 0 0 rgba(34,87,223,0); } }
.ring-pulse.connected span { background:var(--success); animation:none; }
.icon-button { width:42px; height:42px; border:0; border-radius:13px; background:#eef1f6; font-size:24px; color:#48566d; cursor:pointer; }
.media-card { padding:9px; background:var(--ink); position:relative; overflow:hidden; }
.media-card>video:first-child { width:100%; height:300px; object-fit:cover; border-radius:21px; background:#080c17; }
.media-card>video:nth-child(2) { position:absolute; right:20px; top:20px; width:92px; height:126px; border-radius:16px; object-fit:cover; background:#151d32; border:2px solid rgba(255,255,255,.6); }
.media-limit { position:absolute; left:20px; top:20px; z-index:2; padding:8px 11px; border-radius:999px; background:rgba(17,25,54,.82); color:#fff; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; backdrop-filter:blur(9px); }
.media-controls { display:flex; justify-content:center; gap:11px; padding:10px 0 3px; }
.media-controls button { border:0; width:48px; height:48px; border-radius:50%; background:#2a3553; color:white; font-size:18px; cursor:pointer; }
.media-controls button.is-off { background:#f5f7fb; color:#1b2740; }
.media-controls .hangup { background:var(--danger); }
.audio-state { height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; gap:7px; }
.audio-state span { font-size:13px; color:#c4cee6; }
.audio-bars { height:44px; display:flex; align-items:center; gap:5px; }
.audio-bars i { width:5px; height:18px; background:var(--cyan); border-radius:8px; animation:bars 1s ease-in-out infinite; }
.audio-bars i:nth-child(2) { animation-delay:.15s; height:32px; } .audio-bars i:nth-child(3) { animation-delay:.3s; height:42px; } .audio-bars i:nth-child(4) { animation-delay:.45s; height:27px; } .audio-bars i:nth-child(5) { animation-delay:.6s; }
@keyframes bars { 50% { transform:scaleY(.4); } }
.media-request h2 { margin:6px 0 7px; font-size:20px; line-height:1.3; }
.media-request p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.media-request-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.media-request-actions .button { min-height:49px; padding:11px; font-size:13px; margin-top:0; }
.chat-card { padding:0; overflow:hidden; }
.chat-head { padding:17px 19px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.chat-head>div { display:grid; gap:2px; } .chat-head strong { font-size:15px; }
.online-dot { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px rgba(8,122,85,.1); }
.online-dot.offline { background:#77849b; box-shadow:none; }
.messages { height:min(43vh,340px); overflow:auto; padding:18px; display:flex; flex-direction:column; gap:9px; background:linear-gradient(#fbfcfe,#f7f9fd); }
.empty-chat { margin:auto; color:var(--muted); font-size:13px; }
.message { max-width:78%; padding:11px 14px; border-radius:18px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.message.visitor { align-self:flex-end; background:var(--blue); color:white; border-bottom-right-radius:5px; }
.message.host,.message.owner,.message.shared_user { align-self:flex-start; background:white; border:1px solid var(--line); border-bottom-left-radius:5px; }
.message.system { align-self:center; background:#e8efff; color:#26365f; font-size:12px; text-align:center; }
.composer { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border-top:1px solid var(--line); }
.composer input { min-height:48px; }
.composer button { border:0; width:48px; height:48px; border-radius:16px; background:var(--blue); color:#fff; font-size:22px; font-weight:700; cursor:pointer; }
footer { text-align:center; padding:7px 20px 28px; color:var(--muted); font-size:12px; line-height:1.6; }
.download-cta { display:inline-block; text-decoration:none; }
.download-cta:hover { text-decoration:underline; }
@media (max-width:520px) { .secure-badge>span:last-child { display:none; } }
@media (max-width:420px) { .shell { width:min(100% - 20px,680px); padding-top:10px; } .card { padding:20px; border-radius:24px; } .header-tools { gap:5px; } .secure-badge { padding:7px 9px; } .media-card>video:first-child { height:245px; } .session-status { grid-template-columns:auto 1fr auto; gap:10px; } .media-request-actions { grid-template-columns:1fr; } }
@media (max-width:330px) { .brand-copy span { display:none; } .segmented { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }