@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --teal:#0E5E6F;--teal-d:#0A4652;--teal-l:#E8F4F6;--teal-m:#BFDDE3;--yellow:#FFC93C;--yellow-l:#FFF4CC;
  --bg:#F5FAFB;--card:#FFFFFF;--line:#D9E7EA;--line2:#C9DCE0;--text:#10272E;--muted:#56707A;--dim:#8AA0A8;
  --ok:#1C7A43;--ok-l:#E3F6EA;--bad:#B42318;--bad-l:#FDECEA;--warn:#8A6100;
  --head:"Fredoka","Inter",-apple-system,"Segoe UI",sans-serif;--sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;--shadow:0 1px 2px rgba(16,39,46,.05),0 6px 20px -12px rgba(16,39,46,.18)
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.005em;margin:0}
h1{font-size:28px}h2{font-size:19px;margin:26px 0 12px}h3{font-size:16px;margin:0 0 8px}
button,input,select,textarea{font:inherit;color:inherit}

/* shell */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--teal-d);color:#fff;padding:20px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 22px;color:#fff}
.brand img{width:34px;height:34px}
.brand b{font:600 18px/1.1 var(--head);display:block}.brand small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9CC9D2}
.side nav a{display:flex;align-items:center;justify-content:space-between;color:#D5E9ED;padding:9px 12px;border-radius:10px;margin-bottom:2px;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.side nav a.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 3px 0 0 var(--yellow)}
.side nav .n{background:var(--yellow);color:#3b2a00;font-size:12px;font-weight:700;border-radius:999px;padding:0 8px;min-width:22px;text-align:center}
.side .sep{height:1px;background:rgba(255,255,255,.1);margin:12px 10px}
.side .foot{margin-top:auto;font-size:12px;color:#9CC9D2;padding:0 10px}
.side .foot form{display:inline}.side .foot button{background:none;border:0;color:#fff;padding:0;cursor:pointer;text-decoration:underline}
main{min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.75);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.topbar form{flex:1;max-width:480px}
.topbar input{width:100%;padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:#fff}
.topbar .me{margin-left:auto;color:var(--muted);font-size:14px}
.page{padding:24px 28px 60px;max-width:1240px}
.demo{background:var(--yellow);color:#3b2a00;text-align:center;font-size:13px;font-weight:600;padding:5px 10px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head p{margin:4px 0 0;color:var(--muted)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:6px;display:inline-block}

/* parts */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--teal-d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--teal)}.btn.ghost:hover{background:var(--teal-l)}
.btn.warn{background:#fff;color:var(--bad);border-color:#F1B8B2}.btn.warn:hover{background:var(--bad-l)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:#3b2a00}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
.cols>.card,.cols>div>.card:first-child,.rec>div>.card:first-child{margin-top:0}
.muted{color:var(--muted)}.dim{color:var(--dim)}.small{font-size:13px}
.flash{background:var(--teal-l);border:1px solid var(--teal-m);color:var(--teal-d);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-weight:500}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--teal-l);color:var(--teal);white-space:nowrap}
.pill.new{background:var(--yellow-l);color:var(--warn)}.pill.messaged{background:var(--teal-l);color:var(--teal)}
.pill.opened{background:#E0F0FF;color:#1F4E8C}.pill.booked{background:#EEE8FF;color:#5B3FB3}
.pill.closed,.pill.onboarded,.pill.active{background:var(--ok-l);color:var(--ok)}.pill.lost,.pill.left,.pill.ended{background:#EEF1F2;color:#5d6b70}
.pill.onboarding,.pill.prospect{background:var(--yellow-l);color:var(--warn)}.pill.paused{background:#F1F3F4;color:#5d6b70}
.pill.bad{background:var(--bad-l);color:var(--bad)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.kpi{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);color:var(--text)}
.kpi:hover{text-decoration:none;border-color:var(--teal-m)}
.kpi span{color:var(--muted);font-size:13px}.kpi b{display:block;font:600 30px/1.2 var(--head);margin-top:4px;color:var(--teal)}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.cols.even{grid-template-columns:1fr 1fr}
.todo .it{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.todo .it:last-child{border-bottom:0}
.todo .it .t{min-width:0}.todo .it .t a{font-weight:600}
.todo .grp{font:600 13px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 4px}
.todo .grp:first-child{margin-top:0}
.empty{color:var(--dim);text-align:center;padding:18px}

/* tables */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:10px 14px;background:#FAFDFD;border-bottom:1px solid var(--line)}
.table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr.link{cursor:pointer}.table tr.link:hover td{background:#F7FBFC}
.table td a.row{color:var(--text);font-weight:600}
.wrapx{overflow-x:auto}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chip{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--text);font-size:13px;font-weight:500}
.chip:hover{text-decoration:none;border-color:var(--teal)}.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.filters select,.filters input{width:auto;padding:7px 10px;border:1px solid var(--line2);border-radius:10px;background:#fff;font-size:14px}
.filters input[type=search]{min-width:240px}

/* board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(165px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.colb{background:#EDF5F7;border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:240px}
.colb.over{outline:2px dashed var(--teal);outline-offset:-4px}
.colb h3{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:2px 4px 10px}
.colb h3 small{font:600 12px var(--sans);color:var(--muted)}
.lc{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px;color:var(--text);cursor:grab;box-shadow:0 1px 2px rgba(16,39,46,.05)}
.lc:hover{text-decoration:none;border-color:var(--teal-m)}
.lc b{display:block;font-weight:600;font-size:14px}.lc .m{font-size:12px;color:var(--muted)}
.lc.drag{opacity:.5}
.colb .none{font-size:12px;color:var(--dim);text-align:center;padding:16px 4px}

/* record pages */
.rec{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
.kv div span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.kv div b{font-weight:500;word-break:break-word}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
form.inline{display:inline}
.progress{height:8px;background:var(--teal-l);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--teal);border-radius:999px}
.checklist .ck{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.checklist .ck:last-child{border-bottom:0}
.checklist button.box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line2);background:#fff;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;font-weight:700;font-size:13px}
.checklist .done button.box{background:var(--teal);border-color:var(--teal)}
.checklist .lbl{color:var(--muted)}.checklist .done .lbl{color:var(--text);font-weight:500}
.checklist .who{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.tl .n{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl .n:last-child{border-bottom:0}
.tl .ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal-l);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tl .system .ic{background:#F1F3F4;color:var(--dim)}
.tl .body{min-width:0}.tl .meta{font-size:12px;color:var(--dim)}.tl .tx{white-space:pre-wrap;word-break:break-word}
.tl .system .tx{color:var(--muted);font-size:14px}
.task{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}.task .tt{flex:1;min-width:0}
.task.late .due{color:var(--bad);font-weight:600}.task.isdone .tt{text-decoration:line-through;color:var(--dim)}
.file{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.file:last-child{border-bottom:0}.file .fn{flex:1;min-width:0;word-break:break-all}
.secret{font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em}

/* forms */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],input[type=search],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:#fff}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,94,111,.15)}
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.fg .w2{grid-column:span 2}.fg .w3{grid-column:1/-1}
.hint{font-size:12px;color:var(--dim);margin-top:4px}
fieldset{border:0;padding:0;margin:0}
.section-t{font:600 15px var(--head);margin:22px 0 2px;color:var(--teal-d)}

/* bars */
.bars .b{display:grid;grid-template-columns:160px 1fr 44px;gap:10px;align-items:center;padding:5px 0;font-size:14px}
.bars .track{height:10px;background:var(--teal-l);border-radius:999px;overflow:hidden}
.bars .track i{display:block;height:100%;background:var(--teal);border-radius:999px}
.bars .track i.y{background:var(--yellow)}
.bars .v{text-align:right;font-weight:600}
.months{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;height:160px;padding-top:10px}
.months .m{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:12px;color:var(--muted)}
.months .m .st{display:flex;gap:3px;align-items:flex-end;height:120px}
.months .m .st i{width:14px;background:var(--teal);border-radius:4px 4px 0 0;min-height:2px}
.months .m .st i.l{background:var(--yellow)}.months .m .st i.d{background:var(--teal-m)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* sign in */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(60vw 60vw at 50% -10%,#DCEFF2,transparent 70%),var(--bg)}
.auth .card{width:100%;max-width:400px;padding:28px}
.auth .logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.auth .logo img{width:40px;height:40px}.auth .logo b{font:600 20px var(--head);color:var(--teal-d)}
.auth h1{font-size:24px;margin-bottom:4px}
.auth .btn{width:100%;justify-content:center;margin-top:18px;padding:11px}
.auth .lock{font-size:12px;color:var(--dim);text-align:center;margin-top:16px}
.qr{display:flex;justify-content:center;margin:14px 0}.qr svg{width:200px;height:200px}
.code-in{font-size:24px!important;letter-spacing:.3em;text-align:center}

/* client CRM additions */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;flex:none;overflow:hidden}
.badge img{width:30px;height:30px;object-fit:contain}.badge.big{width:56px;height:56px}.badge.big img{width:46px;height:46px}
.switch{padding:0 10px 14px}.switch select{width:100%;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:14px}
.switch option{color:#10272E}
.side .foot .support{display:inline-block;background:var(--yellow);color:#3b2a00;border-radius:999px;font-size:10px;font-weight:700;padding:0 6px;margin-left:4px}
.side nav .n.bad{background:#F9D2CE;color:var(--bad)}
.note-bar{background:var(--yellow-l);border:1px solid var(--yellow);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.table.flat{box-shadow:none}.table.flat td,.table.flat th{padding:8px 10px}
.lc .call{color:#5B3FB3;font-weight:600}.bad-t{color:var(--bad);font-weight:600}.ok-t{color:var(--ok)}
.msg{padding:10px 0;border-bottom:1px solid var(--line)}.msg:last-child{border-bottom:0}.msg .mh{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msg details{margin-top:4px}.msg summary{cursor:pointer;color:var(--teal)}
pre.body{white-space:pre-wrap;word-break:break-word;font:13px/1.5 var(--sans);background:#F7FAFB;border:1px solid var(--line);border-radius:10px;padding:10px;margin:6px 0}
.copy{display:flex;gap:6px;align-items:center}.copy input{flex:1;min-width:0;font-size:13px}
label.check{display:flex;gap:8px;align-items:center;color:var(--text);font-weight:500;font-size:14px}
label.check input{width:auto}
.status-strip{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;margin-bottom:14px}
.card[id]{margin-top:14px}.cols>.card[id],.cols>div>.card[id]:first-child{margin-top:0}
code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#F1F5F6;border-radius:6px;padding:1px 5px;word-break:break-word}
.fg.tpl{grid-template-columns:1fr 2fr}
.avail{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0 6px}
.avail .day{display:flex;gap:8px;align-items:center;font-size:14px}.avail .day label{width:130px;margin:0}
.avail .day input[type=text]{width:80px;padding:6px 8px}
.week{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;overflow-x:auto}
.week .wd{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:180px}
.week .wd.today{border-color:var(--teal);box-shadow:inset 0 3px 0 var(--teal)}.week .wd.blocked{background:#F3F4F4}
.week h3{font-size:15px;margin:0}.week h3 small{font:500 12px var(--sans);color:var(--muted)}
.week .ev{display:block;background:var(--teal-l);border-radius:8px;padding:6px 8px;margin-top:8px;font-size:13px;color:var(--text)}
.week .none{font-size:12px;color:var(--dim);margin-top:10px}
/* public pages (booking, unsubscribe) */
body.pub{background:var(--bg)}
.pubhead{display:flex;align-items:center;gap:10px;padding:16px;max-width:620px;margin:0 auto}
.pubhead img{width:40px;height:40px;object-fit:contain;border-radius:10px;background:#fff}.pubhead b{font:600 20px var(--head);color:var(--teal-d)}
.pubmain{max-width:620px;margin:0 auto;padding:0 16px 40px}.pubmain h1{font-size:26px;margin:8px 0 6px}
.pubmain h2{font-size:18px}.pubfoot{max-width:620px;margin:0 auto;padding:16px;font-size:12px;color:var(--dim)}
.pub .tz{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.pub .yourtz{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.pub .day{font:600 15px var(--head);margin:18px 0 8px;color:var(--teal-d)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.slot{border:1px solid var(--teal-m);background:#fff;color:var(--teal-d);border-radius:10px;padding:12px 6px;font-weight:600;font-size:15px;cursor:pointer}
.slot:hover,.slot:focus{background:var(--teal);color:#fff;border-color:var(--teal);outline:none}
.slot small{display:block;font-weight:400;font-size:11px;opacity:.75}
.booked .when{font:600 20px var(--head);color:var(--teal-d);margin:4px 0 8px}
.btn.big{width:100%;justify-content:center;padding:13px;font-size:16px;margin-top:8px}
.flash.bad{background:var(--bad-l);border-color:#F1B8B2;color:var(--bad)}

.filters input[type=search]{width:auto;flex:0 1 320px;min-width:200px}
.hosts{display:grid;gap:6px}.hosts .check span{margin-left:4px}

@media (max-width:1000px){
  .shell{grid-template-columns:1fr}.side{position:static;height:auto}.side nav{display:flex;flex-wrap:wrap;gap:4px}.side .foot{margin-top:10px}
  .kpis{grid-template-columns:1fr 1fr}.cols,.cols.even,.rec{grid-template-columns:1fr}.kv,.fg{grid-template-columns:1fr 1fr}
  .page,.topbar{padding-left:16px;padding-right:16px}.bars .b{grid-template-columns:110px 1fr 36px}
}
@media (max-width:560px){.kv,.fg,.fg.tpl{grid-template-columns:1fr}.avail .day label{width:100px}.fg .w2{grid-column:auto}.kpis{grid-template-columns:1fr 1fr}}
/* outreach: reply labels (28 Oct 2026) */
.pill.interested{background:var(--ok-l);color:var(--ok)}.pill.not_interested{background:#EEF1F2;color:#5d6b70}
.pill.ooo{background:var(--yellow-l);color:var(--warn)}.pill.unsubscribe,.pill.bounce{background:var(--bad-l);color:var(--bad)}
.pill.other{background:#E0F0FF;color:#1F4E8C}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* 29 Oct 2026: black buttons on light (no coloured pill buttons), journey stages, chat, payroll */
.btn{background:#111;border-color:#111;color:#fff}.btn:hover{background:#333}
.btn.ghost{background:#fff;color:#111;border-color:#111}.btn.ghost:hover{background:#F2F2F2}
.chip.on{background:#111;border-color:#111;color:#fff}
.pill.thanks{background:var(--teal-l);color:var(--teal)}.pill.qualifying{background:#E0F0FF;color:#1F4E8C}
.pill.qualified{background:#E6F4EA;color:#1C7A43}.pill.chatting{background:#FFF1E0;color:#8A4B00}
.pill.not_fit{background:#EEF1F2;color:#5d6b70}.pill.review{background:var(--yellow-l);color:var(--warn)}
.pill.approved{background:var(--ok-l);color:var(--ok)}.pill.discarded{background:#EEF1F2;color:#5d6b70}.pill.setting_up{background:var(--yellow-l);color:var(--warn)}
.lc .unread{display:inline-block;background:var(--bad);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 6px;margin-left:4px}
.lc .ans{font-size:12px;color:#33474d;margin-top:2px}
.chat{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow-y:auto;padding:4px 2px}
.bub{max-width:82%;padding:8px 11px;border-radius:12px;font-size:14px;white-space:pre-wrap;word-break:break-word;border:1px solid var(--line)}
.bub.in{align-self:flex-start;background:#F4F6F7}.bub.out{align-self:flex-end;background:#fff}
.bub .bm{font-size:11px;color:var(--muted);margin-bottom:3px;white-space:normal}.bub.unread{border-color:var(--bad)}
.ans-table td{padding:5px 8px 5px 0;vertical-align:top;border-bottom:1px solid var(--line)}.ans-table td:first-child{color:var(--muted);width:45%}
.qr svg{width:260px;height:260px;max-width:100%}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.filing{border:2px solid #111;border-radius:var(--r);padding:16px;background:#FAFAFA}
.secret-note{font-size:12px;color:var(--muted)}
.qpage label{font-weight:600;margin-top:14px;display:block}.qpage .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.qpage .opts label{font-weight:500;margin:0;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;background:#fff;cursor:pointer}
