:root{
  --ink:#1d2733; --ink2:#5b6878; --ink3:#93a0ae; --line:#dfe7ef; --card:#ffffffcc;
  --lime:#9be15d; --lime2:#6cbf2e; --amber:#ffb238; --blue:#3b7ddd; --red:#ef5b5b; --bg:#eef1f5;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,#f3f5f8,#e8ecf1);color:var(--ink);
  font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit}
.top{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 20px 10px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px #1d273333;flex:none}
.logo i{width:20px;height:20px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 5px var(--lime),inset 0 0 0 10px var(--ink);animation:spin 3s linear infinite;border:3px dashed #1d2733}
@keyframes spin{to{transform:rotate(360deg)}}
h1{margin:0;font-size:21px;letter-spacing:-.2px;white-space:nowrap}
h1 span{color:var(--lime2)}
.sub{margin:2px 0 0;color:var(--ink2);font-size:12.5px}
.kpis{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
.kpi{background:var(--card);backdrop-filter:blur(8px);border:1px solid #fff;border-radius:14px;padding:6px 10px;min-width:0;box-shadow:0 4px 14px #1d27330d}
.kpi small{display:block;color:var(--ink2);font-size:11px;white-space:nowrap}
.kpi b{font-size:18px;letter-spacing:-.3px}
.kpi em{font-style:normal;color:var(--ink3);font-size:10.5px;margin-left:4px;white-space:nowrap}
.kpi.bump{animation:bump .7s}
@keyframes bump{30%{transform:scale(1.08);background:#f1ffe4}}
.modes{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.seg{display:flex;background:#fff;border-radius:12px;padding:3px;box-shadow:0 2px 10px #1d273314}
.seg button{border:0;background:none;padding:7px 12px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--ink2);display:flex;gap:6px;align-items:center;white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
.seg .on .dot{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.status{font-size:11.5px;color:var(--ink3)}

.journey{margin:0 20px;background:var(--card);backdrop-filter:blur(8px);border:1px solid #fff;border-radius:var(--r);padding:10px 12px 8px;box-shadow:0 6px 20px #1d27330f}
.jhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
#jtitle{font-weight:700}
#jtitle small{font-weight:500;color:var(--ink2);margin-left:6px}
.replay-ctl{display:flex;gap:8px;align-items:center}
.replay-ctl[hidden]{display:none}
select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 8px;max-width:260px}
.play{border:0;background:var(--lime);color:var(--ink);font-weight:700;padding:7px 14px;border-radius:10px;cursor:pointer;box-shadow:0 3px 10px #6cbf2e55}
.play.stop{background:var(--ink);color:#fff;box-shadow:none}
.clock{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12.5px;min-width:120px}
.steps{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px}
.st{position:relative;border-radius:12px;padding:7px 7px 6px;background:#fff;border:1.5px solid var(--line);min-height:70px;transition:.35s;overflow:hidden}
.st .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef2f6;color:var(--ink2);font-size:11px;font-weight:700;margin-right:4px;vertical-align:-4px}
.st .ic{float:right;font-size:15px;line-height:20px}
.st .tt{font-weight:650;font-size:12px;margin-top:4px;line-height:1.15}
.st .mt{font-size:10.5px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st.done{border-color:#bfe89a;background:linear-gradient(180deg,#f6ffee,#fff)}
.st.done .n{background:var(--lime);color:var(--ink)}
.st.now{border-color:var(--amber);background:linear-gradient(180deg,#fff6e3,#fff);box-shadow:0 0 0 4px #ffb23833;transform:translateY(-2px)}
.st.now .n{background:var(--amber);color:#fff;animation:blink 1s infinite}
.st.soon,.st.skip,.st.none{background:#f5f7f9;border-style:dashed;color:var(--ink3)}
.st.soon .tt,.st.skip .tt,.st.none .tt{color:#8b97a4}
.st.soon .ic,.st.skip .ic,.st.none .ic{filter:grayscale(1);opacity:.5}
.progress{height:4px;background:#eef2f6;border-radius:4px;margin-top:8px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--amber));transition:width .4s linear}

.stage-wrap{display:grid;grid-template-columns:1fr 340px;gap:14px;margin:12px 20px 0;height:calc(100vh - 262px);min-height:520px}
.stage{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#f4f7fb 55%,#edf1f6 100%);border:1px solid #fff;box-shadow:0 10px 30px #1d27331a;display:flex;flex-direction:column}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#c9d3df 1px,transparent 1.2px);background-size:22px 22px;opacity:.55;pointer-events:none}
.schema{position:relative;flex:1;min-height:0;margin:8px 8px 70px}
.wires{position:absolute;inset:0;overflow:visible;pointer-events:none}
.wire{fill:none;stroke:#b9c6d4;stroke-width:2.6;stroke-linecap:round;transition:stroke .4s}
.e-done .wire{stroke:#8fcf5e;stroke-width:3}
.e-soon .wire{stroke:#c3ccd6;stroke-dasharray:6 6;stroke-width:2}
.edge.live .wire{stroke:#3b7ddd;stroke-width:3.4}
.ah{fill:#b9c6d4}.ah-done{fill:#8fcf5e}.ah-grey{fill:#c3ccd6}.ah-now{fill:#3b7ddd}
.trail{fill:none;stroke-width:5;stroke-linecap:round;opacity:.85;transition:opacity .8s}
.trail.fade{opacity:0}
.ptag{position:absolute;transform:translate(-50%,-135%);font-size:20px;pointer-events:none;filter:drop-shadow(0 3px 4px #1d273340);z-index:4}
.elbl{position:absolute;transform:translate(-50%,-50%);background:#ffffffe8;border:1px solid #e3e9f0;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap;box-shadow:0 2px 6px #1d27330d;transition:.3s;z-index:1}
.elbl.e-done{color:#3f8a14;border-color:#cdeab5;background:#f5fdeef0}
.elbl.e-soon{color:#9aa5b1;border-style:dashed;background:#f7f9fbe8;font-weight:500}
.elbl.live{background:#3b7ddd;color:#fff;border-color:#3b7ddd;transform:translate(-50%,-50%) scale(1.08)}
.node{position:absolute;display:flex;gap:11px;align-items:center;padding:10px 12px 10px 11px;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f7f9fc);border:1px solid #e6ebf1;
  box-shadow:0 1px 0 #fff inset,0 2px 0 #e3e8ef,0 10px 22px -8px #1d273330;transition:box-shadow .35s,transform .35s,border-color .35s,background .35s;z-index:2}
.nic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:26px;background:linear-gradient(145deg,var(--tl),var(--td));box-shadow:0 6px 12px -4px var(--ts),inset 0 1px 0 #ffffff80}
.ntx{min-width:0;display:flex;flex-direction:column;gap:1px}
.ntx b{font-size:15.5px;letter-spacing:-.2px;line-height:1.15;white-space:nowrap}
.ns{font-size:12px;color:var(--ink2)}
.nl{font-size:11.5px;color:#3f8a14;font-weight:600;min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tone-blue{--tl:#e4efff;--td:#c8dcfb;--ts:#3b7ddd55;--tc:#3b7ddd}
.tone-violet{--tl:#f0e8ff;--td:#dccbfb;--ts:#8458d655;--tc:#8458d6}
.tone-teal{--tl:#e0f6f3;--td:#bfe9e3;--ts:#1f9e9555;--tc:#1f9e95}
.tone-lime{--tl:#eefbe2;--td:#d2f1b6;--ts:#6cbf2e55;--tc:#6cbf2e}
.tone-red{--tl:#ffeaea;--td:#fbd0cf;--ts:#e5534b55;--tc:#e5534b}
.tone-amber{--tl:#fff3db;--td:#fde0a6;--ts:#f0a02055;--tc:#f0a020}
.node.n-done{border-color:#d3ecbf}
.node.n-soon{background:#f5f7f9;border:1.5px dashed #cdd5de;box-shadow:none}
.node.n-soon .nic{filter:grayscale(1);opacity:.55;box-shadow:none}
.node.n-soon b{color:#8b97a4}
.node.n-soon .nl{color:#9aa5b1;font-weight:500;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.node.hot{border-color:var(--tc);box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 22%,transparent),0 16px 30px -10px #1d273350;transform:translateY(-3px);background:#fff}
.node.bump .nic{animation:nb .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes nb{40%{transform:scale(1.18) rotate(-4deg)}}
.node.working .nic{animation:wk .5s ease-in-out infinite alternate}
@keyframes wk{to{transform:rotate(14deg) scale(1.06)}}
.nbadge{position:absolute;top:-9px;right:-8px;background:var(--amber);color:#fff;font-style:normal;font-weight:800;font-size:12px;border-radius:999px;padding:3px 8px;box-shadow:0 4px 10px #f0a02066;opacity:0;transform:scale(.4)}
.nbadge.show{animation:bd 3.2s forwards}
@keyframes bd{12%{opacity:1;transform:scale(1.15)}20%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8) translateY(-8px)}}
.spops{position:absolute;inset:0;pointer-events:none;z-index:5}
.spop{position:absolute;background:#fff;border-radius:14px;padding:7px;box-shadow:0 14px 34px #1d273338;font-size:12.5px;font-weight:600;animation:popin .45s cubic-bezier(.2,1.4,.4,1) both;max-width:220px;border:1px solid #eef2f6}
.spop b{display:block;font-weight:700}
.spop img{display:block;width:170px;height:110px;object-fit:cover;border-radius:10px;margin-bottom:5px;background:#eef2f6}
.spop .noimg{width:170px;height:80px;border-radius:10px;margin-bottom:5px;background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 8px,#e8eef4 8px,#e8eef4 16px);display:grid;place-items:center;font-size:28px}
.spop small{display:block;color:var(--ink2);font-weight:500}
.spop.chip{padding:6px 12px;border-radius:16px;max-width:min(340px,94%)}
.spop.bye{animation:popout .5s forwards}
@keyframes popin{from{opacity:0;transform:translateY(8px) scale(.7)}}
@keyframes popout{to{opacity:0;transform:translateY(-14px) scale(.92)}}
.conf{position:absolute;width:8px;height:8px;border-radius:2px;animation:cf 1.4s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.caption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#1d2733eb;color:#fff;border-radius:16px;padding:10px 16px;display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;box-shadow:0 10px 30px #1d273355;max-width:calc(100% - 28px);transition:opacity .3s;z-index:6}
.caption .ci{font-size:20px}
.caption .ct small{display:block;font-weight:500;color:#b9c4cf;font-size:12px}
.caption.flash{animation:cap .5s}
@keyframes cap{from{transform:translateX(-50%) translateY(10px);opacity:.3}}

.feed{background:var(--card);backdrop-filter:blur(8px);border:1px solid #fff;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px #1d27330f}
.fhead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 8px;border-bottom:1px solid var(--line)}
.fhead span{color:var(--ink3);font-size:12px}
#feed{list-style:none;margin:0;padding:6px 8px 10px;overflow:auto;flex:1}
.ev{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:start;padding:8px 6px;border-radius:12px;transition:background 1.5s}
.ev+.ev{border-top:1px solid #eef2f6}
.ev.new{background:#f1ffe4;animation:slide .5s}
@keyframes slide{from{opacity:0;transform:translateX(16px)}}
.ev .tm{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12px;padding-top:1px}
.ev .who{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;margin-right:4px;background:#eef2f6}
.ev .tx{font-size:13px}
.ev .th{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#eef2f6;display:grid;place-items:center;font-size:20px}
.w-client{background:#e3f0ff!important;color:#2a6cc0}
.w-ai{background:#efe6ff!important;color:#7444c9}
.w-master{background:#e9fbd9!important;color:#3f8a14}
.w-owner{background:#fff0d6!important;color:#b06d00}
.w-buy{background:#ffe6e6!important;color:#c24141}
.w-shtab{background:#e6f6f5!important;color:#21807a}
.empty{color:var(--ink3);text-align:center;padding:30px 10px}
.foot{color:var(--ink3);font-size:11.5px;text-align:center;padding:10px 0 16px}

@media (max-width:1180px){
  .top{grid-template-columns:1fr auto}
  .kpis{grid-column:1/-1;order:3;justify-content:flex-start}
  .steps{grid-template-columns:repeat(14,108px);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .st{scroll-snap-align:start}
}
@media (max-width:760px){
  .top{padding:10px 12px 6px;gap:8px;grid-template-columns:1fr}
  h1{font-size:18px}
  .sub{font-size:11.5px}
  .logo{width:36px;height:36px}
  .modes{align-items:stretch;flex-direction:row;justify-content:space-between;order:2}
  .seg button{padding:7px 10px;font-size:13px}
  .status{display:none}
  .kpi em{display:block;margin:0}
  .kpis{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 4px}
  .kpis::-webkit-scrollbar{display:none}
  .kpi{flex:none;padding:6px 10px}
  .kpi b{font-size:17px}
  .journey{margin:4px 10px 0;padding:8px}
  .replay-ctl{width:100%;flex-wrap:wrap}
  .replay-ctl select{flex:1;min-width:0}
  .clock{min-width:0;width:100%}
  .steps{grid-template-columns:repeat(14,100px)}
  .stage-wrap{grid-template-columns:1fr;height:auto;margin:10px 10px 0;min-height:0}
  .stage{border-radius:18px;display:block;overflow:clip}
  .schema{height:760px;margin:10px 6px 8px}
  .caption{position:sticky;left:auto;transform:none;margin:0 10px 10px;bottom:10px;font-size:13px;padding:8px 12px;max-width:none;justify-content:flex-start}
  @keyframes cap{from{transform:translateY(10px);opacity:.3}}
  .node{padding:6px 10px 6px 8px;gap:10px;border-radius:15px}
  .nic{width:42px;height:42px;font-size:21px;border-radius:12px}
  .ntx b{font-size:14px}
  .ns{font-size:11px}
  .nl{font-size:10.5px;min-height:0}
  .node.n-soon .nl{white-space:nowrap}
  .elbl{font-size:10.5px;padding:1px 7px}
  .elbl.side{writing-mode:vertical-rl;padding:7px 1px;transform:translate(-50%,-50%) rotate(180deg)}
  .elbl.side.live{transform:translate(-50%,-50%) rotate(180deg) scale(1.08)}
  .spop img{width:130px;height:88px}
  .spop .noimg{width:130px;height:64px}
}

/* ?video=1: режим для записи ролика 16:9 (снимаем 1280×720 при масштабе 1.5 = 1920×1080) */
html.video,html.video body{overflow:hidden;height:100%}
.video .modes,.video .feed,.video .foot,.video #orderSel,.video #playBtn{display:none!important}
.video .top{grid-template-columns:auto 1fr;padding:12px 20px 8px}
.video .kpis{justify-content:flex-end}
.video h1{font-size:24px}
.video .sub{font-size:13.5px}
.video #jtitle{font-size:16px}
.video .clock{font-size:15px;font-weight:600;color:var(--ink)}
.video .st{min-height:66px}
.video .steps{gap:5px}
.video .st{padding:7px 5px 6px}
.video .st .tt{font-size:11px;letter-spacing:-.3px}
.video .stage-wrap{grid-template-columns:1fr;height:calc(100vh - 222px);min-height:0}
.video .schema{margin:10px 16px 118px}
.video .ntx b{font-size:17px}
.video .ns{font-size:13px}
.video .nl{font-size:12.5px}
.video .elbl{font-size:13px;padding:3px 11px}
.video .spop{font-size:14px;max-width:260px}
.video .spop.chip{max-width:min(420px,94%)}
.video .spop img{width:200px;height:130px}
.video .caption{font-size:21px;padding:13px 22px;bottom:18px;border-radius:18px}
.video .caption .ci{font-size:27px}
.video .caption .ct small{font-size:14px;margin-top:2px}
.vcard{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:radial-gradient(110% 90% at 50% 20%,#ffffff 0%,#eef2f7 60%,#e3e9f0 100%);transition:opacity .7s}
.vcard.off{opacity:0;pointer-events:none}
.vcard .vin{display:flex;flex-direction:column;align-items:center;gap:14px;animation:vup .9s cubic-bezier(.2,1,.3,1) both}
@keyframes vup{from{opacity:0;transform:translateY(24px) scale(.97)}}
.vcard .logo{width:84px;height:84px}
.vcard .logo i{width:40px;height:40px;box-shadow:inset 0 0 0 10px var(--lime),inset 0 0 0 20px var(--ink);border-width:5px}
.vcard h2{margin:6px 0 0;font-size:56px;letter-spacing:-1px;line-height:1.05}
.vcard h2 span{color:var(--lime2)}
.vcard p{margin:0;font-size:24px;color:var(--ink2)}
.vcard .vnums{display:flex;gap:14px;margin:12px 0 4px}
.vcard .vnums div{background:#fff;border-radius:18px;padding:14px 22px;box-shadow:0 10px 26px #1d27331a;min-width:150px}
.vcard .vnums small{display:block;color:var(--ink2);font-size:15px}
.vcard .vnums b{font-size:36px;letter-spacing:-.5px}
.vcard .vgpt{margin-top:8px;background:var(--ink);color:#fff;border-radius:16px;padding:14px 26px;font-size:28px;font-weight:700}
.vcard .vgpt span{color:var(--lime)}