/* Vytrac interactive prototype. Built from the Providers Figma frames at 1920 wide and scaled to fit the browser window it sits in */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #E9EEF5; -webkit-tap-highlight-color: transparent; }
body { display: grid; place-items: center; font-family: 'Roboto', system-ui, sans-serif; color: #4B5565; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: 0; }
button { cursor: pointer; text-align: inherit; }
img { display: block; max-width: none; }
p, h3, h4, h5 { margin: 0; }
hr { border: 0; border-top: 1px solid #F1EDED; margin: 6px 0; }
u { text-underline-offset: 2px; }

.stage { position: relative; overflow: hidden; }
.app { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F4F6FA; transform-origin: 0 0; user-select: none; -webkit-user-select: none; font-size: 14px; font-weight: 500; }
input, textarea { user-select: text; -webkit-user-select: text; }
.pp { position: relative; display: inline-flex; }
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.fade { animation: fade 220ms ease both; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #CFD8E4; border-radius: 3px; }

/* Shell */
.logo { position: absolute; left: 0; top: 0; z-index: 6; width: 300px; height: 96px; background: #2696BB; border-right: 1px solid #DEE9F5; display: flex; align-items: center; justify-content: center; gap: 36px; transition: height 220ms ease; }
.logo .lf { display: none; }
.app:not([data-page="dash"]) .logo { height: 140px; }
.app:not([data-page="dash"]) .logo .lm, .app:not([data-page="dash"]) .coll { display: none; }
.app:not([data-page="dash"]) .logo .lf { display: block; }
.coll { border-radius: 8px; transition: transform 200ms; }
.app.noside .coll { transform: scaleX(-1); }
.menu { position: absolute; left: 300px; right: 0; top: 0; height: 95px; z-index: 5; display: flex; align-items: center; gap: 35px; padding: 0 30px; background: #F2F6FB; border-bottom: 1px solid #D8E3F3; }
.menu nav { display: flex; gap: 50px; height: 95px; margin-right: auto; }
.mi { display: flex; flex-direction: column; justify-content: center; gap: 5px; border-bottom: 5px solid transparent; padding-top: 5px; transition: color 150ms, border-color 150ms; }
.mi b { font-size: 14px; font-weight: 700; text-transform: uppercase; }
.mi small { font-size: 12px; font-weight: 500; }
.mi:hover { color: #2696BB; }
.mi.on { color: #2696BB; border-bottom-color: #2696BB; }
.tog { display: flex; padding: 5px; background: #fff; border: 1px solid #CDD3DA; border-radius: 50px; }
.tog button { padding: 7px 16px; border-radius: 50px; font-size: 14px; transition: background 150ms, color 150ms; }
.tog button.on { background: #DBEFF5; color: #2696BB; }
.ti { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; transition: background 150ms; }
.ti:hover, .ti.act { background: #E3ECF6; }
.ti .nd { position: absolute; right: 6px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #F5485C; box-shadow: 0 0 0 2px #F2F6FB; }
.uprof { display: flex; align-items: center; gap: 15px; text-align: right; }
.uprof b { display: block; font-size: 14px; font-weight: 500; }
.uprof small { display: block; margin-top: 3px; font-size: 12px; transition: color 200ms; }
.uprof .bump small { color: #86B463; font-weight: 700; }
.mav { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #D8E3F3; }
.mav img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { position: absolute; left: 300px; right: 0; top: 95px; height: 45px; z-index: 4; display: none; align-items: center; gap: 15px; padding: 0 20px; background: #fff; font-size: 12px; color: #899BB7; }
.app:not([data-page="dash"]) .crumbs { display: flex; }
.cl2 { font-weight: 700; color: #2696BB; }
.cl2:hover { text-decoration: underline; }
.bk2 { margin: 0 -8px; }
.side { position: absolute; left: 0; top: 96px; bottom: 0; width: 300px; z-index: 3; background: #fff; border-right: 1px solid #DEE9F5; overflow: auto; padding-bottom: 20px; transition: transform 220ms ease; }
.app.noside .side { transform: translateX(-100%); }
.main { position: absolute; left: 300px; top: 95px; right: 0; bottom: 0; overflow: auto; padding: 15px; }
.app.noside .main { left: 0; }
.app:not([data-page="dash"]) .main { left: 0; top: 140px; }
.page.in { animation: pagein 240ms ease both; }

/* Sidebar */
.srch { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid #F1EDED; border-radius: 8px; background: #fff; transition: border-color 150ms; }
.srch:focus-within { border-color: #2696BB; }
.srch input { flex: 1; min-width: 0; font-size: 14px; }
.srch input::placeholder { color: #899BB7; }
.side .srch { margin: 20px 20px 10px; }
.srch.sm { width: 260px; margin-right: 15px; }
.tdh { display: flex; align-items: center; gap: 12px; padding: 8px 20px 12px; }
.tdh b { flex: 1; font-size: 14px; font-weight: 700; }
.ib { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.ib:hover, .ib.act { background: #F2F6FB; }
.ai, .aib { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 8px; background: linear-gradient(180deg, #fff, #F5F5F5); border: 1px solid #F2F6FB; transition: transform 150ms, box-shadow 150ms; }
.ai:hover, .aib:hover, .aib.act, .ai.act { box-shadow: 0 4px 12px -4px rgba(9,146,227,.4); transform: translateY(-1px); }
.plist { display: flex; flex-direction: column; }
.pr { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; transition: background 150ms; }
.pr > span:nth-child(2) { flex: 1; }
.pr:hover { background: #F2F6FB; }
.pr.on { background: #DBEFF5; font-weight: 700; }
.pr .rd { width: 5px; height: 5px; border-radius: 50%; background: #F5485C; }
.pr em { font-style: normal; min-width: 18px; text-align: right; }
.pr.done em { color: #86B463; }
.avc { border-radius: 50%; overflow: hidden; flex: none; display: block; }
.avc img { width: 100%; height: 100%; object-fit: cover; }
.ring { position: relative; flex: none; display: block; }
.ring .rg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; width: calc(100% - 8px); height: calc(100% - 8px); }
.sk { display: flex; align-items: center; gap: 10px; padding: 10px 20px; }
.sk i { height: 12px; flex: 1; border-radius: 6px; background: #F2F6FB; }
.sk i.s { flex: 0 0 18px; }
.almost { margin: 15px 20px 0; padding: 20px; background: #F2F6FB; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.almost b { font-size: 16px; font-weight: 700; margin-top: 6px; }
.almost small { font-size: 12px; color: #899BB7; }
.lnk { font-size: 12px; font-weight: 700; color: #5B79C0; }
.lnk:hover { text-decoration: underline; }
.almost .lnk { font-size: 14px; margin-top: 6px; }
.lnk2 { font-size: 14px; color: #2696BB; }

/* Cards and buttons */
.card { background: #fff; border: 1px solid #F1EDED; border-radius: 20px; }
.ob { padding: 9px 14px; border: 1.1px solid #5B79C0; border-radius: 8px; background: #fff; color: #5B79C0; font-size: 14px; font-weight: 500; text-align: center; white-space: nowrap; transition: background 150ms, transform 120ms; }
.ob:hover, .ob.act { background: #F0F4FC; }
.ob:active, .fb:active, .gb:active { transform: translateY(1px); }
.ob.sm { padding: 6px 12px; font-size: 13px; }
.gb { padding: 9px 14px; border: 1.1px solid #86B463; border-radius: 8px; background: #fff; color: #86B463; font-size: 14px; text-align: center; transition: background 150ms, color 150ms; }
.gb:hover { background: #86B463; color: #fff; }
.rb { padding: 9px 14px; border: 1.1px solid #F5485C; border-radius: 8px; color: #F5485C; font-size: 14px; text-align: center; transition: background 150ms, color 150ms; }
.rb:hover { background: #F5485C; color: #fff; }
.fb { padding: 10px 20px; border-radius: 8px; background: #5B79C0; color: #fff; font-size: 14px; text-align: center; transition: background 150ms; }
.fb:hover { background: #4a68ae; }
.fb.sm { padding: 8px 14px; font-size: 13px; }
.fb.red { background: #F5485C; }
.ob.ic, .fb.ic, .fl { display: flex; align-items: center; gap: 10px; }
.ob.ic { padding: 9px 20px; }
.fb.ic img { filter: brightness(0) invert(1); }
.fl { height: 36px; padding: 0 14px; border: 1.1px solid #F1EDED; border-radius: 8px; font-size: 14px; }
.fl:hover, .fl.act { background: #F2F6FB; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.chp { padding: 4px 10px; border: 1px solid #CDD3DA; border-radius: 20px; font-size: 12px; font-weight: 700; color: #899BB7; white-space: nowrap; }
.st { font-style: normal; display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.st.e { background: #ECE9FC; color: #9781B2; }
.st.m { background: #F8F5E8; color: #DD834D; }
.st.c2 { background: #75C16E; color: #fff; }
.st.o { border: 1px solid #CDD3DA; color: #899BB7; }
.st.w { background: #F2F6FB; color: #2696BB; }
.st.c { background: #EEF7EC; color: #6b9a4b; }
.stars { display: flex; gap: 7px; }
.stars img { opacity: .35; }
.stars img.on { opacity: 1; }
.stars.g img { filter: grayscale(1); }
.ch { display: flex; align-items: center; gap: 10px; padding: 15px 20px 12px; margin-bottom: 8px; border-bottom: 1px solid #F1EDED; }
.ch > b { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.ch .sub { font-size: 12px; color: #899BB7; }
.more { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.more:hover, .more.act { background: #F2F6FB; }
.empty { padding: 60px; text-align: center; }
.empty b { display: block; font-size: 16px; }
.empty span { display: block; margin-top: 6px; color: #899BB7; }
.ini { width: 35px; height: 35px; flex: none; border-radius: 50%; background: #F4F6FA; border: 1px solid #F1EDED; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #899BB7; }
.hint { font-size: 13px; color: #899BB7; line-height: 20px; }
.hint.c { text-align: center; margin-top: 6px; }

/* Dashboard */
.topp { display: flex; gap: 20px; padding: 20px; height: 670px; }
.pt { width: 530px; flex: none; display: flex; flex-direction: column; padding-right: 20px; border-right: 1px solid #F1EDED; min-height: 0; }
.phd { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.phd .lnk { margin-left: auto; margin-top: 6px; }
.pn b { display: block; font-size: 16px; font-weight: 700; margin-top: 6px; }
.pn > span { display: block; margin-top: 6px; }
.pn small { display: flex; gap: 15px; margin-top: 14px; font-size: 12px; font-weight: 700; color: #899BB7; }
.kvr { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.lbl { font-size: 14px; color: #899BB7; }
.tt .ttr { display: flex; align-items: center; gap: 12px; }
.tt .lbl { display: none; }
.tt.big { padding: 15px; border: 1px solid #D0D9E5; border-radius: 8px; margin-top: 15px; background: #fff; }
.tt.big .lbl { display: block; flex: 1; color: #4B5565; }
.tt b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pz { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; transition: transform 200ms, opacity 200ms; }
.pz.off { opacity: .45; transform: rotate(90deg); }
.tbar { height: 5px; margin-top: 14px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.tbar i { display: block; height: 100%; background: #2696BB; border-radius: 3px; transition: width 400ms; }
.ptabs { display: flex; gap: 30px; margin-top: 10px; border-bottom: 1px solid #F1EDED; }
.ptabs > button { padding: 15px 0 13px; border-bottom: 2px solid transparent; font-size: 14px; transition: color 150ms, border-color 150ms; }
.ptabs > button.on { color: #2696BB; border-bottom-color: #2696BB; }
.ptabs .sh { margin-left: auto; align-self: center; }
.tcs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 15px; padding: 15px 4px 4px 0; }
.tc { padding: 20px; border: 1px solid #F1EDED; border-radius: 20px; display: flex; flex-direction: column; gap: 15px; transition: opacity 300ms, transform 300ms, box-shadow 150ms; animation: pagein 260ms ease both; }
.tc:hover { box-shadow: 0 10px 30px -18px rgba(75,85,101,.35); }
.tc.gone { opacity: 0; transform: translateX(-30px) scale(.98); }
.tch { display: flex; gap: 15px; }
.tch b { font-size: 14px; font-weight: 500; }
.tch b span { margin-left: 14px; }
.tch small { display: block; margin-top: 4px; font-size: 12px; color: #899BB7; }
.mc { position: relative; }
.mc .vg { stroke: #899BB7; stroke-width: .5; opacity: .5; }
.mc .mt { font-size: 12px; font-weight: 500; fill: #899BB7; }
.lim { position: absolute; left: 6px; padding: 3px 9px; background: #fff; border-radius: 12px; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.tca { display: flex; flex-wrap: wrap; gap: 10px; }
.tca > .pp:first-child { flex: none; }
.tca > :nth-child(n+2):nth-child(-n+4) { flex: 1 1 calc((100% - 76px) / 3); }
.tca > :nth-child(n+5) { flex: 1 1 calc((100% - 20px) / 3); }
.tca .pp > .ob { width: 100%; }
.tca .ob, .tca .gb { padding: 9px 6px; }
.alldone, .pil { padding: 20px 0; }
.alldone { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #899BB7; }
.alldone b { color: #4B5565; font-size: 16px; }
.pil > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #F7F5F5; }
.pil span { color: #899BB7; }
.pc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt { display: flex; justify-content: space-between; height: 46px; border-bottom: 1px solid #F1EDED; }
.vt button { font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 150ms, border-color 150ms; }
.vt button:hover { color: #2696BB; }
.vt button.on { color: #2696BB; border-bottom-color: #2696BB; }
.chart { position: relative; margin-top: 20px; width: fit-content; }
.chart .cs { display: block; background: url(graph-dots.png) 0 0 / 40.5px 22.5px; overflow: visible; }
.bd.r { fill: rgba(245,72,92,.05); stroke: rgba(245,72,92,.6); stroke-width: 1; }
.bd.y { fill: rgba(255,206,32,.07); stroke: rgba(255,206,32,.7); stroke-width: 1; }
.ln { fill: none; stroke: #0992E3; stroke-width: 1.6; filter: drop-shadow(0 3px 5px rgba(9,146,227,.2)); stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: draw 1s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.area { fill: url(#ga); animation: fade 600ms ease both; }
.endp { fill: #fff; stroke: #F5485C; stroke-width: 2; }
.bpl { stroke: #0992E3; stroke-width: 2; }
.bpc { fill: #fff; stroke: #0992E3; stroke-width: 2; }
.bpc.r { stroke: #F5485C; }
.bpc.y { stroke: #E9B60C; }
.vb { fill: #0992E3; opacity: .5; transition: opacity 150ms; animation: rise 500ms ease both; transform-origin: bottom; transform-box: fill-box; }
@keyframes rise { from { transform: scaleY(0); } }
.vb.r { fill: #F5485C; }
.vb.y { fill: #E9B60C; }
.vb:hover { opacity: .85; }
.cur { stroke: #2696BB; stroke-dasharray: 3 3; pointer-events: none; }
.ya { position: absolute; right: -44px; top: 0; width: 40px; }
.ya span { position: absolute; left: 0; transform: translateY(-50%); font-size: 12px; color: #899BB7; }
.xa { position: absolute; left: 0; height: 20px; margin-top: 10px; }
.xa span { position: absolute; transform: translateX(-50%); font-size: 12px; color: #899BB7; white-space: nowrap; }
.xa span.b { font-weight: 900; color: #4B5565; }
.xa span.u { transform: none; font-weight: 500; }
.ev { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.evm { width: 30px; height: 30px; display: grid; place-items: center; background: #F5485C; color: #fff; font-size: 11px; font-weight: 900; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: transform 150ms; }
.evm.ex { clip-path: circle(50%); font-size: 16px; }
.evm:hover, .evm.act { transform: scale(1.15); }
.ctip { position: absolute; z-index: 3; min-width: 150px; padding: 10px 15px; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0,0,0,.12), 0 20px 20px rgba(0,0,0,.08); pointer-events: none; opacity: 0; transition: opacity 120ms; display: flex; flex-direction: column; gap: 4px; }
.ctip.on { opacity: 1; }
.ctip b { font-size: 12px; color: #899BB7; }
.ctip span { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ctip i { width: 8px; height: 8px; border-radius: 50%; background: #0992E3; }
.ctip i.r { background: #F5485C; }
.ctip i.y { background: #FFCE20; }
.ctip small { font-size: 12px; color: #899BB7; }
.adj { position: absolute; right: 56px; bottom: 74px; }
.lanewrap { padding: 20px 10px 10px 40px; background: url(graph-dots.png) 0 0 / 40.5px 22.5px; border-radius: 12px; margin-top: 10px; }
.lanes { position: relative; }
.lane { position: relative; height: 30px; margin-bottom: 12px; }
.lane .lic { position: absolute; left: calc(var(--l) - 34px); top: 0; z-index: 1; background: #fff; border-radius: 9px; }
.lane .lbar { position: absolute; left: var(--l); right: var(--r); top: 0; height: 30px; background: rgba(222,233,245,.5); border-radius: 0 4px 4px 0; transform-origin: left; animation: grow 700ms cubic-bezier(.3,.9,.3,1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.lane.y .lbar { background: rgba(255,206,32,.12); }
.lane.r .lbar { background: rgba(245,72,92,.1); }
.lane.r .lbar { border-right: 3px solid #F5485C; }
.lane.y:nth-child(5) .lbar { border-right: 3px solid #FFCE20; }
.lane .dot { position: absolute; top: 11.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #7BD6EA; transition: transform 150ms; z-index: 2; }
.lane .dot.dk { background: #2696BB; }
.lane .dot:hover { transform: scale(1.8); }
.lane .dot[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) scale(.56); transform-origin: bottom; white-space: nowrap; padding: 8px 12px; background: #fff; border-radius: 8px; font-size: 13px; color: #4B5565; box-shadow: 0 0 2px rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.1); }
.xd { display: flex; justify-content: space-between; margin: 10px 0 0 -20px; font-size: 12px; color: #899BB7; }
.xd span.b { font-weight: 900; color: #4B5565; }
.pill3 { display: inline-flex; gap: 5px; padding: 5px; margin: 15px 0; background: #fff; border-radius: 50px; }
.pill3 button { padding: 8px 15px; border-radius: 50px; font-size: 14px; transition: background 150ms, color 150ms; }
.pill3 button.on { background: #DBEFF5; color: #2696BB; }
.lg1 { display: flex; gap: 15px; }
.enc { flex: 1; min-width: 0; padding-bottom: 12px; }
.encl { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px; }
.er { display: flex; align-items: center; gap: 36px; padding: 8px 20px; border-left: 3px solid #DEE9F5; }
.er.r { border-left-color: #F5485C; }
.er.y { border-left-color: #FFCE20; }
.er .nm { display: flex; align-items: center; gap: 10px; width: 220px; }
.er .eid { width: 90px; }
.er .who { display: flex; align-items: center; gap: 10px; width: 210px; }
.er .ic { display: flex; align-items: center; gap: 8px; width: 40px; }
.er .ic.w { width: 90px; }
.aud { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.aud .prog { position: relative; width: 50px; height: 3px; border-radius: 2px; background: #E2E8F0; overflow: hidden; }
.aud .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2696BB; transition: width 200ms linear; }
.aud em { font-style: normal; font-size: 12px; color: #899BB7; width: 36px; font-variant-numeric: tabular-nums; }
.aud.on img { animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .45; } }
.actc { width: 375px; flex: none; background: #ECF3FD; border-color: #D8E3F3; }
.actc .ch { border-color: #D8E3F3; }
.ar { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 20px; }
.ar b { display: block; font-size: 16px; font-weight: 700; }
.ar span { display: block; margin-top: 4px; }
.ar em { font-style: normal; }
.donut { display: flex; align-items: center; gap: 20px; padding: 12px 20px 20px; }
.dn circle { transition: opacity 150ms, stroke-width 150ms; cursor: pointer; }
.dn circle.dim { opacity: .3; }
.dnt { font-size: 20px; font-weight: 700; fill: #4B5565; }
.dl { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.dli { display: flex; justify-content: space-between; align-items: center; }
.dli b { display: block; font-size: 14px; }
.dli span { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.dli em { font-style: normal; font-size: 16px; font-weight: 700; }
.lg2 { display: grid; grid-template-columns: repeat(4, 1fr) 375px; gap: 15px; margin-top: 15px; align-items: start; }
.appt { grid-column: 5; grid-row: 1 / 3; padding-bottom: 12px; }
.iss { grid-column: 1 / 3; padding-bottom: 10px; }
.chats { grid-column: 3 / 5; padding-bottom: 10px; }
.alcard { padding-bottom: 10px; }
.alr { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 20px; text-align: left; }
.alr:hover, .isr:hover, .chr:hover, .apr:hover, .oa:hover, .er:hover { background: #F8FAFD; }
.alr u { font-size: 14px; font-weight: 700; }
.alr small { display: block; margin-top: 3px; font-size: 12px; color: #899BB7; }
.alr em { font-style: normal; color: #899BB7; }
.wk { display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.wk .cv { width: 22px; height: 30px; display: grid; place-items: center; }
.wd { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border: 1px solid #F1EDED; border-radius: 5px; font-size: 12px; transition: background 150ms; }
.wd b { font-size: 12px; font-weight: 500; }
.wd.on { background: #DBEFF5; border-color: #DBEFF5; color: #2696BB; font-weight: 700; }
.aph { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 8px; }
.vtog { display: flex; gap: 4px; }
.vtog button { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.vtog button.on { background: #DBEFF5; }
.apl { display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }
.apr { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; text-align: left; }
.apr b { display: block; font-size: 14px; }
.apr small { display: block; font-size: 12px; color: #899BB7; margin-top: 2px; }
.apr em { margin-left: auto; font-style: normal; font-size: 14px; }
.apr.cx { opacity: .6; background: #F9FAFB; }
.apr.cx em { text-decoration: line-through; }
.apr.nowr { background: #F2F6FB; border-color: #D8E3F3; }
.dayg .hr { display: flex; align-items: center; gap: 10px; height: 48px; border-bottom: 1px solid #F7F5F5; }
.dayg .hr span { width: 44px; font-size: 12px; color: #899BB7; }
.dayg .blk { flex: 1; padding: 8px 12px; border-left: 3px solid #2696BB; background: #F2F6FB; border-radius: 6px; font-size: 13px; text-align: left; }
.dayg .blk.cx { opacity: .5; text-decoration: line-through; }
.dayg .blk.nowr { border-color: #86B463; background: #EEF7EC; }
.isr, .chr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 20px; text-align: left; }
.isr b, .chr b { display: block; font-size: 14px; }
.isr small, .chr small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.isr em { margin-left: auto; font-style: normal; }
.chr .msg { margin-left: auto; max-width: 355px; padding: 8px 15px; border: 1px solid #F1EDED; border-radius: 50px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cases, .care { padding-bottom: 12px; }
.ctab { padding: 0 20px; }
.cth, .ctr { display: grid; grid-template-columns: 280px 1fr 140px 180px 180px; align-items: center; gap: 10px; }
.cth { height: 44px; padding: 0 12px; background: #F2F6FB; border-radius: 8px; font-size: 12px; }
.ctr { width: 100%; padding: 10px 12px; border-bottom: 1px solid #F1EDED; text-align: left; }
.ctr:hover { background: #F8FAFD; }
.ctr .nm { display: flex; align-items: center; gap: 10px; }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 5px 20px 10px; }
.cmc { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #F1EDED; border-radius: 14px; text-align: left; }
.cmc:hover { border-color: #D8E3F3; background: #F8FAFD; }
.cmc > div { flex: 1; }
.cmc b { display: block; font-size: 14px; }
.cmc small { display: block; font-size: 12px; color: #899BB7; margin: 3px 0 10px; }
.cmc em { font-style: normal; font-weight: 700; color: #2696BB; }
.cbar { display: block; height: 6px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: 3px; background: #2696BB; animation: grow 700ms ease both; transform-origin: left; }

/* Patients */
.pl { padding: 20px; }
.plh { display: flex; align-items: center; gap: 15px; }
.plh > div:first-child { flex: 1; }
.plh > div b { display: block; font-size: 14px; font-weight: 700; }
.plh > div span { display: block; margin-top: 6px; color: #899BB7; }
.plh .srch { width: 260px; }
.tbl { margin-top: 20px; }
.tbl .th, .tbl .tr { display: flex; align-items: center; padding: 0 30px; }
.tbl .th { height: 44px; background: #F2F6FB; font-size: 12px; }
.tbl .th .sortable { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tbl .th .sortable:hover, .tbl .th .on { color: #2696BB; }
.tbl .tr { height: 72px; border-bottom: 1px solid #F1EDED; cursor: pointer; transition: background 120ms; }
.tbl .tr:hover { background: #F8FAFD; }
.c0 { width: 91px; } .c1 { width: 188.7px; } .c2 { width: 145px; } .c3 { width: 82px; } .c4 { width: 180px; } .c5 { width: 235px; } .c6 { width: 136px; } .c7 { width: 301px; } .c8 { width: 103px; } .c9 { width: 163px; } .c10 { width: 157px; } .c11 { width: 68px; justify-content: flex-end; }
.tbl .nm { display: flex; align-items: center; gap: 10px; }
.tbl .nm u { display: block; }
.tbl .nm small { display: block; font-size: 12px; color: #899BB7; margin-top: 2px; }
.tbl .c7 { justify-content: flex-start; }
.als { display: flex; gap: 15px; }
.alw { display: block; transition: transform 150ms; }
.alw:hover { transform: scale(1.15); }
.ts { display: flex; align-items: center; gap: 8px; }
.ts img:nth-of-type(2) { margin-left: 10px; }
.kb { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.kb:hover, .kb.act { background: #F2F6FB; }
.pgn { display: flex; align-items: center; gap: 10px; padding-top: 20px; }
.pgn span { flex: 1; }
.pb { padding: 9px 12px; border: 1px solid #F1EDED; border-radius: 8px; }
.pb:hover { background: #F2F6FB; }
.pb.dis { color: #899BB7; pointer-events: none; }

/* Profile */
.prof { display: flex; gap: 15px; align-items: flex-start; }
.pm { flex: 1; min-width: 0; padding: 15px 20px 20px; }
.smenu { display: flex; justify-content: space-between; height: 46px; padding: 0 20px; border: 1px solid #F1EDED; border-radius: 10px; }
.smenu button { font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 150ms, border-color 150ms; }
.smenu button:hover { color: #2696BB; }
.smenu button.on { color: #2696BB; border-bottom-color: #2696BB; }
.tb { margin-top: 15px; }
.rc { width: 552px; flex: none; padding: 15px 20px 20px; }
.rch { padding: 15px; background: #F2F6FB; border: 1px solid #F1EDED; border-radius: 20px; }
.rct { display: flex; align-items: center; gap: 15px; }
.rct b { display: block; font-size: 16px; font-weight: 700; }
.rct span { display: block; margin-top: 4px; }
.rct .ob { margin-left: auto; }
.rcb { display: flex; gap: 10px; margin-top: 15px; }
.rcb button { flex: 1; padding: 9px 6px; }
.pill4 { display: flex; padding: 5px; margin: 15px 0 10px; border: 1px solid #CDD3DA; border-radius: 50px; }
.pill4 button { flex: 1; padding: 8px 4px; border-radius: 50px; text-align: center; font-size: 14px; transition: background 150ms, color 150ms; }
.pill4 button.on { background: #DBEFF5; color: #2696BB; }
.rcl { animation: fade 200ms ease both; }
.ri { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; }
.ri > span:first-child { color: #899BB7; }
.ri u { font-weight: 700; cursor: pointer; }
.ri u:hover { color: #2696BB; }
.rtd, .rn { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F7F5F5; }
.rtd b { display: block; }
.rtd small, .rn small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.rn p { line-height: 20px; }
.ra { display: grid; grid-template-columns: 70px 90px 1fr; padding: 12px 0; border-bottom: 1px solid #F7F5F5; }
.ra em { font-style: normal; color: #899BB7; }
.ovg { display: flex; gap: 15px; margin-top: 15px; align-items: flex-start; }
.in2 { padding-bottom: 10px; }
.tn { width: 654px; flex: none; }
.tn.wide { width: auto; }
.tn .ch .srch { width: 220px; height: 34px; }
.ovr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.notes { padding: 4px 20px; max-height: 520px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.nt { display: flex; gap: 15px; }
.nt.me { justify-content: flex-end; text-align: right; }
.nt > div { max-width: 88%; }
.bub { padding: 12px 20px; background: #F2F6FB; border-radius: 10px; line-height: 24px; text-align: left; }
.bub ul { margin: 0; padding-left: 16px; }
.bub.au { padding: 10px 16px; }
.bub.au .aud { margin: 0; }
.bub.au .prog { width: 160px; }
.nt small { display: block; margin-top: 6px; font-size: 11px; color: #899BB7; }
.docs { display: flex; gap: 15px; padding: 15px; background: #F7F9FC; border-radius: 10px; }
.docb { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-radius: 8px; background: #2696BB; color: #fff; }
.docb img { filter: brightness(0) invert(1); }
.docb:hover { background: #1f86a8; }
.nc { display: flex; gap: 10px; padding: 12px 20px 4px; border-top: 1px solid #F1EDED; margin-top: 10px; }
.nc input { flex: 1; height: 40px; padding: 0 14px; border: 1px solid #F1EDED; border-radius: 8px; }
.nc input:focus { border-color: #2696BB; }
.oa { display: flex; align-items: center; gap: 15px; width: 100%; padding: 11px 20px; text-align: left; }
.oa b { display: block; }
.oa small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.oa em { margin-left: auto; font-style: normal; }
.otk { display: flex; align-items: center; padding: 10px 20px; }
.otk > div { flex: 1; }
.otk small { display: block; font-size: 12px; color: #899BB7; margin-top: 4px; }
.tlbar { display: flex; align-items: center; gap: 15px; padding: 0 0 15px; border-bottom: 1px solid #F1EDED; }
.tlbar .sp { flex: 1; }
.tog.s button { padding: 6px 16px; }
.dd2 { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border: 1px solid #CDD3DA; border-radius: 50px; }
.dnav { display: flex; align-items: center; gap: 12px; }
.dnav button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.dnav button:hover { background: #F2F6FB; }
.dnav b { font-weight: 500; }
.tlbody { margin-top: 15px; animation: fade 200ms ease both; }
.day { position: relative; border: 1px solid #F1EDED; border-radius: 20px; overflow: hidden; }
.hrow { display: flex; min-height: 80px; background: #F4F6FA; }
.hrow.w { background: #fff; }
.hl { width: 80px; flex: none; display: grid; place-items: center; font-size: 12px; color: #899BB7; text-transform: uppercase; }
.slots2 { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px; }
.sc { display: flex; align-items: center; gap: 15px; height: 73px; padding: 10px 15px; background: #fff; border: 1px solid #F1EDED; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.05); text-align: left; transition: box-shadow 150ms, transform 150ms, opacity 150ms; }
.sc:hover { box-shadow: 0 8px 20px -10px rgba(75,85,101,.35); transform: translateY(-1px); }
.sc b { display: block; font-size: 14px; }
.sc small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.sc.done { background: #FBFDFA; border-color: #EEF7EC; }
.sc.done > div, .sc.done > img:first-child { filter: blur(.7px); opacity: .7; }
.sc.bar { border-left: 3px solid #AC6CD3; }
.sc.open { box-shadow: 0 0 0 2px #2696BB; }
.now { position: absolute; left: 0; right: 0; height: 2px; background: #2696BB; pointer-events: none; }
.now span { position: absolute; left: 6px; top: -11px; padding: 3px 9px; border-radius: 12px; background: #2696BB; color: #fff; font-size: 12px; }
.vsub { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vsub button { padding: 6px 14px; border: 1px solid #CDD3DA; border-radius: 50px; font-size: 13px; }
.vsub button.on { background: #DBEFF5; border-color: #DBEFF5; color: #2696BB; }
.cp, .gt, .gl { display: flex; flex-direction: column; gap: 10px; }
.cpi { display: grid; grid-template-columns: 1fr 360px 50px; gap: 20px; align-items: center; padding: 16px 20px; border: 1px solid #F1EDED; border-radius: 14px; }
.cpi small { display: block; font-size: 12px; color: #899BB7; margin-top: 4px; }
.cpi em { font-style: normal; font-weight: 700; color: #2696BB; text-align: right; }
.gti { display: grid; grid-template-columns: 160px 1fr 80px 90px; gap: 20px; align-items: center; padding: 12px 20px; border: 1px solid #F1EDED; border-radius: 14px; }
.gti em { font-style: normal; color: #899BB7; }
.rngv { display: flex; gap: 3px; }
.rngv i { flex: 1; font-style: normal; text-align: center; padding: 6px 0; font-size: 12px; border-radius: 4px; }
.rngv .r { background: rgba(245,72,92,.12); color: #d23a4c; }
.rngv .y { background: rgba(255,206,32,.18); color: #a98400; }
.rngv .g { background: rgba(134,180,99,.18); color: #5f8c3e; }
.gli { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid #F1EDED; border-radius: 14px; text-align: left; }
.gli:hover { background: #F8FAFD; }
.gli b { flex: 1; }
.gli span { color: #899BB7; }
.encl.wide .er .nm { width: 160px; }

/* Alert details */
.al-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.ah { padding: 15px 20px; }
.ahh { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #F1EDED; }
.ahh b { display: block; font-size: 14px; font-weight: 700; }
.ahh small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.ahh .sp { flex: 1; }
.bk { border-radius: 8px; }
.bk:hover { background: #F2F6FB; }
.ml { position: relative; height: 245px; background: url(graph-dots.png) 0 0 / 40.5px 22.5px; margin-top: 15px; }
.ml .mli { position: absolute; left: 20px; top: 92px; z-index: 1; }
.ml .mlb { position: absolute; left: 50px; width: 46%; top: 92px; height: 30px; background: rgba(245,72,92,.1); animation: grow 700ms ease both; transform-origin: left; }
.ml .dt { position: absolute; top: 103px; width: 7px; height: 7px; border-radius: 50%; background: #2696BB; }
.ml .d1 { left: 15%; }
.ml .d2 { left: 47%; background: #7BD6EA; }
.mpo { position: absolute; padding: 10px 15px; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0,0,0,.12), 0 20px 20px rgba(0,0,0,.08); font-size: 14px; animation: drop 300ms ease both; }
.mpo i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7BD6EA; margin: 0 6px; vertical-align: 2px; }
.mpo small { display: block; font-size: 12px; color: #899BB7; margin-top: 4px; }
.mpo.a { left: 37%; top: 20px; }
.mpo.b { left: 13%; top: 140px; animation-delay: 120ms; }
.mpo.b i { background: #2696BB; }
.ml .mld { position: absolute; left: 48%; bottom: 0; font-size: 12px; }
.ag { display: grid; grid-template-columns: 431px 431px 1fr; gap: 15px; align-items: start; }
.ri2 { padding: 0 20px 15px; }
.ri2 .ch { margin: 0 -20px 8px; }
.ri2 .ri span:last-child { display: flex; align-items: center; gap: 8px; }
.aa { padding-bottom: 6px; }
.aat { display: flex; align-items: center; gap: 12px; padding: 4px 20px 15px; border-bottom: 1px solid #F1EDED; }
.aat b span { margin-left: 20px; }
.aat small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.aap { margin-left: auto; text-align: right; }
.aai { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.aai.new { animation: drop 300ms ease both; background: #F8FAFD; }
.aai b { display: block; }
.aai small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.aai small span { margin-left: 10px; }
.vw { margin-left: auto; padding: 4px 12px; border: 1px solid #CDD3DA; border-radius: 20px; font-size: 12px; }
.vw:hover { background: #F2F6FB; }
.aab { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px 20px; border-top: 1px solid #F1EDED; }
.aab > * { flex: 1 1 40%; }
.aab > .pp { flex: 0 0 36px; }
.bm { padding: 20px; }
.bodies { position: relative; display: flex; justify-content: space-around; padding: 10px 0; }
.bdy { cursor: crosshair; }
.pain { position: absolute; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle, #FF0000 0 25%, rgba(255,96,96,.55) 45%, rgba(255,96,96,0) 70%); animation: throb 1.6s ease-in-out infinite; }
@keyframes throb { 50% { transform: scale(1.25); } }
.disc { margin-top: 15px; padding: 20px; border: 1px solid #F1EDED; border-radius: 20px; }
.disc b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.dbar { position: relative; display: grid; grid-template-columns: repeat(11, 1fr); padding-top: 4px; }
.dbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 5px; background: linear-gradient(62deg, #F1E1B8 20%, #FF004D 101%); opacity: .35; }
.dbar .fill { position: absolute; left: 0; top: 0; height: 10px; width: calc(var(--v) * 100%); border-radius: 5px; background: linear-gradient(90deg, #F1E1B8, #FF004D); transition: width 250ms ease; pointer-events: none; }
.dbar button { position: relative; padding-top: 18px; text-align: center; font-size: 12px; color: #899BB7; }
.dbar button.on { color: #4B5565; font-weight: 700; }
.dbar button.on::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 20px; margin-left: -1px; background: #4B5565; border-radius: 1px; }

/* Messages and calendar */
.msgp { display: flex; gap: 15px; height: 910px; }
.ml2 { width: 420px; flex: none; overflow: auto; }
.cl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; text-align: left; position: relative; }
.cl:hover { background: #F8FAFD; }
.cl.on { background: #DBEFF5; }
.cl b { display: block; }
.cl small { display: block; margin-top: 3px; font-size: 12px; color: #899BB7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.cl .un { position: absolute; right: 20px; width: 8px; height: 8px; border-radius: 50%; background: #2696BB; }
.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread.inl { height: 640px; border: 1px solid #F1EDED; border-radius: 20px; }
.thh { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #F1EDED; }
.thh > div { flex: 1; }
.thh small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.msgs { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msgb { max-width: 60%; padding: 12px 16px; background: #F2F6FB; border-radius: 14px 14px 14px 4px; animation: drop 220ms ease both; }
.msgb.me { align-self: flex-end; background: #2696BB; color: #fff; border-radius: 14px 14px 4px 14px; }
.msgb p { line-height: 21px; }
.msgb small { display: block; margin-top: 6px; font-size: 11px; opacity: .65; }
.cal { padding-bottom: 10px; }
.cgr { display: grid; grid-template-columns: 70px repeat(7, 1fr); padding: 0 20px; }
.cgr > b { padding: 10px; text-align: center; font-size: 14px; }
.cgr > b.on { color: #2696BB; }
.cgr .hl { width: auto; height: 76px; border-top: 1px solid #F1EDED; }
.cc { height: 76px; border-top: 1px solid #F1EDED; border-left: 1px solid #F1EDED; padding: 3px; }
.ce { width: 100%; height: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; border-left: 3px solid #2696BB; background: #DBEFF5; transition: transform 150ms; }
.ce:hover { transform: translateY(-1px); }
.ce.a { background: #F3EEFB; border-color: #AC6CD3; }
.ce.i { background: #EEF7EC; border-color: #86B463; }
.ce b { display: block; font-size: 13px; }
.ce small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }

/* Popovers, modals */
.pop { position: absolute; z-index: 55; min-width: 210px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 0 2px rgba(0,0,0,.12), 0 20px 20px rgba(0,0,0,.08); animation: drop 150ms ease both; font-size: 14px; }
.pop > button:not(.nr) { display: block; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; white-space: nowrap; }
.pop > button:hover { background: #F2F6FB; }
.pop > button.on { color: #2696BB; font-weight: 700; }
.pop > button.red { color: #F5485C; }
.pop h4 { margin: 6px 12px; font-size: 12px; font-weight: 700; color: #899BB7; text-transform: uppercase; letter-spacing: .03em; }
.pop.tp { width: 330px; }
.nr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; }
button.nr:hover { background: #F2F6FB; }
.nr > div { flex: 1; }
.nr b { display: block; }
.nr small { display: block; font-size: 12px; color: #899BB7; margin-top: 2px; line-height: 17px; }
.pres { width: 8px; height: 8px; border-radius: 50%; background: #86B463; }
.pres.b { background: #FFCE20; }
.pop.aip { width: 330px; padding: 15px; }
.aih { display: flex; align-items: center; gap: 10px; }
.aip p { margin: 10px 0 12px; line-height: 21px; }
.pop.evp { width: 290px; padding: 15px; }
.evp small { display: block; font-size: 12px; color: #899BB7; }
.evp b { display: block; font-size: 15px; margin: 4px 0 6px; }
.evp p { line-height: 20px; margin-bottom: 10px; }
.tgl { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; padding: 6px 8px; }
.tgl input, .qo input { position: absolute; opacity: 0; pointer-events: none; }
.tgl i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #CDD3DA; flex: none; transition: background 150ms; }
.tgl i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms; }
.tgl input:checked + i { background: #2696BB; }
.tgl input:checked + i::after { transform: translateX(14px); }
.scrim { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(3,46,61,.35); animation: fade 150ms ease both; transition: opacity 150ms; }
.scrim.out { opacity: 0; }
.modal { width: 580px; padding: 25px; background: #fff; border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(3,46,61,.5); display: flex; flex-direction: column; gap: 18px; animation: pop 240ms cubic-bezier(.3,1.2,.5,1) both; }
.mh { display: flex; align-items: center; gap: 15px; }
.mh h3 { font-size: 18px; font-weight: 700; }
.mh small { display: block; font-size: 13px; color: #899BB7; margin-top: 4px; }
.x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; font-size: 22px; display: grid; place-items: center; color: #899BB7; }
.x:hover { background: #F2F6FB; }
.mf { display: flex; justify-content: flex-end; gap: 10px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border: 1px solid #F1EDED; border-radius: 14px; transition: border-color 150ms, background 150ms; }
.opt.on { border-color: #2696BB; background: #F2F9FC; color: #2696BB; }
.call { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0; }
.call[hidden], .mf[hidden], .opts[hidden] { display: none; }
.call b { font-size: 16px; }
.pulse { border-radius: 50%; animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(38,150,187,.5); } to { box-shadow: 0 0 0 22px rgba(38,150,187,0); } }
.eb { padding: 10px 26px; border-radius: 50px; background: #F5485C; color: #fff; }
.ql { display: flex; flex-direction: column; gap: 8px; }
.qo { display: flex; align-items: center; gap: 14px; padding: 12px 15px; border: 1px solid #F1EDED; border-radius: 12px; cursor: pointer; transition: border-color 150ms, background 150ms; }
.qo i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #CDD3DA; flex: none; transition: box-shadow 150ms, border-color 150ms; }
.qo:has(input:checked) { border-color: #2696BB; background: #F7FBFD; }
.qo input:checked + i { border-color: #2696BB; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #2696BB; }
.qo b { display: block; }
.qo small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.seg { display: flex; padding: 4px; background: #F2F6FB; border-radius: 50px; }
.seg button { flex: 1; padding: 8px; border-radius: 50px; text-align: center; transition: background 150ms, color 150ms; }
.seg button.on { background: #fff; color: #2696BB; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.days, .slots { display: grid; gap: 8px; }
.days { grid-template-columns: repeat(5, 1fr); }
.slots { grid-template-columns: repeat(3, 1fr); }
.days button, .slots button { padding: 10px; border: 1px solid #F1EDED; border-radius: 8px; text-align: center; transition: background 150ms, border-color 150ms; }
.days button.on, .slots button.on { background: #DBEFF5; border-color: #2696BB; color: #2696BB; }
.slots button.busy { text-decoration: line-through; opacity: .4; cursor: default; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fi { display: flex; flex-direction: column; gap: 6px; }
.fi span { font-size: 13px; color: #899BB7; }
.fi input, .fi select, .fi textarea { height: 40px; padding: 0 12px; border: 1px solid #CDD3DA; border-radius: 8px; transition: border-color 150ms, box-shadow 150ms; }
.fi textarea { height: auto; padding: 10px 12px; resize: none; }
.fi input:focus, .fi select:focus, .fi textarea:focus { border-color: #2696BB; box-shadow: 0 0 0 3px rgba(38,150,187,.15); }
.fi .bad { border-color: #F5485C; }
.err { font-size: 13px; color: #F5485C; }
.err:empty { display: none; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; border: 1.5px dashed #CDD3DA; border-radius: 14px; cursor: pointer; text-align: center; }
.drop:hover { border-color: #2696BB; background: #F7FBFD; }
.drop small { font-size: 12px; color: #899BB7; }
.thr { display: flex; flex-direction: column; gap: 14px; }
.thr label { display: grid; grid-template-columns: 130px 1fr 110px; gap: 15px; align-items: center; }
.thr span { display: flex; align-items: center; gap: 8px; }
.thr i { width: 10px; height: 10px; border-radius: 3px; }
.thr i.r { background: #F5485C; }
.thr i.y { background: #FFCE20; }
.thr input { accent-color: #2696BB; }
.thr b { text-align: right; font-variant-numeric: tabular-nums; }
.lst { margin: 0; padding-left: 18px; line-height: 30px; }
.sos { display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid #FBD5DA; background: #FFF6F7; border-radius: 14px; }
.sos small { display: block; font-size: 12px; color: #899BB7; margin-top: 3px; }
.toast { position: absolute; left: 50%; top: 110px; z-index: 70; padding: 13px 20px; border-radius: 12px; background: #032E3D; color: #fff; font-size: 14px; transform: translateX(-50%); animation: toast 2.8s ease both; pointer-events: none; box-shadow: 0 20px 40px -18px rgba(3,46,61,.6); white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 8%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }