/* Agent Lab — guest app (phone first; laptops get the same column, centred) */
html, body { height: 100%; overflow: hidden; }
body { background: radial-gradient(120% 70% at 50% -10%, #17171c 0%, #050506 55%, #000 100%); }
.app { position: fixed; inset: 0; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; height: 100dvh; }
@media (min-width: 640px) { .app { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.6); background: #000; } }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; }
.pv-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.pv-brand .bm { border-radius: 7px; }
.pv-brand small { font-weight: 500; color: var(--l2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--fill3); color: var(--cp-text-soft); white-space: nowrap; flex: none; }
.pill.warn { background: rgba(255,159,10,.2); color: var(--orange); }
.pill.ok { background: rgba(48,209,88,.16); color: var(--green); }
button.pill { cursor: pointer; }
.pv-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 16px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pv-body::-webkit-scrollbar { display: none; }
.pv-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.92) 30%); }
.h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 4px 0 6px; }
.sub { font-size: 15px; color: var(--l2); line-height: 1.38; margin: 0 0 14px; }
.sub b { color: #fff; font-weight: 600; }
.c { text-align: center; }
.sec { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--l2); margin: 16px 2px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec em { font-style: normal; color: var(--cp-text-soft); font-weight: 500; }
.sec em .sym { vertical-align: -1px; }
.btn { width: 100%; min-height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-size: 17px; font-weight: 600; background: var(--cp-accent); color: #fff; transition: transform .15s, filter .2s, opacity .2s; text-align: center; }
.btn:active { transform: scale(.98); }
.btn.gray { background: var(--fill2); }
.btn.green { background: var(--green); color: #00210b; }
.btn.ms { background: #0067b8; }
.btn:disabled { opacity: .4; }
.btn + .btn { margin-top: 8px; }
.btn.sq { width: 50px; flex: none; padding: 0; }
.btn.sm { min-height: 40px; font-size: 15px; border-radius: 12px; }
.linkbtn { display: block; margin: 12px auto 0; font-size: 14px; font-weight: 600; color: var(--cp-link); }
.card { border-radius: 16px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06); }
.rise { animation: msgIn .45s var(--ease) both; }

/* fields */
.field { min-height: 50px; border-radius: 12px; background: var(--cp-surface); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 16px; color: var(--l2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s; }
.field:focus-within { box-shadow: inset 0 0 0 1.5px var(--cp-accent); color: #fff; }
.field input, .field textarea { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 16px; padding: 13px 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--l3); }
.field.ta { align-items: flex-start; }
.field.ta textarea { resize: none; line-height: 1.35; min-height: 74px; }
.err { margin: 8px 2px 0; font-size: 13px; color: #ff6961; }
.chipgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 13px; border-radius: 18px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px var(--glass-stroke); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, transform .15s; }
.chipgrid .chip { white-space: normal; text-align: left; line-height: 1.2; }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--cp-accent); color: #fff; box-shadow: none; }
.chip.used { opacity: .45; }
.chip .sym { opacity: .85; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.privacy, .nopii { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px 12px; border-radius: 14px; background: rgba(48,209,88,.1); color: var(--cp-text-soft); font-size: 12.5px; line-height: 1.38; }
.privacy .sym { color: var(--green); margin-top: 1px; }
.privacy b { color: #fff; }
.nopii { background: rgba(10,132,255,.12); }
.nopii .sym { color: var(--cp-link); margin-top: 1px; }
.fine { display: flex; gap: 7px; align-items: flex-start; margin: 10px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--l2); }
.fine .sym { flex: none; margin-top: 1px; }
.fine.c { justify-content: center; text-align: center; margin: 8px 0 0; }
.fine a, .fine u { color: var(--cp-link); text-decoration: none; }
.aihead { display: flex; align-items: center; gap: 7px; padding: 9px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(191,90,242,.13); color: #e0a8ff; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kv-card { padding: 4px 14px; margin-top: 10px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14px; }
.kv + .kv { box-shadow: inset 0 .5px 0 var(--sep); }
.kv span { color: var(--l2); flex: none; }
.kv b { font-weight: 600; text-align: right; font-size: 13.5px; }

/* landing (room code) */
.land { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 22px calc(30px + env(safe-area-inset-bottom)); text-align: center; }
.land .h1 { font-size: 34px; margin-top: 22px; }
.codein { display: flex; gap: 10px; margin: 22px 0 6px; }
.codein input { width: 62px; height: 74px; border-radius: 16px; border: 0; outline: 0; background: var(--cp-surface); box-shadow: inset 0 0 0 1.5px var(--fill2); text-align: center; font-size: 34px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; caret-color: var(--cp-accent); }
.codein input:focus { box-shadow: inset 0 0 0 2px var(--cp-accent); }
.land .btn { max-width: 320px; margin-top: 14px; }

/* join */
.j-hero { position: relative; height: 178px; display: grid; place-items: center; margin: 0 0 4px; }
.j-hero .face { filter: drop-shadow(0 12px 30px rgba(10,132,255,.45)); position: relative; z-index: 2; }
.j-hero .orb { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; display: grid; place-items: center; background: var(--cp-surface); color: var(--cp-text-soft); box-shadow: inset 0 0 0 .5px var(--glass-stroke); animation: orbit 14s linear infinite; animation-delay: calc(var(--k) * -2.33s); }

/* check-in */
.ci-code { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 16px 0 6px; border-radius: 18px; background: rgba(255,214,10,.1); box-shadow: inset 0 0 0 1px rgba(255,214,10,.25); }
.ci-code .k { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,214,10,.16); color: var(--yellow); flex: none; }
.ci-code small { display: block; font-size: 12.5px; color: var(--l2); }
.ci-code b { display: block; font-size: 30px; font-weight: 800; letter-spacing: .14em; }
.steps3 { counter-reset: s; display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.steps3 div { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: var(--cp-surface); font-size: 14px; line-height: 1.35; color: var(--cp-text-soft); }
.steps3 div::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; background: var(--cp-accent); color: #fff; }
.steps3 b { color: #fff; }

/* scan */
.scanlist { border-radius: 14px; background: var(--cp-surface); overflow: hidden; }
.scanlist .r { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 14px; animation: msgIn .35s var(--ease) both; }
.scanlist .r + .r { box-shadow: inset 0 .5px 0 var(--sep); }
.scanlist .st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--green); color: #00210b; }
.scanlist .r.no .st { background: var(--fill2); color: var(--l2); }
.scanlist .r.wait .st { background: none; }
.scanlist .pth { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanlist small { color: var(--l2); font-size: 12px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof { margin-top: 12px; padding: 12px 14px 10px; }
.prof-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.prof-h b { font-size: 16px; flex: 1; min-width: 0; }
.prof .kv b { max-width: 62%; }
.costline { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 8px; box-shadow: inset 0 .5px 0 var(--sep); font-size: 11.5px; color: var(--l2); }

/* pain */
.pains { display: flex; flex-direction: column; gap: 8px; }
.pain { display: flex; gap: 12px; align-items: flex-start; padding: 13px; border-radius: 16px; background: var(--cp-surface); text-align: left; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; width: 100%; }
.pain .rd { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px; box-shadow: inset 0 0 0 2px var(--fill); transition: box-shadow .2s; }
.pain.on { box-shadow: inset 0 0 0 2px var(--cp-accent); background: rgba(10,132,255,.1); }
.pain.on .rd { box-shadow: inset 0 0 0 6px var(--cp-accent); }
.pain .tx { flex: 1; min-width: 0; }
.pain .tx b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.pain .tx small { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: #c99cff; }
.pain.own { align-items: center; color: var(--l2); font-size: 14.5px; background: none; box-shadow: inset 0 0 0 1.5px var(--fill2); }
.pain.own.on { color: #fff; }
.pain.own .field { flex: 1; background: none; padding: 0; min-height: 0; box-shadow: none; }
.pain.own .field input { padding: 2px 0; }

/* building (AI drafting) */
.drafting { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 6px 0; }
.drafting .face { animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 12px 30px rgba(191,90,242,.45)); }
.dlist { width: 100%; margin-top: 18px; }
.syslist { border-radius: 14px; background: var(--cp-surface); overflow: hidden; text-align: left; }
.syslist .r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; opacity: .35; transition: opacity .3s; }
.syslist .r + .r { box-shadow: inset 0 .5px 0 var(--sep); }
.syslist .r.on { opacity: 1; }
.syslist .r .tx { flex: 1; min-width: 0; }
.syslist .r .tx b { display: block; font-size: 13.5px; font-weight: 600; }
.syslist .r .tx small { display: block; font-size: 11px; color: var(--l2); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syslist .r .ok { color: var(--green); flex: none; }
.syslist .r .ic { flex: none; }
.mki { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); }

/* builder */
.btabs { display: flex; gap: 4px; padding: 0 12px 10px; }
.btabs button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: var(--l2); background: var(--fill4); transition: background .2s, color .2s; }
.btabs button .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--fill2); }
.btabs button.on { background: var(--cp-accent); color: #fff; }
.btabs button.on .n { background: rgba(255,255,255,.25); }
.btabs button.done { color: var(--cp-text-soft); }
.btabs button.done .n { background: rgba(48,209,88,.25); color: var(--green); }
.btab { animation: msgIn .35s var(--ease) both; padding-top: 2px; }
.names { display: flex; flex-direction: column; gap: 7px; }
.nm { min-height: 46px; border-radius: 13px; background: var(--cp-surface); font-size: 17px; font-weight: 600; text-align: left; padding: 0 14px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; display: flex; align-items: center; }
.nm.on { box-shadow: inset 0 0 0 2px var(--cp-accent); background: rgba(10,132,255,.1); }
.nm.own { padding: 0; }
.nm.own input { width: 100%; height: 46px; background: none; border: 0; outline: 0; padding: 0 14px; font-size: 16px; font-weight: 600; color: #fff; }
.nm.own input::placeholder { color: var(--l3); font-weight: 500; }
.faces { display: flex; gap: 8px; flex-wrap: wrap; }
.fc { padding: 4px; border-radius: 50%; box-shadow: 0 0 0 2.5px transparent; transition: box-shadow .2s, transform .25s var(--spring); }
.fc.on { box-shadow: 0 0 0 3px var(--cp-accent); transform: scale(1.06); }
.desc { padding: 12px 14px; font-size: 14px; line-height: 1.4; color: var(--cp-text-soft); }
.instr { display: flex; flex-direction: column; gap: 6px; }
.il { display: flex; gap: 6px; align-items: flex-start; padding: 8px 6px 8px 12px; border-radius: 13px; background: var(--cp-surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.il::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-accent); flex: none; margin-top: 8px; }
.il.add::before { background: var(--purple); }
.il.add { animation: flashAdd 1.2s var(--ease) both; }
.il textarea { flex: 1; min-width: 0; background: none; border: 0; outline: 0; resize: none; color: var(--cp-text-soft); font-size: 15px; line-height: 1.38; padding: 0; overflow: hidden; field-sizing: content; min-height: 21px; }
.il textarea:focus { color: #fff; }
.il .x { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--l3); flex: none; }
.addline { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--cp-link); }
.toggles { border-radius: 14px; background: var(--cp-surface); overflow: hidden; }
.tg { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; }
.tg + .tg { box-shadow: inset 0 .5px 0 var(--sep); }
.tg .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); flex: none; }
.tg .ic.ai { background: rgba(191,90,242,.2); color: #e0a8ff; }
.tg .ic.lib { background: rgba(10,132,255,.2); color: #79b8ff; }
.tg .ic.act { background: rgba(255,159,10,.18); color: var(--orange); }
.tg > span { flex: 1; min-width: 0; }
.tg b { display: block; font-size: 14.5px; font-weight: 500; }
.tg small { display: block; font-size: 11.5px; color: var(--l2); }
.tg .pv { font-size: 12px; font-weight: 600; color: var(--cp-link); display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; }
.tg .switch { transform: scale(.86); }
.tg.off { opacity: .5; cursor: default; }
.starters { display: flex; flex-direction: column; gap: 7px; }
.stq { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; background: var(--cp-surface); font-size: 14.5px; }
.stq .sym { color: var(--cp-link); }
.asum { display: flex; align-items: center; gap: 12px; padding: 12px; }
.asum b { display: block; font-size: 17px; }
.asum small { display: block; font-size: 12.5px; color: var(--l2); }
.asum .mini { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; color: var(--cp-text-soft); flex-wrap: wrap; }
.asum .mini span { color: var(--l3); margin: 0 2px; }
.bfoot { display: flex; gap: 8px; }
.bfoot .btn + .btn { margin-top: 0; }

/* create */
.mk { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.mk-face { position: relative; width: 124px; height: 124px; display: grid; place-items: center; margin-bottom: 8px; }
.mk-face .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--cp-accent); border-right-color: var(--purple); animation: spin 1.2s linear infinite; }
.mk-face.ok .ring { border-color: var(--green); animation: none; }
.mk-face.ok .face { animation: pop .6s var(--spring) both; }
.mklist { margin-top: 6px; }
.codecard { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 13px; border-radius: 14px; background: rgba(255,214,10,.12); color: var(--yellow); }
.codecard span { color: var(--cp-text-soft); font-size: 13px; }
.codecard b { color: #fff; font-size: 15px; letter-spacing: .08em; margin-left: 4px; }
.codecard small { display: block; font-size: 11.5px; color: var(--l2); }

/* chat */
.agent-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 12px 6px; border-radius: 14px; background: var(--cp-surface); }
.agent-top > span { flex: 1; min-width: 0; }
.agent-top b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-top small { display: block; font-size: 11.5px; color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 19px; font-size: 15.5px; line-height: 1.38; animation: msgIn .35s var(--ease) both; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--cp-accent); color: #fff; border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: #262628; border-bottom-left-radius: 6px; }
.msg.sys { align-self: center; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--l2); background: var(--fill4); white-space: normal; text-align: center; }
.msg.sys.warn { color: var(--orange); background: rgba(255,159,10,.12); }
.msg.sys.ok { color: var(--green); background: rgba(48,209,88,.12); }
.msg .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--l2); margin-bottom: 3px; }
.msg .flag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--l2); }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 19px; background: #262628; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--l2); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.tool { align-self: flex-start; width: 86%; border-radius: 14px; background: rgba(255,159,10,.1); box-shadow: inset 0 0 0 1px rgba(255,159,10,.25); padding: 9px 11px; animation: msgIn .35s var(--ease) both; }
.tool .th { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--orange); }
.tool .th b { flex: 1; color: #fff; font-weight: 600; }
.tool code { display: block; margin: 6px 0 4px; font: 11.5px var(--mono); color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.tool td { padding: 3px 0; vertical-align: top; }
.tool td:first-child { color: var(--l2); padding-right: 10px; }
.tool td + td { text-align: right; font-weight: 600; }
.inputbar { display: flex; align-items: center; gap: 8px; }
.inputbar .in { flex: 1; min-height: 40px; border-radius: 20px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px var(--glass-stroke); display: flex; align-items: center; padding: 0 14px; }
.inputbar .in input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 16px; padding: 9px 0; }
.inputbar .in input::placeholder { color: var(--l3); }
.inputbar .rb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cp-accent); color: #fff; flex: none; }
.inputbar .rb:disabled { background: var(--fill3); color: var(--l3); }

