/* Compatibility for the account screens and live features outside the supplied
   reference. reference.css itself is copied unchanged from the supplied file. */
@font-face{font-family:Onest;src:url('./fonts/onest.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Unbounded;src:url('./fonts/unbounded.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
[hidden]{display:none!important}
button:disabled{opacity:.45;cursor:not-allowed}
input,textarea,select{font:inherit}
button{border:0}
a{color:inherit;text-decoration:none}
.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.primary{height:44px;padding:0 20px;border-radius:14px;border:0;background:var(--accent);color:var(--on-accent);font-weight:650}
.primary:hover{filter:brightness(1.06)}
.secondary{background:var(--raised);border-radius:14px;border:0;padding:12px 16px;color:var(--text)}
.muted{color:var(--text-2);line-height:1.6}.small{font-size:12px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.9px;color:var(--accent-ink)}
.text-button{color:var(--accent-ink);padding:14px;font-size:13px;border:0;background:none}
.icon-button{width:36px;height:36px;border:0;border-radius:12px;display:grid;place-items:center;color:var(--text-2);background:none;font-size:23px}
.icon-button:hover{background:var(--raised)}
.auth-page{height:100%;overflow:auto;display:grid;grid-template-columns:1.15fr 1fr}
.auth-story{padding:46px 64px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden;position:relative}
.auth-story:after{content:"";position:absolute;width:480px;height:480px;border:1px solid var(--line);border-radius:50%;right:-200px;bottom:-160px;box-shadow:0 0 0 70px color-mix(in oklab,var(--accent) 3%,transparent),0 0 0 140px color-mix(in oklab,var(--accent) 2%,transparent);pointer-events:none}
.auth-story .brand{display:flex;align-items:center;gap:12px;width:auto;background:none;color:var(--text);font:600 25px var(--font-display)}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border-radius:18px;width:52px;height:52px}
.brand-dot{color:var(--accent-ink)}
.story-content{margin:auto 0;padding:65px 0;z-index:1}
.story-content h1{font:600 clamp(40px,4.3vw,70px)/1.15 var(--font-display);letter-spacing:-2px;margin:24px 0}
.story-content p{line-height:1.75;color:var(--text-2);font-size:17px}
.story-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:36px}
.story-tags span{font-size:12px;color:var(--text-2);background:var(--raised);border-radius:30px;padding:8px 12px}
.story-foot{color:var(--text-3);font-size:12px;z-index:1}
.auth-side{display:flex;justify-content:center;align-items:center;padding:36px}
.auth-card{max-width:360px;width:100%}
.auth-card h2{font:600 25px/1.3 var(--font-display);margin-bottom:9px}
.auth-card label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-top:20px}
.auth-card input{background:var(--raised);border:1.5px solid transparent;border-radius:14px;color:var(--text);outline:none;padding:13px 14px;width:100%;margin-top:9px}
.auth-card input:focus{border-color:var(--accent-ink)}
.auth-card .primary,.auth-card .text-button{width:100%}
.form-error{color:var(--bad);line-height:1.4;font-size:13px;margin:16px 0;min-height:18px}
.auth-note{font-size:11px;color:var(--text-3);line-height:1.6;text-align:center;margin-top:24px}
.mobile-brand{display:none}
.s-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:inherit;width:100%}
.s-search input::placeholder{color:var(--text-3)}
.s-search kbd{white-space:nowrap}
.group-heading{display:flex;align-items:end}.group-heading .grp-h{flex:1}.group-add{width:28px;height:28px;margin-bottom:3px}
.sidebar-hint{font-size:12.5px;color:var(--text-3);padding:8px 12px;line-height:1.6}
.text-view{display:flex;flex-direction:column;flex:1;min-height:0}
.view-switch{display:flex;justify-content:center;gap:8px;padding:0 10px 6px;font-size:12px}
.view-switch button{background:var(--raised);padding:5px 12px;border-radius:12px}
.view-switch button.on{background:var(--accent);color:var(--on-accent)}
.message-search{display:flex;align-items:center;gap:10px;background:var(--raised);margin:0 20px 8px;border-radius:14px;padding:4px 12px}
.message-search input{min-width:0;flex:1;border:0;outline:0;color:var(--text);background:none;padding:7px 0}
.network-status{font-size:12px;white-space:nowrap;color:var(--text-3)}
.network-status.online{display:none}.network-status.offline{color:var(--bad)}
.older-button{margin:8px auto;display:block}
.message-body,.bubble{white-space:pre-wrap}
.call-stage-meta{position:absolute;right:32px;top:10px;z-index:4;pointer-events:none}
.call-stage-meta .qchip{background:color-mix(in oklab,var(--panel) 72%,transparent);backdrop-filter:blur(10px)}
.participants{display:contents}
.video-grid .video-tile{position:relative;min-width:0;overflow:hidden;background:var(--bg)}
.video-tile video{width:100%;height:100%;max-height:100%;object-fit:cover;background:var(--bg);display:block}.video-tile video.screen{object-fit:contain}
.video-caption{position:absolute;left:12px;bottom:12px;background:color-mix(in oklab,var(--panel) 72%,transparent);border-radius:16px;display:flex;gap:10px;align-items:center;padding:7px 12px;font-size:13px}
.video-caption button{border:0;background:none}
.audio-unlock{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);z-index:6;white-space:nowrap;font-size:12px}
.cbtn.active,.cb.active{background:var(--accent);color:var(--on-accent)}
.quality-badge.poor{color:var(--warn)}
dialog{color:var(--text);background:var(--panel);border:0;border-radius:var(--r-xl);width:min(460px,92vw);max-height:88dvh;padding:25px;margin:auto;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(8,6,24,.58);backdrop-filter:blur(8px)}
.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dialog-header h2{font:600 20px var(--font-display)}
dialog:not(.settings-dialog) label{display:block;color:var(--text-2);font-weight:600;font-size:13px;margin-top:20px}
dialog:not(.settings-dialog) input{width:100%;background:var(--raised);border:1.5px solid transparent;border-radius:14px;color:var(--text);padding:13px 14px;margin-top:9px;outline:0}
dialog:not(.settings-dialog) input:focus{border-color:var(--accent-ink)}
dialog:not(.settings-dialog) .primary{width:100%;margin-top:22px}
.settings-dialog{padding:0;width:min(1040px,calc(100vw - 40px));height:min(700px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);border-radius:34px;overflow:hidden}
.settings-dialog .modal{width:100%;height:100%;box-shadow:none;animation:none}
.settings-note{font-size:13px;color:var(--text-3);line-height:1.5;margin-top:16px}
.settings-actions{margin-top:18px}
.settings-dialog .field{display:block;color:var(--text-3);font-size:13px;font-weight:600;margin-top:16px}
.settings-dialog .field input{margin-top:8px}
.settings-dialog input[type=checkbox]{accent-color:var(--accent);width:22px;height:22px;flex:none}
.settings-dialog input[type=color]{width:46px;height:46px;padding:0;border:0;background:none;border-radius:50%;overflow:hidden}
.settings-dialog input[type=color]::-webkit-color-swatch-wrapper{padding:0}.settings-dialog input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
#theme-cards .tc-prev{width:100%}.mp{width:100%}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:min(540px,90vw);height:auto;min-height:46px;padding:13px 20px;z-index:100;line-height:1.5}
.toast.error{background:var(--bad);color:#fff}
.incoming-call{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.incoming-call p{color:var(--text-2)}
.member-ban{font-size:18px;width:28px;height:28px;flex:none;border-radius:10px;color:var(--text-3);background:none}
.member-ban:hover{background:color-mix(in oklab,var(--bad) 15%,transparent);color:var(--bad)}
.member-wrap{display:flex;align-items:center;min-width:0}.member-wrap .mrow{flex:1;min-width:0}.member-wrap .rd{background:var(--uc)}
.reference-dark{--b:#100E24;--p:#252248}.reference-light{--b:#E3E1F2;--p:#FFFFFF}.reference-system{--b:#100E24;--p:#252248;background:linear-gradient(115deg,#100E24 50%,#E3E1F2 50%)}
.settings-dialog .sh1+.sh{margin-top:0}.mp .ln:last-child b{max-width:60%}
.accent-sun{--c:#FFD23F;--k:#1B1500}.accent-mint{--c:#4FE3C1;--k:#04201A}.accent-rose{--c:#FF7FA9;--k:#2A0613}.accent-lilac{--c:#B9A2FF;--k:#170B3D}.accent-tang{--c:#FF9248;--k:#2A1100}
.emo{position:absolute;bottom:84px;right:24px;z-index:6;box-shadow:var(--shadow)}.comp-wrap{position:relative}
.pc-status>.st{width:10px;height:10px;border-radius:50%;display:inline-block}.pc-sec p{white-space:pre-wrap;overflow-wrap:anywhere}
#right-pins .msg{grid-template-columns:34px minmax(0,1fr) auto}#right-pins .msg .av{--s:34px!important}
@media(max-width:820px){.auth-page{grid-template-columns:1fr}.auth-story{display:none}.auth-side{padding:24px;min-height:100%}.mobile-brand{display:block;font:600 28px var(--font-display);color:var(--accent-ink);margin-bottom:32px}.settings-dialog{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:26px}.settings-dialog .set-nav{padding-right:54px}.settings-dialog .x-btn{width:36px;height:36px;right:12px;top:12px}.message-search{margin:0 10px 8px}.video-grid{inset:0 10px 90px;gap:8px}.call-stage-meta{right:20px}.network-status{display:none}.ctrl .csep{margin:0}.ctrl .cbtn{flex:none}.audio-unlock{max-width:calc(100% - 20px);white-space:normal;text-align:center;height:auto;padding:8px 12px}}
@media(max-width:400px){.nav .dock{padding:8px 4px}.nav .side{width:calc(100vw - 92px)}.mhead{gap:8px}.mh-title{font-size:16px;overflow:hidden;text-overflow:ellipsis;min-width:0}.mhead .hb{width:34px;height:34px}.mhead #header-notifications{display:none}.ctrl{gap:4px}.ctrl .cbtn{width:40px;height:44px}.ctrl .cbtn.leave{padding:0 12px}.ctrl .csep{display:none}}
.reference-inline-0{--s:40px;--uc:#FFC857}
.reference-inline-1{--b:#E3E1F2;--p:#F7F6FF}
.reference-inline-2{--b:#100E24;--p:#252248}
.reference-inline-3{--b:linear-gradient(90deg,#E3E1F2 50%,#100E24 50%);--p:#8C89AE}
.reference-inline-4{--c:#FFD23F;--k:#1B1500}
.reference-inline-5{--c:#A78BFA;--k:#1B1500}
.reference-inline-6{--c:#7BD5F5;--k:#1B1500}
.reference-inline-7{--c:#FF8FA3;--k:#1B1500}
.reference-inline-8{--c:#4ADE9A;--k:#1B1500}
.reference-inline-9{--c:#FF9248;--k:#1B1500}
.reference-inline-10{--p:37.5%}
.reference-inline-11{--p:55.5%}

.composer-menu{position:absolute;left:0;bottom:76px}
.setting-switch{width:50px;height:30px;border-radius:15px;background:var(--raised-2);position:relative;flex:none;display:block}
.settings-dialog .setting-switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;z-index:1;cursor:pointer}
.setting-switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--text-3);transition:transform .25s,background .2s;pointer-events:none}
.setting-switch:has(input:checked){background:var(--accent)}.setting-switch input:checked+i{transform:translateX(20px);background:var(--on-accent)}
.setting-switch:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:3px}

/* Profiles, roles and per-listener sound controls use the supplied design tokens. */
.av>img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}.av>.st{z-index:1}
.av.speaking{box-shadow:0 0 0 3px var(--accent);transition:none}.vrow.speaking .vn{color:var(--accent-ink)}
.member-details{flex:none;width:26px;height:28px;background:none;color:var(--text-3);border-radius:10px;display:grid;place-items:center}.member-details:hover{background:var(--raised);color:var(--text)}
.avatar-actions,.profile-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.avatar-actions .btn{font-size:12px;padding:0 14px}.profile-color-row .color-auto{display:flex;align-items:center;gap:9px;font-size:12.5px;margin:0;color:var(--text-2)}
.role-form{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:12px}.role-form .field{margin-bottom:0}.role-color-field{display:flex!important;flex-direction:column;gap:8px}.role-form-actions{grid-column:1/-1;display:flex;gap:10px}.role-list{display:flex;flex-direction:column;gap:8px}.role-row{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--raised);border-radius:16px}.role-label{min-width:0;flex:1;display:flex;align-items:center;gap:9px;overflow-wrap:anywhere}.role-label i,.role-choice i{width:10px;height:10px;border-radius:50%;flex:none}.role-row .btn{font-size:12px;padding:0 12px;height:34px}.role-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.role-choice{display:flex;align-items:center;gap:8px;border-radius:12px;background:var(--raised);padding:12px;overflow-wrap:anywhere;font-size:13px}.role-choice input{accent-color:var(--accent);flex:none}
.member-profile-dialog{width:min(420px,calc(100vw - 24px));padding:0}.member-profile-dialog .pcard{box-shadow:none;border-radius:0}.member-profile-dialog .x-btn{width:34px;height:34px}.profile-role-editor{padding:16px 20px 24px}.profile-role-editor h3{font-size:14px}.member-profile-dialog .participant-sound{margin-top:20px}
.participant-menu{width:min(280px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto}.participant-menu-name{padding:10px 12px;overflow-wrap:anywhere;font-size:13px}.participant-sound{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.participant-volume{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;color:var(--text-2);font-size:13px}.participant-volume span{grid-column:1/-1}.participant-volume input{width:100%;accent-color:var(--accent)}.participant-volume output{font-variant-numeric:tabular-nums;font-size:12px}.participant-sound .participant-mute{background:var(--raised);padding:0 12px;height:36px;border-radius:12px;text-align:left;font-size:13px}.participant-mute[aria-pressed=true]{color:var(--bad)}.participant-sound small{font-size:11.5px;color:var(--text-3);line-height:1.45}
.s-two>*,.pc-body,.pc-body>div{min-width:0}.pc-body h3,.pc-status,.pc-handle{overflow-wrap:anywhere;white-space:normal}.pick .st{border-radius:50%;display:inline-block}
#mic-level{width:100%;height:24px;accent-color:var(--accent)}.meter-card small{color:var(--text-3);font-size:12px;line-height:1.5}
#call-quality{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:140px;flex-shrink:0}
@media(max-width:820px){.settings-dialog .set-nav{mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent calc(100% - 12px));padding-right:65px}.role-row{flex-wrap:wrap}.role-label{flex-basis:100%}.role-choices{grid-template-columns:1fr}.participant-menu{font-size:14px}}

.role-form label.field{display:flex;flex-direction:column;gap:8px}#role-user{display:block;width:100%;margin-top:8px}