/* Tasks4Me Playground */
:root{
  --ink:#0b1020; --text:#2b3245; --mute:#667085; --soft:#98a2b3; --line:#e5e8f1; --line2:#d6dae7; --card:#fff; --hover:#f2f3f9;
  --brand:#5b5bf6; --brand-d:#4646e0; --brand-l:#eef0ff; --sky:#0ea5e9; --green:#10b981; --amber:#f59e0b; --red:#ef4444;
  --grad:linear-gradient(120deg,#5b5bf6 0%,#3b82f6 45%,#0ea5e9 100%);
  --head:"Plus Jakarta Sans",Inter,system-ui,sans-serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -10px rgba(16,24,40,.18); --shadow-lg:0 24px 60px -18px rgba(16,24,40,.35);
}
*{ box-sizing:border-box; } html,body{ height:100%; margin:0; overflow:hidden; } body{ font:14.5px/1.45 var(--sans); color:var(--text); background:#f7f8fc; -webkit-font-smoothing:antialiased; }
button{ font:inherit; color:inherit; } a{ color:var(--brand); text-decoration:none; } b{ color:var(--ink); font-weight:600; }
.ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
kbd{ font:600 11px/1 ui-monospace,Menlo,monospace; padding:3px 6px; border-radius:6px; border:1px solid var(--line2); border-bottom-width:2px; background:#fff; color:var(--ink); }

/* top bar */
.bar{ position:fixed; z-index:20; top:0; left:0; right:0; height:62px; display:flex; align-items:center; gap:14px; padding:0 18px; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.brand{ display:inline-flex; align-items:center; gap:9px; font:800 19px/1 var(--head); letter-spacing:-.03em; color:var(--ink); } .brand b{ color:var(--brand); font-weight:800; }
.tag{ font:700 11.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--grad); padding:6px 10px; border-radius:999px; box-shadow:0 6px 14px -6px rgba(91,91,246,.7); }
.local{ font-size:13px; color:var(--mute); display:inline-flex; align-items:center; gap:7px; } .local::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(16,185,129,.16); }
.bar-r{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 15px; border-radius:11px; border:1px solid var(--line2); background:#fff; color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; transition:transform .12s, box-shadow .2s, background .15s; }
.btn:hover{ background:var(--hover); } .btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px -10px rgba(91,91,246,.8); } .btn.primary:hover{ color:#fff; filter:brightness(1.06); box-shadow:0 12px 26px -10px rgba(91,91,246,.9); }
.btn.primary .ic{ transition:transform .2s; } .btn.primary:hover .ic{ transform:translateX(3px); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--text); } .btn.ghost:hover{ background:var(--hover); }
.btn.sm{ height:34px; padding:0 12px; font-size:13px; border-radius:10px; } .btn.lg{ height:48px; padding:0 22px; font-size:15.5px; border-radius:13px; }
#langBtn{ width:44px; padding:0; font-size:13px; letter-spacing:.04em; }

/* the canvas */
#stage{ position:fixed; inset:62px 0 0 0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; outline:0;
  background-color:#f7f8fc; background-image:radial-gradient(#d9dcea 1.15px,transparent 1.15px); background-size:26px 26px; }
#stage::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 520px at 75% 10%,rgba(14,165,233,.08),transparent 70%),radial-gradient(800px 520px at 15% 90%,rgba(91,91,246,.08),transparent 70%); }
#stage.panning{ cursor:grabbing; } #stage.linking, #stage.linking .n{ cursor:crosshair; } body.assigning, body.assigning *{ cursor:grabbing !important; }
#world{ position:absolute; left:0; top:0; transform-origin:0 0; }
#edges{ position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.te{ fill:none; stroke-width:2.4; stroke-linecap:round; opacity:.5; transition:opacity .2s; } .te.dim{ opacity:.2; }
.oe{ fill:none; stroke:#5b5bf6; stroke-width:2.3; stroke-dasharray:7 6; animation:dash 1.1s linear infinite; } .oe.ok{ stroke:#10b981; opacity:.65; animation:none; }
.hit{ fill:none; stroke:transparent; stroke-width:16; pointer-events:stroke; cursor:pointer; } .hit:hover{ stroke:rgba(91,91,246,.12); }
#live{ fill:none; stroke:#5b5bf6; stroke-width:2.5; stroke-dasharray:7 6; marker-end:url(#ah); animation:dash 1.1s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-26; } }
#nodes{ position:absolute; left:0; top:0; }

/* tasks */
.n{ position:absolute; transform:translate(-50%,-50%); width:max-content; min-width:168px; max-width:236px; padding:10px 12px 10px; border-radius:16px; background:#fff; border:1.5px solid var(--line2); border-left:4px solid var(--c);
  box-shadow:0 4px 14px -8px rgba(16,24,40,.32); cursor:pointer; transition:box-shadow .18s, border-color .18s, opacity .25s, background .25s; }
.n:hover{ box-shadow:0 12px 28px -14px rgba(16,24,40,.45); }
.n.sel{ border-color:var(--brand); border-left-color:var(--c); box-shadow:0 0 0 4px rgba(91,91,246,.18),0 12px 28px -14px rgba(16,24,40,.45); }
.n.popin{ animation:pop .45s cubic-bezier(.2,1.5,.4,1) both; } @keyframes pop{ from{ transform:translate(-50%,-50%) scale(.4); opacity:0; } }
.n.bye{ transition:transform .2s, opacity .2s; transform:translate(-50%,-50%) scale(.6); opacity:0; }
.n.dragging{ z-index:5; cursor:grabbing; box-shadow:0 26px 50px -18px rgba(16,24,40,.55); transform:translate(-50%,-50%) rotate(-1.5deg) scale(1.03); transition:none; }
.n.target{ border-color:var(--green) !important; box-shadow:0 0 0 6px rgba(16,185,129,.2),0 14px 30px -14px rgba(16,24,40,.45) !important; transform:translate(-50%,-50%) scale(1.05); }
.n.dim{ opacity:.32; } .n.mine{ box-shadow:0 0 0 4px rgba(91,91,246,.22),0 12px 28px -14px rgba(16,24,40,.45); }
.n.waiting{ border-style:dashed; border-left-style:solid; background:#fcfcff; }
.n.urgent{ box-shadow:0 0 0 3px rgba(239,68,68,.14),0 8px 22px -10px rgba(239,68,68,.55); }
.n.wake{ animation:wake .9s ease; } @keyframes wake{ 0%{ box-shadow:0 0 0 0 rgba(91,91,246,.5); } 50%{ box-shadow:0 0 0 14px rgba(91,91,246,0); transform:translate(-50%,-50%) scale(1.06); } 100%{ transform:translate(-50%,-50%) scale(1); } }
.n.got{ animation:got .55s cubic-bezier(.2,1.6,.4,1); } @keyframes got{ 40%{ transform:translate(-50%,-50%) scale(1.07); } }
.row1{ display:flex; align-items:flex-start; gap:9px; } .tt{ font-weight:600; font-size:13.8px; line-height:1.35; color:var(--ink); word-break:break-word; padding-top:1px; }
.n.done .tt{ color:var(--mute); text-decoration:line-through; text-decoration-color:rgba(16,185,129,.7); } .n.done{ background:#f6fdf9; }
.chk{ width:22px; height:22px; flex:none; border-radius:50%; border:1.8px solid #c3c8da; background:#fff; padding:0; display:grid; place-items:center; cursor:pointer; color:transparent; transition:all .18s; }
.chk svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .chk:hover{ border-color:var(--green); color:#a7f3d0; transform:scale(1.08); }
.n.done .chk{ background:var(--green); border-color:var(--green); color:#fff; animation:tick .35s cubic-bezier(.2,1.6,.4,1); } @keyframes tick{ 50%{ transform:scale(1.3); } }
.row2.grp{ display:none; }
.row2{ display:flex; align-items:center; gap:6px; margin-top:8px; padding-left:31px; flex-wrap:wrap; }
.who{ border:0; background:none; padding:0; cursor:pointer; display:flex; border-radius:50%; } .who:hover .av{ transform:scale(1.12); }
.av{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; font:700 10.5px/1 var(--sans); font-style:normal; flex:none; box-shadow:0 0 0 2px #fff; transition:transform .15s; }
.av.lg{ width:38px; height:38px; font-size:14px; } .av.ghost{ background:#f1f3f8; color:var(--soft); box-shadow:inset 0 0 0 1.5px #d3d7e4; font-size:14px; }
.pr{ border:0; cursor:pointer; font:600 11px/1 var(--sans); padding:5px 8px; border-radius:999px; transition:transform .12s, filter .12s; } .pr:hover{ transform:scale(1.06); filter:saturate(1.3); }
.pr.p0{ background:#f1f5f9; color:#64748b; } .pr.p1{ background:#eef2ff; color:#4f46e5; } .pr.p2{ background:#fff4e5; color:#c2410c; } .pr.p3{ background:#fee2e2; color:#dc2626; }
.wt{ font-style:normal; font:600 11px/1 var(--sans); padding:5px 8px; border-radius:999px; background:#f5f3ff; color:#6d28d9; }
.step{ position:absolute; top:-11px; left:-11px; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; font:700 11.5px/24px var(--sans); text-align:center; text-decoration:none; box-shadow:0 0 0 2.5px #fff, 0 4px 10px -4px rgba(91,91,246,.8); }
.n.done .step{ background:var(--green); }
.add{ position:absolute; right:-14px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; border:0; background:var(--brand); color:#fff; font:700 17px/1 var(--sans); cursor:pointer; box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(91,91,246,.9);
  opacity:0; transform:scale(.5); transition:opacity .15s, transform .18s cubic-bezier(.2,1.5,.4,1); }
.lk{ position:absolute; right:14px; bottom:-12px; width:26px; height:22px; border-radius:11px; background:#fff; border:1.5px solid #c7c3ff; color:var(--brand); font:700 13px/19px var(--sans); text-align:center; cursor:crosshair;
  opacity:0; transform:translateY(-4px); transition:opacity .15s, transform .18s; box-shadow:0 4px 10px -6px rgba(91,91,246,.7); }
.n:hover .add, .n.sel .add{ opacity:1; transform:scale(1); } .n:hover .lk, .n.sel .lk{ opacity:1; transform:none; } .lk:hover{ background:var(--brand); color:#fff; }
.n.root{ min-width:210px; max-width:300px; padding:16px 22px 16px 62px; background:var(--grad); border:0; color:#fff; box-shadow:0 18px 40px -16px rgba(91,91,246,.75); }
.n.root .tt{ color:#fff; font:800 17px/1.25 var(--head); letter-spacing:-.02em; } .n.root small{ display:block; color:rgba(255,255,255,.85); font-size:12px; margin-top:3px; }
.n.root.sel{ box-shadow:0 0 0 5px rgba(91,91,246,.25),0 18px 40px -16px rgba(91,91,246,.75); } .rt{ min-width:0; }
.ring{ position:absolute; left:14px; top:50%; width:36px; height:36px; margin-top:-18px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:4; } .ring .fg{ stroke:#fff; stroke-linecap:round; transition:stroke-dasharray .6s cubic-bezier(.2,.9,.3,1); }
.ed{ width:100%; min-width:150px; border:0; outline:0; resize:none; overflow:hidden; font:600 13.8px/1.35 var(--sans); color:var(--ink); background:var(--brand-l); border-radius:7px; padding:2px 5px; }
.n.root .ed{ background:rgba(255,255,255,.2); color:#fff; font:800 17px/1.25 var(--head); }

/* team dock */
.dock{ position:fixed; z-index:10; left:18px; bottom:18px; width:248px; padding:12px; border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.dock-h{ display:flex; flex-direction:column; padding:2px 4px 10px; } .dock-h b{ font-size:14px; } .dock-h small{ color:var(--mute); font-size:12px; }
.people{ display:grid; gap:4px; }
.pp{ position:relative; display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; border:1px solid transparent; background:none; cursor:grab; text-align:left; touch-action:none; transition:background .15s, transform .15s; }
.pp:hover{ background:var(--hover); } .pp:hover .av{ transform:translateY(-2px) rotate(-4deg); } .pp.on{ background:var(--brand-l); border-color:#d6d8ff; }
.pp span{ flex:1; min-width:0; } .pp b{ display:block; font-size:13.5px; } .pp small{ display:block; color:var(--mute); font-size:12px; }
.pp em{ font-style:normal; font:700 11px/1 var(--sans); min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--brand); color:#fff; display:grid; place-items:center; }
.pp.add-p{ cursor:pointer; justify-content:center; padding:8px; border:1.5px dashed var(--line2); } .pp.add-p:hover{ border-color:var(--brand); }
.drag-ghost{ position:fixed; z-index:60; left:0; top:0; pointer-events:none; display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:999px; background:#fff; box-shadow:var(--shadow-lg); font-weight:600; color:var(--ink); }
.drag-ghost .av{ animation:wob 1s ease-in-out infinite; } @keyframes wob{ 50%{ transform:rotate(-8deg) scale(1.06); } }

/* side panel: tour or a person's list */
.side{ position:fixed; z-index:10; right:18px; top:80px; width:300px; max-height:calc(100% - 180px); overflow:auto; padding:16px; border-radius:18px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.tour-h{ display:flex; gap:10px; align-items:flex-start; } .tour-h > div{ flex:1; } .tour-h b{ display:block; font:800 16px/1.25 var(--head); } .tour-h small{ display:block; color:var(--mute); font-size:12.5px; margin-top:3px; }
.ib{ width:30px; height:30px; flex:none; border-radius:9px; border:0; background:var(--hover); color:var(--mute); cursor:pointer; font-size:14px; } .ib:hover{ color:var(--ink); }
.meter{ position:relative; height:8px; border-radius:8px; background:#eceef6; margin:14px 0 6px; } .meter i{ position:absolute; inset:0 auto 0 0; border-radius:8px; background:var(--grad); transition:width .6s cubic-bezier(.2,1.2,.3,1); }
.meter span{ position:absolute; right:0; top:12px; font:700 11.5px/1 var(--sans); color:var(--mute); }
.steps-l{ list-style:none; margin:20px 0 4px; padding:0; display:grid; gap:10px; }
.steps-l li{ display:flex; gap:11px; align-items:flex-start; } .steps-l li > span{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font:700 12.5px/1 var(--sans); background:#eef0f7; color:var(--mute); transition:all .3s; }
.steps-l li.ok > span{ background:var(--green); color:#fff; animation:tick .4s cubic-bezier(.2,1.6,.4,1); } .steps-l li.ok b{ color:var(--mute); text-decoration:line-through; text-decoration-color:rgba(16,185,129,.7); }
.steps-l b{ display:block; font-size:13.5px; } .steps-l small{ display:block; color:var(--mute); font-size:12.3px; line-height:1.4; }
.tour-f{ display:flex; justify-content:space-between; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.side.min .meter, .side.min .steps-l, .side.min .tour-f, .side.min .tour-h small{ display:none; } .side.min{ width:auto; }
.side-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .side-h b{ display:block; font:800 15.5px/1.2 var(--head); } .side-h small{ display:block; color:var(--mute); font-size:12px; }
.q{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .q li{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.q li:hover{ transform:translateX(-3px); box-shadow:var(--shadow); } .q li > div{ flex:1; min-width:0; } .q b{ display:block; font-size:13.5px; } .q small{ display:block; font-size:12px; color:var(--mute); }
.q li.ready small{ color:var(--green); font-weight:600; } .q li.wait{ border-style:dashed; } .q li.wait small{ color:#6d28d9; } .q li.done b{ color:var(--soft); text-decoration:line-through; }
.qn{ width:22px; height:22px; flex:none; border-radius:50%; background:var(--brand-l); color:var(--brand-d); font:700 11.5px/22px var(--sans); text-align:center; } .q li.ready .qn{ background:var(--brand); color:#fff; }
.q .pr{ cursor:default; } .empty{ color:var(--mute); font-size:13px; margin:0; }

/* tools, hints, bars */
.tools{ position:fixed; z-index:10; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:2px; padding:6px; border-radius:16px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.tools button{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border:0; border-radius:11px; background:none; color:var(--text); font-weight:600; font-size:13.5px; cursor:pointer; transition:background .15s, color .15s; }
.tools button:hover{ background:var(--hover); color:var(--ink); } .tools button:disabled{ opacity:.35; cursor:default; background:none; }
#tAdd{ background:var(--grad); color:#fff; box-shadow:0 6px 16px -8px rgba(91,91,246,.9); } #tAdd:hover{ color:#fff; filter:brightness(1.06); }
.tools .sep{ width:1px; height:24px; background:var(--line); margin:0 5px; } #zoom{ width:46px; text-align:center; font:600 12px/1 var(--sans); color:var(--mute); }
.keys{ position:fixed; z-index:9; right:18px; bottom:26px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:330px; font-size:12px; color:var(--mute); }
.linkbar{ position:fixed; z-index:30; left:50%; top:80px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; padding:9px 9px 9px 16px; border-radius:14px; background:#0f172a; color:#e2e8f0; font-size:14px; box-shadow:var(--shadow-lg); }
.linkbar b{ color:#fff; } .linkbar > span:first-child{ color:#a5b4fc; font-size:18px; } .linkbar[hidden]{ display:none; }
#toasts{ position:fixed; z-index:40; left:50%; bottom:84px; transform:translateX(-50%); display:grid; gap:8px; justify-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:13px; background:#0f172a; color:#fff; font-weight:500; font-size:14px; box-shadow:var(--shadow-lg); animation:tin .3s cubic-bezier(.2,1.3,.4,1); pointer-events:auto; max-width:min(560px,92vw); }
.toast.go{ background:linear-gradient(120deg,#059669,#10b981); } .toast.bad{ background:#b91c1c; } .toast button{ border:0; background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:13px; padding:5px 10px; border-radius:8px; cursor:pointer; }
.toast.out{ opacity:0; transform:translateY(8px); transition:all .3s; } @keyframes tin{ from{ opacity:0; transform:translateY(12px) scale(.96); } }
#fx{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; }
.pop{ position:fixed; z-index:45; min-width:220px; max-width:300px; padding:6px; border-radius:13px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); animation:tin .14s ease-out; }
.pop-h{ padding:8px 10px 6px; font:700 11.5px/1.35 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--soft); }
.pop button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; background:none; border-radius:9px; cursor:pointer; text-align:left; font-size:14px; }
.pop button:hover{ background:var(--hover); } .pop button span{ flex:1; } .pop button small{ color:var(--soft); font-size:12px; } .pop button.on{ background:var(--brand-l); color:var(--brand-d); font-weight:600; } .pop button.danger{ color:#dc2626; }
.cel-bg{ position:fixed; inset:0; z-index:55; display:grid; place-items:center; padding:16px; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); animation:fade .2s; } @keyframes fade{ from{ opacity:0; } }
.cel{ width:min(500px,100%); padding:34px 30px 28px; border-radius:24px; background:#fff; text-align:center; box-shadow:var(--shadow-lg); animation:celIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes celIn{ from{ opacity:0; transform:translateY(20px) scale(.94); } }
.cel-badge{ width:68px; height:68px; margin:0 auto 18px; border-radius:22px; display:grid; place-items:center; font-size:34px; color:#fff; background:var(--grad); box-shadow:0 18px 36px -14px rgba(91,91,246,.8); }
.cel h2{ font:800 28px/1.15 var(--head); letter-spacing:-.03em; color:var(--ink); margin:0 0 10px; } .cel p{ color:var(--mute); font-size:15.5px; margin:0 0 22px; } .cel-b{ display:grid; gap:10px; }

/* phones */
@media (max-width:980px){ .local, .keys{ display:none; } .side{ width:260px; } }
@media (max-width:720px){
  .bar{ height:56px; padding:0 10px; gap:8px; } #stage{ top:56px; } .tag{ display:none; } #tplBtn span, #ctaTop span{ display:none; } #ctaTop{ width:40px; padding:0; }
  .dock{ left:10px; right:10px; bottom:76px; width:auto; padding:8px; } .dock-h{ display:none; } .people{ display:flex; gap:4px; overflow-x:auto; }
  .pp{ flex-direction:column; gap:4px; padding:6px; min-width:58px; } .pp span small{ display:none; } .pp b{ font-size:11.5px; text-align:center; } .pp em{ position:absolute; top:2px; right:4px; }
  .side{ left:10px; right:10px; top:66px; width:auto; max-height:46%; padding:12px; } .side.tour:not(.min) .steps-l small{ display:none; }
  .tools{ bottom:10px; max-width:calc(100% - 20px); overflow-x:auto; } .tools button span{ display:none; } #toasts{ bottom:150px; }
}
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; } }