/* Сцени функцій (16.10): одна й та сама сцена — на головній і на сторінці функції (scenes.js). Картки інтерфейсу без «матового скла» — мерехтіння на Mac. */
.cursor{position:absolute;z-index:3;display:flex;align-items:flex-start;gap:4px;pointer-events:none}
.cursor svg{width:16px;height:16px}
.cursor em{font-style:normal;font:600 11px var(--f-body);padding:3px 7px;border-radius:6px;color:var(--ev-ink);white-space:nowrap}
.vis{position:relative;height:min(560px,64vh);min-height:440px}
.callout{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--c) 12%,transparent);font-size:13.5px;color:var(--ink)}
.callout i{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--c);color:var(--ev-ink);font:700 12px var(--f-mono);font-style:normal}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cols>div{display:grid;gap:6px;padding:10px;border-radius:9px;border:1px dashed var(--line2)}
.cols b{font-size:12.5px;color:var(--ink)}
.dgb{height:70px;border-radius:9px;border:1px solid var(--line);background:radial-gradient(circle at 1px 1px,var(--card-in2) 1px,transparent 0) 0 0/14px 14px}
.dgb svg{width:100%;height:100%}
.tabs{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--card-in)}
.tabs span{padding:5px 10px;border-radius:7px;font-size:12.5px;color:var(--ink3);white-space:nowrap;transition:background .4s var(--ease),color .4s var(--ease)}
.tabs span.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.tabs em{font-style:normal;margin-left:4px;padding:0 5px;border-radius:5px;background:var(--c);color:var(--ev-ink);font-size:11px;font-weight:700}
.vis :is(.card,.toast){backdrop-filter:none;-webkit-backdrop-filter:none}
.vis .toast{background:var(--menu)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.vis{height:auto;min-height:480px}}

/* документи */
.page{position:absolute;left:0;top:0;width:82%;padding:0;overflow:hidden}
.page .cov{display:block;width:100%;height:92px}
.page .pin-ic{position:absolute;left:22px;top:66px;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line2);color:var(--c)}
.page .pin-ic svg{width:24px;height:24px}
.pg{padding:34px 22px 20px;display:grid;gap:10px}
.pg h4{font:800 23px/1.1 var(--f-disp);letter-spacing:-.03em;min-height:1.1em}
.pg .line{font-size:14px;color:var(--ink);min-height:1.4em}
.slash{position:absolute;left:44%;top:62%;width:190px;padding:8px;border-radius:11px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);display:grid;gap:2px;font-size:13px;color:var(--ink2);opacity:0;transform-origin:0 0}
.slash .mono{padding:3px 8px;color:var(--ink3);font-size:11px}
.slash div{padding:6px 8px;border-radius:7px}
.slash div.hl{background:color-mix(in srgb,var(--c-dg) 18%,transparent);color:var(--ink)}
.dc{left:60%;top:50%;opacity:0}
.cmt{position:absolute;right:0;bottom:6%;width:46%;opacity:0}
.cmt p{margin:6px 0 0;font-size:14px;color:var(--ink)}
.cmt b{color:var(--c-db)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.page{position:relative;width:100%}.cmt{width:70%;bottom:-10px}}