/* sheets (what the host is showing: vote, behind the scenes, keep) */
.sheet-bg { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s both; display: flex; justify-content: center; align-items: flex-end; }
.sheet { width: 100%; max-width: 520px; max-height: 94dvh; display: flex; flex-direction: column; border-radius: 26px 26px 0 0; background: #0d0d0f; box-shadow: 0 -20px 60px rgba(0,0,0,.6), inset 0 .5px 0 rgba(255,255,255,.12); animation: sheetIn .45s var(--ease) both; }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--fill); margin: 8px auto 0; flex: none; }
.sheet .sh-h { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; }
.sheet .sh-h b { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l2); }
.sheet .sh-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); }
.sheet .pv-body { padding-bottom: 8px; }
.sheet .pv-foot { background: none; }
.preview { white-space: pre-wrap; font-size: 14px; line-height: 1.45; color: var(--cp-text-soft); padding: 14px; }

/* vote */
.fin { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 18px; background: var(--cp-surface); text-align: left; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; }
.fin .tx { flex: 1; min-width: 0; }
.fin .tx b { display: block; font-size: 16px; }
.fin .tx small { display: block; font-size: 12px; color: var(--l2); }
.fin .tx .ln { display: block; font-size: 12.5px; color: var(--cp-text-soft); margin-top: 4px; line-height: 1.3; }
.fin .you { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: rgba(10,132,255,.25); color: #79b8ff; vertical-align: 2px; }
.fin .ck { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--fill); }
.fin.on { box-shadow: inset 0 0 0 2px var(--yellow); background: rgba(255,214,10,.08); }
.fin.on .ck { background: var(--yellow); color: #1c1c1e; box-shadow: none; }
.voted { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 11px; border-radius: 14px; background: rgba(255,55,95,.13); color: #ff8aa3; font-size: 13.5px; font-weight: 600; text-align: center; }

/* behind the scenes */
.mine { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; text-align: center; }
.mine b { font-size: 21px; margin-top: 6px; }
.mine small { font-size: 12.5px; color: var(--l2); }
.know { padding: 4px 14px; margin-top: 12px; }
.kr { display: flex; gap: 11px; align-items: center; padding: 10px 0; }
.kr + .kr { box-shadow: inset 0 .5px 0 var(--sep); }
.kr > .sym { width: 26px; height: 26px; padding: 5px; border-radius: 50%; flex: none; }
.kr.ok > .sym { background: rgba(48,209,88,.2); color: var(--green); }
.kr.no > .sym { background: rgba(255,69,58,.18); color: var(--red); }
.kr b { display: block; font-size: 14.5px; }
.kr small { display: block; font-size: 11.5px; color: var(--l2); }

/* keep */
.kp { display: flex; flex-direction: column; align-items: center; padding: 8px 0 4px; }
.kp .face { animation: bob 2.6s ease-in-out infinite; }
.keep { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(48,209,88,.16), rgba(10,132,255,.12)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.keep .kq { padding: 10px; border-radius: 16px; background: #fff; }
.keep .kq img { width: 132px; height: 132px; display: block; }
.keep .kl { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; background: rgba(0,0,0,.35); font: 12.5px var(--mono); color: #fff; }
.keep .kl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keep .kc { display: flex; align-items: baseline; gap: 10px; }
.keep .kc span { font-size: 12px; color: var(--l2); }
.keep .kc b { font-size: 24px; letter-spacing: .12em; }
.keep .kbtns { display: flex; gap: 8px; width: 100%; }
.keep .kbtns button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 600; }
.helpok { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(48,209,88,.12); color: var(--green); font-size: 13px; line-height: 1.4; }
.helpok span { color: var(--cp-text-soft); }
.helpok b { display: block; color: #fff; font-size: 14.5px; }
.paths { display: flex; flex-direction: column; gap: 7px; }
.path { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 15px; background: var(--cp-surface); text-align: left; width: 100%; color: #fff; }
.path .pt { flex: 1; min-width: 0; }
.path b { display: block; font-size: 14px; }
.path small { display: block; font-size: 11.5px; color: var(--l2); line-height: 1.3; }
.path > .sym { color: var(--l2); }

/* states */
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px; gap: 6px; }
.center .sub { max-width: 340px; }
.ended-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--fill3); color: var(--l2); margin-bottom: 8px; }
.offline { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 200; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255,159,10,.2); color: var(--orange); font-size: 12.5px; font-weight: 600; backdrop-filter: blur(10px); }
.msg.old, .tool.old { animation: none; }
a.btn { color: #fff; text-decoration: none; }
a.btn + .btn, a.btn + a.btn { margin-top: 8px; }
a.path { text-decoration: none; }
/* a screen redrawn with fresh data doesn't replay its entrance animations */
.still .rise, .still .scanlist .r, .still .btab, .still .il.add, .still .msg, .still .tool, .still .mk-face .face, .still .voted, .still .keep, .still .helpok { animation: none; }
.msg .flag { display: flex; white-space: normal; }
/* building blocks: coach cards, AI ideas, see-the-difference tests, tabs that open together */
.btabs button.locked { opacity: .5; }
.btabs button.locked .n { background: var(--fill3); }
.coach { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(150deg, rgba(var(--cc), .2), rgba(var(--cc), .06)); box-shadow: inset 0 0 0 1px rgba(var(--cc), .3); --cc: 191, 90, 242; }
.coach.c-knowledge { --cc: 10, 132, 255; } .coach.c-actions { --cc: 255, 159, 10; } .coach.c-name { --cc: 48, 209, 88; }
.coach .ci { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(var(--cc), .25); color: #fff; }
.coach b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.coach small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.38; color: var(--cp-text-soft); }
.coach em { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 9px; border-radius: 9px; background: rgba(var(--cc), .35); }
.il .x + .x { margin-left: -4px; }
.ideas, .test { margin-top: 14px; padding: 13px; border-radius: 18px; background: #121214; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ideas .ih, .test .th { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: #e0a8ff; }
.test .th { color: var(--teal); }
.ideas .ih b, .test .th b { display: block; color: #fff; font-size: 15px; }
.ideas .ih small, .test .th small { display: block; color: var(--l2); font-size: 12px; }
.ideas .own { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ideas .field, .test .field { min-height: 44px; }
.ideas .field input, .test .field input { padding: 10px 0; }
.test .btn { margin-top: 8px; }
.btn.sm .spin { width: 15px; height: 15px; border-top-color: #fff; }
.idealist { display: flex; flex-direction: column; gap: 7px; }
.idea { position: relative; padding: 11px 12px 11px; border-radius: 14px; background: var(--cp-surface); animation: msgIn .35s var(--ease) both; }
.idea .tag { margin-bottom: 6px; }
.idea b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; padding-right: 2px; }
.idea small { display: block; margin-top: 4px; font-size: 12px; color: var(--l2); line-height: 1.3; }
.idea .ib2 { margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(191,90,242,.22); color: #f0d4ff; font-size: 13px; font-weight: 600; }
.idea.done { opacity: .6; }
.idea.done .ib2 { background: rgba(48,209,88,.18); color: var(--green); }
.cmp { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cv { padding: 11px 12px; border-radius: 14px; background: #1f1f22; box-shadow: inset 3px 0 0 var(--l3); }
.cv.with { background: rgba(48,209,88,.08); box-shadow: inset 3px 0 0 var(--green); }
.cv .lb { display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--l2); }
.cv.with .lb { color: var(--green); }
.cv .tx { font-size: 14px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cp-text-soft); }
.cv.with .tx { color: #fff; }
.cv .tool { width: 100%; margin-bottom: 8px; }
/* the check-in form, built into the first screen */
.ci-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ci-mini { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 11px; border-radius: 12px; background: rgba(255,214,10,.12); box-shadow: inset 0 0 0 1px rgba(255,214,10,.25); color: var(--yellow); }
.ci-mini b { color: #fff; font-size: 16px; letter-spacing: .12em; }
.ci-frame { height: calc(100dvh - 300px); min-height: 430px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.ci-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
/* the agent's likely business impact (an AI estimate made with the kit) */
.impact { margin-top: 10px; padding: 13px 15px; border-radius: 16px; background: linear-gradient(135deg, rgba(48,209,88,.14), rgba(10,132,255,.08)); box-shadow: inset 0 0 0 1px rgba(48,209,88,.24); }
.impact .ih { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--green); }
.impact .ih em, .imp1 em { margin-left: auto; flex: none; }
.impact .ih em, .imp1 em, .kv .est { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; background: var(--fill3); color: var(--l2); white-space: nowrap; }
.kv .est { margin-left: 6px; vertical-align: 1px; }
.impact .iv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.impact .iv b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.impact .iv span { font-size: 15px; color: var(--cp-text-soft); }
.impact .ik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.impact .ik span { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.2); min-width: 0; }
.impact .ik small { display: block; font-size: 11.5px; color: var(--l2); }
.impact .ik b { display: block; font-size: 13.5px; color: #fff; line-height: 1.3; }
.impact .ib { margin: 9px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--l2); }
.imp1 { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px; padding: 10px 12px; border-radius: 14px; background: rgba(48,209,88,.12); box-shadow: inset 0 0 0 1px rgba(48,209,88,.22); color: var(--green); font-size: 13.5px; }
.imp1 span { color: var(--cp-text-soft); }
.imp1 b { color: #fff; }

/* ---------------- the run of show: wait for the room, get ready, 3-2-1, the part's timer ---------------- */
.hpills { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.pill.tmr { background: rgba(10,132,255,.2); color: #79bcff; font-variant-numeric: tabular-nums; min-width: 62px; justify-content: center; }
.pill.tmr.hot { background: rgba(255,159,10,.22); color: var(--orange); animation: live 1s infinite; }
.pill.tmr.up { background: rgba(255,69,58,.2); color: #ff8a80; }
.pv-body > .center.wait { min-height: 100%; }
.wait .ended-ic { background: rgba(10,132,255,.16); color: #79bcff; }
.upnext { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 13px 16px; border-radius: 16px; background: var(--fill4); box-shadow: inset 0 0 0 .5px var(--glass-stroke); text-align: left; color: #79bcff; }
.upnext > span:not(.dots3) { display: flex; flex-direction: column; gap: 1px; }
.upnext small { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--l2); }
.upnext b { font-size: 16px; color: #fff; }
.dots3 { display: inline-flex; gap: 4px; margin-left: 6px; }
.dots3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--l2); animation: dot 1.3s infinite; }
.dots3 i:nth-child(2) { animation-delay: .18s; } .dots3 i:nth-child(3) { animation-delay: .36s; }
#veil.vl { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; animation: fadeIn .25s both; }
#veil.ready { background: rgba(0,0,0,.38); align-items: flex-end; padding: 0 14px calc(18px + env(safe-area-inset-bottom)); }
.vl-bar { width: 100%; max-width: 492px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: rgba(28,28,30,.96); box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.14); color: #79bcff; animation: rise .4s var(--ease) both; }
.vl-bar > svg { flex: none; animation: bob 2.4s ease-in-out infinite; }
.vl-bar span { display: flex; flex-direction: column; gap: 2px; }
.vl-bar b { font-size: 17px; color: #fff; }
.vl-bar small { font-size: 13.5px; color: var(--l2); line-height: 1.3; }
#veil.count { background: rgba(0,0,0,.66); align-items: center; }
#veil.count.go { pointer-events: none; background: rgba(0,0,0,.2); }
.vl-n { font-size: 150px; font-weight: 800; letter-spacing: -.04em; color: #fff; text-shadow: 0 10px 50px rgba(10,132,255,.55); font-variant-numeric: tabular-nums; animation: cdPhone .75s var(--spring) both; }
#veil.go .vl-n { font-size: 96px; color: var(--green); text-shadow: 0 10px 50px rgba(48,209,88,.5); }
@keyframes cdPhone { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
#lookup { display: none; }
#lookup.on { display: inline-flex; position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 140; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(10,132,255,.24); color: #9ccfff; font-size: 13px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; animation: fadeIn .3s both; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.fin:disabled { opacity: .55; }
.fin.on:disabled { opacity: 1; }
.hpills [hidden] { display: none !important; }