.demo-root{--d-ink:#0f1626;--d-ink-2:#3d4457;--d-ink-3:#6b7280;--d-ink-4:#9aa1b2;--d-line:#eceff4;--d-accent:#4a6cf7;--d-blue:#86a6f9;--d-coral:#e0876b;--d-green:#16a34a;--d-red:#dc2626}.demo-annotation{position:absolute;top:-34px;right:8px;font-family:Bradley Hand,Segoe Script,Comic Sans MS,cursive;font-size:17px;color:var(--d-ink-2);display:flex;align-items:center;gap:6px;transform:rotate(-2deg)}.demo-browser{position:relative;background:#fff;border:1px solid var(--d-line);border-radius:22px;box-shadow:0 1px 2px rgba(15,22,38,.04),0 24px 80px -32px rgba(15,22,38,.22);overflow:hidden}.demo-chrome{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--d-line);background:#fbfcfe}.demo-dots{display:flex;gap:7px;flex:0 0 auto}.demo-dots span{width:11px;height:11px;border-radius:99px}.demo-dots span:first-child{background:#f26d5f}.demo-dots span:nth-child(2){background:#f5bd4f}.demo-dots span:nth-child(3){background:#62c554}.demo-urlbar{flex:1;max-width:460px;margin:0 auto;background:#f2f4f8;border-radius:9px;padding:7px 14px;font-size:13px;color:var(--d-ink-4);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-urlbar b{color:var(--d-ink);font-weight:600}.demo-expand{flex:0 0 auto;color:var(--d-ink-4);display:inline-flex}.demo-body{padding:8px 10px 18px}.demo-kpis{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 8px 2px}.demo-kpi{padding:16px 18px;border-right:1px solid var(--d-line);min-width:0}.demo-kpi:last-child{border-right:0}.demo-kpi .k-label{font-size:13.5px;font-weight:500;color:var(--d-ink-3);white-space:nowrap;display:flex;align-items:center;gap:6px}.demo-kpi .k-label .pip{width:7px;height:7px;border-radius:99px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}.demo-kpi .k-value{margin-top:8px;font-size:clamp(20px,1.9vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--d-ink);white-space:nowrap}.demo-kpi .k-delta{margin-top:6px;font-size:13px;font-weight:600}.demo-kpi .k-delta.up{color:var(--d-green)}.demo-kpi .k-delta.down{color:var(--d-red)}.demo-chart{position:relative;padding:10px 6px 0}.demo-chart svg{display:block;width:100%;height:auto}.demo-tip{position:absolute;top:26px;pointer-events:none;background:#fff;border:1px solid var(--d-line);border-radius:12px;box-shadow:0 12px 32px -12px rgba(15,22,38,.25);padding:10px 14px;font-size:13px;min-width:170px;z-index:5}.demo-tip .t-date{font-weight:700;color:var(--d-ink);margin-bottom:6px}.demo-tip .t-row{display:flex;justify-content:space-between;gap:18px;margin-top:3px;color:var(--d-ink-2)}.demo-tip .t-row .sw{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}.demo-tip .t-row b{color:var(--d-ink)}.demo-panels{display:grid;grid-template-columns:1fr;gap:14px;padding:6px 14px 4px}.demo-panel{border:1px solid var(--d-line);border-radius:16px;overflow:hidden}.demo-panel-head{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--d-line);font-size:13.5px;font-weight:700;color:var(--d-ink);background:#fbfcfe}.demo-panel-head .hint{font-size:12px;font-weight:500;color:var(--d-ink-4)}.demo-chan{position:relative;display:flex;justify-content:space-between;align-items:center;padding:11px 18px;font-size:14px}.demo-chan+.demo-chan{border-top:1px solid #f4f6fa}.demo-chan .bar{position:absolute;left:10px;top:7px;bottom:7px;background:linear-gradient(90deg,rgba(74,108,247,.1),rgba(74,108,247,.045));border-radius:8px}.demo-chan .c-name{position:relative;font-weight:550;color:var(--d-ink)}.demo-chan .c-nums{position:relative;display:flex;gap:18px;align-items:baseline}.demo-chan .c-vis{font-size:13px;color:var(--d-ink-3)}.demo-chan .c-rev{font-weight:750;color:var(--d-ink);min-width:64px;text-align:right}.demo-j-head,.demo-j-row{display:grid;grid-template-columns:minmax(0,1.5fr) 150px 80px 140px 170px;gap:16px;align-items:center;padding:13px 18px}.demo-j-head{font-size:12px;font-weight:600;color:var(--d-ink-4);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--d-line);padding-top:12px;padding-bottom:10px}.demo-j-row+.demo-j-row{border-top:1px solid #f4f6fa}.demo-j-row:hover{background:#fafbfe}.demo-j-user{display:flex;gap:12px;align-items:center;min-width:0}.demo-j-av{flex:0 0 auto;width:40px;height:40px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--d-accent);background:linear-gradient(135deg,#eef2ff,#e3e9ff)}.demo-j-name{font-size:14px;font-weight:700;color:var(--d-ink);white-space:nowrap}.demo-j-badge{display:inline-block;margin-left:7px;padding:1.5px 8px;border:1px solid var(--d-coral);color:#c96f52;border-radius:6px;font-size:10.5px;font-weight:700;vertical-align:1.5px}.demo-j-chips{margin-top:3px;font-size:12.5px;color:var(--d-ink-3);display:flex;gap:12px;flex-wrap:wrap}.demo-j-src{font-size:13.5px;font-weight:550;color:var(--d-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-j-spent{font-size:15px;font-weight:800;color:var(--d-ink)}.demo-j-ttc{font-size:13.5px;color:var(--d-ink-3)}.demo-j-done{text-align:right;font-size:13px;color:var(--d-ink-2);font-weight:550}.demo-j-steps{display:inline-flex;gap:4px;margin-top:5px}.demo-j-steps i{width:7px;height:7px;border-radius:99px;border:1.5px solid #d8dee9;background:transparent}.demo-j-steps i.on{background:var(--d-coral);border-color:var(--d-coral)}.demo-footnote{padding:11px 18px;border-top:1px solid var(--d-line);font-size:12px;color:var(--d-ink-4);background:#fbfcfe}.demo-ranges{display:inline-flex;gap:6px}.demo-ranges button{padding:7px 15px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--d-line);background:#fff;color:var(--d-ink-2);transition:all .12s ease}.demo-ranges button:hover{border-color:var(--d-ink-4)}.demo-ranges button.on{background:var(--d-accent);border-color:var(--d-accent);color:#fff}@media (max-width:1000px){.demo-kpis{grid-template-columns:repeat(4,1fr)}.demo-kpi:nth-child(4n){border-right:0}.demo-kpi:nth-child(-n+4){border-bottom:1px solid var(--d-line)}.demo-j-head{display:none}.demo-j-row{grid-template-columns:1fr;gap:8px}.demo-j-done{text-align:left}}@media (max-width:560px){.demo-kpis{grid-template-columns:repeat(2,1fr)}.demo-kpi:nth-child(2n){border-right:0}.demo-kpi:nth-child(-n+6){border-bottom:1px solid var(--d-line)}}