/* бази */
.db{position:absolute;inset:4% 0 auto 0;padding:14px}
.dbtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dbtop b{font-size:15px}
.dbarea{position:relative;height:340px}
.dbhead{position:absolute;inset:0;pointer-events:none}
.dbhead span{position:absolute;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);transition:opacity .4s}
.rec{position:absolute;left:0;top:0;border-radius:8px;background:var(--card-in);border:1px solid var(--line);overflow:hidden;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px;padding:0 10px;white-space:nowrap}
.rec .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rec .sm{color:var(--ink3);font-variant-numeric:tabular-nums}
.rec .st{flex:none}
.rec .bt{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--rc)}
.dbarea[data-m="board"] .rec{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 10px}
.dbarea[data-m="board"] .rec .st{display:none}
.dbarea[data-m="board"] .rec .nm{flex:none;width:100%}
.dbarea[data-m="cal"] .rec{background:color-mix(in srgb,var(--rc) 24%,transparent);border-color:transparent;font-size:11.5px;padding:0 6px}
.dbarea[data-m="cal"] .rec .sm,.dbarea[data-m="cal"] .rec .st{display:none}
.dbarea[data-m="chart"] .rec{background:transparent;border-color:transparent;padding:0;justify-content:center;align-items:flex-start}
.dbarea[data-m="chart"] .rec .nm,.dbarea[data-m="chart"] .rec .st{display:none}
.dbarea[data-m="chart"] .rec .sm{position:relative;z-index:1;font-size:11.5px;color:var(--ink);margin-top:4px}
.calgrid{position:absolute;inset:22px 0 0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,1fr);gap:4px;opacity:0;transition:opacity .4s}
.calgrid i{border-radius:7px;border:1px solid var(--line);font:500 10px var(--f-mono);color:var(--ink3);padding:4px 6px;font-style:normal}
.dbarea[data-m="cal"] .calgrid{opacity:1}

/* потоки */
.chan{position:absolute;left:0;top:0;width:68%;display:grid;gap:12px}
.chh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.chh b{font-size:15px}
.feed{display:grid;gap:9px}
.feed .msg{opacity:0}
.voice{display:flex;align-items:center;gap:8px}
.voice b{display:none}
.voice .play{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--c);color:var(--ev-ink);font-size:10px}
.wave{display:flex;gap:2px;align-items:center;height:22px}
.wave i{width:3px;border-radius:2px;background:var(--c);opacity:.7}
.dur{font:500 11.5px var(--f-mono);color:var(--ink3)}
.m3{position:relative}
.mk{position:absolute;right:-6px;top:-30px;padding:5px 9px;border-radius:7px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);color:var(--ink);font-size:12px;white-space:nowrap;opacity:0}
.tasks{position:absolute;right:0;bottom:2%;width:56%;display:grid;gap:8px}
.trow{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);padding:6px 0;border-bottom:1px solid var(--line)}
.trow .pill{margin-left:auto}
.trow .dot{width:9px;height:9px;border-radius:3px;background:var(--c)}
.trow.new{opacity:0}
.tcard{position:absolute;width:240px;left:30%;top:46%;opacity:0;z-index:5}
.tcard .tt{font:700 16px var(--f-body);margin:6px 0 8px}
.tcard .tm{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.chan{position:relative;width:100%}.tasks{position:relative;width:100%;margin-top:16px}.tcard{left:10%;top:30%}}

/* схеми */
.flip{position:absolute;inset:2% 0;perspective:1800px}
.face{position:absolute;inset:0;padding:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card) radial-gradient(circle at 1px 1px,var(--card-in2) 1px,transparent 0) 0 0/20px 20px}
.face svg{width:100%;height:100%}
.face .lbl{position:absolute;left:16px;top:14px;color:var(--c)}
.bk{transform:rotateY(180deg)}
.flip>.inner3{position:absolute;inset:0;transform-style:preserve-3d}
.sv-t{font:700 12px var(--f-body);fill:var(--ink2)}
.sv-d{font:400 13px var(--f-draft);fill:var(--ink2);letter-spacing:.04em}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.flip{position:relative;inset:auto;height:360px}}

/* календар */
.calc{position:absolute;left:0;top:2%;width:92%;display:grid;gap:12px}
.cq{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;border:1px solid var(--line2);background:var(--card-in);font-size:14px;color:var(--ink)}
.cq .plus{color:var(--c);font-weight:700}
.cq .cqt{min-width:0;white-space:nowrap;overflow:hidden}
.gsync{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink3)}
.gsync svg{width:16px;height:16px;color:var(--c)}
.cal{display:grid;grid-template-columns:40px repeat(5,1fr);gap:4px;font-size:12px;color:var(--ink3)}
.cal .ev{border-radius:7px;padding:5px 7px;font-size:11.5px;color:var(--ev-ink);font-weight:600;overflow:hidden}
.cal .ev.task{background:transparent!important;color:var(--ink);border:1.5px solid var(--c-st);display:flex;gap:5px;align-items:center}
.cal .ev.task::before{content:"";flex:none;width:9px;height:9px;border-radius:3px;border:1.5px solid var(--c-st)}
.cal .ev.new{opacity:0}
.cal .cell{border-top:1px solid var(--line);min-height:32px}
.toast{position:absolute;right:0;bottom:4%;display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:10px;background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:13.5px;opacity:0}
.toast .tic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font:700 12px var(--f-mono)}
.toast small{display:block;color:var(--ink3);font-size:12px}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.calc{position:relative;width:100%}.cal{grid-template-columns:30px repeat(5,1fr)}.toast{right:8px;bottom:-14px}}

