/* Modus, the product inside the demo: the office (fluid, a query container) and the client's phone app.
   Light and layered: a grey-blue ground, white surfaces raised by soft graded shadows, and deep blue for the
   one thing that matters on each screen (the sidebar, the cycle strip, the primary action). Heebo throughout. */
:root{
  --ink:#0D1A44; --ink2:#16307E; --canvas:#EEF1F6; --col:#E4E9F1; --card:#FFFFFF; --soft:#F7F9FC; --soft2:#F2F5FA; --line:#EEF1F6; --line2:#E1E6EE;
  --fg:#0E1726; --fg2:#3D4A5C; --mut:#5B6779; --onink:#DCE5FF; --onink2:#9FB2E6;
  --blue:#1B3FA0; --blueD:#142F7A; --blue2:#4F7BFF; --blueS:#E8EEFC;
  --green:#0F7A4F; --greenT:#0B5E3C; --greenS:#E3F5EC; --deep:#0B5E3C;
  --amber:#E08A00; --amberT:#8A4E00; --amberS:#FFF1DB; --gold:#FBBF5A;
  --red:#D92D20; --redT:#B42318; --redS:#FDECEA;
  --violet:#5B3DB8; --violetT:#4A2F9E; --violetS:#F0EBFC;
  --sh1:0 1px 2px rgba(16,24,40,.05),0 8px 24px -10px rgba(16,24,40,.12);
  --sh2:0 1px 2px rgba(16,24,40,.05),0 14px 32px -12px rgba(16,24,40,.18);
  --navy:radial-gradient(80% 160% at 100% 0%,rgba(74,114,240,.5) 0%,rgba(74,114,240,0) 60%),linear-gradient(100deg,#16307E 0%,#0D1A44 100%);
  --font:'Heebo', 'Segoe UI', Arial, sans-serif; --mono:'Heebo', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
.cpa-office *,.cpa-phone *,.cpa-overlay *{box-sizing:border-box}
.cpa-office,.cpa-phone{color:var(--fg);font-family:var(--font);font-size:15px;direction:rtl;line-height:1.45}
.cpa-office{background:var(--canvas)}
.cpa-office h1,.cpa-office h2,.cpa-office h3,.cpa-phone h1,.cpa-phone h2{line-height:1.2}
.cpa-office :is(button,input,select,textarea),.cpa-phone :is(button,input,select,textarea),.cpa-overlay :is(button,input,select,textarea){font:inherit;color:inherit}
.cpa-office button,.cpa-phone button,.cpa-overlay button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue2);outline-offset:2px}
.m{font-variant-numeric:tabular-nums;letter-spacing:0}
.sb{font-size:13px;color:var(--mut);line-height:1.5}
a{color:var(--blue)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* office shell: a deep-blue sidebar with the R.D.M spiral, and the screens beside it */
.olay{display:flex;align-items:stretch;min-height:100%}
.oside{position:relative;overflow:hidden;flex:0 0 236px;margin:12px 0 12px 12px;margin-inline-start:12px;margin-inline-end:0;padding:22px 12px 14px;border-radius:22px;color:var(--onink);
  background:radial-gradient(130% 50% at 100% 0%,rgba(74,114,240,.55) 0%,rgba(74,114,240,0) 60%),radial-gradient(120% 40% at 0% 100%,rgba(31,63,170,.6) 0%,rgba(31,63,170,0) 70%),linear-gradient(180deg,#152C78 0%,#0B1638 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.05),0 18px 40px -16px rgba(11,22,56,.6);display:flex;flex-direction:column;gap:12px;align-self:stretch;z-index:1}
.oside>*{position:relative}
.oside .swm{position:absolute;width:340px;height:340px;bottom:-140px;inset-inline-start:-120px;opacity:.09;pointer-events:none}
.obrand{display:flex;align-items:center;gap:12px;padding:0 8px}
.obrand .slogo{width:44px;height:44px;flex:none;filter:drop-shadow(0 4px 10px rgba(91,134,255,.45))}
.obrand div{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.wm{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:27px;letter-spacing:.04em;color:#FFFFFF}
.wmt{font-size:9px;letter-spacing:.08em;color:var(--onink2)}
.osys{display:flex;flex-direction:column;line-height:1.25;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.osys b{color:#FFFFFF;font-weight:800;font-size:16px}
/* Search across the system, at the top of the sidebar */
.gsrch{display:flex;align-items:center;gap:8px;min-height:40px;margin-top:10px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.gsrch:focus-within{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px #9FB8FF}
.gsrch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#FFFFFF;font:inherit;font-size:14px}
.gsrch input::placeholder{color:rgba(255,255,255,.62)} .gsrch input:focus-visible{outline:none} .gsrch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.srow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:48px;padding:8px 10px;border:0;border-radius:10px;background:transparent;text-align:right;font:inherit;color:var(--fg);cursor:pointer}
.srow:hover{background:var(--soft)} .srow[disabled]{cursor:default}
.osys span{font-size:12px;color:var(--onink2)}
.onav{display:flex;flex-direction:column;gap:2px}
.onav .ni{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--onink);font-size:15px;font-weight:500;text-align:right;width:100%}
.onav .ni.sm{min-height:40px}
.onav .ni:hover{background:rgba(255,255,255,.08)}
.onav .ni[aria-current="page"]{background:#FFFFFF;color:var(--blueD);font-weight:700;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
.onav .nd{width:8px;height:8px;border-radius:3px;flex:none}
.onav .bdg{margin-inline-start:auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--blue2);color:#FFFFFF;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(79,123,255,.25)}
.onav .ni[aria-current="page"] .bdg{background:var(--blue)}
.onav .nsoon{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--gold)}
.onav .nh{padding:16px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.12em;color:#8FA6E8}
.ome{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ome div{display:flex;flex-direction:column;line-height:1.25}
.ome b{color:#FFFFFF;font-weight:700}
.ome span{font-size:12px;color:var(--onink2)}
.ome .av{box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.obody{flex:1;min-width:0;position:relative;overflow:hidden}
.obody>.bwm{position:absolute;width:900px;height:900px;top:-320px;inset-inline-end:-320px;opacity:.045;pointer-events:none}
.obody>:not(.bwm){position:relative}
@container office (max-width: 900px){
  .olay{flex-direction:column}
  .oside{flex:none;margin:10px 10px 0;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}
  .oside .osys,.oside .ome,.oside .swm{display:none}
  .onav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  .onav .ni{width:auto;min-height:40px}
  .onav .nh{display:none}
}
/* who is signed in: the bookkeeper or the partner */
.who{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:12px;padding:3px}
.who button{flex:1;min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--onink);font-size:13px;font-weight:700;white-space:nowrap}
.who button[aria-pressed="true"]{background:#FFFFFF;color:var(--blueD)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#FFFFFF;flex:0 0 34px}
.band{color:var(--fg);padding:28px 28px 18px;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.band h1{margin:0 0 4px;font-size:30px;font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:var(--fg)}
.band p{margin:0;color:var(--fg2);font-size:15px}
.band>*{flex:0 0 auto!important}
.band .m[style*="onink2"]{color:var(--mut)!important}
.omain{padding:0 28px 36px;display:flex;flex-direction:column;gap:20px;position:relative}
.omain.flat{padding-top:20px}
.card{background:var(--card);border-radius:20px;box-shadow:var(--sh1)}
.ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch h2{margin:0;font-size:18px;font-weight:800}
/* what needs you today */
.today{overflow:hidden}
.tr{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.tr.hot{background:linear-gradient(90deg,rgba(232,238,252,0) 0%,var(--blueS) 100%);border-top-color:#DCE5FA;padding-block:14px}
.tra{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px}
.trd{position:relative;width:42px;height:42px;flex:none}
.trd i{position:absolute;border-radius:6px;background:#FFFFFF}
.trd i:first-child{inset:3px 6px 0 0;box-shadow:0 0 0 1px #D5DEF5;transform:rotate(-7deg)}
.trd i:last-child{inset:0 0 3px 6px;box-shadow:0 0 0 1px #AFC2F3,0 6px 12px -6px rgba(27,63,160,.45);background:linear-gradient(#1B3FA0,#1B3FA0) 6px 9px/60% 3px no-repeat,linear-gradient(#E1E6EE,#E1E6EE) 6px 15px/75% 2px no-repeat,linear-gradient(#E1E6EE,#E1E6EE) 6px 20px/55% 2px no-repeat,#FFFFFF}
.trt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column}
.trt b{font-weight:700;font-size:16px}
.tr.hot .trt b{font-weight:800}
.trt span{font-size:14px;color:var(--fg2)}
.pill .pd{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.row2{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.grow{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:22px}
.side{flex:1 1 330px;min-width:0;display:flex;flex-direction:column;gap:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:700;border:0;background:var(--soft2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.btn:hover{background:#E9EEF6}
.btn.pri{background:var(--blue);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px -8px rgba(27,63,160,.75)}
.btn.pri:hover{background:var(--blueD)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.ghost{background:var(--soft2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.kb{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:6px;background:rgba(255,255,255,.2);font-family:var(--mono);font-size:11px}
.kb.d{background:#EEF1F6;color:#4A5A72;box-shadow:inset 0 -1px 0 var(--line2)}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.p-ok{background:var(--greenS);color:var(--greenT)} .p-pend,.p-decl{background:var(--blueS);color:var(--blueD)} .p-ret{background:var(--redS);color:var(--redT)} .p-miss{background:var(--soft2);color:var(--fg2)} .p-q{background:var(--violetS);color:var(--violetT)} .p-qa{background:var(--blueS);color:var(--blueD)} .p-amb{background:var(--amberS);color:var(--amberT)}

/* the cycle strip: the month, in deep blue, one line high */
.tl{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px 20px 12px;border-radius:18px;color:#FFFFFF;background:var(--navy);box-shadow:0 2px 4px rgba(13,26,68,.12),0 14px 30px -14px rgba(13,26,68,.55)}
.tl .sb{color:rgba(255,255,255,.8)!important}
.tlTrack{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.12)}
.tlTrack span{position:absolute;top:0;bottom:0}
.tlLbl{position:relative;height:18px;font-size:12px;color:var(--onink2)}
.tlLbl span{position:absolute;white-space:nowrap}

/* action cards */
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@container office (max-width: 1000px){.acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container office (max-width: 520px){.acts{grid-template-columns:1fr}}
.acts.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@container office (max-width: 1000px){.acts.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container office (max-width: 520px){.acts.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.act{padding:20px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.act.hot{box-shadow:inset 0 0 0 2px var(--blue),var(--sh2)}
.ah{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--fg)}
.big{font-family:var(--mono);font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.act.hot .big{color:var(--blue)}
.act .btn{margin-top:auto}
.thS{position:absolute;width:44px;height:58px;border-radius:5px;background:#FFFFFF;box-shadow:0 1px 3px rgba(20,40,70,.25);padding:6px;display:flex;flex-direction:column;gap:3px}
.thS i,.th i{display:block;height:3px;border-radius:2px;background:#DCE2EA}

/* stage bar */
.sbar{display:flex;height:34px;border-radius:10px;overflow:hidden;gap:3px}
.sbar div{display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-family:var(--mono);font-size:14px;font-weight:700;min-width:24px;border-radius:6px}
.lgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
@container office (max-width: 820px){.lgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line2);text-align:right;border:0;min-width:0}
.lg:hover{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line2),var(--sh1)}
.lg b{display:flex;align-items:center;gap:8px;font-size:14px}
.lg b i{width:10px;height:10px;border-radius:3px;display:block}

.fd{display:grid;grid-template-columns:96px 34px minmax(0,1fr);gap:12px;align-items:center;min-height:54px;border-top:1px solid var(--line)}
.fd.new{background:linear-gradient(90deg,transparent,var(--blueS));animation:fl 1.2s ease-out}
@keyframes fl{from{background-color:#DCE6FF}}
.fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.dl{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-top:1px solid #EEF1F6}
.dt{width:58px;height:58px;border-radius:14px;background:#F2F5F9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}

/* flow board */
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@container office (max-width: 1000px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container office (max-width: 520px){.cols{grid-template-columns:1fr}}
.cols.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cols.six .col{padding:10px}
@container office (max-width: 1180px){.cols.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container office (max-width: 700px){.cols.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container office (max-width: 520px){.cols.six{grid-template-columns:1fr}}
.col{background:var(--col);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:380px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.04)}
.colh{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;font-size:14px;font-weight:800;color:var(--fg2)}
.cnt{font-family:var(--mono);font-size:12px;background:#FFFFFF;border-radius:999px;padding:2px 9px;color:#4A5A72}
.fcard{background:#FFFFFF;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;border:0;text-align:right;width:100%;box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px -10px rgba(16,24,40,.25)}
.fcard:hover{box-shadow:0 0 0 2px var(--blue2),0 10px 20px -10px rgba(16,24,40,.3)}
.fcard.stack{box-shadow:0 1px 2px rgba(20,40,70,.08),0 5px 0 -2px #FFFFFF,0 5px 0 -1px #C9D2DD,0 10px 0 -4px #FFFFFF,0 10px 0 -3px #C9D2DD,0 14px 20px -12px rgba(20,40,70,.4)}
.bar{display:flex;gap:3px}.bar span{flex:1;height:6px;border-radius:3px;background:#E2E7EE}
.b-ok{background:var(--green)!important}.b-pend,.b-decl,.b-qa{background:var(--blue)!important}.b-ret{background:var(--red)!important}.b-q{background:var(--violet)!important}
.nm{font-weight:800;font-size:15px;color:var(--fg)}

/* client file: a raised white card with the name, the details, the group switch and the tabs */
.cband{margin:22px 28px 0;padding:22px 26px 0;border-radius:24px;background:#FFFFFF;box-shadow:var(--sh2);display:flex;flex-direction:column;gap:16px;color:var(--fg)}
.cband h1{color:var(--fg)!important;letter-spacing:-.02em}
.cband nav[aria-label="פירורי לחם"],.cband nav[aria-label="פירורי לחם"] button{color:var(--mut)!important}
.cband nav[aria-label="פירורי לחם"] span{color:var(--fg)!important;font-weight:600}
.cband [aria-label="הצוות בתיק"] div{color:var(--mut)!important}
.mono2{width:68px;height:68px;border-radius:20px;background:linear-gradient(150deg,#2A4FBF,#13286E);display:grid;place-items:center;color:#FFFFFF;font-size:24px;font-weight:800;box-shadow:0 10px 22px -10px rgba(19,40,110,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.mc{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:8px;background:var(--soft2);color:var(--fg2);font-size:13px;font-weight:600}
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:0 -26px;padding:0 18px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 24px 24px}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border:0;background:transparent;color:var(--fg2);font-size:15px}
.tab[aria-selected="true"]{color:var(--blue);font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}
.ir{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 20px;border-top:1px solid #EEF1F6}
.ir .acts2{grid-column:2 / -1;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
@container office (min-width: 860px){.ir{grid-template-columns:52px minmax(0,1fr) auto auto}.ir .acts2{grid-column:auto}}
.th{width:52px;height:64px;border-radius:6px;background:#FFFFFF;box-shadow:0 1px 3px rgba(20,40,70,.22);padding:7px;display:flex;flex-direction:column;gap:4px;overflow:hidden;position:relative}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th.e{background:transparent;box-shadow:none;border:1.5px dashed #B9C6D6}
.bub{margin:-4px 20px 14px;margin-inline-start:86px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:14px;line-height:1.55;color:var(--fg2)}
.ac{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;position:relative;padding-bottom:14px}
.ac::before{content:'';position:absolute;inset-inline-start:10px;top:18px;bottom:0;width:2px;background:var(--line)}
.ac:last-child::before{display:none}
.ac i{width:12px;height:12px;border-radius:50%;margin-top:4px;margin-inline-start:4px;display:block;position:relative;z-index:1;box-shadow:0 0 0 3px #FFFFFF}
select.fsel,input.fin,textarea.fin{min-height:42px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:#FFFFFF;font-size:15px;width:100%}

/* modal (inside office) */
.scrim{position:absolute;inset:0;pointer-events:auto;background:rgba(13,26,68,.36);backdrop-filter:blur(2px);z-index:20;display:flex;justify-content:center;align-items:flex-start;padding:96px 16px 40px}
.dlg{width:980px;max-width:100%;background:var(--soft);border-radius:24px;box-shadow:0 40px 80px -30px rgba(11,31,58,.6),0 0 0 1px rgba(11,31,58,.06);overflow:hidden;display:flex;flex-direction:column}
.dlg.narrow{width:560px}
.dlgH{display:flex;align-items:center;gap:14px;padding:16px 22px;background:#FFFFFF;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dlgB{display:flex;flex-wrap:wrap}
.prevArea{flex:999 1 480px;min-width:0;padding:26px;display:flex;justify-content:center;align-items:flex-start;background:repeating-linear-gradient(45deg,#EEF1F6 0 10px,#F2F5F9 10px 20px)}
.prevSide{flex:1 1 300px;min-width:0;padding:22px;background:#FFFFFF;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.doc{width:100%;max-width:460px;background:#FFFFFF;border-radius:4px;padding:24px 26px;box-shadow:0 1px 2px rgba(20,40,70,.1),0 24px 40px -24px rgba(20,40,70,.45);display:flex;flex-direction:column;gap:10px;font-size:13px;color:#3A4659}
.doc img{width:100%;height:auto;border-radius:3px;display:block}
.why{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid #D7DEE8;background:var(--soft);font-size:13px;color:var(--fg2)}
.why[aria-pressed="true"]{background:var(--redS);border-color:#E9B4AC;color:var(--redT);font-weight:700}
.strip{display:flex;gap:10px;padding:12px 22px;background:#FFFFFF;border-top:1px solid var(--line);overflow-x:auto;align-items:center}
.strip .th{width:44px;height:56px;flex:0 0 44px}
.strip .th.on{outline:3px solid var(--blue);outline-offset:2px}

.toast{position:absolute;z-index:30;bottom:22px;inset-inline-start:24px;pointer-events:auto;display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:12px;background:var(--ink);color:#FFFFFF;font-size:14px;box-shadow:0 16px 30px -12px rgba(11,31,58,.7);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(12px);opacity:0}}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:13px;color:var(--mut);font-weight:600;text-align:right;padding:10px 14px;background:var(--soft)}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle}
.scrollx{overflow-x:auto}

/* phone app */
.app{height:100%;display:flex;flex-direction:column;position:relative;background:var(--canvas);font-size:15px}
.aph{position:relative;overflow:hidden;color:#FFFFFF;padding:18px 20px 62px;display:flex;flex-direction:column;gap:14px;background:radial-gradient(120% 120% at 100% 0%,#2A4FBF 0%,rgba(42,79,191,0) 60%),linear-gradient(165deg,#16307E 0%,#0D1A44 100%)}
.aph>*{position:relative}
.aph>.pwm{position:absolute;width:300px;height:300px;top:-110px;inset-inline-start:-90px;opacity:.10;pointer-events:none}
.aph.short{padding-bottom:18px}
.abrand{display:flex;align-items:center;gap:10px}
.abrand span:first-child{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:13px}
.abody{position:relative;z-index:1;flex:1;overflow-y:auto;padding:0 14px 100px;margin-top:-44px;display:flex;flex-direction:column;gap:12px}
.abody.flat{margin-top:0;padding-top:16px}
.abody>*{flex-shrink:0}
.abody>.ahh:first-child{color:rgba(255,255,255,.88)}
.acard{background:#FFFFFF;border-radius:20px;box-shadow:0 2px 4px rgba(13,26,68,.05),0 16px 32px -16px rgba(13,26,68,.32);overflow:hidden}
.ar{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px;border-top:1px solid #EEF1F6;width:100%;border-left:0;border-right:0;border-bottom:0;background:transparent;text-align:right}
.ar:first-child{border-top:0}
.aic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 38px}
.go{min-height:36px;padding:0 12px;border-radius:10px;border:0;font-size:14px;font-weight:700;background:var(--blue);color:#FFFFFF;white-space:nowrap}
.go.s{background:var(--blueS);color:var(--blue)}
.go.big{min-height:54px;border-radius:14px;font-size:17px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px}
.go.out{background:#FFFFFF;color:var(--fg);border:1px solid var(--line2)}
.ahh{font-size:13px;font-weight:800;color:#4A5A72;padding:0 6px}
.anav{position:absolute;bottom:14px;left:14px;right:14px;height:66px;border-radius:22px;background:rgba(255,255,255,.94);display:flex;justify-content:space-around;align-items:center;box-shadow:0 0 0 1px var(--line2),0 16px 32px -12px rgba(13,26,68,.35);z-index:5}
.anav button{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mut);font-size:12px;font-weight:600;border:0;background:transparent;min-width:64px;min-height:48px;justify-content:center}
.anav button[aria-current="page"]{color:var(--blue);font-weight:700}
.anav .cam{width:58px;height:58px;border-radius:20px;background:var(--blue);margin-top:-30px;box-shadow:0 0 0 5px var(--canvas),0 12px 24px -8px rgba(27,63,160,.8);color:#FFFFFF;min-width:0}
.cpa-phone .anav .cam{color:#FFFFFF}
.sms{position:absolute;top:10px;left:10px;right:10px;z-index:40;background:rgba(255,255,255,.97);border-radius:18px;padding:12px 14px;box-shadow:0 16px 32px -12px rgba(11,31,58,.55);display:flex;flex-direction:column;gap:4px;animation:drop .35s ease-out}
@keyframes drop{from{transform:translateY(-120%)}}
.atoast{position:absolute;bottom:96px;left:16px;right:16px;z-index:30;background:var(--ink);color:#FFFFFF;border-radius:14px;padding:12px 14px;font-size:14px;animation:up .25s ease-out}
.code{width:100%;min-height:62px;border:1.5px solid var(--line2);border-radius:14px;background:#FFFFFF;text-align:center;font-family:var(--mono);font-size:30px;letter-spacing:14px}
.bubq{align-self:flex-start;max-width:86%;background:#FFFFFF;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px}
.buba{align-self:flex-end;max-width:86%;background:var(--ink);color:#FFFFFF;border-radius:16px 16px 4px 16px;padding:12px 14px}
.prog{display:flex;gap:4px}.prog span{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}.prog span.f{background:#4ADE9B}
:is(.cpa-office,.cpa-phone,.cpa-overlay) .lnk{border:0;background:transparent;color:var(--blue);font-weight:700;font-size:14px;min-height:34px;padding:0;cursor:pointer}

/* after the material: the steps in the client file, and a stuck file */
.wks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wks li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px;font-weight:700;color:var(--mut)}
.wks .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line2)}
.wks li.done{color:var(--greenT)} .wks li.done .dot{background:var(--green);color:#FFFFFF;box-shadow:none} .wks li.skip{color:var(--mut)} .wks li.skip .dot{background:var(--soft2);color:var(--mut);box-shadow:none}
.wks li.now{background:var(--blueS);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)} .wks li.now .dot{background:var(--blue);color:#FFFFFF;box-shadow:none}
@container office (max-width: 700px){.wks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.blk{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--redS);color:var(--redT)}
.blk .sb{color:var(--redT)}

/* payroll cells, audit stages, meetings, permission toggles */
button.pcell{border:0;cursor:pointer;min-height:30px;box-shadow:inset 0 0 0 1.5px currentColor}
button.pcell.p-miss{color:var(--blue);background:#FFFFFF}
.ast{list-style:none;margin:0 0 4px;padding:0;display:flex;gap:4px}
.ast li{width:22px;height:8px;border-radius:4px;background:#E2E7EE}
.ast li.done{background:var(--green)} .ast li.now{background:var(--blue)}
.mt{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid #EEF1F6}
.mt:first-of-type{border-top:0}
.tgl{min-width:44px;min-height:34px;border-radius:10px;border:1px solid var(--line2);background:#FFFFFF;color:var(--mut);font-weight:800}
.tgl[aria-pressed="true"]{background:var(--greenS);border-color:#9ED3B6;color:var(--greenT)}
.tgl:disabled{opacity:.7;cursor:default}

/* clients: search, the list, and the client file's sections */
.srch{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;background:#FFFFFF;color:var(--mut)}
.srch:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueS)}
.srch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--fg)}
.ctbl td{padding-top:10px;padding-bottom:10px}
.crow:hover{background:#F7F9FE}
.cname{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;color:var(--fg);font-size:15px;cursor:pointer;min-height:44px}
.cname:hover b{color:var(--blue)}
.esw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.esw{align-self:flex-start;gap:4px;padding:4px;border-radius:12px;background:#E9EDF3}
.esw button{min-height:34px;padding:0 12px;border-radius:9px;border:0;background:transparent;color:var(--fg2);font-size:14px;font-weight:500}
.esw button:first-child{font-weight:700;color:var(--blue)}
.esw button[aria-pressed="true"]{background:#FFFFFF;color:var(--fg);font-weight:700;box-shadow:0 1px 3px rgba(16,24,40,.14)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:0;font-size:15px}
.kv dt{color:var(--mut);font-size:14px}
.kv dd{margin:0;font-weight:600}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@container office (max-width: 900px){.g2,.g3{grid-template-columns:1fr}}
.fold{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #EEF1F6}
.fold:first-child{border-top:0}
.fic{width:40px;height:40px;border-radius:10px;background:var(--blueS);display:grid;place-items:center;flex:0 0 40px}
/* the shared button reset sets color: inherit; the tabs set their own */
.cpa-office .tab{color:var(--fg2)}
.cpa-office .tab:hover{color:var(--fg)}
.cpa-office .tab[aria-selected="true"]{color:var(--blue);background:transparent}
.cpa-office .esw button{color:var(--fg2)}
.cpa-office .esw button:first-child{color:var(--blue)}
.cpa-office .esw button[aria-pressed="true"]{color:var(--fg)}

/* The installed app: the phone screen fills the device, with an install strip above it when that helps. */
html, body { height: 100%; margin: 0; background: #0B1F3A; }
body { font-family: 'Heebo', -apple-system, 'Segoe UI', Arial, sans-serif; }
.shell { height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
.pscreen { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #E9EDF2; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pscreen .anav { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.inst { display: flex; align-items: center; gap: 10px; padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); background: #0D1A44; color: #FFFFFF; direction: rtl; font-size: 14px; }
.inst-t { flex: 1; }
.inst-b { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: #4F7BFF; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }
.inst-x { width: 36px; height: 36px; border: 0; background: transparent; color: #C6D2E3; font: inherit; cursor: pointer; }
dialog.ios { border: 0; border-radius: 18px; padding: 20px 22px; width: min(340px, calc(100% - 32px)); direction: rtl; font-family: inherit; color: #13233B; }
dialog.ios::backdrop { background: rgba(11, 31, 58, .55); }
dialog.ios h2 { margin: 0 0 10px; font-size: 19px; }
dialog.ios ol { margin: 0 0 16px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }