/* Tail Lift Media CRM. Tokens, type sizes and shapes are the mock-ups' (mockups/build.py). Nothing under 12px. */
@font-face{font-family:Anton;src:url(fonts/anton-latin.woff2) format("woff2");font-display:block}
@font-face{font-family:Inter;src:url(fonts/inter-latin.woff2) format("woff2");font-weight:400 800;font-display:block}
*{box-sizing:border-box;margin:0;padding:0}
:root{--y:#FFD400;--y2:#FFF4B0;--y3:#FFFBE0;--k:#111;--ink:#1A1A17;--ink2:#55534B;--ink3:#86837A;--line:#E6E3D8;--line2:#EFECE3;
 --bg:#F7F6F1;--card:#FFFFFF;--side:#FBFAF6;--red:#C2410C;--redbg:#FFF1EA;--green:#15803D;--greenbg:#EAF7EE;--blue:#1D4ED8;--bluebg:#EEF3FF;--grey:#F1EFE8;
 --yline:#E9C200;--ydark:#5A4A00}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
body.modal-open{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.btn:focus-visible,.inp:focus-visible,.cbox:focus-visible{outline:2px solid var(--k);outline-offset:1px}
[hidden]{display:none!important}
.ic{flex:none;display:block}
.sp{flex:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink3)}
.small{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.late{color:var(--red)!important}
.center{text-align:center;justify-content:center}
code{font-family:inherit;font-size:12.5px;background:var(--grey);border-radius:5px;padding:1px 5px;word-break:break-all}

/* shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh;height:100dvh}
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.logo .tile,.mhead .tile{width:34px;height:34px;border-radius:8px;background:var(--y);display:grid;place-items:center;flex:none}
.logo .mark{width:24px;height:16px}
.logo .wm{font-family:Anton,Impact,sans-serif;font-size:17px;letter-spacing:.02em;line-height:1}
.logo .wm small{display:block;font-family:Inter,sans-serif;font-size:12px;letter-spacing:0;color:var(--ink3);font-weight:500;margin-top:3px}
.find{display:flex;align-items:center;gap:8px;height:36px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 10px;color:var(--ink3);margin-bottom:14px;font-size:13.5px;width:100%;text-align:left}
.find kbd{margin-left:auto;font-family:Inter,sans-serif;font-size:12px;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink3);background:var(--side)}
.navi{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--ink2);font-weight:500;margin-bottom:2px;cursor:pointer}
.navi:hover{background:var(--grey)}
.navi.on{background:var(--y);color:var(--k);font-weight:600}
.navi .n{margin-left:auto;font-size:12px;font-weight:600;background:var(--k);color:#fff;border-radius:10px;padding:1px 7px}
.navi.on .n{background:var(--k);color:var(--y)}
.navi.soon{opacity:.55;cursor:default}.navi.soon:hover{background:none}
.soonchip{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink3);border:1px solid var(--line);border-radius:8px;padding:0 6px}
.navsep{height:1px;background:var(--line);margin:10px 6px}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px 2px;border-top:1px solid var(--line)}
.me .who{flex:1;min-width:0}.me .who b{font-weight:600;font-size:13.5px;display:block}.me .who .muted{font-size:12px}
.av{width:28px;height:28px;border-radius:50%;background:var(--k);color:var(--y);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.av.h{background:#3B3A35;color:#fff}
.av.yl{background:var(--y2);color:var(--ydark)}.av.ne{background:#EFECE3;color:var(--ydark)}.av.gr{background:var(--grey);color:var(--ink2)}
.av.pa{background:var(--y2);color:var(--ydark)}
.main{overflow-y:auto;overflow-x:hidden;min-width:0;display:flex;flex-direction:column}
.mhead,.tabbar{display:none}
#view{display:flex;flex-direction:column;flex:1;min-width:0}
#view>*{flex:none}
.loading{display:flex;align-items:center;gap:10px;color:var(--ink3);padding:40px 28px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--k);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* page head */
.top{display:flex;align-items:center;gap:12px;padding:20px 28px 16px;flex-wrap:wrap}
.top .ttl{min-width:0}
.top h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.top .sub{color:var(--ink3);font-size:13.5px;margin-top:2px}

/* buttons, chips, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;cursor:pointer}
.btn:hover{background:#FBFAF6}
.btn.pri{background:var(--y);border-color:var(--yline);color:var(--k)}.btn.pri:hover{background:#FFDD33}
.btn.dark{background:var(--k);border-color:var(--k);color:#fff}.btn.dark:hover{background:#2C2B27}
.btn.danger{background:#fff;border-color:#F0B9A0;color:var(--red)}.btn.danger:hover{background:var(--redbg)}
.btn.sm{padding:0 11px;font-size:13px;border-radius:8px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.dotsb{padding:0 9px;min-width:36px}
.btn.sel{position:relative;padding:0 30px 0 34px;gap:8px;min-width:150px;justify-content:flex-start}
.btn.sel>.ic{position:absolute;left:12px;pointer-events:none}
.btn.sel select{appearance:none;-webkit-appearance:none;position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:0;border-radius:9px;background:transparent;font-weight:600;font-size:13.5px;cursor:pointer;padding:0 30px 0 34px}
.btn.sel::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.7px solid var(--ink3);border-bottom:1.7px solid var(--ink3);transform:rotate(45deg);pointer-events:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px}
.ch{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
.ch h2{font-size:15px;font-weight:650}
.ch .cnt{font-size:12.5px;color:var(--ink3);font-weight:500}
.ch>a{margin-left:auto;color:var(--ink2);font-size:13px;font-weight:500}
.ch>a:hover{text-decoration:underline}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--grey);color:var(--ink2);white-space:nowrap;border:0}
.chip.y{background:var(--y2);color:var(--ydark)}.chip.g{background:var(--greenbg);color:var(--green)}.chip.r{background:var(--redbg);color:var(--red)}.chip.b{background:var(--bluebg);color:var(--blue)}.chip.k{background:var(--k);color:#fff}
.btnchip{height:36px;padding:0 12px;border:1px solid var(--line);background:#fff;font-size:13px;border-radius:18px;cursor:pointer}
.btnchip:hover{background:var(--y3);border-color:#F2E29A}
.callb,.ghost{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;cursor:pointer}
.callb{background:var(--y);color:var(--k);border:1px solid var(--yline)}.callb:hover{background:#FFDD33}
.ghost{border:1px solid var(--line);color:var(--ink2);background:#fff}.ghost:hover{background:var(--grey)}
.ghost.sm{width:36px;height:36px}
.ibtn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink2);flex:none}
.ibtn:hover{background:var(--grey)}
.plusb{width:36px;height:36px;margin:-8px -8px -8px 0;border-radius:9px;display:grid;place-items:center;color:var(--ink3);flex:none;margin-left:auto}
.plusb:hover{background:var(--grey);color:var(--k)}
.emptyin{padding:14px 16px 16px;color:var(--ink3);font-size:13.5px}
.empty{padding:34px 20px;text-align:center;color:var(--ink3)}
.empty b{display:block;color:var(--ink);font-size:15px;font-weight:650;margin-bottom:4px}
.empty p{max-width:420px;margin:0 auto 12px;font-size:13.5px}
.empty.big{padding:70px 20px}
.card .empty{padding:26px 20px}
.err{color:var(--red);font-size:13px;min-height:0;margin:0 0 8px}
.err:empty{display:none}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line2);min-height:56px}
.row.link:hover,.row.inrow:hover{background:#FCFBF8}
.rmain{flex:1;min-width:0}
.row .t{font-weight:600}
.row .s{font-size:13px;color:var(--ink3);margin-top:2px}
.rmain .t,.rmain .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t a:hover,.row .s a:hover{text-decoration:underline}
.age{width:78px;text-align:right;font-size:13px;color:var(--ink3);flex:none}
.due{font-size:13px;color:var(--ink3);width:112px;text-align:right;flex:none}
.box{position:relative;width:20px;height:20px;border:1.5px solid #BDB9AC;border-radius:6px;flex:none;display:grid;place-items:center;background:#fff;cursor:pointer;margin-top:1px}
.box::after{content:"";position:absolute;inset:-10px}
.box.on{background:var(--k);border-color:var(--k);color:#fff}
.done{text-decoration:line-through;color:var(--ink3)}
a.ext{display:inline-flex;align-items:center;gap:5px}a.ext:hover{text-decoration:underline}

/* Today */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:0 28px}
.st{padding:14px 16px}.sl{font-size:13px;color:var(--ink2);font-weight:500}
.sv{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}
.sd{font-size:12.5px;color:var(--ink3)}.sd.g{color:var(--green)}
.tgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;padding:16px 28px 28px}
.col{display:grid;gap:16px;align-content:start;min-width:0}
.col>.card{overflow:hidden}