/* ШІ */
.aichat{position:absolute;left:0;top:0;width:52%;display:grid;gap:10px}
.steps{display:grid;gap:6px;font-size:12.5px;color:var(--ink3)}
.steps div{display:flex;gap:8px;align-items:center;opacity:.25;transition:opacity .4s,color .4s}
.steps div.on{opacity:1;color:var(--ink2)}
.steps i{flex:none;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--c);position:relative}
.steps div.ok i{background:var(--c)}
.steps div.ok i::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid var(--ev-ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.ans{opacity:0}
.aipage{position:absolute;right:0;top:14%;width:56%;display:grid;gap:10px}
.aipage>*{opacity:0}
.ap1{display:flex;gap:10px;align-items:center}
.apic{width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid var(--c)}
.aipage h4{font:800 19px/1.1 var(--f-disp);letter-spacing:-.03em}
.tchips{display:flex;flex-wrap:wrap;gap:6px}
.who-ai{position:absolute;left:0;right:0;bottom:-6px;font:500 13px var(--f-mono);letter-spacing:.02em;color:var(--ink3);text-align:center}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.aichat,.aipage{position:relative;width:100%;top:auto}.aipage{margin-top:14px}.who-ai{position:relative;margin-top:16px;bottom:auto}}

/* сайт */
.web{position:absolute;left:0;top:0;width:78%;padding:0;overflow:hidden}
.wbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.wbar .dots{display:flex;gap:5px}.wbar .dots i{width:9px;height:9px;border-radius:3px;background:var(--card-in2)}
.wbar .url{flex:1;min-width:0;padding:5px 10px;border-radius:7px;background:var(--card-in);font:500 12.5px var(--f-mono);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.tg{width:30px;height:18px;border-radius:6px;background:var(--card-in2);position:relative;transition:background .4s}
.tg i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:4px;background:var(--ink3);transition:transform .4s var(--ease),background .4s}
.pub.on .tg{background:var(--c)}.pub.on .tg i{transform:translateX(12px);background:var(--ev-ink)}
.wnav{display:flex;gap:16px;align-items:center;padding:0 22px;height:0;overflow:hidden;font-size:13px;color:var(--ink2);border-bottom:1px solid transparent}
.wnav b{margin-right:auto;color:var(--ink)}
.wbody{padding:22px;display:grid;gap:10px}
.wbody h4{font:800 24px/1.1 var(--f-disp);letter-spacing:-.03em}
.wbody p{color:var(--ink2);font-size:14px}
.price{display:grid;grid-template-columns:1fr auto;gap:8px 20px;font-size:14px;color:var(--ink2);padding-top:6px;border-top:1px solid var(--line)}
.price b{color:var(--ink);font-variant-numeric:tabular-nums}
.form{position:absolute;right:0;top:36%;width:40%;display:grid;gap:8px;font-size:13px;opacity:0}
.form label{display:grid;gap:3px;color:var(--ink3);font-size:12px}
.form label span{display:block;min-height:30px;padding:6px 9px;border-radius:7px;border:1px solid var(--line2);color:var(--ink);font-size:13px}
.send{justify-self:start;padding:7px 12px;border-radius:8px;background:var(--c);color:var(--ev-ink);font-weight:700}
.leads{position:absolute;left:8%;bottom:0;width:52%;display:grid;gap:6px;opacity:0}
.lrow{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.web,.form,.leads{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto}.form,.leads{margin-top:14px}}