/* Launch Office HQ office dashboard. Colors and fonts come from each business (--p, --d, --a, --s, --r, --hf, --bf). */
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 var(--bf);color:#1f2328;background:#f4f5f3}
.in{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2{font-family:var(--hf);margin:0;text-wrap:balance}
.ob{background:var(--d);color:#fff}.ob .in{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:14px}
.ob .mk{width:44px;height:44px;border-radius:var(--r);background:var(--p);display:grid;place-items:center;flex:none}
.ob b{display:block;font:700 19px/1.2 var(--hf)}.ob small{display:block;font-size:13px;opacity:.8;letter-spacing:.06em;text-transform:uppercase}
.ob .bk{margin-left:auto;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:8px 12px;font-size:14px}
.pv{background:#fff6d6;color:#4a3a00;font-size:14px;border-bottom:1px solid #ecd99a}.pv .in{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-block:8px}
.sm{font:600 13px var(--bf);border:1px solid #b9a65a;background:transparent;color:#4a3a00;border-radius:8px;padding:6px 12px;cursor:pointer}
main{padding-block:24px 40px;display:flex;flex-direction:column;gap:18px}
.hello h1{font-size:clamp(1.6rem,4vw,2.2rem)}.hello p{margin:2px 0 0;color:#5c636b}
.sum{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dfe1dc;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--p)}.chip.late i{background:#b42318}
.board{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}.col.main{flex:999 1 540px}.col.side{flex:1 1 300px}
.card{background:#fff;border:1px solid #dfe1dc;border-radius:12px;overflow:hidden}
.head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 6px;border-top:5px solid var(--p)}
.head h2{font-size:17px;color:var(--d)}.head .n{font-size:13px;color:#5c636b}
.note{margin:0;padding:0 18px 6px;font-size:14px;color:#5c636b}
ul.rows{list-style:none;margin:0;padding:0 18px 4px}
ul.rows li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 0;border-top:1px solid #ecede9}ul.rows li:first-child{border-top:0}
.txt{flex:1 1 220px;min-width:0;overflow-wrap:break-word}.txt b{display:block}.txt span{font-size:14px;color:#5c636b}
li.isdone .txt b{text-decoration:line-through;color:#5c636b}
.pill{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.open{background:var(--s);color:var(--d)}.pill.ok{background:#e3f4ea;color:#1f6b3e}.pill.late{background:#fde8e6;color:#b42318}.pill.due{background:#fdf0dc;color:#9a3412}
select.st{font:14px var(--bf);padding:6px 8px;border:1px solid #c9ccc5;border-radius:8px;background:#fff;color:#1f2328;min-height:36px;max-width:100%}
.btn{font:600 14px var(--bf);border-radius:8px;padding:8px 14px;min-height:40px;border:1.5px solid var(--d);background:#fff;color:var(--d);cursor:pointer}
.btn.pri{background:var(--d);color:#fff}.btn.ghost{border-color:#dfe1dc;color:#5c636b;min-height:36px;padding:6px 12px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #6b9bd1;outline-offset:2px}
.empty{margin:0;padding:4px 18px 14px;color:#5c636b;font-size:15px}
form.add{display:flex;flex-wrap:wrap;gap:10px;padding:12px 18px 16px;border-top:1px dashed #dfe1dc;background:#fafaf8}
form.add label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;flex:1 1 150px;min-width:0}form.add label.wide{flex:2 1 240px}
form.add input,form.add select{font:15px var(--bf);padding:8px 10px;border:1px solid #c9ccc5;border-radius:6px;background:#fff;color:#1f2328;min-height:40px;width:100%}
form.add .go{display:flex;align-items:flex-end}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:8px 18px 16px}
.lk{display:flex;align-items:center;min-height:46px;padding:8px 12px;border:1.5px solid var(--d);border-radius:8px;color:var(--d);text-decoration:none;font-weight:700;font-size:15px}.lk:hover{background:var(--d);color:#fff}
.todo label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1 1 auto;min-width:0}.todo input{width:20px;height:20px;margin-top:2px;accent-color:var(--d);flex:none}
.todo input:checked+span{text-decoration:line-through;color:#5c636b}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1f2328;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;z-index:20}
footer{color:#5c636b;font-size:13px;text-align:center;padding-block:0 28px}
.srch{padding:4px 18px 8px}.srch input{width:100%;font:15px var(--bf);padding:8px 12px;border:1px solid #c9ccc5;border-radius:8px;min-height:40px}
.custs{padding:0 18px 8px}details.cu{border-top:1px solid #ecede9}details.cu:first-child{border-top:0}
details.cu summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none}details.cu summary::-webkit-details-marker{display:none}
details.cu[open] summary .txt b{color:var(--p)}.cub{padding:0 0 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.cub p{margin:0;font-size:14px}.cn{color:#5c636b}
.hist{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:3px}
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:6px 18px 10px}.ms{border:1px solid #ecede9;border-radius:8px;padding:8px 10px}
.ms b{display:block;font:700 20px var(--hf);font-variant-numeric:tabular-nums}.ms span{font-size:12px;color:#5c636b}.ms.mi b{color:#1f6b3e}.ms.mo b{color:#9a3412}.ms.mneg b{color:#b42318}.ms.mnet b{color:var(--d)}

/* ---- friendlier look ---- */
body{background:linear-gradient(180deg,var(--s) 0,#f7f7f4 420px)}
.hello{background:linear-gradient(120deg,var(--d),var(--p));color:#fff;border-radius:22px;padding:22px 24px;box-shadow:0 10px 30px rgba(0,0,0,.12);position:relative;overflow:hidden}
.hello::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:var(--a);opacity:.35}
.hello h1{color:#fff;position:relative}.hello p{color:rgba(255,255,255,.85)!important;position:relative}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.chip{flex-direction:column;align-items:flex-start;gap:2px;border-radius:16px;padding:12px 16px;border:0;box-shadow:0 4px 14px rgba(0,0,0,.06);border-left:6px solid var(--p);font-weight:600}
.chip i{display:none}.chip b{font:800 26px/1.1 var(--hf);color:var(--d)}.chip span{font-size:13px;color:#5c636b}
.chip.late{border-left-color:#e11d48;background:#fff1f2}.chip.late b{color:#be123c}
.card{border:0;border-radius:20px;box-shadow:0 6px 22px rgba(0,0,0,.07)}
.head{border-top:0;padding:16px 18px 8px}.head h2{display:flex;align-items:center;gap:10px;font-size:18px}
.ic{width:34px;height:34px;flex:none;border-radius:11px;background:var(--s);color:var(--p);display:grid;place-items:center}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prog{display:flex;align-items:center;gap:10px;padding:0 18px 8px;font-size:12px;color:#5c636b;font-weight:600}
.prog .bar{flex:1;height:8px;border-radius:99px;background:#eeefe9;overflow:hidden}.prog .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p),var(--a));transition:width .4s}
.pill{border-radius:99px;padding:4px 11px}.pill.ok{background:#dcfce7;color:#15803d}.pill.late{background:#ffe4e6;color:#be123c}.pill.due{background:#fef3c7;color:#b45309}
.btn,select.st{border-radius:99px}.btn.pri{background:var(--p);border-color:var(--p)}.btn.pri:hover{background:var(--d)}
form.add{background:var(--s);border-top:0;border-radius:0 0 20px 20px}
form.add input,form.add select,.srch input{border-radius:12px}
.lk{border-radius:14px;border-width:0;background:var(--s)}.lk:hover{background:var(--p);color:#fff}
.ms{border:0;border-radius:14px;background:var(--s)}
ul.rows li{transition:background .2s}
.toast{border-radius:99px;background:var(--d);padding:12px 20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cf{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:30;animation:cf .9s ease-out forwards}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.prog .bar i,ul.rows li{transition:none}}
.wbtns{display:flex;flex-wrap:wrap;gap:10px;padding:4px 18px 18px}.wbtns .btn{text-decoration:none;display:inline-flex;align-items:center}.wsite{background:linear-gradient(160deg,#fff 60%,var(--s))}

/* command center layout: sidebar, greeting, tiles, activity, quick actions */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.snav{background:var(--d);color:#fff;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:20px 14px;box-sizing:border-box}
.slogo{display:flex;gap:11px;align-items:center;color:#fff;text-decoration:none;padding:4px 6px 18px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:10px}
.slogo .mk{width:46px;height:46px;border-radius:var(--r);background:var(--p);display:grid;place-items:center;flex:none;color:#fff}
.slogo b{display:block;font:700 17px/1.15 var(--hf)}.slogo small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:4px}
#snav{display:flex;flex-direction:column;gap:3px}
#snav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:15px}
#snav a:hover{background:rgba(255,255,255,.09);color:#fff}
#snav a.on{background:var(--p);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.ni svg,.ti svg,.aic svg,.qi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.sback{margin-top:auto;color:rgba(255,255,255,.72);font-size:14px;font-weight:600;text-decoration:none;padding:12px}
.smain{min-width:0}
#app{padding-top:22px}[id^=mod-],#customers,#money,#top{scroll-margin-top:16px}
.hello h1{font-size:clamp(1.7rem,3.6vw,2.4rem)!important}.hello .hs{margin:4px 0 0;font-size:17px;color:#fff!important;position:relative}.hello #today{font-size:14px;opacity:.85;margin-top:2px}
.chip{flex-direction:row!important;align-items:center!important;gap:14px!important;border-left:0!important;padding:14px 16px!important}
.ti{width:48px;height:48px;border-radius:14px;background:var(--p);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}.ti svg{width:24px;height:24px}
.tw{display:flex;flex-direction:column;min-width:0}.chip.late .ti{background:#e11d48}
.act{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.acts{list-style:none;margin:0;padding:2px 18px 12px}.acts li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef0ec;font-size:14.5px}.acts li:last-child{border:0}
.aic{width:32px;height:32px;border-radius:9px;background:var(--s);color:var(--p);display:grid;place-items:center;flex:none}.aic svg{width:17px;height:17px}
.ax{flex:1;min-width:0}.at{color:#6b7280;font-size:13px;white-space:nowrap}
.qbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:6px 18px 18px}
.qb{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:12px;border:0;background:var(--p);color:#fff;font:700 14.5px var(--bf);cursor:pointer;text-decoration:none;text-align:left;box-shadow:0 4px 12px rgba(0,0,0,.14);line-height:1.2}
.qb:hover{filter:brightness(1.08)}.qb.ws{background:var(--d)}.qi{flex:none}
@media(max-width:860px){.shell{display:block}.snav{position:static;height:auto;padding:12px;gap:10px}.slogo{padding:0;border:0;margin:0}
 #snav{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none;margin:0 -12px;padding:0 12px}#snav::-webkit-scrollbar{display:none}#snav a{flex:none;padding:8px 12px;font-size:14px}.sback{display:none}}
@media(max-width:420px){.qbtns{grid-template-columns:1fr}.act{grid-template-columns:1fr}}
.chip .ti{color:#fff}.sum{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
.pipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:10px;overflow-x:auto;padding:4px 18px 14px}
.pcol{background:var(--s);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:90px}.pcol.pdone{opacity:.85}
.phead{display:flex;justify-content:space-between;gap:6px;font-size:13.5px;padding:2px 4px}.phead span{color:#5c636b;white-space:nowrap}
.pcard{background:#fff;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:3px;box-shadow:0 2px 8px rgba(0,0,0,.06);border-left:4px solid var(--p);font-size:14px}.pcard span{color:#5c636b;font-size:13px}
.pcard em{font-style:normal;font-size:12px;font-weight:800;color:#b45309}.pcard.plate{border-left-color:#e11d48}.pcard.plate em{color:#be123c}
.pnav{display:flex;gap:6px;margin-top:4px}.pnav .btn{min-height:32px;padding:0 10px;font-size:13px}
.head .mine{min-height:32px;padding:0 12px;font-size:13px;margin-left:auto}
.calt{display:flex;gap:6px;margin-left:auto}.calt .btn{min-height:32px;padding:0 12px;font-size:13px}.calt .btn.on{background:var(--p);color:#fff;border-color:var(--p)}
.caln{display:flex;align-items:center;gap:6px;padding:0 18px 10px}.caln .btn{min-height:34px;padding:0 12px;font-size:13.5px}.caln b{margin-left:6px;font-size:15px}
.calw{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:8px;overflow-x:auto;padding:0 18px 16px}
.calm{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 18px 12px}.cdn{font-size:12px;font-weight:700;color:#6b7280;text-align:center}
.cday{background:var(--s);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:110px;border:2px solid transparent;font:inherit;text-align:left;color:inherit}
.calm .cday{min-height:56px;cursor:pointer;align-items:flex-start}.cday.today{border-color:var(--p)}.cday.out{opacity:.45}.cday.pick{background:var(--p);color:#fff}
.cday>b{font-size:13px}.cday i{font-style:normal;font-size:11.5px;font-weight:800;background:var(--p);color:#fff;border-radius:999px;padding:1px 8px}.cday.pick i{background:#fff;color:var(--p)}
.cnone{color:#9aa1a9;font-size:13px}.cit{display:flex;flex-direction:column;background:#fff;border-radius:8px;padding:6px 8px;text-decoration:none;color:inherit;border-left:3px solid var(--p);font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cit strong{font-weight:700}.cit span{color:#6b7280;font-size:12px}.cit.late{border-left-color:#e11d48}
.cpick{padding:0 18px 16px;display:flex;flex-direction:column;gap:6px}.cpick h3{margin:4px 0;font-size:15px}
@media(max-width:640px){.calw{grid-template-columns:repeat(7,minmax(140px,1fr))}}
/* quotes & invoices */
.docf .dlines{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.docf .dl{display:flex;gap:8px;align-items:center}
.docf .dl input{min-width:0;padding:10px;border:1px solid var(--line,#d8dce5);border-radius:10px;font:inherit;background:#fff}
.docf .dl .id{flex:3}.docf .dl .iq{flex:0 0 64px}.docf .dl .ip{flex:0 0 100px}
.docf .dlines>.btn{align-self:flex-start}
.docf .dtot{flex:1 1 100%;margin:0;font-weight:800;font-size:1.1em}
/* reports */
.rep .bars{display:flex;gap:10px;align-items:flex-end;height:160px;margin:16px 0 6px}
.rep .bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.rep .bb{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.rep .bb i{width:40%;max-width:22px;border-radius:5px 5px 0 0}
.rep .bi{background:var(--p)}.rep .bo{background:color-mix(in srgb,var(--p) 30%,#cbd5e1)}
.rep .bc span{font-size:12px;color:var(--mut,#6b7280)}
.rep .blg{font-size:13px;color:var(--mut,#6b7280);margin:0 0 10px}.rep .blg i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 6px}
.rep h3{margin:14px 18px 4px;font-size:15px}
.ftabs{flex-wrap:wrap;margin:0 18px 6px}
a.btn{text-decoration:none}

/* single-section view */
.board.one,#board.one{display:block}#board.one .col.side{display:none}#board.one .col.main{max-width:none;width:100%}