/* Deal Room — 90-second product film. Everything lives on a fixed 1600×900 stage that is scaled to fit. */

html, body.film { margin: 0; height: 100%; overflow: hidden; background: #efe8f3; }
#viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px;
  transform-origin: 0 0; overflow: hidden; font-size: 15px; color: var(--ink);
}
.desk {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 8% 0%, #ffe3e3 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 10%, #efe0ff 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 110%, #e3f5ff 0%, transparent 60%),
    #f6f1f4;
}

/* --------------------------------------------------------- windows */
.win { position: absolute; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(40,20,60,.35), 0 0 0 1px rgba(0,0,0,.06); }
.win-bar { height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #f6f6f7; border-bottom: 1px solid #e9e9ec; font-size: 13px; color: #555; }
.win-bar.dark { background: #242429; color: #ddd; border-color: #34343b; }
.lights { display: flex; gap: 7px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.win-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.win-title .ic { width: 16px; height: 16px; }

.app { left: 60px; top: 34px; width: 1480px; height: 706px; transition: transform .8s cubic-bezier(.3,.7,.2,1), filter .6s; }
.app.dim { filter: saturate(.7) brightness(.97); }
.app-body { display: flex; height: calc(100% - 38px); }

.ext { opacity: 0; transform: translateY(26px) scale(.96); pointer-events: none; transition: opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1); z-index: 10; }
.ext.open { opacity: 1; transform: none; }
.ext.min { opacity: 0; transform: translate(-340px, 260px) scale(.3); transition: opacity .7s, transform .8s cubic-bezier(.6,0,.3,1); }
.teams { left: 190px; top: 64px; width: 1220px; height: 640px; background: #1b1b1f; color: #eee; }
.slack { left: 660px; top: 96px; width: 860px; height: 560px; }
.sf { left: 250px; top: 130px; width: 1100px; height: 470px; }

/* --------------------------------------------------------- sidebar */
.side { width: 238px; flex: none; background: #fbfaf9; border-right: 1px solid #eee; padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.side-logo { display: flex; align-items: center; gap: 8px; font-size: 21px; letter-spacing: -0.04em; padding: 2px 8px 16px; }
.side-logo b { font-weight: 600; margin-right: -8px; }
.side-logo .logo-mark { width: 28px; height: 20px; }
.side-logo .logo-mark i { width: 16px; height: 16px; top: 2px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 15px; color: #333; position: relative; transition: background .2s; }
.side-nav a svg { width: 18px; height: 18px; fill: none; stroke: #555; stroke-width: 1.8; stroke-linejoin: round; }
.side-nav a[data-nav="rooms"] svg { fill: #555; stroke: none; }
.side-nav a.on { background: #efecea; font-weight: 500; color: var(--ink); }
.side-nav a.press { background: #e2ded9; }
.badge { margin-left: auto; min-width: 20px; height: 20px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; padding: 0 6px; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.badge.on { transform: scale(1); }
.side-h { margin: 20px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #999; }
.side-rooms a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: #444; }
.side-rooms a i { width: 9px; height: 9px; border-radius: 3px; }
.side-rooms a.on { background: #f1eeeb; color: var(--ink); font-weight: 500; }
.side-agents div { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 13.5px; color: #444; }
.side-agents em { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #d8d8d8; }
.side-agents em.live { background: #2fb36b; box-shadow: 0 0 0 3px rgba(47,179,107,.15); }

/* --------------------------------------------------------- main + topbar */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 62px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid #efefef; }
.ask { flex: 1; max-width: 640px; height: 40px; border: 1px solid #e3e3e3; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #999; font-size: 15px; background: #fafafa; transition: border-color .25s, box-shadow .25s, background .25s; }
.ask svg { width: 17px; height: 17px; fill: none; stroke: #999; stroke-width: 2; flex: none; }
.ask kbd { margin-left: auto; font: 12px var(--font); color: #999; border: 1px solid #e3e3e3; border-radius: 5px; padding: 1px 6px; background: #fff; }
.ask.focus { border-color: #b9a5f7; box-shadow: 0 0 0 4px rgba(163,92,242,.12); background: #fff; }
.ask-typed { color: var(--ink); white-space: nowrap; }
.ask-typed.typing::after, .typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--pink); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.bell { position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-left: auto; }
.bell svg { width: 20px; height: 20px; fill: none; stroke: #555; stroke-width: 1.8; stroke-linejoin: round; }
.bell .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.viewas { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border: 1px solid #ececec; border-radius: 99px; transition: box-shadow .3s, border-color .3s; }
.viewas .av { --s: 30px; font-size: 11px; }
.viewas small { display: block; font-size: 10.5px; color: #999; line-height: 1.1; }
.viewas b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.viewas.flash { border-color: #b9a5f7; box-shadow: 0 0 0 5px rgba(163,92,242,.15); }

.views { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .5s; pointer-events: none; overflow: hidden; }
.view.on { opacity: 1; transform: none; }

/* --------------------------------------------------------- deal room view */
.rh { display: flex; align-items: center; gap: 16px; }
.rh-logo { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #ffb070, #ff7a45); color: #fff; font-weight: 700; font-size: 22px; display: grid; place-items: center; }
.rh-t h2 { font-size: 25px; letter-spacing: -0.03em; }
.rh-t p { font-size: 14px; color: #666; margin-top: 2px; }
.rh-t p b { font-weight: 500; color: var(--ink); }
.health { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: 14px; transition: background .5s, color .5s, transform .3s; }
.health i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.health b { font-weight: 600; }
.health.ok { background: var(--ok-bg); color: var(--ok); }
.health.risk { background: var(--bad-bg); color: var(--bad); animation: pulseRisk 1.6s ease-in-out 2; }
@keyframes pulseRisk { 50% { transform: scale(1.08); } }
.rh .av-stack .av { --s: 30px; font-size: 11px; }
.rtabs { display: flex; gap: 22px; border-bottom: 1px solid #eee; margin: 18px 0 18px; font-size: 14px; color: #777; }
.rtabs span { padding-bottom: 10px; }
.rtabs span.on { color: var(--ink); border-bottom: 2px solid var(--ink); font-weight: 500; }
.rgrid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; height: calc(100% - 128px); }
.rcol { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.card { border: 1px solid #ececec; border-radius: 14px; padding: 16px 18px; background: #fff; min-height: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
.card-h b { font-weight: 600; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #c9372c; text-transform: uppercase; letter-spacing: .05em; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: blink 1.4s infinite; }
.dtl-card { overflow: hidden; }
.dtl { display: flex; flex-direction: column; gap: 4px; }
.dtl-item { display: flex; gap: 12px; padding: 10px 10px; border-radius: 12px; transition: background 1.2s, opacity .5s; }
.dtl-item > .av, .dtl-item > .blob { flex: none; margin-top: 2px; }
.dtl-item .av { --s: 28px; font-size: 10px; }
.dtl-item.old { opacity: .55; }
.dtl-item.new { animation: tlIn .6s cubic-bezier(.2,.8,.2,1) both; background: #fdf1fb; }
.dtl-item.new.settled { background: transparent; }
.dtl-item.risk { background: #fff3f1; }
.dtl-item.good.new { background: #effaf3; }
@keyframes tlIn { from { opacity: 0; transform: translateY(-14px); max-height: 0; } to { opacity: 1; transform: none; max-height: 140px; } }
.dtl-meta { font-size: 12.5px; color: #888; }
.dtl-meta b { color: #333; font-weight: 500; }
.dtl-text { font-size: 15.5px; margin: 2px 0 6px; line-height: 1.4; }
.dtl-text b { font-weight: 600; }
.dtl-item.risk .dtl-text b { color: var(--bad); }
.dtl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cite { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #555; background: #f3f3f3; border-radius: 99px; padding: 3px 10px 3px 7px; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.cite .ic { width: 13px; height: 13px; }
.cite.hover { background: #ece4ff; box-shadow: 0 0 0 2px #cdb8ff; }

.oi { padding: 8px 0; border-top: 1px solid #f2f2f2; }
.oi:first-of-type { border-top: 0; padding-top: 0; }
.oi-h { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #999; margin: 0 0 6px; }
.oi-h span { background: #f0f0f0; color: #666; border-radius: 99px; padding: 0 7px; margin-left: 4px; }
.oi-empty { font-size: 13.5px; color: #bbb; margin: 0; }
.oi-row { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 0; }
.oi-row.new { animation: tlIn .5s both; }
.oi-row.bad { color: var(--bad); }
.oi-row.done { color: #9a9a9a; text-decoration: line-through; }
.oi-r { margin-left: auto; font-size: 12.5px; color: #888; text-decoration: none; }
.ck { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #bbb; flex: none; transition: background .3s, border-color .3s; }
.oi-row.done .ck { background: #3fae63; border-color: #3fae63; }
.hc-big { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--ok); transition: color .5s; }
.hc-bar { height: 8px; border-radius: 99px; background: #eee; overflow: hidden; margin: 10px 0 8px; }
.hc-bar i { display: block; height: 100%; width: 88%; background: #2fb36b; border-radius: 99px; transition: width 1s cubic-bezier(.3,.7,.2,1), background .6s; }
.hc.risk .hc-big { color: var(--bad); }
.hc.risk .hc-bar i { width: 34%; background: var(--bad); }
.hc-note { font-size: 13.5px; color: #666; margin: 0; }

/* --------------------------------------------------------- inbox view */
.ib { display: grid; grid-template-columns: 330px 1fr; gap: 20px; height: 100%; }
.ib-list { border-right: 1px solid #f0f0f0; padding-right: 16px; }
.ib-h { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; }
.ib-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; margin-bottom: 4px; }
.ib-item .av { --s: 26px; font-size: 10px; }
.ib-item b { display: block; font-weight: 500; font-size: 14.5px; }
.ib-item small { display: block; font-size: 13px; color: #888; }
.ib-item em { margin-left: auto; font-style: normal; font-size: 12px; color: #999; }
.ib-item.on { background: #f5f0ff; box-shadow: inset 3px 0 0 var(--violet); }
.ap { border: 1px solid #ececec; border-radius: 16px; padding: 22px 24px; max-width: 860px; }
.ap-h { display: flex; gap: 14px; align-items: center; }
.ap-h b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.ap-h small { display: block; font-size: 13px; color: #888; margin-top: 2px; }
.ap-state { margin-left: auto; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); transition: all .4s; }
.ap-state.ok { background: var(--ok-bg); color: var(--ok); }
.ap-meta { display: grid; grid-template-columns: 40px auto 40px auto; gap: 6px 10px; justify-content: start; align-items: center; margin: 18px 0 14px; font-size: 14px; }
.ap-meta span { color: #999; }
.ap-meta b { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-right: 24px; }
.ap-meta .ic { width: 15px; height: 15px; }
.ap-msg { background: #f8f8fa; border: 1px solid #efeff2; border-radius: 12px; padding: 14px 16px; font-size: 15.5px; line-height: 1.55; transition: box-shadow .3s; }
.ap-msg p { margin: 0 0 6px; }
.ap-msg p:last-child { margin: 0; }
.ap-msg b { font-weight: 600; }
.ap-msg.hover { box-shadow: 0 0 0 3px #e3d7ff; }
.ap-why { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: #555; line-height: 1.45; }
.ap-why svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--violet); stroke-width: 1.8; }
.ap-why b { color: var(--ink); font-weight: 600; }
.ap-src { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #999; }
.ap-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ap-btns .btn { height: 42px; font-size: 15px; }
#approveBtn { transition: transform .15s, background .3s; }
#approveBtn.press { transform: scale(.94); }
#approveBtn.sent { background: #1f9d55; }

/* --------------------------------------------------------- executive view */
.ex { transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.ex.up { transform: translateY(-196px); }
.ex-hi { font-size: 28px; letter-spacing: -0.03em; margin: 2px 0 16px; }
.kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.kpis3 div { border: 1px solid #ececec; border-radius: 14px; padding: 14px 16px; }
.kpis3 small { display: block; font-size: 12.5px; color: #888; }
.kpis3 b { display: block; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
#kpiAttn.hot { color: var(--bad); }
.ans { border: 1px solid #ececec; border-radius: 16px; padding: 16px 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.ans.on { opacity: 1; transform: none; }
.ans-h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.ans-h b { display: block; font-size: 17px; font-weight: 600; }
.ans-h small { display: block; font-size: 12.5px; color: #888; }
.ans-row { display: grid; grid-template-columns: 170px 70px 1fr 90px 150px; gap: 14px; align-items: center; padding: 12px 10px; border-top: 1px solid #f2f2f2; font-size: 14.5px; opacity: 0; transform: translateX(-10px); transition: opacity .45s, transform .45s, background .3s; border-radius: 10px; }
.ans-row.on { opacity: 1; transform: none; }
.ans-row b { font-weight: 600; }
.ans-row .amt { color: #666; }
.ans-row .why { color: #444; }
.ans-row .pill { justify-self: start; font-size: 12px; }
.ans-row.hover { background: #f6f1ff; }
.xdrill { margin-top: 14px; border: 1px solid #e6dcff; background: #fbf9ff; border-radius: 16px; padding: 14px 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.xdrill.on { opacity: 1; transform: none; }
.crumbs2 { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #999; margin-bottom: 12px; }
.crumbs2 span { background: #fff; border: 1px solid #ece6ff; color: #444; padding: 3px 10px; border-radius: 6px; }
.crumbs2 span.cur { background: var(--ink); color: #fff; border-color: var(--ink); }
.mail { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 12px 14px; }
.mail-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mail-h .ic { width: 16px; height: 16px; }
.mail-h b { font-weight: 500; }
.mail-h small { color: #999; margin-left: auto; font-size: 12.5px; }
.mail p { margin: 8px 0 0; font-size: 15px; }
.mail mark { background: #ffe3a3; padding: 0 3px; border-radius: 3px; }
.drill-next { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: #555; }

/* --------------------------------------------------------- toast */
.toast { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 16px; font-size: 14.5px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; z-index: 5; }
.toast.on { opacity: 1; transform: none; }
.toast .check-dot { width: 24px; height: 24px; }

/* --------------------------------------------------------- Teams */
.tm { display: grid; grid-template-columns: 1fr 390px; grid-template-rows: minmax(0, 1fr); height: calc(100% - 38px - 64px); }
.tm-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; min-height: 0; }
.vtile { position: relative; border-radius: 12px; background: #2a2a30; display: grid; place-items: center; transition: box-shadow .3s; }
.vtile .av-lg { --s: 84px; font-size: 28px; }
.vtile { min-height: 0; overflow: hidden; }
.vtile .tn { position: absolute; left: 12px; bottom: 10px; font-size: 13px; color: #ccc; }
.vtile.speaking { box-shadow: 0 0 0 3px #7f8cff; }
.vtile.speaking .av-lg { animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { from { box-shadow: 0 0 0 0 rgba(127,140,255,.5); } to { box-shadow: 0 0 0 12px rgba(127,140,255,0); } }
.vtile.nt { background: linear-gradient(160deg, #2b2b36, #24242c); }
.nt-status { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: rgba(255,255,255,.08); padding: 4px 10px; border-radius: 99px; color: #cfe; transition: background .3s; }
.nt-status i { width: 7px; height: 7px; border-radius: 50%; background: #2fd173; animation: blink 1.2s infinite; }
.nt-status.hit { background: rgba(47,209,115,.25); color: #fff; }
.tm-tr { border-left: 1px solid #2f2f36; padding: 16px 18px; overflow: hidden; }
.tm-trh { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #999; margin: 0 0 14px; }
.tr-line { margin-bottom: 16px; font-size: 15px; line-height: 1.5; color: #d4d4d8; animation: tlIn .4s both; }
.tr-line .who { display: flex; gap: 8px; font-size: 12.5px; color: #999; margin-bottom: 2px; }
.tr-line .who b { color: #fff; font-weight: 500; }
.tr-line.hl .txt { background: linear-gradient(90deg, rgba(255,90,95,.32), rgba(178,94,240,.32)); color: #fff; border-radius: 4px; padding: 1px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .6s; }
.tm-ctrl { height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; border-top: 1px solid #2f2f36; }
.tm-ctrl span { width: 44px; height: 44px; border-radius: 50%; background: #34343b; }
.tm-ctrl .leave { width: auto; padding: 0 20px; border-radius: 99px; background: #c4314b; color: #fff; display: grid; place-items: center; font-size: 14px; }
.rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #ff8d8d; font-weight: 600; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: blink 1.2s infinite; }

/* --------------------------------------------------------- Slack */
.sl { display: grid; grid-template-columns: 200px 1fr; height: calc(100% - 38px); }
.sl-side { background: #3f0e40; color: #d9c9da; padding: 16px 12px; font-size: 14.5px; }
.sl-side b { color: #fff; display: block; margin: 0 6px 14px; font-weight: 600; }
.sl-side p { margin: 0; padding: 5px 8px; border-radius: 6px; }
.sl-side p.on { background: #1164a3; color: #fff; }
.sl-h { padding: 14px 20px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 16px; }
.sl-h small { font-weight: 400; color: #999; font-size: 13px; margin-left: 8px; }
.sl-msgs { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.sl-msg { display: flex; gap: 12px; animation: tlIn .45s both; }
.sl-msg .av { --s: 38px; border-radius: 9px; font-size: 13px; flex: none; }
.sl-msg b { font-weight: 600; font-size: 15px; }
.sl-msg .t { color: #999; font-size: 12.5px; margin-left: 6px; }
.sl-msg .via { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: #f3edff; color: #6b3fd4; padding: 1px 8px; border-radius: 99px; margin-left: 6px; }
.sl-msg p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.sl-msg .ctx { margin-top: 8px; border-left: 3px solid #d7c8ff; padding: 6px 10px; font-size: 13.5px; color: #555; background: #faf8ff; border-radius: 0 8px 8px 0; }
.clock { margin-left: auto; font-weight: 600; font-size: 13px; color: #333; background: #fff; border: 1px solid #e3e3e3; border-radius: 99px; padding: 3px 12px; transition: background .3s, color .3s; }
.clock.spin { background: var(--ink); color: #fff; }

/* --------------------------------------------------------- Salesforce */
.sfb { position: relative; padding: 24px 28px; height: calc(100% - 38px); overflow: hidden; }
.sf-h { display: flex; align-items: center; gap: 16px; }
.sf-ic { width: 52px; height: 52px; border-radius: 12px; background: #e6f4fb; display: grid; place-items: center; }
.sf-ic .ic { width: 30px; height: 30px; }
.sf-h small { display: block; font-size: 13px; color: #888; }
.sf-h h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.sf-amt { margin-left: auto; text-align: right; }
.sf-amt b { font-size: 24px; font-weight: 600; }
.sf-path { display: flex; margin: 28px 0 24px; }
.sf-path span { flex: 1; height: 44px; display: grid; place-items: center; font-size: 14px; font-weight: 500; background: #eef0f3; color: #666; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-right: -8px; transition: background .5s, color .5s; }
.sf-path span:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 22px 0 0 22px; }
.sf-path span.done { background: #cfe9da; color: #1d6b43; }
.sf-path span.cur { background: #0b5cab; color: #fff; }
.sf-path span.won { background: #1f9d55; color: #fff; }
.sf-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sf-fields div { border-top: 1px solid #eee; padding-top: 10px; }
.sf-fields small { display: block; font-size: 12.5px; color: #888; }
.sf-fields b { display: block; font-weight: 500; font-size: 15.5px; margin-top: 3px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2.4s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 500px) rotate(var(--r)); opacity: 0; } }

/* --------------------------------------------------------- popover */
.pop { position: absolute; width: 440px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .3s, transform .3s; z-index: 30; pointer-events: none; }
.pop.on { opacity: 1; transform: none; }
.pop-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pop-h .ic { width: 16px; height: 16px; }
.pop-h b { font-weight: 600; }
.pop-h small { margin-left: auto; color: #999; }
.pop-q { display: flex; gap: 10px; margin: 12px 0; }
.pop-q .av { --s: 28px; font-size: 10px; flex: none; }
.pop-q p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pop-q p b { display: block; font-size: 12.5px; font-weight: 500; color: #888; }
.pop-f { display: flex; justify-content: space-between; font-size: 12.5px; color: #6b3fd4; border-top: 1px solid #f0f0f0; padding-top: 10px; }
.pop-f span:last-child { color: var(--ok); }

/* --------------------------------------------------------- captions */
.cap { position: absolute; left: 0; right: 0; top: 760px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 40; opacity: 0; transition: opacity .4s; }
.cap.on { opacity: 1; }
.cap-chip { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 5px 12px; border-radius: 99px; }
.cap p { margin: 0; font-size: 31px; letter-spacing: -0.02em; font-weight: 500; text-align: center; max-width: 1400px; line-height: 1.2; }
.cap p.in { animation: capIn .5s cubic-bezier(.2,.8,.2,1) both; }
.cap p b { font-weight: 600; }
@keyframes capIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* --------------------------------------------------------- title / end cards */
.tcard { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; background: rgba(250,246,248,.94); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .7s; }
.tcard.on { opacity: 1; }
.tcard h1 { font-size: 76px; line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; }
.tcard p { font-size: 24px; color: #666; margin: 0; letter-spacing: -0.01em; }
.tc-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 32px; letter-spacing: -0.04em; }
.tc-logo b { font-weight: 600; margin-right: -10px; }
.tc-url { margin-top: 10px; font-size: 22px; font-weight: 500; background: var(--ink); color: #fff; padding: 12px 26px; border-radius: 99px; }
.tcard.on h1 { animation: capIn .9s .15s both; }
.tcard.on p { animation: capIn .9s .35s both; }
.tcard.on .tc-url { animation: capIn .9s .55s both; }

/* --------------------------------------------------------- cursor */
.cursor { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.cursor.on { opacity: 1; }
.cursor::after { content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: rgba(234,79,179,.4); transform: scale(0); opacity: 0; }
.cursor.click::after { animation: ripple .55s ease-out; }
@keyframes ripple { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }

/* --------------------------------------------------------- chrome (hidden by H) */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.06); z-index: 70; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5a5f, #ea4fb3, #b25ef0); }
.start { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(246,241,244,.9); backdrop-filter: blur(8px); }
.start-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.start-t { font-size: 44px; font-weight: 500; letter-spacing: -0.035em; margin: 0; }
.start-k { font-size: 16px; color: #666; margin: 0; }
.start kbd { font: 600 13px var(--font); border: 1px solid #ccc; border-radius: 5px; padding: 1px 6px; background: #fff; }
.start .btn { height: 56px; padding: 0 34px; font-size: 18px; }
.hint { position: fixed; left: 14px; bottom: 10px; font: 12px var(--font); color: #999; z-index: 90; }
body.clean .progress, body.clean .hint { display: none; }
/* */

/* --------------------------------------------------------- frame + square (social) layout */
#frame { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; }
.hook { display: none; }
body.sq #stage { height: 1600px; }
body.sq #frame { top: 250px; }
body.sq .hook { display: flex; position: absolute; left: 0; right: 0; top: 0; height: 270px; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; z-index: 45; }
body.sq .hook .tc-logo { font-size: 30px; }
body.sq .hook p { margin: 0; font-size: 56px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; max-width: 1400px; }
body.sq .cap { top: 1060px; height: 470px; gap: 22px; }
body.sq .cap p { font-size: 58px; max-width: 1420px; line-height: 1.12; letter-spacing: -0.03em; }
body.sq .cap-chip { font-size: 20px; padding: 8px 18px; }
body.sq .tcard h1 { font-size: 96px; }
body.sq .tcard p { font-size: 34px; }
body.sq .tc-url { font-size: 32px; padding: 16px 34px; }
body.sq .hook { transition: opacity .6s; }
body.sq #frame { transform: scale(1.08); transform-origin: 50% 0; }
body.sq .cap { top: 1090px; }

/* --------------------------------------------------------- Gmail window */
.mailw { left: 330px; top: 90px; width: 940px; height: 560px; }
.mw { display: grid; grid-template-columns: 180px 1fr; height: calc(100% - 38px); }
.mw-side { background: #f6f8fc; padding: 18px 14px; font-size: 14.5px; color: #333; }
.mw-side b { display: inline-block; background: #c2e7ff; color: #001d35; font-weight: 500; padding: 12px 20px; border-radius: 16px; margin-bottom: 16px; }
.mw-side p { margin: 0; padding: 7px 12px; border-radius: 99px; display: flex; }
.mw-side p.on { background: #d3e3fd; font-weight: 600; }
.mw-side em { font-style: normal; margin-left: auto; font-weight: 600; }
.mw-main { padding: 22px 28px; }
.mw-main h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 18px; }
.mw-from { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mw-from .av { --s: 40px; font-size: 14px; }
.mw-from b { display: block; font-weight: 600; font-size: 15px; }
.mw-from small { display: block; color: #777; font-size: 13px; }
.mw-time { margin-left: auto; color: #777; font-size: 13px; }
.mw-body { font-size: 16.5px; line-height: 1.6; color: #222; }
.mw-body p { margin: 0 0 10px; }
.mw-body mark { background: #ffe3a3; padding: 0 3px; border-radius: 3px; }
.mw-att { margin-top: 14px; }
.mw-file { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ddd; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.mw-file .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   Phone fallback: the film set is a fixed 1600x900 stage, so on a phone it
   scales down to something unreadable. Below 760px we hide it and play the
   recorded tour instead — same film, legible, and native full-screen.
   ------------------------------------------------------------------------ */
.phone-tour { display: none; }
@media (max-width: 760px) {
  html, body.film { overflow: auto; height: auto; background: #faf8fb; }
  body.film #viewport, body.film .hint { display: none !important; }
  .phone-tour { display: block; padding: 28px 16px 48px; max-width: 560px; margin: 0 auto; text-align: center; }
  .pt-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink, #111); margin-bottom: 26px; }
  .pt-logo b { font-weight: 600; }
  .phone-tour h1 { font-size: 30px; line-height: 1.12; letter-spacing: -0.035em; margin-bottom: 10px; }
  .phone-tour > p { color: var(--muted, #6b6b6b); font-size: 17px; line-height: 1.45; margin-bottom: 20px; }
  .phone-tour video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; display: block; }
  .pt-note { font-size: 14px; margin: 16px 0 22px; }
  .phone-tour .btn { width: 100%; }
}