:root { --ink:#f5f6f7; --muted:#9399a5; --panel:#11141b; --line:rgba(255,255,255,.09); --accent:#b8e9d4; --accent-2:#7ea8ff; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 50% -20%,#253044 0,#11151e 34%,#080a0e 75%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.glass-card { background:rgba(17,20,27,.84); border:1px solid var(--line); box-shadow:0 28px 90px rgba(0,0,0,.45); backdrop-filter:blur(24px); }
.auth-card { width:min(100%,430px); padding:42px; border-radius:28px; }
.eyebrow { color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(184,233,212,.35); border-radius:50%; }
.brand-mark::before,.brand-mark::after,.brand-mark span { content:""; display:block; position:absolute; width:3px; border-radius:4px; background:var(--accent); }
.brand-mark::before { height:12px; transform:translateX(-8px); }.brand-mark span { height:26px; }.brand-mark::after { height:17px; transform:translateX(8px); }
.form-control,.form-select { border:1px solid var(--line); background-color:#0b0e13; min-height:54px; border-radius:14px; }
.form-control:focus,.form-select:focus { border-color:rgba(184,233,212,.6); box-shadow:0 0 0 .25rem rgba(184,233,212,.08); }
.app-shell { min-height:100vh; display:grid; grid-template-rows:auto minmax(520px,1fr) auto; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-weight:650; letter-spacing:-.02em; }
.brand-mark-sm { width:34px; height:34px; transform:scale(.72); }
.icon-button { display:grid; place-items:center; width:44px; height:44px; color:#c8cbd2; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:50%; transition:.2s ease; }
.icon-button:hover { color:#fff; background:rgba(255,255,255,.08); transform:translateY(-1px); }
.icon-button svg,.call-button svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.meeting-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:56px 24px; text-align:center; }
.status-line { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.83rem; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#7f8795; box-shadow:0 0 0 5px rgba(127,135,149,.08); }
.status-dot.live { background:#73dfaf; box-shadow:0 0 0 5px rgba(115,223,175,.1),0 0 24px rgba(115,223,175,.5); }
.voice-orb { position:relative; width:200px; height:200px; display:grid; place-items:center; }
.orb-core { width:112px; height:112px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#eefcf6 0,#a5d8c3 22%,#527e78 55%,#1c2b34 100%); box-shadow:inset -18px -22px 40px rgba(2,8,15,.5),0 20px 70px rgba(99,185,161,.2); transition:.4s ease; }
.orb-ring { position:absolute; border:1px solid rgba(184,233,212,.15); border-radius:50%; }.ring-one { inset:23px; }.ring-two { inset:2px; opacity:.5; }
.voice-orb.live .orb-core { animation:breathe 2.4s ease-in-out infinite; box-shadow:inset -18px -22px 40px rgba(2,8,15,.45),0 0 85px rgba(99,185,161,.38); }
.voice-orb.speaking .orb-core { animation:speak .65s ease-in-out infinite alternate; }
.voice-orb.listening .ring-one { animation:ripple 1.4s ease-out infinite; }
@keyframes breathe { 50%{transform:scale(1.06)} } @keyframes speak { to{transform:scale(1.12);filter:saturate(1.35)} } @keyframes ripple { to{inset:2px;opacity:0} }
.mode-label { margin:0 0 8px; color:var(--accent); font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
#headline { margin:0; font-size:clamp(2rem,4vw,3.7rem); font-weight:580; letter-spacing:-.045em; }
#subhead { max-width:560px; margin:12px auto 0; line-height:1.6; }
.controls { min-height:58px; }
.call-button { display:flex; align-items:center; gap:10px; min-width:178px; justify-content:center; padding:15px 22px; color:#08100d; background:var(--accent); border:0; border-radius:100px; font-weight:700; box-shadow:0 12px 38px rgba(96,178,153,.2); transition:.2s ease; }
.call-button:hover { transform:translateY(-2px); filter:brightness(1.06); }.end-call { color:#fff; background:#d95d66; }
.transcript-shell { width:min(900px,calc(100% - 40px)); margin:0 auto 36px; background:rgba(14,17,23,.72); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.transcript-header { display:flex; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--line); color:#b8bdc7; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.transcript-header span:last-child { color:#69717f; text-transform:none; letter-spacing:0; }
.transcript { max-height:300px; min-height:86px; overflow-y:auto; padding:20px; scroll-behavior:smooth; }
.empty-state { color:#626a77; text-align:center; padding:12px; }
.message { display:grid; grid-template-columns:88px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.045); animation:appear .25s ease; }.message:last-child{border:0}.message-role{color:var(--accent);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.message.assistant .message-role{color:#aebfff}.message-text{color:#d7dae0;line-height:1.55}.message.pending .message-text{color:#848b97}
@keyframes appear { from{opacity:0;transform:translateY(5px)} }
.offcanvas { --bs-offcanvas-width:min(420px,92vw); background:#0e1117; border-color:var(--line)!important; }.offcanvas-header { padding:28px 28px 18px; }.offcanvas-body { padding:20px 28px 32px; }.form-label{color:#cdd0d6;font-size:.82rem;font-weight:650}.form-note{color:#727986;font-size:.82rem;line-height:1.55}.history-item{width:100%;text-align:left;padding:16px 4px;color:inherit;background:none;border:0;border-bottom:1px solid var(--line)}.history-item:hover .history-name{color:var(--accent)}.history-name{display:block;font-weight:650;text-transform:capitalize;transition:.2s}.history-meta{display:block;margin-top:5px;color:#747c89;font-size:.78rem}
@media (max-width:600px){.auth-card{padding:30px 22px}.app-shell{grid-template-rows:auto minmax(470px,1fr) auto}.meeting-stage{padding:38px 18px;gap:24px}.voice-orb{width:170px;height:170px}.orb-core{width:96px;height:96px}.transcript-shell{width:calc(100% - 24px);margin-bottom:12px}.message{grid-template-columns:68px 1fr}.topbar{height:66px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}