@font-face{font-family:"Manrope";src:url("/fonts/Manrope.ttf") format("truetype");font-weight:200 800;font-display:swap}
:root{
  --d:#0B4A47;--t:#0E766E;--m:#7FD8C9;--ml:#E8F7F3;--mm:#CDEFE7;
  --tx:#15302E;--mu:#557370;--ln:#D6E7E3;--bg:#F3F8F7;--card:#fff;
  --red:#C23B32;--redl:#FBE9E7;--amb:#A36200;--ambl:#FFF4DE;--ok:#1C7C4E;--okl:#E3F4EA;--blue:#2C5DA8;--bluel:#E7EEFA;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Manrope",Arial,sans-serif;color:var(--tx);background:var(--bg);font-size:14px;line-height:1.45}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--tx)}
a{color:var(--t);text-decoration:none}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hide{display:none!important}
.mu{color:var(--mu)} .sm{font-size:12.5px} .b{font-weight:700} .nowrap{white-space:nowrap}

/* каркас */
.app{display:flex;min-height:100vh}
.side{width:240px;background:var(--d);color:#DDF3EE;padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;flex:0 0 240px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 0}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--m);display:grid;place-items:center;color:var(--d)}
.brand b{display:block;font-weight:800;font-size:15.5px;color:#fff;line-height:1.15}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--m);letter-spacing:.03em}
.nav{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-weight:600;font-size:13.5px;color:#CDEAE4}
.nav a:hover{background:rgba(127,216,201,.12)}
.nav a.on{background:var(--m);color:var(--d)}
.nav .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:10px;padding:1px 7px}
.side-foot{margin-top:auto;font-size:12px;color:#A9D6CD;padding:10px 8px 0;border-top:1px solid rgba(127,216,201,.25);display:flex;flex-direction:column;gap:6px}
.side-foot b{color:#fff;font-weight:700}
.side-foot button{display:flex;align-items:center;gap:8px;color:#CDEAE4;font-weight:600;padding:6px 0}
.main{flex:1;min-width:0;padding:22px 28px 70px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.top h1{font-size:22px;font-weight:800;color:var(--d);margin-right:auto;line-height:1.2}
.top h1 small{display:block;font-size:12.5px;font-weight:600;color:var(--mu)}
.sel{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:10px;padding:6px 10px;font-size:13px}
.sel select,.sel input{border:0;background:transparent;font-weight:700;color:var(--d);outline:none;max-width:220px}
.demo-bar{background:var(--ambl);color:#6E4300;border-radius:10px;padding:8px 12px;font-size:12.5px;margin-bottom:14px;display:flex;gap:8px;align-items:center}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--t);color:#fff;font-weight:700;border-radius:10px;padding:9px 14px;font-size:13px;min-height:38px;white-space:nowrap}
.btn:hover{background:var(--d)}
.btn:disabled{opacity:.55;cursor:default}
.btn.sec{background:#fff;color:var(--d);border:1px solid var(--ln)}
.btn.sec:hover{border-color:var(--t);background:var(--ml)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px;min-height:32px}
.btn.red{background:#fff;color:var(--red);border:1px solid #EDC4C0}
.btn.red:hover{background:var(--redl)}
.btn.ok{background:var(--ok)}
.btn.ghost{background:transparent;color:var(--t);padding:6px 8px;min-height:30px}
.btn.ghost:hover{background:var(--ml)}
.btns{display:flex;flex-wrap:wrap;gap:8px}

/* плитки и блоки */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border-radius:var(--r);padding:14px 16px;border:1px solid var(--ln);text-align:left;display:block;width:100%}
.kpi b{display:block;font-size:28px;font-weight:800;color:var(--d);line-height:1.1}
.kpi span{font-size:12.5px;color:var(--mu);font-weight:600}
.kpi.red b{color:var(--red)} .kpi.amb b{color:var(--amb)} .kpi.ok b{color:var(--ok)}
button.kpi:hover,.kpi.on{border-color:var(--t);box-shadow:0 0 0 1px var(--t) inset}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.grid2e{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.box{background:#fff;border-radius:var(--r);border:1px solid var(--ln);padding:16px 18px;margin-bottom:16px;min-width:0}
.box h2{font-size:15px;font-weight:800;color:var(--d);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.box h2 .r{margin-left:auto;font-weight:600;color:var(--mu);font-size:12.5px;display:flex;gap:6px;align-items:center}
.empty{color:var(--mu);font-size:13px;padding:10px 0}

/* вкладки и фишки */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:7px 12px;border-radius:20px;background:#fff;border:1px solid var(--ln);font-weight:700;font-size:12.5px;color:var(--mu);display:inline-flex;gap:6px;align-items:center}
.tab.on{background:var(--d);border-color:var(--d);color:#fff}
.tab i{font-style:normal;font-weight:800;font-size:11px;background:var(--ml);color:var(--t);border-radius:10px;padding:0 6px}
.tab.on i{background:var(--m);color:var(--d)}
.pill{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 9px;white-space:nowrap;display:inline-block}
.p-red{background:var(--redl);color:var(--red)} .p-amb{background:var(--ambl);color:var(--amb)} .p-ok{background:var(--okl);color:var(--ok)}
.p-t{background:var(--ml);color:var(--t)} .p-mu{background:#EEF2F1;color:var(--mu)} .p-blue{background:var(--bluel);color:var(--blue)} .p-d{background:var(--d);color:#fff}

/* строки списков */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ln)}
.row:first-child{border-top:0}
.row .tt{flex:1;min-width:0}
.row .tt b{display:block;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.row .tt a.name{color:var(--tx)} .row .tt a.name:hover{color:var(--t)}
.row .tt span{font-size:12.5px;color:var(--mu)}
.row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--mu)}
.row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--m)}
.dot.red{background:var(--red)} .dot.amb{background:var(--amb)} .dot.mu{background:#BFD2CE}
.tel{display:inline-flex;align-items:center;gap:4px;color:var(--t);font-weight:700}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;color:var(--mu);font-weight:700;padding:7px 8px;border-bottom:1px solid var(--ln);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--ln);vertical-align:top}
td.num,th.num{text-align:right;white-space:nowrap}
tr.clk{cursor:pointer} tr.clk:hover td{background:var(--ml)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bar{height:8px;background:#E3EDEB;border-radius:6px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--t);border-radius:6px}
.prog{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mu);font-weight:700}
.prog .bar{flex:1}

/* формы */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.form .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--mu)}
label.f input,label.f select,label.f textarea,.inp{border:1px solid var(--ln);border-radius:10px;padding:9px 11px;font-size:14px;background:#fff;font-weight:500;color:var(--tx);width:100%;outline:none;min-height:40px}
label.f input:focus,label.f select:focus,label.f textarea:focus,.inp:focus{border-color:var(--t);box-shadow:0 0 0 3px rgba(14,118,110,.12)}
label.f textarea{min-height:80px;resize:vertical}
label.chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.hint{font-size:12px;color:var(--mu);font-weight:500}
.err{background:var(--redl);color:var(--red);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600}
.okmsg{background:var(--okl);color:var(--ok);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:10px;padding:0 10px;min-height:38px;flex:1;min-width:180px;max-width:360px}
.search input{border:0;outline:none;flex:1;font-size:14px;background:transparent;min-width:0}

/* окно */
.modal-bg{position:fixed;inset:0;background:rgba(11,40,38,.45);display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow-y:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:560px;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal.wide{max-width:760px}
.modal h3{font-size:17px;font-weight:800;color:var(--d);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.modal h3 button{margin-left:auto;color:var(--mu)}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--d);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;font-size:13px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:calc(100% - 32px)}
.toast.bad{background:var(--red)}

/* вход */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(160deg,#0B4A47 0%,#0E766E 55%,#7FD8C9 140%)}
.login .card{background:#fff;border-radius:20px;padding:28px 26px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.login .brand b{color:var(--d)} .login .brand small{color:var(--t)}
.login h1{font-size:20px;font-weight:800;color:var(--d);margin:22px 0 4px}
.login form{display:flex;flex-direction:column;gap:12px;margin-top:16px}

/* карточка клиента */
.c-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.c-head .who{flex:1;min-width:220px}
.c-head .who h2{font-size:20px;margin-bottom:4px}
.c-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin-top:14px}
.c-fields div span{display:block;font-size:11.5px;color:var(--mu);font-weight:700}
.c-fields div b{font-weight:600;font-size:13.5px;word-break:break-word}
.steps{display:flex;gap:4px;margin:12px 0 2px;flex-wrap:wrap}
.steps span{flex:1;min-width:80px;text-align:center;font-size:11.5px;font-weight:700;padding:6px 4px;border-radius:8px;background:#EEF2F1;color:var(--mu)}
.steps span.done{background:var(--mm);color:var(--d)} .steps span.cur{background:var(--t);color:#fff} .steps span.arch{background:var(--redl);color:var(--red)}
.ev{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--ln);font-size:13px}
.ev:first-child{border-top:0}
.ev .when{flex:0 0 108px;color:var(--mu);font-size:12px}
.ev .what{flex:1;min-width:0}
.ev .what b{font-weight:700}
.ev .what p{color:var(--mu);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.ev.undone{opacity:.5} .ev.undone b{text-decoration:line-through}
.tpl{border:1px solid var(--ln);border-radius:10px;padding:10px 12px;margin-top:8px}
.tpl p{white-space:pre-wrap;font-size:13px;margin:6px 0}

/* расписание */
.slots{display:flex;flex-direction:column}
.slot{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--ln);align-items:flex-start}
.slot:first-child{border-top:0}
.slot .tm{flex:0 0 52px;font-weight:800;color:var(--d);padding-top:6px}
.slot .tm.past{color:#9AB3AF}
.slot .items{flex:1;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.ap{border-radius:10px;padding:7px 10px;font-size:12.5px;border:1px solid var(--ln);background:#fff;display:flex;flex-direction:column;gap:2px;min-width:180px;max-width:100%;text-align:left}
.ap b{font-size:13px}
.ap.demo{border-left:4px solid var(--amb)} .ap.course{border-left:4px solid var(--t)} .ap.session{border-left:4px solid var(--blue)}
.ap.cancelled{opacity:.5;text-decoration:line-through} .ap.attended{background:var(--okl)} .ap.no_show{background:var(--redl)}
.ap:hover{border-color:var(--t)}
.free{border:1px dashed var(--mm);color:var(--t);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.free:hover{background:var(--ml)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.week .day{background:#fff;border:1px solid var(--ln);border-radius:12px;padding:8px;min-height:140px;min-width:0}
.week .day h4{font-size:12.5px;color:var(--d);margin-bottom:6px;display:flex;justify-content:space-between}
.week .day.today{border-color:var(--t);box-shadow:0 0 0 1px var(--t) inset}
.week .day.closed{background:#F6F9F8}
.week .ap{min-width:0;padding:5px 7px;margin-bottom:5px;width:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mu);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* воронка */
.funnel .fr{display:grid;grid-template-columns:180px 1fr 90px 90px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--ln);font-size:13px}
.funnel .fr:first-child{border-top:0}
.funnel .fb{height:22px;background:var(--ml);border-radius:6px;overflow:hidden}
.funnel .fb i{display:block;height:100%;background:var(--t)}

/* мобильная навигация */
.bnav{display:none}
.mtop{display:none}
@media (max-width:900px){
  .side{display:none}
  .main{padding:14px 16px 90px}
  .mtop{display:flex;align-items:center;gap:10px;background:var(--d);color:#fff;padding:10px 16px;position:sticky;top:0;z-index:20}
  .mtop b{font-weight:800;font-size:15px}
  .mtop .sel{margin-left:auto;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
  .mtop .sel select{color:#fff} .mtop .sel select option{color:var(--tx)}
  .app{flex-direction:column}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--ln);z-index:30;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .bnav a,.bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--mu);padding:6px 2px;border-radius:10px;position:relative}
  .bnav a.on{color:var(--t);background:var(--ml)}
  .bnav .cnt{position:absolute;top:2px;right:18%;background:var(--red);color:#fff;font-size:10px;border-radius:8px;padding:0 5px}
  .top h1{font-size:19px}
  .top .hide-m{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi b{font-size:24px}
  .grid2,.grid2e{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .c-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{flex-wrap:wrap}
  .row .meta{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .row .acts{width:100%;justify-content:flex-start}
  .week{grid-template-columns:minmax(0,1fr)}
  .week .day{min-height:0}
  .funnel .fr{grid-template-columns:110px 1fr 56px;font-size:12px}
  .funnel .fr .hide-m{display:none}
  .modal-bg{padding:12px 8px}
  .modal{padding:16px}
  .search{max-width:none}
  .ev .when{flex-basis:84px}
  table.resp thead{display:none}
  table.resp tr{display:block;border-bottom:1px solid var(--ln);padding:8px 0}
  table.resp td{display:flex;justify-content:space-between;gap:10px;border:0;padding:3px 2px}
  table.resp td::before{content:attr(data-l);color:var(--mu);font-size:12px;font-weight:700}
  table.resp td.num{text-align:right}
}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;z-index:55;padding:12px 12px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.sheet a,.sheet button{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;font-weight:700;color:var(--d);width:100%}
.sheet a:hover,.sheet button:hover{background:var(--ml)}
.row.wrap{flex-wrap:wrap}
.row.wrap .meta{width:100%;flex-direction:row;justify-content:space-between;align-items:center;padding-left:20px}