.tl-demo{--paper:var(--tl-paper);--surface:var(--tl-surface);--surface-2:var(--tl-surface-2);--ink:var(--tl-ink);--ink-2:var(--tl-ink-2);--muted:var(--tl-muted);--faint:var(--tl-faint);--line:var(--tl-line);--line-2:var(--tl-line-2);--brand:var(--tl-brand);--brand-ink:var(--tl-brand-ink);--brand-soft:var(--tl-brand-soft);--sage:var(--tl-sage);--good:var(--tl-good);--good-soft:var(--tl-good-soft);--warn:var(--tl-warn);--warn-soft:var(--tl-warn-soft);--bad:var(--tl-bad);--bad-soft:var(--tl-bad-soft);--blue:var(--tl-blue);--blue-soft:var(--tl-blue-soft);--radius:14px;--radius-sm:10px;--shadow:var(--tl-shadow);--shadow-sm:var(--tl-shadow-sm);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}.tl-demo .mono{font-variant-numeric:tabular-nums}.tl-demo a{color:inherit;text-decoration:none}.tl-demo .topbar{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#f6f7f5d9;align-items:center;gap:18px;padding:12px 22px;display:flex;position:sticky;top:0}.tl-demo .brand{letter-spacing:.2px;align-items:center;gap:10px;font-weight:700;display:flex}.tl-demo .brand b{letter-spacing:.3px;font-size:16.5px}.tl-demo .brand .tag{color:var(--muted);border-left:1px solid var(--line);letter-spacing:.2px;margin-left:2px;padding-left:10px;font-size:11px;font-weight:700}.tl-demo .spacer{flex:1}.tl-demo .roleswitch{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:0;padding:3px;display:flex}.tl-demo .roleswitch button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:6px;padding:6px 13px;font-size:12.5px;font-weight:700;display:flex}.tl-demo .roleswitch button .who{color:var(--faint);font-size:10.5px;font-weight:400}.tl-demo .roleswitch button.active{background:var(--ink);color:#fff}.tl-demo .roleswitch button.active .who{color:#ffffffa6}.tl-demo .shell{min-height:calc(100vh - 53px);display:flex}.tl-demo .sidenav{border-right:1px solid var(--line);background:var(--surface-2);flex:0 0 210px;width:210px;padding:20px 14px}.tl-demo .navlabel{letter-spacing:.8px;text-transform:uppercase;color:var(--faint);margin:16px 0 7px;padding:0 10px;font-size:10.5px;font-weight:700}.tl-demo .navitem{color:var(--ink-2);cursor:pointer;border-radius:9px;align-items:center;gap:10px;margin-bottom:2px;padding:8px 10px;font-size:13.5px;font-weight:700;display:flex}.tl-demo .navitem svg{opacity:.7;width:16px;height:16px}.tl-demo .navitem:hover{background:var(--line-2)}.tl-demo .navitem.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}.tl-demo .navitem.active svg{opacity:1}.tl-demo .navitem .count{background:var(--line);color:var(--muted);border-radius:999px;margin-left:auto;padding:1px 7px;font-size:11px;font-weight:700}.tl-demo .main{flex:1;min-width:0;max-width:1180px;padding:26px 32px 60px}.tl-demo .page-h{align-items:flex-end;gap:14px;margin-bottom:4px;display:flex}.tl-demo h1.title{letter-spacing:-.2px;margin:0;font-size:23px;font-weight:900}.tl-demo .sub{color:var(--muted);margin:3px 0 22px;font-size:13.5px}.tl-demo .crumb{color:var(--muted);cursor:pointer;align-items:center;gap:7px;width:fit-content;margin-bottom:10px;font-size:12.5px;display:flex}.tl-demo .crumb:hover{color:var(--ink)}.tl-demo .pill{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:11.5px;font-weight:700;display:inline-flex}.tl-demo .pill.good{background:var(--good-soft);color:var(--good)}.tl-demo .pill.warn{background:var(--warn-soft);color:var(--warn)}.tl-demo .pill.bad{background:var(--bad-soft);color:var(--bad)}.tl-demo .pill.blue{background:var(--blue-soft);color:var(--blue)}.tl-demo .pill.ghost{background:var(--line-2);color:var(--muted)}.tl-demo .dot{border-radius:50%;width:7px;height:7px;display:inline-block}.tl-demo .btn{border:1px solid var(--line);background:var(--surface);font:inherit;cursor:pointer;border-radius:9px;align-items:center;gap:7px;padding:7px 13px;font-size:12.5px;font-weight:700;display:inline-flex}.tl-demo .btn:hover{background:var(--surface-2);border-color:#c9d0c9}.tl-demo .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.tl-demo .btn.primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}.tl-demo .btn.subtle{color:var(--muted);background:0 0;border-color:#0000}.tl-demo .btn.danger{color:var(--bad);border-color:var(--bad-soft)}.tl-demo .tiles{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;display:grid}.tl-demo .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:15px 16px}.tl-demo .tile .k{color:var(--muted);align-items:center;gap:6px;margin-bottom:9px;font-size:11.5px;font-weight:700;display:flex}.tl-demo .tile .v{letter-spacing:-.4px;font-size:25px;font-weight:900}.tl-demo .tile .d{margin-top:5px;font-size:11.5px;font-weight:700}.tl-demo .up{color:var(--good)}.tl-demo .down{color:var(--bad)}.tl-demo .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}.tl-demo .card .hd{border-bottom:1px solid var(--line-2);align-items:center;gap:10px;padding:15px 18px;display:flex}.tl-demo .card .hd h3{margin:0;font-size:14.5px;font-weight:700}.tl-demo .card .hd .sub2{color:var(--muted);font-size:12px;font-weight:400}.tl-demo .card .bd{padding:6px;overflow-x:auto}.tl-demo table{border-collapse:collapse;width:100%;min-width:560px}.tl-demo th{letter-spacing:.4px;text-transform:uppercase;color:var(--faint);text-align:right;border-bottom:1px solid var(--line-2);padding:10px 14px;font-size:11px;font-weight:700}.tl-demo th.l,.tl-demo td.l{text-align:left}.tl-demo td{border-bottom:1px solid var(--line-2);text-align:right;padding:11px 14px;font-size:13px}.tl-demo tr:last-child td{border-bottom:0}.tl-demo tbody tr.click{cursor:pointer}.tl-demo tbody tr.click:hover{background:var(--surface-2)}.tl-demo .proj-name{align-items:center;gap:9px;font-weight:700;display:flex}.tl-demo .proj-sub{color:var(--muted);font-size:11.5px;font-weight:400}.tl-demo .barcell{justify-content:flex-end;align-items:center;gap:9px;display:flex}.tl-demo .minibar{background:var(--line);border-radius:4px;width:74px;height:7px;position:relative;overflow:hidden}.tl-demo .minibar>span{border-radius:4px;position:absolute;top:0;bottom:0;left:0}.tl-demo .budget-summary{grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:16px;display:grid}.tl-demo .stackbar{background:var(--line-2);border-radius:8px;height:26px;margin:14px 0 8px;display:flex;overflow:hidden}.tl-demo .stackbar>div{height:100%}.tl-demo .legend{color:var(--ink-2);flex-wrap:wrap;gap:16px;font-size:12px;display:flex}.tl-demo .legend span{align-items:center;gap:6px;display:inline-flex}.tl-demo .profit-ring{align-items:center;gap:16px;display:flex}.tl-demo .barbg{background:var(--line);border-radius:5px;width:100%;height:8px;overflow:hidden}.tl-demo .barbg>span{border-radius:5px;height:100%;display:block}.tl-demo td .var-pos{color:var(--good);font-weight:700}.tl-demo td .var-neg{color:var(--bad);font-weight:700}.tl-demo td .var-zero{color:var(--faint)}.tl-demo .gantt{padding:8px 4px}.tl-demo .gantt .row{grid-template-columns:200px 1fr;align-items:center;gap:12px;padding:7px 12px;display:grid}.tl-demo .gantt .row:hover{background:var(--surface-2);border-radius:8px}.tl-demo .gantt .ph{align-items:center;gap:9px;font-size:13px;font-weight:700;display:flex}.tl-demo .track{background:linear-gradient(var(--line-2), var(--line-2));border-radius:7px;height:26px;position:relative}.tl-demo .track .base{background:#c4cbc3;border-radius:4px;height:6px;position:absolute;top:6px}.tl-demo .track .act{color:#fff;white-space:nowrap;border-radius:7px;align-items:center;height:14px;padding:0 8px;font-size:10.5px;font-weight:700;display:flex;position:absolute;top:2px;overflow:hidden}.tl-demo .ganttwrap{position:relative}.tl-demo .todaybar2{background:var(--bad);opacity:.42;z-index:2;width:2px;position:absolute;top:26px;bottom:14px}.tl-demo .todayflag2{color:var(--bad);background:var(--surface);z-index:3;letter-spacing:.5px;padding:0 5px;font-size:10px;font-weight:900;position:absolute;top:4px;transform:translate(-50%)}.tl-demo .months{color:var(--faint);grid-template-columns:200px 1fr;gap:12px;padding:2px 12px 6px;font-size:10.5px;font-weight:700;display:grid}.tl-demo .months .mrow{justify-content:space-between;display:flex}.tl-demo .co-row{border-bottom:1px solid var(--line-2);cursor:pointer;align-items:center;gap:14px;padding:14px 18px;display:flex}.tl-demo .co-row:last-child{border-bottom:0}.tl-demo .co-row:hover{background:var(--surface-2)}.tl-demo .co-ico{border-radius:9px;flex:0 0 34px;justify-content:center;align-items:center;width:34px;height:34px;font-size:12px;font-weight:900;display:flex}.tl-demo .co-t{font-size:13.5px;font-weight:700}.tl-demo .co-m{color:var(--muted);margin-top:2px;font-size:12px}.tl-demo .co-amt{text-align:right;font-size:14px;font-weight:900}.tl-demo .co-side{text-align:right;width:118px}.tl-demo .grid2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.tl-demo .grid3{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.tl-demo .insight{border-bottom:1px solid var(--line-2);gap:12px;padding:13px 16px;display:flex}.tl-demo .insight:last-child{border-bottom:0}.tl-demo .insight .ic{border-radius:8px;flex:0 0 30px;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.tl-demo .insight .txt{color:var(--ink-2);font-size:13px}.tl-demo .insight .txt b{color:var(--ink);font-weight:700}.tl-demo .vbars{align-items:flex-end;gap:14px;height:150px;padding:10px 8px 0;display:flex}.tl-demo .vbar{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:8px;height:100%;display:flex}.tl-demo .vbar .col{background:var(--brand);border-radius:7px 7px 3px 3px;width:100%;max-width:42px}.tl-demo .vbar .lbl{color:var(--muted);font-size:11px;font-weight:700}.tl-demo .vbar .val{color:var(--ink);font-size:11px;font-weight:900}.tl-demo .portal{max-width:920px;margin:0 auto}.tl-demo .hero{background:linear-gradient(135deg, var(--tl-brand), var(--tl-brand-ink));color:#fff;box-shadow:var(--shadow);border-radius:18px;padding:26px 28px;position:relative;overflow:hidden}.tl-demo .hero .ey{opacity:.8;letter-spacing:.3px;font-size:12px;font-weight:700}.tl-demo .hero h2{letter-spacing:-.2px;margin:6px 0 2px;font-size:24px;font-weight:900}.tl-demo .hero .hmeta{flex-wrap:wrap;gap:26px;margin-top:20px;display:flex}.tl-demo .hero .hm .hk{opacity:.75;font-size:11.5px;font-weight:400}.tl-demo .hero .hm .hv{margin-top:3px;font-size:20px;font-weight:900}.tl-demo .hero .prog{margin-top:20px}.tl-demo .hero .progbar{background:#ffffff38;border-radius:6px;height:9px;margin-top:8px;overflow:hidden}.tl-demo .hero .progbar>span{background:#fff;border-radius:6px;height:100%;display:block}.tl-demo .attn{background:var(--warn-soft);border:1px solid #ecdcb6;border-radius:14px;align-items:center;gap:14px;margin:18px 0;padding:16px 18px;display:flex}.tl-demo .attn .amt{text-align:right;margin-left:auto}.tl-demo .photos{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.tl-demo .photo{border:1px solid var(--line-2);border-radius:12px;height:120px;position:relative;overflow:hidden}.tl-demo .photo .cap{color:#fff;background:linear-gradient(#0000,#0000008c);padding:8px 10px;font-size:11px;font-weight:700;position:absolute;bottom:0;left:0;right:0}.tl-demo .msg{gap:10px;padding:10px 0;display:flex}.tl-demo .msg .mav{color:#fff;border-radius:50%;flex:0 0 30px;justify-content:center;align-items:center;width:30px;height:30px;font-size:11px;font-weight:700;display:flex}.tl-demo .msg .mb{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:9px 13px;font-size:13px}.tl-demo .msg .mn{color:var(--muted);margin-bottom:3px;font-size:11.5px;font-weight:700}.tl-demo .sched-simple{padding:4px 2px}.tl-demo .ss-row{border-bottom:1px solid var(--line-2);align-items:center;gap:12px;padding:11px 8px;display:flex}.tl-demo .ss-row:last-child{border-bottom:0}.tl-demo .ss-ic{border-radius:50%;flex:0 0 24px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;display:flex}.tl-demo .ss-done{background:var(--good);color:#fff}.tl-demo .ss-now{background:var(--warn);color:#fff}.tl-demo .ss-next{background:var(--line);color:var(--muted)}.tl-demo .ss-t{font-size:13.5px;font-weight:700}.tl-demo .ss-d{color:var(--muted);font-size:11.5px}.tl-demo .section-gap{height:26px}.tl-demo .banner{background:var(--blue-soft);color:var(--blue);border:1px solid #cfdcea;border-radius:12px;align-items:center;gap:9px;margin-bottom:18px;padding:10px 15px;font-size:12.5px;font-weight:400;display:flex}.tl-demo .hide{display:none!important}.tl-demo .tabbar{border-bottom:1px solid var(--line);gap:2px;margin:18px 0 20px;display:flex}.tl-demo .tabbar button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 15px;font-size:13.5px;font-weight:700}.tl-demo .tabbar button.active{color:var(--ink);border-bottom-color:var(--brand)}.tl-demo .note{color:var(--faint);margin-top:8px;font-size:11.5px}.tl-demo .foot{color:var(--faint);text-align:center;padding:26px;font-size:11px}@media (max-width:900px){.tl-demo .tiles{grid-template-columns:repeat(2,1fr)}.tl-demo .sidenav{display:none}.tl-demo .budget-summary,.tl-demo .grid2{grid-template-columns:1fr}.tl-demo .gantt .row,.tl-demo .months{grid-template-columns:120px 1fr}}@media (max-width:640px){.tl-demo .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}.tl-demo .brand .tag{display:none}.tl-demo .roleswitch{order:3;justify-content:space-between;width:100%;overflow-x:auto}.tl-demo .roleswitch button{gap:5px;padding:6px 9px;font-size:11.5px}.tl-demo .roleswitch button .who{display:none}.tl-demo .main{padding:20px 14px 48px}.tl-demo .page-h{flex-wrap:wrap;gap:8px}.tl-demo h1.title{font-size:21px}.tl-demo .tabbar{overflow-x:auto}.tl-demo .tabbar button{white-space:nowrap}.tl-demo .tiles{gap:10px}.tl-demo .attn{flex-wrap:wrap}.tl-demo .co-side{width:96px}.tl-demo .hero{padding:22px 20px}.tl-demo .hero h2{font-size:21px}.tl-demo .hero .hmeta{gap:16px}.tl-demo .foot{padding:20px 6px}}