/* Pipeline */
.seg{display:flex;background:#EFEDE5;border-radius:9px;margin-right:4px;height:36px}
.seg button{height:36px;min-height:36px;padding:0 15px;border:3px solid transparent;background-clip:padding-box;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink2);white-space:nowrap}
.seg .on{background-color:#fff;color:var(--k);filter:drop-shadow(0 1px 1px rgba(0,0,0,.1))}
.board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;padding:4px 28px 28px;align-items:start;overflow-x:auto}
.kcol{background:#EFEDE5;border-radius:12px;padding:8px;min-height:120px;border:2px solid transparent}
.kcol.over{border-color:var(--y);background:var(--y3)}
.kh{display:flex;align-items:center;gap:8px;padding:6px 6px 10px;font-size:13.5px}
.kc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;box-shadow:0 1px 0 rgba(0,0,0,.03);cursor:grab}
.kc.dragging{opacity:.45}
.kc:hover{border-color:#D6D2C3}
.kctop{display:flex;gap:8px;align-items:flex-start}
.kt{flex:1;min-width:0}
.kc .t{font-weight:600;font-size:13.5px;line-height:1.3}.kc .s{font-size:12.5px;color:var(--ink3);margin-top:2px}
.nx{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:550;color:var(--ink2)}
.nx.r{color:var(--red)}.nx.g{color:var(--green)}
.kcfoot{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.kempty{border:1.5px dashed #D6D2C3;border-radius:10px;padding:18px 10px;text-align:center;color:var(--ink3);font-size:12.5px}
.tblwrap{margin:0 28px 28px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-weight:600;color:var(--ink3);font-size:12.5px;padding:0 16px;border-bottom:1px solid var(--line2);background:#FCFBF8;white-space:nowrap}
.thb{padding:10px 0;font-weight:600;color:var(--ink3);font-size:12.5px;min-height:36px}.thb:hover{color:var(--k)}
.arr{margin-left:4px;color:var(--k)}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr{cursor:pointer}.tbl tbody tr:hover{background:#FCFBF8}.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:focus-visible{outline:2px solid var(--k);outline-offset:-2px}
.tbl td a:hover{text-decoration:underline}
.nxt.r{color:var(--red)}

/* Inbox, firms, tasks */
.inlist{margin:0 28px 28px;overflow:hidden}
.inlist .row:first-child{border-top:0}
.inrow{width:100%;text-align:left;align-items:flex-start}
.inrow .prev{font-size:13.5px;color:var(--ink2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inrow.unread .t,.inrow.unread .prev{font-weight:650;color:var(--ink)}
.inmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.unb{min-width:22px;height:22px;border-radius:11px;background:var(--k);color:var(--y);font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.fsearch{display:flex;align-items:center;gap:8px;position:relative;color:var(--ink3)}
.fsearch .ic{position:absolute;left:11px;pointer-events:none}
.fsearch .inp{padding-left:34px;width:260px}
.tstack{display:grid;gap:16px;padding:0 28px 28px}
.tgroup{overflow:hidden}.tgroup .row:first-of-type{border-top:1px solid var(--line2)}
.tgroup.dim{opacity:.85}
.tgroup .ch h2.late{color:var(--red)}

/* Firm */
.fh{padding:18px 28px 16px;background:#fff;border-bottom:1px solid var(--line)}
.fhtop{display:flex;align-items:center;gap:14px}
.backb{display:none}
.logo2{width:46px;height:46px;border-radius:11px;background:var(--y2);color:var(--ydark);display:grid;place-items:center;font-weight:800;font-size:19px;flex:none}
.logo2.ne{background:#EFECE3}
.fhname{min-width:0}
.fhname h1{font-size:22px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
.crumb{font-size:13px;color:var(--ink3)}.crumb a:hover{text-decoration:underline}.sep{margin:0 3px}
.fhact{display:flex;gap:8px;flex:none}
.stages{display:flex;gap:4px;margin:16px 0 0}
.stg{flex:1;height:36px;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--ink3);background:var(--grey);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);text-align:center;padding:0 8px;white-space:nowrap;cursor:pointer}
.stg:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.stg:hover{background:#E8E5D9}
.stg.past{background:#2C2B27;color:#fff}.stg.past:hover{background:#3B3A35}
.stg.cur{background:var(--y);color:var(--k)}
.stg.lock{cursor:not-allowed;opacity:.6}
.stages.isl .stg{opacity:.6}
.stagesel{display:none}
.lostbar,.banner{display:flex;align-items:center;gap:10px;margin:12px 0 0;background:var(--redbg);border:1px solid #F5C9B3;color:var(--red);border-radius:10px;padding:8px 12px;font-size:13.5px;font-weight:550}
.lostbar span,.banner span{flex:1}
.banner{margin:14px 28px 0;background:var(--y3);border-color:#F2E29A;color:var(--ink)}
.nodeal{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--ink3)}
.tabs{display:flex;gap:22px;margin-top:14px}
.tabs span{padding:10px 0 12px;font-weight:600;font-size:13.5px;color:var(--ink3)}
.tabs .on{color:var(--k);box-shadow:inset 0 -2px 0 var(--k)}
.fbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:18px 28px 28px;align-items:start}
.fmain{grid-column:1;grid-row:1}.fside{grid-column:2;grid-row:1}
.fmain,.fside{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.fmeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13.5px;color:var(--ink3)}
.stagesel{display:inline-flex;position:relative;align-items:center}
.stagesel select{appearance:none;-webkit-appearance:none;border:1px solid var(--yline);border-radius:18px;background:var(--y2);font:inherit;font-weight:650;font-size:13px;color:var(--k);height:36px;padding:0 30px 0 14px;cursor:pointer}
.stagesel .ic{position:absolute;right:10px;pointer-events:none}
details.more summary{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-weight:650;font-size:15px;cursor:pointer;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary .ic{transform:rotate(180deg)}
details.more[open]{padding-bottom:8px}
.about{padding:4px 0 8px}
.kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;padding:6px 16px;font-size:13px;align-items:start}
.kv .k{color:var(--ink3);padding-top:1px}
.kv .v{font-weight:500;display:flex;align-items:flex-start;gap:5px;min-width:0;position:relative}
.kv .val{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;flex:1;overflow-wrap:anywhere}
.pen{position:absolute;right:-9px;top:-9px;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink3);background:#fff;opacity:0}
.kv:hover .pen,.pen:focus-visible{opacity:1}
.pen:hover{background:var(--grey);color:var(--k)}
@media (hover:none){.pen{opacity:.7}}
.ie{height:34px;font-size:13.5px}
.ch.pe{padding-top:18px}
.person{display:flex;align-items:center;gap:10px;padding:4px 16px}
.pmeta{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 0;min-height:36px;justify-content:center}
.pmeta b{font-weight:600;font-size:14px}.pmeta .muted{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta:hover b{text-decoration:underline}
.comp{overflow:hidden}
.ctabs{display:flex;gap:4px;padding:10px 12px 0}
.ctabs button{padding:0 12px;height:36px;border-radius:7px;font-weight:600;font-size:13px;color:var(--ink3)}
.ctabs button:hover{background:var(--grey)}
.ctabs .on{background:var(--grey);color:var(--k)}
.cto{display:flex;align-items:center;gap:8px;padding:8px 14px 0;font-size:13px;color:var(--ink3)}
.cto select{flex:1;max-width:340px}
.cbox{display:block;width:calc(100% - 28px);margin:8px 14px 0;min-height:64px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;resize:vertical;background:#fff}
.cbox:focus{border-color:var(--yline);outline:2px solid var(--y);outline-offset:0}
.cbox::placeholder{color:var(--ink3)}
.purp{display:flex;align-items:center;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.purp .plab{font-size:13px;color:var(--ink3);margin-right:2px}
.purp .req{color:var(--red);font-weight:600}
.purp button{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:18px;font-weight:600;font-size:13px;color:var(--ink2);background:#fff}
.purp button:hover{background:var(--y3)}
.purp button.on{background:var(--y);border-color:var(--yline);color:var(--k)}
.cfoot{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;flex-wrap:wrap}
.cinfo{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cfoot>.btn{flex:none}
.ptype{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink3)}
.ptype select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;font-weight:600;color:var(--k);padding:0 2px;min-height:36px;cursor:pointer}
.ptype .ic{color:var(--ink3)}
.cline{font-size:12.5px;color:var(--ink3)}.cline.bad{color:var(--red);font-weight:550}
.ccount{font-size:12.5px;color:var(--ink3)}.ccount:empty{display:none}.ccount.warn{color:#A16207}
.callform{padding:6px 14px 4px}
.tl{margin-top:4px;position:relative}
.ti{display:flex;gap:12px;margin-bottom:18px}
.tic{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);flex:none}
.tic.call{background:var(--y);border-color:var(--yline);color:var(--k)}
.tic.out{background:var(--k);border-color:var(--k);color:#fff}
.tic.miss{background:var(--redbg);border-color:#F5C9B3;color:var(--red)}
.ti.sys .tic{width:24px;height:24px;margin:3px 3px 0;background:var(--grey);border-color:var(--grey);color:var(--ink3)}
.tbody{flex:1;min-width:0}
.tt{display:flex;gap:10px;align-items:baseline;font-size:13.5px;margin-top:5px;flex-wrap:wrap}
.tt .muted{font-size:12.5px}
.ti.sys .tt{margin-top:4px}.ti.sys .tt b{font-weight:550;color:var(--ink2)}
.tx{font-size:13.5px;color:var(--ink2);margin-top:4px;line-height:1.5}.pre{white-space:pre-line}
.bub{margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word;max-width:640px}
.bub.out{background:#2C2B27;color:#F4F1E4;border-color:#2C2B27;border-top-left-radius:4px}
.bub.in{background:var(--y3);border-color:#F2E29A;border-top-left-radius:4px}
.tlink{color:var(--blue);font-weight:600;font-size:12.5px;text-decoration:underline;padding:6px 0;min-height:36px}
.dpad{padding:0 16px}
.monthly{display:block;padding:0}.monthly .big{font-size:24px;font-weight:700;letter-spacing:-.02em}
.dline{color:var(--ink3);font-size:12.5px;margin-top:4px;line-height:1.5}
.inl{position:relative;display:inline-flex;align-items:center;color:var(--ink2);font-weight:600}
.inl select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-weight:600;font-size:13px;color:var(--ink2);padding:6px 16px 6px 2px;cursor:pointer;min-height:36px}
.inl .ic{position:absolute;right:0;pointer-events:none}
.nextb{display:flex;gap:10px;margin:14px 0 14px;background:var(--y3);border:1px solid #F2E29A;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;width:100%;text-align:left;cursor:pointer;min-height:44px;align-items:flex-start}
.nextb:hover{background:var(--y2)}
.nextb.add{background:#fff;border:1.5px dashed #D6D2C3;color:var(--ink2);align-items:center;font-weight:600}
.tk{display:flex;gap:10px;padding:8px 16px;font-size:13.5px}

/* forms */
.inp{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 11px;font-size:14px;background:#fff;color:var(--ink);width:100%;display:block}
textarea.inp{height:auto;padding:9px 11px;line-height:1.45;resize:vertical}
.inp:focus{border-color:var(--yline);outline:2px solid var(--y);outline-offset:0}
.inp.sm{height:36px;max-width:100%}
.inp::placeholder{color:var(--ink3)}
.fld{display:block;margin-bottom:12px;min-width:0}
.fld>span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:550;color:var(--ink2);margin-bottom:5px}
.fld.sm{max-width:140px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2 .fld.sm{max-width:none}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;min-height:36px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--k);flex:none}
.chklist{display:grid;gap:2px}
.sw{display:flex;align-items:center;gap:12px;min-height:36px;margin-bottom:10px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw .knob{width:40px;height:24px;border-radius:12px;background:#CFCBBD;position:relative;flex:none;transition:background .15s}
.sw .knob::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+.knob{background:var(--k)}.sw input:checked+.knob::after{transform:translateX(16px);background:var(--y)}
.sw input:focus-visible+.knob{outline:2px solid var(--k);outline-offset:2px}
.swl{font-size:14px;font-weight:550}
.consent{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;background:var(--side)}
.consent .fld{margin:8px 0}
.outgrid,.reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ob{height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:14px}
.ob:hover{background:var(--y3)}
.ob.on{background:var(--y);border-color:var(--yline)}
.seg2{display:flex;background:#EFEDE5;border-radius:10px;padding:3px;margin-bottom:12px}
.seg2 button{flex:1;height:36px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink2);text-align:center}
.seg2 .on{background:#fff;color:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.nextrow{display:grid;grid-template-columns:1fr 200px;gap:12px}
.nextrow .fld.sm{max-width:none}
.chips2{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
.callstat{display:flex;align-items:center;gap:10px;background:var(--y3);border:1px solid #F2E29A;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:6px}
.dotlive{width:10px;height:10px;border-radius:50%;background:#16A34A;flex:none;box-shadow:0 0 0 4px rgba(22,163,74,.2);animation:pulse 1.4s ease-in-out infinite}
.dotlive.off{background:var(--ink3);box-shadow:none;animation:none}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(22,163,74,.05)}}
.callwho{font-size:13px;margin:0 0 12px}
.sform{padding:0 16px 14px}
.sfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px}
.counter{font-size:12.5px;color:var(--ink3);margin:-6px 0 12px}.counter.warn{color:#A16207}
.hook{border-top:1px solid var(--line2);padding:14px 16px}.hh{display:flex;align-items:center;gap:8px}
.hook p{margin:6px 0}
.sform>p{margin:0 0 10px;line-height:1.45}
.inl2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.note{padding:10px 16px 14px;color:var(--ink3);border-top:1px solid var(--line2)}
.once{display:grid;gap:8px;margin-bottom:12px}
.onceline{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;background:var(--grey);border-radius:10px;padding:8px 10px}
.onceline .muted{grid-column:1/-1}.onceline code{background:none;padding:0;font-size:13.5px;font-weight:600;user-select:all}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:0 28px 28px;align-items:start}
.sc{overflow:hidden}.sc .ch{padding-bottom:12px}
.urow .av{width:32px;height:32px}
.attach{padding:0 16px 14px}.attach .row2{margin-top:4px}

/* modals, menus, toasts, search */
.mback{position:fixed;inset:0;background:rgba(17,17,17,.42);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:14px;width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.modal.small{width:min(460px,100%)}
.mh{display:flex;align-items:center;gap:8px;padding:16px 18px 6px}
.mh h2{font-size:17px;font-weight:700;letter-spacing:-.01em;flex:1}
.mb{padding:8px 18px 18px;overflow-y:auto}
.mtext{font-size:14px;color:var(--ink2);line-height:1.5;margin:0 0 14px}
.mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.mfoot .lft{margin-right:auto}
.menu{position:fixed;z-index:120;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.16);padding:6px;min-width:210px}
.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:550;text-align:left}
.menu button:hover,.menu button:focus-visible{background:var(--grey)}
.menu .dn{color:var(--red)}
.msep{height:1px;background:var(--line2);margin:4px 6px}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:200;display:grid;gap:8px;width:min(520px,calc(100% - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--k);color:#fff;border-radius:12px;padding:10px 12px 10px 16px;font-size:13.5px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast span{flex:1}.toast.err{background:#7C2D12}
.toast .tlink{color:var(--y);padding:0;min-height:36px}
.toast .tx{width:36px;height:36px;display:grid;place-items:center;color:#bbb;border-radius:8px;flex:none}
.mback.search{align-items:flex-start;padding-top:12vh}
.sbox{width:min(600px,100%)}
.sin{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);color:var(--ink3)}
.sin input{flex:1;height:40px;border:0;font-size:16px;background:none;color:var(--ink)}
.sin input:focus{outline:none}
.sres{max-height:52vh;overflow-y:auto;padding:6px}
.shint{padding:22px 14px;color:var(--ink3);font-size:13.5px;text-align:center}
.shit{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;border-radius:10px;text-align:left}
.shit.on,.shit:hover{background:var(--y3)}
.stx{flex:1;min-width:0;display:flex;flex-direction:column}.stx b{font-weight:600}.stx span{font-size:12.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sign in */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.lcard{width:min(400px,100%);padding:28px 26px 22px}
.lcard .logo{justify-content:center;padding-bottom:18px}
.lcard h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.lcard .btn{margin:4px 0 14px;height:44px}

/* ---------- tablet and small laptops ---------- */
@media (max-width:1180px){
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .sgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .fhact .btn{padding:0 10px}
  .stg{font-size:12px;padding:0 4px}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  body{font-size:15px}
  .app{display:block;height:auto;min-height:100vh}
  .side{display:none}
  .main{display:block;overflow:visible;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  #view{display:block}
  .mhead{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:20;background:var(--bg);padding:calc(8px + env(safe-area-inset-top)) 12px 10px 16px}
  .mhead .tile{width:30px;height:30px;margin-right:4px}.mhead .mark{width:21px;height:14px}
  .mhead h1{font-size:17px;font-weight:700}
  .mhead .ibtn,.avbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
  body.nohead .mhead{display:none}
  .top{display:none}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(78px + env(safe-area-inset-bottom));padding:9px 0 env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line);grid-template-columns:repeat(4,1fr)}
  .tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink3);font-size:12px;font-weight:600;position:relative;min-height:44px}
  .tab.on{color:var(--k)}
  .tab.on svg{background:var(--y);border-radius:8px;padding:3px;width:30px;height:30px;margin:-4px 0 -4px}
  .tab .ti{display:block}
  .tdot{position:absolute;top:0;left:calc(50% + 6px);width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid #fff}
  #toasts{bottom:calc(92px + env(safe-area-inset-bottom))}

  .btn,.ghost,.callb,.ibtn,.plusb,.ctabs button,.purp button,.btnchip,.seg2 button,.stg,.tlink{min-height:44px}
  .btn{height:44px}
  .btn.sm{height:44px}
  .ghost,.callb,.ghost.sm{width:44px;height:44px}
  .callb.big{width:44px;height:44px;border-radius:12px}
  .inp,.inp.sm{height:44px;font-size:16px}
  textarea.inp,.cbox{font-size:16px}
  .inp.ie{height:44px}
  .box::after{inset:-14px}
  .fld.sm{max-width:none}
  .seg,.seg button{height:44px;min-height:44px}

  .phone-pad{padding-bottom:8px}
  .pst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
  .pst div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .pst b{display:block;font-size:22px;line-height:1.2}.pst span{font-size:12.5px;color:var(--ink3)}
  .ptitle{font-weight:700;font-size:15px;padding:16px 16px 8px;display:flex;align-items:center;gap:8px}
  .psub{padding:0 16px 8px;font-size:13px}
  .pr{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 16px 8px}
  .pr.col{flex-direction:column;align-items:stretch;gap:8px}
  .pmain{flex:1;min-width:0;display:block}
  .pr .t{font-weight:600;font-size:15px}.pr .s{font-size:13px;color:var(--ink3);margin-top:2px}
  .pr .chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
  .pr .nx{margin-top:8px}
  .prfoot{display:flex;align-items:center;gap:8px}
  .prfoot{flex-wrap:wrap}
  .prfoot .sp{min-width:0}
  .stagepick{position:relative;display:inline-flex;align-items:center;height:44px;margin-left:auto}
  .stagepick select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:15px;height:44px;padding:0 34px 0 12px;color:var(--ink)}
  .stagepick .ic{position:absolute;right:12px;pointer-events:none}
  .empty-pr{display:block;text-align:center;padding:4px}
  .pfilters{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 4px}
  .sel2 span{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:3px}
  .phone-pad .fsearch{margin:0 16px 12px;display:flex}.phone-pad .fsearch .inp{width:100%}
  .phone-pad>.seg{margin:0 16px 12px}.phone-pad>.seg button{flex:1}
  .phone-pad>.tgroup,.phone-pad>.card{margin:0 16px 12px}
  .phone-pad>.empty{margin:20px 16px}
  .inlist{margin:0 16px 16px}.inrow{min-height:64px}
  .row{padding:10px 12px}.due{width:auto;max-width:96px;font-size:12.5px}
  .row .rmain .t,.row .rmain .s{white-space:normal;overflow:visible}
  .inrow .prev{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tstack{padding:0 16px 20px}
  .tblwrap{margin:0 16px 20px}

  /* a firm on a phone: head, actions, stage, then deal, composer, timeline, about */
  .fh{padding:calc(6px + env(safe-area-inset-top)) 12px 12px}
  .fhtop{flex-wrap:wrap;gap:8px 10px}
  .backb{display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;color:var(--ink2);border-radius:12px;flex:none}
  .logo2{width:38px;height:38px;border-radius:10px;font-size:16px}
  .fhname{flex:1;min-width:0}.fhname h1{font-size:18px;white-space:nowrap}.crumb{font-size:12.5px}
  .fhtop>.sp{display:none}
  .fhact{width:100%;display:grid;grid-template-columns:1.5fr 1fr 1fr 44px;gap:8px}
  .fhact .btn{padding:0 8px}
  .fhact .btn.pri{order:-1}
  .inl select{min-height:44px}
  .pmeta{min-height:44px}
  .fhact .btn.dotsb{min-width:44px;padding:0}
  .stages{display:none}.tabs{display:none}
  .stagesel{display:flex;position:relative;align-items:center;height:44px}
  .stagesel select{appearance:none;-webkit-appearance:none;border:1px solid var(--yline);border-radius:12px;background:var(--y2);font-weight:650;font-size:16px;height:44px;padding:0 40px 0 14px;color:var(--ink)}
  .stagesel .ic{position:absolute;right:14px;pointer-events:none}
  .lostbar,.banner{margin:12px 12px 0}
  .fh .lostbar{margin:12px 0 0}
  .fbody{display:flex;flex-direction:column;padding:12px 12px 20px;gap:12px}
  .fleft,.fmid,.fright{display:grid;gap:12px;grid-column:auto;grid-row:auto}
  .fright{order:1}.fmid{order:2}.fleft{order:3}
  .kv{grid-template-columns:96px minmax(0,1fr)}
  .pen{opacity:.8;width:44px;height:44px;right:-13px;top:-13px;background:none}
  .kv .val{padding-right:30px}
  .cfoot{flex-wrap:wrap}.cinfo{flex:1 1 100%}
  .nextrow{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .cbox{width:calc(100% - 28px)}
  .cfoot .btn{flex:none}
  .ptype select{min-height:44px;font-size:16px}
  .person{padding:2px 12px}
  .login{padding:16px}

  /* sheets: pop-ups rise from the bottom */
  .mback{align-items:flex-end;padding:0}
  .modal,.modal.small{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .mback.search{align-items:flex-start;padding:0}
  .mback.search .modal{border-radius:0 0 18px 18px;max-height:88vh}
  .sres{max-height:70vh}
  .menu{min-width:220px}
  .menu button{min-height:48px}
  .mfoot{flex-direction:column-reverse;position:sticky;bottom:0;background:#fff;padding-top:10px}.mfoot .btn{width:100%}.mfoot .lft{margin:0}
  .mb{padding-bottom:12px}
  .outgrid,.reasons{grid-template-columns:1fr 1fr}
  .sgrid{padding:0 16px 20px}
  .sfoot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}