*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#070d1f;color:#eef1f8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;background:radial-gradient(800px 400px at 85% -10%,rgba(139,92,246,.18),transparent),radial-gradient(700px 400px at 20% 0,rgba(59,130,246,.12),transparent)}
.side{position:sticky;top:0;height:100vh;padding:22px 14px;border-right:1px solid rgba(255,255,255,.07);background:rgba(10,18,38,.7);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;padding:0 8px}.brand i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 0 18px rgba(139,92,246,.6)}
.side nav{display:flex;flex-direction:column;gap:2px}.side nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:#8a93ab;font-size:.9rem;font-weight:500;transition:.2s}
.side nav a svg{width:18px;height:18px}.side nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.side nav a.on{background:linear-gradient(90deg,rgba(59,130,246,.2),rgba(139,92,246,.2));color:#fff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.3)}
.back{margin-top:auto;font-size:.82rem;color:#8a93ab;padding:0 8px}.back:hover{color:#fff}
main{padding:26px 32px 30px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.top h1{margin:0;font-size:1.5rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}.top p{margin:4px 0 0;color:#8a93ab;font-size:.88rem}
.plan{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);box-shadow:0 4px 16px rgba(139,92,246,.45)}
.ex{font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);padding:3px 8px;border-radius:999px;white-space:nowrap;align-self:flex-start}
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,box-shadow .25s;animation:in .6s both}
.card:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.35);box-shadow:0 14px 40px -18px rgba(139,92,246,.6)}
@keyframes in{from{opacity:0;transform:translateY(12px)}}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:14px}
.kpis .card:nth-child(2){animation-delay:.05s}.kpis .card:nth-child(3){animation-delay:.1s}.kpis .card:nth-child(4){animation-delay:.15s}.kpis .card:nth-child(5){animation-delay:.2s}
.kh{display:flex;align-items:center;gap:8px;color:#8a93ab;font-size:.8rem;font-weight:500}.ki{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(139,92,246,.14);color:#c4b5fd}.ki svg{width:15px;height:15px}
.kv{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:12px 0 4px}.kd{font-size:.75rem;color:#8a93ab}.kd.up{color:#6ee7b7}
.row{display:grid;gap:14px;margin-bottom:14px}.r1{grid-template-columns:1.7fr 1fr}.r2{grid-template-columns:1.1fr 1.1fr .9fr}
.row .card{animation-delay:.25s}.r2 .card{animation-delay:.35s}
.ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.ch h3{margin:0;font-size:.98rem;font-weight:600}
.lg{display:flex;gap:16px;font-size:.76rem;color:#8a93ab;margin-bottom:6px}.lg i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}.lg .a{background:linear-gradient(90deg,#3b82f6,#8b5cf6)}.lg .b{background:#34d399}
.chart{width:100%;height:auto;display:block}.chart .gr line{stroke:rgba(255,255,255,.06);stroke-width:1}.chart text{fill:#6b7385;font-size:11px;font-family:Inter;stroke:none}
.chart .l1{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .4s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
.sub{color:#8a93ab;font-size:.8rem;margin:-4px 0 12px;line-height:1.5}
.cnt{font-size:.75rem;font-weight:700;background:#ef4444;border-radius:999px;padding:2px 8px}
ul{list-style:none;margin:0;padding:0}
.att ul{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.att li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.att li b,.feed b,.conv b{display:block;font-size:.85rem;font-weight:600}.att li small,.feed small,.conv small{display:block;font-size:.76rem;color:#8a93ab;margin-top:2px;line-height:1.4}
.tag{font-size:.66rem;font-weight:700;padding:4px 8px;border-radius:999px;white-space:nowrap}.tag.a{background:rgba(59,130,246,.15);color:#93c5fd}.tag.b{background:rgba(139,92,246,.18);color:#c4b5fd}.tag.r{background:rgba(239,68,68,.15);color:#fca5a5}
.btn-s{font-size:.75rem;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12)}.btn-s:hover{background:rgba(255,255,255,.06)}
.feed li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}.feed li:last-child{border:0}
.fi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(59,130,246,.14);color:#93c5fd}.fi svg{width:16px;height:16px}.feed .g .fi{background:rgba(16,185,129,.15);color:#6ee7b7}.feed .m .fi{background:rgba(255,255,255,.06);color:#94a3b8}
.feed time{font-size:.72rem;color:#6b7385;white-space:nowrap}
.conv{margin-bottom:12px}.conv li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 6px;border-radius:10px;transition:.2s}.conv li:hover{background:rgba(255,255,255,.04)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:linear-gradient(135deg,#1e3a8a,#5b21b6)}
.st{font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}.st.g{background:rgba(16,185,129,.15);color:#6ee7b7}.st.r{background:rgba(239,68,68,.15);color:#fca5a5}.st.b{background:rgba(59,130,246,.15);color:#93c5fd}.st.m{background:rgba(255,255,255,.06);color:#94a3b8}
.lk{font-size:.8rem;color:#c4b5fd}
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:14px}.cmp>div:not(.vs){padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.cmp small{display:block;font-size:.7rem;color:#8a93ab}.cmp b{display:block;font-size:1rem;margin:4px 0 2px}.cmp em{font-style:normal;font-size:.7rem;color:#6b7385}.cmp .you{border-color:rgba(167,139,250,.4)!important;background:rgba(139,92,246,.1)!important}.vs{font-size:.72rem;color:#6b7385}
.big{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}.big span{font-size:.85rem;font-weight:500;color:#8a93ab;-webkit-text-fill-color:#8a93ab;margin-left:4px}
.ft{margin-top:10px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.07);font-size:.78rem;color:#8a93ab;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mock{font-weight:600;color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);padding:3px 9px;border-radius:999px}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.r2{grid-template-columns:1fr 1fr}.r2 .save{grid-column:1/-1}}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:10px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07);overflow-x:auto}
.side nav{flex-direction:row}.side nav a{padding:8px}.side nav a span{display:none}.side nav a.on span{display:inline}.back{margin:0 0 0 auto;white-space:nowrap}
main{padding:18px 14px 24px}.kpis{grid-template-columns:1fr 1fr}.kpis .card:last-child{grid-column:1/-1}.r1,.r2{grid-template-columns:1fr}.top h1{font-size:1.25rem}.kv{font-size:1.45rem}}
@media(max-width:420px){.brand{font-size:0;gap:0}.att li{grid-template-columns:1fr auto}.att .tag{grid-column:1/-1;justify-self:start}}
@media(prefers-reduced-motion:reduce){.card,.chart .l1{animation:none!important;stroke-dashoffset:0}.card{transition:none}}
/* v2: reference style */
body{background:#050b1c}
.app{background:radial-gradient(900px 500px at 75% -5%,rgba(37,99,235,.32),transparent 60%),radial-gradient(700px 500px at 0 30%,rgba(29,78,216,.18),transparent 60%),radial-gradient(600px 400px at 100% 80%,rgba(124,58,237,.14),transparent 60%),#050b1c}
.card{background:linear-gradient(180deg,rgba(30,58,138,.22),rgba(15,23,42,.35));border-color:rgba(96,165,250,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -24px rgba(37,99,235,.55)}
.card:hover{border-color:rgba(96,165,250,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px -16px rgba(59,130,246,.7)}
.ki{background:rgba(59,130,246,.18);color:#93c5fd;box-shadow:0 0 16px rgba(59,130,246,.35)}
.kd.up::before{content:"↑ "}.kd.up{color:#4ade80;font-weight:600}
.side{background:rgba(5,11,28,.75);border-color:rgba(96,165,250,.12)}.side nav a.on{background:linear-gradient(90deg,rgba(37,99,235,.35),rgba(37,99,235,.08));box-shadow:inset 2px 0 0 #3b82f6,0 0 24px -8px rgba(59,130,246,.8)}
.chart .bar{fill:#1d4ed8;opacity:.55}.chart .l1g{filter:blur(3px)}.chart .l1{stroke:#60a5fa;filter:drop-shadow(0 0 6px rgba(59,130,246,.9))}.chart .pt{fill:#bfdbfe}
.chart .tip rect{fill:rgba(15,23,42,.92);stroke:rgba(96,165,250,.5)}.chart .tip .t1{fill:#fff;font-weight:600}.chart .tip .t2{fill:#4ade80}
.lg .b{background:#1d4ed8}
/* hero devices */
.dhero{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center;padding:10px 0 34px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#93c5fd}
.dh-t h2{font-size:2.4rem;letter-spacing:-.03em;line-height:1.08;margin:10px 0 12px}.gt{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.dh-t p{color:#94a3b8;max-width:420px;line-height:1.55;margin:0 0 14px}
.devs{display:flex;justify-content:center;gap:22px;filter:drop-shadow(0 30px 60px rgba(37,99,235,.45))}
.dev{width:250px;border-radius:40px;padding:9px;background:linear-gradient(145deg,#334155,#0f172a 40%,#1e293b);box-shadow:inset 0 0 0 1.5px rgba(148,163,184,.35);position:relative;animation:in .8s both}.d2{transform:translateY(34px);animation-delay:.15s}
.isl{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:70px;height:20px;border-radius:12px;background:#000;z-index:2}
.scr{border-radius:32px;background:radial-gradient(300px 200px at 50% 0,rgba(37,99,235,.35),transparent),#060d22;height:500px;padding:12px 13px;overflow:hidden;display:flex;flex-direction:column;gap:8px;font-size:11px;position:relative}
.sb{display:flex;justify-content:space-between;padding:2px 8px 6px;font-size:10px}.sb span{letter-spacing:-1px;opacity:.7}
.ah{display:flex;justify-content:space-between;align-items:center}.ah small{display:block;color:#94a3b8;font-size:9.5px}.lg2{display:flex;align-items:center;gap:5px;font-weight:700}.lg2 i{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#3b82f6,#8b5cf6)}.me{width:26px;height:26px;border-radius:50%;background:#4f46e5;display:grid;place-items:center;font-size:9px;font-weight:700}
.scr h4{margin:4px 0 0;font-size:19px;line-height:1.15;letter-spacing:-.02em}.gm{margin:0;color:#94a3b8;font-size:10.5px}
.m2{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mk{position:relative;border-radius:12px;padding:9px;background:linear-gradient(180deg,rgba(30,64,175,.28),rgba(15,23,42,.5));border:1px solid rgba(96,165,250,.2)}
.mk small{display:block;color:#cbd5e1;font-size:9.5px}.mk b{display:block;font-size:19px;margin:3px 0 1px}.mk em{font-style:normal;color:#4ade80;font-size:9.5px;font-weight:600}
.mk .bars{position:absolute;right:10px;bottom:10px;display:flex;gap:3px;align-items:flex-end}.mk .bars i{width:6px;border-radius:2px;background:#2563eb;box-shadow:0 0 8px #3b82f6}.bars i:nth-child(1){height:10px}.bars i:nth-child(2){height:16px}.bars i:nth-child(3){height:22px}.bars i:nth-child(4){height:30px}
.mc svg{width:100%;margin-top:4px}
.tb{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:8px 2px 2px;border-top:1px solid rgba(255,255,255,.07);color:#64748b;font-size:9px}.tb .on{color:#60a5fa}.tb .plus{width:30px;height:30px;border-radius:50%;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 0 16px #3b82f6}
.mcall{display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3)}.mcall b{color:#fca5a5;display:block}.mcall small{color:#94a3b8;font-size:9px}
.bub{max-width:82%;padding:7px 9px;border-radius:12px;line-height:1.35;font-size:10.5px}.bub.o{align-self:flex-end;background:linear-gradient(135deg,#1d4ed8,#2563eb);border-bottom-right-radius:4px}.bub.i{align-self:flex-start;background:#e2e8f0;color:#0f172a;border-bottom-left-radius:4px}
.booked{padding:9px;border-radius:12px;background:rgba(22,163,74,.13);border:1px solid rgba(74,222,128,.4)}.booked b{color:#4ade80;display:block}.booked small{color:#cbd5e1;font-size:9.5px}
.ty{margin-top:auto;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.06);color:#64748b}
.btab{display:none}
@media(max-width:1100px){.dhero{grid-template-columns:1fr}.dh-t{text-align:center}.dh-t p{margin:0 auto 14px}}
@media(max-width:860px){.side{display:none}main{padding:18px 14px 96px}.dh-t h2{font-size:1.8rem}
.devs{gap:10px}.dev{width:46%;max-width:220px;border-radius:30px;padding:6px}.scr{height:420px;border-radius:25px;padding:10px 9px;font-size:9.5px}.d2{transform:translateY(20px)}
.btab{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:20;justify-content:space-around;align-items:center;padding:8px 6px;border-radius:22px;background:rgba(8,15,36,.85);backdrop-filter:blur(16px);border:1px solid rgba(96,165,250,.2);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.btab a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;color:#64748b}.btab a svg{width:20px;height:20px}.btab a.on{color:#60a5fa}
.btab .plus{width:50px;height:50px;margin-top:-26px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:28px;justify-content:center;box-shadow:0 0 24px rgba(59,130,246,.8),0 0 0 5px #050b1c}}
@media(max-width:420px){.scr h4{font-size:15px}.mk b{font-size:15px}.scr{height:380px}.bub{font-size:9px}}
/* v3: section pages */
.mnav{display:none}.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-s{font:inherit;font-size:.78rem;font-weight:600;padding:7px 12px;border-radius:9px;border:1px solid rgba(96,165,250,.25);background:rgba(37,99,235,.12);color:#dbeafe;cursor:pointer;transition:.2s}.btn-s:hover{background:rgba(37,99,235,.3)}.btn-s.pri{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border:0;color:#fff}
.chip{font:inherit;font-size:.78rem;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#94a3b8;cursor:pointer;transition:.2s}.chip.on{background:rgba(37,99,235,.3);border-color:rgba(96,165,250,.5);color:#fff;box-shadow:0 0 16px -4px #3b82f6}.chip em{font-style:normal;background:#ef4444;color:#fff;border-radius:999px;padding:0 6px;margin-left:4px;font-size:.68rem}
.srch{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.srch svg{width:15px;height:15px;color:#64748b}.srch input{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:.85rem}
.av.lg{width:58px;height:58px;font-size:1rem}.av.sm{width:28px;height:28px;font-size:.66rem;display:inline-grid;margin-right:8px;vertical-align:middle}
.st.v{background:rgba(139,92,246,.18);color:#c4b5fd}
/* inbox */
.inbox{display:grid;grid-template-columns:320px 1fr 260px;gap:14px;height:calc(100vh - 170px);min-height:600px}
.pane{display:flex;flex-direction:column;min-height:0;padding:14px}.plist .chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.clist{overflow:auto;flex:1;margin:0 -6px}.cv{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px;border-radius:12px;cursor:pointer;align-items:center;transition:.2s}.cv:hover{background:rgba(255,255,255,.04)}.cv.sel{background:rgba(37,99,235,.18);box-shadow:inset 2px 0 0 #3b82f6}
.cv b{font-size:.85rem;display:flex;align-items:center;gap:6px}.cv small{display:block;font-size:.75rem;color:#8a93ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.ud{width:7px;height:7px;border-radius:50%;background:#3b82f6;box-shadow:0 0 8px #3b82f6}
.cr{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.cr time{font-size:.7rem;color:#64748b}
.thread{padding:0}.th{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.th>div{flex:1}.th b{display:block;font-size:.92rem}.th small{color:#8a93ab;font-size:.75rem}.bk{display:none;background:none;border:0;color:#fff;font-size:1.2rem;cursor:pointer}
.msgs{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.msgs .bub{font-size:.86rem;max-width:70%;padding:10px 13px;border-radius:16px}.bub.you{background:linear-gradient(135deg,#6d28d9,#8b5cf6)}
.who{font-size:.68rem;color:#64748b;margin-top:6px}.who.o{align-self:flex-end}.who.you{color:#c4b5fd}
.mcall.bg2{padding:12px;align-self:center;min-width:280px}.mi{width:30px;height:30px;border-radius:9px;background:rgba(239,68,68,.25);display:grid;place-items:center;color:#fca5a5}.mi svg{width:16px;height:16px}.mcall.bg2 small{font-size:.75rem}
.booked.bg2{align-self:center;min-width:300px;padding:12px 14px;margin:6px 0;box-shadow:0 0 30px -10px rgba(34,197,94,.6)}.booked.bg2 small{font-size:.78rem}
.comp{border-top:1px solid rgba(255,255,255,.07);padding:12px 14px}.qr{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.qr button{font:inherit;font-size:.74rem;padding:5px 10px;border-radius:999px;border:1px solid rgba(96,165,250,.3);background:rgba(37,99,235,.1);color:#bfdbfe;cursor:pointer}
.cin{display:flex;gap:8px}.cin input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:.85rem}.send{font:inherit;font-weight:600;padding:0 16px;border-radius:999px;border:0;background:linear-gradient(90deg,#3b82f6,#8b5cf6);color:#fff;opacity:.6}
.cp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 0 14px;border-bottom:1px solid rgba(255,255,255,.07)}.cp small{color:#8a93ab;font-size:.78rem}
.tags{display:flex;gap:5px;margin-top:6px}.tags span,.tg{font-size:.68rem;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:#cbd5e1;margin-right:4px}
dl{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;font-size:.82rem;margin:14px 0}dt{color:#8a93ab}dd{margin:0;text-align:right}
h5{font-size:.8rem;margin:6px 0;color:#cbd5e1}
/* bookings */
.bwrap{display:grid;grid-template-columns:1fr 300px;gap:14px}.seg{display:flex;border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden}.seg button{font:inherit;font-size:.76rem;background:none;border:0;color:#94a3b8;padding:6px 10px;cursor:pointer}.seg .on{background:rgba(37,99,235,.3);color:#fff}
.grid{display:grid;grid-template-columns:48px 1fr;overflow-x:auto}.hrs{display:flex;flex-direction:column;padding-top:34px}.hrs span{height:44px;font-size:.68rem;color:#64748b}
.days{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));min-width:660px}.dcol{border-left:1px solid rgba(255,255,255,.06)}.dh{height:34px;font-size:.78rem;font-weight:600;text-align:center;color:#94a3b8}.dcol.today .dh{color:#60a5fa}.dcol.today{background:linear-gradient(rgba(37,99,235,.08),transparent)}
.slots{position:relative;height:440px;background:repeating-linear-gradient(transparent 0 43px,rgba(255,255,255,.05) 43px 44px)}
.job{position:absolute;left:4px;right:4px;border-radius:9px;padding:6px 8px;text-align:left;font:inherit;font-size:.74rem;font-weight:600;color:#fff;cursor:pointer;border:1px solid;overflow:hidden;transition:.2s}.job small{display:block;font-weight:400;opacity:.75;font-size:.68rem}
.job.g{background:rgba(34,197,94,.18);border-color:rgba(74,222,128,.45)}.job.b{background:rgba(37,99,235,.25);border-color:rgba(96,165,250,.5)}.job.v{background:rgba(139,92,246,.22);border-color:rgba(167,139,250,.5)}.job:hover{transform:scale(1.02);box-shadow:0 0 20px -4px #3b82f6}
.upc ul li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.upc b{display:block;font-size:.84rem}.upc small{font-size:.74rem;color:#8a93ab}.dt{width:42px;height:42px;border-radius:11px;background:rgba(37,99,235,.18);display:flex;flex-direction:column;align-items:center;justify-content:center}.dt b{font-size:1rem!important}.dt small{font-size:.62rem!important}
.drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:92vw;z-index:40;padding:22px;background:rgba(8,15,36,.96);backdrop-filter:blur(20px);border-left:1px solid rgba(96,165,250,.25);box-shadow:-30px 0 60px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.drawer.on{transform:none}
.x{background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}.src{color:#93c5fd;background:rgba(37,99,235,.18);padding:2px 8px;border-radius:999px}.dra{display:flex;gap:8px;margin-bottom:14px}
/* contacts */
.cwrap{display:grid;grid-template-columns:1fr 320px;gap:14px}.tbar{display:flex;gap:12px;align-items:center;margin-bottom:10px}.tbar .srch{flex:1;max-width:380px}.sub0{font-size:.78rem;color:#8a93ab}
.tscroll{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:.83rem;min-width:640px}.tbl th{text-align:left;font-size:.72rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding:10px;border-bottom:1px solid rgba(255,255,255,.08)}.tbl td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}.tbl tr{transition:.2s;cursor:pointer}.tbl tbody tr:hover{background:rgba(255,255,255,.03)}.tbl tr.sel{background:rgba(37,99,235,.14)}.r{text-align:right!important}
.m3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.m3>div{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);text-align:center}.m3 small{font-size:.68rem;color:#8a93ab}.m3 b{display:block;font-size:1.05rem}
.tl{position:relative;margin:8px 0 14px;padding-left:18px}.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:linear-gradient(#3b82f6,#8b5cf6)}.tl li{position:relative;padding:6px 0}.tl li i{position:absolute;left:-18px;top:10px;width:12px;height:12px;border-radius:50%;border:2px solid #050b1c;background:#3b82f6;box-shadow:0 0 10px #3b82f6}.tl li.rd i{background:#ef4444}.tl li.g i{background:#22c55e}.tl li.v i{background:#8b5cf6}.tl b{font-size:.82rem}.tl small{display:block;font-size:.74rem;color:#8a93ab}
/* reports */
.range{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wide2{grid-column:1/-1}
.chart .vl{fill:#cbd5e1;font-size:11px}
.hm{display:grid;grid-template-columns:30px repeat(7,1fr);gap:4px;font-size:.66rem;color:#64748b}.hm i{aspect-ratio:1.6;border-radius:5px;background:rgba(59,130,246,var(--o));box-shadow:0 0 calc(var(--o)*14px) rgba(59,130,246,calc(var(--o)*.8))}.hl{display:flex;align-items:center;justify-content:center}
.dn{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center}.dn svg{width:170px;transform:rotate(0);filter:drop-shadow(0 0 12px rgba(59,130,246,.4))}.dn .d1{fill:#fff;font-size:7px;font-weight:700}.dn .d2{fill:#8a93ab;font-size:3px}.dn li{display:flex;align-items:center;gap:8px;font-size:.82rem;padding:5px 0;color:#cbd5e1}.dn li i{width:10px;height:10px;border-radius:3px}.dn li b{margin-left:auto}
/* settings */
.sgrid{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start}.snav{position:sticky;top:20px;display:flex;flex-direction:column;padding:8px}.snav a{font-size:.84rem;color:#94a3b8;padding:8px 10px;border-radius:8px}.snav a:hover{background:rgba(255,255,255,.05);color:#fff}
.scol{display:flex;flex-direction:column;gap:14px}.sec{scroll-margin-top:20px}.sec h3{margin:0 0 12px;font-size:1rem}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fld{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:#94a3b8;position:relative}.fld.full{grid-column:1/-1;margin-top:12px}
.fld input:not([type=range]),.fld textarea{font:inherit;font-size:.86rem;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;resize:vertical}.fld input:focus,.fld textarea:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
input[type=range]{accent-color:#3b82f6;width:100%}.cnt2{position:absolute;right:10px;bottom:8px;font-style:normal;font-size:.7rem;color:#64748b}
.fwd{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:12px;background:rgba(34,197,94,.08);border:1px solid rgba(74,222,128,.25)}.fwd>div{flex:1}.fwd b{font-size:.84rem;display:block}.fwd small{font-size:.75rem;color:#94a3b8}.dot2{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}.tgl b{font-size:.86rem;font-weight:500;display:block}.tgl small{font-size:.74rem;color:#8a93ab}.tgl input{display:none}.tgl i{flex:none;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:.2s}.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.tgl input:checked+i{background:linear-gradient(90deg,#3b82f6,#8b5cf6);box-shadow:0 0 12px -2px #3b82f6}.tgl input:checked+i::after{left:19px}
.planc{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:12px;background:rgba(37,99,235,.12);border:1px solid rgba(96,165,250,.3);margin-bottom:10px}.planc b{font-size:1.3rem;margin:0 8px}.planc small{display:block;color:#94a3b8;font-size:.76rem;margin-top:4px}
.team li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0}.team b{font-size:.85rem;display:block}.team small{font-size:.74rem;color:#8a93ab}.team{margin-bottom:10px}
.savebar{position:sticky;bottom:12px;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(8,15,36,.9);backdrop-filter:blur(14px);border:1px solid rgba(96,165,250,.25);font-size:.78rem;color:#94a3b8}
@media(max-width:1200px){.inbox{grid-template-columns:300px 1fr}.cside{display:none}.bwrap,.cwrap{grid-template-columns:1fr}}
@media(max-width:860px){.mnav{display:flex;gap:6px;overflow-x:auto;margin:-4px -14px 14px;padding:0 14px 4px;scrollbar-width:none}.mnav a{flex:none;font-size:.78rem;padding:6px 12px;border-radius:999px;color:#94a3b8;border:1px solid rgba(255,255,255,.08)}.mnav a.on{color:#fff;background:rgba(37,99,235,.3);border-color:rgba(96,165,250,.5)}
.top{flex-wrap:wrap}.inbox{grid-template-columns:1fr;height:auto;min-height:0}.thread{display:none}.inbox.open .plist{display:none}.inbox.open .thread{display:flex;height:calc(100vh - 240px);min-height:520px}.bk{display:block}.msgs .bub{max-width:85%}.mcall.bg2,.booked.bg2{min-width:0;width:100%}
.rgrid,.fg,.sgrid{grid-template-columns:1fr}.snav{position:static;flex-direction:row;overflow-x:auto}.snav a{flex:none}.dn{grid-template-columns:1fr;justify-items:center}.dn ul{width:100%}.savebar{bottom:84px}.kpis .card:last-child{grid-column:1/-1}}
svg text{stroke:none}.chart rect{stroke:none}.wide2 .chart{max-height:240px}.dn svg circle{stroke-linecap:butt}

.brand svg{display:block;height:28px;width:auto}.tf-foot{display:block;height:26px;width:auto;margin-bottom:8px}
.tf-logo .tf-streaks path{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .tf-streaks path{transform:translateX(-3px)}.brand:hover .tf-streaks path:nth-child(2){transform:translateX(-5px)}
@media(prefers-reduced-motion:reduce){.tf-logo .tf-streaks path{transition:none}}
@media(max-width:420px){.brand svg{height:24px}}
.auth{min-height:100vh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(800px 420px at 80% -10%,rgba(139,92,246,.22),transparent),radial-gradient(700px 420px at 10% 0,rgba(59,130,246,.16),transparent)}
.aw{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}.aw>.brand{justify-content:center;font-size:1.15rem}
.acard{padding:28px}.acard h1{margin:0 0 6px;font-size:1.5rem;letter-spacing:-.02em}.acard>.muted{margin:0 0 18px}.c{text-align:center}.muted{color:#8a93ab;font-size:.85rem}.muted a,.lk{color:#a5b4fc}.muted a:hover,.lk:hover{color:#fff}
.form{display:grid;gap:14px;margin-top:4px}.fld input:not([type=range]):not([type=checkbox]){width:100%;font-size:16px}
.btnp{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font:inherit;font-weight:600;color:#fff;background:linear-gradient(90deg,#3b82f6,#8b5cf6);cursor:pointer;box-shadow:0 8px 24px -6px rgba(139,92,246,.55);transition:transform .2s,box-shadow .2s,filter .2s}
.btnp:hover{transform:translateY(-1px);box-shadow:0 12px 28px -6px rgba(139,92,246,.7)}.btnp:active{transform:translateY(0);filter:brightness(.95)}.btnp:focus-visible,.btn2:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.btn2{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e6e9f2;border-radius:12px;padding:12px 16px;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}.btn2:hover{background:rgba(255,255,255,.08)}.btn2.x{color:#fca5a5;border-color:rgba(248,113,113,.3)}
.msg{padding:11px 14px;border-radius:12px;font-size:.87rem;margin:0 0 14px;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.35);animation:in .4s both}.msg.e{background:rgba(239,68,68,.1);border-color:rgba(248,113,113,.4);color:#fecaca}
.lo{background:none;border:0;color:#8a93ab;font:inherit;font-size:.82rem;cursor:pointer;padding:0}.lo:hover{color:#fff}
.pane-in{animation:in .45s cubic-bezier(.2,.7,.2,1) both}.pane-in.out{opacity:.35;transition:opacity .15s}
.pane-in>.card,.pane-in>section,.pane-in>form>section{margin-bottom:14px}
.empty{text-align:center;padding:38px 18px;color:#8a93ab}.empty b{color:#fff;display:block;margin-bottom:4px}
.note{border-color:rgba(251,191,36,.3);background:linear-gradient(180deg,rgba(251,191,36,.08),rgba(251,191,36,.02))}.note p{margin:4px 0 0}
.kv{font-variant-numeric:tabular-nums}
.tlist{list-style:none;margin:0;padding:0}.tlist li a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 6px;border-radius:12px;transition:background .2s}.tlist li a:hover{background:rgba(255,255,255,.04)}.tlist small{display:block;color:#8a93ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.bbs{display:flex;flex-direction:column;gap:8px;padding:6px 0 10px}.bb{max-width:80%;padding:10px 13px;border-radius:16px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;font-size:.92rem;animation:in .35s both}.bb time{display:block;font-size:.68rem;opacity:.65;margin-top:3px}
.bb.in{background:rgba(255,255,255,.07);border-bottom-left-radius:5px;align-self:flex-start}.bb.out{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-bottom-right-radius:5px;align-self:flex-end;color:#fff}
.dft{border:1px solid rgba(167,139,250,.35);background:rgba(139,92,246,.06);border-radius:14px;padding:12px;margin-top:12px}.dft.dcmp{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
.dft textarea{width:100%;min-height:90px;margin:8px 0;font:inherit;font-size:16px;color:#fff;background:rgba(7,13,31,.6);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;resize:vertical}.dft textarea:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.dacts{display:flex;gap:8px;flex-wrap:wrap}.dacts>*{flex:1;min-width:110px}
.sgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.sgrid2>*{min-width:0}.sgrid2>section:first-child{grid-column:1/-1}.sgrid2 .fld{margin-top:10px}.sgrid2 textarea{width:100%;font-size:16px}
.dayrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.dchip{cursor:pointer}.dchip input{position:absolute;opacity:0;pointer-events:none}.dchip span{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:.82rem;color:#94a3b8;transition:.2s}.dchip input:checked+span{color:#fff;background:linear-gradient(90deg,rgba(59,130,246,.35),rgba(139,92,246,.35));border-color:rgba(167,139,250,.5)}.dchip input:focus-visible+span{outline:2px solid #a5b4fc}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.two input{color-scheme:dark;min-width:0;width:100%}
.savebar2{grid-column:1/-1;position:sticky;bottom:14px;display:flex;justify-content:flex-end;z-index:3}.savebar2 .btnp{min-width:180px}
.pbig{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:4px 0 12px}.pbig small{font-size:1rem;color:#8a93ab;font-weight:500}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 18px;font-size:.9rem}.dl dt{color:#8a93ab}.dl dd{margin:0}
.planc2 form{margin:0 0 8px}
@media(max-width:860px){.sgrid2{grid-template-columns:minmax(0,1fr)}main{overflow-x:hidden}.mnav{margin-top:2px}.top h1{font-size:1.3rem}.bb{max-width:88%}.savebar2 .btnp{width:100%}}
@media(prefers-reduced-motion:reduce){.pane-in,.bb,.msg{animation:none}.btnp{transition:none}}
.dfull{width:100%}
.tlist li{display:block;padding:0}.tlist li a{grid-template-columns:auto minmax(0,1fr) auto}.tlist small{max-width:none}

/* real logo */.brand{color:#fff;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;text-decoration:none}.brand svg{display:block;height:30px;width:auto;max-width:100%}.brand .tf-streaks path{transition:transform .25s}.brand:hover .tf-streaks path{transform:translateX(-3px)}.brand:hover .tf-streaks path:nth-child(2){transform:translateX(-5px)}.side .brand{padding:4px 12px 14px;justify-content:flex-start}
.mbrand{display:none}@media(max-width:860px){.mbrand{display:flex;align-items:center;padding:2px 0 12px}.mbrand .brand{padding:0}}