/* Plinth interactive prototype. Built from the Workleto CRM Figma frames at 1920 × 1010 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: #1B1F24; -webkit-tap-highlight-color: transparent; }
body { display: grid; place-items: center; font-family: 'Roboto', system-ui, sans-serif; color: #383B41; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: 0; }
button { cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; opacity: .45; }
img { display: block; max-width: none; }
p, h1, h2, h3, h4, h5 { margin: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid #F0F1F5; margin: 4px 0; }

.stage { position: relative; overflow: hidden; }
.app { position: absolute; left: 0; top: 0; width: 1920px; height: 1010px; overflow: hidden; background: #1B1F24; transform-origin: 0 0; user-select: none; -webkit-user-select: none; font-size: 14px; }
input, textarea { user-select: text; -webkit-user-select: text; }
[data-popper] { position: relative; display: inline-flex; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes flash { 0%, 40% { background: #FFF1EA; } 100% { background: transparent; } }
@keyframes slidein { from { transform: translateX(100%); } }

/* Rail */
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 93px; background: #1B1F24; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 8px; }
.rail nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ri { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px; border-radius: 12px; font-size: 12px; font-weight: 700; color: #B0B4B9; text-align: center; transition: background 160ms, color 160ms; }
.ri .ico { height: 25px; display: grid; place-items: center; }
.ri img { filter: brightness(0) invert(.7); transition: filter 160ms; }
.ri:hover { background: #262B32; color: #d6d9dd; }
.ri.on { background: #3B414E; color: #fff; }
.ri.on img { filter: brightness(0) invert(1); }

/* Top bar */
.tb { position: absolute; left: 93px; right: 0; top: 0; height: 52px; background: #272C33; display: flex; align-items: center; gap: 4px; padding: 6px; z-index: 20; }
.gsearch { flex: 1; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #3B414E; border-radius: 8px; margin-right: 6px; }
.gsearch input { flex: 1; font-size: 13px; font-weight: 500; color: #dfe5ee; }
.gsearch input::placeholder { color: #7F91A9; }
.gres { position: absolute; left: 0; right: 0; top: 46px; background: #fff; border-radius: 12px; box-shadow: 0 20px 40px -16px rgb(0 0 0 / .4); padding: 6px; display: none; color: #383B41; }
.gres.open { display: block; animation: drop 150ms ease both; }
.gres h4, .pop h4 { margin: 8px 12px 4px; font-size: 11px; font-weight: 700; color: rgba(56,59,65,.45); text-transform: uppercase; letter-spacing: .04em; }
.gres button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.gres button:hover { background: #F5F6F8; }
.gres em { margin-left: auto; font-style: normal; font-size: 12px; color: rgba(56,59,65,.5); }
.gres .gcar img { width: 40px; height: 28px; object-fit: cover; border-radius: 6px; }
.none { padding: 14px; font-size: 13px; color: rgba(56,59,65,.6); }
.tbi > button { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; transition: background 150ms; }
.tbi > button:hover { background: #343B45; }
.tbi.dk > button { background: #3A424C; }
.tbi.dk > button:hover { background: #46505c; }
.tbi .dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #03B54E; box-shadow: 0 0 0 2px #272C33; }
.tb .sep { width: 1px; height: 24px; background: #384352; margin: 0 6px; }
.user { display: flex; align-items: center; gap: 12px; padding: 0 6px 0 6px; height: 40px; border-radius: 8px; }
.un { text-align: right; }
.un b, .cn b { display: block; font-size: 14px; font-weight: 500; color: #fff; }
.un small, .cn small { display: block; font-size: 12px; font-weight: 700; color: #7F91A9; margin-top: 2px; }
.pics { display: flex; border-radius: 12px; transition: box-shadow 150ms; }

/* Frame and pages */
.frame { position: absolute; left: 99px; top: 58px; right: 6px; bottom: 6px; background: #F7F7F7; border: 1px solid #E2E4EF; border-radius: 12px; overflow: hidden; }
.page { position: absolute; inset: 0; }
.page.in { animation: pagein 220ms ease both; }

/* Popovers */
.pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; box-shadow: 0 20px 40px -18px rgb(27 31 36 / .35); padding: 6px; z-index: 40; animation: drop 150ms ease both; color: #383B41; font-size: 14px; }
.pop.right { left: auto; right: 0; }
.pop > button, .pop > label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pop > button:hover, .pop > label:hover { background: #F5F6F8; }
.pop > button.on { font-weight: 700; background: #F0F3F5; }
.pop > button em { margin-left: auto; font-style: normal; font-size: 12px; color: rgba(56,59,65,.5); }
.pop .red { color: #E45353; }
.pop .sd { width: 8px; height: 8px; border-radius: 50%; }
.pop.tp { width: 340px; }
.pop .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; white-space: normal; }
.pop .tx b { font-size: 13px; font-weight: 500; }
.pop .tx small { font-size: 12px; color: rgba(56,59,65,.6); }
.pop .tm { font-style: normal; font-size: 12px; font-weight: 700; width: 40px; color: #1D4ED8; }
.pop .ini { width: 32px; height: 32px; border-radius: 12px 0 12px 12px; background: #EDF1F2; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.pop .nd { width: 8px; height: 8px; border-radius: 50%; background: #FF7441; flex: none; }
.pf2 { border-top: 1px solid #F0F1F5; margin-top: 4px; padding-top: 4px; }
.pf2 button { width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #1D4ED8; text-align: center; }
.pf2 button:hover { background: #F5F6F8; }
.tk { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.tk:hover { background: #F5F6F8; }
.tk input, .cb input, .sw input { position: absolute; opacity: 0; pointer-events: none; }
.tk i, .cb i { width: 16px; height: 16px; border: 1px solid #D9DCEB; border-radius: 4px; flex: none; display: grid; place-items: center; transition: background 120ms, border-color 120ms; }
.tk input:checked + i, .cb input:checked + i { background: #FF7441; border-color: #FF7441; }
.tk input:checked + i::after, .cb input:checked + i::after { content: ''; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.tk input:checked ~ span { text-decoration: line-through; color: rgba(56,59,65,.45); }
.goal { padding: 6px 12px 10px; }
.goal > b { font-size: 16px; font-weight: 700; }
.goal small { display: block; font-size: 12px; color: rgba(56,59,65,.6); margin: 6px 0 12px; }
.gbar { height: 8px; border-radius: 4px; background: #F0F1F5; overflow: hidden; margin-top: 10px; }
.gbar i { display: block; height: 100%; background: #FF7441; border-radius: 4px; animation: grow 700ms cubic-bezier(.3,.9,.3,1) both; }
@keyframes grow { from { width: 0 !important; } }
.gbar.sm { height: 5px; margin: 0; flex: 1; }
.gbar.sm i { background: #383B41; }
.gr { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; margin-top: 8px; }
.gr span { width: 100px; }
.gr em { font-style: normal; font-weight: 700; width: 16px; text-align: right; }
.sw { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sw span { flex: 1; }
.sw i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #D9DCEB; transition: background 150ms; flex: none; }
.sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform 150ms; }
.sw input:checked + i { background: #03B54E; }
.sw input:checked + i::after { transform: translateX(14px); }

/* Buttons and inputs */
.bt { height: 40px; display: inline-flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px .5px rgba(0,0,0,.05); transition: background 150ms, border-color 150ms, transform 120ms; }
.bt:hover { background: #F9FAFB; border-color: #c9cde0; }
.bt:active { transform: translateY(1px); }
.bt b { font-weight: 700; }
.bt.pri { background: #FF7441; border-color: #FF7441; color: #fff; font-weight: 700; }
.bt.pri:hover { background: #f5652f; }
.bt.blue { background: #1D4ED8; border-color: #1D4ED8; color: #fff; font-weight: 700; }
.bt.blue:hover { background: #1a45c2; }
.bt.blue img { filter: brightness(0) invert(1); }
.bt.sm { height: 32px; padding: 0 12px; gap: 6px; font-size: 14px; }
.bt.sm2 { height: 36px; padding: 0 16px; font-size: 14px; }
.fs { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; transition: border-color 150ms, box-shadow 150ms; }
.fs:focus-within { border-color: #FFB08F; box-shadow: 0 0 0 3px rgb(255 116 65 / .12); }
.fs input { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.fs input::placeholder { color: rgba(56,59,65,.4); }
.fs.grow { flex: 1; }

/* Contacts: filter panel */
.cpage { display: flex; }
.fp { width: 240px; flex: none; padding: 12px; display: flex; flex-direction: column; gap: 12px; transition: background 200ms; }
.frows { display: flex; flex-direction: column; overflow: auto; margin: 0 -4px; padding: 0 4px; flex: 1; min-height: 0; }
.fr { border-radius: 10px; transition: background 150ms; }
.fr.open { background: #fff; box-shadow: 0 0 0 1px #E6E8F3; margin: 2px 0; }
.fh { width: 100%; height: 43px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; font-weight: 500; border-radius: 10px; }
.fh span { flex: 1; }
.fh:hover { background: rgb(56 59 65 / .04); }
.fh .chev { transition: transform 180ms; transform: rotate(180deg); }
.fr.open .fh .chev { transform: none; }
.fb { min-width: 20px; height: 20px; border-radius: 10px; background: #FF7441; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.fopts { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 2px; animation: drop 150ms ease both; }
.cb { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }
.cb:hover { background: #F7F7F7; }
.cb span { flex: 1; }
.cb em { font-style: normal; font-size: 12px; color: rgba(56,59,65,.45); }
.fin { height: 36px; padding: 0 10px; border: 1px solid #E6E8F3; border-radius: 8px; font-size: 13px; font-weight: 500; }
.fin:focus { border-color: #FFB08F; }
.fopts.rg { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.fopts.rg button { padding: 6px 10px; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 12px; font-weight: 500; background: #fff; }
.fopts.rg button.on { background: #383B41; border-color: #383B41; color: #fff; font-weight: 700; }
.fclear { align-self: flex-start; font-size: 12px; font-weight: 700; color: #FF7441; padding: 0 12px; }
.fnone { padding: 12px; font-size: 13px; color: rgba(56,59,65,.5); }
.fft { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.hidef { display: flex; align-items: center; gap: 10px; padding: 4px; font-size: 12px; font-weight: 700; color: #A8A9AD; border-radius: 6px; align-self: flex-start; }
.hidef:hover { color: #6f7176; }
.fp.mini { width: 64px; align-items: center; gap: 6px; }
.fp.mini .fsr { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid #E6E8F3; display: grid; place-items: center; margin-bottom: 6px; }
.fic { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; }
.fic:hover { background: rgb(56 59 65 / .06); }
.fic.act::after { content: ''; position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #FF7441; }
.fp.mini .fft { align-items: center; }
.cpage.dark .fp { background: #272C33; }
.cpage.dark .fh, .cpage.dark .fnone { color: #B0B4B9; font-weight: 400; }
.cpage.dark .fh:hover { background: rgb(255 255 255 / .05); }
.cpage.dark .fr.open { background: #21272F; box-shadow: 0 0 0 1px #3B414E; }
.cpage.dark .cb, .cpage.dark .fopts.rg button { color: #B0B4B9; }
.cpage.dark .cb:hover { background: #2c323a; }
.cpage.dark .cb i { border-color: #4a515c; }
.cpage.dark .fopts.rg button { background: #2c323a; border-color: #3B414E; }
.cpage.dark .fopts.rg button.on { background: #fff; color: #272C33; }
.cpage.dark .fs, .cpage.dark .fin, .cpage.dark .fsr { background: #21272F !important; border-color: #3B414E !important; color: #dfe5ee; }
.cpage.dark .fp .fs input::placeholder { color: rgb(159 167 183 / .5); }

/* Contacts: results */
.rc { flex: 1; min-width: 0; margin: 1px 1px 1px 0; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; box-shadow: -10px 1px 40px rgba(0,0,0,.1); display: flex; flex-direction: column; overflow: hidden; }
.rh { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #F0F1F5; }
.rh .cnt { font-size: 16px; font-weight: 500; white-space: nowrap; min-width: 100px; }
.rb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tw { flex: 1; min-height: 0; overflow: auto; }
.ct { width: 100%; }
.ct th { position: sticky; top: 0; z-index: 2; background: #F7F7F7; padding: 6px 24px; font-size: 12px; font-weight: 700; color: rgba(56,59,65,.4); text-align: left; white-space: nowrap; }
.ct th.n { font-size: 14px; font-weight: 400; width: 50px; padding-right: 0; }
.ct td { height: 57px; padding: 12px 24px; font-size: 14px; font-weight: 500; border-bottom: 1px solid #F0F1F5; white-space: nowrap; }
.ct td.n { padding-right: 0; }
.ct tbody tr, .lt tbody tr { transition: background 120ms; }
.ct tbody tr:hover { background: #FAFBFC; }
tr.fresh { animation: flash 1.6s ease both; }
.sorth { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: inherit; }
.sorth:hover { color: #383B41; }
.nm { display: flex; align-items: center; gap: 16px; }
.avt { border-radius: 12px 0 12px 12px; overflow: hidden; flex: none; display: block; }
.avt img { width: 100%; height: 100%; object-fit: cover; }
.lnk { font-weight: 700; color: #1D4ED8; text-decoration: underline; text-underline-offset: 2px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.lnk:hover { color: #1338a3; }
.tp { display: flex; align-items: center; gap: 10px; }
.tp > span:first-child { width: 120px; }
.chip { display: inline-flex; padding: 3px 8px; border-radius: 8px; border: 1px solid rgb(var(--c) / .2); background: rgb(var(--c) / .05); color: rgb(var(--c) / .5); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dt { display: flex; gap: 10px; }
.dt i { font-style: normal; color: rgba(56,59,65,.6); }
.kb > button, .kb2 { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.kb > button:hover, .kb2:hover { background: #F0F1F5; }
.empty td { height: 360px; text-align: center; white-space: normal; }
.empty b { display: block; font-size: 16px; font-weight: 700; }
.empty span { display: block; margin: 8px 0 18px; color: rgba(56,59,65,.6); }
.pf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #F0F1F5; }
.pinfo { font-size: 12px; font-weight: 500; color: rgba(56,59,65,.6); }
.pager { display: flex; gap: 6px; }
.pg { height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; background: #fff; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 20px; transition: background 120ms; }
.pg:hover { background: #F7F7F7; }
.pg.on { background: #383B41; border-color: #383B41; color: #fff; font-weight: 700; }
.pg.dis { opacity: .4; pointer-events: none; }
.pg.nav { padding: 0 12px; }

/* Modal, toast, call */
.scrim { position: absolute; inset: 0; z-index: 50; background: rgb(27 31 36 / .45); display: grid; place-items: center; animation: fadein 150ms ease both; transition: opacity 150ms; }
.scrim.out { opacity: 0; }
.modal { width: 600px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5); animation: pop 240ms cubic-bezier(.3,1.2,.5,1) both; display: flex; flex-direction: column; gap: 14px; }
.mh { display: flex; align-items: center; }
.mh h2 { flex: 1; font-size: 18px; font-weight: 700; }
.x { width: 32px; height: 32px; border-radius: 8px; font-size: 22px; line-height: 1; display: grid; place-items: center; color: rgba(56,59,65,.6); }
.x:hover { background: #F0F1F5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fl { display: flex; flex-direction: column; gap: 6px; }
.fl > span { font-size: 13px; font-weight: 500; color: rgba(56,59,65,.6); }
.fl input, .fl select, .fl textarea { height: 40px; padding: 0 12px; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 14px; font-weight: 500; background: #fff; transition: border-color 150ms, box-shadow 150ms; }
.fl textarea { height: auto; padding: 10px 12px; resize: none; line-height: 20px; }
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: #8aa4ec; box-shadow: 0 0 0 3px rgb(29 78 216 / .1); }
.fl .bad { border-color: #E45353; }
.err { font-size: 13px; color: #E45353; min-height: 0; }
.err:empty { display: none; }
.mf { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal .lead { font-size: 15px; font-weight: 500; color: rgba(56,59,65,.7); margin-top: -8px; }
.seg, .stabs { display: flex; gap: 6px; padding: 6px; background: #F5F5F5; border-radius: 8px; align-self: flex-start; }
.seg button, .stabs button { height: 38px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: background 150ms; }
.seg button.on, .stabs button.on { background: #383B41; color: #fff; }
.stabs em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 4px; background: rgba(23,9,227,.1); color: #726CC0; }
.stabs button.on em { background: rgba(96,85,255,.25); border: 1px solid rgba(63,130,255,.3); color: #fff; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots button { height: 40px; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 13px; font-weight: 500; text-align: center; }
.slots button.on { background: #383B41; border-color: #383B41; color: #fff; font-weight: 700; }
.modal.cmd { position: absolute; top: 110px; left: 50%; margin-left: -320px; width: 640px; padding: 0; gap: 0; overflow: hidden; }
.cmdi { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: 1px solid #F0F1F5; }
.cmdi input { flex: 1; font-size: 16px; font-weight: 500; }
kbd { font: inherit; font-size: 11px; font-weight: 700; padding: 3px 6px; border: 1px solid #D9DCEB; border-radius: 6px; color: rgba(56,59,65,.6); }
.cmdl { max-height: 380px; overflow: auto; padding: 6px; }
.cmdl button { display: flex; width: 100%; align-items: center; padding: 11px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.cmdl button em { margin-left: auto; font-style: normal; font-size: 12px; color: rgba(56,59,65,.5); }
.cmdl button.on { background: #F0F3F5; }
.toast { position: absolute; left: 50%; top: 70px; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-radius: 12px; background: #272C33; color: #fff; font-size: 14px; font-weight: 500; transform: translateX(-50%); animation: toast 2.8s ease both; pointer-events: none; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .5); white-space: nowrap; }
.toast.act { pointer-events: auto; animation-duration: 4.8s; }
.toast button { font-weight: 700; color: #FFB08F; text-decoration: underline; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -12px); } 8%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.call { position: absolute; right: 24px; bottom: 24px; z-index: 55; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; background: #272C33; color: #fff; border-radius: 16px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); animation: pop 240ms ease both; min-width: 340px; transition: opacity 200ms, transform 200ms; }
.call.out { opacity: 0; transform: translateY(10px); }
.call b { display: block; font-size: 14px; font-weight: 500; }
.call small { display: block; margin-top: 3px; font-size: 12px; color: #9FA7B7; }
.call > div { flex: 1; }
.call .end { width: 44px; height: 44px; border-radius: 50%; background: #E45353; display: grid; place-items: center; }
.call .end img { filter: brightness(0) invert(1); transform: rotate(135deg); }
.call .end:hover { background: #cf3f3f; }

/* Profile */
.ppage { display: flex; gap: 8px; padding: 1px; }
.pcard { width: 320px; flex: none; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; overflow: auto; align-self: flex-start; max-height: 100%; }
.ptop { padding: 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid #F0F1F5; }
.pbtns { display: flex; justify-content: space-between; }
.pimg { height: 200px; border-radius: 8px; background: #EBEEF2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; transition: background 150ms; }
.pimg:hover { background: #e2e6ec; }
.pimg .bird { transform: rotate(15deg); }
.pimg span { font-size: 13px; font-weight: 500; color: rgba(142,146,167,.7); text-align: center; line-height: 18px; }
.pimg u { color: #1D4ED8; opacity: 0; transition: opacity 150ms; }
.pimg:hover u { opacity: 1; }
.pimg.has img { width: 100%; height: 100%; object-fit: cover; }
.pfld { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid #F0F1F5; }
.pfld > div { flex: 1; min-width: 0; }
.pfld b { display: block; font-size: 14px; font-weight: 700; line-height: 18px; }
.pfld span { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: rgba(56,59,65,.6); line-height: 18px; }
.pfld .big { font-size: 18px; line-height: 22px; }
.pfld .tsm { font-size: 13px; font-weight: 700; }
.pfld .two { display: flex; justify-content: space-between; }
.pfld .two span { margin: 0; }
.pfld .tiles, .pfld [data-popper] { display: flex; gap: 12px; margin: 0; }
.pin { width: 100%; height: 34px; margin-top: 6px; padding: 0 10px; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 14px; font-weight: 500; }
.pin:focus { border-color: #FFB08F; }
.atile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px 0 12px 12px; background: rgba(29,78,216,.03); border: 1px solid rgba(29,78,216,.1); transition: background 150ms, transform 120ms; }
.atile:hover { background: rgba(29,78,216,.08); }
.atile:active { transform: scale(.94); }
.pmain { flex: 1; min-width: 0; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.ptabs { display: flex; gap: 6px; padding: 4px; margin: 4px; background: #EDF1F2; border-radius: 8px; }
.ptabs button { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; transition: background 150ms, color 150ms; }
.ptabs button:hover { background: #f7f8f9; }
.ptabs button.on { background: #383B41; color: #fff; font-weight: 700; }
.ptabs button.on img { filter: brightness(0) invert(1); }
.pbody { flex: 1; min-height: 0; overflow: auto; }
.psub { display: flex; gap: 12px; padding: 12px 12px 0; border-bottom: 1px solid #F0F1F5; position: sticky; top: 0; background: #fff; z-index: 2; }
.psub button { padding: 0 6px 16px; font-size: 14px; font-weight: 500; color: rgba(56,59,65,.6); border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 6px; transition: color 150ms, border-color 150ms; }
.psub button:hover { color: #383B41; }
.psub button.on { color: #383B41; border-bottom-color: #383B41; }
.psub em { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; background: #F0F1F5; line-height: 18px; }
.composer { display: flex; gap: 10px; align-items: center; margin: 16px 24px 0; padding: 10px; background: #F7F7F7; border-radius: 12px; }
.composer input, .composer select { flex: 1; height: 36px; padding: 0 12px; background: #fff; border: 1px solid #E6E8F3; border-radius: 8px; font-size: 14px; font-weight: 500; }
.composer select { flex: 0 0 200px; }
.composer .pl { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #D9DCEB; background: #fff; font-size: 13px; font-weight: 500; }
.composer .pl.on { background: #383B41; border-color: #383B41; color: #fff; }
.acts { padding: 12px 24px; display: flex; flex-direction: column; }
.act { display: flex; align-items: center; gap: 16px; padding: 15px 0; animation: pagein 200ms ease both; }
.act > img { flex: none; }
.ad { font-size: 14px; font-weight: 500; white-space: nowrap; }
.ad i { font-style: normal; color: rgba(56,59,65,.6); margin-left: 8px; }
.atx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 500; min-width: 0; }
.atx b { font-weight: 500; margin-right: 4px; }
.atx .gt { transform: rotate(90deg); margin: 0 2px; }
.atx .mut { color: rgba(56,59,65,.6); }
.aright { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.tag { padding: 3px 8px; border-radius: 8px; background: rgba(15,37,94,.05); border: 1px solid rgba(15,37,94,.1); font-size: 12px; font-weight: 700; color: rgba(15,37,94,.4); }
.tdiv { position: relative; height: 2px; background: #EDEDED; margin: 10px 0; }
.tdiv span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: 8px; background: #fff; font-size: 13px; font-weight: 500; color: rgba(56,59,65,.6); }
.aud { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 6px 0 16px; background: #F0F1F5; border-radius: 50px; margin-right: 10px; }
.aud [data-play] { width: 20px; height: 20px; display: grid; place-items: center; }
.aud.on [data-play] img { opacity: 0; }
.aud.on [data-play]::before { content: ''; position: absolute; width: 10px; height: 11px; border-left: 3px solid #383B41; border-right: 3px solid #383B41; box-sizing: border-box; }
.aud [data-play] { position: relative; }
.at { font-size: 14px; font-weight: 400; width: 40px; }
.wv { display: flex; align-items: center; gap: 2px; height: 22px; }
.wv i { width: 2px; border-radius: 1px; background: #B0B4C3; transition: background 150ms; }
.wv i.pl { background: #383B41; }
.aud.on .wv i { animation: wave .6s ease-in-out infinite alternate; }
.aud.on .wv i:nth-child(odd) { animation-delay: -.3s; }
@keyframes wave { to { transform: scaleY(.55); } }
.aud .more { display: grid; place-items: center; border-radius: 50%; }
.pempty { padding: 80px 0; text-align: center; }
.pempty b { display: block; font-size: 16px; font-weight: 700; }
.pempty span { display: block; margin-top: 8px; color: rgba(56,59,65,.6); }
.pother { padding: 24px; animation: pagein 200ms ease both; }
.psec h4, .pother h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #F0F1F5; border: 1px solid #F0F1F5; border-radius: 12px; overflow: hidden; }
.kv > div { background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kv span { font-size: 13px; font-weight: 500; color: rgba(56,59,65,.6); }
.kv b { font-size: 14px; font-weight: 500; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pperson, .paddr { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #E6E8F3; border-radius: 12px; }
.pperson > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pperson b, .paddr b { font-size: 14px; font-weight: 700; }
.pperson small, .paddr small { font-size: 12px; color: rgba(56,59,65,.6); }
.pperson span, .paddr span { font-size: 13px; font-weight: 500; }
.paddr { flex-direction: column; align-items: flex-start; gap: 6px; }
.padd { border: 1px dashed #D9DCEB; border-radius: 12px; font-size: 14px; font-weight: 700; color: #FF7441; display: grid; place-items: center; min-height: 72px; }
.padd:hover { background: #FFF7F3; }
.flist { display: flex; flex-direction: column; gap: 8px; }
.file { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid #E6E8F3; border-radius: 12px; font-size: 14px; }
.file b { flex: 1; font-weight: 500; }
.file span { color: rgba(56,59,65,.6); font-size: 13px; width: 120px; }
.file:hover { background: #F9FAFB; }
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fth { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.fth img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.fdrop { border: 1px dashed #D9DCEB; border-radius: 10px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(56,59,65,.6); text-align: center; padding: 20px; cursor: pointer; }
.ints { display: flex; flex-wrap: wrap; gap: 8px; }
.ints button { height: 36px; padding: 0 14px; border: 1px solid #D9DCEB; border-radius: 18px; font-size: 14px; font-weight: 500; transition: background 150ms; }
.ints button.on { background: #383B41; border-color: #383B41; color: #fff; }
.hint { margin-top: 16px; font-size: 13px; color: rgba(56,59,65,.6); }

/* Leads and opportunities */
.lpage { padding: 1px; background: #F5F5F5; }
.lcard { height: 100%; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.lh { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.lh h2 { flex: 1; font-size: 17px; font-weight: 700; }
.bt2 { height: 40px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background 150ms; }
.bt2:hover { background: #F9FAFB; }
.bt2 b { font-weight: 700; color: rgba(56,59,65,.6); }
.bt2.blue { background: #1D4ED8; border-color: #1D4ED8; color: #fff; padding-right: 16px; }
.bt2.blue:hover { background: #1a45c2; }
.bt2.blue img { filter: brightness(0) invert(1); }
.bt2.w308 { width: 308px; }
.bt2.w308 b { flex: 1; }
.lsearch { width: 430px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; border: 1px solid #D9DCEB; border-radius: 8px; }
.lsearch:focus-within { border-color: #8aa4ec; box-shadow: 0 0 0 3px rgb(29 78 216 / .1); }
.lsearch input { flex: 1; font-size: 14px; }
.lsearch input::placeholder { color: rgba(56,59,65,.45); }
.eyes { display: flex; }
.eyes button { width: 48px; height: 40px; display: grid; place-items: center; border: 1px solid #D9DCEB; background: #fff; }
.eyes button:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.eyes button:last-child { border-radius: 0 8px 8px 0; }
.eyes button.on { background: #383B41; border-color: #383B41; }
.lcard .stabs { margin: 6px 12px 0; align-self: stretch; }
.stages { display: flex; padding: 12px 52px 18px 12px; }
.hid { display: none; }
.step { position: relative; flex: 1 1 0; min-width: 0; height: 80px; padding: 16px 52px 6px 60px; margin-left: -44px; display: flex; flex-direction: column; text-align: left; --bg: #F5F5F5; }
.step:first-child { margin-left: 0; padding-left: 24px; }
.step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 40px; background: var(--bg); border: 1px solid #D9DCEB; border-right: 0; border-radius: 12px 0 0 12px; transition: background 150ms; }
.step::after { content: ''; position: absolute; top: 50%; right: 11.7px; width: 56.6px; height: 56.6px; margin-top: -28.3px; background: var(--bg); border-top: 1px solid #D9DCEB; border-right: 1px solid #D9DCEB; border-radius: 0 12px 0 0; transform: rotate(45deg); transition: background 150ms; }
.step b { position: relative; z-index: 1; font-size: 17px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.step small { position: relative; z-index: 1; margin-top: 4px; font-size: 12px; font-weight: 500; }
.step small span { margin-left: 4px; }
.step > i { position: relative; z-index: 1; display: block; height: 2px; border-radius: 6px; margin-top: auto; margin-bottom: 4px; }
.step:hover { --bg: #fff; }
.step:hover b { color: #000; }
.step.on { --bg: #fff; filter: drop-shadow(0 0 5px rgba(0,0,0,.1)); }
.lb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lt { width: 100%; }
.lt th { position: sticky; top: 0; z-index: 2; height: 38px; padding: 0 24px; background: #F0F3F5; border-top: 1px solid #E7EDF4; border-bottom: 1px solid #E7EDF4; font-size: 14px; font-weight: 500; color: rgba(56,59,65,.8); text-align: left; white-space: nowrap; }
.lt td { height: 61px; padding: 0 24px; font-size: 14px; font-weight: 500; border-bottom: 1px solid #E7EDF4; white-space: nowrap; }
.lt tbody tr[data-lrow] { cursor: pointer; }
.lt tbody tr:hover { background: #FAFBFC; }
.rav { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; }
.rav img { width: 100%; height: 100%; object-fit: cover; }
.rav.ph { background: #F0F3F5; }
.rav.ph img { width: 30px; height: 30px; }
.ln { display: flex; flex-direction: column; gap: 2px; }
.ln small { font-size: 12px; color: rgba(56,59,65,.6); }
.nm.own { gap: 12px; }
.vb { width: 25px; height: 22px; border-radius: 4px; display: grid; place-items: center; margin-left: -6px; }
.obs { font-size: 12px !important; color: rgba(56,59,65,.6); max-width: 196px; overflow: hidden; text-overflow: ellipsis; }
.src { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; color: #fff; }
.dt2 i { font-style: normal; font-size: 12px; color: rgba(56,59,65,.6); margin-left: 12px; }
.ic { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; border-radius: 6px; padding: 4px; margin: -4px; }
.ic:hover { background: #F0F3F5; }
.assign { padding: 4px 10px; border: 1px dashed #b9c4ec; border-radius: 8px; font-size: 12px; font-weight: 700; color: #1D4ED8; }
.assign:hover { background: rgb(29 78 216 / .05); }
.lpf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px; border-top: 1px solid #D9DCEB; }
.lpf > span { font-size: 12px; font-weight: 500; }
.pager.sm .pg { padding: 0 8px; }
.drawer { position: absolute; right: 0; top: 52px; bottom: 0; width: 460px; z-index: 45; background: #fff; border-left: 1px solid #E6E8F3; box-shadow: -30px 0 60px -30px rgb(0 0 0 / .3); padding: 24px; display: flex; flex-direction: column; gap: 18px; animation: slidein 240ms cubic-bezier(.3,.9,.3,1) both; transition: transform 200ms; }
.drawer.out { transform: translateX(100%); }
.dh { display: flex; align-items: center; gap: 14px; }
.dh .rav { width: 48px; height: 48px; }
.dh > div { flex: 1; }
.dh b { display: block; font-size: 18px; font-weight: 700; }
.dh small { display: block; margin-top: 4px; font-size: 13px; color: rgba(56,59,65,.6); }
.dprog { display: flex; gap: 4px; }
.dprog button { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 500; color: rgba(56,59,65,.5); }
.dprog i { height: 6px; border-radius: 3px; background: #F0F1F5; transition: background 150ms; }
.dprog button.on i, .dprog button:hover i { background: var(--c); }
.dprog button.on { color: #383B41; font-weight: 700; }
.drawer .kv { grid-template-columns: 1fr 1fr; }
.drawer h4 { font-size: 14px; font-weight: 700; }
.dnote { margin-top: -8px; padding: 14px; background: #F7F7F7; border-radius: 10px; font-size: 14px; line-height: 20px; }
.dact { display: flex; gap: 10px; margin-top: auto; }
.dact .blue { margin-left: auto; }

/* Opportunity */
.opage { display: flex; gap: 8px; padding: 1px; background: #F5F5F5; }
.ocard { width: 320px; flex: none; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 6px; box-shadow: -10px 1px 40px rgba(0,0,0,.06); min-height: 0; }
.ocard .back { align-self: flex-start; height: 40px; font-size: 12px; gap: 12px; }
.ophoto { height: 178px; border-radius: 8px; overflow: hidden; flex: none; }
.ophoto img { width: 100%; height: 100%; object-fit: cover; transition: object-position 400ms ease; }
.othumbs { display: flex; gap: 6px; }
.othumbs button { width: 46px; height: 42px; border-radius: 8px; overflow: hidden; opacity: .5; border: 1px solid #D9DCEB; transition: opacity 150ms; }
.othumbs button.on, .othumbs button:hover { opacity: 1; }
.othumbs img { width: 100%; height: 100%; object-fit: cover; }
.otabs { display: flex; flex-direction: column; gap: 6px; overflow: auto; padding: 6px 6px 6px 6px; margin: 0 -6px; min-height: 0; }
.otabs button { flex: none; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #D9DCEB; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background 150ms; }
.otabs button:hover { background: #F9FAFB; }
.otabs button.on { background: #383B41; border-color: #383B41; color: #fff; }
.otabs button.on img { filter: brightness(0) invert(1); }
.omain { flex: 1; min-width: 0; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.oh { display: flex; align-items: center; }
.oh > div { flex: 1; }
.oh h2 { font-size: 17px; font-weight: 700; }
.oh small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 14px; }
.ob { flex: 1; min-height: 0; overflow: auto; }
.ob.fade { animation: pagein 200ms ease both; }
.alert { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #FFF3CD; border: 1px solid #FFE69C; border-radius: 6px; color: #664D03; font-size: 13px; transition: background 250ms, border-color 250ms, color 250ms; }
.alert .al { font-size: 14px; font-weight: 700; text-decoration: underline; color: inherit; }
.alert span { flex: 1; }
.alert .gear { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.alert .gear:hover { background: rgb(0 0 0 / .05); }
.alert.busy span::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert.ok { background: #E6F4EA; border-color: #B7DFC3; color: #14532D; }
.mts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.mc { display: flex; flex-direction: column; gap: 12px; }
.mt { border: 1px solid #D9DCEB; border-radius: 8px; overflow: hidden; }
.mth { height: 48px; display: flex; align-items: center; padding: 0 24px; background: #F0F3F5; font-size: 14px; font-weight: 500; color: rgba(56,59,65,.8); }
.mtr { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 24px; border-top: 1px solid #E7EDF4; font-size: 14px; font-weight: 500; }
.mtl { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mtl.wrap { line-height: 20px; }
.mtv { font-size: 12px; color: rgba(56,59,65,.6); white-space: nowrap; }
.mtv.neg { color: #E45353; font-size: 14px; font-weight: 700; }
.mtv.pos { color: #03914a; font-size: 14px; font-weight: 700; }
.gb { width: 25px; height: 22px; border-radius: 4px; background: rgba(142,146,167,.8); display: grid; place-items: center; }
.yn { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; color: #fff; min-width: 34px; text-align: center; transition: background 150ms; }
.yn.y { background: rgba(3,181,78,.8); }
.yn.n { background: rgba(228,83,83,.8); }
.rc2 { padding: 2px 8px; border-radius: 4px; background: #F9E7E7; color: #C24747; font-size: 12px; font-weight: 500; }
.pc { padding: 2px 8px; border-radius: 4px; background: rgba(23,9,227,.1); color: #726CC0; font-size: 12px; font-weight: 500; }
.cb2 { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; margin-right: -6px; }
.cb2:hover { background: #F0F3F5; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fs2 { position: relative; padding: 18px; border: 1px solid #D9DCEB; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.fs2 i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: #F0F3F5; }
.fs2 b { font-size: 14px; font-weight: 700; }
.fs2 span { font-size: 12px; color: rgba(56,59,65,.6); }
.fs2.done i { background: rgba(3,181,78,.8); color: #fff; }
.fs2.next { border-color: #1D4ED8; box-shadow: 0 0 0 3px rgb(29 78 216 / .08); }
.fs2.next i { background: #1D4ED8; color: #fff; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; }
.gal button { border-radius: 10px; overflow: hidden; height: 220px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.gal button:hover img { transform: scale(1.06) !important; }
.gal .v360 { position: absolute; right: 12px; top: 12px; height: 36px; padding: 0 14px; border-radius: 18px; background: #272C33; color: #fff; font-size: 13px; font-weight: 700; }
.gal.spin button:not(.v360) img { animation: pan 3s ease-in-out infinite alternate; }
@keyframes pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.ob > .mt { max-width: 760px; }

/* Vouchers and fleets */
.vt td { height: 64px; }
.code { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .02em; }
.fleet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 4px 16px 16px; overflow: auto; }
.car { border: 1px solid #E6E8F3; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cimg { height: 196px; border-radius: 8px; overflow: hidden; }
.cimg img { width: 100%; height: 100%; object-fit: cover; }
.car b { font-size: 16px; font-weight: 700; }
.cs { align-self: flex-start; padding: 2px 8px; border-radius: 4px; background: rgba(253,172,58,.8); color: #fff; font-size: 12px; font-weight: 500; }
.cs.ok { background: rgba(3,181,78,.8); }
.car .bt { justify-content: center; }

/* App launcher */
.pop.launcher { left: auto; right: -560px; width: 835px; padding: 0; overflow: hidden; background: #fff; max-height: 900px; overflow-y: auto; }
.lsh { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #E5EAEB; }
.lx { width: 36px; height: 36px; font-size: 22px; border-radius: 8px; display: grid; place-items: center; color: #555; }
.lsr { flex: 1; display: flex; align-items: center; height: 38px; padding: 0 12px; background: #fff; border-radius: 8px; }
.lsr input { flex: 1; font-size: 14px; }
.lset { font-size: 14px; font-weight: 700; color: #1D4ED8; padding: 0 6px; }
.lgroups { padding: 6px 18px 12px; }
.lgr { padding: 4px 0 8px; border-radius: 8px; }
.lgr.drag { opacity: .4; }
.lgr h5 { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin: 8px 0; }
.grip { color: #B0B4B9; letter-spacing: -2px; cursor: grab; }
.lapps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lapp { height: 102px; border: 1px solid #E6E8F3; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 1px 3px rgb(0 0 0 / .05); transition: transform 150ms, box-shadow 150ms; }
.lapp:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgb(0 0 0 / .2); }
.lapp img { width: 44px; height: 44px; }
.lrec { background: #F5F5F5; border-top: 1px solid #E6E8F3; padding: 18px 12px 14px; }
.lrh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lrh b { flex: 1; font-size: 17px; font-weight: 500; }
.lst { width: 40px; height: 40px; border-radius: 8px; background: #383B41; color: #fff; display: grid; place-items: center; font-size: 16px; }
.lrh .bt { color: #1D4ED8; font-weight: 500; }
.lcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lcard2 { background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.lct { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.ext { font-size: 16px; color: #8E92A7; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; }
.ext:hover { background: #F0F1F5; }
.lcard2 b { font-size: 14px; font-weight: 700; }
.lcard2 p { font-size: 13px; color: rgba(56,59,65,.7); line-height: 18px; min-height: 36px; }
.lcf { display: flex; align-items: center; gap: 10px; padding: 12px 0; margin-top: 10px; border-top: 1px solid #F0F1F5; font-size: 13px; color: rgba(56,59,65,.6); }
.stars { display: flex; gap: 3px; }
.stars i { font-style: normal; font-size: 16px; color: transparent; -webkit-text-stroke: 1px #F5B100; cursor: pointer; transition: transform 120ms; }
.stars i.on { color: #F5B100; }
.stars i:hover { transform: scale(1.2); }

/* Component states from the Workleto library */
.rail [data-popper] { display: block; }
.logo { position: relative; display: block; border-radius: 16px 0 16px 16px; overflow: hidden; }
.logo .lhov { position: absolute; inset: 0; background: #FF7441; display: grid; place-items: center; opacity: 0; transition: opacity 150ms; }
.logo .lhov img { filter: brightness(0) invert(1); transform: scale(1.6); }
.logo:hover .lhov { opacity: 1; }
.tblogo { display: none !important; margin-right: 6px; }
.tblogo .logo { border-radius: 12px 0 12px 12px; }
.app.norail .rail { display: none; }
.app.norail .tb { left: 0; }
.app.norail .tblogo { display: inline-flex !important; }
.app.norail .frame { left: 6px; }
.pop.navm .mi { width: 26px; display: grid; place-items: center; }
.pop.navm .mi img { filter: brightness(0) invert(.25); }
.pop .mlogo { border-radius: 6px; }
.appsb .a2 { display: none; }
.appsb:hover .a1, .appsb.act .a1 { display: none; }
.appsb:hover .a2, .appsb.act .a2 { display: block; filter: brightness(0) invert(1); transform: scale(1.4); }
.pic { position: relative; width: 40px; height: 40px; overflow: hidden; display: grid; place-items: center; }
.pic > img:first-child { width: 40px; height: 40px; object-fit: cover; }
.pic.up { border-radius: 12px 0 0 12px; }
.pic.cp { border-radius: 0 12px 12px 0; }
.pic .ov { position: absolute; left: 4px; top: 4px; opacity: 0; transition: opacity 150ms; }
.pic:hover .ov, .pic.act .ov { opacity: 1; }
.ri:hover { background: rgba(56,59,65,.5); color: #fff; }
.ri:hover img { filter: brightness(0) invert(1); }
.ri.on:hover { background: #3B414E; }
.bt:hover, .bt2:hover, .pg:hover { background: #F3F3F3; border-color: #D7D7D7; }
.pg.on:hover { background: #383B41; border-color: #383B41; }
.bt.pri:hover { background: #f5652f; border-color: #f5652f; }
.bt.blue:hover, .bt2.blue:hover { background: #383B41; border-color: #383B41; }
.bt.act, .bt2.act { background: #383B41; border-color: #383B41; color: #fff; }
.bt.act img, .bt2.act img { filter: brightness(0) invert(1); }
.bt.act b, .bt2.act b { color: rgba(255,255,255,.75); }
.tbi > button.act { background: #3B414E; }
.drange { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.din { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: #fff; border: 1px solid #D9DCEB; border-radius: 8px; }
.din:focus-within { border-color: rgba(29,78,216,.5); box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
.din span { font-size: 12px; font-weight: 500; color: rgba(56,59,65,.6); width: 32px; }
.din input { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.din input::-webkit-calendar-picker-indicator { position: absolute; right: 8px; width: 22px; height: 22px; opacity: 0; cursor: pointer; }
.cpage.dark .din { background: #21272F; border-color: #3B414E; color: #dfe5ee; }
.cpage.dark .din img { filter: invert(.8); }
.ckb { display: inline-flex; align-items: center; cursor: pointer; }
.ckb input { position: absolute; opacity: 0; pointer-events: none; }
.ckb i { width: 16px; height: 16px; border: 1px solid #D9DCEB; border-radius: 4px; background: #fff; display: grid; place-items: center; flex: none; transition: background 120ms, border-color 120ms; }
.ckb:hover i { border-color: rgba(29,78,216,.5); }
.ckb input:focus-visible + i { box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
.ckb input:checked + i, .ckb input:indeterminate + i { background: #1D4ED8; border-color: #1D4ED8; }
.ckb input:checked + i::after { content: ''; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ckb input:indeterminate + i::after, .ckb input:checked + i.minus::after { content: ''; width: 8px; height: 2px; background: #fff; border: 0; transform: none; }
.ckb.row { display: flex; gap: 12px; padding: 9px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; }
.ckb.row:hover { background: #F0F3F5; }
.ckb.row span { flex: 1; }
.ckb.row small { font-size: 12px; color: rgba(56,59,65,.45); }
.ct th.ck, .ct td.ck { width: 44px; padding: 0 0 0 16px; }
.ct tbody tr.sel { background: #F3F6FD; }
.rc { position: relative; }
.bulk { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border-bottom: 1px solid #F0F1F5; border-radius: 12px 12px 0 0; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 160ms, transform 160ms; }
.bulk.on { opacity: 1; transform: none; pointer-events: auto; }
.bulk > b { font-size: 16px; font-weight: 500; margin-right: 8px; }
.bulk .ckb { margin-left: 12px; margin-right: 6px; }
.bt.dang { color: #E45353; }
.bt.dang:hover { background: rgba(228,83,83,.06); border-color: rgba(228,83,83,.4); }
.bulk .clr { margin-left: auto; font-size: 13px; font-weight: 700; color: #1D4ED8; }
.cpy { display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; border-radius: 4px; transition: color 150ms; }
.cpy .ci { opacity: 0; transition: opacity 150ms; }
.cpy:hover { color: #383B41; }
.cpy:hover .ci { opacity: .8; }
.cpy.done { color: #03914a; }
.ptabs em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 4px; background: rgba(23,9,227,.1); color: #726CC0; }
.ptabs button.on em { background: rgba(96,85,255,.25); border: 1px solid rgba(63,130,255,.3); color: #fff; }
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: rgba(29,78,216,.5); box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
.fl input.ok { border-color: #03B54E; }
.fl input.ok:focus { box-shadow: 0 0 0 4px rgba(25,135,84,.25); }
.fl input.bad { border-color: #E45353; }
.fl input.bad:focus { box-shadow: 0 0 0 4px rgba(220,53,69,.25); }
.stages.mini { padding: 8px 40px 12px 12px; }
.stages.mini .step { height: 50px; margin-left: -26px; padding: 7px 34px 3px 50px; }
.stages.mini .step:first-child { margin-left: 0; padding-left: 20px; }
.stages.mini .step::before { right: 25px; border-radius: 8px 0 0 8px; }
.stages.mini .step::after { width: 35.4px; height: 35.4px; margin-top: -17.7px; right: 7.3px; border-radius: 0 8px 0 0; }
.stages.mini .step b { font-size: 13px; line-height: 15px; }
.stages.mini .step small { margin-top: 1px; font-size: 11px; }
.stages.mini .step > i { margin-bottom: 1px; }
.lh h2 small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: rgba(56,59,65,.6); }
.inl { font-size: 12px; font-weight: 700; color: #1D4ED8; text-decoration: underline; }
.rav.ini { position: relative; overflow: visible; font-size: 11px; font-weight: 700; color: #383B41; }
.rav.ini .bd { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #03B54E; border: 2px solid #fff; }
.alert .x.sm { width: 28px; height: 28px; font-size: 20px; color: inherit; }
.alert .x.sm:hover { background: rgb(0 0 0 / .05); }
.alert { transition: opacity 200ms, transform 200ms, background 250ms, border-color 250ms, color 250ms; }
.alert.gone { opacity: 0; transform: translateY(-6px); }
.lapp { position: relative; }
.lapp .mv { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; opacity: 0; transition: opacity 150ms; cursor: grab; }
.lapp:hover { border-color: #DADDEB; box-shadow: 0 3px 6px rgba(0,0,0,.1); }
.lapp:hover .mv { opacity: .7; }
.lcard2 { transition: border-color 150ms, box-shadow 150ms; }
.lcard2:hover { border-color: #DADDEB; box-shadow: 0 3px 6px rgba(0,0,0,.1); }
.stars i { color: transparent; -webkit-text-stroke: 1px #FFBB00; }
.stars i.on { color: #FFBB00; }
.lsearch .dd { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.lsearch .dd:hover, .lsearch .dd.act { background: #F0F3F5; }
.cnt2 { font-style: normal; font-size: 12px; padding: 0 7px; border-radius: 4px; background: rgba(23,9,227,.1); color: #726CC0; margin-left: -4px; }
.bt2.act .cnt2 { background: rgba(255,255,255,.2); color: #fff; }
.lsplit { flex: 1; min-height: 0; display: flex; }
.lsplit > [data-lfbar] { flex: none; display: flex; }
.lsplit > .lb { flex: 1; min-width: 0; }
.fbar { width: 240px; margin: 0 12px 12px; background: #fff; border: 1px solid #E6E8F3; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; animation: pagein 180ms ease both; }
.fbar.small { width: 70px; align-items: center; gap: 4px; }
.fbh { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 10px; }
.fbh b { flex: 1; font-size: 14px; font-weight: 500; }
.fbh .mag { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.fbh .mag:hover { background: #F0F3F5; }
.fgi { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; background: #fff; border: 1px solid #D9DCEB; border-radius: 8px; }
.fgi:focus-within { border-color: rgba(29,78,216,.5); box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
.fgi input { flex: 1; min-width: 0; font-size: 14px; }
.fgi input::placeholder { color: rgba(56,59,65,.6); }
.fgi.grow { flex: 1; margin-left: -6px; }
.fbar .fclear { margin: 2px 0 6px; padding: 0 10px; color: #1D4ED8; }
.fgs { flex: 1; min-height: 0; overflow: auto; }
.fgh { width: 100%; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid #E7EDF4; }
.fgh span { flex: 1; font-size: 14px; font-weight: 700; transition: color 150ms; }
.fgh i { font-style: normal; font-size: 18px; font-weight: 500; color: rgba(142,146,167,.4); width: 14px; text-align: center; transition: color 150ms; }
.fgh:hover span { color: #000; }
.fgh:hover i { color: #1D4ED8; }
.fgh em { font-style: normal; font-size: 12px; padding: 0 7px; border-radius: 4px; background: rgba(23,9,227,.1); color: #726CC0; }
.fgc { padding: 6px 2px 8px; border-bottom: 1px solid #E7EDF4; animation: drop 150ms ease both; }
.fbf { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 4px 4px; }
.fbar.small .fbf { align-items: center; }
.fbs, .fbi, .fbar.small .fbf button { position: relative; width: 44px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.fbs { border: 1px solid #D9DCEB; margin: 6px 0; }
.fbi:hover, .fbs:hover, .fbar.small .fbf button:hover { background: #F0F3F5; }
.fbi.act::after { content: ''; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #1D4ED8; }
.pop.dmenu { width: 430px; padding: 0; overflow: hidden; border-color: #D9DCEB; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 20px 40px -20px rgb(27 31 36 / .3); }
.lsearch .pop.dmenu { left: -1px; top: 44px; }
.dms { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid #E7EDF4; }
.dms input { flex: 1; font-size: 14px; }
.dmd { height: 36px; display: flex; align-items: center; padding: 0 12px; background: #F0F3F5; font-size: 13px; color: rgba(56,59,65,.6); }
.dmo { display: flex; width: 100%; align-items: center; gap: 12px; height: 44px; padding: 0 12px; font-size: 14px; color: rgba(56,59,65,.6); }
.dmo:hover { background: #F0F3F5; }
.dmo.on { color: #383B41; font-weight: 500; }
.dmo em { margin-left: auto; font-style: normal; font-size: 12px; color: rgba(56,59,65,.5); }
.dmo .rd, .dmo .cbx { width: 16px; height: 16px; border: 1px solid #D9DCEB; background: #fff; flex: none; display: grid; place-items: center; transition: background 120ms, border-color 120ms, box-shadow 120ms; }
.dmo .rd { border-radius: 50%; }
.dmo .cbx { border-radius: 4px; }
.dmo.on .rd { border-color: #1D4ED8; box-shadow: inset 0 0 0 4px #1D4ED8; }
.dmo.on .cbx { background: #1D4ED8; border-color: #1D4ED8; }
.dmo.on .cbx::after { content: ''; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.othumbs button.on { opacity: 1; box-shadow: 0 0 0 2px #383B41; border-color: #383B41; }